added exam routes

app/(auth)/register/page.tsx

@@ -58,7 +58,7 @@ export default function RegisterPage() {
     }
     try {
       await register(form, setToken);
-      router.push("/tabs/home");
+      router.push("/home");
     } catch (error: any) {
       console.error("Error:", error.response || error.message);
       if (error.response?.detail) {

app/(tabs)/paper/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Header from "@/components/Header";
+import DestructibleAlert from "@/components/DestructibleAlert";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { API_URL } from "@/lib/auth";
+import { Loader, RefreshCw } from "lucide-react";
+
+interface Mock {
+  id: string;
+  title: string;
+  rating: number;
+}
+
+// For App Router (Next.js 13+ with app directory)
+export default function PaperScreen() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const name = searchParams.get("name") || "";
+
+  const [questions, setQuestions] = useState<Mock[] | null>(null);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  const [componentKey, setComponentKey] = useState<number>(0);
+
+  async function fetchMocks() {
+    try {
+      const questionResponse = await fetch(`${API_URL}/mocks`, {
+        method: "GET",
+      });
+      const fetchedQuestionData: Mock[] = await questionResponse.json();
+      console.log(fetchedQuestionData[0]?.id);
+      setQuestions(fetchedQuestionData);
+    } catch (error) {
+      setErrorMsg(error instanceof Error ? error.message : "An error occurred");
+    }
+  }
+
+  useEffect(() => {
+    if (name) {
+      fetchMocks();
+    }
+  }, [name]);
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+
+    await fetchMocks();
+    setComponentKey((prevKey) => prevKey + 1);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 1000);
+  };
+
+  if (errorMsg) {
+    return (
+      <BackgroundWrapper>
+        <div className="min-h-screen">
+          <Header
+            displaySubject={name}
+            displayTabTitle={null}
+            displayUser={false}
+            image={undefined}
+            examDuration={undefined}
+          />
+          <div className="overflow-y-auto">
+            <div className="mt-5 px-5">
+              <DestructibleAlert text={errorMsg} extraStyles="" />
+            </div>
+            <div className="flex justify-center mt-4">
+              <button
+                onClick={onRefresh}
+                disabled={refreshing}
+                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+              >
+                {refreshing ? <Loader /> : <RefreshCw />}
+              </button>
+            </div>
+          </div>
+          {/* <CustomBackHandler fallbackRoute="unit" /> */}
+        </div>
+      </BackgroundWrapper>
+    );
+  }
+
+  return (
+    <BackgroundWrapper>
+      <div>
+        <Header
+          displayTabTitle={null}
+          displayUser={false}
+          displaySubject={name}
+        />
+        <div className="mx-10 pt-10 overflow-y-auto">
+          <div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4">
+            {questions ? (
+              questions.map((mock) => (
+                <div key={mock.id}>
+                  <button
+                    onClick={() =>
+                      router.push(
+                        `/exam/pretest?unitname=${name}&id=${mock.id}&title=${mock.title}&rating=${mock.rating}`
+                      )
+                    }
+                    className="w-full border-2 border-[#B0C2DA] py-4 rounded-[10px] px-6 gap-2 text-left hover:bg-gray-50 transition-colors"
+                  >
+                    <h3 className="text-xl font-medium">{mock.title}</h3>
+                    <p className="text-md font-normal">
+                      Rating: {mock.rating} / 10
+                    </p>
+                  </button>
+                </div>
+              ))
+            ) : (
+              <div className="flex flex-col items-center justify-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
+                <p className="text-xl font-medium text-center">Loading...</p>
+              </div>
+            )}
+          </div>
+          <div className="flex justify-center mt-4">
+            <button
+              onClick={onRefresh}
+              disabled={refreshing}
+              className="p-2 bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 rounded-full"
+            >
+              {refreshing ? <Loader /> : <RefreshCw />}
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* <CustomBackHandler fallbackRoute="unit" useCustomHandler={false} /> */}
+    </BackgroundWrapper>
+  );
+}

app/(tabs)/unit/page.tsx

