diff --git a/eduaid_web/.dockerignore b/eduaid_web/.dockerignore
new file mode 100644
index 00000000..2eac0dc0
--- /dev/null
+++ b/eduaid_web/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+.git
+.env
\ No newline at end of file
diff --git a/eduaid_web/Dockerfile b/eduaid_web/Dockerfile
new file mode 100644
index 00000000..e211d89e
--- /dev/null
+++ b/eduaid_web/Dockerfile
@@ -0,0 +1,12 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 3000
+
+CMD ["npm", "start"]
\ No newline at end of file
diff --git a/eduaid_web/src/index.css b/eduaid_web/src/index.css
index 31dc491c..9ddb4bda 100644
--- a/eduaid_web/src/index.css
+++ b/eduaid_web/src/index.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+/* =========================
+   Base Styles
+   ========================= */
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -16,10 +20,38 @@ code {
     monospace;
 }
 
+/* =========================
+   Border Gradient
+   ========================= */
+
 .border-gradient {
-  border-width: 2px; 
+  border-width: 2px;
   border-style: solid;
   border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7);
   border-image-slice: 1;
   border-radius: 2rem;
+}
+
+/* =========================
+   Gradient Text Styling
+   ========================= */
+
+/* Shared Base Class */
+.gradient-text-base {
+  background: var(--gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: inline-block;
+  transform: translateZ(0);
+}
+
+/* Main Gradient */
+.gradient-text {
+  --gradient: linear-gradient(to right, #FF005C, #7600F2);
+}
+
+/* Secondary Gradient */
+.gradient-text-2 {
+  --gradient: linear-gradient(to right, #7600F2, #00CBE7);
 }
\ No newline at end of file
diff --git a/eduaid_web/src/pages/Home.jsx b/eduaid_web/src/pages/Home.jsx
index e00a0d23..fc05dc23 100644
--- a/eduaid_web/src/pages/Home.jsx
+++ b/eduaid_web/src/pages/Home.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import "../index.css";
-import logo_trans from "../assets/aossie_logo_transparent.png"
+import logo_trans from "../assets/aossie_logo_transparent.png";
 import starsImg from "../assets/stars.png";
 import arrow from "../assets/arrow.png";
 import gitStar from "../assets/gitStar.png";
@@ -47,14 +47,8 @@ const Home = () => {
           <img src={logo_trans} alt="logo" className="w-24 my-4 sm:my-6" />
 
           {/* Heading */}
-          <h1 className="text-5xl sm:text-6xl md:text-7xl text-center font-extrabold leading-tight">
-            <span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
-              Edu
-            </span>
-            <span className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
-              Aid
-            </span>
-          </h1>
+          <h1 className="gradient-text-base gradient-text">Edu</h1>
+          <h1 className="gradient-text-base gradient-text-2">Aid</h1>
 
           {/* Subtitle */}
           <div className="text-white text-lg sm:text-xl text-center mt-4 mb-6">
@@ -125,4 +119,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/eduaid_web/src/pages/Output.jsx b/eduaid_web/src/pages/Output.jsx
index 7add8fe1..fcf36483 100644
--- a/eduaid_web/src/pages/Output.jsx
+++ b/eduaid_web/src/pages/Output.jsx
@@ -7,420 +7,267 @@ import { FiShuffle, FiEdit2, FiCheck, FiX } from "react-icons/fi";
 
 const Output = () => {
   const [qaPairs, setQaPairs] = useState([]);
-  const [questionType, setQuestionType] = useState(
-    localStorage.getItem("selectedQuestionType")
-  );
-  const [pdfMode, setPdfMode] = useState("questions");
+  const [questionType] = useState(localStorage.getItem("selectedQuestionType"));
+
   const [editingIndex, setEditingIndex] = useState(null);
   const [editedQuestion, setEditedQuestion] = useState("");
   const [editedAnswer, setEditedAnswer] = useState("");
   const [editedOptions, setEditedOptions] = useState([]);
 
+  // Quiz State
+  const [quizMode, setQuizMode] = useState(false);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [selectedAnswers, setSelectedAnswers] = useState({});
+  const [showFeedback, setShowFeedback] = useState(false);
+  const [quizCompleted, setQuizCompleted] = useState(false);
+
+  // ===================== LOAD FROM STORAGE =====================
   useEffect(() => {
-    const handleClickOutside = (event) => {
-        const dropdown = document.getElementById('pdfDropdown');
-        if (dropdown && !dropdown.contains(event.target) && 
-            !event.target.closest('button')) {
-            dropdown.classList.add('hidden');
-        }
-    };
+    const data = JSON.parse(localStorage.getItem("qaPairs")) || {};
+    const combined = [];
+
+    if (data.output_mcq?.questions) {
+      data.output_mcq.questions.forEach((q) => {
+        combined.push({
+          question: q.question_statement,
+          options: q.options || [],
+          answer: q.answer,
+          question_type: "MCQ",
+        });
+      });
+    }
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-}, []);
+    setQaPairs(combined);
+  }, []);
 
+  // ===================== SHUFFLE =====================
   function shuffleArray(array) {
-    const shuffledArray = [...array];
-    for (let i = shuffledArray.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
-    }
-    return shuffledArray;
+    return [...array].sort(() => Math.random() - 0.5);
   }
 
   const shuffledOptionsMap = useMemo(() => {
-    return qaPairs.map((qaPair) => {
-      const combinedOptions = qaPair.options
-        ? [...qaPair.options, qaPair.answer]
-        : [qaPair.answer];
-      return shuffleArray(combinedOptions);
-    });
+    return qaPairs.map((qaPair) =>
+      shuffleArray([...(qaPair.options || []), qaPair.answer])
+    );
   }, [qaPairs]);
 
   const handleShuffleQuestions = () => {
-    if (editingIndex !== null) {
-      handleCancelEdit();
-    }
-    const shuffled = shuffleArray(qaPairs);
-    setQaPairs(shuffled);
+    setQaPairs(shuffleArray(qaPairs));
   };
 
+  // ===================== EDIT =====================
   const handleEditQuestion = (index) => {
     setEditingIndex(index);
     setEditedQuestion(qaPairs[index].question);
-    setEditedAnswer(qaPairs[index].answer || "");
+    setEditedAnswer(qaPairs[index].answer);
     setEditedOptions(qaPairs[index].options || []);
   };
 
   const handleSaveQuestion = (index) => {
-    const updatedQaPairs = [...qaPairs];
-    updatedQaPairs[index] = {
-      ...updatedQaPairs[index],
+    const updated = [...qaPairs];
+    updated[index] = {
+      ...updated[index],
       question: editedQuestion,
       answer: editedAnswer,
       options: editedOptions,
     };
-    setQaPairs(updatedQaPairs);
+    setQaPairs(updated);
     setEditingIndex(null);
-    setEditedQuestion("");
-    setEditedAnswer("");
-    setEditedOptions([]);
   };
 
   const handleCancelEdit = () => {
     setEditingIndex(null);
-    setEditedQuestion("");
-    setEditedAnswer("");
-    setEditedOptions([]);
   };
 
-  const handleOptionChange = (optionIndex, value) => {
-    const updatedOptions = [...editedOptions];
-    updatedOptions[optionIndex] = value;
-    setEditedOptions(updatedOptions);
-  };
+  // ===================== QUIZ RENDER =====================
+  const renderQuizMode = () => {
+    if (!qaPairs.length) {
+      return <div className="text-white text-center mt-6">No questions.</div>;
+    }
 
-  useEffect(() => {
-    const qaPairsFromStorage =
-      JSON.parse(localStorage.getItem("qaPairs")) || {};
-    if (qaPairsFromStorage) {
-      const combinedQaPairs = [];
-
-      if (qaPairsFromStorage["output_boolq"]) {
-        qaPairsFromStorage["output_boolq"]["Boolean_Questions"].forEach(
-          (question, index) => {
-            combinedQaPairs.push({
-              question,
-              question_type: "Boolean",
-              context: qaPairsFromStorage["output_boolq"]["Text"],
-            });
-          }
-        );
-      }
-
-      if (qaPairsFromStorage["output_mcq"]) {
-        qaPairsFromStorage["output_mcq"]["questions"].forEach((qaPair) => {
-          combinedQaPairs.push({
-            question: qaPair.question_statement,
-            question_type: "MCQ",
-            options: qaPair.options,
-            answer: qaPair.answer,
-            context: qaPair.context,
-          });
-        });
-      }
-
-      if (qaPairsFromStorage["output_mcq"] || questionType === "get_mcq") {
-        qaPairsFromStorage["output"].forEach((qaPair) => {
-          combinedQaPairs.push({
-            question: qaPair.question_statement,
-            question_type: "MCQ",
-            options: qaPair.options,
-            answer: qaPair.answer,
-            context: qaPair.context,
-          });
-        });
-      }
-
-      if (questionType == "get_boolq") {
-        qaPairsFromStorage["output"].forEach((qaPair) => {
-          combinedQaPairs.push({
-            question: qaPair,
-            question_type: "Boolean",
-          });
-        });
-      } else if (qaPairsFromStorage["output"] && questionType !== "get_mcq") {
-        qaPairsFromStorage["output"].forEach((qaPair) => {
-          combinedQaPairs.push({
-            question:
-              qaPair.question || qaPair.question_statement || qaPair.Question,
-            options: qaPair.options,
-            answer: qaPair.answer || qaPair.Answer,
-            context: qaPair.context,
-            question_type: "Short",
-          });
-        });
-      }
+    const current = qaPairs[currentQuestionIndex];
 
-      setQaPairs(combinedQaPairs);
-    }
-  }, []);
+    if (quizCompleted) {
+      const score = qaPairs.filter(
+        (q, i) => selectedAnswers[i] === q.answer
+      ).length;
 
-  const generateGoogleForm = async () => {
-    try {
-      const result = await apiClient.post("/generate_gform", {
-        qa_pairs: qaPairs,
-        question_type: questionType,
-      });
-      const formUrl = result.form_link;
-      window.open(formUrl, "_blank");
-    } catch (error) {
-      console.error("Failed to generate Google Form:", error);
+      return (
+        <div className="text-white text-center p-6">
+          <h2 className="text-xl font-bold mb-4">Quiz Completed 🎉</h2>
+          <p className="mb-4">
+            Score: {score} / {qaPairs.length}
+          </p>
+          <button
+            className="bg-purple-600 px-4 py-2 rounded"
+            onClick={() => {
+              setQuizCompleted(false);
+              setCurrentQuestionIndex(0);
+              setSelectedAnswers({});
+            }}
+          >
+            Retry
+          </button>
+        </div>
+      );
     }
-  };
 
-  const loadLogoAsBytes = async () => {
-    try {
-      const response = await fetch(logoPNG);
-      const arrayBuffer = await response.arrayBuffer();
-      return new Uint8Array(arrayBuffer);
-    } catch (error) {
-      console.error('Error loading logo:', error);
-      return null;
-    }
-  };
+    return (
+      <div className="text-white px-4 py-6">
+        <div className="mb-3 text-sm">
+          Question {currentQuestionIndex + 1} of {qaPairs.length}
+        </div>
 
-    const generatePDF = async (mode) => {
-    const logoBytes = await loadLogoAsBytes();
-    const worker = new Worker(new URL("../workers/pdfWorker.js", import.meta.url), { type: "module" });
+        <div className="mb-4 text-lg font-semibold">
+          {current.question}
+        </div>
 
-    worker.postMessage({ qaPairs, mode, logoBytes });
+        {current.options?.map((option, idx) => (
+          <button
+            key={idx}
+            className="block w-full mb-2 bg-gray-700 px-3 py-2 rounded"
+            onClick={() => {
+              setSelectedAnswers({
+                ...selectedAnswers,
+                [currentQuestionIndex]: option,
+              });
+              setShowFeedback(true);
+            }}
+          >
+            {option}
+          </button>
+        ))}
 
-    worker.onmessage = (e) => {
-      const blob = new Blob([e.data], { type: 'application/pdf' });
-      const link = document.createElement('a');
-      link.href = URL.createObjectURL(blob);
-      link.download = "generated_questions.pdf";
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
+        {showFeedback && (
+          <div className="mt-3">
+            {selectedAnswers[currentQuestionIndex] === current.answer ? (
+              <span className="text-green-500">Correct ✅</span>
+            ) : (
+              <span className="text-red-500">
+                Incorrect ❌ (Correct: {current.answer})
+              </span>
+            )}
+          </div>
+        )}
 
-      document.getElementById('pdfDropdown').classList.add('hidden');
-      worker.terminate();
-    };
+        <div className="flex justify-between mt-6">
+          <button
+            disabled={currentQuestionIndex === 0}
+            className="bg-gray-600 px-4 py-2 rounded"
+            onClick={() => {
+              setCurrentQuestionIndex(currentQuestionIndex - 1);
+              setShowFeedback(false);
+            }}
+          >
+            Previous
+          </button>
 
-    worker.onerror = (err) => {
-      console.error("PDF generation failed in worker:", err);
-      worker.terminate();
-    };
+          {currentQuestionIndex === qaPairs.length - 1 ? (
+            <button
+              className="bg-purple-600 px-4 py-2 rounded"
+              onClick={() => setQuizCompleted(true)}
+            >
+              Finish
+            </button>
+          ) : (
+            <button
+              disabled={!selectedAnswers[currentQuestionIndex]}
+              className="bg-purple-600 px-4 py-2 rounded"
+              onClick={() => {
+                setCurrentQuestionIndex(currentQuestionIndex + 1);
+                setShowFeedback(false);
+              }}
+            >
+              Next
+            </button>
+          )}
+        </div>
+
+        <div className="text-center mt-6">
+          <button
+            className="underline"
+            onClick={() => setQuizMode(false)}
+          >
+            Exit Quiz
+          </button>
+        </div>
+      </div>
+    );
   };
 
+  // ===================== MAIN RETURN =====================
   return (
     <div className="popup w-full h-full bg-[#02000F] flex justify-center items-center">
-      <div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient">
-        <div className="flex flex-col h-full">
-          {/* Header - Responsive logo and title */}
-          <Link to="/">
-            <div className="flex items-end gap-[2px] px-4 sm:px-6">
-              <img 
-                src={logoPNG} 
-                alt="logo" 
-                className="w-12 sm:w-16 my-4 block" 
-              />
-              <div className="text-xl sm:text-2xl mb-3 font-extrabold">
-                <span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
-                  Edu
-                </span>
-                <span className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
-                  Aid
-                </span>
-              </div>
-            </div>
-          </Link>
+      <div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient flex flex-col">
 
-          {/* Title and Shuffle Button */}
-          <div className="flex justify-between items-center mt-3 mx-4 sm:mx-6">
-            <div className="font-bold text-lg sm:text-xl text-white">
-              Generated Questions
+        <Link to="/">
+          <div className="flex items-end gap-1 px-6">
+            <img src={logoPNG} alt="logo" className="w-12 my-4" />
+            <div className="text-2xl font-extrabold mb-3 text-white">
+              EduAid
             </div>
+          </div>
+        </Link>
+
+        <div className="flex justify-between items-center mx-6">
+          <div className="text-white font-bold text-xl">
+            Generated Questions
+          </div>
+
+          <div className="flex gap-3">
             <button
-              className={`${
-                editingIndex !== null
-                  ? 'bg-gray-500 cursor-not-allowed'
-                  : 'bg-[#7C3AED] hover:bg-[#5A2AD9]'
-              } text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-semibold transition-colors flex items-center gap-2`}
+              className="bg-purple-600 px-4 py-2 rounded text-white"
               onClick={handleShuffleQuestions}
-              disabled={editingIndex !== null}
             >
-              <FiShuffle className="text-sm sm:text-base" />
               Shuffle
             </button>
-          </div>
-
-          {/* Questions Container - Responsive padding and margins */}
-          <div className="flex-1 overflow-y-auto scrollbar-hide px-2 sm:px-4">
-            {qaPairs &&
-              qaPairs.map((qaPair, index) => {
-                const shuffledOptions = shuffledOptionsMap[index];
-                const isEditing = editingIndex === index;
-                
-                return (
-                  <div
-                    key={index}
-                    className="px-3 sm:px-4 bg-[#d9d9d90d] border-black border my-2 sm:my-3 mx-1 sm:mx-2 rounded-xl py-3 sm:py-4"
-                  >
-                    <div className="flex justify-between items-center mb-2">
-                      <div className="text-[#E4E4E4] text-xs sm:text-sm">
-                        Question {index + 1}
-                      </div>
-                      {!isEditing ? (
-                        <button
-                          className="bg-[#518E8E] hover:bg-[#3a6b6b] text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-semibold transition-colors shadow-sm flex items-center gap-2"
-                          onClick={() => handleEditQuestion(index)}
-                        >
-                          <FiEdit2 className="text-sm sm:text-base" />
-                          Edit
-                        </button>
-                      ) : (
-                        <div className="flex gap-2">
-                          <button
-                            className="bg-green-700 hover:bg-green-800 text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-semibold transition-colors shadow-sm flex items-center gap-2"
-                            onClick={() => handleSaveQuestion(index)}
-                          >
-                            <FiCheck className="text-sm sm:text-base" />
-                            Save
-                          </button>
-                          <button
-                            className="bg-gray-600 hover:bg-gray-700 text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-semibold transition-colors shadow-sm flex items-center gap-2"
-                            onClick={handleCancelEdit}
-                          >
-                            <FiX className="text-sm sm:text-base" />
-                            Cancel
-                          </button>
-                        </div>
-                      )}
-                    </div>
-
-                    {!isEditing ? (
-                      <>
-                        <div className="text-[#FFF4F4] text-sm sm:text-base my-1 sm:my-2 leading-relaxed">
-                          {qaPair.question}
-                        </div>
-                        {qaPair.question_type !== "Boolean" && (
-                          <>
-                            <div className="text-[#E4E4E4] text-xs sm:text-sm mt-3 sm:mt-4">
-                              Answer
-                            </div>
-                            <div className="text-[#FFF4F4] text-sm sm:text-base leading-relaxed">
-                              {qaPair.answer}
-                            </div>
-                            {qaPair.options && qaPair.options.length > 0 && (
-                              <div className="text-[#FFF4F4] text-sm sm:text-base mt-2 sm:mt-3">
-                                {shuffledOptions.map((option, idx) => (
-                                  <div key={idx} className="mb-1 sm:mb-2">
-                                    <span className="text-[#E4E4E4] text-xs sm:text-sm">
-                                      Option {idx + 1}:
-                                    </span>{" "}
-                                    <span className="text-[#FFF4F4] text-sm sm:text-base">
-                                      {option}
-                                    </span>
-                                  </div>
-                                ))}
-                              </div>
-                            )}
-                          </>
-                        )}
-                      </>
-                    ) : (
-                      <>
-                        <div className="text-[#E4E4E4] text-xs sm:text-sm mb-1">
-                          Edit Question
-                        </div>
-                        <textarea
-                          className="w-full bg-[#1a1a2e] text-[#FFF4F4] text-sm sm:text-base p-2 rounded border border-gray-600 focus:border-[#7600F2] focus:outline-none resize-none"
-                          rows="3"
-                          value={editedQuestion}
-                          onChange={(e) => setEditedQuestion(e.target.value)}
-                        />
-                        
-                        {qaPair.question_type !== "Boolean" && (
-                          <>
-                            <div className="text-[#E4E4E4] text-xs sm:text-sm mt-3 mb-1">
-                              Edit Answer
-                            </div>
-                            <textarea
-                              className="w-full bg-[#1a1a2e] text-[#FFF4F4] text-sm sm:text-base p-2 rounded border border-gray-600 focus:border-[#7600F2] focus:outline-none resize-none"
-                              rows="2"
-                              value={editedAnswer}
-                              onChange={(e) => setEditedAnswer(e.target.value)}
-                            />
-                            
-                            {editedOptions && editedOptions.length > 0 && (
-                              <div className="mt-3">
-                                <div className="text-[#E4E4E4] text-xs sm:text-sm mb-2">
-                                  Edit Options
-                                </div>
-                                {editedOptions.map((option, optIdx) => (
-                                  <div key={optIdx} className="mb-2">
-                                    <div className="text-[#E4E4E4] text-xs mb-1">
-                                      Option {optIdx + 1}
-                                    </div>
-                                    <input
-                                      type="text"
-                                      className="w-full bg-[#1a1a2e] text-[#FFF4F4] text-sm sm:text-base p-2 rounded border border-gray-600 focus:border-[#7600F2] focus:outline-none"
-                                      value={option}
-                                      onChange={(e) => handleOptionChange(optIdx, e.target.value)}
-                                    />
-                                  </div>
-                                ))}
-                              </div>
-                            )}
-                          </>
-                        )}
-                      </>
-                    )}
-                  </div>
-                );
-              })}
-          </div>
 
-          {/* Action Buttons - Responsive layout */}
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mx-4 sm:mx-auto pb-4 sm:pb-6">
             <button
-              className="bg-[#518E8E] items-center flex gap-1 w-full sm:w-auto font-semibold text-white px-4 sm:px-6 py-3 sm:py-2 rounded-xl text-sm sm:text-base hover:bg-[#3a6b6b] transition-colors justify-center"
-              onClick={generateGoogleForm}
+              className="bg-green-600 px-4 py-2 rounded text-white"
+              onClick={() => {
+                setQuizMode(true);
+                setCurrentQuestionIndex(0);
+                setSelectedAnswers({});
+                setQuizCompleted(false);
+              }}
             >
-              Generate Google form
+              Start Quiz
             </button>
-            
-            <div className="relative w-full sm:w-auto">
-              <button
-                className="bg-[#518E8E] items-center flex gap-1 w-full sm:w-auto font-semibold text-white px-4 sm:px-6 py-3 sm:py-2 rounded-xl text-sm sm:text-base hover:bg-[#3a6b6b] transition-colors justify-center"
-                onClick={() => document.getElementById('pdfDropdown').classList.toggle('hidden')}
-              >
-                Generate PDF
-              </button>
-              
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-6 mt-4">
+          {quizMode ? (
+            renderQuizMode()
+          ) : (
+            qaPairs.map((qaPair, index) => (
               <div
-                id="pdfDropdown"
-                className="hidden absolute bottom-full mb-1 left-0 sm:left-auto right-0 sm:right-auto bg-[#02000F] shadow-md text-white rounded-lg shadow-lg z-50 w-full sm:w-48"
+                key={index}
+                className="bg-[#1a1a2e] p-4 rounded mb-4 text-white"
               >
-                <button
-                  className="block w-full text-left px-4 py-2 hover:bg-gray-500 rounded-t-lg text-sm sm:text-base"
-                  onClick={() => generatePDF('questions')}
-                >
-                  Questions Only
-                </button>
-                <button
-                  className="block w-full text-left px-4 py-2 hover:bg-gray-500 text-sm sm:text-base"
-                  onClick={() => generatePDF('questions_answers')}
-                >
-                  Questions with Answers
-                </button>
-                <button
-                  className="block w-full text-left px-4 py-2 hover:bg-gray-500 rounded-b-lg text-sm sm:text-base"
-                  onClick={() => generatePDF('answers')}
-                >
-                  Answers Only
-                </button>
+                <div className="flex justify-between">
+                  <span>Question {index + 1}</span>
+                  <button
+                    onClick={() => handleEditQuestion(index)}
+                    className="text-sm bg-teal-600 px-2 py-1 rounded"
+                  >
+                    Edit
+                  </button>
+                </div>
+
+                <div className="mt-2">{qaPair.question}</div>
+
+                <div className="mt-2 text-sm text-gray-400">
+                  Answer: {qaPair.answer}
+                </div>
               </div>
-            </div>
-          </div>
+            ))
+          )}
         </div>
+
       </div>
     </div>
   );
 };
 
-
-export default Output;
+export default Output;
\ No newline at end of file