diff --git a/README.md b/README.md
index fc57b13..50b5419 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 <h2 align="center"> Papers </h2>
 <br/>
 
+
 > <p>Prepare to excel in your CATs and FATs with CodeChef-VIT's dedicated repository of past exam papers. Access key resources to review concepts, tackle challenging questions, and familiarize yourself with exam patterns. Boost your confidence, sharpen your strategy, and get ready to ace your exams!</p>
 
 ## 🌐 Deploy
@@ -17,7 +18,6 @@
 - MongoDB & Mongoose : Database and object data modeling (ODM) for Node.js.
 - Cloudinary : Media storage and optimization service.
 - Shadcn : Collection of pre-built components using Radix UI and Tailwind CSS.
-
 ## 💡 Features:
 
 - Access a vast collection of past CAT and FAT papers
diff --git a/ongoing-papers.ts b/ongoing-papers.ts
deleted file mode 100644
index 78fa73f..0000000
--- a/ongoing-papers.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { type IUpcomingPaper } from "@/interface";
-
-const papers: IUpcomingPaper[] = [
-  {
-    _id: "6708fd8002a75017a4f08759",
-    subject: "Discrete Mathematics and Graph Theory [BMAT205L]",
-    slots: ["A2", "B2"],
-  },
-  {
-    _id: "670980523ec3fdad83b2d211",
-    subject: "Compiler Design [BCSE307L]",
-    slots: ["C1", "D1"],
-  },
-  {
-    _id: "670a105e6272bcf9da4e2362",
-
-    final_url:
-      "https://res.cloudinary.com/dtorpaj1c/image/upload/v1728712773/papers/ifkrnjgwdudtev9rxpki.pdf",
-    thumbnail_url:
-      "https://res.cloudinary.com/dtorpaj1c/image/upload/w_400,h_400,c_fill/v1728712773/papers/ifkrnjgwdudtev9rxpki.jpg",
-    subject: "Complex Variables and Linear Algebra [BMAT201L]",
-    slots: ["A1", "B1"],
-    year: "2023",
-    exam: "CAT-2",
-    semester: "Fall Semester",
-    campus: "Vellore",
-  },
-  {
-    _id: "67097e7b3ec3fdad83b2d205",
-    final_url:
-      "https://res.cloudinary.com/dtorpaj1c/image/upload/v1728675439/papers/pyyqotz1mzuh2wmq1k9s.pdf",
-    thumbnail_url:
-      "https://res.cloudinary.com/dtorpaj1c/image/upload/w_400,h_400,c_fill/v1728675439/papers/pyyqotz1mzuh2wmq1k9s.jpg",
-    subject: "Computer Networks [BCSE308L]",
-    slots: ["C2", "D2"],
-    year: "2023",
-    exam: "CAT-2",
-    semester: "Fall Semester",
-    campus: "Vellore",
-  },
-];
-
-export default papers;
diff --git a/src/app/api/related-subject/route.ts b/src/app/api/related-subject/route.ts
new file mode 100644
index 0000000..1640f9e
--- /dev/null
+++ b/src/app/api/related-subject/route.ts
@@ -0,0 +1,41 @@
+import { NextResponse, type NextRequest } from "next/server";
+import { connectToDatabase } from "@/lib/mongoose";
+import { IRelatedSubject } from "@/interface";
+import RelatedSubject from "@/db/relatedSubjects";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(req: NextRequest) {
+  try {
+    await connectToDatabase();
+    const url = req.nextUrl.searchParams;
+    const subject = url.get("subject");
+    const escapeRegExp = (text: string) => {
+      return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    };
+    const escapedSubject = escapeRegExp(subject ?? "");
+
+    if (!subject) {
+      return NextResponse.json(
+        { message: "Subject query parameter is required" },
+        { status: 400 },
+      );
+    }
+    const subjects: IRelatedSubject[] = await RelatedSubject.find({
+      subject: { $regex: new RegExp(`${escapedSubject}`, "i") },
+    });
+    console.log("realted", subjects);
+
+    return NextResponse.json(
+      {
+        related_subjects: subjects[0]?.related_subjects
+      },
+      { status: 200 },
+    );
+  } catch (error) {
+    return NextResponse.json(
+      { message: "Failed to fetch related subject", error },
+      { status: 500 },
+    );
+  }
+}
diff --git a/src/app/api/upload/route.ts b/src/app/api/upload/route.ts
index aee166c..571bbb9 100644
--- a/src/app/api/upload/route.ts
+++ b/src/app/api/upload/route.ts
@@ -181,5 +181,7 @@ async function CreatePDF(orderedFiles: File[]) {
   }
 
   const mergedPdfBytes = await pdfDoc.save();
-  return mergedPdfBytes;
+  const ab = new ArrayBuffer(mergedPdfBytes.byteLength);
+  new Uint8Array(ab).set(mergedPdfBytes);
+  return ab;
 }
