diff --git a/part1/unicafe/src/App.js b/part1/unicafe/src/App.js
index 5757347..b9be9c0 100644
--- a/part1/unicafe/src/App.js
+++ b/part1/unicafe/src/App.js
@@ -1,5 +1,22 @@
 import { useState } from "react";
-
+const Statistics = (props) => {
+  return (
+    <div>
+      <p>good {props.good}</p>
+      <p>neutral {props.neutral}</p>
+      <p>bad {props.bad}</p>
+      <p> all {props.good + props.neutral + props.bad}</p>
+      <p>
+        average{" "}
+        {(props.good - props.bad) / (props.good + props.neutral + props.bad)}
+      </p>
+      <p>
+        positive {(props.good / (props.good + props.neutral + props.bad)) * 100}{" "}
+        %
+      </p>
+    </div>
+  );
+};
 const App = () => {
   // save clicks of each button to its own state
   const [good, setGood] = useState(0);
@@ -16,12 +33,7 @@ const App = () => {
 
       <h1>statistics</h1>
 
-      <p>good {good}</p>
-      <p>neutral {neutral}</p>
-      <p>bad {bad}</p>
-      <p>all {good + neutral + bad}</p>
-      <p>average {(good - bad) / (good + neutral + bad)}</p>
-      <p>positive {(good / (good + neutral + bad)) * 100} %</p>
+      <Statistics good={good} neutral={neutral} bad={bad} />
     </div>
   );
 };