@@ -33,7 +33,7 @@ const Unit = () => {
         />
         <div className="flex-1">
           <div className="overflow-y-auto">
-            <div className="border border-blue-200 gap-4 rounded-3xl p-6 mx-10 mt-10">
+            <div className="border border-blue-200 gap-4 rounded-3xl p-4 mx-10 mt-10">
               {units ? (
                 units.map((unit) => (
                   <button

app/exam/[id]/page.tsx

@@ -1,7 +1,310 @@
-import React from "react";
+"use client";
 
-const page = () => {
+import { useParams, useRouter, useSearchParams } from "next/navigation";
-  return <div>page</div>;
+import React, { useEffect, useState, useCallback, useReducer } from "react";
+import { useTimer } from "@/context/TimerContext";
+import { API_URL, getToken } from "@/lib/auth";
+
+// Types
+interface Question {
+  id: number;
+  question: string;
+  options: Record<string, string>;
+}
+
+interface QuestionItemProps {
+  question: Question;
+  selectedAnswer: string | undefined;
+  handleSelect: (questionId: number, option: string) => void;
+}
+
+interface AnswerState {
+  [questionId: number]: string;
+}
+
+interface AnswerAction {
+  type: "SELECT_ANSWER";
+  questionId: number;
+  option: string;
+}
+
+// Components
+const QuestionItem = React.memo<QuestionItemProps>(
+  ({ question, selectedAnswer, handleSelect }) => (
+    <div className="question-container">
+      <h3 className="question-text">
+        {question.id}. {question.question}
+      </h3>
+      <div className="options-container">
+        {Object.entries(question.options).map(([key, value]) => (
+          <button
+            key={key}
+            className={`option-button ${
+              selectedAnswer === key ? "selected-option" : ""
+            }`}
+            onClick={() => handleSelect(question.id, key)}
+          >
+            <span
+              className={`option-text ${
+                selectedAnswer === key ? "selected-option-text" : ""
+              }`}
+            >
+              {key.toUpperCase()}
+            </span>
+            <span className="option-description">{value}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+);
+
+QuestionItem.displayName = "QuestionItem";
+
+const reducer = (state: AnswerState, action: AnswerAction): AnswerState => {
+  switch (action.type) {
+    case "SELECT_ANSWER":
+      return { ...state, [action.questionId]: action.option };
+    default:
+      return state;
+  }
 };
 
-export default page;
+export default function ExamPage() {
+  const router = useRouter();
+  const params = useParams();
+  const searchParams = useSearchParams();
+
+  const id = params.id as string;
+  const time = searchParams.get("time");
+
+  const { setInitialTime, stopTimer } = useTimer();
+
+  const [questions, setQuestions] = useState<Question[] | null>(null);
+  const [answers, dispatch] = useReducer(reducer, {});
+  const [loading, setLoading] = useState(true);
+  const [submissionLoading, setSubmissionLoading] = useState(false);
+
+  const fetchQuestions = async () => {
+    try {
+      const response = await fetch(`${API_URL}/mock/${id}`, {
+        method: "GET",
+      });
+      const data = await response.json();
+      setQuestions(data.questions);
+    } catch (error) {
+      console.error("Error fetching questions:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchQuestions();
+    if (time) {
+      setInitialTime(Number(time));
+    }
+  }, [id, time, setInitialTime]);
+
+  const handleSelect = useCallback((questionId: number, option: string) => {
+    dispatch({ type: "SELECT_ANSWER", questionId, option });
+  }, []);
+
+  const handleSubmit = async () => {
+    stopTimer();
+    setSubmissionLoading(true);
+
+    const payload = {
+      mock_id: id,
+      data: answers,
+    };
+
+    try {
+      const response = await fetch(`${API_URL}/submit`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${await getToken()}`,
+        },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error(
+          "Submission failed:",
+          errorData.message || "Unknown error"
+        );
+        return;
+      }
+
+      const responseData = await response.json();
+
+      router.push(
+        `/exam/results?id=${id}&answers=${encodeURIComponent(
+          JSON.stringify(responseData)
+        )}`
+      );
+    } catch (error) {
+      console.error("Error submitting answers:", error);
+    } finally {
+      setSubmissionLoading(false);
+    }
+  };
+
+  const showExitDialog = () => {
+    if (window.confirm("Are you sure you want to quit the exam?")) {
+      stopTimer();
+      router.push("/unit");
+    }
+  };
+
+  // Handle browser back button
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = "";
+      return "";
+    };
+
+    const handlePopState = (e: PopStateEvent) => {
+      e.preventDefault();
+      showExitDialog();
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    window.addEventListener("popstate", handlePopState);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, []);
+
+  if (submissionLoading) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex flex-col items-center justify-center min-h-64">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
+            <p className="text-lg font-medium text-gray-900">Submitting...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto px-4 py-8">
+        {loading ? (
+          <div className="flex items-center justify-center min-h-64">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900"></div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {questions?.map((question) => (
+              <QuestionItem
+                key={question.id}
+                question={question}
+                selectedAnswer={answers[question.id]}
+                handleSelect={handleSelect}
+              />
+            ))}
+          </div>
+        )}
+
+        <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
+          <div className="container mx-auto">
+            <button
+              onClick={handleSubmit}
+              disabled={submissionLoading}
+              className="w-full bg-blue-900 text-white py-4 px-6 rounded-lg font-bold text-lg hover:bg-blue-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .question-container {
+          border: 1px solid #8abdff;
+          border-radius: 25px;
+          padding: 20px;
+          margin-bottom: 20px;
+          background: white;
+        }
+
+        .question-text {
+          font-size: 18px;
+          font-weight: 600;
+          margin-bottom: 10px;
+          color: #1a1a1a;
+        }
+
+        .options-container {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .option-button {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          padding: 6px 0;
+          border-radius: 5px;
+          border: 1px solid transparent;
+          background: none;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+
+        .option-button:hover {
+          background-color: #f8f9fa;
+        }
+
+        .selected-option {
+          background-color: #f0f8ff;
+        }
+
+        .option-text {
+          font-size: 14px;
+          padding: 4px 10px;
+          border-radius: 25px;
+          text-align: center;
+          border: 1px solid #ddd;
+          min-width: 32px;
+          font-weight: 500;
+        }
+
+        .selected-option-text {
+          color: white;
+          background-color: #113768;
+          border-color: #113768;
+        }
+
+        .option-description {
+          font-size: 16px;
+          color: #333;
+        }
+
+        @media (max-width: 768px) {
+          .question-container {
+            padding: 16px;
+            border-radius: 16px;
+          }
+
+          .question-text {
+            font-size: 16px;
+          }
+
+          .option-description {
+            font-size: 14px;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}

app/exam/pretest/page.tsx

@@ -1,7 +1,190 @@
-import React from "react";
+"use client";
 
-const page = () => {
+import { useRouter, useSearchParams } from "next/navigation";
-  return <div>page</div>;
+import { useEffect, useState } from "react";
-};
+import { ArrowLeft, HelpCircle, Clock, XCircle } from "lucide-react";
+import DestructibleAlert from "@/components/DestructibleAlert";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { API_URL } from "@/lib/auth";
 
-export default page;
+interface Metadata {
+  metadata: {
+    quantity: number;
+    type: string;
+    duration: number;
+    marking: string;
+  };
+}
+
+export default function PretestPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get params from URL search params
+  const name = searchParams.get("name") || "";
+  const id = searchParams.get("id") || "";
+  const title = searchParams.get("title") || "";
+  const rating = searchParams.get("rating") || "";
+
+  const [metadata, setMetadata] = useState<Metadata | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  async function fetchQuestions() {
+    if (!id) return;
+
+    try {
+      setLoading(true);
+      const questionResponse = await fetch(`${API_URL}/mock/${id}`, {
+        method: "GET",
+      });
+
+      if (!questionResponse.ok) {
+        throw new Error("Failed to fetch questions");
+      }
+
+      const fetchedMetadata: Metadata = await questionResponse.json();
+      setMetadata(fetchedMetadata);
+    } catch (error) {
+      console.error(error);
+      setError(error instanceof Error ? error.message : "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    if (id) {
+      fetchQuestions();
+    }
+  }, [id]);
+
+  if (error) {
+    return (
+      <BackgroundWrapper>
+        <div className="min-h-screen">
+          <div className="mx-10 mt-10">
+            <button onClick={() => router.push("/unit")} className="mb-4">
+              <ArrowLeft size={30} color="black" />
+            </button>
+            <DestructibleAlert text={error} extraStyles="" />
+          </div>
+          {/* <CustomBackHandler fallbackRoute="paper" /> */}
+        </div>
+      </BackgroundWrapper>
+    );
+  }
+
+  return (
+    <BackgroundWrapper>
+      <div className="min-h-screen flex flex-col justify-between">
+        <div className="flex-1 overflow-y-auto">
+          {metadata ? (
+            <div className="mx-10 mt-10 gap-6 pb-6 space-y-6">
+              <button onClick={() => router.push("/unit")}>
+                <ArrowLeft size={30} color="black" />
+              </button>
+
+              <h1 className="text-4xl font-semibold text-[#113768]">{title}</h1>
+
+              <p className="text-xl font-medium text-[#113768]">
+                Rating: {rating} / 10
+              </p>
+
+              <div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-8 py-7 px-5 space-y-8">
+                <div className="flex gap-5 items-center">
+                  <HelpCircle size={40} color="#113768" />
+                  <div className="space-y-2">
+                    <p className="font-bold text-4xl text-[#113768]">
+                      {metadata.metadata.quantity}
+                    </p>
+                    <p className="font-normal text-lg">
+                      {metadata.metadata.type}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex gap-5 items-center">
+                  <Clock size={40} color="#113768" />
+                  <div className="space-y-2">
+                    <p className="font-bold text-4xl text-[#113768]">
+                      {metadata.metadata.duration} mins
+                    </p>
+                    <p className="font-normal text-lg">Time Taken</p>
+                  </div>
+                </div>
+
+                <div className="flex gap-5 items-center">
+                  <XCircle size={40} color="#113768" />
+                  <div className="space-y-2">
+                    <p className="font-bold text-4xl text-[#113768]">
+                      {metadata.metadata.marking}
+                    </p>
+                    <p className="font-normal text-lg">
+                      From each wrong answer
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-4 py-7 px-5 space-y-4">
+                <h2 className="text-xl font-bold">Ready yourself!</h2>
+
+                <div className="flex pr-4">
+                  <span className="mx-4">•</span>
+                  <p className="font-normal text-lg">
+                    You must complete this test in one session - make sure your
+                    internet connection is reliable.
+                  </p>
+                </div>
+
+                <div className="flex pr-4">
+                  <span className="mx-4">•</span>
+                  <p className="font-normal text-lg">
+                    There is negative marking for the wrong answer.
+                  </p>
+                </div>
+
+                <div className="flex pr-4">
+                  <span className="mx-4">•</span>
+                  <p className="font-normal text-lg">
+                    The more you answer correctly, the better chance you have of
+                    winning a badge.
+                  </p>
+                </div>
+
+                <div className="flex pr-4">
+                  <span className="mx-4">•</span>
+                  <p className="font-normal text-lg">
+                    You can retake this test however many times you want. But,
+                    you will earn points only once.
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="mt-60 flex flex-col items-center">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
+              <p className="text-xl font-medium text-center">Loading...</p>
+            </div>
+          )}
+        </div>
+
+        <button
+          className="w-full bg-[#113768] h-[78px] flex justify-center items-center border border-transparent text-white font-bold text-2xl hover:bg-[#0d2a52] transition-colors"
+          onClick={() => {
+            if (metadata) {
+              router.push(`/exam/${id}?time=${metadata.metadata.duration}`);
+            } else {
+              router.push("/unit");
+            }
+          }}
+        >
+          {metadata ? "Start Test" : "Go Back"}
+        </button>
+
+        {/* <CustomBackHandler fallbackRoute="paper" /> */}
+      </div>
+    </BackgroundWrapper>
+  );
+}

app/exam/results/page.tsx

@@ -1,7 +1,277 @@
-import React from "react";
+"use client";
 
-const page = () => {
+import { useRouter, useSearchParams } from "next/navigation";
-  return <div>page</div>;
+import { ArrowLeft, LocateIcon } from "lucide-react";
+import { useEffect } from "react";
+
+// Types
+interface Question {
+  question: string;
+  options: Record<string, string>;
+  correctAnswer: string;
+  userAnswer: string | null;
+  isCorrect: boolean;
+  solution: string;
+}
+
+interface ResultSheet {
+  score: number;
+  questions: Question[];
+}
+
+const ResultsPage = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const answersParam = searchParams.get("answers");
+
+  if (!answersParam) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-gray-900 mb-4">
+            No results found
+          </h2>
+          <button
+            onClick={() => router.push("/unit")}
+            className="bg-blue-900 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition-colors"
+          >
+            Go Back
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const resultSheet: ResultSheet = JSON.parse(decodeURIComponent(answersParam));
+
+  const getScoreMessage = (score: number) => {
+    if (score < 30) return "Try harder!";
+    if (score < 70) return "Getting Better";
+    return "You did great!";
+  };
+
+  const getStatusColor = (question: Question) => {
+    if (question.userAnswer === null) return "bg-yellow-500";
+    return question.isCorrect ? "bg-green-500" : "bg-red-500";
+  };
+
+  const getStatusText = (question: Question) => {
+    if (question.userAnswer === null) return "Skipped";
+    return question.isCorrect ? "Correct" : "Incorrect";
+  };
+
+  const getOptionClassName = (key: string, question: Question): string => {
+    const isCorrectAnswer = key === question.correctAnswer;
+    const isUserAnswer = key === question.userAnswer;
+    const isCorrectAndUserAnswer = isCorrectAnswer && isUserAnswer;
+    const isUserAnswerWrong = isUserAnswer && !isCorrectAnswer;
+
+    if (isCorrectAndUserAnswer) {
+      return "bg-blue-900 text-white border-blue-900";
+    } else if (isCorrectAnswer) {
+      return "bg-green-500 text-white border-green-500";
+    } else if (isUserAnswerWrong) {
+      return "bg-red-500 text-white border-red-500";
+    }
+    return "border-gray-300";
+  };
+
+  // Handle browser back button
+  useEffect(() => {
+    const handlePopState = () => {
+      router.push("/unit");
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [router]);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto px-4 py-8 max-w-4xl">
+        {/* Header */}
+        <div className="mb-8">
+          <button
+            onClick={() => router.push("/unit")}
+            className="flex items-center text-gray-700 hover:text-gray-900 transition-colors mb-6"
+          >
+            <ArrowLeft size={30} />
+          </button>
+        </div>
+
+        {/* Main Content */}
+        <div className="space-y-8">
+          {/* Score Message */}
+          <h1 className="text-3xl font-bold text-blue-900 text-center mb-6">
+            {getScoreMessage(resultSheet.score)}
+          </h1>
+
+          {/* Score Card */}
+          <div className="score-card">
+            <p className="text-2xl font-medium mb-4">Score:</p>
+            <div className="flex items-center justify-center gap-4">
+              <div className="w-15 h-15 bg-blue-900 rounded-full flex items-center justify-center">
+                <div className="w-6 h-6 bg-white rounded-full"></div>
+              </div>
+              <span className="text-6xl font-bold text-blue-900">
+                {resultSheet.score}
+              </span>
+            </div>
+          </div>
+
+          {/* Solutions Section */}
+          <div className="mt-10">
+            <h2 className="text-3xl font-bold text-blue-900 mb-6">Solutions</h2>
+
+            <div className="space-y-6">
+              {resultSheet.questions.map((question, idx) => (
+                <div key={idx} className="question-card">
+                  {/* Question Header */}
+                  <div className="flex justify-between items-start mb-4">
+                    <h3 className="text-xl font-medium flex-1">
+                      {idx + 1}. {question.question}
+                    </h3>
+                    <span
+                      className={`status-badge ${getStatusColor(question)}`}
+                    >
+                      {getStatusText(question)}
+                    </span>
+                  </div>
+
+                  {/* Options */}
+                  <div className="space-y-3 mb-6">
+                    {Object.entries(question.options).map(([key, option]) => (
+                      <div key={key} className="flex items-center gap-4">
+                        <span
+                          className={`option-letter ${getOptionClassName(
+                            key,
+                            question
+                          )}`}
+                        >
+                          {key.toUpperCase()}
+                        </span>
+                        <span className="text-lg">{option}</span>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* Solution Divider */}
+                  <div className="solution-divider"></div>
+
+                  {/* Solution */}
+                  <div>
+                    <h4 className="text-xl font-semibold text-gray-500 mb-3">
+                      Solution:
+                    </h4>
+                    <p className="text-lg leading-relaxed text-gray-800">
+                      {question.solution}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Button */}
+        <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
+          <div className="container mx-auto max-w-4xl">
+            <button
+              onClick={() => router.push("/unit")}
+              className="w-full bg-blue-900 text-white py-4 px-6 rounded-lg font-bold text-xl hover:bg-blue-800 transition-colors"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+
+        {/* Spacer for fixed button */}
+        <div className="h-24"></div>
+      </div>
+
+      <style jsx>{`
+        .score-card {
+          height: 170px;
+          width: 100%;
+          border: 2px solid #c1dcff;
+          border-radius: 25px;
+          padding: 24px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 12px;
+          background: white;
+        }
+
+        .question-card {
+          border: 2px solid #abd0ff;
+          padding: 24px;
+          border-radius: 20px;
+          background: white;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .status-badge {
+          padding: 6px 16px;
+          border-radius: 12px;
+          color: white;
+          font-weight: bold;
+          font-size: 14px;
+          white-space: nowrap;
+        }
+
+        .option-letter {
+          min-width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 50%;
+          border: 1px solid;
+          font-size: 14px;
+          font-weight: 500;
+        }
+
+        .solution-divider {
+          width: 100%;
+          height: 1px;
+          border-top: 1px dashed #000;
+          margin: 20px 0;
+        }
+
+        @media (max-width: 768px) {
+          .score-card {
+            height: 150px;
+            padding: 20px;
+          }
+
+          .question-card {
+            padding: 20px;
+            border-radius: 16px;
+          }
+
+          .status-badge {
+            font-size: 12px;
+            padding: 4px 12px;
+          }
+
+          .option-letter {
+            min-width: 28px;
+            height: 28px;
+            font-size: 12px;
+          }
+        }
+
+        @media (max-width: 640px) {
+          .container {
+            padding-left: 16px;
+            padding-right: 16px;
+          }
+        }
+      `}</style>
+    </div>
+  );
 };
 
-export default page;
+export default ResultsPage;

components/Header.tsx

@@ -5,15 +5,17 @@ import { ChevronLeft, Layers } from "lucide-react";
 import { useTimer } from "@/context/TimerContext";
 import styles from "@/css/Header.module.css";
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000/api";
+const API_URL = "https://examjam-api.pptx704.com";
 
 // You'll need to implement getToken for Next.js - could use cookies, localStorage, etc.
 const getToken = async () => {
-  // Replace with your token retrieval logic
+  if (typeof window === "undefined") {
-  if (typeof window !== "undefined") {
+    return null;
-    return localStorage.getItem("token") || sessionStorage.getItem("token");
   }
-  return null;
+
+  // Extract authToken from cookies
+  const match = document.cookie.match(/(?:^|;\s*)authToken=([^;]*)/);
+  return match ? decodeURIComponent(match[1]) : null;
 };
 
 const Header = ({

lib/auth.ts

@@ -88,3 +88,13 @@ export const getTokenFromCookie = () => {
 export const clearAuthToken = () => {
   setCookie("authToken", null);
 };
+
+export const getToken = async () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  // Extract authToken from cookies
+  const match = document.cookie.match(/(?:^|;\s*)authToken=([^;]*)/);
+  return match ? decodeURIComponent(match[1]) : null;
+};