diff --git a/README.md b/README.md
index 50e5933d0..cc958e4bb 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,11 @@
 # 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.
+A survey made in React, using different types of forms and summarizing the answers in the final step.
 
 ## 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?
+The major hurdle while constructing this survey was to place everything correctly on the page. If I had more time I would place the buttons better and would also add some sort of counter, so that the respondent can see how many steps they have completed and how many steps are left.
 
 ## 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://at-the-cafe-survey.netlify.app/
diff --git a/bash.exe.stackdump b/bash.exe.stackdump
new file mode 100644
index 000000000..653aaf64e
--- /dev/null
+++ b/bash.exe.stackdump
@@ -0,0 +1,16 @@
+Stack trace:
+Frame        Function    Args
+000FFFFCD30  00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
+000FFFFCD30  0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
+000FFFFCD30  002100484A2 (000006D0000, 000006D0101, 00000000001, CC19CA85FF21)
+000FFFFCD30  0021006E496 (00210045323, 00210358BC0, 00000000000, 0000000000D)
+000FFFFCD30  0021006E4A9 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
+000FFFFCD30  00210070DE4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
+000FFFFCD30  0021005AB65 (000FFFFCA60, 00000000000, 000FFFFCA68, 000FFFFFFFF)
+000FFFFCD30  0021005B335 (00210358550, 00000000000, 000FFFFCD30, 00000100201)
+000FFFFCD30  0021005B847 (002100DF73E, 00000000000, 00000000000, 00000000000)
+000FFFFCD30  0021005BB86 (00000000000, 000FFFFCD30, FFFFFFFFFFFFFFC6, 00000000000)
+000FFFFCD30  00210048C0C (00000000000, 00000000000, 00000000000, 00000000000)
+000FFFFFFF0  00210047716 (00000000000, 00000000000, 00000000000, 00000000000)
+000FFFFFFF0  002100477C4 (00000000000, 00000000000, 00000000000, 00000000000)
+End of stack trace
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/public/icon-notepad.png b/code/public/icon-notepad.png
new file mode 100644
index 000000000..d42df71e5
Binary files /dev/null and b/code/public/icon-notepad.png differ
diff --git a/code/public/index.html b/code/public/index.html
index e6730aa66..efb1b1f4a 100644
--- a/code/public/index.html
+++ b/code/public/index.html
@@ -13,7 +13,11 @@
       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>Survey project</title>
