diff --git a/README.md b/README.md
index 50e5933d0..561817f8a 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,7 @@
 # Survey form with React
 
-Replace this readme with your own information about your project.
-
-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?
+This is my Zodiac survey! 💫
 
 ## 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://zodiac-survey.netlify.app/
diff --git a/code/package-lock.json b/code/package-lock.json
index e34d9bb1c..3a317936e 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",
@@ -4637,34 +4636,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",
@@ -20687,26 +20658,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",
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..9f5410d18 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import { Name } from 'components/Name';
+import { ZodiacSign } from 'components/ZodiacSign';
+import { Result } from 'components/Result';
+import { Selector } from 'components/Selector'
 
 export const App = () => {
+  const [step, setStep] = useState(1);
+  const [name, setName] = useState();
+  const [sign, setSign] = useState();
+  const [select, setSelect] = useState();
+
+  const handleStepIncrease = () => {
+    setStep(step + 1);
+  }
+  const restartQuiz = () => {
+    setStep(1);
+    setName('');
+    setSign('');
+    setSelect('');
+  }
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <>
+      {/* Whats your name? */}
+      {step === 1 && (
+        <Name name={name} setName={setName} /> /* alla the name.js codestuff is in NAME */
+      )}
+      {/* Choose your Zodiac sign */}
+      {step === 2 && (
+        <ZodiacSign sign={sign} setSign={setSign} />
+      )}
+      {/* How much *sign* are you? */}
+      {step === 3 && (
+        <Selector sign={sign} setSign={setSign} select={select} setSelect={setSelect} />
+      )}
+      {/* Your name is, you are  */}
+      {step >= 4 && (
+        <Result name={name} hej={1} select={select} sign={sign} />
+      )}
+      {step < 4 && (
+        <div className="button">
+          <p>{step}</p>
+          <button type="button" onClick={handleStepIncrease}>Let´s go</button>
+        </div>
+      )}
+      {step >= 4 && (
+        <div className="button">
+          <button type="button" onClick={restartQuiz}>Start over</button>
+        </div>
+      )}
+    </>
   );
 }
+/* current step hanterar nästa steg knappen */
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
new file mode 100644
index 000000000..475a955f7
--- /dev/null
+++ b/code/src/components/Name.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Name = ({ name, setName }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  }
+  return (
+    // <div>
+    <div className="container">
+      <div Class="welcome">
+        <h2>Welcome to my Astro survey</h2>
+        <label htmlFor="name">
+          <p>First of all, what´s your name?</p>
+          <input type="text" id="name" value={name} onChange={handleNameChange} required />
+        </label>
+      </div>
+    </div>
+  )
+}
+/* NR 1 */
\ No newline at end of file
diff --git a/code/src/components/Result.js b/code/src/components/Result.js
new file mode 100644
index 000000000..36f0d6a38
--- /dev/null
+++ b/code/src/components/Result.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const Result = ({ name, sign, select }) => {
+  return (
+    <div className="result">
+      <p>Okey {name}!</p>
+      <p>Your zodiac sign is {sign}</p>
+      <p> You are the {select} type of {sign}! </p>
+      <p> More {sign}´s to the people!!! </p>
+    </div>
+  );
+}
+
diff --git a/code/src/components/Selector.js b/code/src/components/Selector.js
new file mode 100644
index 000000000..86fcffa29
--- /dev/null
+++ b/code/src/components/Selector.js
@@ -0,0 +1,50 @@
+import React from 'react';
+/* values */
+const howMuch = ['Normal', 'A lot', 'Im extreme'];
+
+export const Selector = ({ select, setSelect, sign }) => {
+  return (
+    <>
+      <div className="howmuch-container">
+        <h4> How much {sign} are you?
+        </h4>
+      </div>
+      <div className="radio-activity">
+        {howMuch.map((item) => (
+          <label key={item} htmlFor="activeradio">
+            <div
+              className="radioBtn"
+              role="button"
+              onClick={(event) => setSelect(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  setSelect(item);
+                }
+              }}
+              tabIndex={0}>
+              <input
+                type="radio"
+                className="radioActiveBtn"
+                onChange={(event) => setSelect(event.target.value)}
+                value={item}
+                checked={select === item} />
+              <span>{item}</span>
+            </div>
+          </label>
+        ))}
+      </div>
+      <div className="HowMuch">
+        {select === 'Normal' && (
+          <p> {select} is pretty good too, I guess! 👵🏻</p>
+        )}
+        {select === 'A lot' && (
+          <p> Sugar & spice, {select}, is nice! 🌶🔥</p>
+        )}
+        {select === 'Im extreme' && (
+          <p>The {select}´s turn´s the world upside down. You go you wild thing 😎</p>
+        )}
+      </div>
+    </>
+  );
+}
+/* NR 3 */
diff --git a/code/src/components/ZodiacSign.js b/code/src/components/ZodiacSign.js
new file mode 100644
index 000000000..1acc68cfb
--- /dev/null
+++ b/code/src/components/ZodiacSign.js
@@ -0,0 +1,38 @@
+import React from 'react'
+
+export const ZodiacSign = ({ sign, setSign }) => {
+/* const handleZodiacSignChange = (event) => {
+    setSign(event.target.value);
+  } */
+
+  return (
+    <div className="choose-container">
+      <h2>Choose your Zodiac sign</h2>
+      <form className="zodiacs">
+        <select
+          onChange={(event) => setSign(event.target.value)}
+          value={sign}>
+          <option value="" disabled>Choose Zodiac sign</option>
+          <option value="Aries">Aries</option>
+          <option value="Taurus">Taurus</option>
+          <option value="Gemini">Gemini</option>
+          <option value="Cancer">Cancer</option>
+          <option value="Leo">Leo</option>
+          <option value="Virgo">Virgo</option>
+          <option value="Libra">Libra</option>
+          <option value="Scorpio">Scorpio</option>
+          <option value="Sagittarius">Sagittarius</option>
+          <option value="Capricorn">Capricorn</option>
+          <option value="Aquarius">Aquarius</option>
+          <option value="Pisces">Pisces</option>
+        </select>
+      </form>
+      <div className="Okey">
+        {sign && (
+          <p>Okey, so you&apos;re a {sign}, cool!</p>
+        )}
+      </div>
+    </div>
+  )
+}
+/* NR 2 */
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..533ca64a9 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -1,13 +1,381 @@
 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;
