diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index be7382b..7593e6f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -86,6 +86,7 @@ export const metadata: Metadata = {
   ],
   robots: "index, follow",
 };
+export const revalidate = 60;
 
 export default function RootLayout({
   children,
diff --git a/src/app/paper/[id]/page.tsx b/src/app/paper/[id]/page.tsx
index b91c1ae..f8a826c 100644
--- a/src/app/paper/[id]/page.tsx
+++ b/src/app/paper/[id]/page.tsx
@@ -158,7 +158,7 @@ const PaperPage = async ({ params }: { params: { id: string } }) => {
         </div>
       ) : (
         <>
-          <h1 className="play my-6 flex justify-center gap-4 text-center text-2xl font-semibold md:mb-10 md:text-3xl">
+          <h1 className="font-play my-6 flex justify-center gap-4 text-center text-2xl font-semibold md:mb-10 md:text-3xl">
             <div>
               {paper.subject} {paper.exam} {paper.slot} {paper.year}
             </div>
diff --git a/src/app/upload/page.tsx b/src/app/upload/page.tsx
index 995aefb..7a7d30a 100644
--- a/src/app/upload/page.tsx
+++ b/src/app/upload/page.tsx
@@ -173,7 +173,7 @@ const Page = () => {
   const isCurrentlyDragging = isDragging || isGlobalDragging;
 
   return (
-    <div className="play flex h-[calc(100vh-85px)] flex-col justify-center px-6">
+    <div className="font-play flex h-[calc(100vh-85px)] flex-col justify-center px-6">
       <div className="2xl:my-15 flex flex-col items-center">
         <fieldset className="mb-4 w-full max-w-md rounded-lg border-2 border-gray-300 p-4 pr-8">
           <div className="flex w-full flex-col 2xl:gap-y-4">
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 3811f96..260e9ba 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -65,7 +65,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
   return (
     <div
       className={cn(
-        "play overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
+        "font-play overflow-hidden rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] transition-all duration-150 hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] hover:dark:bg-[#262635]",
         checked && "bg-white",
       )}
     >
@@ -80,7 +80,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
 
         <div className="justify-center">
           <div className="flex flex-row items-center justify-between px-4 pb-2">
-            <div className="play text-md font-medium">
+            <div className="font-play text-md font-medium">
               {extractBracketContent(paper.subject)}
             </div>
             <div className="flex gap-2">
@@ -102,7 +102,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
           <div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#36266D]" />
 
           <div className="space-y-2 p-4">
-            <div className="play text-lg font-semibold">
+            <div className="font-play text-lg font-semibold">
               {extractWithoutBracketContent(paper.subject)}
             </div>
             <div className="flex flex-wrap gap-2">
@@ -115,7 +115,7 @@ const Card = ({ paper, onSelect, isSelected }: CardProps) => {
         </div>
       </Link>
 
-      <div className="play hidden items-center justify-between gap-2 px-4 pb-4 md:flex">
+      <div className="font-play hidden items-center justify-between gap-2 px-4 pb-4 md:flex">
         <div className="flex items-center gap-2">
           <input
             checked={checked}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 58016a7..c17dc92 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -28,7 +28,7 @@ export default function Footer() {
     <footer className="w-full overflow-hidden bg-gradient-to-b from-[#F3F5FF] to-[#A599CE] px-12 py-12 font-sans text-white dark:from-[#070114] dark:to-[#1F0234]">
       <div className="mx-auto flex max-w-[1440px] flex-col gap-y-4 lg:flex-row lg:justify-between">
         <div className="flex flex-col gap-4 md:items-start lg:text-left">
-          <h1 className="jost mb-5 bg-gradient-to-r from-[#562EE7] to-[rgba(116,128,255,0.8)] bg-clip-text text-left text-7xl font-bold tracking-wide text-transparent dark:from-[#562EE7] dark:to-[#FFC6E8]">
+          <h1 className="font-jost mb-5 bg-gradient-to-r from-[#562EE7] to-[rgba(116,128,255,0.8)] bg-clip-text text-left text-7xl font-bold tracking-wide text-transparent dark:from-[#562EE7] dark:to-[#FFC6E8]">
             Papers
           </h1>
 
@@ -76,19 +76,19 @@ export default function Footer() {
           </div>
         </div>
         <div className="flex flex-col gap-2 text-black dark:text-white md:items-start lg:text-left">
-          <h3 className="jost text-2xl font-semibold">Events</h3>
-          <Link href="https://devsoc25.codechefvit.com">DevSOC</Link>
+          <h3 className="font-jost text-2xl 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>
         </div>
         <div className="flex flex-col gap-2 text-black dark:text-white md:items-start lg:text-left">
-          <h3 className="jost text-2xl font-semibold">Our Projects</h3>
+          <h3 className="font-jost text-2xl 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 Combogen</Link>
         </div>
         <div className="flex flex-col gap-2 text-black dark:text-white md:items-start lg:text-left">
-          <h3 className="jost text-2xl font-semibold">Contact Us</h3>
+          <h3 className="font-jost text-2xl font-semibold">Contact Us</h3>
           <Link
             href={`mailto:codechefvit@gmail.com`}
             className="flex flex-row items-center gap-2"
@@ -97,7 +97,7 @@ export default function Footer() {
           </Link>
         </div>
       </div>
-      <p className="play mt-4 border-t border-[#130E1F] pt-12 text-center text-lg text-black dark:border-white/10 dark:text-white">
+      <p className="font-play mt-4 border-t border-[#130E1F] pt-12 text-center text-lg text-black dark:border-white/10 dark:text-white">
         Made with ❤️ by Codechef-VIT
       </p>
     </footer>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 08fc5d6..caa8cb7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -27,7 +27,7 @@ function Navbar() {
         </a>
         <Link
           href="/"
-          className="jost bg-gradient-to-r from-[#562EE7] to-[rgba(116,128,255,0.8)] bg-clip-text text-left text-4xl font-bold tracking-wide text-transparent dark:from-[#562EE7] dark:to-[#FFC6E8] md:text-6xl"
+          className="font-jost bg-gradient-to-r from-[#562EE7] to-[rgba(116,128,255,0.8)] bg-clip-text text-left text-4xl font-bold tracking-wide text-transparent dark:from-[#562EE7] dark:to-[#FFC6E8] md:text-6xl"
         >
           Papers
         </Link>
diff --git a/src/components/RelatedPaper.tsx b/src/components/RelatedPaper.tsx
index ca6f89b..3d77120 100644
--- a/src/components/RelatedPaper.tsx
+++ b/src/components/RelatedPaper.tsx
@@ -64,12 +64,12 @@ const RelatedPapers = () => {
   }, [id]);
 
   if (loading) return <Loader />;
-  if (!currentPaper) return <div className="vipna">Paper not found.</div>;
+  if (!currentPaper) return <div className="font-vipna">Paper not found.</div>;
 
   return (
-    <div className="vipna space-y-4 p-6">
+    <div className="font-vipna space-y-4 p-6">
       <div className="flex items-center justify-between">
-        <h2 className="play my-6 text-3xl font-semibold">Explore More</h2>
+        <h2 className="font-play my-6 text-3xl font-semibold">Explore More</h2>
 
         <Link
           href={`/catalogue?subject=${encodeURIComponent(currentPaper.subject)}`}
@@ -84,7 +84,7 @@ const RelatedPapers = () => {
         </Link>
       </div>
       {relatedPapers.length === 0 ? (
-        <p className="play">No related papers found.</p>
+        <p className="font-play">No related papers found.</p>
       ) : (
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
           {relatedPapers.map((paper) => (
diff --git a/src/components/Searchbar/searchbar-child.tsx b/src/components/Searchbar/searchbar-child.tsx
index f2068f7..7bf1749 100644
--- a/src/components/Searchbar/searchbar-child.tsx
+++ b/src/components/Searchbar/searchbar-child.tsx
@@ -55,7 +55,7 @@ function SearchBarChild({
   }, []);
 
   return (
-    <div className="play mx-auto w-full max-w-xl">
+    <div className="font-play mx-auto w-full max-w-xl">
       <form
         onSubmit={(e) => {
           e.preventDefault();
@@ -71,7 +71,7 @@ function SearchBarChild({
             value={searchText}
             onChange={handleSearchChange}
             placeholder="Search by subject..."
-            className={`text-md play rounded-lg bg-[#B2B8FF] px-4 py-6 pr-10 font-sans 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" : ""}`}
+            className={`text-md font-play rounded-lg bg-[#B2B8FF] px-4 py-6 pr-10 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="submit"
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index d4f42c5..f5abf12 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -101,14 +101,14 @@ function SideBar({
             <Button
               variant="outline"
               onClick={handleSelectAll}
-              className="play mr-2 border-2 border-black font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
+              className="font-play mr-2 border-2 border-black font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
             >
               Select All
             </Button>
             <Button
               variant="outline"
               onClick={handleDeselectAll}
-              className="play border-2 border-black font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
+              className="font-play border-2 border-black font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
             >
               Deselect All
             </Button>
@@ -117,7 +117,7 @@ function SideBar({
             variant="outline"
             onClick={handleDownloadAll}
             disabled={selectedPapers.length === 0}
-            className="play border-2 border-black font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
+            className="font-play border-2 border-black font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
           >
             Download All ({selectedPapers.length})
           </Button>
@@ -126,11 +126,11 @@ function SideBar({
       <div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
         <div className="flex items-center gap-1">
           <Filter size={24} />
-          <div className="play text-xl font-bold">Filters</div>
+          <div className="font-play text-xl font-bold">Filters</div>
         </div>
         <div className="flex flex-col">
           <div
-            className="play cursor-pointer rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
+            className="font-play cursor-pointer rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
             onClick={() => {
               handleApplyFilters([], [], [], [], [], false);
             }}
@@ -151,7 +151,7 @@ function SideBar({
               !selectedAnswerKeyIncluded,
             );
           }}
-          className={`play flex cursor-pointer rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white ${selectedAnswerKeyIncluded ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
+          className={`font-play flex cursor-pointer rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white ${selectedAnswerKeyIncluded ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
         >
           Answer Key Available
         </div>
@@ -166,7 +166,7 @@ function SideBar({
           {/* Keep exams open by default for aesthetics */}
           <AccordionItem className="border-none no-underline" value="item-1">
             <AccordionTrigger className="w-full no-underline">
-              <div className="play text-sm no-underline">Exams</div>
+              <div className="font-play text-sm no-underline">Exams</div>
             </AccordionTrigger>
             <AccordionContent>
               <div className="my-2 flex w-full flex-wrap items-center">
@@ -194,7 +194,7 @@ function SideBar({
                         );
                       }
                     }}
-                    className={`play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 ${selectedExams.includes(exam.value) ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
+                    className={`font-play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 ${selectedExams.includes(exam.value) ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
                   >
                     {exam.label}
                   </div>
@@ -208,7 +208,7 @@ function SideBar({
         <Accordion className="w-full" type="single" collapsible>
           <AccordionItem className="border-none no-underline" value="item-1">
             <AccordionTrigger className="w-full no-underline">
-              <div className="play text-sm no-underline">Slots</div>
+              <div className="font-play text-sm no-underline">Slots</div>
             </AccordionTrigger>
             <AccordionContent>
               <div className="my-2 flex w-full flex-wrap items-center">
@@ -236,7 +236,7 @@ function SideBar({
                         );
                       }
                     }}
-                    className={`play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 ${selectedSlots.includes(slot.value) ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
+                    className={`font-play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 ${selectedSlots.includes(slot.value) ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
                   >
                     {slot.label}
                   </div>
@@ -250,7 +250,7 @@ function SideBar({
         <Accordion className="w-full" type="single" collapsible>
           <AccordionItem className="border-none no-underline" value="item-1">
             <AccordionTrigger className="w-full no-underline">
-              <div className="play text-sm no-underline">Years</div>
+              <div className="font-play text-sm no-underline">Years</div>
             </AccordionTrigger>
             <AccordionContent>
               <div className="my-2 flex w-full flex-wrap items-center">
@@ -278,7 +278,7 @@ function SideBar({
                         );
                       }
                     }}
-                    className={`play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 ${selectedYears.includes(year.value) ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
+                    className={`font-play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 ${selectedYears.includes(year.value) ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
                   >
                     {year.label}
                   </div>
@@ -292,7 +292,7 @@ function SideBar({
         <Accordion className="w-full" type="single" collapsible>
           <AccordionItem className="border-none no-underline" value="item-1">
             <AccordionTrigger className="w-full no-underline">
-              <div className="play text-sm no-underline">Semesters</div>
+              <div className="font-play text-sm no-underline">Semesters</div>
             </AccordionTrigger>
             <AccordionContent>
               <div className="my-2 flex w-full flex-wrap items-center">
@@ -320,7 +320,7 @@ function SideBar({
                         );
                       }
                     }}
-                    className={`play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 ${selectedSemesters.includes(semester.value) ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
+                    className={`font-play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 ${selectedSemesters.includes(semester.value) ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
                   >
                     {semester.label}
                   </div>
diff --git a/src/components/StoredPapers.tsx b/src/components/StoredPapers.tsx
index 58d2c49..5e84ce3 100644
--- a/src/components/StoredPapers.tsx
+++ b/src/components/StoredPapers.tsx
@@ -61,11 +61,11 @@ function StoredPapers() {
     return <Loader prop="m-10" />;
   }
 
-  const plugins = [Autoplay({ delay: 5000, stopOnInteraction: true })];
+  const plugins = [Autoplay({ delay: 8000, stopOnInteraction: true })];
 
   return (
     <div className="px-4">
-      <p className="play my-8 text-center text-lg font-semibold">
+      <p className="my-8 text-center font-play text-lg font-semibold">
         Upcoming Papers
       </p>
 
diff --git a/src/components/UpcomingPaper.tsx b/src/components/UpcomingPaper.tsx
index 74203d8..4b8fc22 100644
--- a/src/components/UpcomingPaper.tsx
+++ b/src/components/UpcomingPaper.tsx
@@ -29,16 +29,16 @@ export default function PaperCard({ subject, slots }: PaperCardProps) {
       className="h-full 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">
-        <h3 className="play inline-block rounded-t-lg px-2 py-1 text-base font-bold md:text-lg md:tracking-widest">
+        <h3 className="font-play inline-block rounded-t-lg px-2 py-1 text-base font-bold md:text-lg md:tracking-widest">
           {courseCode}
         </h3>
       </div>
 
       <div className="flex flex-col justify-between p-4">
-        <h2 className="play mt-2 text-base font-bold md:text-xl">
+        <h2 className="font-play mt-2 text-base font-bold md:text-xl">
           {courseName}
         </h2>
-        <div className="play mt-4 flex gap-2">
+        <div className="font-play mt-4 flex gap-2">
           {slots?.map((slotValue) => capsule(slotValue))}
         </div>
       </div>
diff --git a/src/components/screens/Faq.tsx b/src/components/screens/Faq.tsx
index 6ffdc6b..0bd8375 100644
--- a/src/components/screens/Faq.tsx
+++ b/src/components/screens/Faq.tsx
@@ -57,11 +57,11 @@ function Faq() {
     <>
       <div
         id="faq"
-        className="vipnabd mb-8 w-full px-6 text-center text-4xl font-bold text-[#120020] dark:text-white lg:text-left lg:text-5xl"
+        className="font-vipnabd mb-8 w-full px-6 text-center text-4xl font-bold text-[#120020] dark:text-white lg:text-left lg:text-5xl"
       >
         Frequently Asked Questions
       </div>
-      <div className="play mx-auto w-full space-y-6 px-6">
+      <div className="font-play mx-auto w-full space-y-6 px-6">
         {faqs.map((faq, index) => (
           <div
             key={index}
diff --git a/src/components/screens/Hero.tsx b/src/components/screens/Hero.tsx
index c498925..3cb0ffc 100644
--- a/src/components/screens/Hero.tsx
+++ b/src/components/screens/Hero.tsx
@@ -5,7 +5,7 @@ import StoredPapers from "../StoredPapers";
 const Hero = () => {
   return (
     <div id="hero" className="flex flex-col justify-between">
-      <h1 className="vipnabd mx-auto my-8 text-center text-3xl font-extrabold">
+      <h1 className="font-vipnabd mx-auto my-8 text-center text-3xl font-extrabold">
         Built by Students for Students
       </h1>
       <div className="px-6">
@@ -13,10 +13,10 @@ const Hero = () => {
       </div>
       <StoredPapers />
       {/* <div className="hidden lg:flex flex-col items-center whitespace-nowrap text-center">
-        <h1 className="play text-md">Learn More</h1>
+        <h1 className="font-play text-md">Learn More</h1>
         <Link
           href="#hero"
-          className="play text-md flex items-center justify-center text-black dark:text-white"
+          className="font-play text-md flex items-center justify-center text-black dark:text-white"
         >
           ▼
         </Link>
diff --git a/src/components/screens/Info.tsx b/src/components/screens/Info.tsx
index 0d092dd..1d06d43 100644
--- a/src/components/screens/Info.tsx
+++ b/src/components/screens/Info.tsx
@@ -10,7 +10,7 @@ function Info() {
       className="flex scroll-mt-24 flex-col items-center justify-between px-6 py-12 md:scroll-mt-32 lg:flex-row"
     >
       <div className="w-full text-center lg:w-[50%] lg:text-left">
-        <div className="vipnabd mb-8 block text-3xl font-extrabold text-black dark:text-white lg:text-5xl">
+        <div className="font-vipnabd mb-8 block text-3xl font-extrabold text-black dark:text-white lg:text-5xl">
           <span>Prepare to excel in </span>
           <span>your CATs and FATs </span>
           <span>with CodeChef-</span>
@@ -18,7 +18,7 @@ function Info() {
           <span>repository of past </span>
           <span>exam papers</span>
         </div>
-        <div className="play grid gap-4 text-[12px] text-black dark:text-white md:grid-cols-3 xl:text-[16px]">
+        <div className="font-play grid gap-4 text-[12px] text-black dark:text-white md:grid-cols-3 xl:text-[16px]">
           <FeatureCard icon={<User size={32} />} text="No Sign-up required" />
           <FeatureCard
             isHighlight
diff --git a/src/styles/globals.css b/src/styles/globals.css
index f945633..0384d4d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -86,11 +86,6 @@
   }
 }
 
-@font-face {
-  font-family: "phonk";
-  src: url(/phonkfont.otf);
-}
-
 @font-face {
   font-family: "jost";
   src: url(/jostfont.ttf);
@@ -111,26 +106,6 @@
   src: url(/play.ttf);
 }
 
-.jost {
-  font-family: "jost";
-}
-
-.phonk {
-  font-family: "phonk";
-}
-
-.vipna {
-  font-family: "vipna";
-}
-
-.vipnabd {
-  font-family: "vipnabd";
-}
-
-.play {
-  font-family: "play";
-}
-
 .dark ::-webkit-scrollbar {
   width: 0.4rem;
   height: 0.4rem;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a2aafb3..0382a07 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,6 +12,10 @@ export default {
       fontFamily: {
         sans: ["var(--font-geist-sans)", ...fontFamily.sans],
         yerk: ['"Yerk"', "sans-serif"],
+        jost: ['"jost"', "sans-serif"],
+        vipna: ['"vipna"', "sans-serif"],
+        vipnabd: ['"vipnabd"', "sans-serif"],
+        play: ['"play"', "sans-serif"],
       },
       borderRadius: {
         lg: "var(--radius)",