diff --git a/package-lock.json b/package-lock.json
index 782a24a..fbb7df6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "globals": "^15.9.0",
         "postcss": "^8.4.47",
         "tailwindcss": "^3.4.11",
-        "vite": "^5.4.1"
+        "vite": "^5.4.6"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -4965,9 +4965,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.5.tgz",
-      "integrity": "sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==",
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
+      "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
diff --git a/package.json b/package.json
index a7413e1..11adb61 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,6 @@
     "globals": "^15.9.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.11",
-    "vite": "^5.4.1"
+    "vite": "^5.4.6"
   }
 }
diff --git a/src/Pages/Quiz.jsx b/src/Pages/Quiz.jsx
index fdc99d9..96f4df1 100644
--- a/src/Pages/Quiz.jsx
+++ b/src/Pages/Quiz.jsx
@@ -1,116 +1,96 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
 import { Data } from "./Data"; // Import your data
-// import './Question.css'; // Import your CSS file
 
-const Question = () => {
+const Quiz = () => {
   const [data, setData] = useState(Data);
   const [index, setIndex] = useState(0);
   const [score, setScore] = useState(0);
+  const [selectedAnswers, setSelectedAnswers] = useState(Array(data.length).fill(null)); // State for selected answers
   const navigate = useNavigate(); // Initialize useNavigate hook
 
-  // Function to move to the next question or show finish/play again buttons
+  // Function to move to the next question or finish the quiz
   const next = () => {
     if (index < data.length - 1) {
       setIndex(index + 1);
     } else {
-      document.querySelector(
-        ".score"
-      ).innerHTML = `<p>Your Score : ${score}/5</p>`;
-      document.querySelector(".quiz").innerHTML = "";
-
-      let nextBtn = document.querySelector("#next");
-      nextBtn.innerHTML = "Play Again";
-      nextBtn.classList.add("reset");
-      const reset = document.querySelector(".reset");
-      reset.addEventListener("click", () => {
-        window.location.reload();
-      });
-
-      // Add finish button
-      const finishBtn = document.createElement("button");
-      finishBtn.innerHTML = "Finish";
-      finishBtn.classList.add("finish");
-      finishBtn.addEventListener("click", finishQuiz);
-      document.querySelector(".btns").appendChild(finishBtn);
+      finishQuiz(); // Call finishQuiz if it's the last question
     }
-
-    const checked = document.querySelectorAll(".checkedValue");
-    checked.forEach((curVal) => {
-      curVal.checked = false;
-    });
   };
 
-  // Function to navigate to home page
+  // Function to finish the quiz
   const finishQuiz = () => {
-    navigate("/"); // Navigate to the home page
+    // Display score and handle submission logic
+    document.querySelector(".score").innerHTML = `<p>Your Score: ${score}/${data.length}</p>`;
+    document.querySelector(".quiz").style.display = "none";
+    // document.getElementById('next').style.display = 'none';
+    document.getElementById('submit').style.display = 'none';
+    document.getElementById('previous').style.display = 'none';
+
+    // Add finish button
+    const finishBtn = document.createElement("button");
+    finishBtn.innerHTML = "Finish";
+    finishBtn.classList.add(
+      "finish",
+      "bg-red-500",
+      "text-white",
+      "px-6",
+      "py-2",
+      "rounded-lg",
+      "hover:bg-red-700",
+      "transition",
+      "duration-300",
+      "ml-4" // Add margin-left to the "Finish" button
+    );
+    finishBtn.addEventListener("click", () => navigate("/")); // Navigate to home page
+    document.querySelector(".btns").appendChild(finishBtn);
+  };
+
+  // Function to move to the previous question
+  const previous = () => {
+    if (index > 0) {
+      setIndex(index - 1);
+    }
   };
 
   // Handle radio input change
   const handleInput = (event) => {
-    let chooseVal = event.target.value;
+    const chooseVal = event.target.value;
+    const newSelectedAnswers = [...selectedAnswers];
+    newSelectedAnswers[index] = chooseVal; // Save selected answer
+
     if (chooseVal === data[index].ans) {
       setScore(score + 1);
     }
+
+    setSelectedAnswers(newSelectedAnswers); // Update state
   };
 
   return (
-    <div className="section py-10 bg-gray-100">
-      <div className="container mx-auto max-w-lg p-6 bg-white shadow-lg rounded-lg">
+    <div className="section flex justify-center items-center bg-[#5a87a6]" style={{ minHeight: '75.9vh' }}>
+      <div className="container mx-auto max-w-lg p-6 bg-[#e2e8f0] shadow-lg rounded-lg">
         <div className="quiz">
           <div className="mb-6">
             <h1 className="text-2xl font-bold text-gray-800 mb-4">
-              Q : {data[index].q}
+              Q{index + 1}: {data[index].q}
             </h1>
+            <p className="text-gray-600">Question {index + 1} of {data.length}</p>
           </div>
 
-          {/* Option A */}
-          <div className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
-            <input
-              name="select"
-              type="radio"
-              onChange={handleInput}
-              className="checkedValue mr-3"
-              value={data[index].a}
-            />
-            <p className="text-gray-700">A : {data[index].a}</p>
-          </div>
-
-          {/* Option B */}
-          <div className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
-            <input
-              name="select"
-              type="radio"
-              onChange={handleInput}
-              className="checkedValue mr-3"
-              value={data[index].b}
-            />
-            <p className="text-gray-700">B : {data[index].b}</p>
-          </div>
-
-          {/* Option C */}
-          <div className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
-            <input
-              name="select"
-              type="radio"
-              onChange={handleInput}
-              className="checkedValue mr-3"
-              value={data[index].c}
-            />
-            <p className="text-gray-700">C : {data[index].c}</p>
-          </div>
-
-          {/* Option D */}
-          <div className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
-            <input
-              name="select"
-              type="radio"
-              onChange={handleInput}
-              className="checkedValue mr-3"
-              value={data[index].d}
-            />
-            <p className="text-gray-700">D : {data[index].d}</p>
-          </div>
+          {/* Options */}
+          {['a', 'b', 'c', 'd'].map((option) => (
+            <div key={option} className="option mb-4 flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer">
+              <input
+                name="select"
+                type="radio"
+                onChange={handleInput}
+                className="checkedValue mr-3"
+                value={data[index][option]}
+                checked={selectedAnswers[index] === data[index][option]} // Check if this is the selected answer
+              />
+              <p className="text-gray-700">{option.toUpperCase()}: {data[index][option]}</p>
+            </div>
+          ))}
         </div>
 
         {/* Score display */}
@@ -120,17 +100,37 @@ const Question = () => {
 
         {/* Navigation buttons */}
         <div className="btns flex justify-center mt-8">
-          <button
-            id="next"
-            onClick={next}
-            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300"
-          >
-            Next
-          </button>
+          {/* Conditionally render the Previous button */}
+          {index > 0 && (
+            <button
+              id="previous"
+              onClick={previous}
+              className="px-6 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition duration-300 mr-4"
+            >
+              Previous
+            </button>
+          )}
+          {index < data.length - 1 ? (
+            <button
+              id="next"
+              onClick={next}
+              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300"
+            >
+              Next
+            </button>
+          ) : (
+            <button
+              id="submit"
+              onClick={finishQuiz}
+              className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-300"
+            >
+              Submit
+            </button>
+          )}
         </div>
       </div>
     </div>
   );
 };
 
-export default Question;
+export default Quiz;
\ No newline at end of file