diff --git a/package-lock.json b/package-lock.json
index 33e2a1b..ad88fd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3684,6 +3684,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -5133,13 +5144,19 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001272",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001272.tgz",
-      "integrity": "sha512-DV1j9Oot5dydyH1v28g25KoVm7l8MTxazwuiH3utWiAS6iL/9Nh//TGwqFEeqqN8nnWYQ8HHhUq+o4QPt9kvYw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
-      }
+      "version": "1.0.30001446",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001446.tgz",
+      "integrity": "sha512-fEoga4PrImGcwUUGEol/PoFCSBnSkA9drgdkxXkJLsUBOnJ8rs3zDv6ApqYXGQFOyMPsjh79naWhF4DAxbF8rw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
     },
     "node_modules/capture-exit": {
       "version": "2.0.0",
@@ -18538,9 +18555,11 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -23446,6 +23465,13 @@
       "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
       "requires": {
         "type-fest": "^0.21.3"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.21.3",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
+        }
       }
     },
     "ansi-html": {
@@ -24607,9 +24633,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001272",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001272.tgz",
-      "integrity": "sha512-DV1j9Oot5dydyH1v28g25KoVm7l8MTxazwuiH3utWiAS6iL/9Nh//TGwqFEeqqN8nnWYQ8HHhUq+o4QPt9kvYw=="
+      "version": "1.0.30001446",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001446.tgz",
+      "integrity": "sha512-fEoga4PrImGcwUUGEol/PoFCSBnSkA9drgdkxXkJLsUBOnJ8rs3zDv6ApqYXGQFOyMPsjh79naWhF4DAxbF8rw=="
     },
     "capture-exit": {
       "version": "2.0.0",
@@ -34973,9 +34999,11 @@
       "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g=="
     },
     "type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "optional": true,
