diff --git a/apps/frontend/src/components/common/ExamPaperPDFViewer.tsx b/apps/frontend/src/components/common/ExamPaperPDFViewer.tsx
new file mode 100644
index 0000000..9c09412
--- /dev/null
+++ b/apps/frontend/src/components/common/ExamPaperPDFViewer.tsx
@@ -0,0 +1,901 @@
+import { useState, useEffect, useRef } from "react";
+import {
+  Download,
+  ChevronLeft,
+  ChevronRight,
+  ZoomIn,
+  ZoomOut,
+  Maximize2,
+  Minimize2,
+  Loader2,
+  Home,
+  BookOpen,
+  FileText,
+} from "lucide-react";
+import { Button } from "../ui/button";
+type ExamPaperPDFViewerProps = {
+  examData: any;
+  sections: any;
+};
+const ExamPaperPDFViewer = ({
+  examData,
+  sections,
+}: ExamPaperPDFViewerProps) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [zoom, setZoom] = useState(1);
+  const [isFlipping, setIsFlipping] = useState(false);
+  const [flipDirection, setFlipDirection] = useState(null);
+  const [pdfUrl, setPdfUrl] = useState(null);
+  const [isGenerating, setIsGenerating] = useState(true);
+  const [error, setError] = useState(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [viewMode, setViewMode] = useState("double");
+  const leftCanvasRef = useRef(null);
+  const rightCanvasRef = useRef(null);
+  const pdfDocRef = useRef(null);
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (!examData || !sections || sections.length === 0) {
+      setIsGenerating(false);
+      return;
+    }
+
+    const generatePDF = async () => {
+      try {
+        const script = document.createElement("script");
+        script.src =
+          "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js";
+        script.async = true;
+
+        await new Promise((resolve, reject) => {
+          script.onload = resolve;
+          script.onerror = reject;
+          document.head.appendChild(script);
+        });
+
+        // @ts-ignore
+        const { jsPDF } = window.jspdf;
+
+        const doc = new jsPDF({
+          orientation: "portrait",
+          unit: "mm",
+          format: "a4",
+        });
+
+        let yPos = 20;
+        const pageHeight = 297;
+        const margin = 20;
+        const maxWidth = 170;
+
+        const checkPageBreak = (needed: number) => {
+          if (yPos + needed > pageHeight - margin) {
+            doc.addPage();
+            yPos = margin;
+            return true;
+          }
+          return false;
+        };
+
+        // ============ FIRST PAGE - ICSE Style Header ============
+        doc.setFontSize(9);
+        doc.setFont("times", "normal");
+        doc.text(
+          "This Paper consists of 11 printed pages and 1 blank page.",
+          margin,
+          yPos
+        );
+        yPos += 10;
+
+        doc.text(`T23 ${examData.paper_code}`, margin, yPos);
+        doc.text("Turn Over", 190, yPos, { align: "right" });
+        yPos += 10;
+
+        doc.text("© Copyright reserved.", 105, yPos, { align: "center" });
+        yPos += 15;
+
+        doc.setFontSize(16);
+        doc.setFont("times", "bold");
+        doc.text(examData.subject?.toUpperCase() || "PHYSICS", 105, yPos, {
+          align: "center",
+        });
+        yPos += 10;
+
+        doc.setFontSize(12);
+        doc.setFont("times", "italic");
+        doc.text(`(${examData.paper_name || "SCIENCE PAPER 1"})`, 105, yPos, {
+          align: "center",
+        });
+        yPos += 8;
+
+        // Horizontal line
+        doc.setLineWidth(0.5);
+        doc.line(margin, yPos, 190, yPos);
+        yPos += 8;
+
+        doc.setFontSize(10);
+        doc.setFont("times", "italic");
+        doc.text(`Maximum Marks: ${examData.maximum_marks}`, 105, yPos, {
+          align: "center",
+        });
+        yPos += 6;
+        doc.setFont("times", "bold");
+        doc.text(`Time allowed: ${examData.time_allowed}`, 105, yPos, {
+          align: "center",
+        });
+        yPos += 8;
+
+        doc.setFont("times", "italic");
+        doc.setFontSize(9);
+        const headerInstructions = [
+          "Answers to this Paper must be written on the paper provided separately.",
+          "",
+          "You will not be allowed to write during first 15 minutes.",
+          "This time is to be spent in reading the question paper.",
+          "",
+          "The time given at the head of this Paper is the time allowed for writing the answers.",
+        ];
+
+        headerInstructions.forEach((instruction) => {
+          if (instruction === "") {
+            yPos += 3;
+          } else {
+            checkPageBreak(6);
+            const lines = doc.splitTextToSize(instruction, maxWidth);
+            doc.text(lines, 105, yPos, { align: "center" });
+            yPos += lines.length * 5;
+          }
+        });
+
+        yPos += 5;
+        doc.setLineWidth(0.5);
+        doc.line(margin, yPos, 190, yPos);
+        yPos += 8;
+
+        doc.setFont("times", "bold");
+        doc.setFontSize(10);
+        const sectionInstruction =
+          "Section A is compulsory. Attempt any four questions from Section B.";
+        const sectionLines = doc.splitTextToSize(sectionInstruction, maxWidth);
+        doc.text(sectionLines, 105, yPos, { align: "center" });
+        yPos += sectionLines.length * 5 + 5;
+
+        doc.setFont("times", "italic");
+        doc.setFontSize(9);
+        const marksInstruction =
+          "The intended marks for questions or parts of questions are given in brackets [ ].";
+        const marksLines = doc.splitTextToSize(marksInstruction, maxWidth);
+        doc.text(marksLines, 105, yPos, { align: "center" });
+        yPos += marksLines.length * 5 + 5;
+
+        doc.setLineWidth(0.5);
+        doc.line(margin, yPos, 190, yPos);
+        yPos += 15;
+
+        // ============ SECTIONS (Continue on same page if space available) ============
+        sections.forEach((section: any, sectionIndex: any) => {
+          // Only add new page if not the first section or if no space
+          if (sectionIndex > 0 || yPos > pageHeight - 80) {
+            doc.addPage();
+            yPos = 15;
+
+            // Add page header
+            doc.setFontSize(9);
+            doc.setFont("times", "normal");
+            doc.text(`T23 ${examData.paper_code}`, margin, yPos);
+            const pageNum = doc.internal.pages.length - 1;
+            doc.text(`${pageNum}`, 105, yPos, { align: "center" });
+            doc.text("Turn Over", 190, yPos, { align: "right" });
+            yPos += 10;
+          }
+
+          doc.setFontSize(11);
+          doc.setFont("times", "bold");
+          doc.text(
+            `${section.name.toUpperCase()} (${section.marks} Marks)`,
+            105,
+            yPos,
+            { align: "center" }
+          );
+          yPos += 6;
+
+          doc.setFontSize(10);
+          doc.setFont("times", "italic");
+          if (section.instruction) {
+            const instrLines = doc.splitTextToSize(
+              `(${section.instruction})`,
+              maxWidth
+            );
+            doc.text(instrLines, 105, yPos, { align: "center" });
+            yPos += instrLines.length * 5;
+          }
+          yPos += 8;
+
+          (section.questions || []).forEach((question: any) => {
+            checkPageBreak(20);
+
+            if (yPos === margin) {
+              doc.setFontSize(9);
+              doc.setFont("times", "normal");
+              doc.text(`T23 ${examData.paper_code}`, margin, 15);
+              const currentPageNum = doc.internal.pages.length - 1;
+              doc.text(`${currentPageNum}`, 105, 15, { align: "center" });
+              doc.text("Turn Over", 190, 15, { align: "right" });
+              yPos = 25;
+            }
+
+            doc.setFont("times", "bold");
+            doc.setFontSize(11);
+            doc.text(`Question ${question.number}`, margin, yPos);
+            doc.setFont("times", "normal");
+            doc.setFontSize(10);
+            doc.text(`[${question.total_marks}]`, 190, yPos, {
+              align: "right",
+            });
+            yPos += 7;
+
+            if (question.instruction) {
+              doc.setFont("times", "normal");
+              doc.setFontSize(10);
+              const instrLines = doc.splitTextToSize(
+                question.instruction,
+                maxWidth
+              );
+              doc.text(instrLines, margin, yPos);
+              yPos += instrLines.length * 5 + 3;
+            }
+
+            (question.parts || []).forEach((part: any) => {
+              checkPageBreak(15);
+
+              if (yPos === margin) {
+                doc.setFontSize(9);
+                doc.setFont("times", "normal");
+                doc.text(`T23 ${examData.paper_code}`, margin, 15);
+                const currentPageNum = doc.internal.pages.length - 1;
+                doc.text(`${currentPageNum}`, 105, 15, { align: "center" });
+                doc.text("Turn Over", 190, 15, { align: "right" });
+                yPos = 25;
+              }
+
+              doc.setFont("times", "normal");
+              doc.setFontSize(10);
+
+              if (part.number) {
+                const partLabel = `(${part.number})`;
+                if (part.marks) {
+                  doc.text(`[${part.marks}]`, 190, yPos, { align: "right" });
+                }
+
+                const contentIndent = margin + 12;
+
+                if (part.description) {
+                  doc.text(partLabel, margin, yPos);
+                  const descLines = doc.splitTextToSize(
+                    part.description,
+                    maxWidth - 12
+                  );
+                  doc.text(descLines[0], contentIndent, yPos);
+                  yPos += 5;
+
+                  for (let i = 1; i < descLines.length; i++) {
+                    doc.text(descLines[i], contentIndent, yPos);
+                    yPos += 5;
+                  }
+                } else if (part.question && !part.sub_parts?.length) {
+                  doc.text(partLabel, margin, yPos);
+                  const qLines = doc.splitTextToSize(
+                    part.question,
+                    maxWidth - 12
+                  );
+                  doc.text(qLines[0], contentIndent, yPos);
+                  yPos += 5;
+
+                  for (let i = 1; i < qLines.length; i++) {
+                    doc.text(qLines[i], contentIndent, yPos);
+                    yPos += 5;
+                  }
+                } else {
+                  doc.text(partLabel, margin, yPos);
+                }
+                yPos += 3;
+              }
+
+              if (part.sub_parts && part.sub_parts.length > 0) {
+                part.sub_parts.forEach((subPart: any, idx: number) => {
+                  checkPageBreak(10);
+
+                  if (yPos === margin) {
+                    doc.setFontSize(9);
+                    doc.setFont("times", "normal");
+                    doc.text(`T23 ${examData.paper_code}`, margin, 15);
+                    const currentPageNum = doc.internal.pages.length - 1;
+                    doc.text(`${currentPageNum}`, 105, 15, { align: "center" });
+                    doc.text("Turn Over", 190, 15, { align: "right" });
+                    yPos = 25;
+                  }
+
+                  if (subPart.question) {
+                    const subLabel = `${subPart.letter}`;
+                    const subIndent = part.description
+                      ? margin + 8
+                      : margin + 12;
+                    const textIndent = part.description
+                      ? margin + 18
+                      : margin + 22;
+
+                    doc.text(subLabel, subIndent, yPos);
+                    const subLines = doc.splitTextToSize(
+                      subPart.question,
+                      maxWidth - (textIndent - margin)
+                    );
+                    doc.text(subLines, textIndent, yPos);
+                    yPos +=
+                      subLines.length * 5 +
+                      (idx < part.sub_parts.length - 1 ? 1 : 2);
+                  }
+                });
+              }
+
+              if (part.options && part.options.length > 0) {
+                part.options.forEach((option: any) => {
+                  checkPageBreak(6);
+                  const optText = `${option.option_letter} ${option.text}`;
+                  const optLines = doc.splitTextToSize(optText, maxWidth - 12);
+                  doc.text(optLines, margin + 8, yPos);
+                  yPos += optLines.length * 5;
+                });
+                yPos += 3;
+              }
+
+              if (part.diagram) {
+                checkPageBreak(30);
+                yPos += 2;
+                doc.setLineWidth(0.3);
+                doc.rect(margin + 8, yPos, 80, 25);
+                doc.setFont("times", "italic");
+                doc.setFontSize(9);
+                doc.text("[Diagram]", margin + 48, yPos + 13, {
+                  align: "center",
+                });
+                yPos += 28;
+                doc.setFont("times", "normal");
+                doc.setFontSize(10);
+              }
+
+              yPos += 3;
+            });
+
+            yPos += 5;
+          });
+        });
+
+        const pdfBlob = doc.output("blob");
+        const url = URL.createObjectURL(pdfBlob);
+        // @ts-ignore
+        setPdfUrl(url);
+        setTotalPages(doc.internal.pages.length - 1);
+        setIsGenerating(false);
+      } catch (error) {
+        console.error("Error generating PDF:", error);
+        // @ts-ignore
+        setError(error.message);
+        setIsGenerating(false);
+      }
+    };
+
+    generatePDF();
+
+    return () => {
+      if (pdfUrl) URL.revokeObjectURL(pdfUrl);
+    };
+  }, [examData, sections]);
+
+  // Render PDF pages
+  useEffect(() => {
+    if (!pdfUrl || currentPage === 0) return;
+
+    const loadPDF = async () => {
+      try {
+        // @ts-ignore
+        if (!window["pdfjs-dist/build/pdf"]) {
+          const script = document.createElement("script");
+          script.src =
+            "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
+          await new Promise((resolve, reject) => {
+            script.onload = resolve;
+            script.onerror = reject;
+            document.head.appendChild(script);
+          });
+        }
+        // @ts-ignore
+        const pdfjsLib = window["pdfjs-dist/build/pdf"];
+        pdfjsLib.GlobalWorkerOptions.workerSrc =
+          "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
+
+        const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
+        pdfDocRef.current = pdf;
+
+        // Render left page
+        if (currentPage > 0 && leftCanvasRef.current) {
+          const page = await pdf.getPage(currentPage);
+          const viewport = page.getViewport({ scale: zoom * 1.5 });
+          // @ts-ignore
+          const context = leftCanvasRef.current.getContext("2d");
+          // @ts-ignore
+          leftCanvasRef.current.height = viewport.height;
+          // @ts-ignore
+          leftCanvasRef.current.width = viewport.width;
+
+          await page.render({ canvasContext: context, viewport }).promise;
+        }
+
+        // Render right page (if in double mode and page exists)
+        if (
+          viewMode === "double" &&
+          currentPage + 1 <= totalPages &&
+          rightCanvasRef.current
+        ) {
+          const page = await pdf.getPage(currentPage + 1);
+          const viewport = page.getViewport({ scale: zoom * 1.5 });
+          // @ts-ignore
+          const context = rightCanvasRef.current.getContext("2d");
+          // @ts-ignore
+          rightCanvasRef.current.height = viewport.height;
+          // @ts-ignore
+          rightCanvasRef.current.width = viewport.width;
+
+          await page.render({ canvasContext: context, viewport }).promise;
+        }
+      } catch (error) {
+        console.error("Error loading PDF:", error);
+      }
+    };
+
+    loadPDF();
+  }, [pdfUrl, currentPage, zoom, viewMode, totalPages]);
+
+  const nextPage = () => {
+    const increment = viewMode === "double" ? 2 : 1;
+    if (currentPage + increment <= totalPages && !isFlipping) {
+      // @ts-ignore
+      setFlipDirection("next");
+      setIsFlipping(true);
+      setTimeout(() => {
+        setCurrentPage((prev) => Math.min(prev + increment, totalPages));
+        setIsFlipping(false);
+        setFlipDirection(null);
+      }, 800);
+    }
+  };
+
+  const prevPage = () => {
+    const decrement = viewMode === "double" ? 2 : 1;
+    if (currentPage - decrement >= 1 && !isFlipping) {
+      // @ts-ignore
+      setFlipDirection("prev");
+      setIsFlipping(true);
+      setTimeout(() => {
+        setCurrentPage((prev) => Math.max(prev - decrement, 1));
+        setIsFlipping(false);
+        setFlipDirection(null);
+      }, 800);
+    }
+  };
+
+  const downloadPDF = () => {
+    if (pdfUrl) {
+      const a = document.createElement("a");
+      a.href = pdfUrl;
+      a.download = `${examData?.subject}_${examData?.year}_Paper.pdf`;
+      a.click();
+    }
+  };
+
+  const toggleFullscreen = () => {
+    if (!isFullscreen) {
+      // @ts-ignore
+      containerRef.current?.requestFullscreen?.() ||
+        // @ts-ignore
+        containerRef.current?.webkitRequestFullscreen?.();
+      setIsFullscreen(true);
+    } else {
+      // @ts-ignore
+      document.exitFullscreen?.() || document.webkitExitFullscreen?.();
+      setIsFullscreen(false);
+    }
+  };
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+      document.removeEventListener(
+        "webkitfullscreenchange",
+        handleFullscreenChange
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleKeyPress = (e: any) => {
+      if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === " ") {
+        e.preventDefault();
+        nextPage();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        prevPage();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setCurrentPage(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        if (!isFlipping) {
+          setCurrentPage(totalPages);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, [currentPage, totalPages, isFlipping, viewMode]);
+
+  const handleZoomIn = () => {
+    setZoom((prev) => Math.min(2, prev + 0.15));
+  };
+
+  const handleZoomOut = () => {
+    setZoom((prev) => Math.max(0.6, prev - 0.15));
+  };
+
+  if (isGenerating) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+        <div className="text-center">
+          <Loader2 className="w-16 h-16 text-purple-400 animate-spin mx-auto mb-4" />
+          <p className="text-white text-xl">Generating PDF Exam Paper...</p>
+          <p className="text-purple-300 text-sm mt-2">This may take a moment</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+        <div className="text-center bg-red-500/10 border border-red-500/50 rounded-lg p-8 max-w-md">
+          <p className="text-red-400 text-lg mb-4">Error generating PDF</p>
+          <p className="text-red-300 text-sm">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={` py-6  px-4 ${isFullscreen ? "fixed inset-0 z-50" : ""}`}
+    >
+      {/* Controls Bar */}
+      <div className="max-w-7xl mx-auto mb-6">
+        <div className="bg-white/10 backdrop-blur-lg rounded-xl p-4 shadow-2xl border border-white/20">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            {/* Left controls */}
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => setCurrentPage(0)}
+                disabled={currentPage === 0}
+                className="p-2.5 bg-white/20 hover:bg-white/30 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg transition-all hover:scale-105"
+                title="Go to Cover"
+              >
+                <Home className="w-5 h-5 text-white" />
+              </button>
+
+              <div className="w-px h-8 bg-white/30"></div>
+
+              <button
+                onClick={prevPage}
+                disabled={currentPage <= 1 || isFlipping}
+                className="p-2.5 bg-white/20 hover:bg-white/30 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg transition-all hover:scale-105"
+                title="Previous Page"
+              >
+                <ChevronLeft className="w-6 h-6 text-white" />
+              </button>
+
+              <div className="bg-white/20 rounded-lg px-4 py-2 min-w-[140px] text-center">
+                <span className="text-white font-semibold">
+                  {currentPage === 0
+                    ? "Cover"
+                    : viewMode === "double" && currentPage + 1 <= totalPages
+                      ? `${currentPage}-${currentPage + 1} / ${totalPages}`
+                      : `${currentPage} / ${totalPages}`}
+                </span>
+              </div>
+
+              <button
+                onClick={nextPage}
+                disabled={currentPage >= totalPages || isFlipping}
+                className="p-2.5 bg-white/20 hover:bg-white/30 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg transition-all hover:scale-105"
+                title="Next Page"
+              >
+                <ChevronRight className="w-6 h-6 text-white" />
+              </button>
+            </div>
+
+            {/* Right controls */}
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() =>
+                  setViewMode(viewMode === "single" ? "double" : "single")
+                }
+                className={`p-2.5 rounded-lg transition-all hover:scale-105 ${
+                  viewMode === "double"
+                    ? "bg-purple-600 hover:bg-purple-700"
+                    : "bg-white/20 hover:bg-white/30"
+                }`}
+                title={
+                  viewMode === "single"
+                    ? "Double Page View"
+                    : "Single Page View"
+                }
+              >
+                {viewMode === "double" ? (
+                  <BookOpen className="w-5 h-5 text-white" />
+                ) : (
+                  <FileText className="w-5 h-5 text-white" />
+                )}
+              </button>
+
+              <div className="w-px h-8 bg-white/30"></div>
+
+              <button
+                onClick={handleZoomOut}
+                disabled={zoom <= 0.6}
+                className="p-2.5 bg-white/20 hover:bg-white/30 disabled:opacity-30 rounded-lg transition-all hover:scale-105"
+                title="Zoom Out"
+              >
+                <ZoomOut className="w-5 h-5 text-white" />
+              </button>
+
+              <div className="bg-white/20 rounded-lg px-3 py-2 min-w-[70px] text-center">
+                <span className="text-white font-semibold text-sm">
+                  {Math.round(zoom * 100)}%
+                </span>
+              </div>
+
+              <button
+                onClick={handleZoomIn}
+                disabled={zoom >= 2}
+                className="p-2.5 bg-white/20 hover:bg-white/30 disabled:opacity-30 rounded-lg transition-all hover:scale-105"
+                title="Zoom In"
+              >
+                <ZoomIn className="w-5 h-5 text-white" />
+              </button>
+
+              <div className="w-px h-8 bg-white/30"></div>
+
+              <button
+                onClick={toggleFullscreen}
+                className="p-2.5 bg-white/20 hover:bg-white/30 rounded-lg transition-all hover:scale-105"
+                title={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+              >
+                {isFullscreen ? (
+                  <Minimize2 className="w-5 h-5 text-white" />
+                ) : (
+                  <Maximize2 className="w-5 h-5 text-white" />
+                )}
+              </button>
+
+              <button
+                onClick={downloadPDF}
+                className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-all hover:scale-105 shadow-lg"
+                title="Download PDF"
+              >
+                <Download className="w-5 h-5" />
+                <span className="hidden sm:inline font-medium">Download</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="text-center mt-8 mb-6">
+        <p className="text-white/60 text-base">
+          {currentPage === 0
+            ? "Click 'Open Exam Paper' to begin • Use navigation controls above"
+            : "Use arrow keys (← →) or Space to navigate • Press ESC to exit fullscreen"}
+        </p>
+      </div>
+
+      {/* PDF Viewer */}
+      <div className="max-w-7xl mx-auto perspective-2000">
+        {currentPage === 0 ? (
+          /* Cover Page */
+          <div className="flex justify-center">
+            <div className="bg-gradient-to-br from-purple-50 via-white to-blue-50 rounded-2xl shadow-2xl  w-full max-w-[700px] max-h-max flex justify-center items-center p-4  border-4 border-purple-200 transform hover:scale-[1.01] transition-transform duration-300">
+              <div className="text-center ">
+                <div>
+                  <h1 className="text-3xl font-bold  mb-6 tracking-tight">
+                    {examData?.subject?.toUpperCase()}
+                  </h1>
+                  <p className="text-xl  font-light">{examData?.paper_name}</p>
+                </div>
+
+                <div className="text-xl space-y-3 py-6 border-t border-b border-purple-200">
+                  <p>
+                    <strong className="font-semibold">Maximum Marks:</strong>{" "}
+                    {examData?.maximum_marks}
+                  </p>
+                  <p>
+                    <strong className="font-semibold">Time allowed:</strong>{" "}
+                    {examData?.time_allowed}
+                  </p>
+                </div>
+                <p className="text-sm mb-4 font-medium pt-4">
+                  Paper Code: {examData?.paper_code} • Year {examData?.year}
+                </p>
+
+                <Button
+                  onClick={() => setCurrentPage(1)}
+                  type="button"
+                  className="w-full py-2 rounded-md font-semibold cursor-pointer 
+                             bg-gradient-to-r from-purple-600 to-pink-500 
+                             text-white shadow-md hover:opacity-90 transition"
+                >
+                  Open Exam Paper
+                </Button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          /* PDF Pages with Realistic Book Flip Animation */
+          <div className="flex justify-center gap-1 relative">
+            {/* Left Page (Static) */}
+            <div className="relative preserve-3d">
+              <div
+                className="bg-white rounded-l-xl shadow-2xl overflow-hidden"
+                style={{
+                  boxShadow:
+                    "-15px 0 30px -10px rgba(0, 0, 0, 0.3), inset -8px 0 20px rgba(0, 0, 0, 0.05)",
+                }}
+              >
+                <canvas
+                  ref={leftCanvasRef}
+                  className="max-w-full h-auto block"
+                  style={{
+                    maxHeight: isFullscreen ? "90vh" : "80vh",
+                    width: "auto",
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* Right Page (Flipping) - Only in double mode */}
+            {viewMode === "double" && currentPage + 1 <= totalPages && (
+              <div
+                className={`relative preserve-3d origin-left ${
+                  isFlipping && flipDirection === "next"
+                    ? "animate-pageFlipNext"
+                    : isFlipping && flipDirection === "prev"
+                      ? "animate-pageFlipPrev"
+                      : ""
+                }`}
+              >
+                <div
+                  className="bg-white rounded-r-xl shadow-2xl overflow-hidden"
+                  style={{
+                    boxShadow:
+                      "15px 0 30px -10px rgba(0, 0, 0, 0.3), inset 8px 0 20px rgba(0, 0, 0, 0.05)",
+                  }}
+                >
+                  <canvas
+                    ref={rightCanvasRef}
+                    className="max-w-full h-auto block"
+                    style={{
+                      maxHeight: isFullscreen ? "90vh" : "80vh",
+                      width: "auto",
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Center Spine Shadow */}
+            <div
+              className="absolute top-0 left-1/2 transform -translate-x-1/2 w-2 h-full pointer-events-none"
+              style={{
+                background:
+                  "linear-gradient(to right, rgba(0,0,0,0.2), transparent, rgba(0,0,0,0.2))",
+                zIndex: 10,
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      <style>{`
+        .perspective-2000 {
+          perspective: 2000px;
+        }
+
+        .preserve-3d {
+          transform-style: preserve-3d;
+        }
+
+        .origin-left {
+          transform-origin: left center;
+        }
+
+        @keyframes pageFlipNext {
+          0% {
+            transform: rotateY(0deg);
+            box-shadow: 15px 0 30px -10px rgba(0, 0, 0, 0.3);
+          }
+          25% {
+            box-shadow: 20px 0 40px -5px rgba(0, 0, 0, 0.5);
+          }
+          50% {
+            transform: rotateY(-90deg);
+            box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
+          }
+          51% {
+            transform: rotateY(-90deg);
+            box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
+          }
+          75% {
+            transform: rotateY(-180deg);
+            box-shadow: -20px 0 40px -5px rgba(0, 0, 0, 0.5);
+          }
+          100% {
+            transform: rotateY(-180deg);
+            box-shadow: -15px 0 30px -10px rgba(0, 0, 0, 0.3);
+          }
+        }
+
+        @keyframes pageFlipPrev {
+          0% {
+            transform: rotateY(-180deg);
+            box-shadow: -15px 0 30px -10px rgba(0, 0, 0, 0.3);
+          }
+          25% {
+            transform: rotateY(-90deg);
+            box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
+          }
+          50% {
+            transform: rotateY(-90deg);
+            box-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
+          }
+          75% {
+            box-shadow: 20px 0 40px -5px rgba(0, 0, 0, 0.5);
+          }
+          100% {
+            transform: rotateY(0deg);
+            box-shadow: 15px 0 30px -10px rgba(0, 0, 0, 0.3);
+          }
+        }
+
+        .animate-pageFlipNext {
+          animation: pageFlipNext 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
+          backface-visibility: hidden;
+        }
+
+        .animate-pageFlipPrev {
+          animation: pageFlipPrev 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
+          backface-visibility: hidden;
+        }
+
+        canvas {
+          image-rendering: crisp-edges;
+          image-rendering: -webkit-optimize-contrast;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ExamPaperPDFViewer;
diff --git a/apps/frontend/src/components/pages/ExamPaperPage.tsx b/apps/frontend/src/components/pages/ExamPaperPage.tsx
index dab9dd5..09e3989 100644
--- a/apps/frontend/src/components/pages/ExamPaperPage.tsx
+++ b/apps/frontend/src/components/pages/ExamPaperPage.tsx
@@ -1,14 +1,17 @@
-import PageHeader from "@/components/common/PageHeader";
 import { useApi } from "@/hook/useApi";
 import { useLocation } from "@tanstack/react-router";
-import { useMemo, useRef } from "react";
-import { Button } from "../ui/button";
-import GlassDropdown from "../common/GlassDropdown";
+import { useMemo, useRef, useState, useCallback } from "react";
 import GlassmorphicLoader from "../common/GlassLoader";
+import ExamPaperPDFViewer from "../common/ExamPaperPDFViewer";
+import PageHeader from "../common/PageHeader";
+import GlassLayout from "@/layouts/GlassLayout";
+import { motion, AnimatePresence } from "framer-motion";
 
 const ExamPaperPage = () => {
   const location = useLocation();
+  const [retryKey, setRetryKey] = useState(0);
 
+  // --- Parse search params ---
   const searchString =
     typeof location.search === "string"
       ? location.search
@@ -30,6 +33,7 @@ const ExamPaperPage = () => {
       return {
         subject: searchParams.get("subject") ?? "",
         year: Number(searchParams.get("year")) || new Date().getFullYear(),
+        retryKey, // include retry key to re-trigger API
       };
     } else {
       return {
@@ -38,69 +42,46 @@ const ExamPaperPage = () => {
         paper: searchParams.get("paper") ?? "",
         code: searchParams.get("code") ?? "",
         year: Number(searchParams.get("year")) || new Date().getFullYear(),
+        retryKey,
       };
     }
-  }, [location.search, prevShow]);
+  }, [location.search, prevShow, retryKey]);
 
   const endpoint = prevShow
     ? "/exam-paper/get/prev-exam-paper"
     : "/llm/gen-question-paper";
 
-  // Create stable enabled condition based on payload values
   const isEnabled = useMemo(() => {
-    if (prevShow) {
-      // For prev=true, only need subject
-      return !!apiPayload.subject;
-    } else {
-      // For new generation, need more fields
-      return !!(
-        apiPayload.subject ||
-        apiPayload.board ||
-        apiPayload.paper ||
-        apiPayload.code
-      );
-    }
-  }, [
-    prevShow,
-    apiPayload.subject,
-    apiPayload.board,
-    apiPayload.paper,
-    apiPayload.code,
-  ]);
+    if (prevShow) return !!apiPayload.subject;
+    return !!(
+      apiPayload.subject ||
+      apiPayload.board ||
+      apiPayload.paper ||
+      apiPayload.code
+    );
+  }, [prevShow, apiPayload]);
 
-  // Track successful API calls
   const hasSuccessfullyLoaded = useRef(false);
 
-  // Single API call with conditional endpoint - DISABLE SCHEMA VALIDATION TEMPORARILY
   const {
     data: examPaperData,
-    isLoading: isLoadingExamPaper,
-    isError: isExamPaperError,
-    error: examPaperError,
+    isLoading,
+    isError,
+    error,
     isSuccess,
+    refetch,
   } = useApi<
     {
       data?: {
-        exam_paper?: {
-          exam?: any;
-          sections?: any[];
-        };
+        exam_paper?: { exam?: any; sections?: any[] };
       };
     },
-    | { subject: string; year: number }
-    | {
-        subject: string;
-        board: string;
-        paper: string;
-        code: string;
-        year: number;
-      }
+    any
   >(
     {
       endpoint,
       method: "POST",
       payload: apiPayload,
-      // responseSchema: examPaperResponseSchema, // COMMENTED OUT TO BYPASS VALIDATION
     },
     {
       enabled: isEnabled,
@@ -110,201 +91,62 @@ const ExamPaperPage = () => {
     }
   );
 
-  // Mark as successfully loaded when we get data
   if (isSuccess && examPaperData && !hasSuccessfullyLoaded.current) {
     hasSuccessfullyLoaded.current = true;
   }
 
-  // Extract data from response - fix the data path
   const examPaperResponse = examPaperData?.data?.exam_paper;
   const examData = examPaperResponse?.exam;
   const sections = examPaperResponse?.sections;
 
-  /* ---------------------------------- */
-  /*           Helper Functions         */
-  /* ---------------------------------- */
-
-  // Helper function to extract question text from any nested structure
-  const getQuestionText = (questionPart: any): string => {
-    if (!questionPart) return "";
-
-    // Check main question field first
-    if (questionPart.question) return questionPart.question;
-
-    // Check description field
-    if (questionPart.description) return questionPart.description;
-
-    // Check if there are sub_parts with questions
-    if (questionPart.sub_parts && questionPart.sub_parts.length > 0) {
-      const firstSubPart = questionPart.sub_parts[0];
-      if (firstSubPart.question) return firstSubPart.question;
-    }
-    return "";
-  };
-
-  // Helper function to render all parts of a question
-  const renderQuestionParts = (parts: any[], level = 0) => {
-    return parts.map((part, index) => {
-      const questionText = getQuestionText(part);
-      const hasSubParts = part.sub_parts && part.sub_parts.length > 0;
-
-      return (
-        <div
-          key={part.number || part.letter || index}
-          className={`mb-4 ${level > 0 ? "ml-6" : ""}`}
-        >
-          {/* Question header with number/letter */}
-          {(part.number || part.letter) && questionText && (
-            <div className="mb-2">
-              <span className="font-medium">
-                {level === 0 ? `(${part.number})` : part.letter}{" "}
-              </span>
-              {questionText}
-              {part.marks && (
-                <span className="float-right text-sm">[{part.marks}]</span>
-              )}
-            </div>
-          )}
-
-          {/* Description only (when no direct question but has description) */}
-          {part.description && !questionText && (
-            <div className="italic text-gray-700 mb-3">{part.description}</div>
-          )}
-
-          {/* Options for multiple choice */}
-          {part.options && part.options.length > 0 && (
-            <div className="ml-6 space-y-1 mt-2">
-              {part.options.map((option: any, optIndex: number) => (
-                <div key={optIndex} className="flex items-start">
-                  <span className="font-medium mr-3 min-w-6">
-                    {option.option_letter}
-                  </span>
-                  <span>{option.text}</span>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Constants given */}
-          {part.constants_given &&
-            Object.keys(part.constants_given).length > 0 && (
-              <div className="mt-2 p-3 border border-gray-300 bg-gray-50 text-sm">
-                <div className="font-medium mb-1">Given:</div>
-                {Object.entries(part.constants_given).map(([key, value]) => (
-                  <div key={key}>
-                    {key} = {String(value)}
-                  </div>
-                ))}
-              </div>
-            )}
-
-          {/* Equation template */}
-          {part.equation_template && (
-            <div className="mt-2 p-3 border border-gray-300 bg-yellow-50 text-sm">
-              <div className="font-medium mb-1">Complete the equation:</div>
-              <div className="font-mono bg-white p-2 border">
-                {part.equation_template}
-              </div>
-            </div>
-          )}
-
-          {/* Diagram */}
-          {part.diagram && (
-            <div className="mt-2 p-3 border border-gray-300 bg-gray-50 text-sm">
-              <div className="italic mb-1">
-                <strong>Diagram:</strong> {part.diagram.description}
-              </div>
-              {part.diagram.labels && part.diagram.labels.length > 0 && (
-                <div>
-                  <strong>Labels:</strong> {part.diagram.labels.join(", ")}
-                </div>
-              )}
-            </div>
-          )}
+  const handleRetry = useCallback(() => {
+    hasSuccessfullyLoaded.current = false;
+    setRetryKey((prev) => prev + 1);
+    refetch?.();
+  }, [refetch]);
 
-          {/* Recursively render sub-parts */}
-          {hasSubParts && renderQuestionParts(part.sub_parts, level + 1)}
-        </div>
-      );
-    });
-  };
+  // --- Reusable UI blocks ---
+  const LoaderOverlay = ({ message }: { message: string }) => (
+    <GlassmorphicLoader size="lg" fullScreen message={message} />
+  );
 
-  /* ---------------------------------- */
-  /*           UI Components            */
-  /* ---------------------------------- */
+  const RetryButton = ({ label }: { label: string }) => (
+    <motion.button
+      whileTap={{ scale: 0.95 }}
+      whileHover={{ scale: 1.05 }}
+      onClick={handleRetry}
+      className="bg-gradient-to-r from-indigo-400 to-purple-500 text-white font-medium px-6 py-2.5 rounded-lg shadow-md hover:shadow-lg transition-all"
+    >
+      {label}
+    </motion.button>
+  );
 
-  const SimpleLoader = () => (
-    <div className="flex items-center justify-center min-h-screen px-4">
-      <div className="text-center p-8">
-        <GlassmorphicLoader
-          size="lg"
-          message="Loading Exam Paper for ICSE..."
-        />
+  const ErrorState = () => (
+    <div className="flex flex-col items-center justify-center bg-white/10 min-h-screen gap-6 text-center px-6">
+      <div className="bg-gradient-to-r from-transparent via-white/20 to-transparent rounded-2xl p-8 backdrop-blur-md shadow-lg">
+        <h2 className="text-xl font-semibold text-red-600 mb-3">
+          {prevShow ? "Error Loading Exam Paper" : "Error Generating Paper"}
+        </h2>
+        <p className="text-gray-300 max-w-md mb-6">
+          {error?.message || "An unexpected error occurred. Please try again."}
+        </p>
+        <RetryButton label="Try Again" />
       </div>
     </div>
   );
 
-  const ErrorState = () => {
-    hasSuccessfullyLoaded.current = false;
-    return (
-      <div className="flex items-center justify-center min-h-screen px-4">
-        <div className="text-center max-w-md p-8">
-          <div className="text-red-600 mb-6">
-            <div className="w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
-              <svg fill="currentColor" viewBox="0 0 20 20" className="w-8 h-8">
-                <path
-                  fillRule="evenodd"
-                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </div>
-            <h2 className="text-xl font-semibold mb-3 text-gray-800">
-              {prevShow
-                ? "Error Loading Exam Paper"
-                : "Error Generating Exam Paper"}
-            </h2>
-            <p className="text-gray-600 mb-6">
-              {examPaperError?.message ||
-                "An unexpected error occurred. Please try again."}
-            </p>
-          </div>
-          <button
-            onClick={() => window.location.reload()}
-            className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors"
-          >
-            Try Again
-          </button>
-        </div>
-      </div>
-    );
-  };
-
   const NoPayloadState = () => (
-    <div className="flex items-center justify-center min-h-screen px-4">
-      <div className="text-center max-w-md p-8">
-        <div className="w-16 h-16 mx-auto mb-6 bg-blue-100 rounded-full flex items-center justify-center">
-          <svg
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            className="w-8 h-8 text-blue-600"
-          >
-            <path
-              fillRule="evenodd"
-              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </div>
-        <h2 className="text-xl font-semibold mb-4 text-gray-800">
+    <div className="flex flex-col items-center justify-center min-h-screen gap-6 text-center px-6">
+      <div className="bg-blue-500/10 border border-blue-400/30 rounded-2xl p-8 backdrop-blur-md shadow-lg">
+        <h2 className="text-xl font-semibold text-blue-600 mb-3">
           No Configuration Found
         </h2>
-        <p className="text-gray-600 mb-6">
+        <p className="text-gray-300 max-w-md mb-6">
           Please go back and configure your exam parameters.
         </p>
         <button
           onClick={() => window.history.back()}
-          className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors"
+          className="bg-blue-300 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"
         >
           Go Back
         </button>
@@ -312,352 +154,47 @@ const ExamPaperPage = () => {
     </div>
   );
 
-  /* ---------------------------------- */
-  /*        Question Renderers          */
-  /* ---------------------------------- */
-
-  const renderMultipleChoiceQuestion = (question: any) => (
-    <div key={question.number} className="mb-8">
-      <div className="font-bold text-base mb-3">
-        Question {question.number}.
-        {question.instruction && (
-          <span className="font-normal italic ml-2">
-            {question.instruction}
-          </span>
-        )}
-        <span className="float-right">[{question.total_marks} marks]</span>
-      </div>
-
-      {renderQuestionParts(question.parts || [])}
-    </div>
-  );
-
-  const renderShortAnswerQuestion = (question: any) => (
-    <div key={question.number} className="mb-8">
-      <div className="font-bold text-base mb-3">
-        Question {question.number}.
-        {question.instruction && (
-          <span className="font-normal italic ml-2">
-            {question.instruction}
-          </span>
-        )}
-        <span className="float-right">[{question.total_marks} marks]</span>
-      </div>
-
-      {/* Main question text if exists */}
-      {question.question_text && (
-        <div className="mb-4 italic text-gray-700">
-          {question.question_text}
-        </div>
-      )}
-
-      {renderQuestionParts(question.parts || [])}
-    </div>
-  );
-
-  const renderLongAnswerQuestion = (question: any) => (
-    <div key={question.number} className="mb-8">
-      <div className="font-bold text-base mb-3">
-        Question {question.number}.
-        {question.instruction && (
-          <span className="font-normal italic ml-2">
-            {question.instruction}
-          </span>
-        )}
-        <span className="float-right">[{question.total_marks} marks]</span>
+  const NoDataState = () => (
+    <div className="flex flex-col items-center bg-white/10 justify-center min-h-screen gap-6 text-center px-6">
+      <div className="bg-gradient-to-r from-transparent via-white/20 to-transparent rounded-2xl p-8 backdrop-blur-md shadow-lg">
+        <h2 className="text-xl font-semibold text-white mb-3">
+          No Exam Paper Data
+        </h2>
+        <p className="text-gray-300 max-w-md mb-6">
+          No valid exam paper data was found. Please try again.
+        </p>
+        <RetryButton label="OPPS! Please Try Again" />
       </div>
-
-      {/* Main question text if exists */}
-      {question.question_text && (
-        <div className="mb-4 italic text-gray-700">
-          {question.question_text}
-        </div>
-      )}
-
-      {renderQuestionParts(question.parts || [])}
     </div>
   );
 
-  const renderQuestion = (question: any) => {
-    switch (question.type) {
-      case "multiple_choice":
-        return renderMultipleChoiceQuestion(question);
-      case "short_answer":
-      case "calculation":
-      case "diagram_based":
-      case "complete_equation":
-        return renderShortAnswerQuestion(question);
-      case "long_answer":
-        return renderLongAnswerQuestion(question);
-      default:
-        return renderShortAnswerQuestion(question);
-    }
-  };
-
-  /* ---------------------------------- */
-  /*           Main Render              */
-  /* ---------------------------------- */
-
-  // Loading state
-  if (isLoadingExamPaper) {
-    return <SimpleLoader />;
-  }
-
-  // Error state
-  if (isExamPaperError) {
-    return <ErrorState />;
-  }
-
-  // No payload state
-  if (!isEnabled) {
-    return <NoPayloadState />;
-  }
-
-  // No data state
-  if (!examData || !sections || sections.length === 0) {
-    return (
-      <div className="flex items-center justify-center min-h-screen px-4">
-        <div className="text-center max-w-md p-8">
-          <div className="w-16 h-16 mx-auto mb-6 bg-yellow-100 rounded-full flex items-center justify-center">
-            <svg
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              className="w-8 h-8 text-yellow-600"
-            >
-              <path
-                fillRule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </div>
-          <h2 className="text-xl font-semibold mb-4 text-gray-800">
-            No Exam Paper Data
-          </h2>
-          <p className="text-gray-600 mb-6">
-            No valid exam paper data was found. Please try again.
-          </p>
-          <button
-            onClick={() => window.location.reload()}
-            className="bg-yellow-600 text-white px-6 py-2 rounded hover:bg-yellow-700 transition-colors"
-          >
-            Retry
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  // Success state - render ICSE style exam paper
   return (
-    <div className="min-h-screen">
-      <div className="pt-24 pb-12">
-        <PageHeader
-          title={prevShow ? "Exam Paper Loaded" : "Exam Paper Generated"}
-          subTitle="Preview below or download in Any format of your choising"
-        />
-
-        {/* Download buttons */}
-        <div className="no-print max-w-4xl mx-auto mb-6 px-4">
-          <div className="flex gap-4 justify-center items-center">
-            <Button
-              className="mt-2"
-              variant={"glass"}
-              onClick={() => window.print()}
-            >
-              Print Paper
-            </Button>
-            <Button
-              className="mt-2"
-              variant={"glass"}
-              onClick={() => window.print()}
-            >
-              Download
-            </Button>
-            <GlassDropdown
-              options={[
-                { label: "Select type", value: "Select" },
-                { label: "Doc", value: "doc" },
-                { label: "PDF", value: "pdf" },
-              ]}
-              label={""}
-              value={"Select"}
-              onChange={function (): void {
-                throw new Error("Function not implemented.");
-              }}
-            />
-          </div>
-        </div>
-
-        {/* ICSE Style Exam Paper */}
-        <div className="print-area max-w-4xl mx-auto bg-white shadow-lg">
-          {/* Header Page - ICSE Style */}
-          <div className="exam-page p-12 text-black">
-            {/* Top Border */}
-            <div className="p-8">
-              {/* ICSE Header */}
-              <div className="text-center mb-8">
-                <div className="text-xl font-bold mb-2 uppercase tracking-wide">
-                  {examData.board ||
-                    "COUNCIL FOR THE INDIAN SCHOOL CERTIFICATE EXAMINATIONS"}
-                </div>
-                <div className=" py-2 my-4">
-                  <div className="text-lg font-bold uppercase">
-                    {examData.subject || "EXAMINATION PAPER"}
-                  </div>
-                </div>
-                <div className="text-base mb-2">
-                  Paper {examData.paper_code || "1"}
-                </div>
-                <div className="text-base mb-4">
-                  ({examData.paper_name || examData.subject})
-                </div>
-              </div>
-
-              {/* Exam Details Box */}
-              <div className=" p-4 mb-6">
-                <table className="w-full text-sm">
-                  <tbody>
-                    <tr>
-                      <td className="font-medium py-1">Maximum Marks:</td>
-                      <td className="text-center py-1">
-                        {examData.maximum_marks}
-                      </td>
-                      <td className="font-medium py-1">Time allowed:</td>
-                      <td className="text-center py-1">
-                        {examData.time_allowed}
-                      </td>
-                    </tr>
-                    {examData.reading_time && (
-                      <tr>
-                        <td className="font-medium py-1">Reading Time:</td>
-                        <td className="text-center py-1" colSpan={3}>
-                          {examData.reading_time}
-                        </td>
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
-              </div>
-
-              {/* Instructions */}
-              <div className="text-sm leading-relaxed space-y-2 mb-6">
-                <div className="font-bold underline mb-3">INSTRUCTIONS</div>
-                <div>
-                  • This paper consists of {sections.length} section
-                  {sections.length > 1 ? "s" : ""}.
-                </div>
-                {sections.map((section: any) => (
-                  <div key={section.name}>
-                    • {section.name}{" "}
-                    {section.is_compulsory
-                      ? "is compulsory"
-                      : section.instruction}{" "}
-                    [{section.marks} marks]
-                  </div>
-                ))}
-                <div>
-                  • The intended marks for questions or parts of questions are
-                  given in brackets [ ].
-                </div>
-                {examData.additional_instructions?.map(
-                  (instruction: string, idx: number) => (
-                    <div key={idx}>• {instruction}</div>
-                  )
-                )}
-              </div>
-
-              {/* Year */}
-              <div className="text-right text-sm font-medium">
-                {examData.year}
-              </div>
-            </div>
-          </div>
-
-          {/* Question Sections - ICSE Style */}
-          {sections.map((section: any) => (
-            <div key={section.name} className="exam-page p-12 text-black">
-              <div className=" p-8">
-                {/* Section Header */}
-                <div className="text-center mb-8">
-                  <div className="text-lg font-bold uppercase underline mb-2">
-                    {section.name}
-                  </div>
-                  {section.instruction &&
-                    section.instruction !== "Follow the instructions" && (
-                      <div className="text-sm italic mb-2">
-                        ({section.instruction})
-                      </div>
-                    )}
-                  <div className="text-sm font-medium">
-                    [{section.marks} marks]
-                  </div>
-                </div>
-
-                {/* Questions */}
-                <div className="space-y-6">
-                  {section.questions?.map((question: any) =>
-                    renderQuestion(question)
-                  )}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* ICSE Print Styles */}
-      <style>{`
-        @media print {
-          .no-print {
-            display: none !important;
-          }
-
-          .exam-page {
-            min-height: 297mm;
-            page-break-after: always;
-            background: white !important;
-            color: black !important;
-          }
-
-          .exam-page:last-child {
-            page-break-after: avoid;
-          }
-
-          body {
-            -webkit-print-color-adjust: exact;
-            print-color-adjust: exact;
-          }
-
-          .print-area {
-            max-width: none;
-            margin: 0;
-            box-shadow: none !important;
-          }
-
-          * {
-            color: black !important;
-            background: white !important;
-          }
-
-          
-        }
-
-        @page {
-          margin: 15mm;
-          size: A4;
-        }
-
-        .exam-page {
-          font-family: 'Times New Roman', Times, serif;
-          line-height: 1.5;
-        }
-
-        .border-black {
-          border-color: #000000;
-        }
-      `}</style>
-    </div>
+    <AnimatePresence mode="wait">
+      {isLoading && <LoaderOverlay message="Generating Exam Paper..." />}
+
+      {!isLoading && isError && <ErrorState />}
+      {!isLoading && !isEnabled && <NoPayloadState />}
+      {!isLoading &&
+        !isError &&
+        isEnabled &&
+        (!examData || (sections?.length ?? 0) === 0) && <NoDataState />}
+
+      {!isLoading && isSuccess && examData && (sections?.length ?? 0) > 0 && (
+        <motion.div
+          key="exam-content"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.5 }}
+          className="space-y-8 mt-24"
+        >
+          <PageHeader title="AI Generated Paper" subTitle="" />
+          <GlassLayout>
+            <ExamPaperPDFViewer examData={examData} sections={sections} />
+          </GlassLayout>
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 };