diff --git a/.eslintrc.json b/.eslintrc.json
index c9c0675c..81138c66 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -42,6 +42,10 @@
         "allowSingleLine": true
       }
     ],
+    "linebreak-style":[
+      "off",
+      "unix"
+    ],
     "comma-dangle": [
       "error",
       "never"
diff --git a/README.md b/README.md
index d1f22b80..1cf87760 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,14 @@
 # Redux quiz group project
 
-Replace this readme with your own information about your project.
+For this project we worked in a team of four to create a short quiz using React and Redux.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+We began by discussing what our quiz should be about, and how we would be working together.  We decided to pair and mob program depending on each team member's availability. We focused on starting with the mechanics of the quiz and understanding Redux, universal state, how to get data from the store, and how to use dispatches.  Once the mechanics of the quiz worked, we updated our questions, and styled the quiz.
+
+If we had more time, we would work on a few stretch goals like adding photos or enriching the summary with information about what questions the user got correct and what questions they should practice more.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://space-quiz-by-annikabridgetfionafrida.netlify.app/
diff --git a/package-lock.json b/package-lock.json
index 8bd1eecb..47d73268 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.0.2",
-        "react-scripts": "^5.0.1"
+        "react-scripts": "^5.0.1",
+        "styled-components": "^5.3.9"
       },
       "devDependencies": {
         "react-scripts": "5.0.1"
@@ -132,7 +133,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"
       },
@@ -2156,6 +2156,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",
@@ -4927,6 +4950,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",
@@ -5264,6 +5307,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",
@@ -5751,6 +5802,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",
@@ -5959,6 +6018,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",
@@ -11767,8 +11836,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",
@@ -14012,8 +14080,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",
@@ -15342,6 +15409,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",
@@ -15751,6 +15823,35 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.9.tgz",
+      "integrity": "sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==",
+      "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",
@@ -17604,7 +17705,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"
       }
@@ -18936,6 +19036,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",
@@ -21020,6 +21143,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",
@@ -21288,6 +21428,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",
@@ -21660,6 +21805,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",
@@ -21790,6 +21940,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",
@@ -26075,8 +26235,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",
@@ -27550,8 +27709,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",
@@ -28546,6 +28704,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",
@@ -28860,6 +29023,23 @@
       "dev": true,
       "requires": {}
     },
