diff --git a/public/events/clueminati.png b/public/events/clueminati.png
new file mode 100644
index 00000000..12d67624
Binary files /dev/null and b/public/events/clueminati.png differ
diff --git a/public/events/cookoff.jpg b/public/events/cookoff.jpg
new file mode 100644
index 00000000..c0c21fec
Binary files /dev/null and b/public/events/cookoff.jpg differ
diff --git a/src/components/CatalogueContent.tsx b/src/components/CatalogueContent.tsx
index 2dcde869..42a42cbe 100644
--- a/src/components/CatalogueContent.tsx
+++ b/src/components/CatalogueContent.tsx
@@ -19,6 +19,8 @@ import { FilterProvider, useFilters } from "@/context/filterContext";
 import EmptyState from "./ui/EmptyState";
 import SidebarButton from "./SidebarButton";
 import SortComponent from "./ui/sorting";
+import Announcement from "./ui/announcement/Announcement";
+import { getSubjectEvent, EVENTS, type EventData } from "@/config/events";
 
 const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
   const [isMounted, setIsMounted] = useState(false);
@@ -235,6 +237,95 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
     setAppliedFilters,
   ]);
 
+  const [activeEvent, setActiveEvent] = useState<EventData | null>(null);
+  const [isGridEventsDismissed, setIsGridEventsDismissed] = useState<boolean>(false);
+
+  useEffect(() => {
+    try {
+      setIsGridEventsDismissed(
+        window.sessionStorage.getItem("announcement:global-grid-card:dismissed") === "true",
+      );
+    } catch {
+      setIsGridEventsDismissed(false);
+    }
+  }, []);
+
+  const handleDismissGridEvents = () => {
+    setIsGridEventsDismissed(true);
+    try {
+      window.sessionStorage.setItem(
+        "announcement:global-grid-card:dismissed",
+        "true",
+      );
+    } catch {}
+  };
+
+  useEffect(() => {
+    setActiveEvent(getSubjectEvent(subject));
+  }, [subject]);
+
+  const renderGridItems = (paperList: IPaper[]) => {
+    if (paperList.length === 0) return null;
+    const currentEvent = activeEvent ?? EVENTS[0]!;
+
+    const items: React.ReactNode[] = [];
+    paperList.forEach((paper, index) => {
+      if (index === 2 && !isGridEventsDismissed) {
+        items.push(
+          <Announcement
+            key={`grid-event-${subject ?? "all"}`}
+            id={`grid-card-${currentEvent.id}`}
+            variant="card"
+            title={currentEvent.title}
+            message={currentEvent.description}
+            badge={currentEvent.badge}
+            logoType={currentEvent.logoType}
+            imageUrl={currentEvent.imageUrl}
+            accent={currentEvent.accent}
+            ctaLabel="Register Now"
+            href={currentEvent.registrationUrl}
+            secondaryCtaLabel="Learn More"
+            secondaryHref={currentEvent.landingPageUrl}
+            dismissible={true}
+            onDismiss={handleDismissGridEvents}
+          />,
+        );
+      }
+      items.push(
+        <Card
+          key={paper._id}
+          paper={paper}
+          onSelect={handleSelectPaper}
+          isSelected={selectedPapers.some((p) => p._id === paper._id)}
+        />,
+      );
+    });
+
+    if (paperList.length > 0 && paperList.length < 2 && !isGridEventsDismissed) {
+      items.push(
+        <Announcement
+          key={`grid-event-${subject ?? "all"}`}
+          id={`grid-card-${currentEvent.id}`}
+          variant="card"
+          title={currentEvent.title}
+          message={currentEvent.description}
+          badge={currentEvent.badge}
+          logoType={currentEvent.logoType}
+          imageUrl={currentEvent.imageUrl}
+          accent={currentEvent.accent}
+          ctaLabel="Register Now"
+          href={currentEvent.registrationUrl}
+          secondaryCtaLabel="Learn More"
+          secondaryHref={currentEvent.landingPageUrl}
+          dismissible={true}
+          onDismiss={handleDismissGridEvents}
+        />,
+      );
+    }
+
+    return items;
+  };
+
   // Render loading state until mounted to avoid hydration mismatch
   if (!isMounted) {
     return <Loader />;
@@ -338,30 +429,14 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
             >
               {appliedFilters ? (
                 paginatedPapers.length > 0 ? (
-                  paginatedPapers.map((paper: IPaper) => (
-                    <Card
-                      key={paper._id}
-                      paper={paper}
-                      onSelect={handleSelectPaper}
-                      isSelected={selectedPapers.some(
-                        (p) => p._id === paper._id,
-                      )}
-                    />
-                  ))
+                  renderGridItems(paginatedPapers)
                 ) : (
                   <div className="col-span-full flex justify-center">
                     <EmptyState />
                   </div>
                 )
               ) : (
-                paginatedPapers.map((paper: IPaper) => (
-                  <Card
-                    key={paper._id}
-                    paper={paper}
-                    onSelect={handleSelectPaper}
-                    isSelected={selectedPapers.some((p) => p._id === paper._id)}
-                  />
-                ))
+                renderGridItems(paginatedPapers)
               )}
             </div>
             {totalPages > 1 && (
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 27f56e69..4be2b93b 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -22,17 +22,48 @@ import {
 import { useCourses } from "@/context/courseContext";
 import PinnedModal from "./ui/PinnedModal";
 import RequestModal from "./ui/RequestModal";
-//import CookoffBanner from "./CookoffBanner";
+import Announcement from "./ui/announcement/Announcement";
+import { EVENTS } from "@/config/events";
 
 function Navbar() {
   const pathname: string = usePathname() ?? "/";
 
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+  const [currentBannerIndex, setCurrentBannerIndex] = useState<number>(0);
+  const [isPaused, setIsPaused] = useState<boolean>(false);
+  const [isTopBannerDismissed, setIsTopBannerDismissed] = useState<boolean>(false);
   const { courses } = useCourses();
 
   useEffect(() => {
-    if (pathname !== "/catalogue") return;
-  }, [pathname]);
+    try {
+      setIsTopBannerDismissed(
+        window.sessionStorage.getItem("announcement:global-top-banner:dismissed") === "true",
+      );
+    } catch {
+      setIsTopBannerDismissed(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isPaused || EVENTS.length <= 1) return;
+
+    const interval = setInterval(() => {
+      setCurrentBannerIndex((prevIndex) => (prevIndex + 1) % EVENTS.length);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [isPaused]);
+
+  const handleDismissTopBanner = (e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    setIsTopBannerDismissed(true);
+    try {
+      window.sessionStorage.setItem(
+        "announcement:global-top-banner:dismissed",
+        "true",
+      );
+    } catch {}
+  };
 
   const renderHomePageButtons = () => (
     <>
@@ -59,16 +90,39 @@ function Navbar() {
 
   return (
     <div className="sticky top-0 z-[50] w-full bg-[#B2B8FF] dark:bg-[#130E1F]">
-      {/*<Banner
-        bannerId="freshers"
-        bgColor="#fef3c7"
-        textColor="#5a3000"
-        iconColor="#d97706"
-        accentColor="#78350f"
-        title="Attention Freshers!"
-        message="If papers for your subject are not yet available, click on your subject and explore related subjects until papers become available, as these are newly introduced courses."
-      />*/}
-      {/* <CookoffBanner /> */}
+      {EVENTS.length > 0 && !isTopBannerDismissed && (
+        <div
+          className="relative w-full overflow-hidden"
+          onMouseEnter={() => setIsPaused(true)}
+          onMouseLeave={() => setIsPaused(false)}
+        >
+          <div
+            className="flex w-full transition-transform duration-700 ease-in-out"
+            style={{ transform: `translateX(-${currentBannerIndex * 100}%)` }}
+          >
+            {EVENTS.map((event) => (
+              <div key={event.id} className="w-full min-w-full flex-shrink-0">
+                <Announcement
+                  id={`top-banner-${event.id}`}
+                  variant="banner"
+                  title="Registrations are Live at Gravitas!"
+                  message={event.tagline}
+                  badge={event.badge}
+                  logoType={event.logoType}
+                  imageUrl={event.imageUrl}
+                  accent={event.accent}
+                  ctaLabel="Register Now"
+                  href={event.registrationUrl}
+                  secondaryCtaLabel="Event Details"
+                  secondaryHref={event.landingPageUrl}
+                  dismissible={true}
+                  onDismiss={handleDismissTopBanner}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
 
       <div className="flex items-center justify-between bg-inherit px-4 py-4 md:px-8 md:py-5">
         {}
diff --git a/src/components/ui/announcement/Announcement.tsx b/src/components/ui/announcement/Announcement.tsx
index 9afd4f11..4f3d4328 100644
--- a/src/components/ui/announcement/Announcement.tsx
+++ b/src/components/ui/announcement/Announcement.tsx
@@ -3,38 +3,29 @@
 import * as React from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { X, Megaphone, ArrowUpRight, type LucideIcon } from "lucide-react";
+import { X, ArrowUpRight, ExternalLink } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { EventLogo } from "./EventLogo";
 
 export type AnnouncementAccent = "purple" | "amber" | "green" | "rose";
 export type AnnouncementVariant = "banner" | "card";
 
 export interface AnnouncementProps {
-  /**
-   * Stable, unique id for this announcement (e.g. "cookoff-2026").
-   * Used as the localStorage key so a dismissal is remembered per-campaign,
-   * not globally — dismissing one promo doesn't hide future ones.
-   */
   id: string;
   title: string;
   message: string;
   variant?: AnnouncementVariant;
-  /** Call-to-action label, e.g. "Register now". Omit to render without a CTA. */
   ctaLabel?: string;
-  /** Where the CTA (and, for banners, the whole strip) links to. External links open in a new tab automatically. */
   href?: string;
-  /** Card-variant only: image shown above the copy (16:9). Ignored for banners. */
+  secondaryCtaLabel?: string;
+  secondaryHref?: string;
   imageUrl?: string;
   imageAlt?: string;
-  /** Custom lucide icon; defaults to a megaphone. */
-  icon?: LucideIcon;
-  /** Color preset. Pick based on urgency/category, not vibes: purple = general promo, amber = time-sensitive, green = opportunity/open, rose = urgent/closing soon. */
+  logoType?: "clueminati" | "cookoff" | "default";
+  badge?: string;
   accent?: AnnouncementAccent;
-  /** Whether the person can dismiss it. Defaults to true. */
   dismissible?: boolean;
-  /** ISO date string. Past this date the announcement stops rendering, dismissed or not — no stale promos. */
   expiresAt?: string;
-  /** Shows a small "Sponsored" tag for transparency. Defaults to true — this is an ad, say so. */
   sponsored?: boolean;
   onDismiss?: () => void;
   className?: string;
@@ -50,48 +41,58 @@ const accentStyles: Record<
     chipIcon: string;
     accentText: string;
     cta: string;
+    secondaryCta: string;
     tagText: string;
+    badgeBg: string;
   }
 > = {
   purple: {
-    cardBorder: "border-[#734DFF] dark:border-[#36266D]",
-    cardSurface: "bg-white dark:bg-[#171720]",
-    bannerSurface: "bg-[#EFEAFF] dark:bg-[#171720]",
-    chip: "bg-[#EFEAFF] dark:bg-[#262635]",
-    chipIcon: "text-[#562EE7] dark:text-[#A79DFF]",
-    accentText: "text-[#562EE7] dark:text-[#A79DFF]",
-    cta: "bg-[#734DFF] text-white hover:bg-[#5F3FE0]",
-    tagText: "text-[#734DFF] dark:text-[#A79DFF]",
+    cardBorder: "border-[#734DFF] dark:border-[#562EE7]",
+    cardSurface: "bg-white dark:bg-[#120B24] hover:bg-[#EFEAFF] hover:dark:bg-[#1D1438]",
+    bannerSurface: "bg-[#EFEAFF] dark:bg-[#1A1133]",
+    chip: "bg-[#EFEAFF] dark:bg-[#231845]",
+    chipIcon: "text-[#562EE7] dark:text-[#C4B5FD]",
+    accentText: "text-[#562EE7] dark:text-[#A78BFA]",
+    cta: "bg-[#734DFF] text-white hover:bg-[#5F3FE0] dark:bg-[#6D28D9] dark:hover:bg-[#5B21B6]",
+    secondaryCta: "border border-[#734DFF] text-[#562EE7] hover:bg-[#EFEAFF] dark:border-[#7C3AED] dark:text-[#C4B5FD] dark:hover:bg-[#2E1A47]",
+    tagText: "text-[#734DFF] dark:text-[#C4B5FD]",
+    badgeBg: "bg-[#EFEAFF] text-[#562EE7] dark:bg-[#2E1A47] dark:text-[#C4B5FD]",
   },
   amber: {
-    cardBorder: "border-[#d97706] dark:border-[#7c4a08]",
-    cardSurface: "bg-white dark:bg-[#171720]",
-    bannerSurface: "bg-[#fef3c7] dark:bg-[#3a2a05]",
-    chip: "bg-[#fde8b8] dark:bg-[#4a3608]",
-    chipIcon: "text-[#92600b] dark:text-[#f5c451]",
-    accentText: "text-[#92600b] dark:text-[#f5c451]",
-    cta: "bg-[#d97706] text-white hover:bg-[#b8630a]",
-    tagText: "text-[#92600b] dark:text-[#f5c451]",
+    cardBorder: "border-[#D97706] dark:border-[#B45309]",
+    cardSurface: "bg-white dark:bg-[#1C1305] hover:bg-[#FEF3C7] hover:dark:bg-[#2B1B07]",
+    bannerSurface: "bg-[#FEF3C7] dark:bg-[#2A1C07]",
+    chip: "bg-[#FDE8B8] dark:bg-[#3D290A]",
+    chipIcon: "text-[#92600B] dark:text-[#FCD34D]",
+    accentText: "text-[#92600B] dark:text-[#FBBF24]",
+    cta: "bg-[#D97706] text-white hover:bg-[#B8630A] dark:bg-[#D97706] dark:hover:bg-[#B45309]",
+    secondaryCta: "border border-[#D97706] text-[#92600B] hover:bg-[#FEF3C7] dark:border-[#F59E0B] dark:text-[#FCD34D] dark:hover:bg-[#3D290A]",
+    tagText: "text-[#92600B] dark:text-[#FCD34D]",
+    badgeBg: "bg-[#FEF3C7] text-[#92600B] dark:bg-[#3D290A] dark:text-[#FCD34D]",
   },
   green: {
-    cardBorder: "border-[#16a34a] dark:border-[#0f6b32]",
-    cardSurface: "bg-white dark:bg-[#171720]",
-    bannerSurface: "bg-[#dcfce7] dark:bg-[#052e13]",
-    chip: "bg-[#c7f7d4] dark:bg-[#0b3d1c]",
-    chipIcon: "text-[#15803d] dark:text-[#6ee7a0]",
-    accentText: "text-[#15803d] dark:text-[#6ee7a0]",
-    cta: "bg-[#16a34a] text-white hover:bg-[#128a3e]",
-    tagText: "text-[#15803d] dark:text-[#6ee7a0]",
+    cardBorder: "border-[#16A34A] dark:border-[#15803D]",
+    cardSurface: "bg-white dark:bg-[#071C0F] hover:bg-[#DCFCE7] hover:dark:bg-[#0E2918]",
+    bannerSurface: "bg-[#DCFCE7] dark:bg-[#0B331A]",
+    chip: "bg-[#C7F7D4] dark:bg-[#124D28]",
+    chipIcon: "text-[#15803D] dark:text-[#86EFAC]",
+    accentText: "text-[#15803D] dark:text-[#4ADE80]",
+    cta: "bg-[#16A34A] text-white hover:bg-[#128A3E]",
+    secondaryCta: "border border-[#16A34A] text-[#15803D] hover:bg-[#DCFCE7] dark:border-[#22C55E] dark:text-[#86EFAC] dark:hover:bg-[#124D28]",
+    tagText: "text-[#15803D] dark:text-[#86EFAC]",
+    badgeBg: "bg-[#DCFCE7] text-[#15803D] dark:bg-[#124D28] dark:text-[#86EFAC]",
   },
   rose: {
-    cardBorder: "border-[#e11d48] dark:border-[#8a0f2c]",
-    cardSurface: "bg-white dark:bg-[#171720]",
-    bannerSurface: "bg-[#ffe4e6] dark:bg-[#3f0d16]",
-    chip: "bg-[#ffd2d6] dark:bg-[#521022]",
-    chipIcon: "text-[#be123c] dark:text-[#fda4b0]",
-    accentText: "text-[#be123c] dark:text-[#fda4b0]",
-    cta: "bg-[#e11d48] text-white hover:bg-[#c11640]",
-    tagText: "text-[#be123c] dark:text-[#fda4b0]",
+    cardBorder: "border-[#E11D48] dark:border-[#BE123C]",
+    cardSurface: "bg-white dark:bg-[#1F070C] hover:bg-[#FFE4E6] hover:dark:bg-[#2F0B13]",
+    bannerSurface: "bg-[#FFE4E6] dark:bg-[#380D17]",
+    chip: "bg-[#FFD2D6] dark:bg-[#521323]",
+    chipIcon: "text-[#BE123C] dark:text-[#FDA4AF]",
+    accentText: "text-[#BE123C] dark:text-[#FB7185]",
+    cta: "bg-[#E11D48] text-white hover:bg-[#C11640]",
+    secondaryCta: "border border-[#E11D48] text-[#BE123C] hover:bg-[#FFE4E6] dark:border-[#F43F5E] dark:text-[#FDA4AF] dark:hover:bg-[#521323]",
+    tagText: "text-[#BE123C] dark:text-[#FDA4AF]",
+    badgeBg: "bg-[#FFE4E6] text-[#BE123C] dark:bg-[#521323] dark:text-[#FDA4AF]",
   },
 };
 
@@ -130,19 +131,6 @@ function SmartLink({
   );
 }
 
-/**
- * Reusable promo/announcement unit for advertising events, deadlines, or
- * sponsors on the papers site. Two variants:
- *
- *  - "banner": a thin dismissible strip, meant for the top of a page.
- *  - "card": a promo card sized to match `Card.tsx`, meant to sit inside
- *     the same paper grid (`grid-cols-1 md:grid-cols-2 lg:grid-cols-4`) as
- *     a native-feeling in-feed ad.
- *
- * Dismissal is remembered per `id` in localStorage, and an optional
- * `expiresAt` retires the announcement automatically so stale promos never
- * linger after an event has passed.
- */
 export default function Announcement({
   id,
   title,
@@ -150,9 +138,12 @@ export default function Announcement({
   variant = "banner",
   ctaLabel,
   href,
+  secondaryCtaLabel,
+  secondaryHref,
   imageUrl,
   imageAlt,
-  icon: Icon = Megaphone,
+  logoType = "default",
+  badge,
   accent = "purple",
   dismissible = true,
   expiresAt,
@@ -176,18 +167,20 @@ export default function Announcement({
     setMounted(true);
     if (dismissible) {
       try {
-        setDismissed(window.localStorage.getItem(storageKey) === "true");
+        setDismissed(window.sessionStorage.getItem(storageKey) === "true");
       } catch {
         setDismissed(false);
       }
     }
   }, [storageKey, dismissible]);
 
-  const handleDismiss = () => {
+  const handleDismiss = (e: React.MouseEvent) => {
+    e.stopPropagation();
     setDismissed(true);
     try {
-      window.localStorage.setItem(storageKey, "true");
+      window.sessionStorage.setItem(storageKey, "true");
     } catch {
+      // ignore quota / security error
     }
     onDismiss?.();
   };
@@ -196,43 +189,64 @@ export default function Announcement({
 
   const styles = accentStyles[accent];
 
+  const handleBannerClick = (e: React.MouseEvent) => {
+    if (!href) return;
+    const target = e.target as HTMLElement;
+    if (target.closest("button, a, input, svg")) return;
+
+    if (isExternal(href)) {
+      window.open(href, "_blank", "noopener,noreferrer");
+    } else {
+      window.location.href = href;
+    }
+  };
+
   if (variant === "banner") {
     return (
       <div
         role="region"
         aria-label={sponsored ? `Sponsored announcement: ${title}` : `Announcement: ${title}`}
+        onClick={handleBannerClick}
         className={cn(
-          "relative w-full font-play",
+          "relative w-full font-play border-b border-purple-200/40 dark:border-purple-900/40 shadow-sm transition-all duration-200",
+          href && "cursor-pointer",
           styles.bannerSurface,
           className,
         )}
       >
-        <div className="mx-auto flex max-w-screen-2xl flex-col items-start gap-3 px-4 py-3 sm:flex-row sm:items-center sm:gap-4 md:px-8">
-          <div className={cn("flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full", styles.chip)}>
-            <Icon className={cn("h-5 w-5", styles.chipIcon)} />
-          </div>
+        <div className="mx-auto flex max-w-screen-2xl flex-col items-start gap-3 px-4 py-2.5 sm:flex-row sm:items-center sm:gap-4 md:px-8">
+          {imageUrl ? (
+            <Image
+              src={imageUrl}
+              alt={imageAlt ?? title}
+              width={36}
+              height={36}
+              className="h-8 w-8 flex-shrink-0 rounded-lg object-cover shadow-xs ring-1 ring-purple-500/20"
+            />
+          ) : (
+            <EventLogo type={logoType} size="sm" className="flex-shrink-0" />
+          )}
 
-          <div className="flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-center sm:gap-2">
-            <span className={cn("whitespace-nowrap text-sm font-semibold", styles.accentText)}>
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-center sm:gap-3">
+            {badge && (
+              <span className={cn("inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-bold tracking-wide uppercase shadow-xs", styles.badgeBg)}>
+                {badge}
+              </span>
+            )}
+            <span className={cn("whitespace-nowrap text-sm font-bold", styles.accentText)}>
               {title}
             </span>
-            <span className="text-sm text-gray-700 dark:text-gray-300 sm:truncate">
+            <span className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-200 sm:truncate">
               {message}
             </span>
           </div>
 
-          <div className="flex w-full items-center justify-between gap-3 sm:w-auto sm:justify-end">
-            {sponsored && (
-              <span className={cn("text-[10px] font-semibold uppercase tracking-wide opacity-70", styles.tagText)}>
-                Sponsored
-              </span>
-            )}
-
+          <div className="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end">
             {ctaLabel && href && (
               <SmartLink
                 href={href}
                 className={cn(
-                  "inline-flex flex-shrink-0 items-center gap-1 rounded-full px-3 py-1.5 text-xs font-semibold transition-colors",
+                  "inline-flex flex-shrink-0 items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-bold shadow-sm transition-all duration-200 hover:scale-105 active:scale-95",
                   styles.cta,
                 )}
               >
@@ -241,11 +255,24 @@ export default function Announcement({
               </SmartLink>
             )}
 
+            {secondaryCtaLabel && secondaryHref && (
+              <SmartLink
+                href={secondaryHref}
+                className={cn(
+                  "inline-flex flex-shrink-0 items-center gap-1 rounded-full px-3 py-1.5 text-xs font-bold transition-all duration-200 hover:scale-105 active:scale-95 hidden lg:inline-flex",
+                  styles.secondaryCta,
+                )}
+              >
+                {secondaryCtaLabel}
+                <ExternalLink className="h-3 w-3" />
+              </SmartLink>
+            )}
+
             {dismissible && (
               <button
                 onClick={handleDismiss}
                 aria-label="Dismiss announcement"
-                className={cn("flex-shrink-0 rounded-full p-1 transition hover:opacity-70", styles.accentText)}
+                className={cn("flex-shrink-0 rounded-full p-1.5 transition-transform hover:scale-110 hover:opacity-80 active:scale-90", styles.accentText)}
               >
                 <X className="h-4 w-4" />
               </button>
@@ -256,13 +283,27 @@ export default function Announcement({
     );
   }
 
-  // Card variant — sized to sit inside the same grid as paper Cards.
+  const handleCardClick = (e: React.MouseEvent) => {
+    if (!href) return;
+    const target = e.target as HTMLElement;
+    if (target.closest("button, a, input, svg")) return;
+
+    if (isExternal(href)) {
+      window.open(href, "_blank", "noopener,noreferrer");
+    } else {
+      window.location.href = href;
+    }
+  };
+
+  // Card variant — sized to sit inside the same grid as paper Cards in Catalogue.
   return (
     <div
       role="region"
-      aria-label={sponsored ? `Sponsored announcement: ${title}` : `Announcement: ${title}`}
+      aria-label={sponsored ? `Sponsored event: ${title}` : `Event: ${title}`}
+      onClick={handleCardClick}
       className={cn(
-        "relative flex flex-col overflow-hidden rounded-sm border-2 font-play transition-all duration-150",
+        "group relative flex flex-col justify-between overflow-hidden rounded-sm border-2 font-play shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl dark:shadow-purple-950/20",
+        href && "cursor-pointer",
         styles.cardBorder,
         styles.cardSurface,
         className,
@@ -271,50 +312,85 @@ export default function Announcement({
       {dismissible && (
         <button
           onClick={handleDismiss}
-          aria-label="Dismiss announcement"
-          className="absolute right-2 top-2 z-10 rounded-full bg-black/40 p-1 text-white transition hover:bg-black/60"
+          aria-label="Hide announcement"
+          className="absolute right-2.5 top-2.5 z-20 flex items-center justify-center rounded-full bg-black/60 p-1.5 text-white shadow-md backdrop-blur-md transition-all hover:bg-black/80 hover:scale-110 active:scale-95"
         >
-          <X className="h-3.5 w-3.5" />
+          <X className="h-4 w-4" />
         </button>
       )}
 
-      {imageUrl ? (
-        <Image
-          src={imageUrl}
-          alt={imageAlt ?? title}
-          width={320}
-          height={180}
-          className="w-full object-cover p-4 pb-3 md:h-[250px]"
-        />
-      ) : (
-        <div className={cn("m-4 mb-0 flex h-[150px] items-center justify-center rounded-sm md:h-[218px]", styles.chip)}>
-          <Icon className={cn("h-10 w-10", styles.chipIcon)} />
-        </div>
-      )}
+      {/* Header Banner Graphic / Image */}
+      <div className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-950 p-6 md:h-[220px]">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={imageAlt ?? title}
+            width={320}
+            height={180}
+            className="w-full object-cover p-2 transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="flex flex-col items-center justify-center gap-3 transition-transform duration-300 group-hover:scale-105">
+            <EventLogo type={logoType} size="lg" />
+            {badge && (
+              <span className={cn("inline-flex items-center rounded-full px-3 py-1 text-xs font-bold uppercase tracking-wider shadow-md", styles.badgeBg)}>
+                {badge}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="h-[1px] w-full bg-[#734DFF] dark:bg-[#562EE7]" />
 
-      <div className="flex flex-1 flex-col justify-between space-y-3 p-4">
-        <div className="space-y-1.5">
-          {sponsored && (
-            <span className={cn("text-[10px] font-semibold uppercase tracking-wide opacity-70", styles.tagText)}>
-              Sponsored
+      {/* Details & Copy */}
+      <div className="flex flex-1 flex-col justify-between space-y-4 p-5">
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className={cn("text-[11px] font-extrabold uppercase tracking-wider", styles.tagText)}>
+              CodeChef-VIT Event
             </span>
-          )}
-          <div className="font-play text-lg font-semibold leading-snug">{title}</div>
-          <p className="text-sm text-gray-600 dark:text-gray-400">{message}</p>
+            <span className="text-[10px] font-semibold text-gray-500 dark:text-gray-400">
+              Gravitas &apos;26
+            </span>
+          </div>
+
+          <h3 className="font-play text-xl font-bold leading-tight text-gray-900 dark:text-white transition-colors duration-200 group-hover:text-[#562EE7] dark:group-hover:text-[#A78BFA]">
+            {title}
+          </h3>
+          <p className="text-xs md:text-sm font-medium leading-relaxed text-gray-600 dark:text-gray-300">
+            {message}
+          </p>
         </div>
 
-        {ctaLabel && href && (
-          <SmartLink
-            href={href}
-            className={cn(
-              "inline-flex w-fit items-center gap-1.5 rounded-full px-4 py-2 text-sm font-semibold transition-colors",
-              styles.cta,
-            )}
-          >
-            {ctaLabel}
-            <ArrowUpRight className="h-4 w-4" />
-          </SmartLink>
-        )}
+        {/* Action Buttons */}
+        <div className="flex flex-wrap items-center gap-2 pt-2">
+          {ctaLabel && href && (
+            <SmartLink
+              href={href}
+              className={cn(
+                "inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-4 py-2.5 text-xs font-extrabold shadow-md transition-all duration-200 hover:scale-[1.02] active:scale-98",
+                styles.cta,
+              )}
+            >
+              {ctaLabel}
+              <ArrowUpRight className="h-4 w-4" />
+            </SmartLink>
+          )}
+
+          {secondaryCtaLabel && secondaryHref && (
+            <SmartLink
+              href={secondaryHref}
+              className={cn(
+                "inline-flex items-center justify-center gap-1 rounded-md px-3 py-2.5 text-xs font-bold transition-all duration-200 hover:scale-[1.02] active:scale-98",
+                styles.secondaryCta,
+              )}
+            >
+              {secondaryCtaLabel}
+              <ExternalLink className="h-3.5 w-3.5" />
+            </SmartLink>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/ui/announcement/EventLogo.tsx b/src/components/ui/announcement/EventLogo.tsx
new file mode 100644
index 00000000..1954aa8d
--- /dev/null
+++ b/src/components/ui/announcement/EventLogo.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface EventLogoProps {
+  type?: "clueminati" | "cookoff" | "default";
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function EventLogo({ type = "default", className, size = "md" }: EventLogoProps) {
+  const sizeClasses = {
+    sm: "h-8 w-8",
+    md: "h-12 w-12",
+    lg: "h-20 w-20 md:h-24 md:w-24",
+  };
+
+  if (type === "clueminati") {
+    return (
+      <div
+        className={cn(
+          "relative flex items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-950 via-purple-900 to-slate-900 p-2 shadow-lg shadow-purple-900/30 ring-1 ring-purple-500/30 transition-transform duration-300 hover:scale-105",
+          sizeClasses[size],
+          className
+        )}
+      >
+        <svg
+          viewBox="0 0 100 100"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-full w-full drop-shadow-[0_0_8px_rgba(168,85,247,0.6)]"
+        >
+          <defs>
+            <linearGradient id="clueGlow" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#A855F7" />
+              <stop offset="50%" stopColor="#6366F1" />
+              <stop offset="100%" stopColor="#EC4899" />
+            </linearGradient>
+            <linearGradient id="clueLens" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#818CF8" stopOpacity="0.4" />
+              <stop offset="100%" stopColor="#C084FC" stopOpacity="0.1" />
+            </linearGradient>
+          </defs>
+          {/* Cyber Eye / Magnifier Outer Ring */}
+          <circle cx="46" cy="44" r="28" stroke="url(#clueGlow)" strokeWidth="6" strokeDasharray="140 10" />
+          <circle cx="46" cy="44" r="28" fill="url(#clueLens)" />
+          
+          {/* Magnifier Handle */}
+          <path d="M66 64 L84 84" stroke="url(#clueGlow)" strokeWidth="8" strokeLinecap="round" />
+          
+          {/* Inner Code Bracket / Mystery Lock Element */}
+          <path d="M38 38 L32 44 L38 50" stroke="#FFFFFF" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M54 38 L60 44 L54 50" stroke="#FFFFFF" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+          <circle cx="46" cy="44" r="3" fill="#38BDF8" />
+          
+          {/* Glowing Sparkles */}
+          <path d="M22 22 L24 26 L28 28 L24 30 L22 34 L20 30 L16 28 L20 26 Z" fill="#F472B6" />
+          <path d="M74 20 L75.5 23 L78.5 24.5 L75.5 26 L74 29 L72.5 26 L69.5 24.5 L72.5 23 Z" fill="#38BDF8" />
+        </svg>
+      </div>
+    );
+  }
+
+  if (type === "cookoff") {
+    return (
+      <div
+        className={cn(
+          "relative flex items-center justify-center rounded-2xl bg-gradient-to-br from-amber-950 via-orange-900 to-slate-900 p-2 shadow-lg shadow-orange-900/30 ring-1 ring-orange-500/30 transition-transform duration-300 hover:scale-105",
+          sizeClasses[size],
+          className
+        )}
+      >
+        <svg
+          viewBox="0 0 100 100"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-full w-full drop-shadow-[0_0_8px_rgba(249,115,22,0.6)]"
+        >
+          <defs>
+            <linearGradient id="cookFlame" x1="0%" y1="100%" x2="0%" y2="0%">
+              <stop offset="0%" stopColor="#EA580C" />
+              <stop offset="50%" stopColor="#F97316" />
+              <stop offset="100%" stopColor="#FBBF24" />
+            </linearGradient>
+            <linearGradient id="hatGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#FFFFFF" />
+              <stop offset="100%" stopColor="#E2E8F0" />
+            </linearGradient>
+          </defs>
+          
+          {/* Tech Chef Hat Base */}
+          <path
+            d="M30 68 C30 55, 20 50, 32 35 C40 22, 60 22, 68 35 C80 50, 70 55, 70 68 Z"
+            fill="url(#hatGrad)"
+          />
+          {/* Hat Ribbon / Code Bar */}
+          <rect x="30" y="66" width="40" height="12" rx="4" fill="#EA580C" />
+          <path d="M38 72 L43 72 M48 72 L58 72" stroke="#FFFFFF" strokeWidth="3" strokeLinecap="round" />
+
+          {/* Central Coding Flame */}
+          <path
+            d="M50 32 C46 40, 42 42, 45 50 C48 56, 55 54, 54 46 C57 52, 53 58, 50 60 C58 60, 62 52, 58 44 C56 40, 52 36, 50 32 Z"
+            fill="url(#cookFlame)"
+          />
+
+          {/* Sparkles */}
+          <path d="M18 40 L20 43 L23 45 L20 47 L18 50 L16 47 L13 45 L16 43 Z" fill="#FBBF24" />
+          <path d="M80 34 L81.5 36.5 L84 38 L81.5 39.5 L80 42 L78.5 39.5 L76 38 L78.5 36.5 Z" fill="#F97316" />
+        </svg>
+      </div>
+    );
+  }
+
+  // Default CodeChef-VIT Brand Logo Accent
+  return (
+    <div
+      className={cn(
+        "relative flex items-center justify-center rounded-2xl bg-gradient-to-br from-violet-950 via-purple-900 to-indigo-950 p-2 shadow-lg shadow-purple-900/30 ring-1 ring-violet-500/30 transition-transform duration-300 hover:scale-105",
+        sizeClasses[size],
+        className
+      )}
+    >
+      <svg
+        viewBox="0 0 100 100"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-full w-full drop-shadow-[0_0_8px_rgba(139,92,246,0.6)]"
+      >
+        <defs>
+          <linearGradient id="brandGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor="#A78BFA" />
+            <stop offset="100%" stopColor="#6366F1" />
+          </linearGradient>
+        </defs>
+        <rect x="15" y="15" width="70" height="70" rx="18" stroke="url(#brandGrad)" strokeWidth="6" fill="none" />
+        <path d="M35 38 L25 50 L35 62" stroke="#A78BFA" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M65 38 L75 50 L65 62" stroke="#A78BFA" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M54 34 L44 66" stroke="#38BDF8" strokeWidth="6" strokeLinecap="round" />
+      </svg>
+    </div>
+  );
+}
diff --git a/src/config/events.ts b/src/config/events.ts
new file mode 100644
index 00000000..4172d9e8
--- /dev/null
+++ b/src/config/events.ts
@@ -0,0 +1,53 @@
+export interface EventData {
+  id: string;
+  title: string;
+  tagline: string;
+  description: string;
+  badge: string;
+  accent: "purple" | "amber" | "green" | "rose";
+  registrationUrl: string;
+  landingPageUrl: string;
+  imageUrl?: string;
+  dates?: string;
+  location?: string;
+  logoType: "clueminati" | "cookoff";
+}
+
+export const EVENTS: EventData[] = [
+  {
+    id: "clueminati-2026",
+    title: "Clueminati 4.0",
+    tagline: "The Ultimate Tech Treasure Hunt & Gaming Mystery",
+    description: "Hunt for hidden clues, outsmart tricky puzzles, and level up your way to the top in CodeChef-VIT's gaming mystery event at Gravitas !",
+    badge: "CLUEMINATI 4.0",
+    accent: "purple",
+    registrationUrl: "https://gravitas.vit.ac.in/events/0615fb4d-78b0-4a7c-bc52-ba4cccee2ee6",
+    landingPageUrl: "https://gravitas.codechefvit.com/",
+    dates: "Gravitas '26",
+    location: "VIT Vellore",
+    logoType: "clueminati",
+    imageUrl: "/events/clueminati.png",
+  },
+  {
+    id: "cookoff-2026",
+    title: "CookOff 11",
+    tagline: "Largest Competitive Coding Contest",
+    description: "Test your algorithmic problem solving skills against top coders. Win prizes, certificates, and glory at Gravitas !",
+    badge: "CookOff 11",
+    accent: "amber",
+    registrationUrl: "https://gravitas.vit.ac.in/events/0629102b-cc5f-4992-8921-2e55df1cb2f8",
+    landingPageUrl: "https://gravitas.codechefvit.com/",
+    dates: "Gravitas '26",
+    location: "VIT Vellore",
+    logoType: "cookoff",
+    imageUrl: "/events/cookoff.jpg",
+  },
+];
+
+/**
+ * Always pick 100% randomly between available events on every load.
+ */
+export function getSubjectEvent(_subjectKey?: string | null): EventData {
+  const randomIndex = Math.floor(Math.random() * EVENTS.length);
+  return EVENTS[randomIndex]!;
+}