+      "peer": true
     },
     "type-is": {
       "version": "1.6.18",
diff --git a/src/App.js b/src/App.js
index 4c99985..6059ab5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,15 @@
-import React, { Component } from "react";
+import React from "react";
 import NumberGuessingGame from "./NumberGuessingGame";
 import "./App.css";
 
-class App extends Component {
-  render() {
+const App = () => {
+
     return (
       <div className="App">
         <NumberGuessingGame />
       </div>
     );
-  }
+  
 }
 
 export default App;
diff --git a/src/Button.js b/src/Button.js
index dc8c9c0..ee8cb6e 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -4,10 +4,12 @@ const buttonStyle = {
   minHeight: "2em",
 };
 
-export default function Button({ onClick, children }) {
+const Button = ({ onClick, children }) => {
   return (
     <button style={buttonStyle} onClick={onClick}>
       {children}
     </button>
   );
 }
+
+export default Button;
\ No newline at end of file
diff --git a/src/GameOver.js b/src/GameOver.js
index c702f1d..a5fffd8 100644
--- a/src/GameOver.js
+++ b/src/GameOver.js
@@ -1,6 +1,6 @@
 import Button from "./Button";
 
-function GameOver({ hasWon, onReset }) {
+const GameOver = ({ hasWon, onReset }) => {
   return (
     <div>
       {hasWon && <h2>Congratulation! You guessed my number.</h2>}
diff --git a/src/GuessControl.js b/src/GuessControl.js
index 64108b5..7af9a91 100644
--- a/src/GuessControl.js
+++ b/src/GuessControl.js
@@ -1,47 +1,39 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import Button from "./Button";
 
-class GuessControl extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      currentGuess: "",
-    };
+const GuessControl = (props) => {
+   const [currentGuess, setCurrentGuess] = useState("");
+  
 
     /**
      * These lines are required to make the methods/functions declared on this
      *  class have the correct `this` object when they run.
      */
-    this.handleInputChange = this.handleInputChange.bind(this);
-    this.onSubmitGuess = this.onSubmitGuess.bind(this);
-  }
-
-  handleInputChange(event) {
-    this.setState({ currentGuess: event.target.value });
-  }
+    const handleInputChange = (event) => {
+         setCurrentGuess(event.target.value);
+  
+  };
 
-  onSubmitGuess() {
+  const onSubmitGuess = () => {
     // Since the values from an HTML input are strings by default,
     //  convert to a number for the returned guess value
     //  by passing in the string to the Number function.
     // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
-    this.props.onGuess(Number(this.state.currentGuess));
-    this.setState({ currentGuess: "" });
-  }
+    props.onGuess(Number(currentGuess));
+    setCurrentGuess("");
+  };
 
-  render() {
     return (
       <div>
         <input
           type="number"
-          value={this.state.currentGuess}
-          onChange={this.handleInputChange}
+          value={currentGuess}
+          onChange={handleInputChange}
         />
-        <Button onClick={this.onSubmitGuess}>Submit Guess</Button>
+        <Button onClick={onSubmitGuess}>Submit Guess</Button>
       </div>
     );
   }
-}
+
 
 export default GuessControl;
diff --git a/src/GuessMessage.js b/src/GuessMessage.js
index 44b23cc..75566b5 100644
--- a/src/GuessMessage.js
+++ b/src/GuessMessage.js
@@ -1,4 +1,4 @@
-function getGuessMessage(guess, numberToGuess) {
+const getGuessMessage = (guess, numberToGuess) => {
   const distanceApart = Math.abs(numberToGuess - guess);
   if (guess < numberToGuess) {
     if (distanceApart > 10) {
@@ -15,7 +15,7 @@ function getGuessMessage(guess, numberToGuess) {
   }
 }
 
-function GuessMessage({ guess, numberToGuess, numberOfGuesses }) {
+const GuessMessage = ({ guess, numberToGuess, numberOfGuesses }) => {
   return (
     <div>
       {guess && <p>{getGuessMessage(guess, numberToGuess)}</p>}
diff --git a/src/NumberGuessingGame.js b/src/NumberGuessingGame.js
index 07c5a24..11054a6 100644
--- a/src/NumberGuessingGame.js
+++ b/src/NumberGuessingGame.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import GuessControl from "./GuessControl";
 import GuessMessage from "./GuessMessage";
 import GameOver from "./GameOver";
@@ -7,50 +7,37 @@ import GameOver from "./GameOver";
  *
  * Returns a random integer number from 1-100 inclusive
  */
-function getRandomNumber() {
+const getRandomNumber = () => {
   return Math.floor(Math.random() * 100) + 1;
 }
 
 const MAX_ATTEMPTS = 5;
 
-class NumberGuessingGame extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      numberToGuess: getRandomNumber(),
-      numberOfGuesses: 0,
-      latestGuess: null,
-    };
+const NumberGuessingGame = () => {
+  const [numberToGuess, setNumberToGuess] = useState(getRandomNumber());
+  const [numberOfGuesses, setNumberOfGuesses] = useState(0);
+  const [latestGuess, setLatestGuess] = useState(null) 
 
     /**
      * These lines are required to make the methods/functions declared on this
      *  class have the correct `this` object when they run.
      */
-    this.handleGuess = this.handleGuess.bind(this);
-    this.handleReset = this.handleReset.bind(this);
-  }
-
-  handleGuess(guess) {
-    this.setState({
-      latestGuess: guess,
-      numberOfGuesses: this.state.numberOfGuesses + 1,
-    });
-  }
+  const handleGuess = (guess) => {
+   setLatestGuess(guess);
+   setNumberOfGuesses(numberOfGuesses + 1);
+  };
+    
 
-  handleReset() {
-    this.setState({
-      numberToGuess: getRandomNumber(),
-      numberOfGuesses: 0,
-      latestGuess: null,
-    });
-  }
+  const handleReset = () => {
+   setNumberToGuess(getRandomNumber());
+   setNumberOfGuesses(0);
+   setLatestGuess(null);
+  };
 
-  render() {
-    const isCorrectGuess = this.state.latestGuess === this.state.numberToGuess;
+    const isCorrectGuess = latestGuess === numberToGuess;
 
     const isGameOver =
-      isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS;
+      isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS;
 
     return (
       <div>
@@ -58,20 +45,19 @@ class NumberGuessingGame extends Component {
         <h2>
           Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
         </h2>
-        <GuessControl onGuess={this.handleGuess} />
+        <GuessControl onGuess={handleGuess} />
         {isGameOver && (
-          <GameOver hasWon={isCorrectGuess} onReset={this.handleReset} />
+          <GameOver hasWon={isCorrectGuess} onReset={handleReset} />
         )}
         {!isGameOver && (
           <GuessMessage
-            guess={this.state.latestGuess}
-            numberToGuess={this.state.numberToGuess}
-            numberOfGuesses={this.state.numberOfGuesses}
+            guess={latestGuess}
+            numberToGuess={numberToGuess}
+            numberOfGuesses={numberOfGuesses}
           />
         )}
       </div>
     );
   }
-}
 
 export default NumberGuessingGame;