+    "styled-components": {
+      "version": "5.3.9",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.9.tgz",
+      "integrity": "sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==",
+      "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/package.json b/package.json
index 58da74eb..b93b1f05 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "styled-components": "^5.3.9"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 00000000..8f02ecc0
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 00000000..6c8c1452
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/images/.space-background.jpg.icloud b/public/images/.space-background.jpg.icloud
new file mode 100644
index 00000000..2fce2927
Binary files /dev/null and b/public/images/.space-background.jpg.icloud differ
diff --git a/public/images/annika.jpg b/public/images/annika.jpg
new file mode 100644
index 00000000..5e70735d
Binary files /dev/null and b/public/images/annika.jpg differ
diff --git a/public/images/bridget.jpg b/public/images/bridget.jpg
new file mode 100644
index 00000000..50b82516
Binary files /dev/null and b/public/images/bridget.jpg differ
diff --git a/public/images/fiona.jpg b/public/images/fiona.jpg
new file mode 100644
index 00000000..5483bec0
Binary files /dev/null and b/public/images/fiona.jpg differ
diff --git a/public/images/frida.jpg b/public/images/frida.jpg
new file mode 100644
index 00000000..e9f591da
Binary files /dev/null and b/public/images/frida.jpg differ
diff --git a/public/index.html b/public/index.html
index e6730aa6..dea16e87 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,13 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -13,7 +20,7 @@
       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>Space Quiz</title>
   </head>
 
   <body>
diff --git a/src/App.js b/src/App.js
index 690bd373..aab0f4ef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { quiz } from 'reducers/quiz';
 
 import { CurrentQuestion } from 'components/CurrentQuestion';
+import { Footer } from 'components/Footer';
 
 const reducer = combineReducers({
   quiz: quiz.reducer
@@ -15,6 +16,7 @@ export const App = () => {
   return (
     <Provider store={store}>
       <CurrentQuestion />
+      <Footer />
     </Provider>
   );
 }
diff --git a/src/components/CurrentQuestion.js b/src/components/CurrentQuestion.js
index 36ee2224..77ab9ba4 100644
--- a/src/components/CurrentQuestion.js
+++ b/src/components/CurrentQuestion.js
@@ -1,16 +1,55 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
+import { quiz } from 'reducers/quiz'
+import { Summary } from './Summary'
+import { ProgressBar } from './ProgressBar'
+import { Header } from './Header'
 
 export const CurrentQuestion = () => {
   const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex])
+  const dispatch = useDispatch();
+  const state = useSelector((store) => store.quiz)
 
   if (!question) {
     return <h1>Oh no! I could not find the current question!</h1>
   }
 
+  const onButtonClick = (id, index) => {
+    dispatch(quiz.actions.goToNextQuestion())
+    dispatch(quiz.actions.submitAnswer({ questionId: id, answerIndex: index }))
+  }
+
+  const onRestartClick = () => {
+    dispatch(quiz.actions.restart())
+  }
+
   return (
-    <div>
-      <h1>Question: {question.questionText}</h1>
-    </div>
+    <>
+      {!state.quizOver ? (
+        <>
+          <Header />
+          <div className="questionContainer">
+            <h1>{question.questionText}</h1>
+            {question.options.map((singleOption, index) =>
+            // eslint-disable-next-line implicit-arrow-linebreak
+              <button
+                className="optionBtn"
+                type="button"
+                onClick={() => onButtonClick(question.id, index)}
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}>
+                {singleOption}
+              </button>)}
+            <ProgressBar />
+          </div>
+        </>
+      ) : (
+        <div>
+          <Summary />
+        </div>
+      )}
+      {/* The restart button visible on all pages since it's out of the ternary expression */}
+      <button className="restart-button" type="button" onClick={onRestartClick}>Restart quiz</button>
+    </>
   )
-}
+}
\ No newline at end of file
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 00000000..4e15cf1e
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+export const Footer = () => {
+  return (
+    <footer>
+      <div className="contact-me">
+        <a href="https://www.linkedin.com/in/annika-lindberg-a3398b263/"><img src="/images/annika.jpg" className="contact-logo" alt="link to Annika's linkedin" /></a>
+        <a href="https://bridgetmailley.com/"><img src="/images/bridget.jpg" className="contact-logo" alt="link to Bridget's portfolio" /></a>
+        <a href="https://fiona-klacar-portfolio.netlify.app/"> <img src="/images/fiona.jpg" className="contact-logo" alt="link to Fiona's portfolio" /></a>
+        <a href="https://frida-nordenlow-portfolio.netlify.app//"><img src="/images/frida.jpg" className="contact-logo" alt="link to Frida's portfolio" /></a>
+      </div>
+      <div className="about-me">
+        <p>Designed by Annika, Bridget, Fiona, & Frida. Technigo Web Development Bootcamp 2023.</p>
+      </div>
+    </footer>
+  )
+}
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 00000000..d608f938
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export const Header = () => {
+  return (
+    <div className="headerContainer">
+      <h1 className="quizTitle">Space Quiz</h1>
+    </div>
+  )
+}
+
diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
new file mode 100644
index 00000000..cec6ff28
--- /dev/null
+++ b/src/components/ProgressBar.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+export const ProgressBar = () => {
+  const amountOfQuestions = useSelector((state) => state.quiz.questions.length);
+  const question = useSelector((state) => state.quiz.questions[state.quiz.currentQuestionIndex])
+  const answers = useSelector((state) => state.quiz.answers)
+
+  return (
+    <div className="progress-bar">
+      <progress value={answers.length} max={amountOfQuestions} />
+      <p>{question.id} / {amountOfQuestions}</p>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/Summary.js b/src/components/Summary.js
new file mode 100644
index 00000000..256cd857
--- /dev/null
+++ b/src/components/Summary.js
@@ -0,0 +1,30 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+export const Summary = () => {
+  const userAnswers = useSelector((state) => state.quiz.answers)
+
+  const correctAnswer = userAnswers.filter((answers) => {
+    return answers.isCorrect === true
+  })
+
+  return (
+    <div className="summaryContainer">
+      <div className="summaryHeader">
+        <h1 className="summaryTitle">Quiz Summary</h1>
+        <h2 className="result">You got {correctAnswer.length} out of 8!</h2>
+      </div>
+      {userAnswers.map((singleAnswer) => {
+        return (
+          <div className="resultsContainer" key={singleAnswer.questionId}>
+            <h3 className="question">{singleAnswer.questionId}: {singleAnswer.question.questionText}</h3>
+            <h3 className="yourAnswer">Your answer was: {singleAnswer.answer}</h3>
+            <h3 className="correctAnswer">The correct answer was: {singleAnswer.question.options[singleAnswer.question.correctAnswerIndex]}
+            </h3>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 4a1df4db..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-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;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
index ec9ad93c..c08f835b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,13 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import './index.css';
 import { App } from './App';
+import './styling/index.css';
+import './styling/header.css';
+import './styling/currentquestion.css';
+import './styling/progressbar.css';
+import './styling/summary.css';
+import './styling/restartbutton.css';
+import './styling/footer.css';
 
 const container = document.getElementById('root');
 const root = createRoot(container);
diff --git a/src/reducers/quiz.js b/src/reducers/quiz.js
index a38bbf68..7ac60599 100644
--- a/src/reducers/quiz.js
+++ b/src/reducers/quiz.js
@@ -2,8 +2,14 @@ import { createSlice } from '@reduxjs/toolkit'
 
 // Change these to your own questions!
 const questions = [
-  { id: 1, questionText: 'Who set the Olympic record for the 100m dash in 2012?', options: ['Usain Bolt', 'Justin Gatlin', 'Tyson Gay', 'Asafa Powell'], correctAnswerIndex: 0 },
-  { id: 2, questionText: 'When was Michael Phelps last named male World Swimmer of the Year?', options: ['2012', '2014', '2016', '2018'], correctAnswerIndex: 2 }
+  { id: 1, questionText: 'A very famous space epos starts with the opening line: ”A long time ago in a galaxy far, far away….” What is the name of the creator of this epic space opera?', options: ['Luke Skywalker', 'George Lucas', 'George Costanza', 'George Washington'], correctAnswerIndex: 1 },
+  { id: 2, questionText: 'The Grant Impact Theory suggests that as a young planet, Earth was hit by another planet called Theia, resulting in what?', options: ['The formation of the Earth’s atmosphere', 'The presence of superheavy elements such as lithium and magnesium', 'The formation of the moon', 'The origins of life on Earth'], correctAnswerIndex: 2 },
+  { id: 3, questionText: 'What is the average surface temperature of the sun, in Celsius?', options: ['500 °C', '5,500 °C', '10,500 °C', '20,500 °C'], correctAnswerIndex: 1 },
+  { id: 4, questionText: 'Halley’s Comet returns to Earth’s vicinity approximately every…', options: ['50 years', '75 years', '100 years', '200 years'], correctAnswerIndex: 1 },
+  { id: 5, questionText: 'Which one of the following names is NOT the name of a galaxy?', options: ['Virgo Cluster', 'Whirlpool', 'Cartwheel', 'Nebulae Serenade'], correctAnswerIndex: 3 },
+  { id: 6, questionText: 'What is the name of the constellation that represents a hunter in Greek mythology and is one of the most recognizable constellations in the night sky?', options: ['Orion', 'Cassiopeia', 'Canis Major', 'Ursa Major'], correctAnswerIndex: 0 },
+  { id: 7, questionText: 'The Hubble Telescope was launched in 1990.  As of April 2020, it had been in service for 30 years. How long is it estimated to continue to be operational? ', options: ['until 2000', 'until 2025', 'between 2030-2040', 'between 2070-2090'], correctAnswerIndex: 2 },
+  { id: 8, questionText: 'The James Webb Space Telescope (JWST) was launched Christmas Day 2021. It is quite a bit larger than the Hubble Telescope.  The JWST is the size of:', options: ['A large dog', 'An elephant', 'A bus', 'A tennis court'], correctAnswerIndex: 3 }
 ]
 
 const initialState = {
diff --git a/src/styling/currentquestion.css b/src/styling/currentquestion.css
new file mode 100644
index 00000000..df403da9
--- /dev/null
+++ b/src/styling/currentquestion.css
@@ -0,0 +1,39 @@
+.questionContainer {
+    margin-right: auto;
+    margin-left: auto;
+    border: 2px solid black;
+    background-color: #554971;
+    max-width: 760px;
+    width: 70%;
+    margin-top: 30px;
+    border-radius: 20px;
+    box-shadow: 7px 4px 14px 20px rgba(138, 198, 208, 0.3);
+  
+}
+
+.optionBtn {
+    background-color: #B8F3FF;
+    color: black;
+    padding: 20px;
+    margin: 20px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 1.2rem;
+    width: 50%;
+    border-radius: 20px;
+    box-shadow: 5px 10px rgba(138, 198, 208, 0.3);
+}
+
+.optionBtn:hover {
+    background-color: #8AC6D0;
+}
+
+h1 {
+    font-size: 1.5rem;
+    margin: 10% 20%;
+    text-align: center;
+    color: white;
+    font-weight: 400;
+
+}
diff --git a/src/styling/footer.css b/src/styling/footer.css
new file mode 100644
index 00000000..591c0ccb
--- /dev/null
+++ b/src/styling/footer.css
@@ -0,0 +1,49 @@
+
+footer {
+    margin-top: 20px;
+    /* height: 120px; */
+    padding: 5px;
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  footer p {
+    text-align: center;
+    color: white;
+    margin: 2px 0;
+  }
+  
+  .contact-me {
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    /* padding: 5px; */
+    margin-top: 10px;
+  }
+  
+  .contact-logo {
+    width: 30px;
+    height: 30px;
+    object-fit: cover;
+    opacity: .75;
+  }
+  
+  .contact-logo:hover {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+  
+  .about-me {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    /* padding: 5px; */
+    font-size: 15px;
+    /* margin-bottom: 10px; */
+    color: white;
+    text-align: center;
+  }
\ No newline at end of file
diff --git a/src/styling/header.css b/src/styling/header.css
new file mode 100644
index 00000000..3c4b6cf0
--- /dev/null
+++ b/src/styling/header.css
@@ -0,0 +1,22 @@
+.headerContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: rgb(54, 33, 62) solid 8px;
+    border-radius: 25px;
+    max-width: 760px;
+    width: 70%;
+    background-image: linear-gradient(to bottom right, #63768D, #8AC6D0);
+    padding-bottom: 60px;
+    margin-bottom: 40px;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 40px;
+}
+
+.quizTitle {
+    font-size: 60px;
+    font-weight: 900;
+    color: #36213E; 
+
+}
\ No newline at end of file
diff --git a/src/styling/index.css b/src/styling/index.css
new file mode 100644
index 00000000..8a87626f
--- /dev/null
+++ b/src/styling/index.css
@@ -0,0 +1,16 @@
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-image: url("https://images.pexels.com/photos/4644812/pexels-photo-4644812.jpeg");
+  background-size: 100% auto;
+  background-size: cover;
+  font-family: 'Space Grotesk', sans-serif;
+
+}
+
+code {
+
+  font-family: 'Space Grotesk', sans-serif;
+  
+}
diff --git a/src/styling/progressbar.css b/src/styling/progressbar.css
new file mode 100644
index 00000000..b7e933d8
--- /dev/null
+++ b/src/styling/progressbar.css
@@ -0,0 +1,36 @@
+.progress-bar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 35px 0 15px 0;
+  }
+  
+  .progress-bar p {
+    margin: 5px 0;
+    font-size: 12px;
+    color:  white;
+    font-family: 'Space Grotesk', sans-serif;
+  }
+  
+  progress[value] {
+    /* Reset the default appearance */
+    -webkit-appearance: none;
+    appearance: none;
+    width: 250px;
+    height: 20px;
+  }
+  
+  progress[value]::-webkit-progress-bar {
+    background-color: #eee;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+  }
+  
+  progress::-webkit-progress-value {
+    background-image:
+         -webkit-linear-gradient(-45deg, transparent 100%, rgb(255, 255, 255) 10%),
+         -webkit-linear-gradient(left, #36213E, #B8F3FF);
+    border-radius: 10px; 
+    background-size: 35px 20px, 100% 100%, 100% 100%;
+  }
+  
\ No newline at end of file
diff --git a/src/styling/restartbutton.css b/src/styling/restartbutton.css
new file mode 100644
index 00000000..9cc0ebfc
--- /dev/null
+++ b/src/styling/restartbutton.css
@@ -0,0 +1,18 @@
+.restart-button {
+    background-color: #8AC6D0;
+    color: black;
+    padding: 20px;
+    margin: 20px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 1.2rem;
+    width: 200px;
+    border-radius: 20px;
+    box-shadow: 5px 10px rgba(138, 198, 208, 0.3);
+    }
+    
+    .restart-button:hover {
+        background-color: #554971;
+        color: white;
+    }
\ No newline at end of file
diff --git a/src/styling/summary.css b/src/styling/summary.css
new file mode 100644
index 00000000..bb9aeee8
--- /dev/null
+++ b/src/styling/summary.css
@@ -0,0 +1,69 @@
+.summaryContainer {
+    /* display: flex; */
+    flex-direction: column;
+    align-items: center;
+}
+
+.summaryHeader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: rgb(54, 33, 62) solid 8px;
+    border-radius: 25px;
+    width: 80%;
+    background-image: linear-gradient(to bottom right, #63768D, #8AC6D0);
+    padding-bottom: 60px;
+    margin-bottom: 40px;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 40px;
+}
+
+.summaryTitle {
+    font-size: 60px;
+    font-weight: 900;
+    color: #36213E; 
+
+}
+.result {
+    color: white; 
+    margin-top: 10px;
+    font-size: 30px;
+}
+
+.resultsContainer {
+    display: flex;
+    flex-direction: column;
+    margin: 5% 10%;
+    background: rgba(184, 243, 255, 0.85);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(184, 243, 255, 0.19);
+    padding: 5%; 
+}
+
+.question {
+    font-size: 20px;
+    font-weight: 600;
+    color: rgba(43, 23, 50, 1); 
+}
+
+.yourAnswer {
+    font-weight: 600;
+    color: rgba(43, 23, 50, 1);
+}
+
+.correctAnswer {
+    color: rgba(43, 23, 50, 1);
+}
+
+@media (max-width: 425px) {
+
+    .summaryTitle {
+        font-size: 30px;
+    }
+
+    .result {
+        font-size: 20px;
+    }
+}
\ No newline at end of file