diff --git a/README.md b/README.md
index 50e5933d0..719160a55 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,13 @@
 # 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.
+This weeks project was to make a survey with react. I chose to do a imaginary party planning survey.
 
 ## 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?
+I started with technigos react-starter project and played around in that just to try to understand more about how react works. Then I started to plan what my servey would be about and did the basic structure for it in VSCode.
+After that I tried out some different designs and I have changed that a lot of times during the week. I might have to plan the design more before I start next time but I also think I learn a lot by trying out different designs during the process.
+I also found the JSConfetti that felt like I fun effect to add and it was much easier to add then I thouht.
 
-## View it live
+My problem this week was that I didn't had so much time as I needed so I need to go back to this project and work on the acceccibility for example. Also, React is completely new to me so it will take time to learn and understand.
 
-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.
+## View it live
diff --git a/code/README.md b/code/README.md
deleted file mode 100644
index 6e1ac173a..000000000
--- a/code/README.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Technigo React Starter App
-
-This app has been generated using `create-react-app`, then cleaned up a little so we have a project with just the elements we need to get started.
-
-Add components in the `src` folder and use them in `src/app.js` to get started.
-
-## Usage
-
-1. On GitHub, click the 'use this template' button to create a new repo on your account
-1. Clone the new repo to your computer
-1. Install required dependencies with npm: `npm install`
-1. Start the project: `npm start`
-
-Alternatively, if you don't want a new git repo on your account;
-
-1. Download & extract the [latest release](https://github.com/Technigo/react-starter/releases/latest) from GitHub
-1. Open the directory in the terminal: `cd /path/to/react-starter`
-1. Install required dependencies with npm: `npm install`
-1. Start the project: `npm start`
diff --git a/code/package-lock.json b/code/package-lock.json
index e34d9bb1c..3fb69a781 100644
--- a/code/package-lock.json
+++ b/code/package-lock.json
@@ -9,13 +9,13 @@
       "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",
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "js-confetti": "^0.11.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -4637,34 +4637,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",
@@ -11470,6 +11442,11 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/js-confetti": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/js-confetti/-/js-confetti-0.11.0.tgz",
+      "integrity": "sha512-Hc7I3VI4r4H0nq5q/oQK+JJwGoYRYVHK72fGk8E9Ay1dbh+aiZ9yl0yFp1K4oYeq7YFDQAndYChwqLPA3QWQuA=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -20687,26 +20664,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",
@@ -25733,6 +25690,11 @@
         }
       }
     },
+    "js-confetti": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/js-confetti/-/js-confetti-0.11.0.tgz",
+      "integrity": "sha512-Hc7I3VI4r4H0nq5q/oQK+JJwGoYRYVHK72fGk8E9Ay1dbh+aiZ9yl0yFp1K4oYeq7YFDQAndYChwqLPA3QWQuA=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/code/package.json b/code/package.json
index 7214c8fde..f2ebce65e 100644
--- a/code/package.json
+++ b/code/package.json
@@ -10,6 +10,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "js-confetti": "^0.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/code/public/index.html b/code/public/index.html
index e6730aa66..1cda80962 100644
--- a/code/public/index.html
+++ b/code/public/index.html
@@ -13,12 +13,25 @@
       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>Party Planner</title>