diff --git a/src/app/api/user-papers/route.ts b/src/app/api/user-papers/route.ts
index cc92e18..9f1ba6b 100644
--- a/src/app/api/user-papers/route.ts
+++ b/src/app/api/user-papers/route.ts
@@ -1,14 +1,10 @@
 import { NextResponse } from "next/server";
 import { connectToDatabase } from "@/lib/mongoose";
 import Paper from "@/db/papers";
-import { StoredSubjects } from "@/interface";
+import { StoredSubjects, TransformedPaper } from "@/interface";
 
 export const dynamic = "force-dynamic";
 
-interface TransformedPaper {
-  subject: string;
-  slots: string[];
-}
 
 export async function POST(req: Request) {
   try {
diff --git a/src/app/request/page.tsx b/src/app/request/page.tsx
index 0efe95d..f215103 100644
--- a/src/app/request/page.tsx
+++ b/src/app/request/page.tsx
@@ -1,5 +1,269 @@
-import PapersPage from "@/components/screens/PapersPage";
+"use client";
 
-export default function RequestPage() {
-  return <PapersPage />;
+import { useEffect, useState, useRef, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { exams, slots, years } from "@/components/select_options";
+import { Input } from "@/components/ui/input";
+import axios from "axios";
+import Fuse from "fuse.js";
+import { type IUpcomingPaper } from "@/interface";
+import { Skeleton } from "../../components/ui/skeleton";
+import UpcomingPaper from "../../components/UpcomingPaper";
+import toast from "react-hot-toast";
+import { Search } from "lucide-react";
+import SkeletonPaperCard from "@/components/SkeletonPaperCard";
+
+type Course = {
+  name?: string | null;
+  courseName?: string | null;
+  title?: string | null;
+};
+
+export default function PaperRequest() {
+  const [subjects, setSubjects] = useState<string[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [selectedSubject, setSelectedSubject] = useState<string | null>(null);
+  const [selectedExam, setSelectedExam] = useState<string | null>(null);
+  const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
+  const [selectedYear, setSelectedYear] = useState<string | null>(null);
+  const suggestionsRef = useRef<HTMLUListElement | null>(null);
+  const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchSubjects() {
+      try {
+        const response = await axios.get<Course[]>(`/api/course-list`);
+        const courses: Course[] = response.data;
+        const names = courses
+          .map((course) => course.name ?? course.courseName ?? course.title)
+          .filter(Boolean) as string[];
+
+        setSubjects(names);
+      } catch (err) {
+        console.error("Error fetching subjects:", err);
+      }
+    }
+    void fetchSubjects();
+  }, []);
+
+  useEffect(() => {
+    async function fetchPapers() {
+      try {
+        setIsLoading(true);
+        const response = await axios.get<IUpcomingPaper[]>(
+          "/api/upcoming-papers",
+        );
+
+        const randomPapers = [...response.data]
+          .sort(() => Math.random() - 0.5)
+          .slice(0, 4);
+
+        setDisplayPapers(randomPapers);
+      } catch (error) {
+        console.error("Failed to fetch papers:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    void fetchPapers();
+  }, []);
+
+  const fuse = useMemo(
+    () => new Fuse(subjects, { includeScore: true, threshold: 0.3 }),
+    [subjects],
+  );
+
+  useEffect(() => {
+    if (!searchText.trim()) {
+      setSuggestions([]);
+      return;
+    }
+
+    if (selectedSubject && searchText === selectedSubject) {
+      setSuggestions([]);
+      return;
+    }
+
+    const results = fuse.search(searchText);
+    setSuggestions(results.map((r) => r.item).slice(0, 10));
+  }, [searchText, fuse, selectedSubject]);
+
+  const handleSelectSubject = (subject: string) => {
+    setSelectedSubject(subject);
+    setSearchText(subject);
+    setSuggestions([]);
+    setSelectedExam(null);
+    setSelectedSlot(null);
+    setSelectedYear(null);
+  };
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        suggestionsRef.current &&
+        !suggestionsRef.current.contains(event.target as Node)
+      ) {
+        setSuggestions([]);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleSubmit = async () => {
+    if (!selectedSubject || !selectedExam || !selectedSlot || !selectedYear) {
+      toast.error("Please fill all fields before submitting.");
+      return;
+    }
+
+    try {
+      await toast.promise(
+        axios.post("/api/request", {
+          subject: selectedSubject,
+          exam: selectedExam,
+          slot: selectedSlot,
+          year: selectedYear,
+        }),
+        {
+          loading: "Submitting your request...",
+          success: "Your paper request was submitted successfully",
+          error: "Failed to submit your request. Please try again later.",
+        }
+      );
+
+      setSearchText("");
+      setSelectedSubject(null);
+      setSelectedExam(null);
+      setSelectedSlot(null);
+      setSelectedYear(null);
+    } catch (error) {
+      console.error("Error submitting request:", error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#F3F5FF] px-6 py-12 text-black dark:bg-[#070114] dark:text-white">
+      <main>
+        <div className="mx-auto mb-16 max-w-4xl text-center">
+          <h2 className="mb-12 font-vipnabd text-3xl font-extrabold md:text-4xl">
+            Specific Paper Request
+          </h2>
+
+          <div className="relative mx-auto mb-8 max-w-xl font-play">
+            <Input
+              type="text"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              placeholder="Search by subject..."
+              className={`text-md rounded-lg bg-[#B2B8FF] px-4 py-6 pr-10 font-play tracking-wider text-black shadow-sm ring-0 placeholder:text-black focus:outline-none focus:ring-0 dark:bg-[#7480FF66] dark:text-white placeholder:dark:text-white ${suggestions.length > 0 ? "rounded-b-none" : ""}`}
+            />
+            <button
+              type="button"
+              className="absolute inset-y-0 right-0 flex items-center pr-3"
+            >
+              <Search className="h-5 w-5 text-black dark:text-white" />{" "}
+            </button>
+            {suggestions.length > 0 && (
+              <ul
+                ref={suggestionsRef}
+                className="absolute z-20 max-h-[250px] w-full max-w-xl overflow-y-auto rounded-md rounded-t-none border border-t-0 bg-white text-center shadow-lg dark:bg-[#303771]"
+              >
+                {suggestions.map((s, idx) => (
+                  <li
+                    key={idx}
+                    onClick={() => handleSelectSubject(s)}
+                    className="cursor-pointer truncate p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
+                  >
+                    {s}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          <div className="mb-8 flex justify-center gap-4">
+            <Select
+              onValueChange={setSelectedExam}
+              disabled={!selectedSubject}
+              value={selectedExam ?? undefined}
+            >
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Exam" />
+              </SelectTrigger>
+              <SelectContent>
+                {exams.map((exam) => (
+                  <SelectItem key={exam} value={exam}>
+                    {exam}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              onValueChange={setSelectedSlot}
+              disabled={!selectedSubject}
+              value={selectedSlot ?? undefined}
+            >
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Slot" />
+              </SelectTrigger>
+              <SelectContent>
+                {slots.map((slot) => (
+                  <SelectItem key={slot} value={slot}>
+                    {slot}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Select
+              onValueChange={setSelectedYear}
+              disabled={!selectedSubject}
+              value={selectedYear ?? undefined}
+            >
+              <SelectTrigger className="w-32">
+                <SelectValue placeholder="Year" />
+              </SelectTrigger>
+              <SelectContent>
+                {[...years]
+                  .sort((a, b) => Number(b) - Number(a))
+                  .map((year) => (
+                    <SelectItem key={year} value={year}>
+                      {year}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Button
+            className="rounded-lg bg-[#4A55FF] px-8 py-3 text-base text-white hover:bg-[#3A44CC] dark:bg-[#9EA8FF] dark:text-black dark:hover:bg-[#7D86E5]"
+            onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {isLoading ? (
+            <SkeletonPaperCard length={4} />
+          ) : (
+            displayPapers.map((paper, subIndex) => (
+              <div key={subIndex} className="h-full">
+                <UpcomingPaper subject={paper.subject} slots={paper.slots} />
+              </div>
+            ))
+          )}
+        </div>
+      </main>
+    </div>
+  );
 }
diff --git a/src/app/upload/page.tsx b/src/app/upload/page.tsx
index 5d88ddb..7ccfae6 100644
--- a/src/app/upload/page.tsx
+++ b/src/app/upload/page.tsx
@@ -140,9 +140,7 @@ const Page = () => {
       await toast.promise(
         async () => {
           try {
-            console.log("this is happening now");
             await axios.post<APIResponse>("/api/upload", formData);
-            console.log("this is happening after now");
             return { message: "Papers uploaded successfully!" };
           } catch (error) {
             if (error instanceof AxiosError && error.response?.data) {
diff --git a/src/components/CatalogueContent.tsx b/src/components/CatalogueContent.tsx
index b548b37..8891ca7 100644
--- a/src/components/CatalogueContent.tsx
+++ b/src/components/CatalogueContent.tsx
@@ -4,7 +4,7 @@ import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import axios, { type AxiosError } from "axios";
 import { Button } from "@/components/ui/button";
-import { type IPaper, type Filters } from "@/interface";
+import { type IPaper, type Filters, IRelatedSubject, StoredSubjects } from "@/interface";
 import Card from "./Card";
 import { useRouter } from "next/navigation";
 import Loader from "./ui/loader";
@@ -13,8 +13,8 @@ import Error from "./Error";
 import { Filter } from "lucide-react";
 import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
 import { Pin } from "lucide-react";
-import { StoredSubjects } from "@/interface";
 import { getSecureUrl, generateFileName, downloadFile } from "@/util/download";
+import Link from "next/link";
 
 const CatalogueContent = () => {
   const router = useRouter();
@@ -39,6 +39,29 @@ const CatalogueContent = () => {
   const [filtersPulled, setFiltersPulled] = useState<boolean>(false);
   const [appliedFilters, setAppliedFilters] = useState<boolean>(false);
   const [pinned, setPinned] = useState<boolean>(false);
+  const [relatedSubjects, setRelatedSubjects] = useState<string[]>([]);
+  // Fetch related subjects when subject changes
+  useEffect(() => {
+    if (!subject) return;
+    const fetchRelatedSubjects = async () => {
+      try {
+        const res = await axios.get<{related_subjects: string []}>("/api/related-subject", {
+          params: { subject },
+        });
+        console.log(res.data)
+        const data = res.data.related_subjects;
+        console.log("data"  , data[0], data[1]);
+        if (data && data.length > 0) {
+          setRelatedSubjects(data);
+        } else {
+          setRelatedSubjects([]);
+        }
+      } catch (e) {
+        setRelatedSubjects([]);
+      }
+    };
+    void fetchRelatedSubjects();
+  }, [subject]);
 
   // Set initial state from searchParams on client-side mount
   useEffect(() => {
@@ -317,22 +340,38 @@ const CatalogueContent = () => {
           </SheetContent>
         </Sheet>
 
-        <div className="flex items-center gap-2 p-7">
-          <div>
-            <p className="text-s font-semibold text-white/80">
-              {subject?.split("[")[1]?.replace("]", "")}
-            </p>
-            <h2 className="text-2xl font-extrabold text-white md:text-3xl">
-              {subject?.split(" [")[0]}
-            </h2>
-          </div>
-          <div className="mt-7">
-            <button onClick={handlePinToggle}>
-              <Pin
-                className={`h-7 w-7 ${pinned ? "fill-[#A78BFA]" : ""} stroke-white`}
-              />
-            </button>
+        <div className="p-7">
+          <div className="flex items-center gap-2">
+            <div>
+              <p className="text-s font-semibold text-gray-700 dark:text-white/80">
+                {subject?.split("[")[1]?.replace("]", "")}
+              </p>
+              <h2 className="text-2xl font-extrabold text-gray-700 dark:text-white md:text-3xl">
+                {subject?.split(" [")[0]}
+              </h2>
+            </div>
+            <div className="mt-7">
+              <button onClick={handlePinToggle}>
+                <Pin
+                  className={`h-7 w-7 ${pinned ? "fill-[#A78BFA]" : ""} stroke-gray-700 dark:stroke-white`}
+                />
+              </button>
+            </div>
           </div>
+          {relatedSubjects.length > 0 && (
+            <div className="mt-3 flex flex-wrap items-center gap-2">
+              <span className="text-sm font-medium text-gray-500 dark:text-gray-300 mr-2">Related subjects:</span>
+              {relatedSubjects.map((sub) => (
+                <Link
+                  key={sub}
+                  href={`/catalogue?subject=${encodeURIComponent(sub)}`}
+                  className="rounded-full bg-violet-100 px-3 py-1 text-sm font-semibold text-violet-700 transition-colors hover:bg-violet-200 dark:bg-violet-900 dark:text-violet-200 dark:hover:bg-violet-800"
+                >
+                  {sub}
+                </Link>
+              ))}
+            </div>
+          )}
         </div>
 
         {loading ? (
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5bc0c5a..587ad11 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -96,17 +96,17 @@ export default function Footer() {
         {/* Events */}
         <div className="flex w-full flex-col gap-2 text-black dark:text-white sm:w-[45%] lg:w-[15%]">
           <h3 className="font-jost text-xl font-semibold">Events</h3>
-          <Link href="https://devsoc25.codechefvit.com">DevSoc</Link>
-          <Link href="https://gravitas.codechefvit.com">CookOff</Link>
-          <Link href="https://gravitas.codechefvit.com">Clueminati</Link>
+          <Link href="https://devsoc25.codechefvit.com" target="_blank">DevSoc</Link>
+          <Link href="https://gravitas.codechefvit.com" target="_blank">CookOff</Link>
+          <Link href="https://gravitas.codechefvit.com" target="_blank">Clueminati</Link>
         </div>
 
         {/* Projects */}
         <div className="flex w-full flex-col gap-2 text-black dark:text-white sm:w-[45%] lg:w-[20%]">
           <h3 className="font-jost text-xl font-semibold">Our Projects</h3>
-          <Link href="https://papers.codechefvit.com">Papers</Link>
-          <Link href="https://contactify.codechefvit.com">Contactify</Link>
-          <Link href="https://ffcs.codechefvit.com">FFCS-inator</Link>
+          <Link href="https://papers.codechefvit.com" target="_blank">Papers</Link>
+          <Link href="https://contactify.codechefvit.com" target="_blank">Contactify</Link>
+          <Link href="https://ffcs.codechefvit.com" target="_blank">FFCS-inator</Link>
         </div>
 
         {/* Suggestions */}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 22a54c7..6ce6598 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -40,14 +40,14 @@ function Navbar() {
     <div className="sticky top-0 z-10 w-full bg-[#B2B8FF] px-4 py-4 dark:bg-[#130E1F] md:px-8 md:py-5">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
-          <a href="https://www.codechefvit.com/">
+            <Link href="https://www.codechefvit.com/" target="_blank">
             <Image
               src={ccLogo as HTMLImageElement}
               alt="codechef-logo"
               height={60}
               width={60}
             />
-          </a>
+          </Link>
 
           <Link
             href="/"
@@ -58,14 +58,14 @@ function Navbar() {
 
           <div className="mt-3 hidden md:flex">
             <Link href="/pinned">
-              <div className="ml-2 flex items-center gap-2 rounded-full border border-[#3A3745] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#1A1823]">
+              <div className="ml-2 flex items-center gap-2 rounded-full border bg-[#e8e9ff] dark:bg-black border-[#3A3745] px-4 py-2 text-sm font-semibold dark:text-white transition hover:bg-slate-50 text-gray-700 dark:hover:bg-[#1A1823]">
                 <Pin className="h-4 w-4" />
                 Pinned Subjects
               </div>
             </Link>
             <div className="ml-2 hidden md:flex">
               <Link href="/request">
-                <div className="ml-2 flex items-center gap-2 rounded-full border border-[#3A3745] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#1A1823]">
+                <div className="ml-2 flex items-center gap-2 rounded-full border bg-[#e8e9ff] dark:bg-black border-[#3A3745] px-4 py-2 text-sm font-semibold dark:text-white transition hover:bg-slate-50 text-gray-700 dark:hover:bg-[#1A1823]">
                   <ArrowUpRight className="h-4 w-4" />
                   Paper Request
                 </div>
@@ -86,7 +86,7 @@ function Navbar() {
           </div>
 
           <Link href={pathname === "/upload" ? "/" : "/upload"}>
-            <div className="flex items-center gap-2 rounded-full border border-[#3A3745] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#1A1823]">
+            <div className="flex items-center gap-2 rounded-full border bg-[#e8e9ff] dark:bg-black border-[#3A3745] px-4 py-2 text-sm font-semibold dark:text-white transition hover:bg-slate-50 text-gray-700 dark:hover:bg-[#1A1823]">
               <ArrowDownLeftIcon className="h-4 w-4 rotate-90" />
               <span>
                 {pathname === "/upload" ? "Search Papers" : "Upload Papers"}
diff --git a/src/components/PapersCarousel.tsx b/src/components/PapersCarousel.tsx
index 38a73e5..1c2a4ad 100644
--- a/src/components/PapersCarousel.tsx
+++ b/src/components/PapersCarousel.tsx
@@ -14,6 +14,7 @@ import {
 import Autoplay from "embla-carousel-autoplay";
 import { chunkArray } from "@/util/utils";
 import { Skeleton } from "@/components/ui/skeleton";
+import SkeletonPaperCard from "@/components/SkeletonPaperCard";
 
 function PapersCarousel() {
   const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
@@ -78,23 +79,7 @@ function PapersCarousel() {
                 chunkSize === 4 ? "grid-cols-2 grid-rows-2" : "grid-cols-4"
               } gap-4 lg:auto-rows-fr`}
             >
-              {Array.from({ length: chunkSize }).map((_, idx) => (
-                <div
-                  key={idx}
-                  className="cursor-pointer rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] text-black shadow-lg transition duration-150 ease-in-out hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] dark:text-white hover:dark:bg-[#262635]"
-                >
-                  <div className="border-b-2 border-[#453D60] p-2">
-                    <Skeleton className="h-6 w-24 rounded-md" />
-                  </div>
-                  <div className="flex flex-col justify-between p-4">
-                    <Skeleton className="mb-4 h-6 w-32 rounded-md" />
-                    <div className="flex gap-2">
-                      <Skeleton className="h-7 w-16 rounded-full" />
-                      <Skeleton className="h-7 w-16 rounded-full" />
-                    </div>
-                  </div>
-                </div>
-              ))}
+              <SkeletonPaperCard length={chunkSize} />
             </CarouselItem>
           ) : (
             chunkedPapers.map((paperGroup, index) => {
diff --git a/src/components/PinnedPapersCarousel.tsx b/src/components/PinnedPapersCarousel.tsx
index 449cd41..bd475bd 100644
--- a/src/components/PinnedPapersCarousel.tsx
+++ b/src/components/PinnedPapersCarousel.tsx
@@ -17,6 +17,7 @@ import AddPapers from "./AddPapers";
 import Autoplay from "embla-carousel-autoplay";
 import { chunkArray } from "@/util/utils";
 import { StoredSubjects } from "@/interface";
+import SkeletonPaperCard from "./SkeletonPaperCard";
 
 function PinnedPapersCarousel({
   carouselType = "upcoming",
@@ -54,15 +55,11 @@ function PinnedPapersCarousel({
         localStorage.getItem("userSubjects") ?? "[]",
       ) as StoredSubjects;
 
-      console.log("Fetching papers for subjects:", storedSubjects);
-
       const response = await axios.post<{ subject: string; slots: string[] }[]>(
         "/api/user-papers",
         storedSubjects,
       );
 
-      console.log("Fetched papers:", response.data);
-
       const fetchedPapers = response.data;
 
       const fetchedSubjectsSet = new Set(
@@ -131,23 +128,7 @@ function PinnedPapersCarousel({
                   chunkSize === 4 ? "grid-cols-2 grid-rows-2" : "grid-cols-4"
                 } gap-4 lg:auto-rows-fr`}
               >
-                {Array.from({ length: chunkSize }).map((_, idx) => (
-                  <div
-                    key={idx}
-                    className="cursor-pointer rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] text-black shadow-lg transition duration-150 ease-in-out hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] dark:text-white hover:dark:bg-[#262635]"
-                  >
-                    <div className="border-b-2 border-[#453D60] p-2">
-                      <Skeleton className="h-6 w-24 rounded-md" />
-                    </div>
-                    <div className="flex flex-col justify-between p-4">
-                      <Skeleton className="mb-4 h-6 w-32 rounded-md" />
-                      <div className="flex gap-2">
-                        <Skeleton className="h-7 w-16 rounded-full" />
-                        <Skeleton className="h-7 w-16 rounded-full" />
-                      </div>
-                    </div>
-                  </div>
-                ))}
+                <SkeletonPaperCard length={chunkSize} />
               </CarouselItem>
             ) : (
               chunkedPapers.map((paperGroup, index) => {
diff --git a/src/components/Searchbar/searchbar-child.tsx b/src/components/Searchbar/searchbar-child.tsx
index 8d0ed36..b3a83f2 100644
--- a/src/components/Searchbar/searchbar-child.tsx
+++ b/src/components/Searchbar/searchbar-child.tsx
@@ -145,7 +145,7 @@ function SearchBarChild({
                   </div>
                   <span
                     id="subject"
-                    className="items-center text-sm tracking-wide text-white sm:text-base"
+                    className="items-center text-sm tracking-wide text-black dark:text-white sm:text-base"
                   >
                     {suggestion}
                   </span>
diff --git a/src/components/SkeletonPaperCard.tsx b/src/components/SkeletonPaperCard.tsx
new file mode 100644
index 0000000..bcc50fc
--- /dev/null
+++ b/src/components/SkeletonPaperCard.tsx
@@ -0,0 +1,29 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface SkeletonPaperCardProps {
+  length?: number;
+}
+
+export default function SkeletonPaperCard({ length = 4 }: SkeletonPaperCardProps) {
+  return (
+    <>
+      {Array.from({ length }).map((_, idx) => (
+        <div
+          key={idx}
+          className="cursor-pointer rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] text-black shadow-lg transition duration-150 ease-in-out hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] dark:text-white hover:dark:bg-[#262635]"
+        >
+          <div className="border-b-2 border-[#453D60] p-2">
+            <Skeleton className="h-6 w-24 rounded-md" />
+          </div>
+          <div className="flex flex-col justify-between p-4">
+            <Skeleton className="mb-4 h-6 w-32 rounded-md" />
+            <div className="flex gap-2">
+              <Skeleton className="h-7 w-16 rounded-full" />
+              <Skeleton className="h-7 w-16 rounded-full" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/src/components/screens/PapersPage.tsx b/src/components/screens/PapersPage.tsx
deleted file mode 100644
index 60702e4..0000000
--- a/src/components/screens/PapersPage.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-"use client";
-
-import { useEffect, useState, useRef, useMemo } from "react";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { exams, slots, years } from "@/components/select_options";
-import { Input } from "@/components/ui/input";
-import axios from "axios";
-import Fuse from "fuse.js";
-import { ArrowRight } from "lucide-react";
-import Image from "next/image";
-import { IUpcomingPaper } from "@/interface";
-import { Skeleton } from "../ui/skeleton";
-import { CarouselItem } from "@/components/ui/carousel";
-import UpcomingPaper from "../UpcomingPaper";
-
-type Course = {
-  name?: string | null;
-  courseName?: string | null;
-  title?: string | null;
-};
-
-export default function PapersPage() {
-  const [subjects, setSubjects] = useState<string[]>([]);
-  const [searchText, setSearchText] = useState("");
-  const [suggestions, setSuggestions] = useState<string[]>([]);
-  const [selectedSubject, setSelectedSubject] = useState<string | null>(null);
-  const [selectedExam, setSelectedExam] = useState<string | null>(null);
-  const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
-  const [selectedYear, setSelectedYear] = useState<string | null>(null);
-  const suggestionsRef = useRef<HTMLUListElement | null>(null);
-  const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    async function fetchSubjects() {
-      try {
-        const response = await axios.get<Course[]>(`/api/course-list`);
-        const courses: Course[] = response.data;
-        const names = courses
-          .map((course) => course.name ?? course.courseName ?? course.title)
-          .filter(Boolean) as string[];
-
-        setSubjects(names);
-      } catch (err) {
-        console.error("Error fetching subjects:", err);
-      }
-    }
-    void fetchSubjects();
-  }, []);
-
-  useEffect(() => {
-    async function fetchPapers() {
-      try {
-        setIsLoading(true);
-        const response = await axios.get<IUpcomingPaper[]>(
-          "/api/upcoming-papers",
-        );
-
-        const randomPapers = [...response.data]
-          .sort(() => Math.random() - 0.5)
-          .slice(0, 4);
-
-        setDisplayPapers(randomPapers);
-      } catch (error) {
-        console.error("Failed to fetch papers:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-
-    void fetchPapers();
-  }, []);
-
-  const fuse = useMemo(
-    () => new Fuse(subjects, { includeScore: true, threshold: 0.3 }),
-    [subjects],
-  );
-
-  useEffect(() => {
-    if (!searchText.trim()) {
-      setSuggestions([]);
-      return;
-    }
-
-    if (selectedSubject && searchText === selectedSubject) {
-      setSuggestions([]);
-      return;
-    }
-
-    const results = fuse.search(searchText);
-    setSuggestions(results.map((r) => r.item).slice(0, 10));
-  }, [searchText, fuse, selectedSubject]);
-
-  const handleSelectSubject = (subject: string) => {
-    setSelectedSubject(subject);
-    setSearchText(subject);
-    setSuggestions([]);
-    setSelectedExam(null);
-    setSelectedSlot(null);
-    setSelectedYear(null);
-  };
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        suggestionsRef.current &&
-        !suggestionsRef.current.contains(event.target as Node)
-      ) {
-        setSuggestions([]);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  const handleSubmit = async () => {
-    if (!selectedSubject || !selectedExam || !selectedSlot || !selectedYear) {
-      alert("⚠️ Please fill all fields before submitting.");
-      return;
-    }
-
-    try {
-      await axios.post("/api/request", {
-        subject: selectedSubject,
-        exam: selectedExam,
-        slot: selectedSlot,
-        year: selectedYear,
-      });
-
-      alert("✅ Your paper request was submitted successfully 🎉");
-
-      setSearchText("");
-      setSelectedSubject(null);
-      setSelectedExam(null);
-      setSelectedSlot(null);
-      setSelectedYear(null);
-    } catch (error) {
-      console.error("Error submitting request:", error);
-      alert("❌ Failed to submit your request. Please try again later.");
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-[#F3F5FF] px-6 py-12 text-black dark:bg-[#070114] dark:text-white">
-      <main>
-        <div className="mx-auto mb-16 max-w-4xl text-center">
-          <h2 className="mb-12 font-vipnabd text-3xl font-extrabold md:text-4xl">
-            Specific Paper Request
-          </h2>
-
-          <div className="relative mx-auto mb-8 max-w-xl font-play">
-            <Input
-              type="text"
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-              placeholder="Search by subject..."
-              className={`text-md rounded-lg bg-[#B2B8FF] px-4 py-6 pr-10 font-play tracking-wider text-black shadow-sm ring-0 placeholder:text-black focus:outline-none focus:ring-0 dark:bg-[#7480FF66] dark:text-white placeholder:dark:text-white ${suggestions.length > 0 ? "rounded-b-none" : ""}`}
-            />
-            <button
-              type="button"
-              className="absolute inset-y-0 right-0 flex items-center pr-3"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5 text-black dark:text-white"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"
-                />
-              </svg>
-            </button>
-            {suggestions.length > 0 && (
-              <ul
-                ref={suggestionsRef}
-                className="absolute z-20 max-h-[250px] w-full max-w-xl overflow-y-auto rounded-md rounded-t-none border border-t-0 bg-white text-center shadow-lg dark:bg-[#303771]"
-              >
-                {suggestions.map((s, idx) => (
-                  <li
-                    key={idx}
-                    onClick={() => handleSelectSubject(s)}
-                    className="cursor-pointer truncate p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
-                  >
-                    {s}
-                  </li>
-                ))}
-              </ul>
-            )}
-          </div>
-
-          <div className="mb-8 flex justify-center gap-4">
-            <Select
-              onValueChange={setSelectedExam}
-              disabled={!selectedSubject}
-              value={selectedExam ?? undefined}
-            >
-              <SelectTrigger className="w-32">
-                <SelectValue placeholder="Exam" />
-              </SelectTrigger>
-              <SelectContent>
-                {exams.map((exam) => (
-                  <SelectItem key={exam} value={exam}>
-                    {exam}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select
-              onValueChange={setSelectedSlot}
-              disabled={!selectedSubject}
-              value={selectedSlot ?? undefined}
-            >
-              <SelectTrigger className="w-32">
-                <SelectValue placeholder="Slot" />
-              </SelectTrigger>
-              <SelectContent>
-                {slots.map((slot) => (
-                  <SelectItem key={slot} value={slot}>
-                    {slot}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <Select
-              onValueChange={setSelectedYear}
-              disabled={!selectedSubject}
-              value={selectedYear ?? undefined}
-            >
-              <SelectTrigger className="w-32">
-                <SelectValue placeholder="Year" />
-              </SelectTrigger>
-              <SelectContent>
-                {[...years]
-                  .sort((a, b) => Number(b) - Number(a))
-                  .map((year) => (
-                    <SelectItem key={year} value={year}>
-                      {year}
-                    </SelectItem>
-                  ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <Button
-            className="rounded-lg bg-[#4A55FF] px-8 py-3 text-base text-white hover:bg-[#3A44CC] dark:bg-[#9EA8FF] dark:text-black dark:hover:bg-[#7D86E5]"
-            onClick={handleSubmit}
-          >
-            Submit
-          </Button>
-        </div>
-
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-          {isLoading
-            ? Array.from({ length: 4 }).map((_, idx) => (
-                <div
-                  key={idx}
-                  className="cursor-pointer rounded-md border border-[#734DFF] bg-[#171720] text-white shadow-lg transition duration-150 ease-in-out hover:bg-[#262635]"
-                >
-                  {/* Top section */}
-                  <div className="flex items-center justify-between border-b border-[#453D60] p-3">
-                    <Skeleton className="h-5 w-24 rounded-md" />
-                    <Skeleton className="h-5 w-5 rounded-full" />
-                  </div>
-
-                  {/* Middle section */}
-                  <div className="flex flex-col justify-between p-4">
-                    <Skeleton className="mb-4 h-6 w-36 rounded-md" />
-                    <div className="flex gap-2">
-                      <Skeleton className="h-7 w-12 rounded-md" />
-                      <Skeleton className="h-7 w-12 rounded-md" />
-                    </div>
-                  </div>
-                </div>
-              ))
-            : displayPapers.map((paper, subIndex) => (
-                <div key={subIndex} className="h-full">
-                  <UpcomingPaper subject={paper.subject} slots={paper.slots} />
-                </div>
-              ))}
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/src/db/relatedSubjects.ts b/src/db/relatedSubjects.ts
new file mode 100644
index 0000000..c9a4c27
--- /dev/null
+++ b/src/db/relatedSubjects.ts
@@ -0,0 +1,14 @@
+import mongoose, { Schema, type Model } from "mongoose";
+import { type IRelatedSubject } from "@/interface";
+  
+
+const relatedSubjectSchema = new Schema<IRelatedSubject>({
+  subject: { type: String, required: true },
+  related_subjects: { type: [String], required: true },
+});
+
+const RelatedSubject: Model<IRelatedSubject> =
+  mongoose.models.RelatedSubject ??
+  mongoose.model<IRelatedSubject>("RelatedSubject", relatedSubjectSchema);
+
+export default RelatedSubject;
diff --git a/src/interface.ts b/src/interface.ts
index 74bcfca..c8362da 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -204,3 +204,14 @@ export interface Filters {
 export interface StoredSubjects {
   subjects: string[];
 }
+
+export interface TransformedPaper {
+  subject: string;
+  slots: string[];
+}
+
+
+export interface IRelatedSubject {
+  subject: string;
+  related_subjects: string[];
+}
\ No newline at end of file
diff --git a/src/lib/mongoose.ts b/src/lib/mongoose.ts
index 7f129fe..7be32c3 100644
--- a/src/lib/mongoose.ts
+++ b/src/lib/mongoose.ts
@@ -1,27 +1,41 @@
 import mongoose from "mongoose";
-
-if (!process.env.MONGODB_URI) {
-  throw new Error("Please add your Mongo URI to .env.local");
+declare global {
+  // eslint-disable-next-line no-var
+    var mongoose: { conn: mongoose.Mongoose | null; promise: Promise<mongoose.Mongoose> | null } | undefined; // This must be a `var` and not a `let / const`
 }
 
-const uri = process.env.MONGODB_URI;
+let cached = global.mongoose;
 
-let isConnected = false;
+cached ??= global.mongoose = { conn: null, promise: null };
 
-export const connectToDatabase = async () => {
-  if (isConnected) {
-    return;
-  }
+export async function connectToDatabase() {
+  const MONGODB_URI = process.env.MONGODB_URI!;
 
-  if (mongoose.connection.readyState === mongoose.ConnectionStates.connected) {
-    isConnected = true;
-    return;
+  if (!MONGODB_URI) {
+    throw new Error(
+      "Please define the MONGODB_URI environment variable inside .env.local",
+    );
   }
 
+  if (cached?.conn) {
+    return cached.conn;
+  }
+  if (cached && !cached.promise) {
+    const opts = {
+      bufferCommands: false,
+    };
+    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
+      return mongoose;
+    });
+  }
   try {
-    await mongoose.connect(uri);
-    isConnected = true;
-  } catch (error) {
-    throw new Error("Failed to connect to MongoDB");
+    cached!.conn = await cached!.promise;
+  } catch (e) {
+    if (cached) {
+      cached.promise = null;
+    }
+    throw e;
   }
-};
+
+  return cached?.conn;
+}
diff --git a/src/util/download_paper.tsx b/src/util/download.tsx
similarity index 100%
rename from src/util/download_paper.tsx
rename to src/util/download.tsx