diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000000000000000000000000000000000000..b719b9504044310e0a47da04243e6d5c703c0606
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,82 @@
+import { useState } from 'react'
+
+const App = () => {
+  const header1 = "give feedback"
+  const header2 = "statistics"
+
+  const [good, setGood] = useState(0)
+  const [neutral, setNeutral] = useState(0)
+  const [bad, setBad] = useState(0)
+
+  const handleGoodClick = () => {
+    setGood(good + 1)
+  }
+
+  const handleNeutralClick = () => {
+    setNeutral(neutral + 1)
+  }
+
+  const handleBadClick = () => {
+    setBad(bad + 1)
+  }
+
+  return (
+    <div>
+        <Header1 header={header1} />
+        
+        <Button handleClick={handleGoodClick} text="good" />
+        <Button handleClick={handleNeutralClick} text="neutral" />
+        <Button handleClick={handleBadClick} text="bad" />
+
+        <Header2 header={header2} />
+        <Statistics good={good} neutral={neutral} bad={bad} />
+    </div>
+  )
+}
+
+const Header1 = (props) => {
+  return (
+    <>
+      <h1>{props.header}</h1>
+    </>
+  )
+}
+
+const Header2 = (props) => {
+  return (
+    <>
+      <h1>{props.header}</h1>
+    </>
+  )
+}
+
+const Button = ({ handleClick, text }) => {
+  return (
+    <button onClick={handleClick}>
+      {text}
+    </button>
+  )
+}
+
+const Statistics = ({ good, neutral, bad }) => {
+  const all = bad + neutral + good
+  const goodMinusBad = good - bad
+  
+  const averageGoodMinusBad = goodMinusBad / all
+  const averageGood = good / all
+
+  return (
+    <>
+      <p>
+      good {good} <br/>
+      neutral {neutral} <br/>
+      bad {bad} <br/>
+      all {bad + neutral + good} <br/>
+      average {averageGoodMinusBad} <br/>
+      positive {averageGood} %
+      </p>
+    </>
+  )
+}
+
+export default App;