diff --git a/src/GuessControl.js b/src/GuessControl.js
index 64108b5..823ae9d 100644
--- a/src/GuessControl.js
+++ b/src/GuessControl.js
@@ -44,4 +44,4 @@ class GuessControl extends Component {
   }
 }
 
-export default GuessControl;
+export default GuessControl;
\ No newline at end of file
diff --git a/src/NumberGuessingGame.js b/src/NumberGuessingGame.js
index 07c5a24..a1826ba 100644
--- a/src/NumberGuessingGame.js
+++ b/src/NumberGuessingGame.js
@@ -3,6 +3,7 @@ import GuessControl from "./GuessControl";
 import GuessMessage from "./GuessMessage";
 import GameOver from "./GameOver";
 
+const MAX_ATTEMPTS = 5;
 /**
  *
  * Returns a random integer number from 1-100 inclusive
@@ -11,67 +12,46 @@ function 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,
-    };
-
-    /**
-     * 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);
-  }
+const NumberGuessingGame = () => {
+  const [numberToGuess, setNumberToGuess] = useState(getRandomNumber())
+  const [numberOfGuesses, setNumberOfGuesses] = useState(0)
+  const [latestGuess, setLatestGuess] = useState(null)
 
-  handleGuess(guess) {
-    this.setState({
-      latestGuess: guess,
-      numberOfGuesses: this.state.numberOfGuesses + 1,
-    });
+  const handleGuess = (guess) => {
+    setLatestGuess(Number(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 isGameOver =
-      isCorrectGuess || this.state.numberOfGuesses === MAX_ATTEMPTS;
-
-    return (
-      <div>
-        <h2>I'm thinking of a number from 1 to 100.</h2>
-        <h2>
-          Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
-        </h2>
-        <GuessControl onGuess={this.handleGuess} />
-        {isGameOver && (
-          <GameOver hasWon={isCorrectGuess} onReset={this.handleReset} />
-        )}
-        {!isGameOver && (
-          <GuessMessage
-            guess={this.state.latestGuess}
-            numberToGuess={this.state.numberToGuess}
-            numberOfGuesses={this.state.numberOfGuesses}
-          />
-        )}
-      </div>
-    );
-  }
+  const isCorrectGuess = latestGuess === numberToGuess;
+
+  const isGameOver = isCorrectGuess || numberOfGuesses === MAX_ATTEMPTS;
+
+  return (
+    <div>
+      <h2>I'm thinking of a number from 1 to 100.</h2>
+      <h2>
+        Can you guess the number I am thinking of in {MAX_ATTEMPTS} tries?
+      </h2>
+      <GuessControl onGuess={handleGuess} />
+      {isGameOver && (
+        <GameOver hasWon={isCorrectGuess} onReset={handleReset} />
+      )}
+      {!isGameOver && (
+        <GuessMessage
+          guess={latestGuess}
+          numberToGuess={numberToGuess}
+          numberOfGuesses={numberOfGuesses}
+        />
+      )}
+    </div>
+  );
 }
 
-export default NumberGuessingGame;
+
+export default NumberGuessingGame;
\ No newline at end of file