+ 
+    <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=Rubik:wght@300;500&display=swap" rel="stylesheet">
+
+    <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=Ubuntu:wght@300&display=swap" rel="stylesheet">
+
+    <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=Pacifico&display=swap" rel="stylesheet">
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/code/src/App.js b/code/src/App.js
index f2007d229..47788c4f6 100644
--- a/code/src/App.js
+++ b/code/src/App.js
@@ -1,9 +1,51 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+import { Name } from 'components/Name';
+import { Place } from 'components/Place';
+import { Food } from 'components/Food';
+import { Drink } from 'components/Drink';
+import { Party } from 'components/Party';
 
 export const App = () => {
+  const [step, setStep] = useState(1);
+  const [name, setName] = useState('');
+  const [place, setPlace] = useState('');
+  const [food, setFood] = useState('');
+  const [drink, setDrink] = useState('');
+
+  const handleStepIncrease = () => {
+    setStep(step + 1);
+  }
   return (
-    <div>
-      Find me in src/app.js!
+    <div className="survey-container">
+      {step === 1 && (
+        <Name name={name} setName={setName} />
+      )}
+      {step === 2 && (
+        <Place place={place} setPlace={setPlace} />
+      )}
+      {step === 3 && (
+        <Food food={food} setFood={setFood} />
+      )}
+      {step === 4 && (
+        <Drink drink={drink} setDrink={setDrink} />
+
+      )}
+      {step >= 5 && (
+
+        <Party name={name} place={place} food={food} drink={drink} />
+      )}
+      {step < 5 && (
+        <>
+          <div className="step-btn">
+            <button type="button" onClick={handleStepIncrease}>NEXT</button>
+          </div>
+          <div className="step">
+            <p>PARTYSTEP {step}/5</p>
+          </div>
+
+        </>
+      )}
     </div>
   );
-}
+};
diff --git a/code/src/components/Drink.js b/code/src/components/Drink.js
new file mode 100644
index 000000000..9d3524be8
--- /dev/null
+++ b/code/src/components/Drink.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export const Drink = ({ drink, setDrink }) => {
+  const handleDrinkChange = (event) => {
+    setDrink(event.target.value);
+  }
+  return (
+    <>
+      <div className="question">
+        <h2>Sounds delicious!
+            And drink?
+        </h2>
+      </div>
+      <div className="select-container">
+        <select
+          className="select"
+          id="drink"
+          value={drink}
+          onChange={handleDrinkChange}>
+          <option value="">Menu</option>
+          <option value="a great cup of coffee">Coffee</option>
+          <option value="one rainbow colored drink">Tropical drinks</option>
+          <option value="sparkling ice cold soda">Sparkling soda</option>
+          <option value="a fruity and fluffy smoothie">Smoothie</option>
+          <option value="ice cold water">Water</option>
+        </select>
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/code/src/components/Food.js b/code/src/components/Food.js
new file mode 100644
index 000000000..81da8289b
--- /dev/null
+++ b/code/src/components/Food.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const foodOption = [
+  'the biggest cake you ever seen',
+  'a buffé with your favourite food',
+  'fruits in piles',
+  'ice cream that never melts'
+];
+
+export const Food = ({ food, setFood }) => {
+  const handleFoodChange = (event) => {
+    setFood(event.target.value);
+  }
+  return (
+    <>
+      <div className="question">
+        <h2>What do you dream about to eat on your imaginary party?</h2>
+      </div>
+      <div className="foodBtn">
+        {foodOption.map((group) => (
+          <label key={group} htmlFor="group">
+            <input
+              type="radio"
+              className="radioBtn"
+              value={group}
+              onChange={handleFoodChange}
+              checked={food === group} />
+            {group}
+          </label>
+        ))}
+      </div>
+
+    </>
+  )
+}
diff --git a/code/src/components/Name.js b/code/src/components/Name.js
new file mode 100644
index 000000000..c93ec4f0a
--- /dev/null
+++ b/code/src/components/Name.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Name = ({ name, setName }) => {
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  }
+  return (
+    <>
+      <div className="header">
+        <h1>Are you a day dreamer?</h1>
+        <h1>Let&apos;s throw a <span>party</span> !</h1>
+      </div>
+      <div className="question">
+        <p><span>What&apos;s your name?</span></p>
+      </div>
+      <div className="answer-input">
+        <input type="text" value={name} onChange={handleNameChange} />
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/code/src/components/Party.js b/code/src/components/Party.js
new file mode 100644
index 000000000..8957ad1d9
--- /dev/null
+++ b/code/src/components/Party.js
@@ -0,0 +1,36 @@
+/* eslint-disable max-len */
+import React from 'react';
+import JSConfetti from 'js-confetti';
+
+const jsConfetti = new JSConfetti();
+
+export const Party = ({ name, place, food, drink }) => {
+  return (
+    <>
+      <div className="party-name">
+        <h1>{name}</h1>
+      </div>
+      <div className="party-text">
+        <p>🌪! Wow you&apos;ve just arrived at your dream place {place}! And look, a table with {food} and {drink}! All your favourite people is here, the weather is dreamy and we&apos;re having a party just for you! Add some more partyfeeling? </p>
+        <h3>↓</h3>
+      </div>
+
+      <div className="party-btn">
+        <button
+          type="submit"
+          className="partyBtn"
+          onClick={() => {
+            (jsConfetti.addConfetti({
+              confettiRadius: 8,
+              confettiNumber: 500,
+              confettiColors: [
+                '#d44e62', '#fcfee1', '#eebed9', '#b4c8b7', '#fb91c6', '#a0bbd0'
+              ]
+            }))
+          }}>MAGIC PARTYBUTTON
+        </button>
+
+      </div>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/code/src/components/Place.js b/code/src/components/Place.js
new file mode 100644
index 000000000..430833f82
--- /dev/null
+++ b/code/src/components/Place.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const Place = ({ place, setPlace }) => {
+  const handlePlaceChange = (event) => {
+    setPlace(event.target.value);
+  }
+  return (
+    <>
+      <div className="question">
+        <h2>Where in the world would you like to be in your dream?</h2>
+      </div>
+      <div className="answer-input">
+        <input type="text" value={place} onChange={handlePlaceChange} />
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/code/src/index.css b/code/src/index.css
index 4a1df4db7..e186fc7c9 100644
--- a/code/src/index.css
+++ b/code/src/index.css
@@ -11,3 +11,171 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+
+body {
+  background-image: url(https://img.freepik.com/free-vector/linear-flat-abstract-lines-pattern_23-2148944144.jpg?w=740&t=st=1679234138~exp=1679234738~hmac=77ea19501fff6a0b8d30afafdb0fb128a8565547be77430806cc0d20fe6363ec);
+  background-repeat:no-repeat;
+  background-size:cover;
+  background-attachment: fixed;
+}
+
+
+.survey-container {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  background-color:rgba(239, 154, 181, 0.458);
+  height: 600px;
+  margin-top: 50px;
+  margin-left: 25px;
+  margin-right: 25px;
+  border-radius: 10px;
+
+}
+
+.header {
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 14px;
+  margin-top: 30px;
+  margin-bottom: 20px;
+  
+}
+
+.header h1 {
+  margin-bottom: -25px;
+}
+
+.header span {
+  color: white;
+  font-family: 'Pacifico', cursive;
+  font-weight: 200;
+  text-shadow: 1px 1px 2px rgb(240, 240, 240), 0 0 25px rgba(0, 0, 255, 0.467), 0 0 5px rgb(202, 23, 196);
+}
+
+
+.question {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: center;
+  margin-left: 30px;
+  margin-right: 30px;
+  font-size: 23px;
+  color: #ffffff;
+  padding: 13px;
+  /*margin-top: 30px;*/
+  margin-bottom: -30px;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: 300;
+}
+
+.question h2 {
+font-size: 23px;
+font-weight: 300;
+margin-top: 70px;
+margin-bottom: 30px;
+}
+
+.step {
+  margin-top: 20px;
+  color: rgb(255, 255, 255);
+  font-family: 'Rubik' sans-serif;
+  font-weight: bold;
+}
+
+.step-btn button {
+  padding: 5px 12px 5px 12px;
+  margin: 10px;
+  border-radius: 8px;;
+  border-style: none;
+  font-size: 20px;
+  font-family: 'Ubuntu', sans-serif;
+  color: rgb(255, 255, 255);
+  background-color: #f47bb4;
+}
+
+.step-btn button:hover {
+    background: #cb3978;
+    box-shadow: 1px 1px 2px rgb(255, 173, 209), 0 0 25px rgb(255, 255, 255), 0 0 5px rgb(255, 62, 226);
+}
+
+.answer-input input {
+  border-radius: 5px;
+  width: 180px;
+  height: 30px;
+  border-style: none;
+  margin-bottom: 20px;
+  font-size: 20px;
+  font-family: 'Rubik', sans-serif;
+  font-weight: 300;
+}
+
+.foodBtn {
+  display: flex;
+  flex-direction: column;
+  color: #ffffff;
+  font-size: 20px;
+  padding: 15px;
+}
+
+.select {
+  font-size: 18px;
+  background-color: #ffffff;
+  padding: 10px;
+  border-radius: 10px;
+  border-style: none;
+}
+
+.party-name {
+  margin-top: -90px;
+  color: white;
+  font-family: 'Ubuntu', sans-serif;
+}
+
+.party-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: 300;
+  margin-left: 25px;
+  margin-right: 25px;
+  font-size: 21px;
+  color: white;
+  padding: 9px;
+
+}
+
+.party-text p {
+  margin: -2px;
+}
+
+.party-text h3 {
+  color: white;
+  font-size: 35px;
+  margin: 0px;
+}
+
+
+.party-btn button {
+  padding: 8px;
+  font-family: 'Rubik', sans-serif;
+  border-style: none;
+  border-radius: 10px;
+  font-size: 18px;
+  color: rgb(255, 255, 255);
+  background-color: #d88baf;
+  
+}
+
+.party-btn button:hover {
+  background: #cb3978;
+  box-shadow: 1px 1px 2px rgb(255, 173, 209), 0 0 25px rgb(246, 237, 243), 0 0 5px rgb(255, 62, 226);
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..9a7dc43e1
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,64 @@
+{
+  "name": "project-survey",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "js-confetti": "^0.11.0",
+        "react-sparkle": "^2.0.0"
+      }
+    },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
+    "node_modules/js-confetti": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/js-confetti/-/js-confetti-0.11.0.tgz",
+      "integrity": "sha512-Hc7I3VI4r4H0nq5q/oQK+JJwGoYRYVHK72fGk8E9Ay1dbh+aiZ9yl0yFp1K4oYeq7YFDQAndYChwqLPA3QWQuA=="
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-sparkle": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-sparkle/-/react-sparkle-2.0.0.tgz",
+      "integrity": "sha512-Gy0us35SH25HeDa4t6Gu8oM4raAH4EKBzArENOoysgVl+jB5XCjsYRJhRF8Bfi8fdsVPjkNLNh1R6VYgGsInoA==",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0 <19"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..5bcb6211d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "js-confetti": "^0.11.0",
+    "react-sparkle": "^2.0.0"
+  }
+}