diff --git a/code/package-lock.json b/code/package-lock.json
index e34d9bb1c..c926624dd 100644
--- a/code/package-lock.json
+++ b/code/package-lock.json
@@ -9,7 +9,6 @@
       "version": "1.0.0",
       "dependencies": {
         "@babel/eslint-parser": "^7.18.9",
-        "babel-eslint": "^10.1.0",
         "eslint": "^8.21.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-plugin-import": "^2.26.0",
@@ -17,7 +16,8 @@
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "styled-components": "^5.3.10"
       },
       "devDependencies": {
         "eslint-plugin-flowtype": "^8.0.3",
@@ -131,7 +131,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
       "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.18.6"
       },
@@ -2155,6 +2154,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.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -4637,34 +4659,6 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
-    "node_modules/babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "peerDependencies": {
-        "eslint": ">= 4.12.1"
-      }
-    },
-    "node_modules/babel-eslint/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@@ -4897,6 +4891,26 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz",
+      "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.0"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
+    "node_modules/babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
     "node_modules/babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -5234,6 +5248,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5721,6 +5743,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
@@ -5929,6 +5959,16 @@
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
       "dev": true
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -8545,6 +8585,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",
@@ -11725,8 +11773,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",
@@ -13970,8 +14017,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",
@@ -15236,6 +15282,11 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15645,6 +15696,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",
@@ -17490,7 +17570,6 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
       "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
-      "dev": true,
       "requires": {
         "@babel/types": "^7.18.6"
       }
@@ -18822,6 +18901,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.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -20687,26 +20789,6 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
-    "babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
-        }
-      }
-    },
     "babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@@ -20881,6 +20963,23 @@
         "@babel/helper-define-polyfill-provider": "^0.3.2"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.1.tgz",
+      "integrity": "sha512-c8lJlszObVQPguHkI+akXv8+Jgb9Ccujx0EetL7oIvwU100LxO6XAGe45qry37wUL40a5U9f23SYrivro2XKhA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.0",
+        "@babel/helper-module-imports": "^7.16.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.0"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -21149,6 +21248,11 @@
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
       "dev": true
     },
+    "camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -21521,6 +21625,11 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
     "css-declaration-sorter": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
@@ -21651,6 +21760,16 @@
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
       "dev": true
     },
+    "css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -23571,6 +23690,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",
@@ -25924,8 +26051,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",
@@ -27399,8 +27525,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",
@@ -28356,6 +28481,11 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -28670,6 +28800,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",
diff --git a/code/package.json b/code/package.json
index 7214c8fde..d8040f421 100644
--- a/code/package.json
+++ b/code/package.json
@@ -11,7 +11,8 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.10"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/code/public/index.html b/code/public/index.html
index e6730aa66..dd07a81e4 100644
--- a/code/public/index.html
+++ b/code/public/index.html
@@ -13,7 +13,12 @@
       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>The Arthouse Cinema Generator</title>
