fix(ui): fix ui icons and readability

chore(zustand): refactor auth code for zustand store

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_EXAMJAM_API_URL=api_url_here

.gitignore

@@ -16,6 +16,7 @@
 # next.js
 /.next/
 /out/
+android
 
 # production
 /build
@@ -31,7 +32,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+.env
 
 # vercel
 .vercel
@@ -39,3 +40,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vercel

app/(auth)/login/page.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import FormField from "@/components/FormField";
+import DestructibleAlert from "@/components/DestructibleAlert";
+import { LoginForm } from "@/types/auth";
+import { CircleAlert } from "lucide-react";
+import { useAuthStore } from "@/stores/authStore";
+
+const LoginPage = () => {
+  const router = useRouter();
+  const { login } = useAuthStore();
+
+  const [form, setForm] = useState<LoginForm>({
+    identifier: "",
+    password: "",
+  });
+
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loginUser = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await login(form);
+      router.replace("/home");
+    } catch (err: unknown) {
+      console.error(err);
+
+      if (
+        typeof err === "object" &&
+        err !== null &&
+        "message" in err &&
+        typeof err.message === "string"
+      ) {
+        setError(err.message);
+      } else {
+        setError("An unexpected error occurred.");
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <BackgroundWrapper>
+      <div className="flex-1 min-h-screen">
+        <div className="min-h-screen overflow-y-auto">
+          <div className="min-h-full flex flex-col justify-center gap-10 mt-7 mx-6 py-8">
+            {/* Logo Container */}
+            <div
+              className="w-full self-center mt-7"
+              style={{ aspectRatio: "368/89" }}
+            >
+              <Image
+                src="/images/logo/logo.png"
+                alt="Logo"
+                width={368}
+                height={89}
+                className="w-full h-full object-contain"
+                priority
+              />
+            </div>
+
+            {/* Form Container */}
+            <div className="flex flex-col justify-between gap-10">
+              <div className="flex flex-col w-full gap-5">
+                <FormField
+                  title="Email \ Username"
+                  value={form.identifier}
+                  placeholder="Enter your email address..."
+                  handleChangeText={(value) =>
+                    setForm({ ...form, identifier: value })
+                  }
+                />
+                <FormField
+                  title="Password"
+                  value={form.password}
+                  placeholder="Enter a password"
+                  handleChangeText={(value) =>
+                    setForm({ ...form, password: value })
+                  }
+                />
+              </div>
+              {error && <DestructibleAlert text={error} />}
+
+              <h1 className="flex justify-center items-center gap-2 bg-green-200 p-4 rounded-full">
+                <CircleAlert size={20} />
+                Your login details will be remembered.
+              </h1>
+
+              <button
+                onClick={loginUser}
+                disabled={isLoading}
+                className="w-full h-14 flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <span
+                  className="font-medium"
+                  style={{ fontFamily: "Montserrat, sans-serif" }}
+                >
+                  {isLoading ? "Logging in..." : "Login"}
+                </span>
+              </button>
+            </div>
+
+            {/* Register Link */}
+            <p
+              className="text-center mb-[70px]"
+              style={{ fontFamily: "Montserrat, sans-serif" }}
+            >
+              Don&apos;t have an account?{" "}
+              <Link href="/register" className="text-[#276ac0] hover:underline">
+                Register here.
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </BackgroundWrapper>
+  );
+};
+
+export default LoginPage;

app/(auth)/register/page.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import FormField from "@/components/FormField";
+import DestructibleAlert from "@/components/DestructibleAlert";
+import { RegisterForm } from "@/types/auth";
+import { useAuthStore } from "@/stores/authStore";
+
+interface ValidationErrorItem {
+  type: string;
+  loc: string[];
+  msg: string;
+  input?: unknown;
+  ctx?: Record<string, unknown>;
+}
+
+interface CustomError extends Error {
+  response?: {
+    detail?: string | ValidationErrorItem;
+  };
+}
+
+export default function RegisterPage() {
+  const { register } = useAuthStore();
+  const router = useRouter();
+  const [form, setForm] = useState<RegisterForm>({
+    full_name: "",
+    username: "",
+    email: "",
+    password: "",
+    phone_number: "",
+    ssc_roll: 0,
+    ssc_board: "",
+    hsc_roll: 0,
+    hsc_board: "",
+    college: "",
+    preparation_unit: "",
+  });
+  const [error, setError] = useState<string | null>(null);
+
+  function formatError(error: unknown): string {
+    if (error && typeof error === "object" && "response" in (error as any)) {
+      const customError = error as CustomError;
+      const detail = customError.response?.detail;
+
+      if (typeof detail === "string") {
+        return detail; // plain backend error string
+      }
+
+      if (Array.isArray(detail)) {
+        // Pick the first validation error, or join them if multiple
+        return detail.map((d) => d.msg).join("; ");
+      }
+    }
+
+    if (error instanceof Error) {
+      return error.message;
+    }
+
+    return "An unexpected error occurred.";
+  }
+
+  const validateForm = () => {
+    const { ssc_roll, hsc_roll, password } = form;
+    if (ssc_roll === hsc_roll) {
+      return "SSC Roll and HSC Roll must be unique.";
+    }
+    const passwordRegex =
+      /^(?=.*[A-Z])(?=.*[!@#$%^&*(),.?":{}|<>])[A-Za-z\d!@#$%^&*(),.?":{}|<>]{8,16}$/;
+    if (!passwordRegex.test(password)) {
+      return "Password must be 8-16 characters long, include at least one uppercase letter and one special character.";
+    }
+    return null;
+  };
+
+  const createUser = async () => {
+    const validationError = validateForm();
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    try {
+      await register(form);
+      router.replace("/login");
+    } catch (err: unknown) {
+      setError(formatError(err));
+      console.error("User creation error: ", err);
+    }
+  };
+  return (
+    <BackgroundWrapper>
+      <div className="min-h-screen flex flex-col items-center justify-center px-4 py-10">
+        <div className="w-full  space-y-6">
+          <div className="w-full aspect-[368/89] mx-auto">
+            <Image
+              src="/images/logo/logo.png"
+              alt="logo"
+              width={368}
+              height={89}
+              className="w-full h-auto"
+            />
+          </div>
+
+          <div className="space-y-10">
+            <div className="space-y-6">
+              <h1 className="text-2xl font-semibold">Personal Info</h1>
+              <FormField
+                title="Full name"
+                value={form.full_name}
+                handleChangeText={(value) =>
+                  setForm({ ...form, full_name: value })
+                }
+              />
+              <FormField
+                title="User name"
+                value={form.username}
+                handleChangeText={(value) =>
+                  setForm({ ...form, username: value })
+                }
+              />
+              <FormField
+                title="Phone Number"
+                value={form.phone_number}
+                handleChangeText={(value) =>
+                  setForm({ ...form, phone_number: value })
+                }
+              />
+              <FormField
+                title="Email Address"
+                value={form.email}
+                handleChangeText={(value) => setForm({ ...form, email: value })}
+              />
+
+              <FormField
+                title="Password"
+                value={form.password}
+                handleChangeText={(value) =>
+                  setForm({ ...form, password: value })
+                }
+                placeholder={undefined}
+              />
+              <h1 className="text-2xl font-semibold">Educational Background</h1>
+
+              <FormField
+                title="College"
+                value={form.college}
+                handleChangeText={(value) =>
+                  setForm({ ...form, college: value })
+                }
+              />
+              <FormField
+                title="Preparation Unit"
+                value={form.preparation_unit}
+                handleChangeText={(value) =>
+                  setForm({ ...form, preparation_unit: value })
+                }
+              />
+              <div className="w-full flex gap-4">
+                <FormField
+                  title="SSC Board"
+                  value={form.ssc_board}
+                  handleChangeText={(value) =>
+                    setForm({ ...form, ssc_board: value })
+                  }
+                />
+
+                <FormField
+                  title="SSC Roll No."
+                  value={form.ssc_roll}
+                  handleChangeText={(value: string) =>
+                    setForm({ ...form, ssc_roll: Number(value) })
+                  }
+                  className="max-w-26"
+                />
+              </div>
+
+              <div className="w-full flex gap-4">
+                <FormField
+                  title="HSC Board"
+                  value={form.hsc_board}
+                  handleChangeText={(value) =>
+                    setForm({ ...form, hsc_board: value })
+                  }
+                />
+                <FormField
+                  title="HSC Roll No."
+                  value={form.hsc_roll}
+                  handleChangeText={(value: string) =>
+                    setForm({ ...form, hsc_roll: Number(value) })
+                  }
+                  className="max-w-26"
+                />
+              </div>
+            </div>
+
+            {error && <DestructibleAlert text={error} />}
+
+            <button
+              onClick={createUser}
+              className="w-full h-14 rounded-full border border-blue-900 text-center text-base font-medium"
+            >
+              Get started
+            </button>
+
+            <p className="text-center text-sm">
+              Already have an account?
+              <Link href="/login" className="text-blue-600">
+                Login here
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </BackgroundWrapper>
+  );
+}

app/(tabs)/bookmark/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { ListFilter, MoveLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+import DestructibleAlert from "@/components/DestructibleAlert";
+
+// interface Question {
+//   id: number;
+//   question: string;
+//   options: Record<string, string>;
+// }
+
+// interface QuestionItemProps {
+//   question: Question;
+// }
+
+// const QuestionItem = ({ question }: QuestionItemProps) => {
+//   const [bookmark, setBookmark] = useState(true);
+//   return (
+//     <div className="border border-[#8abdff]/50 rounded-2xl p-4 flex  flex-col gap-7">
+//       <h3 className="text-xl font-medium">
+//         {question.id + 1}. {question.question}
+//       </h3>
+//       <div className="flex justify-between items-center">
+//         <div></div>
+//         <button onClick={() => setBookmark(!bookmark)}>
+//           {bookmark ? (
+//             <BookmarkCheck size={25} color="#113768" />
+//           ) : (
+//             <Bookmark size={25} color="#113768" />
+//           )}
+//         </button>
+//       </div>
+//       <div className="flex flex-col gap-4 items-start">
+//         {Object.entries(question.options).map(([key, value]) => {
+//           return (
+//             <div key={key} className="flex items-center gap-3">
+//               <span className="px-2 py-1 flex items-center rounded-full border font-medium text-sm">
+//                 {key.toUpperCase()}
+//               </span>
+//               <span className="option-description">{value}</span>
+//             </div>
+//           );
+//         })}
+//       </div>
+//     </div>
+//   );
+// };
+
+const BookmarkPage = () => {
+  const router = useRouter();
+  // const [questions, setQuestions] = useState<Question[]>([]);
+
+  // useEffect(() => {
+  //   fetch("/data/bookmark.json")
+  //     .then((res) => res.json())
+  //     .then((data) => setQuestions(data))
+  //     .catch((err) => console.error("Error loading questions: ", err));
+  // }, []);
+
+  return (
+    <BackgroundWrapper>
+      <section className="min-h-screen flex flex-col justify-between">
+        <div className="flex-1 mb-20">
+          <div className="mx-8 mt-10 pb-6 space-y-6">
+            <button onClick={() => router.push("/home")}>
+              <MoveLeft size={30} color="#113768" />
+            </button>
+            <h1 className="text-4xl font-semibold text-[#113768]">Bookmark</h1>
+            <div className="flex justify-between">
+              <h3 className="text-xl font-semibold text-[#113768]">Recent</h3>
+              <button>
+                <ListFilter size={24} color="#113768" />
+              </button>
+            </div>
+            {/* {questions.map((question: Question) => (
+              <QuestionItem key={question.id} question={question} />
+            ))} */}
+            <DestructibleAlert
+              text="Page under construction"
+              variant="warning"
+            />
+          </div>
+        </div>
+      </section>
+    </BackgroundWrapper>
+  );
+};
+
+export default BookmarkPage;

app/(tabs)/categories/mocks/page.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+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, getToken } from "@/lib/auth";
+import { Loader, RefreshCw } from "lucide-react";
+import { useAuthStore } from "@/stores/authStore";
+
+type Mock = {
+  test_id: string;
+  name: string;
+  type: string;
+  num_questions: number;
+  time_limit_minutes: number;
+  deduction: number;
+  total_possible_score: number;
+  unit: string;
+};
+
+export default function MockScreen() {
+  const router = useRouter();
+  const { user } = useAuthStore();
+
+  const [mocks, setMocks] = useState<Mock[]>([]);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  async function fetchMocks() {
+    setRefreshing(true);
+    try {
+      const token = await getToken();
+      const response = await fetch(`${API_URL}/tests/mock/`, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch topics");
+      }
+
+      const fetchedMocks: Mock[] = await response.json();
+      setMocks(fetchedMocks);
+    } catch (error) {
+      setErrorMsg(
+        "Error fetching mocks: " +
+          (error instanceof Error ? error.message : "Unknown error")
+      );
+    } finally {
+      setRefreshing(false);
+    }
+  }
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (await getToken()) {
+        fetchMocks();
+      }
+    };
+    fetchData();
+  }, []);
+
+  const onRefresh = async () => {
+    fetchMocks();
+  };
+
+  if (errorMsg) {
+    return (
+      <BackgroundWrapper>
+        <Header displayTabTitle="Mocks" />
+        <div className="overflow-y-auto">
+          <div className="mt-5 px-5">
+            <h1 className="text-2xl font-semibold my-5">
+              {user?.preparation_unit}
+            </h1>
+            <DestructibleAlert text={errorMsg} variant="error" />
+          </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>
+      </BackgroundWrapper>
+    );
+  }
+
+  return (
+    <BackgroundWrapper>
+      <div>
+        <Header displayTabTitle="Mocks" />
+        <div className="mx-10 pb-20 overflow-y-auto">
+          <h1 className="text-2xl font-semibold my-5">
+            {user?.preparation_unit}
+          </h1>
+          <div className="border border-[#c0dafc]/50 flex flex-col gap-4 w-full rounded-[25px] p-3">
+            {mocks.length > 0 ? (
+              mocks.map((mocks) => (
+                <div key={mocks.test_id}>
+                  <button
+                    onClick={() =>
+                      router.push(
+                        `/exam/pretest?type=mock&test_id=${mocks.test_id}`
+                      )
+                    }
+                    className="w-full border-1 border-[#B0C2DA] py-3 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors"
+                  >
+                    <h3 className="text-lg font-medium">{mocks.name}</h3>
+                    <div className="flex space-x-2">
+                      <p className="text-sm font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
+                        {mocks.unit}
+                      </p>
+                    </div>
+                  </button>
+                </div>
+              ))
+            ) : refreshing ? (
+              <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>
+            ) : (
+              <DestructibleAlert
+                text="There aren't any tests available for you. Check back later?"
+                variant="warning"
+              />
+            )}
+          </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)/categories/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import Header from "@/components/Header";
+import React from "react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+const CategoriesPage = () => {
+  const router = useRouter();
+
+  return (
+    <BackgroundWrapper>
+      <main>
+        <Header displayTabTitle="Categories" />
+        <div className="grid grid-cols-2 gap-4 pt-6 mx-4">
+          <button
+            onClick={() => router.push("/categories/topics")}
+            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+          >
+            <Image
+              src="/images/icons/topic-test.png"
+              alt="Topic Test"
+              width={85}
+              height={85}
+            />
+            <span className="font-medium text-[#113768]">Topic Test</span>
+          </button>
+
+          <button
+            onClick={() => router.push("/categories/mocks")}
+            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+          >
+            <Image
+              src="/images/icons/mock-test.png"
+              alt="Mock Test"
+              width={85}
+              height={85}
+            />
+            <span className="font-medium text-[#113768]">Mock Test</span>
+          </button>
+
+          <button
+            disabled
+            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+          >
+            <Image
+              src="/images/icons/past-paper.png"
+              alt="Past Papers"
+              width={68}
+              height={68}
+              className="opacity-50"
+            />
+            <span className="font-medium text-[#113768]/50">Past Papers</span>
+          </button>
+
+          <button
+            onClick={() => router.push("/categories/subjects")}
+            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+          >
+            <Image
+              src="/images/icons/subject-test.png"
+              alt="Subject Test"
+              width={80}
+              height={80}
+            />
+            <span className="font-medium text-[#113768]">Subject Test</span>
+          </button>
+        </div>
+      </main>
+    </BackgroundWrapper>
+  );
+};
+
+export default CategoriesPage;