+  background-color: rgb(58, 58, 58);
+  color: white;
+  background-image: url("https://nypost.com/wp-content/uploads/sites/2/2021/11/astrology-sun-moon-rising-signs-1-copy.jpg?quality=75&strip=all");
+  background-size: 100%; /* cover */
+  font-family: emoji;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+html {
+  text-align: center;
+}
+
+/* PAGE 1 */
+.container {
+  display: flex;
+  position: relative;
+  height: 400px;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-top: 175px;
+  box-sizing: border-box;
+  margin: auto;
+  border-radius: 10px;
+  top: 140px;
+  text-shadow: -3px 2px #1a1919;
+  background: #2121218a;
+}
+.welcome {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  bottom: 94px;
+  color:#f2f2f2;
+  left: -15px;
+}
+.welcome h2 {
+  text-shadow: 10px;
+  font-size: 34px;
+  font-family: emoji;
+}
+.welcome p {
+  text-shadow: 10px;
+  font-size: 23px;
+  position: relative;
+  bottom: 21px;
+}
+/* button color */
+ button {
+  text-align: center;
+  background-color: rgb(240, 240, 240);
+  color: rgb(23, 23, 23);
+  width: 79px;
+  border-radius: 30px;
+  position: relative;
+  cursor: pointer;
+  left: -13px;
+  bottom: -4px;
+}
+
+
+/* button container */
+button:hover {
+background-color: #ffe27b;
+}
+.button p {
+  color: transparent;
+}
+label {
+  padding: 5px;
+}
+
+
+
+/* PAGE 2 choose sign select dropdown */
+.choose-container {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding-top: 175px;
+  height: 400px;
+  box-sizing: border-box;
+  margin: auto;
+  border-radius: 10px;
+  box-shadow: black;
+  box-shadow: 10px;
+  box-shadow: 10px 5px 5px #26262659;
+  top: 140px;
+  /* text-shadow: -3px 2px #1a1919; */
+  background: #2121218a;
+}
+.choose-container h2 {
+  position: relative;
+  bottom: 167px;
+  font-size: 50px;
+}
+form.zodiacs {
+  position: relative;
+  left: -15px;
+  top: -170px;
+}
+
+.zodiac-container {
+  border: 1px solid red;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin: 9px;
+  height: 400px;
+}
+.zodiac-container h2 {
+  text-align: center;
+}
+.zodiac-container p {
+  border: 1px solid green;
+  padding: 5px;
+}
+.signs {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* PAGE 3 - how much */
+.howmuch-container {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    height: 400px;
+    box-shadow: black;
+    box-shadow: 10px;
+    box-shadow: 10px 5px 5px #26262659;
+    top: 140px;
+    text-shadow: -3px 2px #1a1919;
+    background: #2121218a;
+}
+.howmuch-container h4 {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    bottom: 280px;
+    font-size: 30px;
+    right: 485px;
+}
+/* how much: normal, a lot, im extreme radio buttons */
+.radio-activity {
+  left: 568px;
+  position: absolute;
+  top: 235px;
+}
+/* answer how much */
+.HowMuch p {
+  background-blend-mode: overlay;
+  font-size: 20px;
+  background: #d26767;
+  width: 300px;
+  position: absolute;
+  top: 350px;
+  right: 506px;
+}
+form {
+  position: relative;
+  font-size: 20px;
+  background: #19273c;
+  width: 150px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  left: 435px;
+}
+/* PAGE 4 - results */
+.Okey p {
+  background-color: #d26767;
+  font-size: 25px;
+  position: relative;
+  top: -125px;
+}
+.result {
+  position: relative;
+  padding-top: 92px;
+  height: 400px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  box-shadow: black;
+  box-shadow: 10px;
+  box-shadow: 10px 5px 5px #26262659;
+  top: 140px;
+  text-shadow: -3px 2px #1a1919;
+  background: #2121218a;
+  font-size: 25px;
+  text-align: center;
+}
+.result p {
+  margin: 10px;
+  left: -10px;
+  position: relative;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* styles for mobile devices */
+@media only screen and (max-width: 767px) {
+  button {
+    text-align: center;
+    background-color: rgb(240, 240, 240);
+    color: rgb(23, 23, 23);
+    width: 79px;
+    border-radius: 30px;
+    position: relative;
+    cursor: pointer;
+    top: 27px;
+}
+.welcome {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  bottom: 137px;
+  color: #f2f2f2;
+  left: -7px;
+}
+
+.Okey p {
+  background-color: #d26767;
+  font-size: 25px;
+  position: relative;
+  top: -149px;
+}
+.result {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  padding-top: 92px;
+  height: 400px;
+  box-sizing: border-box;
+  margin: auto;
+  border-radius: 10px;
+  box-shadow: black;
+  box-shadow: 10px;
+  box-shadow: 10px 5px 5px #26262659;
+  top: 140px;
+  text-shadow: -3px 2px #1a1919;
+  background: #2121218a;
+  font-size: 20px;
+}
+.result p {
+  display: flex;
+    flex-direction: column;
+    bottom: 43px;
+    text-shadow: -3px 2px #1a1919;
+    font-size: 22px;
+    margin: 7px;
+}
+.howmuch-container {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  height: 400px;
+  box-shadow: black;
+  box-shadow: 10px;
+  box-shadow: 10px 5px 5px #26262659;
+  top: 140px;
+  text-shadow: -3px 2px #1a1919;
+  background: #2121218a;
+  padding: -10px;
+  max-width: 370px;
+}
+.radio-activity {
+  display: flex;
+  flex-direction: column;
+  display: flex;
+  font-size: 19px;
+  left: 119px;
+  top: 246px;
+}
+.howmuch-container h4 {
+  display: flex;
+  flex-direction: column;
+  bottom: 280px;
+  font-size: 24px;
+  right: 39px;
+}
+.HowMuch p {
+  background-blend-mode: overlay;
+  font-size: 20px;
+  background: #000000bf;
+  width: 300px;
+  position: absolute;
+  right: 40px;
+  top: 348px;
+}
+form.zodiacs {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 190px;
+  left: 108px;
+}
+}
+/* styles for tablet devices */
+@media only screen and (min-width: 767px) and (max-width: 1024px) {
+  form.zodiacs {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 190px;
+    left: 293px;
+ }
+ .howmuch-container h4 {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  bottom: 280px;
+  font-size: 30px;
+  right: 220px;
+}
+.Okey p {
+  background-color: #d26767;
+  font-size: 25px;
+  position: relative;
+  top: -68px;
+  left: -18px;
+}
+.radio-activity {
+  position: absolute;
+  top: 209px;
+  font-size: 19px;
+  left: 300px;
+}
+.HowMuch p {
+  background: #d26767;
+  width: 300px;
+  position: absolute;
+  font-size: 20px;
+  top: 352px;
+  right: 257px;
+}
+button {
+  text-align: center;
+  background-color: rgb(240, 240, 240);
+  color: rgb(23, 23, 23);
+  width: 79px;
+  border-radius: 30px;
+  position: relative;
+  cursor: pointer;
+  left: -13px;
+  bottom: -35px;
+}
 }
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..4a12561e3
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "project-survey",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}