diff --git a/src/App.jsx b/src/App.jsx
index 34964d71..352751f9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,7 @@
 import React, { Component } from 'react';
+import Welcome from './components/Welcome';
+import Support from './components/Support';
 
-class Welcome extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return <h1>Meet the { this.props.name }</h1>;
-   }
-}
-
-const Hello = (props) => {
-  return <h1>Meet the <i>{props.name}</i></h1>
-}
 
 function App() {
   const name = 'StarGazers'
@@ -20,11 +10,10 @@ function App() {
       <article>
         <hgroup>
           <img src="images/group.svg" alt="StarGazers Group" />
-          <Welcome name="Stars" />
-          <Hello name="StarGazers" />
+          <Welcome name="StarsGazers" />
           <p>Members of an <b>intergalactic alliance</b><br />
             paving the way for peace and benevolence among all species. They are known for their enthusiasm for science, for their love of fun, and their dedication to education.</p>
-          <button className="outline" onClick={() => alert('Hi there')}>Click Me</button>
+            <Support/>
         </hgroup>
       </article>
     </div>
diff --git a/src/components/Support.jsx b/src/components/Support.jsx
new file mode 100644
index 00000000..549b2d5b
--- /dev/null
+++ b/src/components/Support.jsx
@@ -0,0 +1,11 @@
+import { useState } from "react";
+
+export default ()=>{
+  const [count, setCount] = useState(0)
+  return(
+    <button className="outline" onClick={() => setCount(count + 1)}>
+      {count ===0 ? "Click to suppport" : `Supported ${count} times`}
+      </button>
+
+  )
+}
\ No newline at end of file
diff --git a/src/components/Welcome.jsx b/src/components/Welcome.jsx
new file mode 100644
index 00000000..84a5b7a1
--- /dev/null
+++ b/src/components/Welcome.jsx
@@ -0,0 +1,3 @@
+export default (props) => {
+  return <h1>Meet the {props.name}</h1>
+}