app/(tabs)/categories/subjects/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+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, getToken } from "@/lib/auth";
+import { Loader, RefreshCw } from "lucide-react";
+import { useAuthStore } from "@/stores/authStore";
+import { FaStar } from "react-icons/fa";
+
+type Subject = {
+  subject_id: string;
+  name: string;
+  unit: string;
+};
+
+export default function PaperScreen() {
+  const router = useRouter();
+  const { user } = useAuthStore();
+
+  const [subjects, setSubjects] = useState<Subject[]>([]);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  async function fetchSubjects() {
+    setRefreshing(true);
+    try {
+      const token = await getToken();
+      const response = await fetch(`${API_URL}/subjects/`, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch subjects");
+      }
+
+      const fetchedSubjects: Subject[] = await response.json();
+      setSubjects(fetchedSubjects);
+    } catch (error) {
+      setErrorMsg(
+        "Error fetching subjects: " +
+          (error instanceof Error ? error.message : "Unknown error")
+      );
+    } finally {
+      setRefreshing(false);
+    }
+  }
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (await getToken()) {
+        fetchSubjects();
+      }
+    };
+    fetchData();
+  }, []);
+
+  const onRefresh = async () => {
+    fetchSubjects();
+  };
+
+  if (errorMsg) {
+    return (
+      <BackgroundWrapper>
+        <Header displayTabTitle="Subjects" />
+        <div className="overflow-y-auto">
+          <div className="mt-5 px-5">
+            <h1 className="text-2xl font-semibold my-5">
+              {user?.preparation_unit}
+            </h1>
+            <DestructibleAlert text={errorMsg} variant="error" />
+          </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>
+      </BackgroundWrapper>
+    );
+  }
+
+  return (
+    <BackgroundWrapper>
+      <div>
+        <Header displayTabTitle="Subjects" />
+        <div className="mx-10 pt-5 overflow-y-auto">
+          <h1 className="text-2xl font-semibold mb-5">
+            {user?.preparation_unit}
+          </h1>
+          <div className="border border-[#c0dafc]/50 flex flex-col gap-4 w-full rounded-[20px] p-3">
+            {subjects.length > 0 ? (
+              subjects
+                .filter((subject) => subject.unit === user?.preparation_unit)
+                .map((subject) => (
+                  <div key={subject.subject_id}>
+                    <button
+                      onClick={() =>
+                        router.push(
+                          `/exam/pretest?type=subject&test_id=${subject.subject_id}`
+                        )
+                      }
+                      className="w-full border-1 border-[#B0C2DA] py-4 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors"
+                    >
+                      <h3 className="text-xl font-medium">{subject.name}</h3>
+                      <p className="text-xl font-medium text-[#113768] flex items-center gap-1">
+                        <FaStar size={15} />
+                        <FaStar size={15} />
+                        <FaStar size={15} />
+                        <FaStar size={15} />
+                      </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)/categories/topics/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+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, getToken } from "@/lib/auth";
+import { Loader, RefreshCw } from "lucide-react";
+import { useAuthStore } from "@/stores/authStore";
+
+type Topic = {
+  topic_id: string;
+  name: string;
+  subject: {
+    subject_id: string;
+    name: string;
+    unit: string;
+  };
+};
+
+export default function TopicScreen() {
+  const router = useRouter();
+  const { user } = useAuthStore();
+
+  const [topics, setTopics] = useState<Topic[]>([]);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState<boolean>(false);
+  async function fetchTopics() {
+    setRefreshing(true);
+    try {
+      const token = await getToken();
+      const response = await fetch(`${API_URL}/topics/`, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch topics");
+      }
+
+      const fetchedTopics: Topic[] = await response.json();
+      setTopics(fetchedTopics);
+    } catch (error) {
+      setErrorMsg(
+        "Error fetching subjects: " +
+          (error instanceof Error ? error.message : "Unknown error")
+      );
+    } finally {
+      setRefreshing(false);
+    }
+  }
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (await getToken()) {
+        fetchTopics();
+      }
+    };
+    fetchData();
+  }, []);
+
+  const onRefresh = async () => {
+    fetchTopics();
+  };
+
+  if (errorMsg) {
+    return (
+      <BackgroundWrapper>
+        <Header displayTabTitle="Subjects" />
+        <div className="overflow-y-auto">
+          <div className="mt-5 px-5">
+            <h1 className="text-2xl font-semibold my-5">
+              {user?.preparation_unit}
+            </h1>
+            <DestructibleAlert text={errorMsg} variant="error" />
+          </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>
+      </BackgroundWrapper>
+    );
+  }
+
+  return (
+    <BackgroundWrapper>
+      <div>
+        <Header displayTabTitle="Topics" />
+        <div className="mx-10 pb-20 overflow-y-auto">
+          <h1 className="text-2xl font-semibold my-5">
+            {user?.preparation_unit}
+          </h1>
+          <div className="border border-[#c0dafc]/50 flex flex-col gap-4 w-full rounded-[20px] p-3">
+            {topics.length > 0 ? (
+              topics.map((topic) => (
+                <div key={topic.topic_id}>
+                  <button
+                    onClick={() =>
+                      router.push(
+                        `/exam/pretest?type=topic&test_id=${topic.topic_id}`
+                      )
+                    }
+                    className="w-full border-1 border-[#B0C2DA] py-3 rounded-[10px] px-6 space-y-2 text-left hover:bg-gray-50 transition-colors"
+                  >
+                    <h3 className="text-lg font-medium">{topic.name}</h3>
+                    <div className="flex space-x-2">
+                      <p className="text-sm font-normal bg-slate-500 w-fit px-3 py-1 rounded-full text-white">
+                        {topic.subject.name}
+                      </p>
+                    </div>
+                  </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)/home/page.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import Header from "@/components/Header";
+import SlidingGallery from "@/components/SlidingGallery";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { ChevronRight } from "lucide-react";
+import styles from "@/css/Home.module.css";
+import { getLinkedViews } from "@/lib/gallery-views";
+import { GalleryViews } from "@/types/gallery";
+import { useAuthStore } from "@/stores/authStore";
+import DestructibleAlert from "@/components/DestructibleAlert";
+
+const HomePage = () => {
+  const router = useRouter();
+  const [linkedViews, setLinkedViews] = useState<GalleryViews[]>();
+  const { user } = useAuthStore();
+
+  useEffect(() => {
+    const fetchedLinkedViews: GalleryViews[] = getLinkedViews();
+    setLinkedViews(fetchedLinkedViews);
+  }, []);
+
+  return (
+    <BackgroundWrapper>
+      <div className="flex-1 min-h-screen">
+        <Header displayUser />
+        <div className="overflow-y-auto pt-4 h-[calc(100vh-80px)]">
+          <div className="pb-40 mx-6">
+            {!user?.is_verified && (
+              <DestructibleAlert
+                text="Please verify your account. Check your email for the verification link."
+                variant="warning"
+              />
+            )}
+            <SlidingGallery views={linkedViews} height="23vh" />
+            <div className="flex flex-col gap-9">
+              {/* Categories Section */}
+              <div>
+                <div className="flex item-scenter justify-between">
+                  <h2 className="text-2xl font-bold text-[#113768]">
+                    Categories
+                  </h2>
+                  <button
+                    onClick={() => router.push("/categories")}
+                    className={styles.arrowButton}
+                  >
+                    <ChevronRight size={24} color="#113768" />
+                  </button>
+                </div>
+                <div className="grid grid-cols-2 gap-4 pt-6 ">
+                  <button
+                    onClick={() => router.push("/categories/topics")}
+                    className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+                  >
+                    <Image
+                      src="/images/icons/topic-test.png"
+                      alt="Topic Test"
+                      width={85}
+                      height={85}
+                    />
+                    <span className="font-medium text-[#113768]">
+                      Topic Test
+                    </span>
+                  </button>
+
+                  <button
+                    onClick={() => router.push("/categories/mocks")}
+                    className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+                  >
+                    <Image
+                      src="/images/icons/mock-test.png"
+                      alt="Mock Test"
+                      width={85}
+                      height={85}
+                    />
+                    <span className="font-medium text-[#113768]">
+                      Mock Test
+                    </span>
+                  </button>
+
+                  <button
+                    disabled
+                    className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+                  >
+                    <Image
+                      src="/images/icons/past-paper.png"
+                      alt="Past Papers"
+                      width={68}
+                      height={68}
+                      className="opacity-50"
+                    />
+                    <span className="font-medium text-[#113768]/50">
+                      Past Papers
+                    </span>
+                  </button>
+
+                  <button
+                    onClick={() => router.push("/categories/subjects")}
+                    className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
+                  >
+                    <Image
+                      src="/images/icons/subject-test.png"
+                      alt="Subject Test"
+                      width={80}
+                      height={80}
+                    />
+                    <span className="font-medium text-[#113768]">
+                      Subject Test
+                    </span>
+                  </button>
+                </div>
+              </div>
+
+              {/* Leaderboard Section */}
+              <div className={styles.leaderboardWrapper}>
+                <h2 className={styles.sectionTitle}>Leaderboard</h2>
+                <div className={styles.leaderboardContainer}>
+                  <div className={styles.topThreeHeader}>
+                    <span className={styles.topThreeTitle}>Top 3</span>
+                    <button
+                      onClick={() => router.push("/leaderboard")}
+                      className={styles.arrowButton}
+                    >
+                      <ChevronRight size={24} color="#113768" />
+                    </button>
+                  </div>
+                  <div className={styles.divider}></div>
+                  <div className={styles.topThreeList}>
+                    {/* {boardError ? (
+                      <DestructibleAlert text={boardError} />
+                    ) : (
+                      getTopThree(boardData).map((student, idx) => (
+                        <div key={idx} className={styles.topThreeItem}>
+                          <div className={styles.studentInfo}>
+                            <span className={styles.rank}>{student.rank}</span>
+                            <Avatar className="bg-slate-300 w-4 h-4 rounded-full" />
+                            <span className={styles.studentName}>
+                              {student.name}
+                            </span>
+                          </div>
+                          <span className={styles.points}>
+                            {student.points}pt
+                          </span>
+                        </div>
+                      ))
+                    )} */}
+                    <h2 className="text-center text-xl">Coming soon</h2>
+                  </div>
+                </div>
+              </div>
+
+              {/* Performance Summary Section */}
+              <div className={styles.section}>
+                <div className={styles.sectionHeader}>
+                  <h2 className={styles.sectionTitle}>Performance Summary</h2>
+                  <button
+                    disabled
+                    onClick={() => router.push("/performance")}
+                    className={styles.arrowButton}
+                  >
+                    <ChevronRight size={24} color="#113768" />
+                  </button>
+                </div>
+                <div className={styles.comingSoonCard}>
+                  <p className={styles.comingSoonText}>Coming soon.</p>
+                </div>
+              </div>
+
+              {/* Progress Tracker Section */}
+              <div className={styles.section}>
+                <div className={styles.sectionHeader}>
+                  <h2 className={styles.sectionTitle}>Progress Tracker</h2>
+                  <button
+                    disabled
+                    onClick={() => router.push("/progress")}
+                    className={styles.arrowButton}
+                  >
+                    <ChevronRight size={24} color="#113768" />
+                  </button>
+                </div>
+                <div className={styles.comingSoonCard}>
+                  <p className={styles.comingSoonText}>Coming soon.</p>
+                </div>
+              </div>
+
+              {/* Daily Quiz Section */}
+              <div className={styles.section}>
+                <h2 className={styles.sectionTitle}>Daily Quiz</h2>
+                <div className={styles.comingSoonCard}>
+                  <p className={styles.comingSoonText}>Coming soon.</p>
+                </div>
+              </div>
+
+              {/* Live Exams Section */}
+              <div className={`${styles.section} ${styles.lastSection}`}>
+                <h2 className={styles.sectionTitle}>Live Exams</h2>
+                <div className={styles.comingSoonCard}>
+                  <p className={styles.comingSoonText}>Coming soon.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </BackgroundWrapper>
+  );
+};
+
+export default HomePage;

app/(tabs)/layout.tsx

@@ -0,0 +1,47 @@
+// app/tabs/layout.tsx
+"use client";
+
+import Link from "next/link";
+import { ReactNode } from "react";
+import { usePathname } from "next/navigation";
+import clsx from "clsx";
+import { GoHomeFill } from "react-icons/go";
+import { HiViewGrid } from "react-icons/hi";
+import { FaBookmark } from "react-icons/fa";
+import { HiCog6Tooth } from "react-icons/hi2";
+
+const tabs = [
+  { name: "Home", href: "/home", component: <GoHomeFill size={30} /> },
+  {
+    name: "Categories",
+    href: "/categories",
+    component: <HiViewGrid size={30} />,
+  },
+  { name: "Bookmark", href: "/bookmark", component: <FaBookmark size={23} /> },
+  { name: "Settings", href: "/settings", component: <HiCog6Tooth size={30} /> },
+];
+
+export default function TabsLayout({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <main className="flex-1">{children}</main>
+
+      <nav className="h-[70px] w-full flex justify-around items-center border-t border-t-neutral-400 p-4 rounded-t-4xl bg-white fixed bottom-0">
+        {tabs.map((tab) => (
+          <Link
+            key={tab.name}
+            href={tab.href}
+            className={clsx(
+              "text-center text-sm font-medium",
+              pathname === tab.href ? "text-blue-600" : "text-gray-500"
+            )}
+          >
+            {tab.component}
+          </Link>
+        ))}
+      </nav>
+    </div>
+  );
+}

app/(tabs)/leaderboard/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import React from "react";
+
+const LeaderboardPage = () => {
+  return <></>;
+};
+
+export default LeaderboardPage;

app/(tabs)/performance/page.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

app/(tabs)/profile/page.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import ProfileManager from "@/components/ProfileManager";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { getToken, API_URL } from "@/lib/auth";
+import {
+  BadgeCheck,
+  ChevronLeft,
+  Edit2,
+  Lock,
+  Save,
+  ShieldX,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { UserData } from "@/types/auth";
+
+const ProfilePage = () => {
+  const router = useRouter();
+
+  const [userData, setUserData] = useState<UserData | undefined>();
+  const [editStatus, setEditStatus] = useState(false);
+
+  useEffect(() => {
+    async function fetchUser() {
+      try {
+        const token = await getToken();
+        if (!token) return;
+
+        const response = await fetch(`${API_URL}/me/profile/`, {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (response.ok) {
+          const fetchedUserData = await response.json();
+          setUserData(fetchedUserData);
+        }
+      } catch (error) {
+        console.error("Error fetching user data: ", error);
+      }
+    }
+
+    fetchUser();
+  }, []);
+
+  const handleSave = async () => {
+    // try {
+    //   const token = await getToken();
+    //   if (!token || !userData) return;
+
+    //   const response = await fetch(`${API_URL}/profile/edit`, {
+    //     method: "POST",
+    //     headers: {
+    //       "Content-Type": "application/json",
+    //       Authorization: `Bearer ${token}`,
+    //     },
+    //     body: JSON.stringify(userData),
+    //   });
+
+    //   if (response.ok) {
+    //     setEditStatus(false);
+    //   } else {
+    //     console.error("Failed to save profile");
+    //   }
+    // } catch (error) {
+    //   console.error("Error saving profile:", error);
+    // }
+    console.log("Updated user data:", userData);
+    setEditStatus(false);
+  };
+
+  return (
+    <section className="min-h-screen mb-32">
+      <div className="h-48 bg-gradient-to-b from-[#113768] to-white w-full">
+        <button
+          onClick={() => router.push("/settings")}
+          className="absolute top-10 left-6 p-2 bg-black/30 rounded-full"
+        >
+          <ChevronLeft size={30} color="white" />
+        </button>
+      </div>
+
+      <div className="relative mx-10">
+        <Avatar className="bg-[#113768] w-32 h-32 absolute -top-20 left-1/2 transform -translate-x-1/2">
+          <AvatarFallback className="text-3xl text-white">
+            {userData?.username
+              ? userData.username.charAt(0).toUpperCase()
+              : ""}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="pt-14 space-y-4">
+          {userData?.is_verified ? (
+            <div className="flex gap-4 justify-center  items-center bg-green-200 border border-green-700  px-3 py-4 rounded-2xl ">
+              <BadgeCheck size={30} />
+              <p className="text-sm font-semibold text-black">
+                This account is verified.
+              </p>
+            </div>
+          ) : (
+            <div className="flex gap-2 justify-center items-center bg-red-200 border border-red-700  px-3 py-4 rounded-2xl ">
+              <ShieldX size={30} />
+              <p className="text-sm font-semibold text-black">
+                This account is not verified.
+              </p>
+            </div>
+          )}
+          <ProfileManager
+            userData={userData}
+            edit={editStatus}
+            setUserData={setUserData}
+          />
+
+          <button
+            onClick={() => {
+              if (editStatus) handleSave();
+              else setEditStatus(true);
+            }}
+            className={`p-3 ${
+              editStatus ? "bg-green-500" : "bg-[#113768]"
+            } w-full flex gap-3 justify-center items-center rounded-full`}
+          >
+            {editStatus ? (
+              <Save size={20} color="white" />
+            ) : (
+              <Edit2 size={20} color="white" />
+            )}
+            <p className="text-white">
+              {editStatus ? "Save Changes" : "Edit Profile"}
+            </p>
+          </button>
+
+          <button className="p-3 bg-[#113768] w-full flex gap-3 justify-center items-center rounded-full">
+            <Lock size={20} color="white" />
+            <p className="text-white">Change Password</p>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProfilePage;

app/(tabs)/progress/page.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const page = () => {
+  return <div>page</div>;
+};
+
+export default page;

app/(tabs)/settings/page.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { useAuthStore } from "@/stores/authStore";
+import {
+  BadgeCheck,
+  Bookmark,
+  ChartColumn,
+  ChevronRight,
+  Clock4,
+  CreditCard,
+  Crown,
+  Globe,
+  LogOut,
+  MapPin,
+  MoveLeft,
+  Trash2,
+  UserCircle2,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+const SettingsPage = () => {
+  const router = useRouter();
+  const { user, logout } = useAuthStore();
+
+  function handleLogout() {
+    logout();
+    router.replace("/");
+  }
+
+  return (
+    <BackgroundWrapper>
+      <section className="min-h-screen flex flex-col justify-between">
+        <div className="flex-1 mb-20">
+          <div className="mx-8 mt-10 pb-6 space-y-6">
+            <section className="flex justify-between">
+              <button onClick={() => router.push("/home")}>
+                <MoveLeft size={30} color="#113768" />
+              </button>
+              <h3 className="text-lg font-semibold text-[#113768]">Settings</h3>
+              <button onClick={() => router.push("/profile")}>
+                <UserCircle2 size={30} color="#113768" />
+              </button>
+            </section>
+            <section className="flex items-center gap-4 bg-blue-100 border-1 border-blue-300/40 rounded-2xl py-5 px-4">
+              <Avatar className="bg-[#113768] w-20 h-20">
+                <AvatarFallback className="text-3xl text-white">
+                  {user?.username
+                    ? user.username.charAt(0).toUpperCase()
+                    : "User"}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col items-start">
+                <h1 className="font-semibold text-2xl flex gap-1 items-center">
+                  {user?.full_name}
+                </h1>
+                <h3 className=" text-md">{user?.email}</h3>
+              </div>
+            </section>
+            <section className="flex flex-col gap-8">
+              {!user?.is_verified && (
+                <>
+                  <button
+                    onClick={() => router.push("/settings/verify")}
+                    className="flex justify-between"
+                  >
+                    <div className="flex items-center gap-4">
+                      <BadgeCheck size={30} color="#113768" />
+                      <h3 className="text-md font-medium text-[#113768]">
+                        Verify your account
+                      </h3>
+                    </div>
+                    <ChevronRight size={30} color="#113768" />
+                  </button>
+                  <div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
+                </>
+              )}
+              <button
+                onClick={() => router.push("/profile")}
+                className="flex justify-between"
+              >
+                <div className="flex items-center gap-4">
+                  <UserCircle2 size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Your profile
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </button>
+              <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                  <Bookmark size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Bookmarks
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </div>
+              <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                  <CreditCard size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Payments
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </div>
+              <div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
+              <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                  <Globe size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Languages
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </div>
+              <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                  <MapPin size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Location
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </div>
+              <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                  <Crown size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Subscription
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </div>
+              <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                  <ChartColumn size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Performance
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </div>
+              <div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
+              <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                  <Trash2 size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Clear Cache
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </div>
+              <div className="flex justify-between">
+                <div className="flex items-center gap-4">
+                  <Clock4 size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Clear History
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </div>
+              <button onClick={handleLogout} className="flex justify-between">
+                <div className="flex items-center gap-4">
+                  <LogOut size={30} color="#113768" />
+                  <h3 className="text-md font-medium text-[#113768]">
+                    Log out
+                  </h3>
+                </div>
+                <ChevronRight size={30} color="#113768" />
+              </button>
+              <div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
+              <p className="text-center text-[#113768]/50 font-medium">
+                ExamJam | Version 1.0
+              </p>
+            </section>
+          </div>
+        </div>
+      </section>
+    </BackgroundWrapper>
+  );
+};
+
+export default SettingsPage;

app/(tabs)/settings/verify/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import Header from "@/components/Header";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { API_URL } from "@/lib/auth";
+import Image from "next/image";
+import React, { useState } from "react";
+
+const VerificationScreen = () => {
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleVerify = async () => {
+    if (otp.length < 6) return;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`${API_URL}/auth/verify?code=${otp}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.message || "Verification failed");
+      }
+
+      // 🔥 Call zustand action to update auth state
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <BackgroundWrapper>
+      <Header displayTabTitle="Verification" />
+      <div className="flex flex-col items-center justify-center pt-10 px-6 gap-4">
+        <Image
+          src={"/images/icons/otp.svg"}
+          height={200}
+          width={300}
+          alt="otp-banner"
+        />
+        <h1 className="font-medium text-xl text-center ">
+          Enter the code here that you received in your email.
+        </h1>
+        <InputOTP
+          maxLength={6}
+          value={otp}
+          onChange={setOtp}
+          onComplete={handleVerify} // auto-submit when complete
+        >
+          <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+          </InputOTPGroup>
+          <InputOTPSeparator />
+          <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+
+        {error && <p className="text-red-500 mt-3">{error}</p>}
+
+        <button
+          onClick={handleVerify}
+          disabled={otp.length < 6 || loading}
+          className="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg disabled:bg-gray-400 transition"
+        >
+          {loading ? "Verifying..." : "Verify"}
+        </button>
+      </div>
+    </BackgroundWrapper>
+  );
+};
+
+export default VerificationScreen;

app/exam/exam-screen/page.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Header from "@/components/Header";
+import QuestionItem from "@/components/QuestionItem";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { useExamStore } from "@/stores/examStore";
+import { useTimerStore } from "@/stores/timerStore";
+
+export default function ExamPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const test_id = searchParams.get("test_id") || "";
+  const type = searchParams.get("type") || "";
+
+  const { setStatus, test, answers, startExam, setAnswer, submitExam } =
+    useExamStore();
+  const { resetTimer, stopTimer } = useTimerStore();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Start exam + timer automatically
+  useEffect(() => {
+    if (!type || !test_id) return;
+
+    const initExam = async () => {
+      const fetchedTest = await startExam(type, test_id);
+
+      if (!fetchedTest) return;
+
+      setStatus("in-progress");
+
+      const timeLimit = fetchedTest.metadata.time_limit_minutes;
+      if (timeLimit) {
+        resetTimer(timeLimit * 60, async () => {
+          // Auto-submit when timer ends
+          stopTimer();
+          setStatus("finished");
+          await submitExam(type);
+          router.replace("/exam/results");
+        });
+      }
+    };
+
+    initExam();
+
+    return () => {
+      stopTimer();
+    };
+  }, [
+    type,
+    test_id,
+    startExam,
+    resetTimer,
+    stopTimer,
+    submitExam,
+    router,
+    setStatus,
+  ]);
+
+  if (isSubmitting) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center">
+        <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 exam...</p>
+      </div>
+    );
+  }
+
+  if (!test) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="flex flex-col items-center justify-center">
+          <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">Loading exam...</p>
+        </div>
+      </div>
+    );
+  }
+
+  const handleSubmitExam = async (type: string) => {
+    setIsSubmitting(true);
+    stopTimer();
+
+    try {
+      const result = await submitExam(type); // throws if fails
+
+      if (!result) throw new Error("Submission failed");
+
+      router.replace("/exam/results"); // navigate
+    } catch (err) {
+      console.error("Submit exam failed:", err);
+      alert("Failed to submit exam. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header with live timer */}
+      <Header />
+
+      {/* Questions */}
+      <BackgroundWrapper>
+        <div className="container mx-auto px-6 py-8 mb-20">
+          {test.questions.map((q, idx) => (
+            <div id={`question-${idx}`} key={q.question_id}>
+              <QuestionItem
+                question={q}
+                index={idx}
+                selectedAnswer={answers[idx]}
+                onSelect={(answer) => setAnswer(idx, answer)}
+              />
+            </div>
+          ))}
+
+          {/* Bottom submit bar */}
+          <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex">
+            <button
+              onClick={() => handleSubmitExam(type)}
+              disabled={isSubmitting}
+              className="flex-1 bg-blue-900 text-white p-6 font-bold text-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-800 transition-colors flex justify-center items-center gap-2"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+      </BackgroundWrapper>
+    </div>
+  );
+}

app/exam/pretest/page.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import {
+  ArrowLeft,
+  HelpCircle,
+  Clock,
+  XCircle,
+  OctagonX,
+  RotateCw,
+} from "lucide-react";
+import DestructibleAlert from "@/components/DestructibleAlert";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { API_URL, getToken } from "@/lib/auth";
+import { Metadata } from "@/types/exam";
+import { useExamStore } from "@/stores/examStore";
+import { FaStar } from "react-icons/fa";
+
+function PretestPageContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get params from URL search params
+  const id = searchParams.get("test_id") || "";
+  const type = searchParams.get("type");
+
+  const [metadata, setMetadata] = useState<Metadata | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>();
+  const { setStatus } = useExamStore();
+
+  useEffect(() => {
+    async function fetchQuestions() {
+      if (!id || !type) return;
+
+      try {
+        setLoading(true);
+        const token = await getToken();
+        const questionResponse = await fetch(`${API_URL}/tests/${type}/${id}`, {
+          method: "GET",
+          headers: {
+            authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!questionResponse.ok) {
+          throw new Error("Failed to fetch questions");
+        }
+
+        const data = await questionResponse.json();
+        const fetchedMetadata: Metadata = data.metadata;
+
+        setMetadata(fetchedMetadata);
+      } catch (error) {
+        console.error(error);
+        setError(error instanceof Error ? error.message : "An error occurred");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchQuestions();
+  }, [id, type]);
+
+  if (error) {
+    return (
+      <BackgroundWrapper>
+        <div className="min-h-screen mx-10 pt-10 flex flex-col justify-center items-center gap-4">
+          <div className="flex flex-col justify-center items-center gap-4 w-full">
+            <DestructibleAlert
+              text={error}
+              icon={<OctagonX size={150} color="red" />}
+            />
+            <div className="flex items-center justify-evenly w-full">
+              <button
+                onClick={() => router.push(`/categories/${type}s`)}
+                className="p-4 border border-blue-200 rounded-full bg-blue-400"
+              >
+                <ArrowLeft size={35} color="white" />
+              </button>
+              <button
+                onClick={() => router.refresh()}
+                className="p-4 border border-blue-200 rounded-full bg-red-400"
+              >
+                <RotateCw size={35} color="white" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </BackgroundWrapper>
+    );
+  }
+
+  if (loading) {
+    return (
+      <BackgroundWrapper>
+        <div className="min-h-screen">
+          <div className="mx-10 pt-10">
+            <button
+              onClick={() => router.push(`/categories/${type}s`)}
+              className="mb-4"
+            >
+              <ArrowLeft size={30} color="black" />
+            </button>
+            <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-lg font-medium text-gray-900">Loading...</p>
+            </div>
+          </div>
+        </div>
+      </BackgroundWrapper>
+    );
+  }
+
+  function handleStartExam() {
+    if (!metadata) return;
+    setStatus("in-progress");
+
+    router.push(
+      `/exam/exam-screen?type=${type}&test_id=${metadata?.test_id}&attempt_id=${metadata?.attempt_id}`
+    );
+  }
+  return (
+    <BackgroundWrapper>
+      <div className="min-h-screen flex flex-col justify-between">
+        <div className="flex-1 overflow-y-auto mb-20">
+          {metadata ? (
+            <div className="mx-10 mt-10 gap-6 pb-6 space-y-5">
+              <button onClick={() => router.replace(`/categories/${type}s`)}>
+                <ArrowLeft size={30} color="black" />
+              </button>
+
+              <h1 className="text-4xl font-semibold text-[#113768]">
+                {metadata.name}
+              </h1>
+
+              <p className="text-xl font-medium text-[#113768] flex items-center gap-1">
+                <FaStar size={15} />
+                <FaStar size={15} />
+                <FaStar size={15} />
+                <FaStar size={15} />
+              </p>
+
+              <div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] py-5 px-5 space-y-6">
+                <div className="flex gap-5 items-center">
+                  <HelpCircle size={52} color="#113768" />
+                  <div className="">
+                    <p className="font-bold text-3xl text-[#113768]">
+                      {metadata.num_questions}
+                    </p>
+                    <p className="font-normal text-md">
+                      Multiple Choice Questions
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex gap-5 items-center">
+                  <Clock size={52} color="#113768" />
+                  <div className="">
+                    <p className="font-bold text-3xl text-[#113768]">
+                      {String(metadata.time_limit_minutes)} mins
+                    </p>
+                    <p className="font-normal text-md">Time Taken</p>
+                  </div>
+                </div>
+
+                <div className="flex gap-5 items-center">
+                  <XCircle size={52} color="#113768" />
+                  <div className="">
+                    <p className="font-bold text-3xl text-[#113768]">
+                      {metadata.deduction} marks
+                    </p>
+                    <p className="font-normal text-md">
+                      From each wrong answer
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] px-6 py-5 space-y-3">
+                <h2 className="text-xl font-bold">Ready yourself!</h2>
+
+                <div className="flex pr-4">
+                  <span className="mx-4">•</span>
+                  <p className="font-medium text-md">
+                    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-medium text-md">
+                    There is no negative marking for the wrong answer.
+                  </p>
+                </div>
+
+                <div className="flex pr-4">
+                  <span className="mx-4">•</span>
+                  <p className="font-medium text-md">
+                    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-medium text-md">
+                    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
+          onClick={() => handleStartExam()}
+          className="fixed bottom-0 w-full bg-[#113768] h-[78px] justify-center items-center flex text-white text-2xl font-bold"
+        >
+          Start Test
+        </button>
+
+        {/* <CustomBackHandler fallbackRoute="paper" /> */}
+      </div>
+    </BackgroundWrapper>
+  );
+}
+
+export default function PretestPage() {
+  return (
+    <Suspense
+      fallback={
+        <BackgroundWrapper>
+          <div className="min-h-screen">
+            <div className="mx-10 mt-10 flex flex-col justify-center items-center">
+              <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">Loading...</p>
+            </div>
+          </div>
+        </BackgroundWrapper>
+      }
+    >
+      <PretestPageContent />
+    </Suspense>
+  );
+}

app/exam/results/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React, { useCallback, useEffect } from "react";
+import { ArrowLeft } from "lucide-react";
+import { useExamStore } from "@/stores/examStore";
+import QuestionItem from "@/components/QuestionItem";
+import SlidingGallery from "@/components/SlidingGallery";
+import { getResultViews } from "@/lib/gallery-views";
+
+export default function ResultsPage() {
+  const router = useRouter();
+  const { result, clearResult, setStatus, status } = useExamStore();
+
+  const handleBackToHome = useCallback(() => {
+    clearResult();
+    router.replace("/categories");
+  }, [clearResult, router]);
+
+  useEffect(() => {
+    const handlePopState = () => {
+      if (status !== "finished") {
+        handleBackToHome();
+      }
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [status, router, setStatus, handleBackToHome]);
+
+  if (!result) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <p className="text-lg font-medium">Redirecting...</p>
+      </div>
+    );
+  }
+
+  const views = getResultViews(result);
+
+  return (
+    <div className="min-h-screen bg-white">
+      <button className="px-10 pt-10" onClick={handleBackToHome}>
+        <ArrowLeft size={30} color="black" />
+      </button>
+
+      <div className="bg-white rounded-lg shadow-lg px-10 pb-20">
+        <h1 className="text-2xl font-bold text-[#113768]  text-center">
+          You did great!
+        </h1>
+
+        <SlidingGallery views={views} height={"26vh"} />
+
+        {/* Render questions with correctness */}
+        {result.user_questions.map((q, idx) => {
+          const userAnswer = result.user_answers[idx];
+          const correctAnswer = result.correct_answers[idx];
+
+          return (
+            <div key={q.question_id} className="rounded-3xl mb-6">
+              <QuestionItem
+                question={q}
+                index={idx}
+                selectedAnswer={userAnswer}
+                onSelect={() => {}}
+                userAnswer={userAnswer}
+                correctAnswer={correctAnswer}
+                showResults={true}
+              />
+
+              {/* Optional answer feedback below the question */}
+              {/* <div className="mt-2 text-sm">
+                {userAnswer === null ? (
+                  <span className="text-yellow-600 font-medium">
+                    Skipped — Correct: {String.fromCharCode(65 + correctAnswer)}
+                  </span>
+                ) : userAnswer === correctAnswer ? (
+                  <span className="text-green-600 font-medium">Correct</span>
+                ) : (
+                  <span className="text-red-600 font-medium">
+                    Your Answer: {String.fromCharCode(65 + userAnswer)} |
+                    Correct Answer: {String.fromCharCode(65 + correctAnswer)}
+                  </span>
+                )}
+              </div> */}
+            </div>
+          );
+        })}
+      </div>
+
+      <button
+        onClick={handleBackToHome}
+        className="fixed bottom-0 w-full bg-blue-900 text-white h-[74px] font-bold text-lg hover:bg-blue-800 transition-colors"
+      >
+        Finish
+      </button>
+    </div>
+  );
+}

app/globals.css

@@ -1,122 +1,5 @@
 @import "tailwindcss";
-@import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.129 0.042 264.695);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.129 0.042 264.695);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
-  --primary-foreground: oklch(0.984 0.003 247.858);
-  --secondary: oklch(0.968 0.007 247.896);
-  --secondary-foreground: oklch(0.208 0.042 265.755);
-  --muted: oklch(0.968 0.007 247.896);
-  --muted-foreground: oklch(0.554 0.046 257.417);
-  --accent: oklch(0.968 0.007 247.896);
-  --accent-foreground: oklch(0.208 0.042 265.755);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.929 0.013 255.508);
-  --input: oklch(0.929 0.013 255.508);
-  --ring: oklch(0.704 0.04 256.788);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.984 0.003 247.858);
-  --sidebar-foreground: oklch(0.129 0.042 264.695);
-  --sidebar-primary: oklch(0.208 0.042 265.755);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
-  --sidebar-ring: oklch(0.704 0.04 256.788);
-}
-
-.dark {
-  --background: oklch(0.129 0.042 264.695);
-  --foreground: oklch(0.984 0.003 247.858);
-  --card: oklch(0.208 0.042 265.755);
-  --card-foreground: oklch(0.984 0.003 247.858);
-  --popover: oklch(0.208 0.042 265.755);
-  --popover-foreground: oklch(0.984 0.003 247.858);
-  --primary: oklch(0.929 0.013 255.508);
-  --primary-foreground: oklch(0.208 0.042 265.755);
-  --secondary: oklch(0.279 0.041 260.031);
-  --secondary-foreground: oklch(0.984 0.003 247.858);
-  --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
-  --accent: oklch(0.279 0.041 260.031);
-  --accent-foreground: oklch(0.984 0.003 247.858);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.208 0.042 265.755);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
+@theme {
+    --font-sans: var(--font-montserrat), ui-sans-serif, system-ui, sans-serif;
   }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

app/layout.tsx

@@ -1,20 +1,20 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Montserrat } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
+import { Providers } from "./providers";
+import AuthInitializer from "@/components/AuthInitializer";
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const montserrat = Montserrat({
   subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  variable: "--font-montserrat",
+  display: "swap",
 });
 
 export const metadata: Metadata = {
-  title: "NextJS template",
-  description: "With typescript, tailwindCSS and shadcnUI",
+  title: "ExamJam",
+  description: "The best place to prepare for your exams!",
 };
 
 export default function RootLayout({
@@ -23,11 +23,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" className={montserrat.variable}>
+      <body className="font-sans">
+        <AuthInitializer>
+          <Providers>{children}</Providers>
+        </AuthInitializer>
       </body>
     </html>
   );

app/page.tsx

@@ -1,31 +1,66 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 import Image from "next/image";
+import BackgroundWrapper from "@/components/BackgroundWrapper";
 
 export default function Home() {
+  const router = useRouter();
+
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />{" "}
-        template with typescript, tailwindCSS and shadcnUI
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-      </main>
-    </div>
+    <BackgroundWrapper>
+      <div className="mx-10 h-screen">
+        <div className="h-full flex flex-col justify-around pt-10">
+          {/* Logo Container */}
+          <div className="w-full" style={{ aspectRatio: "368/89" }}>
+            <Image
+              src="/images/logo/logo.png"
+              alt="Logo"
+              width={368}
+              height={89}
+              className="w-full h-full object-contain"
+              priority
+            />
+          </div>
+
+          {/* Login Graphic */}
+          <div className="w-full h-1/2">
+            <Image
+              src="/images/static/login-graphic-1.png"
+              alt="Login illustration"
+              width={400}
+              height={300}
+              className="w-full h-full object-contain"
+            />
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col gap-4">
+            <button
+              onClick={() => router.replace("/login")}
+              className="w-full h-[60px] flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200"
+            >
+              <span
+                className="font-medium"
+                style={{ fontFamily: "Montserrat, sans-serif" }}
+              >
+                Login
+              </span>
+            </button>
+
+            <p
+              className="text-center font-medium"
+              style={{ fontFamily: "Montserrat, sans-serif" }}
+            >
+              Don&apos;t have an account?
+              <Link href="/register" className="text-[#276ac0] hover:underline">
+                Register here
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </BackgroundWrapper>
   );
 }

app/providers.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { ModalProvider } from "@/context/ModalContext";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <ModalProvider>{children}</ModalProvider>;
+}

bash.exe.stackdump

@@ -0,0 +1,28 @@
+Stack trace:
+Frame         Function      Args
+0007FFFFB730  00021006118E (00021028DEE8, 000210272B3E, 0007FFFFB730, 0007FFFFA630) msys-2.0.dll+0x2118E
+0007FFFFB730  0002100469BA (000000000000, 000000000000, 000000000000, 0007FFFFBA08) msys-2.0.dll+0x69BA
+0007FFFFB730  0002100469F2 (00021028DF99, 0007FFFFB5E8, 0007FFFFB730, 000000000000) msys-2.0.dll+0x69F2
+0007FFFFB730  00021006A41E (000000000000, 000000000000, 000000000000, 000000000000) msys-2.0.dll+0x2A41E
+0007FFFFB730  00021006A545 (0007FFFFB740, 000000000000, 000000000000, 000000000000) msys-2.0.dll+0x2A545
+0007FFFFBA10  00021006B9A5 (0007FFFFB740, 000000000000, 000000000000, 000000000000) msys-2.0.dll+0x2B9A5
+End of stack trace
+Loaded modules:
+000100400000 bash.exe
+7FFA7B7E0000 ntdll.dll
+7FFA7A000000 KERNEL32.DLL
+7FFA78C70000 KERNELBASE.dll
+7FFA7A690000 USER32.dll
+7FFA79000000 win32u.dll
+7FFA79860000 GDI32.dll
+7FFA79490000 gdi32full.dll
+7FFA79280000 msvcp_win.dll
+000210040000 msys-2.0.dll
+7FFA79160000 ucrtbase.dll
+7FFA79630000 advapi32.dll
+7FFA7B240000 msvcrt.dll
+7FFA7B090000 sechost.dll
+7FFA79890000 RPCRT4.dll
+7FFA784C0000 CRYPTBASE.DLL
+7FFA795B0000 bcryptPrimitives.dll
+7FFA79FC0000 IMM32.DLL

capacitor.config.ts

@@ -0,0 +1,9 @@
+import type { CapacitorConfig } from "@capacitor/cli";
+
+const config: CapacitorConfig = {
+  appId: "com.examjam.omukk",
+  appName: "ExamJam",
+  webDir: "out",
+};
+
+export default config;

components/AuthInitializer.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAuthStore } from "@/stores/authStore";
+import { useRouter, usePathname } from "next/navigation";
+
+export default function AuthInitializer({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { initializeAuth, token, hydrated } = useAuthStore();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // 1️⃣ Run initialization once
+  useEffect(() => {
+    initializeAuth();
+  }, [initializeAuth]);
+
+  // 2️⃣ Run routing logic only after hydration
+  useEffect(() => {
+    if (!hydrated) return;
+
+    const publicPages = ["/", "/login", "/register"];
+
+    if (token) {
+      if (publicPages.includes(pathname)) {
+        router.replace("/home");
+      }
+    } else {
+      if (!publicPages.includes(pathname)) {
+        router.replace("/login");
+      }
+    }
+  }, [pathname, token, hydrated, router]);
+
+  // 3️⃣ Show loading until hydrated
+  if (!hydrated) {
+    return (
+      <div className="min-h-screen flex flex-col justify-center items-center gap-3">
+        <div className="animate-spin rounded-full h-20 w-20 border-b-2 border-blue-500"></div>
+        <p className="text-2xl font-semibold tracking-tighter">Loading...</p>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}

components/BackgroundWrapper.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+
+interface BackgroundWrapperProps {
+  children: ReactNode;
+}
+
+const BackgroundWrapper = ({ children }: BackgroundWrapperProps) => {
+  return (
+    <div
+      className="min-h-screen bg-cover bg-center bg-no-repeat relative"
+      style={{
+        backgroundImage: "url('/images/static/paper-background.png')",
+      }}
+    >
+      <div
+        className="min-h-screen"
+        style={{ backgroundColor: "rgba(0, 0, 0, 0)" }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default BackgroundWrapper;

components/DestructibleAlert.tsx

@@ -0,0 +1,40 @@
+import React, { JSX } from "react";
+
+interface DestructibleAlertProps {
+  variant?: "error" | "warning" | "alert";
+  text: string;
+  icon?: JSX.Element;
+}
+
+const DestructibleAlert: React.FC<DestructibleAlertProps> = ({
+  variant,
+  text,
+  icon,
+}) => {
+  return (
+    <div
+      className={`${
+        variant === "error"
+          ? "bg-red-200"
+          : variant === "warning"
+          ? "bg-yellow-200"
+          : "bg-green-200"
+      } rounded-3xl py-6 flex flex-col items-center justify-center gap-2 w-full `}
+    >
+      <div>{icon}</div>
+      <p
+        className={`text-lg font-bold text-center ${
+          variant === "error"
+            ? "text-red-800"
+            : variant === "warning"
+            ? "text-yellow-800"
+            : "text-green-800"
+        }`}
+      >
+        {text}
+      </p>
+    </div>
+  );
+};
+
+export default DestructibleAlert;

components/ExamModal.tsx

@@ -0,0 +1,91 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+
+interface ModalProps {
+  /** Control visibility */
+  open: boolean;
+  /** Callback for both explicit and implicit close actions */
+  onClose: () => void;
+  /** Optional heading */
+  title?: string;
+  children: React.ReactNode;
+  /** Center horizontally and vertically? (default true) */
+  center?: boolean;
+}
+
+export default function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  center = true,
+}: ModalProps) {
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+
+  // Open / close imperatively to keep <dialog> in sync with prop
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    if (!open && dialog.open) dialog.close();
+  }, [open]);
+
+  // Close on native <dialog> close event
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClose = () => onClose();
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [onClose]);
+
+  // ESC -> close (for browsers without built‑in <dialog> handling)
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (typeof window === "undefined") return null; // SSR guard
+
+  return createPortal(
+    <dialog
+      ref={dialogRef}
+      className={`fixed top-0 right-0 h-[110vh] z-50 w-[87vw]
+        ml-auto transform-none              /* 1 & 2 */
+        backdrop:bg-black/20 
+        transition-[opacity,transform] duration-300
+        ${
+          open
+            ? "opacity-100 translate-x-0 translate-y-0"
+            : "opacity-0 translate-x-4"
+        }
+        ${center ? "rounded-l-xl" : ""}
+       `}
+    >
+      {/* Card */}
+      <div className="bg-white rounded-xl overflow-hidden pb-10">
+        {title && (
+          <header className="flex items-center justify-between px-6 pt-10 pb-4 dark:border-zinc-700">
+            <h2 className="text-2xl font-semibold">{title}</h2>
+            <button
+              aria-label="Close"
+              onClick={onClose}
+              className="p-1 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-full"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </header>
+        )}
+
+        <section className="px-6 ">{children}</section>
+      </div>
+    </dialog>,
+    document.body
+  );
+}

components/FormField.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useId, InputHTMLAttributes } from "react";
+
+interface FormFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+  title: string;
+  value: string | number;
+  placeholder?: string;
+  handleChangeText: (value: string) => void;
+}
+
+const FormField: React.FC<FormFieldProps> = ({
+  title,
+  value,
+  placeholder,
+  handleChangeText,
+  type,
+  ...props
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const inputId = useId();
+
+  const isPasswordField =
+    type === "password" || title.toLowerCase().includes("password");
+
+  const inputType = isPasswordField
+    ? showPassword
+      ? "text"
+      : "password"
+    : type || "text";
+
+  return (
+    <div className="w-full">
+      <label
+        htmlFor={inputId}
+        className="block mb-2 text-[#666666] text-[18px] font-medium font-montserrat tracking-[-0.5px]"
+      >
+        {title}
+      </label>
+
+      <div className="h-16 px-4 bg-[#D2DFF0] rounded-3xl flex items-center justify-between">
+        <input
+          id={inputId}
+          type={inputType}
+          value={value}
+          placeholder={placeholder || `Enter ${title.toLowerCase()}`}
+          autoComplete={isPasswordField ? "current-password" : "on"}
+          onChange={(e) => handleChangeText(e.target.value)}
+          className="flex-1 bg-transparent outline-none border-none text-blue-950 text-[16px] font-inherit"
+          {...props}
+        />
+
+        {isPasswordField && (
+          <button
+            type="button"
+            onClick={() => setShowPassword((prev) => !prev)}
+            aria-pressed={showPassword}
+            aria-label={showPassword ? "Hide password" : "Show password"}
+            className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none font-montserrat font-medium text-[16px]"
+          >
+            {showPassword ? "Hide" : "Show"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FormField;

components/Header.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { ChevronLeft, Layers, RefreshCcw } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { useModal } from "@/context/ModalContext";
+import { useAuthStore } from "@/stores/authStore";
+import { useTimerStore } from "@/stores/timerStore";
+import { useExamStore } from "@/stores/examStore";
+import { BsPatchCheckFill } from "react-icons/bs";
+
+interface HeaderProps {
+  displayUser?: boolean;
+  displaySubject?: string;
+  displayTabTitle?: string;
+}
+
+const Header = ({
+  displayUser,
+  displaySubject,
+  displayTabTitle,
+}: HeaderProps) => {
+  const router = useRouter();
+  const { open } = useModal();
+  const { cancelExam } = useExamStore();
+  const { stopTimer, timeRemaining } = useTimerStore();
+  const { user } = useAuthStore();
+
+  const showExitDialog = () => {
+    const confirmed = window.confirm("Are you sure you want to quit the exam?");
+    if (confirmed) {
+      stopTimer();
+      cancelExam();
+      router.replace("/categories");
+    }
+  };
+
+  const handleBackClick = () => {
+    router.back();
+  };
+
+  // format time from context
+  const hours = Math.floor(timeRemaining / 3600);
+  const minutes = Math.floor((timeRemaining % 3600) / 60);
+  const seconds = timeRemaining % 60;
+
+  return (
+    <header className="bg-[#113768] h-[100px] w-full pt-7 px-6 flex items-center justify-between sticky top-0 z-50">
+      {displayUser && (
+        <div className="flex items-center gap-3">
+          <Avatar className="bg-gray-200 w-10 h-10">
+            <AvatarFallback className="flex items-center justify-center h-10 text-lg">
+              {user?.username ? (
+                user.username.charAt(0).toUpperCase()
+              ) : (
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
+              )}
+            </AvatarFallback>
+          </Avatar>
+          <span className="text-md font-bold text-white flex items-center gap-2">
+            Hello, {user?.username ? user.username.split(" ")[0] : "User"}{" "}
+            <BsPatchCheckFill size={20} color="white" />
+          </span>
+        </div>
+      )}
+
+      {displayTabTitle && (
+        <div className="flex justify-between items-center w-full">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={handleBackClick}
+              className="bg-none border-none p-1"
+            >
+              <ChevronLeft size={24} color="white" />
+            </button>
+            <span className="text-md font-bold text-white">
+              {displayTabTitle}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {displaySubject && (
+        <div className="flex items-center gap-3">
+          <span className="text-md font-bold text-white">{displaySubject}</span>
+        </div>
+      )}
+
+      {/* Exam timer header */}
+      {timeRemaining > 0 && (
+        <div className="flex justify-between w-full items-center">
+          <button
+            onClick={showExitDialog}
+            className="bg-none border-none cursor-pointer p-1 flex items-center justify-center"
+          >
+            <ChevronLeft size={30} color="white" />
+          </button>
+
+          <div className="w-40 h-14 bg-white flex justify-around items-center rounded-2xl ">
+            <div className="flex flex-col items-center w-full">
+              <span className="font-medium text-md text-[#082E5E]">
+                {String(hours).padStart(2, "0")}
+              </span>
+              <span className="font-medium text-[12px] text-[#082E5E]">
+                Hrs
+              </span>
+            </div>
+            <div className="flex flex-col items-center w-full">
+              <span className="font-medium text-md text-[#082E5E]">
+                {String(minutes).padStart(2, "0")}
+              </span>
+              <span className="font-medium text-[12px] text-[#082E5E]">
+                Mins
+              </span>
+            </div>
+            <div
+              className="flex flex-col items-center w-full"
+              style={{ borderRight: "none" }}
+            >
+              <span className="font-medium text-md text-[#082E5E]">
+                {String(seconds).padStart(2, "0")}
+              </span>
+              <span className="font-medium text-[12px] text-[#082E5E]">
+                Secs
+              </span>
+            </div>
+          </div>
+
+          <button
+            onClick={open}
+            className="bg-none border-none cursor-pointer p-1 flex items-center justify-center"
+          >
+            <Layers size={30} color="white" />
+          </button>
+        </div>
+      )}
+    </header>
+  );
+};
+
+export default Header;

components/ProfileManager.tsx

@@ -0,0 +1,207 @@
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { UserData } from "@/types/auth";
+
+interface ProfileManagerProps {
+  userData: UserData | undefined;
+  edit: boolean;
+  setUserData: React.Dispatch<React.SetStateAction<UserData | undefined>>;
+}
+
+export default function ProfileManager({
+  userData,
+  edit,
+  setUserData,
+}: ProfileManagerProps) {
+  if (!userData) return null;
+
+  const handleChange = (field: keyof UserData, value: string | number) => {
+    setUserData((prev) => (prev ? { ...prev, [field]: value } : prev));
+  };
+
+  return (
+    <div className="mx-auto">
+      <div className="space-y-4">
+        {/* Full Name */}
+        <h1 className="text-xl font-semibold tracking-tight">
+          Personal Information
+        </h1>
+        <div className="space-y-2">
+          <Label
+            htmlFor="full_name"
+            className="text-sm font-semibold text-gray-700"
+          >
+            Full Name
+          </Label>
+          <Input
+            id="full_name"
+            type="text"
+            value={userData.full_name}
+            onChange={(e) => handleChange("full_name", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label
+            htmlFor="username"
+            className="text-sm font-semibold text-gray-700"
+          >
+            Username
+          </Label>
+          <Input
+            id="username"
+            type="text"
+            value={userData.username}
+            onChange={(e) => handleChange("username", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
+          />
+        </div>
+
+        {/* SSC & HSC Rolls */}
+
+        {/* Email */}
+        <div className="space-y-2">
+          <Label
+            htmlFor="email"
+            className="text-sm font-semibold text-gray-700"
+          >
+            Email
+          </Label>
+          <Input
+            id="email"
+            type="email"
+            value={userData.email}
+            onChange={(e) => handleChange("email", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
+          />
+        </div>
+
+        {/* Phone */}
+        <div className="space-y-2">
+          <Label
+            htmlFor="phone_number"
+            className="text-sm font-semibold text-gray-700"
+          >
+            Phone
+          </Label>
+          <Input
+            id="phone_number"
+            type="tel"
+            value={userData.phone_number}
+            onChange={(e) => handleChange("phone_number", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
+          />
+        </div>
+        <h1 className="text-xl tracking-tight font-semibold">
+          Educational Background
+        </h1>
+        <div className="space-y-2">
+          <Label
+            htmlFor="preparation_unit"
+            className="text-sm font-semibold text-gray-700"
+          >
+            Unit
+          </Label>
+          <Input
+            id="preparation_unit"
+            type="text"
+            value={userData.preparation_unit}
+            onChange={(e) => handleChange("preparation_unit", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label
+            htmlFor="college"
+            className="text-sm font-semibold text-gray-700"
+          >
+            College
+          </Label>
+          <Input
+            id="college"
+            type="text"
+            value={userData.college}
+            onChange={(e) => handleChange("college", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
+          />
+        </div>
+        <div className="flex gap-4">
+          <div className="space-y-2 w-full">
+            <Label
+              htmlFor="ssc_roll"
+              className="text-sm font-semibold text-gray-700"
+            >
+              SSC Roll
+            </Label>
+            <Input
+              id="ssc_roll"
+              type="number"
+              value={userData.ssc_roll}
+              onChange={(e) => handleChange("ssc_roll", Number(e.target.value))}
+              className="bg-gray-50 py-6"
+              readOnly={!edit}
+            />
+          </div>
+
+          <div className="space-y-2 w-full">
+            <Label
+              htmlFor="ssc_board"
+              className="text-sm font-semibold text-gray-700"
+            >
+              SSC Board
+            </Label>
+            <Input
+              id="ssc_board"
+              type="text"
+              value={userData.ssc_board}
+              onChange={(e) => handleChange("ssc_board", e.target.value)}
+              className="bg-gray-50 py-6"
+              readOnly={!edit}
+            />
+          </div>
+        </div>
+        <div className="flex gap-4">
+          <div className="space-y-2 w-full">
+            <Label
+              htmlFor="hsc_roll"
+              className="text-sm font-semibold text-gray-700"
+            >
+              HSC Roll
+            </Label>
+            <Input
+              id="hsc_roll"
+              type="number"
+              value={userData.hsc_roll}
+              onChange={(e) => handleChange("hsc_roll", Number(e.target.value))}
+              className="bg-gray-50 py-6"
+              readOnly={!edit}
+            />
+          </div>
+
+          <div className="space-y-2 w-full">
+            <Label
+              htmlFor="hsc_board"
+              className="text-sm font-semibold text-gray-700"
+            >
+              HSC Board
+            </Label>
+            <Input
+              id="hsc_board"
+              type="text"
+              value={userData.hsc_board}
+              onChange={(e) => handleChange("hsc_board", e.target.value)}
+              className="bg-gray-50 py-6"
+              readOnly={!edit}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/QuestionItem.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import React from "react";
+import { Question, Answer } from "@/types/exam";
+import { Bookmark } from "lucide-react";
+
+interface QuestionItemProps {
+  question: Question;
+  index: number;
+  selectedAnswer: Answer;
+  onSelect: (answer: Answer) => void;
+  userAnswer?: Answer;
+  correctAnswer?: Answer;
+  showResults?: boolean;
+}
+
+const letters = ["A", "B", "C", "D"]; // extend if needed
+
+const QuestionItem: React.FC<QuestionItemProps> = ({
+  question,
+  index,
+  selectedAnswer,
+  onSelect,
+  userAnswer,
+  correctAnswer,
+  showResults = false,
+}) => {
+  return (
+    <div className="border border-blue-100 p-6 bg-slate-100 rounded-3xl mb-6">
+      <p className="text-lg font-semibold mb-3">
+        {index + 1}. {question.question}
+      </p>
+
+      {!showResults && (
+        <div className="w-full flex justify-between">
+          <div></div>
+          <Bookmark size={24} />
+        </div>
+      )}
+
+      <div className="flex flex-col gap-3">
+        {question.options.map((opt, optIdx) => {
+          const isSelected = selectedAnswer === optIdx;
+
+          // ✅ logic for coloring
+          let btnClasses = "bg-gray-100 text-gray-900 border-gray-400";
+          if (isSelected) {
+            btnClasses = "bg-blue-600 text-white border-blue-600";
+          }
+
+          if (showResults && correctAnswer !== undefined) {
+            if (userAnswer === optIdx && userAnswer !== correctAnswer) {
+              btnClasses = "bg-red-500 text-white border-red-600"; // wrong
+            }
+            if (correctAnswer === optIdx) {
+              btnClasses = "bg-green-500 text-white border-green-600"; // correct
+            }
+          }
+
+          return (
+            <div key={optIdx} className="flex items-center gap-3">
+              <button
+                onClick={() => {
+                  if (showResults) return; // disable selection in results mode
+                  onSelect(optIdx); // always a number
+                }}
+                className={`w-7 h-7 rounded-full border font-bold
+                  flex items-center justify-center
+                  ${btnClasses}
+                  transition-colors`}
+              >
+                {letters[optIdx]}
+              </button>
+              <span className="text-gray-900">{opt}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default QuestionItem;

components/SlidingGallery.tsx

@@ -0,0 +1,185 @@
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  UIEvent,
+} from "react";
+import { GalleryViews } from "@/types/gallery";
+
+interface SlidingGalleryProps {
+  views: GalleryViews[] | undefined;
+  className?: string;
+  showPagination?: boolean;
+  autoScroll?: boolean;
+  autoScrollInterval?: number;
+  onSlideChange?: (currentIndex: number) => void;
+  height?: string | number;
+}
+
+const SlidingGallery = ({
+  views,
+  className = "",
+  showPagination = true,
+  autoScroll = false,
+  autoScrollInterval = 5000,
+  onSlideChange = () => {},
+  height = "100vh",
+}: SlidingGalleryProps) => {
+  const [activeIdx, setActiveIdx] = useState<number>(0);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const galleryRef = useRef<HTMLDivElement | null>(null);
+  const autoScrollRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleScroll = (event: UIEvent<HTMLDivElement>) => {
+    handleUserInteraction();
+    const scrollLeft = event.currentTarget.scrollLeft;
+    const slideWidth = dimensions.width;
+    const index = Math.round(scrollLeft / slideWidth);
+
+    if (index !== activeIdx) {
+      setActiveIdx(index);
+      onSlideChange(index);
+    }
+  };
+
+  const goToSlide = useCallback(
+    (index: number) => {
+      if (scrollRef.current) {
+        scrollRef.current.scrollTo({
+          left: index * dimensions.width,
+          behavior: "smooth",
+        });
+      }
+    },
+    [dimensions.width]
+  );
+
+  const handleDotClick = (index: number) => {
+    handleUserInteraction();
+    goToSlide(index);
+    setActiveIdx(index);
+    onSlideChange(index);
+  };
+
+  // Auto-scroll functionality
+  useEffect(() => {
+    if (autoScroll && views && views.length > 1) {
+      autoScrollRef.current = setInterval(() => {
+        setActiveIdx((prevIdx) => {
+          const nextIdx = (prevIdx + 1) % views.length;
+          goToSlide(nextIdx);
+          return nextIdx;
+        });
+      }, autoScrollInterval);
+
+      return () => {
+        if (autoScrollRef.current) {
+          clearInterval(autoScrollRef.current);
+        }
+      };
+    }
+  }, [autoScroll, autoScrollInterval, views?.length, goToSlide, views]);
+
+  // Clear auto-scroll on user interaction
+  const handleUserInteraction = () => {
+    if (autoScrollRef.current) {
+      clearInterval(autoScrollRef.current);
+      autoScrollRef.current = null;
+    }
+  };
+
+  // Update dimensions
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (galleryRef.current) {
+        setDimensions({
+          width: galleryRef.current.clientWidth,
+          height: galleryRef.current.clientHeight,
+        });
+      }
+    };
+
+    updateDimensions();
+    window.addEventListener("resize", updateDimensions);
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
+
+  // Recalculate index when dimension changes
+  useEffect(() => {
+    if (scrollRef.current && dimensions.width > 0) {
+      const scrollLeft = scrollRef.current.scrollLeft;
+      const slideWidth = dimensions.width;
+      const index = Math.round(scrollLeft / slideWidth);
+      setActiveIdx(index);
+    }
+  }, [dimensions]);
+
+  if (!views || views.length === 0) {
+    return (
+      <div
+        className={`relative w-full h-screen overflow-hidden flex flex-col ${className}`}
+      >
+        <div className="flex-1 flex items-center justify-center text-slate-400 text-lg">
+          <p>No content to display</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`relative w-full h-screen overflow-hidden flex flex-col ${className}`}
+      ref={galleryRef}
+      style={{ height }}
+    >
+      <div
+        className="flex-1 flex overflow-x-auto"
+        ref={scrollRef}
+        onScroll={handleScroll}
+        style={{
+          width: "100%",
+          height: "100%",
+          overflowX: "scroll",
+          display: "flex",
+          scrollSnapType: "x mandatory",
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+        }}
+      >
+        {views.map((item) => (
+          <div
+            key={item.id}
+            className="min-w-full flex items-center justify-center px-2 box-border"
+            style={{
+              width: dimensions.width,
+              height: "100%",
+              flexShrink: 0,
+              scrollSnapAlign: "start",
+            }}
+          >
+            {item.content}
+          </div>
+        ))}
+      </div>
+
+      {showPagination && views.length > 1 && (
+        <div className="absolute bottom-[15px] left-1/2 -translate-x-1/2 flex gap-1.5 z-10">
+          {views.map((_, index) => (
+            <div
+              key={index}
+              className={`w-2 h-2 rounded-full transition-all duration-300 ease-in ${
+                activeIdx === index ? "bg-[#113768]" : "bg-[#b1d3ff]"
+              }`}
+              onClick={() => handleDotClick(index)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SlidingGallery;

components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

components/ui/input-otp.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center", className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-14 w-14 items-center justify-center border-y border-r text-lg font-bold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

context/ModalContext.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { createContext, useContext, useState } from "react";
+
+// Define the context type
+interface ModalContextType {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+// Create context with default values (no null)
+const ModalContext = createContext<ModalContextType>({
+  isOpen: false,
+  open: () => {},
+  close: () => {},
+  toggle: () => {},
+});
+
+export function ModalProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const toggle = () => setIsOpen((prev) => !prev);
+
+  const value: ModalContextType = {
+    isOpen,
+    open,
+    close,
+    toggle,
+  };
+
+  return (
+    <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
+  );
+}
+
+export function useModal(): ModalContextType {
+  return useContext(ModalContext);
+}

css/Header.module.css

@@ -0,0 +1,181 @@
+.header {
+    background-color: #113768;
+    height: 130px;
+    width: 100%;
+    padding-top: 30px;
+    padding-left: 30px;
+    padding-right: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  
+  .profile {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+  }
+  
+  .profileImg {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  
+  .text {
+    font-size: 20px ;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
+    color: #fff;
+  }
+  
+  .iconButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s;
+  }
+  
+  .iconButton:hover {
+    opacity: 0.8;
+  }
+  
+  .iconButton.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .examHeader {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+  }
+  
+  .timer {
+    width: 167px;
+    height: 55px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    border-radius: 10px;
+    padding: 0 10px;
+  }
+  
+  .timeUnit {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-right: 1px solid #000;
+    width: 100%;
+  }
+  
+  .timeValue {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    color: #082E5E;
+  }
+  
+  .timeLabel {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    color: #082E5E;
+  }
+  
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .header {
+      height: 100px;
+      padding-top: 20px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+    
+    .text {
+      font-size: 15px;
+    }
+    
+    .profile {
+      gap: 15px;
+    }
+    
+    .profileImg {
+      width: 35px;
+      height: 35px;
+    }
+    
+    .timer {
+      width: 140px;
+      height: 45px;
+    }
+    
+    .timeValue {
+      font-size: 16px;
+    }
+    
+    .timeLabel {
+      font-size: 12px;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .header {
+      height: 100px;
+      padding-top: 15px;
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+    
+    .text {
+      font-size: 17px;
+    }
+    
+    .profile {
+      gap: 10px;
+    }
+    
+    .profileImg {
+      width: 40px;
+      height: 40px;
+    }
+    
+    .timer {
+      width: 180px;
+      height: 60px;
+      padding: 0 5px;
+    }
+    
+    .timeValue {
+      font-size: 18px;
+    }
+    
+    .timeLabel {
+      font-size: 12px;
+    }
+    
+    .examHeader {
+      gap: 10px;
+    }
+  }
+  
+  /* Safe area considerations for mobile */
+  @media (max-width: 480px) {
+    .header {
+      padding-top: max(15px, env(safe-area-inset-top));
+    }
+  }

css/Home.module.css

@@ -0,0 +1,268 @@
+.container {
+    flex: 1;
+    min-height: 100vh;
+  }
+  
+  .scrollContainer {
+    overflow-y: auto;
+    padding-top: 40px;
+    height: calc(100vh - 80px); /* Adjust based on header height */
+  }
+  
+  .contentWrapper {
+    margin: 0 35px;
+    padding-bottom: 80px; /* Extra space at bottom for mobile */
+  }
+  
+  .mainContent {
+    padding-top: 25px;
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+  }
+  
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+  
+  .lastSection {
+    margin-bottom: 80px;
+  }
+  
+  .sectionHeader {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .sectionTitle {
+    font-size: 32px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
+    color: #113768;
+    margin: 0;
+  }
+  
+  .arrowButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s;
+  }
+  
+  .arrowButton:hover {
+    opacity: 0.7;
+  }
+  
+  .arrowButton:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  /* Categories Styles */
+  .categoriesContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    gap: 16px;
+    padding-top: 25px;
+  }
+  
+  .categoryRow {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 16px;
+  }
+  
+  .categoryButton {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #c5dbf8;
+    width: 48%;
+    height: 150px; /* Approximate scaled height */
+    border-radius: 25px;
+    background: white;
+    cursor: pointer;
+    transition: all 0.2s;
+    gap: 8px;
+
+  }
+  
+  .categoryButton:hover:not(:disabled) {
+    background-color: #f8fbff;
+    transform: translateY(-2px);
+  }
+  
+  .categoryButton.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .categoryButtonText {
+    font-size: 14px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    color: #113768;
+  }
+  
+  /* Leaderboard Styles */
+  .leaderboardWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  
+  .leaderboardContainer {
+    border: 1px solid #c5dbf8;
+    padding: 22px 15px;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    background: white;
+  }
+  
+  .topThreeHeader {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .topThreeTitle {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    font-size: 17px;
+  }
+  
+  .divider {
+    border-top: 0.5px solid #c5dbf8;
+  }
+  
+  .topThreeList {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  
+  .topThreeItem {
+    display: flex;
+    flex-direction: row;
+    border: 1px solid #c5dbf8;
+    border-radius: 10px;
+    padding: 6px 12px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .studentInfo {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    align-items: center;
+  }
+  
+  .rank {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+  }
+  
+  .avatar {
+    border-radius: 50%;
+  }
+  
+  .studentName {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+  }
+  
+  .points {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.4);
+  }
+  
+  /* Coming Soon Card */
+  .comingSoonCard {
+    border: 2px solid #c5dbf8;
+    width: 100%;
+    padding: 24px;
+    border-radius: 20px;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .comingSoonText {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    text-align: center;
+    margin: 0;
+  }
+  
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .contentWrapper {
+      margin: 0 20px;
+    }
+    
+    .sectionTitle {
+      font-size: 20px;
+    }
+    
+    .categoryButton {
+      height: 120px;
+    }
+    
+    .categoryButtonText {
+      font-size: 14px;
+    }
+    
+    .categoryRow {
+      gap: 12px;
+    }
+    
+    .comingSoonText {
+      font-size: 18px;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .contentWrapper {
+      margin: 0 15px;
+    }
+    
+    .sectionTitle {
+      font-size: 22px;
+    }
+    
+    .categoryButton {
+      height: 200px;
+    }
+    
+    .mainContent {
+      gap: 25px;
+    }
+    
+    .categoryRow {
+      flex-direction: row;
+    }
+    
+    .categoryButton {
+      width: 100%;
+    }
+  }

eslint.config.mjs

@@ -11,6 +11,15 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      // Disable the no-explicit-any rule
+      "@typescript-eslint/no-explicit-any": "off",
+
+      // Alternative: Make it a warning instead of error
+      // "@typescript-eslint/no-explicit-any": "warn",
+    },
+  },
 ];
 
 export default eslintConfig;

hooks/useNavGuard.ts

@@ -0,0 +1,41 @@
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useExamStore } from "@/stores/examStore";
+import { useTimerStore } from "@/stores/timerStore";
+
+export function useNavGuard(type: string) {
+  const { status, setStatus, cancelExam } = useExamStore();
+  const router = useRouter();
+  const { stopTimer } = useTimerStore();
+
+  // Guard page render: always redirect if status invalid
+  useEffect(() => {
+    if (status !== "in-progress") {
+      router.replace(`/categories/${type}s`);
+    }
+  }, [status, router, type]);
+
+  // Confirm before leaving page / tab close
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (status === "in-progress") {
+        e.preventDefault();
+        e.returnValue = ""; // shows native browser dialog
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [status]);
+
+  // Call this to quit exam manually
+  const showExitDialog = () => {
+    if (window.confirm("Are you sure you want to quit the exam?")) {
+      setStatus("finished");
+      stopTimer();
+      cancelExam();
+      router.replace(`/categories/${type}s`);
+    }
+  };
+
+  return { showExitDialog };
+}

lib/auth.ts

@@ -0,0 +1,80 @@
+import { LoginForm, RegisterForm } from "@/types/auth";
+
+export const API_URL = process.env.NEXT_PUBLIC_EXAMJAM_API_URL;
+
+// Cookie utility function
+const setCookie = (name: string, value: string | null, days: number = 7) => {
+  if (typeof document === "undefined") return;
+
+  if (value === null) {
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Lax;`; //SameSite=Strict; Secure in production
+  } else {
+    const expires = new Date();
+    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+    document.cookie = `${name}=${encodeURIComponent(
+      value
+    )}; expires=${expires.toUTCString()}; path=/; SameSite=Lax;`; //SameSite=Strict; Secure in production
+  }
+};
+
+export const getToken = async (): Promise<string | null> => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const match = document.cookie.match(/(?:^|;\s*)authToken=([^;]*)/);
+  return match ? decodeURIComponent(match[1]) : null;
+};
+
+type SetTokenFn = (token: string) => void;
+
+// Optional: Create a custom error type to carry extra data
+interface APIError extends Error {
+  response?: any;
+}
+
+export const login = async (
+  form: LoginForm,
+  setToken: SetTokenFn
+): Promise<void> => {
+  const response = await fetch(`${API_URL}/auth/login/`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(form),
+  });
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    throw new Error(data.message || "Login failed");
+  }
+
+  setCookie("authToken", data.token);
+  setToken(data.token);
+};
+
+export const register = async (
+  form: RegisterForm,
+  setToken: SetTokenFn
+): Promise<void> => {
+  const response = await fetch(`${API_URL}/auth/register/`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(form),
+  });
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    const error: APIError = new Error(data?.detail || "Registration failed");
+    error.response = data;
+    throw error;
+  }
+
+  setCookie("authToken", data.token);
+  setToken(data.token);
+};

lib/gallery-views.tsx

@@ -0,0 +1,130 @@
+// lib/gallery-views.tsx
+import Link from "next/link";
+import Image from "next/image";
+import { GalleryViews } from "@/types/gallery";
+import { ExamResult } from "@/types/exam";
+
+export const getResultViews = (examResults: ExamResult | null) => [
+  {
+    id: 1,
+    content: (
+      <div className="w-full">
+        <div className="bg-blue-50/60 border border-[#113678]/50 rounded-4xl h-[170px] flex flex-col items-center justify-center gap-4">
+          <div className="text-xl text-black">
+            <span className="font-bold">Accuracy</span> Rate:
+          </div>
+          <div className="flex gap-4">
+            <Image
+              src="/images/icons/accuracy.png"
+              alt="accuracy"
+              width={60}
+              height={60}
+            />
+            <h2 className="text-6xl font-bold text-[#113678]">
+              {examResults
+                ? (
+                    (examResults.correct_answers_count /
+                      examResults.user_questions.length) *
+                    100
+                  ).toFixed(1)
+                : "0"}
+              %
+            </h2>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: 2,
+    content: (
+      <div className="w-full">
+        <div className="bg-blue-50/60 border border-[#113678]/50 rounded-4xl h-[170px] flex flex-col items-center justify-center gap-3">
+          <div className="text-xl text-black">
+            <span className="font-bold">Error</span> Rate:
+          </div>
+          <div className="flex gap-4">
+            <Image
+              src="/images/icons/error.png"
+              alt="error"
+              width={60}
+              height={60}
+            />
+            <h2 className="text-6xl font-bold text-[#113678]">
+              {examResults
+                ? (
+                    ((examResults.user_questions.length -
+                      examResults.correct_answers_count) /
+                      examResults.user_questions.length) *
+                    100
+                  ).toFixed(1)
+                : "0"}
+              %
+            </h2>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: 3,
+    content: (
+      <div className="my-8 w-full">
+        <div className="bg-blue-50/60 border border-[#113678]/50 rounded-4xl h-[170px] flex flex-col items-center justify-center gap-4">
+          <div className="text-xl text-black">
+            <span className="font-bold">Attempt</span> Rate:
+          </div>
+          <div className="flex gap-4">
+            <Image
+              src="/images/icons/attempt.png"
+              alt="attempt"
+              width={60}
+              height={60}
+            />
+            <h2 className="text-6xl font-bold text-[#113678]">
+              {examResults
+                ? (
+                    (examResults.user_answers.length /
+                      examResults.user_questions.length) *
+                    100
+                  ).toFixed(1)
+                : "0"}
+              %
+            </h2>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+];
+
+export const getLinkedViews = (): GalleryViews[] => [
+  {
+    id: 1,
+    content: (
+      <Link
+        href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
+        className=" block"
+      >
+        <div className="w-full h-full p-6 flex  text-black  bg-blue-50 rounded-3xl  border-[0.5px] border-[#113768]/30">
+          <div className="">
+            <h3 className="text-2xl text-[#113768] font-black">
+              Meet, Share, and Learn!
+            </h3>
+            <p className="font-bold text-sm text-[#113768] ">
+              Join Facebook Community
+            </p>
+          </div>
+          <div className="flex justify-center items-center shrink-0">
+            <Image
+              src="/images/static/facebook-logo.png"
+              alt="Facebook Logo"
+              width={150}
+              height={150}
+            />
+          </div>
+        </div>
+      </Link>
+    ),
+  },
+];

lib/leaderboard.ts

@@ -0,0 +1,32 @@
+export interface BoardData {
+  id: string;
+  name: string;
+  points: number;
+}
+
+export const getTopThree = (boardData: BoardData[]) => {
+  if (!boardData || boardData.length === 0) return [];
+  return boardData
+    .slice()
+    .sort((a, b) => b.points - a.points)
+    .slice(0, 3)
+    .map((player, index) => ({
+      ...player,
+      rank: index + 1,
+      height: index === 0 ? 250 : index === 1 ? 200 : 170,
+    }));
+};
+
+export const getLeaderboard = (boardData: BoardData[]) => {
+  return boardData.slice().sort((a, b) => b.points - a.points);
+};
+
+export const getUserData = (boardData: BoardData[], name: string) => {
+  if (!boardData || !Array.isArray(boardData)) return [];
+  const sortedData = boardData
+    .filter((player) => player?.name && player?.points !== undefined)
+    .sort((a, b) => b.points - a.points);
+
+  const result = sortedData.find((player) => player.name === name);
+  return result ? [{ ...result, rank: sortedData.indexOf(result) + 1 }] : [];
+};

lib/utils.ts

@@ -1,6 +1,38 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
+
+export const getFromStorage = <T>(key: string): T | null => {
+  if (typeof window === "undefined") return null;
+
+  try {
+    const item = sessionStorage.getItem(key);
+    return item ? JSON.parse(item) : null;
+  } catch (error) {
+    console.error(`Error reading from sessionStorage (${key}):`, error);
+    return null;
+  }
+};
+
+export const setToStorage = <T>(key: string, value: T): void => {
+  if (typeof window === "undefined") return;
+
+  try {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  } catch (error) {
+    console.error(`Error writing to sessionStorage (${key}):`, error);
+  }
+};
+
+export const removeFromStorage = (key: string): void => {
+  if (typeof window === "undefined") return;
+
+  try {
+    sessionStorage.removeItem(key);
+  } catch (error) {
+    console.error(`Error removing from sessionStorage (${key}):`, error);
+  }
+};

next.config.ts

@@ -1,7 +1,5 @@
 import type { NextConfig } from "next";
 
-const nextConfig: NextConfig = {
-  /* config options here */
-};
+const nextConfig: NextConfig = {};
 
 export default nextConfig;

package.json

@@ -1,33 +1,45 @@
 {
-  "name": "nextjs-template-shadcn",
+  "name": "examjam-frontend",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
-    "build": "next build",
+    "build": "next build ",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "build:export": "npx next build && npm run export"
   },
   "dependencies": {
+    "@capacitor/android": "^7.4.2",
+    "@capacitor/core": "^7.4.2",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "capacitor-secure-storage-plugin": "^0.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.525.0",
-    "next": "15.3.4",
-    "postcss": "^8.5.6",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.523.0",
+    "next": "15.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tailwind-merge": "^3.3.1"
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^3.3.1",
+    "uuid": "^11.1.0",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
+    "@capacitor/cli": "^7.4.2",
     "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9",
-    "eslint-config-next": "15.3.4",
-    "tailwindcss": "^4.1.11",
-    "tw-animate-css": "^1.3.4",
+    "eslint-config-next": "15.3.2",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4",
     "typescript": "^5"
   }
 }

public/data/bookmark.json

@@ -0,0 +1,152 @@
+[
+  {
+    "id": 0,
+    "question": "What is the gravitational acceleration on Earth's surface?",
+    "options": {
+      "a": "8.9 m/s²",
+      "b": "9.8 m/s²",
+      "c": "10.5 m/s²",
+      "d": "11.2 m/s²"
+    }
+  },
+  {
+    "id": 1,
+    "question": "Which planet is known as the Red Planet?",
+    "options": {
+      "a": "Venus",
+      "b": "Jupiter",
+      "c": "Mars",
+      "d": "Saturn"
+    }
+  },
+  {
+    "id": 2,
+    "question": "What is the chemical symbol for gold?",
+    "options": {
+      "a": "Go",
+      "b": "Gd",
+      "c": "Au",
+      "d": "Ag"
+    }
+  },
+  {
+    "id": 3,
+    "question": "How many chambers does a human heart have?",
+    "options": {
+      "a": "2",
+      "b": "3",
+      "c": "4",
+      "d": "5"
+    }
+  },
+  {
+    "id": 4,
+    "question": "What is the speed of light in a vacuum?",
+    "options": {
+      "a": "299,792,458 m/s",
+      "b": "300,000,000 m/s",
+      "c": "298,000,000 m/s",
+      "d": "301,000,000 m/s"
+    }
+  },
+  {
+    "id": 5,
+    "question": "Which gas makes up approximately 78% of Earth's atmosphere?",
+    "options": {
+      "a": "Oxygen",
+      "b": "Carbon dioxide",
+      "c": "Nitrogen",
+      "d": "Argon"
+    }
+  },
+  {
+    "id": 6,
+    "question": "What is the hardest natural substance on Earth?",
+    "options": {
+      "a": "Quartz",
+      "b": "Diamond",
+      "c": "Graphite",
+      "d": "Titanium"
+    }
+  },
+  {
+    "id": 7,
+    "question": "How many bones are in an adult human body?",
+    "options": {
+      "a": "196",
+      "b": "206",
+      "c": "216",
+      "d": "226"
+    }
+  },
+  {
+    "id": 8,
+    "question": "What is the pH of pure water?",
+    "options": {
+      "a": "6",
+      "b": "7",
+      "c": "8",
+      "d": "9"
+    }
+  },
+  {
+    "id": 9,
+    "question": "Which organelle is known as the powerhouse of the cell?",
+    "options": {
+      "a": "Nucleus",
+      "b": "Ribosome",
+      "c": "Mitochondria",
+      "d": "Golgi apparatus"
+    }
+  },
+  {
+    "id": 10,
+    "question": "What is the most abundant element in the universe?",
+    "options": {
+      "a": "Helium",
+      "b": "Hydrogen",
+      "c": "Oxygen",
+      "d": "Carbon"
+    }
+  },
+  {
+    "id": 11,
+    "question": "At what temperature does water boil at sea level?",
+    "options": {
+      "a": "90°C",
+      "b": "95°C",
+      "c": "100°C",
+      "d": "105°C"
+    }
+  },
+  {
+    "id": 12,
+    "question": "How many chromosomes do humans have?",
+    "options": {
+      "a": "44",
+      "b": "46",
+      "c": "48",
+      "d": "50"
+    }
+  },
+  {
+    "id": 13,
+    "question": "What is the smallest unit of matter?",
+    "options": {
+      "a": "Molecule",
+      "b": "Atom",
+      "c": "Electron",
+      "d": "Proton"
+    }
+  },
+  {
+    "id": 14,
+    "question": "Which type of electromagnetic radiation has the longest wavelength?",
+    "options": {
+      "a": "X-rays",
+      "b": "Visible light",
+      "c": "Radio waves",
+      "d": "Gamma rays"
+    }
+  }
+]

public/data/questions.json

@@ -0,0 +1,175 @@
+{
+    "questions": [
+    {
+        "correct_answer": "Assets = Liabilities + Equity",
+        "difficulty": "Easy",
+        "explanation": "This is the basic accounting equation.",
+        "is_randomized": true,
+        "options": [
+            "Assets = Liabilities + Equity",
+            "Assets = Revenue - Expenses",
+            "Assets = Liabilities - Equity",
+            "Assets = Equity - Liabilities"
+        ],
+        "question": "What is the basic accounting equation?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "a1b2c3d4-e5f6-7890-abcd-1234567890ab",
+        "type": "Single"
+    },
+    {
+        "correct_answer": "Balance Sheet",
+        "difficulty": "Easy",
+        "explanation": "A balance sheet shows a company's assets, liabilities, and equity at a specific point in time.",
+        "is_randomized": true,
+        "options": [
+            "Balance Sheet",
+            "Income Statement",
+            "Cash Flow Statement",
+            "Statement of Retained Earnings"
+        ],
+        "question": "Which financial statement shows a company's assets, liabilities, and equity?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "b2c3d4e5-f678-9012-abcd-2345678901bc",
+        "type": "Single"
+    },
+    {
+        "correct_answer": "Revenue - Expenses",
+        "difficulty": "Easy",
+        "explanation": "Net income is calculated by subtracting expenses from revenue.",
+        "is_randomized": true,
+        "options": [
+            "Revenue - Expenses",
+            "Assets - Liabilities",
+            "Equity + Liabilities",
+            "Revenue + Expenses"
+        ],
+        "question": "How is net income calculated?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "c3d4e5f6-7890-1234-abcd-3456789012cd",
+        "type": "Single"
+    },
+    {
+        "correct_answer": "Accounts Receivable",
+        "difficulty": "Easy",
+        "explanation": "Accounts receivable represents money owed to a company by its customers.",
+        "is_randomized": true,
+        "options": [
+            "Accounts Receivable",
+            "Accounts Payable",
+            "Inventory",
+            "Prepaid Expenses"
+        ],
+        "question": "Which account represents money owed to a company by its customers?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "d4e5f678-9012-3456-abcd-4567890123de",
+        "type": "Single"
+    },
+    {
+        "correct_answer": "Depreciation",
+        "difficulty": "Medium",
+        "explanation": "Depreciation is the allocation of the cost of a tangible asset over its useful life.",
+        "is_randomized": true,
+        "options": [
+            "Depreciation",
+            "Amortization",
+            "Depletion",
+            "Appreciation"
+        ],
+        "question": "What is the allocation of the cost of a tangible asset over its useful life called?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "e5f67890-1234-5678-abcd-5678901234ef",
+        "type": "Single"
+    },
+    {
+        "correct_answer": "Accrual Basis",
+        "difficulty": "Medium",
+        "explanation": "Accrual basis accounting recognizes revenues and expenses when they are incurred, not when cash is exchanged.",
+        "is_randomized": true,
+        "options": [
+            "Accrual Basis",
+            "Cash Basis",
+            "Modified Cash Basis",
+            "Tax Basis"
+        ],
+        "question": "Which accounting method recognizes revenues and expenses when they are incurred, regardless of when cash is exchanged?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "f6789012-3456-7890-abcd-6789012345fa",
+        "type": "Single"
+    },
+    {
+        "correct_answer": "Liabilities",
+        "difficulty": "Easy",
+        "explanation": "Liabilities are obligations that a company owes to outside parties.",
+        "is_randomized": true,
+        "options": [
+            "Liabilities",
+            "Assets",
+            "Equity",
+            "Revenue"
+        ],
+        "question": "What are obligations that a company owes to outside parties called?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "a7890123-4567-8901-abcd-7890123456ab",
+        "type": "Single"
+    },
+    {
+        "correct_answer": "Double-entry",
+        "difficulty": "Medium",
+        "explanation": "Double-entry accounting means every transaction affects at least two accounts.",
+        "is_randomized": true,
+        "options": [
+            "Double-entry",
+            "Single-entry",
+            "Triple-entry",
+            "Quadruple-entry"
+        ],
+        "question": "What is the accounting system called where every transaction affects at least two accounts?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "b8901234-5678-9012-abcd-8901234567bc",
+        "type": "Single"
+    },
+    {
+        "correct_answer": "Owner's Equity",
+        "difficulty": "Easy",
+        "explanation": "Owner's equity represents the owner's claims to the assets of the business.",
+        "is_randomized": true,
+        "options": [
+            "Owner's Equity",
+            "Liabilities",
+            "Revenue",
+            "Expenses"
+        ],
+        "question": "What is the owner's claim to the assets of a business called?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "c9012345-6789-0123-abcd-9012345678cd",
+        "type": "Single"
+    },
+    {
+        "correct_answer": "Matching Principle",
+        "difficulty": "Medium",
+        "explanation": "The matching principle requires that expenses be matched with related revenues.",
+        "is_randomized": true,
+        "options": [
+            "Matching Principle",
+            "Revenue Recognition Principle",
+            "Cost Principle",
+            "Conservatism Principle"
+        ],
+        "question": "Which accounting principle requires that expenses be matched with related revenues?",
+        "source_type": "Mock",
+        "subject_id": "f1c1d54a-0b29-44e2-8f95-ecf9f9e6d8b7",
+        "topic_id": "d0123456-7890-1234-abcd-0123456789de",
+        "type": "Single"
+    }
+]
+
+}

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

stores/authStore.ts

@@ -0,0 +1,147 @@
+"use client";
+
+import { create } from "zustand";
+import { LoginForm, RegisterForm, UserData } from "@/types/auth";
+import { API_URL } from "@/lib/auth";
+
+// Cookie utilities
+const getCookie = (name: string): string | null => {
+  if (typeof document === "undefined") return null;
+
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) {
+    return parts.pop()?.split(";").shift() || null;
+  }
+  return null;
+};
+
+const setCookie = (
+  name: string,
+  value: string | null,
+  days: number = 7
+): void => {
+  if (typeof document === "undefined") return;
+
+  if (value === null) {
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Strict; Secure`;
+  } else {
+    const expires = new Date();
+    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+    document.cookie = `${name}=${value}; expires=${expires.toUTCString()}; path=/; SameSite=Strict; Secure`;
+  }
+};
+
+interface APIError extends Error {
+  response?: any;
+}
+
+interface AuthState {
+  token: string | null;
+  isLoading: boolean;
+  hydrated: boolean;
+  user: UserData | null;
+  error: string | null;
+
+  login: (form: LoginForm) => Promise<void>;
+  register: (form: RegisterForm) => Promise<void>;
+  setToken: (token: string | null) => void;
+  logout: () => void;
+  initializeAuth: () => Promise<void>;
+}
+
+export const useAuthStore = create<AuthState>((set, get) => ({
+  token: null,
+  isLoading: true,
+  hydrated: false,
+  error: null,
+  user: null,
+
+  setToken: (newToken) => {
+    set({ token: newToken });
+    setCookie("authToken", newToken);
+  },
+
+  login: async (form: LoginForm) => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = await fetch(`${API_URL}/auth/login/`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.message || "Login failed");
+      }
+
+      const token = data.token;
+      setCookie("authToken", token);
+      set({ token });
+
+      // Automatically fetch user info after login
+      const userRes = await fetch(`${API_URL}/me/profile/`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+
+      if (!userRes.ok) {
+        throw new Error("Failed to fetch user info after login");
+      }
+
+      const userData: UserData = await userRes.json();
+      set({ user: userData, isLoading: false });
+    } catch (err: any) {
+      console.error("Login error:", err);
+      set({
+        error: err?.message || "Login failed",
+        isLoading: false,
+      });
+      throw err;
+    }
+  },
+
+  register: async (form: RegisterForm) => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = await fetch(`${API_URL}/auth/register/`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        const error: APIError = new Error(
+          data?.detail || "Registration failed"
+        );
+        error.response = data;
+        throw error;
+      }
+
+      setCookie("authToken", data.token);
+      set({ token: data.token, isLoading: false });
+    } catch (err: any) {
+      set({
+        error: err?.message || "Registration failed",
+        isLoading: false,
+      });
+      throw err;
+    }
+  },
+
+  logout: () => {
+    set({ token: null, user: null });
+    setCookie("authToken", null);
+  },
+
+  initializeAuth: async () => {
+    const storedToken = getCookie("authToken");
+    if (storedToken) {
+      set({ token: storedToken });
+    }
+    set({ isLoading: false, hydrated: true });
+  },
+}));

stores/examStore.ts

@@ -0,0 +1,106 @@
+"use client";
+
+import { create } from "zustand";
+import { Test, Answer } from "@/types/exam";
+import { API_URL, getToken } from "@/lib/auth";
+import { ExamResult } from "@/types/exam";
+
+type ExamStatus = "not-started" | "in-progress" | "finished";
+
+interface ExamState {
+  test: Test | null;
+  answers: Answer[];
+  result: ExamResult | null;
+  status: ExamStatus;
+  setStatus: (status: ExamStatus) => void;
+
+  startExam: (testType: string, testId: string) => Promise<Test | null>;
+  setAnswer: (questionIndex: number, answer: Answer) => void;
+  submitExam: (testType: string) => Promise<ExamResult | null>;
+  cancelExam: () => void;
+  clearResult: () => void;
+}
+
+export const useExamStore = create<ExamState>((set, get) => ({
+  test: null,
+  answers: [],
+  result: null,
+  status: "not-started",
+  setStatus: (status) => set({ status }),
+
+  // start exam
+  startExam: async (testType: string, testId: string) => {
+    try {
+      const token = await getToken();
+      const res = await fetch(`${API_URL}/tests/${testType}/${testId}`, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!res.ok) throw new Error(`Failed to fetch test: ${res.status}`);
+      const data: Test = await res.json();
+
+      set({
+        test: data,
+        answers: Array(data.questions.length).fill(null),
+        result: null, // clear old result
+      });
+
+      return data;
+    } catch (err) {
+      console.error("startExam error:", err);
+      return null;
+    }
+  },
+
+  // set an answer
+  setAnswer: (questionIndex: number, answer: Answer) => {
+    set((state) => {
+      const updated = [...state.answers];
+      updated[questionIndex] = answer;
+      return { answers: updated };
+    });
+  },
+
+  // submit exam
+  submitExam: async (testType: string) => {
+    const { test, answers } = get();
+    if (!test) throw new Error("No test to submit");
+
+    const token = await getToken();
+
+    const { test_id, attempt_id } = test.metadata;
+    const res = await fetch(
+      `${API_URL}/tests/${testType}/${test_id}/${attempt_id}`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ answers }),
+      }
+    );
+
+    if (!res.ok) throw new Error("Failed to submit exam");
+
+    const result: ExamResult = await res.json();
+
+    // save result only
+    set({ result });
+
+    return result;
+  },
+
+  // cancel exam
+  cancelExam: () => {
+    set({ test: null, answers: [], result: null });
+  },
+
+  // clear result manually (e.g., when leaving results page)
+  clearResult: () => {
+    set({ result: null });
+  },
+}));

stores/timerStore.ts

@@ -0,0 +1,48 @@
+"use client";
+
+import { create } from "zustand";
+
+interface TimerState {
+  timeRemaining: number;
+  timerRef: NodeJS.Timeout | null;
+
+  resetTimer: (duration: number, onComplete?: () => void) => void;
+  stopTimer: () => void;
+  setInitialTime: (duration: number) => void;
+}
+
+export const useTimerStore = create<TimerState>((set, get) => ({
+  timeRemaining: 0,
+  timerRef: null,
+
+  resetTimer: (duration, onComplete) => {
+    const { timerRef } = get();
+
+    if (timerRef) clearInterval(timerRef);
+
+    const newRef = setInterval(() => {
+      set((state) => {
+        if (state.timeRemaining <= 1) {
+          clearInterval(newRef);
+          if (onComplete) onComplete(); // ✅ call callback when timer ends
+          return { timeRemaining: 0, timerRef: null };
+        }
+        return { timeRemaining: state.timeRemaining - 1 };
+      });
+    }, 1000);
+
+    set({ timeRemaining: duration, timerRef: newRef });
+  },
+
+  stopTimer: () => {
+    const { timerRef } = get();
+    if (timerRef) clearInterval(timerRef);
+    set({ timeRemaining: 0, timerRef: null });
+  },
+
+  setInitialTime: (duration) => {
+    const { timerRef } = get();
+    if (timerRef) clearInterval(timerRef);
+    set({ timeRemaining: duration, timerRef: null });
+  },
+}));

types/auth.d.ts

@@ -0,0 +1,33 @@
+export interface UserData {
+  user_id: string;
+  username: string;
+  full_name: string;
+  email: string;
+  is_verified: boolean;
+  phone_number: string;
+  ssc_roll: number;
+  ssc_board: string;
+  hsc_roll: number;
+  hsc_board: string;
+  college: string;
+  preparation_unit: "Science" | "Humanities" | "Business" | string;
+}
+
+export interface RegisterForm {
+  full_name: string;
+  username: string;
+  email: string;
+  password: string;
+  phone_number: string;
+  ssc_roll: number;
+  ssc_board: string;
+  hsc_roll: number;
+  hsc_board: string;
+  college: string;
+  preparation_unit: "Science" | "Humanities" | "Business" | string;
+}
+
+export interface LoginForm {
+  identifier: string;
+  password: string;
+}

types/exam.d.ts

@@ -0,0 +1,43 @@
+export interface Metadata {
+  attempt_id: string;
+  test_id: string;
+  type: string;
+  total_possible_score: number;
+  deduction?: string;
+  num_questions: number;
+  name: string;
+  start_time: string; // keep ISO string for consistency
+  time_limit_minutes?: number;
+}
+
+export type Question = {
+  question_id: string;
+  question: string;
+  options: string[];
+  type: "Single" | "Multiple";
+};
+
+export interface Test {
+  metadata: Metadata;
+  questions: Question[];
+}
+
+export type Answer = number | null;
+export type AnswersMap = Record<string, Answer>;
+
+export interface ExamResult {
+  user_id: string;
+  test_id: string;
+  subject_id: string;
+  topic_id: string;
+  test_type: string;
+  attempt_id: string;
+  start_time: string;
+  end_time: string;
+  user_questions: Question[];
+  user_answers: (number | null)[];
+  correct_answers: number[];
+  correct_answers_count: number;
+  wrong_answers_count: number;
+  skipped_questions_count: number;
+}

types/gallery.d.ts

@@ -0,0 +1,4 @@
+export interface GalleryViews {
+  id: number;
+  content: React.JSX.Element;
+}