+      <link rel="icon" type="image/png" sizes="32x32" href="./icon-notepad.png">
+      <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=Mulish:wght@300&display=swap" rel="stylesheet">
   </head>
 
   <body>
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..d0b1f9c1f 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,106 @@
-import React from 'react';
+import React, { useState } from 'react';
+import Start from './components/Start';
+import Subscription from './components/Subscription';
+import Purchase from './components/Purchase';
+import FreeText from './components/FreeText';
+import Conclusion from './components/Conclusion';
+import Footer from './components/Footer';
+import './index.css'
 
 export const App = () => {
+  const [step, setStep] = useState(1)
+  const [purchase, setPurchase] = useState('')
+  const [subscriptionQ, setSubscriptionQ] = useState('')
+  const [often, setOften] = useState('')
+  const [missing, setMissing] = useState('')
+
+  const handleStepIncrease = () => {
+    setStep(step + 1)
+  }
+
+  const handleStepDecrease = () => {
+    setStep(step - 1)
+  }
+
+  const handleStepRestart = () => {
+    setStep(1)
+  }
+
   return (
-    <div>
-      Find me in src/app.js!
-    </div>
+    <>
+      <div className="outer-part">
+        <div className="inner-part">
+          {step === 1 && (
+            <div>
+              <Start />
+              <button className="start-btn" type="button" onClick={handleStepIncrease}>Start here</button>
+            </div>
+          )}
+
+          {step === 2 && (
+            <Subscription subscriptionQ={subscriptionQ} setSubscriptionQ={setSubscriptionQ} />
+          )}
+
+          {step === 3 && (
+            <Purchase purchase={purchase} setPurchase={setPurchase} />
+          )}
+
+          {step === 4 && (
+            <div>
+              <FreeText
+                headline="Favorite purchases"
+                input={often}
+                setInput={setOften}
+                inputLabel="Which drink do you purchase most often when at a cafe? 💸"
+                id="favorite-purchase"
+                placeholder="My favorite purchase is..."
+                htmlFor="favorite-purchase" />
+            </div>
+          )}
+
+          {step === 5 && (
+            <div>
+              <FreeText
+                headline="Something missing?"
+                input={missing}
+                setInput={setMissing}
+                inputLabel="Is there a drink you feel is missing at most cafes? 🤔"
+                id="missing-drink"
+                placeholder="I would love if all cafes offered..."
+                htmlFor="missing-drink" />
+            </div>
+          )}
+
+          {step === 6 && (
+            <div>
+              <Conclusion
+                subscriptionQ={subscriptionQ}
+                purchase={purchase}
+                often={often}
+                missing={missing} />
+            </div>
+          )}
+
+          {step > 1 && step < 6 && (
+            <div>
+              <button className="next-btn" type="button" onClick={handleStepIncrease}>Submit and go to next</button>
+            </div>
+          )}
+
+          {step > 2 && step < 6 && (
+            <div>
+              <button className="prev-btn" type="button" onClick={handleStepDecrease}>Previous question</button>
+            </div>
+          )}
+
+          {step > 1 && step <= 6 && (
+            <div>
+              <button className="restart-btn" type="button" onClick={handleStepRestart}>Restart the survey</button>
+            </div>
+          )}
+        </div>
+      </div>
+      <Footer />
+    </>
   );
-}
+}
\ No newline at end of file
diff --git a/code/src/components/Conclusion.js b/code/src/components/Conclusion.js
new file mode 100644
index 000000000..a3a6305b2
--- /dev/null
+++ b/code/src/components/Conclusion.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import '../index.css'
+import '../conclusion.css'
+
+const conclusion = ({ purchase, subscriptionQ, often, missing }) => {
+  return (
+    <>
+      <h2>Thank you for completing this short survey! 💕</h2>
+      <h3>You answered:</h3>
+      <section className="list">
+        <ul>
+          <li><span className="summary">Weekly purchases:</span> {purchase}</li>
+          <li><span className="summary">Active subscription:</span> {subscriptionQ}</li>
+          <li><span className="summary">Mostly purchased:</span> {often}</li>
+          <li><span className="summary">Missing on menu:</span> {missing}</li>
+        </ul>
+      </section>
+
+      <section className="related-link">
+        <a
+          href="https://www.hsph.harvard.edu/nutritionsource/healthy-drinks/other-healthy-beverage-options/"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="Learn more about the health benefits of coffee and tea">
+            -Health benefits of drinking coffee and tea-
+        </a>
+      </section>
+    </>
+  )
+}
+
+export default conclusion
\ No newline at end of file
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
new file mode 100644
index 000000000..be3bd32b9
--- /dev/null
+++ b/code/src/components/Footer.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import Drink from './coffee-shop.png'
+import '../index.css'
+
+const footer = () => {
+  return (
+    <footer>
+      <img src={Drink} alt="Cup with warm beverage" />
+    </footer>
+  );
+}
+
+export default footer
\ No newline at end of file
diff --git a/code/src/components/FreeText.js b/code/src/components/FreeText.js
new file mode 100644
index 000000000..67d8583b8
--- /dev/null
+++ b/code/src/components/FreeText.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import '../index.css'
+import '../freetext.css'
+
+const freeText = ({ headline, input, setInput, inputLabel, id, placeholder, htmlFor }) => {
+  const handleInputChange = (event) => {
+    setInput(event.target.value)
+  }
+
+  return (
+    <>
+      <h2>{headline}</h2>
+      <form>
+        <label htmlFor={htmlFor}>
+          <p>{inputLabel}</p>
+        </label>
+        <textarea
+          type="text"
+          id={id}
+          className="text-input"
+          placeholder={placeholder}
+          aria-live="polite"
+          onChange={handleInputChange}
+          value={input} />
+      </form>
+    </>
+  )
+}
+
+export default freeText
\ No newline at end of file
diff --git a/code/src/components/Purchase.js b/code/src/components/Purchase.js
new file mode 100644
index 000000000..880ea15ff
--- /dev/null
+++ b/code/src/components/Purchase.js
@@ -0,0 +1,34 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react'
+import '../index.css'
+import '../purchase.css'
+
+const purchases = ['1-2 times', '3-5 times', '6-10 times', '10+ times']
+console.log(purchases)
+
+const purchaseQuestion = ({ purchase, setPurchase }) => {
+  const handleNumberPurchases = (event) => {
+    setPurchase(event.target.value)
+  }
+
+  return (
+    <>
+      <h2>How often per week do you purchase something to drink in a cafe?</h2>
+      <form className="radio-buttons" id="radio-buttons">
+        {purchases.map((group) => (
+          <label key={group} className="times-purchase">
+            <input
+              type="radio"
+              className="radio-button"
+              value={group}
+              onChange={handleNumberPurchases}
+              checked={purchase === group} />
+            {group}
+          </label>
+        ))}
+      </form>
+    </>
+  )
+}
+
+export default purchaseQuestion
\ No newline at end of file
diff --git a/code/src/components/Start.js b/code/src/components/Start.js
new file mode 100644
index 000000000..e11a0592c
--- /dev/null
+++ b/code/src/components/Start.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import '../start.css'
+import '../index.css'
+
+const start = () => {
+  return (
+    <section>
+      <h1>A survey on what people choose to drink when in a cafe</h1>
+
+      <p>Coffee, tea, or maybe something else? This short survey aims to find
+        out just what cafe visitors want to drink, and how often.
+      </p>
+      <p>
+        We would be immensely happy if you would like to answer a few
+        questions, the survey only takes about 2 minutes to complete. Thanks! ✨
+      </p>
+    </section>
+  );
+}
+
+export default start
diff --git a/code/src/components/Subscription.js b/code/src/components/Subscription.js
new file mode 100644
index 000000000..264f15054
--- /dev/null
+++ b/code/src/components/Subscription.js
@@ -0,0 +1,35 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react'
+import '../subscription.css'
+import '../index.css'
+
+const subscriptionQuestion = ({ subscriptionQ, setSubscriptionQ }) => {
+  const handleSubscriptionQChange = (event) => {
+    setSubscriptionQ(event.target.value)
+  }
+
+  return (
+    <div>
+      <form>
+        <label htmlFor="select-subscription">
+          <h2>Do you have an active subscription at any cafe?</h2>
+        </label>
+        <select
+          onChange={handleSubscriptionQChange}
+          value={subscriptionQ}
+          className="select-subscription"
+          aria-live="polite">
+
+          <option>Select your answer here:</option>
+          <option>...</option>
+          <option lang="en" label="Yes" value="Yes">Yes</option>
+          <option lang="en" label="No" value="No">No</option>
+          <option lang="en" label="Soon" value="Soon">I will have one soon</option>
+
+        </select>
+      </form>
+    </div>
+  );
+}
+
+export default subscriptionQuestion
diff --git a/code/src/components/coffee-shop.png b/code/src/components/coffee-shop.png
new file mode 100644
index 000000000..5efe23eba
Binary files /dev/null and b/code/src/components/coffee-shop.png differ
diff --git a/code/src/conclusion.css b/code/src/conclusion.css
new file mode 100644
index 000000000..8c91f29a9
--- /dev/null
+++ b/code/src/conclusion.css
@@ -0,0 +1,65 @@
+h3 {
+    font-size: 27px;
+    color: black;
+    text-align: center;
+    text-decoration: underline;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 0.5rem;
+    color: #37392e;
+    font-size: 23px;
+    background-color: antiquewhite;
+}
+
+.list li {
+    display: flex;
+    align-items: center;
+    margin: 0,5rem 0;
+    margin-left: -1.25rem;
+    margin-bottom: 1rem;
+}
+
+.list li::before {
+    content: '•';
+    margin-right: 0.5rem;
+}
+
+.summary {
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.related-link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem;
+}
+
+a {
+    display: flex;
+    text-decoration: none;
+    background-color: pink;
+    color: black;
+    font-size: 20px;
+    font-weight: bold;
+    border: 2px solid white;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+a:hover {
+    color: #30638e;
+    text-decoration: underline;
+}
+
+@media (max-width: 667px) {
+    .list {
+        font-size: 15px;
+    }
+}
diff --git a/code/src/freetext.css b/code/src/freetext.css
new file mode 100644
index 000000000..3ebdbed09
--- /dev/null
+++ b/code/src/freetext.css
@@ -0,0 +1,6 @@
+.text-input {
+    width: 100%;
+    border-radius: 5px;
+    padding: 20px;
+    font-size: 20px;
+}
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..25f50a238 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -1,13 +1,178 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  padding: 0;
+  font-family: 'Mulish', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #846a6a;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.outer-part {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.inner-part {
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+  padding-bottom: 150px;
+  min-width: 50%;
+}
+
+h2 {
+  text-align: center;
+  font-weight: bold;
+  font-size: 45px;
+  color: #f7d6e0;
+}
+
+p {
+  font-size: 25px;
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 40px;
+}
+
+.start-btn {
+  background-color: #03120e;
+  color: #eee5e5;
+  font-size: 20px;
+  border-radius: 20px;
+  border-color: #eee5e5;
+  border: 3px solid;
+  padding: 15px;
+  align-content: center;
+  left: 50%;
+  bottom: 0;
+}
+
+.start-btn:hover {
+  background-color: white;
+  color: black;
+  cursor: pointer;
+}
+
+.restart-btn {
+  background-color: #37392e;
+  color: white;
+  font-size: 20px;
+  border-radius: 20px;
+  border-color: #eee5e5;
+  border: 3px solid;
+  padding: 15px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.restart-btn:hover {
+  background-color: #59cd90;
+  color: black;
+  cursor: pointer;
+}
+
+.next-btn {
+  background-color: white;
+  color: black;
+  font-size: 20px;
+  border-radius: 20px;
+  border-color: #eee5e5;
+  border: 3px solid;
+  padding: 15px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.next-btn:hover {
+  color: white;
+  background-color: black;
+  cursor: pointer;
+}
+
+.prev-btn {
+  background-color: #4b2840;
+  color: white;
+  font-size: 20px;
+  border-radius: 20px;
+  border-color: #eee5e5;
+  border: 3px solid;
+  padding: 15px;
+  position: absolute;
+  right: 0;
+  margin-top: 20px;
+}
+
+.prev-btn:hover {
+  color: #4b2840;
+  background-color: white;
+  cursor: pointer;
+}
+
+footer img {
+  filter: invert(1);
+  max-width: 300px;
+  max-height: 300px;
+  position: absolute;
+  bottom: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: -1;
+}
+
+@media (max-width: 667px) {
+
+  h2 {
+    font-size: 25px;
+  }
+
+  .restart-btn {
+    position: fixed;
+    margin-right: 50px;
+    margin-bottom: 40px;
+  }
+
+  .next-btn {
+    font-size: 18px;
+  }
+
+  footer img {
+    display: none;
+  }
+}
+
+@media ((min-width: 668px) and (max-width: 1023px)) {
+ 
+  footer img {
+    max-width: 200px;
+    min-width: 200px;
+  }
+}
+
+@media (min-width: 1024px) {
+
+  footer img {
+    max-width: 300px;
+    max-height: 300px;
+  }
+}
+
+@media (max-height: 600px) {
+  .restart-btn {
+    margin-bottom: 2px;
+  }
+
+  footer img {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/code/src/purchase.css b/code/src/purchase.css
new file mode 100644
index 000000000..982820885
--- /dev/null
+++ b/code/src/purchase.css
@@ -0,0 +1,17 @@
+.radio-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    width: 100%;
+    margin: 30px 0px 30px 0px;
+}
+
+.radio-button:hover {
+    transform: scale(1.5);
+}
+
+.times-purchase {
+    font-size: 22px;
+    color: black;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/code/src/start.css b/code/src/start.css
new file mode 100644
index 000000000..1911e821b
--- /dev/null
+++ b/code/src/start.css
@@ -0,0 +1,36 @@
+h1 {
+    font-weight: bolder;
+    font-size: 50px;
+    font-family: 'Mulish', sans-serif;
+    text-align: center;
+}
+
+p {
+    font-size: 25px;
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 40px;
+    flex-wrap: wrap;
+}
+
+@media (max-width: 667px) {
+
+    h1 {
+      font-size: 20px;
+    }
+  
+    p {
+      font-size: 15px;
+    }
+  }
+  
+  @media ((min-width: 668px) and (max-width: 1023px)) {
+  
+    h1 {
+      font-size: 30px;
+    }
+  
+    p {
+      font-size: 20px;
+    }
+  }
\ No newline at end of file
diff --git a/code/src/subscription.css b/code/src/subscription.css
new file mode 100644
index 000000000..d457a632c
--- /dev/null
+++ b/code/src/subscription.css
@@ -0,0 +1,13 @@
+.select-subscription {
+    display: flex;
+    background-color: #37505c;
+    flex-direction: column;
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+    padding: 15px;
+    border-radius: 5px;
+    margin: 50px 0px 50px 0px;
+    right: 60%;
+    bottom: 0;
+}
\ No newline at end of file