diff --git a/src/App.jsx b/src/App.jsx
index b7bde75..a264089 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,19 +1,37 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import ResultCard from "./components/ResultCard";
 import QuestionCard from "./components/QuestionCard";
 import { shuffleArray } from "./lib/utils";
 import rawTriviaQuestion from "./lib/data";
 
-const triviaQuestion = rawTriviaQuestion.results[0];
+// const triviaQuestion = rawTriviaQuestion.results[0];
 
 function App() {
   const [selectedAnswer, setSelectedAnswer] = useState(null);
-  const [questionData, setQuestionData] = useState(triviaQuestion);
+  // const [questionData, setQuestionData] = useState(triviaQuestion);
+  const [questionIndex, setQuestionIndex] = useState(0);
+  const[questionData, setQuestionData] = useState(rawTriviaQuestion.results[0]);
 
   const selectAnswer = (selection) => {
     setSelectedAnswer(selection);
   };
 
+
+
+  const nextQuestion = () =>{
+
+    fetch('https://opentdb.com/api.php?amount=1&category=9&type=multiple')
+    .then((response) => response.json())
+    .then((data) => {
+       console.log(data);
+       setQuestionData(data.results[0]);
+       setSelectedAnswer(null);
+    })
+    .catch((err) => {
+       console.log(err.message);
+    })
+    };
+
   let card;
 
   if (selectedAnswer) {
@@ -37,11 +55,13 @@ function App() {
     );
   }
 
+
+
   return (
     <div className="w-100 my-5 d-flex justify-content-center align-items-center">
       <div style={{ maxWidth: "45%" }}>
         <h1 className="text-center">Trivia App</h1>
-        <button className="btn btn-success">Next Question</button>
+        <button onClick={nextQuestion} className="btn btn-success">Next Question</button>
         {card}
       </div>
     </div>