+    <meta property="og:title" content="The Arthouse Cinema Generator">       
+    <meta property="og:description" content="Survey Project by Vera Sjunnesson">
+    <meta property="og:image" content="https://i.postimg.cc/WzMST7pW/survey-project.png">
+    <link rel="stylesheet" href="https://use.typekit.net/pou7yve.css">
+    <script src="https://kit.fontawesome.com/4af0a9e375.js" crossorigin="anonymous"></script>
   </head>
 
   <body>
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..2e4f73ada 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,154 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import './index.css'
+
+import isabellefilms from './isabellefilms.json';
+import generalfilms from './generalfilms.json';
+
+import Intro from './components/Intro'
+import Name from './components/Name'
+import Isabelle from './components/Isabelle'
+import Theme from './components/Theme'
+import Location from './components/Location';
+import MixedQuestions from './components/MixedQuestions'
+import Summary from './components/Summary'
+import Result1 from './components/Result1';
+import Result2 from './components/Result2';
+import ProgressBar from './components/ProgressBar';
 
 export const App = () => {
+  const [counter, setCounter] = useState(0)
+  const [name, setName] = useState('');
+  const [isabelle, setIsabelle] = useState('');
+  const [isabelleTheme, setIsabelleTheme] = useState('');
+  const [theme, setTheme] = useState('');
+  const [continent, setContinent] = useState('');
+  const [country, setCountry] = useState('');
+  const [open, setOpen] = useState('');
+  const [genre, setGenre] = useState('');
+
+  const handleGoback = () => {
+    setCounter(counter - 1);
+  }
+
+  const handleReset = () => {
+    setCounter(0);
+    setName('');
+    setIsabelle('');
+    setIsabelleTheme('');
+    setTheme('');
+    setContinent('');
+    setCountry('');
+    setOpen('');
+    setGenre('');
+  };
+
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
-  );
+    <>
+      {counter !== 7 && (<ProgressBar counter={counter} totalCount={5} />)}
+      <div className="main-wrapper">
+        {counter === 0 && (
+          <Intro counter={counter} setCounter={setCounter} />
+        )}
+        {counter === 1 && (
+          <Name
+            name={name}
+            setName={setName}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 2 && (
+          <Isabelle
+            isabelle={isabelle}
+            setIsabelle={setIsabelle}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 3 && (
+          <Theme
+            isabelle={isabelle}
+            isabelleTheme={isabelleTheme}
+            setIsabelleTheme={setIsabelleTheme}
+            theme={theme}
+            setTheme={setTheme}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 4 && (
+          <Location
+            isabelleTheme={isabelleTheme}
+            continent={continent}
+            setContinent={setContinent}
+            country={country}
+            setCountry={setCountry}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 5 && (
+          <MixedQuestions
+            continent={continent}
+            open={open}
+            setOpen={setOpen}
+            genre={genre}
+            setGenre={setGenre}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 6 && (
+          <Summary
+            name={name}
+            isabelle={isabelle}
+            isabelleTheme={isabelleTheme}
+            theme={theme}
+            continent={continent}
+            country={country}
+            open={open}
+            genre={genre}
+            counter={counter}
+            setCounter={setCounter} />
+        )}
+        {counter === 7 && isabelle === 'love' ? (
+          <Result1
+            isabelleTheme={isabelleTheme}
+            continent={continent}
+            open={open}
+            isabellefilms={isabellefilms} />
+        ) : counter === 7 && (
+          <Result2
+            theme={theme}
+            country={country}
+            genre={genre}
+            generalfilms={generalfilms} />
+        )}
+        {counter > 0 && counter < 6 && (
+          <div className="button-container">
+            <button
+              type="button"
+              onClick={handleGoback}
+              tabIndex="0"
+              aria-label="Go backwards button">
+              <i className="fa-solid fa-chevron-left" />
+            </button>
+            <button
+              type="button"
+              onClick={handleReset}
+              tabIndex="0"
+              aria-label="Reset Button">
+              Reset All
+            </button>
+          </div>)}
+        {counter === 7 && (
+          <div className="button-container">
+            <button
+              type="button"
+              onClick={handleReset}
+              tabIndex="0"
+              aria-label="Reset Button">
+              Do it again
+            </button>
+          </div>)}
+      </div>
+    </>
+  )
 }
+
diff --git a/code/src/components/Intro.js b/code/src/components/Intro.js
new file mode 100644
index 000000000..3924c7d1a
--- /dev/null
+++ b/code/src/components/Intro.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Background } from './styles/Background';
+
+const Intro = ({ counter, setCounter }) => {
+  const handleIncreaseCounterClick = () => {
+    setCounter(counter + 1);
+  }
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper">
+        <h1>
+          <span>The Arthouse Cinema Generator</span>
+        </h1>
+        <p>
+          <span>Answer these questions to explore my handpicked favorites</span>
+        </p>
+        <button
+          type="button"
+          onClick={handleIncreaseCounterClick}
+          tabIndex="0"
+          aria-label="Start button">
+            Start
+        </button>
+      </div>
+    </Background>)
+}
+
+export default Intro
\ No newline at end of file
diff --git a/code/src/components/Isabelle.js b/code/src/components/Isabelle.js
new file mode 100644
index 000000000..d7390ff62
--- /dev/null
+++ b/code/src/components/Isabelle.js
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Background } from './styles/Background';
+
+const Isabelle = ({ isabelle, setIsabelle, counter, setCounter }) => {
+  const [error, setError] = useState(false);
+  const handleRadioChange = (event) => {
+    setIsabelle(event.target.value)
+  }
+
+  const handleIncreaseCounterClick = () => {
+    if (isabelle === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper isabelle">
+        <h3><span>What do you think about Isabelle Huppert&apos;s acting?</span></h3>
+        <form className="isabelle-form">
+          {error && (<p>* Please select an option</p>)}
+          <label key="loveHer" htmlFor="loveHer">
+            <input
+              type="radio"
+              id="loveHer"
+              value="love"
+              role="button"
+              tabIndex={0}
+              onChange={handleRadioChange}
+              checked={isabelle === 'love'} />
+            I love her
+          </label>
+          <label key="whoIsShe" htmlFor="whoIsShe">
+            <input
+              type="radio"
+              id="whoIsShe"
+              value="don't know much"
+              role="button"
+              tabIndex={0}
+              onChange={handleRadioChange}
+              checked={isabelle === "don't know much"} />
+            Who is she?
+          </label>
+        </form>
+        <button
+          type="button"
+          onClick={handleIncreaseCounterClick}
+          aria-label="Next button">
+        Next
+        </button>
+      </div>
+    </Background>
+  );
+}
+
+export default Isabelle
\ No newline at end of file
diff --git a/code/src/components/Location.js b/code/src/components/Location.js
new file mode 100644
index 000000000..3c02003b6
--- /dev/null
+++ b/code/src/components/Location.js
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Background } from './styles/Background';
+
+const Location = ({
+  isabelleTheme,
+  continent,
+  setContinent,
+  country,
+  setCountry,
+  counter,
+  setCounter
+}) => {
+  const [error, setError] = useState(false);
+
+  const nextStepContinent = () => {
+    if (continent === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  const nextStepCountry = () => {
+    if (country === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper location">
+        {isabelleTheme ? (
+          <form>
+            <h3>
+              <span>
+                In what continent do you want your Isabelle Huppert film to be set?
+              </span>
+            </h3>
+            {error && (<p>* Please select an option</p>)}
+            <label htmlFor="continent">
+              <select
+                id="continent"
+                aria-label="Drop down menu to select a continent"
+                onChange={(event) => setContinent(event.target.value)}
+                value={continent}>
+                <option value="" disabled>Select continent</option>
+                <option value="an European">Europe</option>
+                <option value="an Asian">Asia</option>
+                <option value="an African">Africa</option>
+                <option value="an undecided">Any continent</option>
+              </select>
+            </label>
+            <button
+              type="button"
+              onClick={nextStepContinent}
+              aria-label="Next button">
+            Next
+            </button>
+          </form>
+        ) : (
+          <form>
+            <h3><span>Where do you want your film to be set?</span></h3>
+            {error && (<p>* Please select an option</p>)}
+            <label htmlFor="country">
+              <select
+                id="country"
+                aria-label="Drop down menu to select a country"
+                onChange={(event) => setCountry(event.target.value)}
+                value={country}>
+                <option value="" disabled>Select genre</option>
+                <option value="in Iran">Iran</option>
+                <option value="in Austria">Austria</option>
+                <option value="in Belgium">Belgium</option>
+                <option value="in the UK">the UK</option>
+                <option value="in Taiwan">Taiwan</option>
+                <option value="in Australia">Australia</option>
+                <option value="anywhere in the world">Anywhere in the world</option>
+              </select>
+            </label>
+            <button
+              type="button"
+              onClick={nextStepCountry}
+              aria-label="Next button">
+              Next
+            </button>
+          </form>
+        )}
+      </div>
+    </Background>
+  );
+};
+
+export default Location
\ No newline at end of file
diff --git a/code/src/components/MixedQuestions.js b/code/src/components/MixedQuestions.js
new file mode 100644
index 000000000..c446c83a1
--- /dev/null
+++ b/code/src/components/MixedQuestions.js
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Background } from './styles/Background';
+
+const genres = ['Drama', 'Comedy', 'Thriller', 'Mystery', 'Sci-Fi', 'Horror', 'Fantasy', 'Romance', 'Social realism', 'Any']
+const MixedQuestions = ({
+  continent,
+  open,
+  setOpen,
+  genre,
+  setGenre,
+  counter,
+  setCounter
+}) => {
+  const [error, setError] = useState(false);
+
+  const submitOpen = () => {
+    setCounter(counter + 1);
+    if (open === '') {
+      setOpen('not open');
+    }
+  }
+
+  const handleCheckBox = (event) => {
+    setOpen(event.target.value);
+  }
+
+  const submitGenre = () => {
+    if (genre === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper mixed">
+        {continent ? (
+          <>
+            <h3>
+              <span>
+                Are you basically open to anything?
+              </span>
+            </h3>
+            <form className="form-mixed">
+              <label htmlFor={open}>
+                <input
+                  id={open}
+                  type="checkbox"
+                  checked={open}
+                  tabIndex="0"
+                  aria-checked={open}
+                  value="open"
+                  onChange={handleCheckBox} />
+                  Check here
+              </label>
+            </form>
+            <button
+              type="submit"
+              onClick={submitOpen}
+              aria-label="Submit answers button">
+              Submit Answers
+            </button>
+          </>
+        ) : (
+          <>
+            <h3><span>What genres are you interested in?</span></h3>
+            <form className="form-mixed">
+              {error && (<p>* Please select an option</p>)}
+              {genres.map((option) => (
+                <label key={option} htmlFor={option}>
+                  <input
+                    type="radio"
+                    value={option}
+                    id={option}
+                    onChange={(event) => setGenre(event.target.value)}
+                    checked={genre === option} />
+                  {option}
+                </label>
+              ))}
+            </form>
+            <button
+              type="submit"
+              onClick={submitGenre}
+              aria-label="Submit answers button">
+              Submit Answers
+            </button>
+          </>
+        )}
+      </div>
+    </Background>
+  );
+};
+
+export default MixedQuestions;
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
new file mode 100644
index 000000000..8f26702c0
--- /dev/null
+++ b/code/src/components/Name.js
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { Background } from './styles/Background';
+
+const Name = ({ name, setName, counter, setCounter }) => {
+  const [error, setError] = useState(false);
+
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  }
+
+  const handleIncreaseCounterClick = () => {
+    if (name === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper name">
+        <h2><span>What is your name?</span></h2>
+        <label htmlFor="nameInput">
+          <input
+            className="name-input"
+            type="text"
+            placeholder={!error ? 'Type your name here...' : '* Please enter your name'}
+            value={name}
+            id="nameInput"
+            onChange={handleNameChange} />
+        </label>
+        <button
+          type="button"
+          onClick={handleIncreaseCounterClick}
+          aria-label="Next button">
+          Next
+        </button>
+      </div>
+    </Background>
+  );
+}
+
+export default Name
diff --git a/code/src/components/ProgressBar.js b/code/src/components/ProgressBar.js
new file mode 100644
index 000000000..3748e4d5e
--- /dev/null
+++ b/code/src/components/ProgressBar.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const ProgressBar = ({ counter, totalCount }) => {
+  return (
+    <div className="progress-bar">
+      <div style={{ width: `${(counter / totalCount) * 100}%` }} />
+    </div>
+  )
+}
+
+export default ProgressBar
+
diff --git a/code/src/components/Result1.js b/code/src/components/Result1.js
new file mode 100644
index 000000000..6a2f596a4
--- /dev/null
+++ b/code/src/components/Result1.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+const Result1 = ({
+  isabelleTheme,
+  continent,
+  open,
+  isabellefilms
+}) => {
+  const filteredIsabelleArray = isabelleTheme === 'Anything' ? isabellefilms.films : isabellefilms.films.filter((item) => item.themes.includes(isabelleTheme));
+
+  const filteredContinentArray = continent === 'an undecided' ? filteredIsabelleArray : filteredIsabelleArray.filter((item) => item.continent_set === continent);
+
+  const openArray = open === 'not open' ? filteredContinentArray : isabellefilms.films
+
+  const i = Math.floor(Math.random() * openArray.length);
+
+  return (
+    <div className="container-result">
+      <h2>Result</h2>
+      <hr />
+      {openArray.length !== 0 ? (
+        <div className="result-box">
+          <a
+            href={openArray[i].url}
+            target="_blank"
+            rel="noreferrer">
+            <img
+              src={openArray[i].poster}
+              alt="film poster with link"
+              className="posterimg"
+              aria-label="Film poster with link to IMDB" />
+          </a>
+          <div className="result-text">
+            <h4>{openArray[i].name}</h4>
+            <div className="result-details">
+              <p>Directed by {openArray[i].director}</p>
+              <p>{openArray[i].details}</p>
+            </div>
+            <p className="synopsis-paragraph">{openArray[i].synopsis}</p>
+          </div>
+        </div>
+      ) : (
+        <div className="result-nothing">
+          <p>Sorry, there was no match.</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Result1;
\ No newline at end of file
diff --git a/code/src/components/Result2.js b/code/src/components/Result2.js
new file mode 100644
index 000000000..ca4e81e3e
--- /dev/null
+++ b/code/src/components/Result2.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+const Result2 = ({
+  theme,
+  country,
+  genre,
+  generalfilms
+}) => {
+  const filteredThemeArray = theme === 'Anything' ? generalfilms.films : generalfilms.films.filter((item) => item.themes.includes(theme));
+
+  const filteredCountryArray = country === 'anywhere in the world' ? filteredThemeArray : filteredThemeArray.filter((item) => item.country_set === country);
+
+  const filteredGenreArray = genre === 'Any' ? filteredCountryArray : filteredCountryArray.filter((item) => item.genres.includes(genre));
+
+  const i = Math.floor(Math.random() * filteredGenreArray.length);
+
+  return (
+    <div className="container-result">
+      <h2>Result</h2>
+      <hr />
+      {filteredGenreArray.length !== 0 ? (
+        <div className="result-box">
+          <a
+            href={filteredGenreArray[i].url}
+            target="_blank"
+            rel="noreferrer">
+            <img
+              src={filteredGenreArray[i].poster}
+              alt="film poster with link"
+              className="posterimg"
+              aria-label="Film poster with link to IMDB" />
+          </a>
+          <div className="result-text">
+            <h4>{filteredGenreArray[i].name}</h4>
+            <div className="result-details">
+              <p>Directed by {filteredGenreArray[i].director}</p>
+              <p>{filteredGenreArray[i].details}</p>
+            </div>
+            <p className="synopsis-paragraph">{filteredGenreArray[i].synopsis}</p>
+          </div>
+        </div>
+      ) : (
+        <div className="result-nothing">
+          <p>Sorry, there was no match.</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Result2;
\ No newline at end of file
diff --git a/code/src/components/Summary.js b/code/src/components/Summary.js
new file mode 100644
index 000000000..b1b84f98b
--- /dev/null
+++ b/code/src/components/Summary.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import { Background } from './styles/Background';
+
+const Summary = ({
+  name,
+  isabelle,
+  isabelleTheme,
+  theme,
+  continent,
+  country,
+  open,
+  genre,
+  counter,
+  setCounter
+}) => {
+  const nextStepResult = () => {
+    setCounter(counter + 1);
+  }
+
+  const genreToLowerCase = genre.toLowerCase();
+  const isabelleThemeToLowerCase = isabelleTheme.toLowerCase();
+  const themeToLowerCase = theme.toLowerCase();
+
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper summary">
+        <h2>
+          <span>Summary</span>
+        </h2>
+        <br />
+        {open ? (
+          <>
+            <div className="summary-box">
+              <p>
+                <span>
+                  Your name is&nbsp;
+                  <span className="summary-span">
+                    {name}
+                  </span>
+                  &nbsp;and you&nbsp;
+                  <span className="summary-span">
+                    {isabelle}
+                  </span>
+                  &nbsp;Isabelle Huppert. Tonight you would like to watch&nbsp;
+                  <span className="summary-span">
+                    {continent}
+                  </span>
+                  &nbsp;film about&nbsp;
+                  <span className="summary-span">
+                    {isabelleThemeToLowerCase}
+                  </span>
+                  &nbsp;but you are&nbsp;
+                  <span className="summary-span">
+                    {open}
+                  </span>
+                  &nbsp;to anything.
+                </span>
+              </p>
+            </div>
+            <br />
+            <p>
+              <span>Okay, lets see what we can do for you!👇</span>
+            </p>
+          </>
+        ) : (
+          <>
+            <div className="summary-box">
+              <p>
+                <span className="summary-main-span">
+                  Your name is&nbsp;
+                  <span className="summary-span">
+                    {name}
+                  </span>
+                  &nbsp;and you&nbsp;
+                  <span className="summary-span">
+                    {isabelle}
+                  </span>
+                    &nbsp;about Isabelle Huppert and tonight you want to watch a&nbsp;
+                  <span className="summary-span">
+                    {genreToLowerCase}
+                  </span>
+                  &nbsp;film set&nbsp;
+                  <span className="summary-span">
+                    {country}
+                  </span>
+                    &nbsp;about&nbsp;
+                  <span className="summary-span">
+                    {themeToLowerCase}.
+                  </span>
+                </span>
+              </p>
+            </div>
+            <br />
+            <p className="next">
+              <span>Okay, lets see what we can do for you!👇</span>
+            </p>
+          </>
+        )}
+        <button
+          type="submit"
+          onClick={nextStepResult}
+          aria-label="Submit button">
+            See result
+        </button>
+      </div>
+    </Background>
+  );
+}
+
+export default Summary;
+
diff --git a/code/src/components/Theme.js b/code/src/components/Theme.js
new file mode 100644
index 000000000..9979ed69b
--- /dev/null
+++ b/code/src/components/Theme.js
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Background } from './styles/Background';
+
+const isabelleThemes = ['Friendship', 'Mind Games', 'Provocation / Eroticism', 'Coming of age', 'Trying to find oneself', 'The stranger', 'Destructive relationships', 'On the verge of a nervous breakdown', 'Anything']
+const themesGeneral = ['Coming of age', 'Social issues', 'The existence', 'Provocation / Eroticism', 'Crime', 'Relationships', 'Social Satire', 'History', 'Loneliness', 'Anything']
+
+const Theme = ({
+  isabelle,
+  isabelleTheme,
+  setIsabelleTheme,
+  theme,
+  setTheme,
+  counter,
+  setCounter
+}) => {
+  const [error, setError] = useState(false);
+
+  const nextStepIsabelle = () => {
+    if (isabelleTheme === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  const nextStepGeneral = () => {
+    if (theme === '') {
+      setError(true)
+    } else {
+      setCounter(counter + 1);
+    }
+  }
+
+  return (
+    <Background counter={counter}>
+      <div className="survey-wrapper theme">
+        {isabelle === 'love' ? (
+          <>
+            <h3><span>What theme do you want your Isabelle Huppert film to have?</span></h3>
+            <form className="theme-form isabelle">
+              {error && (<p>* Please select an option</p>)}
+              {isabelleThemes.map((option) => (
+                <label key={option} htmlFor={option}>
+                  <input
+                    type="radio"
+                    id={option}
+                    value={option}
+                    role="button"
+                    tabIndex={0}
+                    onChange={(event) => setIsabelleTheme(event.target.value)}
+                    checked={isabelleTheme === option} />
+                  {option}
+                </label>
+              ))}
+            </form>
+            <button
+              type="button"
+              onClick={nextStepIsabelle}
+              aria-label="Next button">
+              Next
+            </button>
+          </>
+        ) : (
+          <div className="survey-wrapper general">
+            <h3><span>What themes are you curious about?</span></h3>
+            <form className="theme-form general">
+              {error && (<p>* Please select an option</p>)}
+              {themesGeneral.map((option) => (
+                <label key={option} htmlFor={option}>
+                  <input
+                    type="radio"
+                    id={option}
+                    value={option}
+                    role="button"
+                    tabIndex={0}
+                    onChange={(event) => setTheme(event.target.value)}
+                    checked={theme === option} />
+                  {option}
+                </label>
+              ))}
+            </form>
+            <button
+              type="button"
+              onClick={nextStepGeneral}
+              aria-label="Next button">
+              Next
+            </button>
+          </div>
+        )}
+      </div>
+    </Background>
+  );
+};
+
+export default Theme
diff --git a/code/src/components/styles/Background.js b/code/src/components/styles/Background.js
new file mode 100644
index 000000000..1a7e6feb5
--- /dev/null
+++ b/code/src/components/styles/Background.js
@@ -0,0 +1,47 @@
+import styled, { keyframes, css } from 'styled-components';
+import image1 from 'images/buildings-sun.jpg'
+import image2 from 'images/toothbrush.jpg'
+import image3 from 'images/curtains.jpg'
+import image4 from 'images/house.jpg'
+import image5 from 'images/boat.jpeg'
+import image6 from 'images/green-building.jpg'
+import image7 from 'images/traffic.jpg'
+
+const FadeIn = keyframes`
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+`
+
+export const Background = styled.div`
+  height: 100vh;
+  background-size: cover;
+  min-height: 100 %;
+  overflow: hidden;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: ${FadeIn} 2s ease-in forwards;
+  ${({ counter }) => counter === 0 && css`
+      background-image: url(${image1});
+    `}
+    ${({ counter }) => counter === 1 && css`
+      background-image: url(${image2});
+    `}
+    ${({ counter }) => counter === 2 && css`
+      background-image: url(${image3});
+    `}
+    ${({ counter }) => counter === 3 && css`
+      background-image: url(${image4});
+    `}
+    ${({ counter }) => counter === 4 && css`
+      background-image: url(${image5});
+    `}
+    ${({ counter }) => counter === 5 && css`
+      background-image: url(${image6});
+    `}
+    ${({ counter }) => counter === 6 && css`
+      background-image: url(${image7});
+    `}
+`
+
diff --git a/code/src/generalfilms.json b/code/src/generalfilms.json
new file mode 100644
index 000000000..06cb991a6
--- /dev/null
+++ b/code/src/generalfilms.json
@@ -0,0 +1,212 @@
+{
+    "films": [
+                {
+            "name": "Babyteeth",
+            "id": 1,
+            "url": "https://m.imdb.com/title/tt8399664/?ref_=fn_al_tt_1",
+            "poster": "https://m.media-amazon.com/images/I/91twaB5JYCL._AC_SY879_.jpg",
+            "director": "Shannon Murphy",
+            "details": "Australia, 2019",
+            "themes": ["Existence", "Coming of age", "Relationships"],
+            "country_set": "in Australia",
+            "genres": ["Comedy", "Drama"],
+            "synopsis": "When seriously ill teenager Milla falls madly in love with smalltime drug dealer Moses, it’s her parents’ worst nightmare. But as Milla’s first brush with love brings her a new lust for life, things get messy and traditional morals go out the window.",
+            "trailer": "https://www.youtube.com/watch?v=M6E8gPmz7n4"
+        },
+        {
+            "name": "Memoria",
+            "id": 2,
+            "url": "https://www.imdb.com/title/tt8399288/?ref_=nm_flmg_t_7_act",
+            "poster": "https://m.media-amazon.com/images/I/71vXZ+oy9GL._AC_SX679_.jpg",
+            "director": "Apichatpong Weerasethakul",
+            "details": "Colombia, Thailand, 2021",
+            "themes": ["The existence"],
+            "country_set": "in Columbia",
+            "genres": ["Drama", "Mystery", "Sci-Fi"],
+            "synopsis": "A woman from Scotland, while traveling in Colombia, begins to notice strange sounds. Soon she begins to think about their appearance.",
+            "trailer": "https://www.youtube.com/watch?v=zyVe11x5y9o"
+        },
+        {
+            "name": "Naked",
+            "id": 3,
+            "url": "https://m.imdb.com/title/tt0107653/?ref_=nv_sr_srsg_0",
+            "poster": "https://m.media-amazon.com/images/I/61VjY824xBL._AC_SX679_.jpg",
+            "director": "Mike Leigh",
+            "details": "United Kingdom, 1993",
+            "themes": ["Social Satire", "Provocation / Eroticism"],
+            "country_set": "in the UK",
+            "genres": ["Drama", "Comedy"],
+            "synopsis": "Johnny is a charming and eloquent, but relentlessly vicious, drifter. Rejecting anyone who might care for him, the volcanic Johnny hurls himself around London on a nocturnal odyssey, colliding with a succession of other desperate and dispossessed people and scorching everyone in his path.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+         {
+            "name": "Bleeder",
+            "id": 4,
+            "url": "https://www.imdb.com/title/tt0161292/",
+            "poster": "https://m.media-amazon.com/images/I/7151ZZNwpbL._SY679_.jpg",
+            "director": "Nicolas Winding Refn",
+            "details": "Denmark, 1999",
+            "themes": ["Crime", "Relationships"],
+            "country_set": "in Denmark",
+            "genres": ["Drama", "Thriller", "Horror"],
+            "synopsis": "Two stories for the price of one: Lenny works in a video shop and tries to get aquainted with the waitress Lea. Leo beats his pregnant wife, Louise, which is a VERY bad idea, as her brother, Louis, is a violent racist.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+        {
+            "name": "L'enfant",
+            "id": 5,
+            "url": "https://www.imdb.com/title/tt0456396/?ref_=nv_sr_srsg_0",
+            "poster": "https://m.media-amazon.com/images/I/519ND3S0K4L.jpg",
+            "director": "Jean-Pierre Dardenne and Luc Dardenne",
+            "details": "Belgium, France, 2005",
+            "themes": ["Social issues", "Relationships"],
+            "country_set": "in Belgium",
+            "genres": ["Drama", "Thriller", "Social realism"],
+            "synopsis": "Bruno and Sonia, a young couple living off her benefit and the thefts committed by his gang, have a new source of money: their newborn son.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+        {
+            "name": "Taste of Cherry",
+            "id": 6,
+            "url": "https://www.imdb.com/title/tt0120265/?ref_=fn_al_tt_1",
+            "poster": "https://m.media-amazon.com/images/I/71-YIeg1TXL._SX522_.jpg",
+            "director": "Abbas Kiarostami",
+            "details": "Iran, 1997",
+            "themes": ["Social issues", "Relationships", "The existence"],
+            "country_set": "in Iran",
+            "genres": ["Drama", "Social realism"],
+            "synopsis": "An Iranian man drives his car in search of someone who will quietly bury him under a cherry tree after he commits suicide.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "The Hole",
+            "id": 7,
+            "url": "https://www.imdb.com/title/tt0156610/?ref_=nv_sr_srsg_9",
+            "poster": "https://media.wbur.org/wp/2020/09/0911_TheHole2-1000x685.jpg",
+            "director": "Ming-liang Tsai",
+            "details": "Taiwan, France, 1998",
+            "themes": ["Social issues", "Relationships", "The existence"],
+            "country_set": "in Taiwan",
+            "genres": ["Romance", "Fantasy"],
+            "synopsis": "While never-ending rain and a strange disease spread by cockroaches ravage Taiwan, a plumber makes a hole between two apartments and the inhabitants of each form a unique connection, enacted in musical numbers.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "Under the skin",
+            "id": 8,
+            "url": "https://www.imdb.com/title/tt1441395/?ref_=nv_sr_srsg_0",
+            "poster": "https://m.media-amazon.com/images/I/71j0MnuwVwL._AC_SY879_.jpg",
+            "director": "Jonathan Glazer",
+            "details": "United Kingdom, United States, 2013",
+            "themes": ["Provocation / Eroticism", "Relationships", "The existence", "Crime"],
+            "country_set": "in the UK",
+            "genres": ["Sci-Fi", "Thriller", "Horror"],
+            "synopsis": "A mysterious young woman seduces lonely men in the evening hours in Scotland. However, events lead her to begin a process of self-discovery.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "Fantastic Planet",
+            "id": 9,
+            "url": "https://www.imdb.com/title/tt0070544/?ref_=fn_al_tt_1",
+            "poster": "https://s3.amazonaws.com/criterion-production/films/3b384c601af6defbccd31020fb482b46/d5g8lS9xQQQyGpGaTma0HnkBycZvYo_large.jpg",
+            "director": "René Laloux",
+            "details": "France, Czechoslovakia, 1973",
+            "themes": ["Social satire", "Relationships", "Existence"],
+            "country_set": "in France",
+            "genres": ["Sci-Fi"],
+            "synopsis": "On a faraway planet where blue giants rule, oppressed humanoids rebel against their machine-like leaders.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "Chinese Roulette",
+            "id": 10,
+            "url": "https://www.imdb.com/title/tt0074312/?ref_=nv_sr_srsg_0",
+            "poster": "https://m.media-amazon.com/images/I/51B8RXVQQ4L.jpg",
+            "director": "Rainer Werner Fassbinder",
+            "details": "West Germany, France, 1976",
+            "themes": ["Provocation / Eroticism", "Relationships", "Crime"],
+            "country_set": "in Germany",
+            "genres": ["Drama", "Thriller"],
+            "synopsis": "Both parents of a young teen who walks with crutches secretly meet their lovers, who both surprise each other at the family's country home. The daughter arrives and initiates a guessing game of Chinese roulette.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "4 months 3 weeks and 2 days",
+            "id": 11,
+            "url": "https://www.imdb.com/title/tt1032846/?ref_=nv_sr_srsg_0",
+            "poster": "https://m.media-amazon.com/images/I/61eN6Z8CWiL._SX522_.jpg",
+            "director": "Cristian Mungiu",
+            "details": "Romania, 2007",
+            "themes": ["Social issues", "Relationships"],
+            "country_set": "in Romania",
+            "genres": ["Drama", "Social realism"],
+            "synopsis": "A woman assists her friend in arranging an illegal abortion in 1980s Romania.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "Fallen Angles",
+            "id": 12,
+            "url": "https://www.imdb.com/title/tt0112913/?ref_=nv_sr_srsg_0",
+            "poster": "https://m.media-amazon.com/images/I/81fOiIn6UvL._SY679_.jpg",
+            "director": "Kar-Wai Wong",
+            "details": "Hong Kong, 1995",
+            "themes": ["Crime", "Relationships"],
+            "country_set": "in China",
+            "genres": ["Mystery", "Romance"],
+            "synopsis": "This Hong Kong-set crime drama follows the lives of a hitman, hoping to get out of the business, and his elusive female partner.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "Paradise: Hope",
+            "id": 13,
+            "url": "https://www.imdb.com/title/tt2371834/?ref_=fn_al_tt_1",
+            "poster": "https://m.media-amazon.com/images/I/51E7WByCATL.jpg",
+            "director": "Ulrich Seidl",
+            "details": "Austria, Germany, 2013",
+            "themes": ["Coming of age", "Relationships"],
+            "country_set": "in Austria",
+            "genres": ["Drama"],
+            "synopsis": "13-year-old Melanie spends her summer vacation at a strict diet camp set in the Austrian countryside. Between workouts and nutrition classes, pillow fights and first cigarettes, she falls in love with a doctor 40 years her senior.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "Dogtooth",
+            "id": 15,
+            "url": "https://www.imdb.com/title/tt1379182/?ref_=nv_sr_srsg_0",
+            "poster": "https://m.media-amazon.com/images/I/81fwfpIugPL._SX522_.jpg",
+            "director": "Yorgos Lanthimos",
+            "details": "Greece, 2009",
+            "themes": ["Social satire", "Crime", "The existence", "Provocation / Eroticism", "Loneliness"],
+            "country_set": "in Greece",
+            "genres": ["Drama"],
+            "synopsis": "A controlling, manipulative father locks his three adult offspring in a state of perpetual childhood by keeping them prisoner within the sprawling family compound.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "The Sun in a Net",
+            "id": 17,
+            "url": "https://www.imdb.com/title/tt0176155/?ref_=fn_al_tt_3",
+            "poster": "http://www.cineoutsider.com/reviews/pix/s/su/suninanet1.jpg",
+            "director": "Stefan Uher",
+            "details": "Czechoslovakia, 1962",
+            "themes": ["Coming of age", "Relationships", "Social issues", "History"],
+            "country_set": "in Slovakia",
+            "genres": ["Drama"],
+            "synopsis": "Oldrich Fajták (Marián Bielik), a student who directs quasi-existentialist verbal abuse at his girlfriend Bela Blazejová (Jana Beláková), takes off to a formally volunteer summer work camp at a farm where he meets her grandfather.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "The double life of Veronique",
+            "id": 18,
+            "url": "https://www.imdb.com/title/tt0101765/?ref_=nv_sr_srsg_0",
+            "poster": "https://s3.amazonaws.com/criterion-production/films/3696c26f4ed9c4cd28f9451887257ca3/5ccWWR3eHcxxApgkyHF3AFiqNr43SG_large.jpg",
+            "director": "Krzysztof Kieslowski",
+            "details": "France, Poland, 1991",
+            "themes": ["Loneliness", "Relationships", "Existence", "Coming of age"],
+            "country_set": "in Poland",
+            "genres": ["Drama", "Romance", "Fantasy"],
+            "synopsis": "Two parallel stories about two identical women; one living in Poland, the other in France. They don't know each other, but their lives are nevertheless profoundly connected.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/code/src/images/boat.jpeg b/code/src/images/boat.jpeg
new file mode 100644
index 000000000..1efd27af4
Binary files /dev/null and b/code/src/images/boat.jpeg differ
diff --git a/code/src/images/buildings-sun.jpg b/code/src/images/buildings-sun.jpg
new file mode 100644
index 000000000..725671fd3
Binary files /dev/null and b/code/src/images/buildings-sun.jpg differ
diff --git a/code/src/images/curtains.jpg b/code/src/images/curtains.jpg
new file mode 100644
index 000000000..c1de7f118
Binary files /dev/null and b/code/src/images/curtains.jpg differ
diff --git a/code/src/images/green-building.jpg b/code/src/images/green-building.jpg
new file mode 100644
index 000000000..c569ac5c1
Binary files /dev/null and b/code/src/images/green-building.jpg differ
diff --git a/code/src/images/house.jpg b/code/src/images/house.jpg
new file mode 100644
index 000000000..ffca9c3cc
Binary files /dev/null and b/code/src/images/house.jpg differ
diff --git a/code/src/images/toothbrush.jpg b/code/src/images/toothbrush.jpg
new file mode 100644
index 000000000..cf1201e6c
Binary files /dev/null and b/code/src/images/toothbrush.jpg differ
diff --git a/code/src/images/traffic.jpg b/code/src/images/traffic.jpg
new file mode 100644
index 000000000..e1b0f2fff
Binary files /dev/null and b/code/src/images/traffic.jpg differ
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..0018b62c6 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -1,13 +1,430 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color:	#FF1493;
+  font-family: "montserrat", sans-serif;
+  width: 100%;
+  height: 100vh;
+}
+
+#root {
+  width: 100%;
+  height: 100vh;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+h1 span {
+  margin: 10px 0;
+  font-size: 52px;
+  text-align: center;
+  font-family: "montserrat", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  padding: 0 7px;
+  background-color: white;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+  -webkit-box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+  -moz-box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+}
+
+h2 span {
+  margin-top: 0;
+  font-size: 52px;
+  font-family: "montserrat", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  padding: 0 7px;
+  background-color: white;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+  -webkit-box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+  -moz-box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+}
+
+h2 {
+  margin: 0;
+}
+
+h3 span {
+  margin: 10px 0;
+  font-size: 40px;
+  font-family: "montserrat", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  padding: 0 7px;
+  background-color: white;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+  -webkit-box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+  -moz-box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+}
+
+h4 span {
+  margin: 10px 0;
+  font-size: 30px;
+  font-family: "montserrat", sans-serif;
+  font-weight: 500;
+  padding: 0 5px;
+  background-color: white;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+  -webkit-box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+  -moz-box-shadow: 9px 10px 0px 0px rgba(255,20,147,1);
+}
+
+p span {
+  font-size: 30px;
+  font-weight: 300;
+  padding: 0 5px;
+  background-color: white;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+p {
+  margin:0;
+  font-weight: 700;
+}
+
+.progress-bar {
+  width: 80vw;
+  height: 15px;
+  position: fixed;
+  z-index: 1;
+}
+
+.progress-bar div {
+  height:100%;
+  background-color: #FF1493;
+}
+
+.main-wrapper {
+  width:100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.button-container {
+  position: fixed;
+  bottom: 0px;
+  left: 0px; 
+  display: flex;
+  gap: 10px;
+}
+
+.button-container button{
+  margin: 0;
+}
+
+.text-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 40%;
+}
+
+.survey-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  max-width: 400px;
+}
+
+button {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 18px;
+  color: white;
+  font-weight: 900;
+  padding: 11px 20px;
+  margin: 20px 0;
+  cursor: pointer;
+  border: 1px solid transparent;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 12px 0px;
+  min-height: 40px;
+  background-color:	rgb(255, 20, 147);
+  color: rgb(255, 255, 255);
+  border-radius: 5px;
+}
+
+button:hover {
+  background-color:	rgb(255, 255, 255);
+  color: #FF1493;
+}
+
+.name-input {
+  width: 100%;
+  font-family: inherit;
+  color: 	#FF1493;
+  padding: 5px 8px 8px 8px;
+  border-radius: 0px;
+  border: none;
+  background-color: transparent;
+  font-size: 30px;
+  line-height: 38px;
+  overflow-wrap: break-word;
+  resize: none;
+  overflow: hidden;
+  transition: box-shadow 0.1s ease-out 0s;
+  box-shadow: rgba(79, 176, 174, 0.3) 0px 1px;
+  border-bottom: 2px solid 	#FF1493;
+  background-color: white;
+  margin: 20px 0;
+}
+
+input::placeholder {
+  color: 	#FF1493;
+  font-weight: 500;
+  opacity: 0.7;
+  font-size: 25px;
+}
+
+.isabelle-form, .theme-form {
+  margin: 10px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.theme-form, .form-mixed {
+  max-height: 300px;
+  overflow: scroll;
+  width: 400px;
+}
+
+.isabelle-form label, .theme-form label, .form-mixed label {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  background-color: rgba(255, 20, 146, 0.5);
+  border: 2px solid #FF1493;
+  color:white;
+  max-width: 100%;
+  min-width: 130px;
+  min-height: 40px;
+  padding: 4px;
+  margin: 5px 0;
+  font-family: "montserrat", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  border-radius: 5px;
+}
+
+.survey-wrapper.mixed label{
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  background-color: rgba(255, 20, 146, 0.5);
+  border: 2px solid #FF1493;
+  color:white;
+  outline: 0px;
+  padding: 4px;
+  margin:5px 0;
+  font-family: "montserrat", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  border-radius: 5px;
+  gap: 5px;
+}
+
+.isabelle-form label, .theme-form.general {
+  width:100%;
 }
+
+.country-form label {
+  min-width: 400px;
+}
+
+.summary-span {
+  background-color:#FF1493;
+  color: white;
+  font-weight: 500;
+  padding: 0 2px;
+}
+
+.survey-wrapper.isabelle {
+  justify-content: flex-start;
+}
+
+input[type="radio" i] {
+  margin-left: 5px;
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.survey-wrapper.location select {
+  background-color: white;
+  min-height: 40px;
+  border: 1px solid #FF1493;
+  border-radius: 4px;
+  color:#FF1493;
+  font-size: 20px;
+  width: 100%;
+  padding: 0 20px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  height: 60px;
+  margin: 20px 0;
+  border-radius: 4px;
+  font-family: "montserrat", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+.result-box img {
+  height:400px;
+}
+
+.container-result h2 {
+  margin-bottom: 0;
+  margin-top: 0;
+  font-size: 52px;
+  font-family: "montserrat", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  background-color: white;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+hr {
+  height: 1px;
+  border: none;
+  background-color: #FF1493;
+  margin-top: 0;
+}
+
+.result-text h4 {
+  font-style: italic;
+  margin: 10px 0;
+  font-size: 35px;
+  font-family: "montserrat", sans-serif;
+  font-weight: 700;
+  background-color: white;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.result-box {
+  margin: 30px 0;
+}
+
+.result-text p {
+  font-weight:500;
+  line-height: 25px;
+}
+
+.result-text {
+  text-align: left;
+  margin-left: 15px;
+}
+
+.result-box {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.synopsis-paragraph {
+  max-width: 400px;
+}
+
+.result-details {
+  margin: 20px 0;
+}
+
+.synopsis-paragraph {
+  font-style: italic;
+  font-size: 16px;
+}
+
+@media (max-width:667px) {
+
+  .background-image {
+    overflow-x: hidden;
+    overflow-y: visible;
+  }
+  .main-wrapper {
+    box-sizing: border-box;
+    justify-content: flex-start;
+  }
+
+  h3 span {
+    font-size: 30px;
+  }
+
+  .survey-wrapper {
+    max-width: 350px;
+    padding: 0 15px;
+  }
+
+  .name-input {
+    box-sizing: border-box;
+  }
+
+  .theme-form label, .form-mixed label {
+    max-width: 350px;
+  }
+
+  .theme-form, .form-mixed {
+    max-width: 350px;
+    max-height: 200px;
+  }
+
+  .container-result {
+    padding: 15px;
+  }
+
+  .result-box {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .result-box img {
+    max-height: 400px;
+    max-width: 350px;
+    object-fit: cover;
+}
+
+  .result-text {
+    margin:0;
+  }
+
+  .button-container {
+    position: fixed;
+    bottom: 0px;
+    right: 0px; 
+  }
+
+  .synopsis-paragraph {
+    margin-bottom: 38px;
+  }
+
+  .image1, .image2, .image3, .image4, .image5, .image6 {
+    overflow: hidden;
+  }
+
+  .survey-wrapper.summary h2 {
+    font-size: 35px;
+  }
+
+  .survey-wrapper.summary p{
+    font-size: 25px;
+  }
+}
\ No newline at end of file
diff --git a/code/src/isabellefilms.json b/code/src/isabellefilms.json
new file mode 100644
index 000000000..0e7d5f7f0
--- /dev/null
+++ b/code/src/isabellefilms.json
@@ -0,0 +1,89 @@
+{
+    "films": [
+                {
+            "name": "The piano teacher",
+            "id": 1,
+            "url": "https://www.imdb.com/title/tt0254686/",
+            "poster": "https://m.media-amazon.com/images/I/71kOTU3-QJL._SL1500_.jpg",
+            "director": "Michael Haneke",
+            "details": "Austria, France, 2001",
+            "themes": ["Provocation / Eroticism", "Destructive relationships", "Mind games"],
+            "continent_set": "an European",
+            "synopsis": "Erika, a piano teacher at the Vienna Conservatory, lives with her tyrannical mother in a hermetically sealed world of love-hate and dependency. Her sex life consists of voyeurism and masochistic self-injury. But when one of Erika's students decides to seduce her, the barriers around her collapse.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+        {
+            "name": "In another country",
+            "id": 2,
+            "url": "https://www.imdb.com/title/tt1989712/",
+            "poster": "https://m.media-amazon.com/images/I/91n-IIsHOOL._SY679_.jpg",
+            "director": "Hong Sang-soo",
+            "details": "South Korea, France, 2012",
+            "themes": ["Trying to find oneself", "The stranger", "Friendship"],
+            "continent_set": "an Asian",
+            "synopsis": "In a triptych of overlapping stories, three different French women (a filmmaker, an adulterer and a divorcee, all played by Isabelle Huppert) visit a small Korean resort town and encounter a flirtatious director, a lovestruck lifeguard and far too much soju.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "La Cérémonie",
+            "id": 3,
+            "url": "https://www.imdb.com/title/tt0112769/?ref_=fn_al_tt_1",
+            "poster": "https://m.media-amazon.com/images/I/41CF5BDWZ5L.jpg",
+            "director": "Claude Chabrol",
+            "details": "France, Germany, 1995",
+            "themes": ["Friendship", "Destructive relationships", "The stranger"],
+            "continent_set": "an European",
+            "synopsis": "Sophie works as a maid for Mme. Leliévre in Saint-Malo, where she befriends the outspoken postal clerk Jeanne. However, when Jeanne encourages her to rebel against her employers, Sophie is dismissed from her position. Brought together by their hidden secrets, the two women decide to take revenge.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "Things to come",
+            "id": 4,
+            "url": "https://www.imdb.com/title/tt4120176/",
+            "poster": "https://m.media-amazon.com/images/I/41XO6FQsBjL.jpg",
+            "director": "Mia Hansen-Løve",
+            "details": "France, Germany, 2016",
+            "themes": ["Trying to find oneself", "On the verge of a nervous breakdown"],
+            "continent_set": "an European",
+            "synopsis": "Nathalie teaches philosophy at a Parisian high school. She is deeply passionate about her job and enjoys passing on the pleasure of thinking to others. Unexpectedly, Nathalie’s husband announces he is leaving her. With a newfound freedom suddenly thrust upon her, Nathalie must reinvent herself.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+        {
+            "name": "The Lacemaker",
+            "id": 5,
+            "url": "https://www.imdb.com/title/tt0075932/?ref_=fn_al_tt_1",
+            "poster": "https://cdn.posteritati.com/posters/000/000/008/240/the-lacemaker-md-web.jpg",
+            "director": "Claude Goretta",
+            "details": "Switzerland, West Germany, 1977",
+            "themes": ["Coming of age", "Trying to find oneself", "Destructive relationships"],
+            "continent_set": "an European",
+            "synopsis": "Béatrice (Isabelle Huppert), known as Pomme, works at a hairdressing salon. She meets and falls in love with François, a student and they live together. Aware of their social differences, François tries to persuade Pomme to give up her job and study.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "Elle",
+            "id": 6,
+            "url": "https://www.imdb.com/title/tt3716530/",
+            "poster": "https://m.media-amazon.com/images/I/61ANcMlQwaL._SY679_.jpg",
+            "director": "Paul Verhoeven",
+            "details": "2016",
+            "themes": ["On the verge of a nervous breakdown", "Mind games", "Provocation / Eroticism"],
+            "continent_set": "an European",
+            "synopsis": "A successful businesswoman gets caught up in a game of cat and mouse as she tracks down the unknown man who raped her.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        },
+                {
+            "name": "White Material",
+            "id": 7,
+            "url": "https://www.imdb.com/title/tt1135952/?ref_=fn_al_tt_1",
+            "poster": "https://m.media-amazon.com/images/I/5131BxMqHeL.jpg",
+            "director": "Claire Denis",
+            "details": "France, Cameroon, 2009",
+            "themes": ["History", "Mind games", "Trying to find oneself"],
+            "continent_set": "an African",
+            "synopsis": "Amidst turmoil and racial conflict in a Francophone African state, a white French woman fights for her coffee crop, her family and ultimately for her life.",
+            "trailer": "https://www.youtube.com/watch?v=TdKPbyvS0qc"
+        }
+
+    ]
+}
\ No newline at end of file