From e86b8f8eb04145c0806865c89a78d88f960900ef Mon Sep 17 00:00:00 2001
From: Anushka Wagh <ahwagh2006@gmail.com>
Date: Mon, 29 Jun 2026 16:05:55 +0530
Subject: [PATCH] feat(theme): add light mode

---
 app/api/events/route.ts             |   8 +-
 app/create-event/page.tsx           |   4 +-
 app/error.tsx                       |   6 +-
 app/events/page.tsx                 |   2 +-
 app/globals.css                     | 106 ++++++++-----
 app/layout.tsx                      |  32 ++--
 app/my-bookings/page.tsx            | 225 +++++++++++++---------------
 app/not-found.tsx                   |   6 +-
 app/page.tsx                        |   7 +-
 app/watchlist/page.tsx              |  65 ++++----
 components/BookEvent.tsx            |   2 +-
 components/CreateNewEvent.tsx       |  23 ++-
 components/EventCard.tsx            | 114 ++++----------
 components/EventDetails.tsx         |   6 +-
 components/EventDetailsSkeleton.tsx |  14 +-
 components/ExploreBtn.tsx           |   5 +-
 components/Footer.tsx               |  10 +-
 components/LightRays.tsx            |  24 ++-
 components/NavLinks.tsx             |  29 ++--
 components/Navbar.tsx               |   6 +-
 components/SearchFilters.tsx        | 132 +++++++---------
 components/ThemeToggle.tsx          |  25 ++++
 lib/actions/booking.actions.ts      |   4 +-
 lib/actions/create-event.actions.ts |  11 +-
 lib/actions/event.actions.ts        | 148 +++++++++++++++---
 lib/mongodb.ts                      |  15 +-
 lib/use-bookmarks.ts                |  41 +++++
 package-lock.json                   | 142 +++++++-----------
 package.json                        |   2 +-
 tsconfig.json                       |   2 +-
 30 files changed, 662 insertions(+), 554 deletions(-)
 create mode 100644 components/ThemeToggle.tsx
 create mode 100644 lib/use-bookmarks.ts

diff --git a/app/api/events/route.ts b/app/api/events/route.ts
index d272832..e4b39e1 100644
--- a/app/api/events/route.ts
+++ b/app/api/events/route.ts
@@ -14,7 +14,7 @@ export async function POST(req: NextRequest) {
 
         try {
             event = Object.fromEntries(formData.entries());
-        } catch (e) {
+        } catch {
             return NextResponse.json({ message: 'Invalid JSON data format' }, { status: 400 })
         }
 
@@ -46,8 +46,8 @@ export async function POST(req: NextRequest) {
         const tagsStr = formData.get('tags') as string;
         const agendaStr = formData.get('agenda') as string;
 
-        let tags = safeParseJsonArray(tagsStr);
-        let agenda = safeParseJsonArray(agendaStr);
+        const tags = safeParseJsonArray(tagsStr);
+        const agenda = safeParseJsonArray(agendaStr);
 
         const arrayBuffer = await file.arrayBuffer();
         const buffer = Buffer.from(arrayBuffer);
@@ -148,4 +148,4 @@ export async function GET(req: NextRequest) {
     } catch (e) {
         return NextResponse.json({ message: 'Event fetching failed', error: e }, { status: 500 });
     }
-}
\ No newline at end of file
+}
diff --git a/app/create-event/page.tsx b/app/create-event/page.tsx
index c5aa1ad..4f54591 100644
--- a/app/create-event/page.tsx
+++ b/app/create-event/page.tsx
@@ -11,7 +11,7 @@ const CreateEventPage = () => {
       Create New Event
     </h1>
 
-    <p className="mt-4 text-gray-400 text-center">
+    <p className="mt-4 text-muted-foreground text-center">
       Submit your hackathon, meetup, or conference.
     </p>
 
@@ -23,4 +23,4 @@ const CreateEventPage = () => {
   );
 };
 
-export default CreateEventPage;
\ No newline at end of file
+export default CreateEventPage;
diff --git a/app/error.tsx b/app/error.tsx
index d408138..9694b5d 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -17,11 +17,11 @@ export default function ErrorPage({
   }, [error]);
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-black text-white px-4 text-center">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background text-foreground px-4 text-center">
       <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
         Something went wrong
       </h1>
-      <p className="text-gray-400 mb-6">
+      <p className="text-muted-foreground mb-6">
         An unexpected error occurred. Please try again.
       </p>
       <div className="flex gap-4">
@@ -33,7 +33,7 @@ export default function ErrorPage({
         </button>
         <Link
           href="/"
-          className="px-6 py-3 rounded-lg border border-gray-600 hover:bg-gray-800 transition"
+          className="px-6 py-3 rounded-lg border border-border hover:bg-accent transition"
         >
           Go home
         </Link>
diff --git a/app/events/page.tsx b/app/events/page.tsx
index 2f7a12e..f239be7 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -103,7 +103,7 @@ export default async function Page({ searchParams }: PageProps) {
       </div>
 
       {/* SearchFilters uses useSearchParams — must be inside Suspense */}
-      <Suspense fallback={<div className="w-full h-16 animate-pulse rounded-xl bg-white/5" />}>
+      <Suspense fallback={<div className="w-full h-16 animate-pulse rounded-xl bg-muted" />}>
         <SearchFilters />
       </Suspense>
 
diff --git a/app/globals.css b/app/globals.css
index 92580d6..f43c0ca 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,39 +1,37 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
-input[type="date"]::-webkit-calendar-picker-indicator,
-input[type="time"]::-webkit-calendar-picker-indicator {
-  filter: invert(1);
-}
+@custom-variant dark (&:where(.dark, .dark *));
 
 :root {
-  --color-blue: #94eaff;
-  --color-light-100: #e7f2ff;
-  --color-light-200: #bdbdbd;
-  --color-border-dark: #151024;
-  --color-dark-100: #0d161a;
-  --color-dark-200: #182830;
+  color-scheme: light;
+  --font-sans-brand: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono-brand: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  --color-blue: #087f91;
+  --color-light-100: #17262d;
+  --color-light-200: #52666f;
+  --color-border-dark: #d8e2e6;
+  --color-dark-100: #ffffff;
+  --color-dark-200: #eef4f6;
   --radius: 0.625rem;
-  --background: #030708;
-  --foreground: #ffffff;
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: #59deca;
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --background: #f6fafb;
+  --foreground: #102027;
+  --card: #ffffff;
+  --card-foreground: #102027;
+  --popover: #ffffff;
+  --popover-foreground: #102027;
+  --primary: #0f9f91;
+  --primary-foreground: #ffffff;
+  --secondary: #e7f1f3;
+  --secondary-foreground: #183038;
+  --muted: #eaf1f3;
+  --muted-foreground: #52666f;
+  --accent: #dff5f1;
+  --accent-foreground: #075e57;
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --border: #d8e2e6;
+  --input: #cad8dd;
+  --ring: #0f9f91;
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -58,8 +56,8 @@ input[type="time"]::-webkit-calendar-picker-indicator {
   --color-border-dark: var(--color-border-dark);
   --color-dark-100: var(--color-dark-100);
   --color-dark-200: var(--color-dark-200);
-  --font-schibsted-grotesk: var(--font-schibsted-grotesk);
-  --font-martian-mono: var(--font-martian-mono);
+  --font-schibsted-grotesk: var(--font-sans-brand);
+  --font-martian-mono: var(--font-mono-brand);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -100,11 +98,11 @@ input[type="time"]::-webkit-calendar-picker-indicator {
 }
 
 @utility text-gradient {
-  @apply to-blue bg-gradient-to-b from-white via-white bg-clip-text font-semibold text-transparent;
+  @apply to-blue bg-gradient-to-b from-foreground via-foreground bg-clip-text font-semibold text-transparent;
 }
 
 @utility glass {
-  @apply bg-[#12121280]/50 rounded-md bg-clip-padding backdrop-filter backdrop-blur-xl border-b border-border-dark;
+  @apply bg-background/85 rounded-md bg-clip-padding backdrop-filter backdrop-blur-xl border-b border-border-dark;
 }
 
 @utility card-shadow {
@@ -117,7 +115,9 @@ input[type="time"]::-webkit-calendar-picker-indicator {
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply min-h-screen bg-background text-foreground antialiased transition-colors duration-300;
+    font-family: var(--font-sans-brand);
+    background-image: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34rem);
   }
 
   main {
@@ -227,7 +227,7 @@ input[type="time"]::-webkit-calendar-picker-indicator {
       }
 
       .booking {
-        @apply flex-1 w-full p-4 border-l border-gray-700;
+        @apply flex-1 w-full p-4 border-l border-border;
 
         .signup-card {
           @apply bg-dark-100 border-dark-200 card-shadow flex w-full flex-col gap-6 rounded-[10px] border px-5 py-6;
@@ -277,4 +277,38 @@ input[type="time"]::-webkit-calendar-picker-indicator {
       }
     }
   }
-}
\ No newline at end of file
+}
+
+.dark {
+  color-scheme: dark;
+  --color-blue: #94eaff;
+  --color-light-100: #e7f2ff;
+  --color-light-200: #bdbdbd;
+  --color-border-dark: #21323a;
+  --color-dark-100: #0d161a;
+  --color-dark-200: #182830;
+  --background: #030708;
+  --foreground: #ffffff;
+  --card: #0d161a;
+  --card-foreground: #f4fbff;
+  --popover: #0d161a;
+  --popover-foreground: #f4fbff;
+  --primary: #59deca;
+  --primary-foreground: #031310;
+  --secondary: #182830;
+  --secondary-foreground: #f4fbff;
+  --muted: #182830;
+  --muted-foreground: #bdbdbd;
+  --accent: #163139;
+  --accent-foreground: #dffcff;
+  --border: #21323a;
+  --input: #2b3e47;
+  --ring: #59deca;
+  --sidebar: #0d161a;
+  --sidebar-foreground: #f4fbff;
+}
+
+.dark input[type="date"]::-webkit-calendar-picker-indicator,
+.dark input[type="time"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 8c37c80..8b3d9b0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { Schibsted_Grotesk, Martian_Mono } from "next/font/google";
 import { Suspense } from "react";
 import "./globals.css";
 import LightRays from "../components/LightRays";
@@ -8,17 +7,17 @@ import { PostHogProvider } from "./providers";
 import { Toaster } from "sonner";
 import BackToTop from '../components/BackToTop';
 
-
-const SchibstedGrotesk = Schibsted_Grotesk({
-  variable: "--font-schibsted-grotesk",
-  subsets: ["latin"],
-});
-
-const MartianMono = Martian_Mono({
-  variable: "--font-martian-mono",
-  subsets: ["latin"],
-});
-
+const themeScript = `
+  try {
+    const savedTheme = localStorage.getItem('devevent-theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = savedTheme === 'light' || savedTheme === 'dark'
+      ? savedTheme
+      : (prefersDark ? 'dark' : 'light');
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    document.documentElement.dataset.theme = theme;
+  } catch (_) {}
+`;
 export const metadata: Metadata = {
   title: "DevEvent",
   description: "The Hub for Every Dev Event that you Mustn't Miss",
@@ -31,9 +30,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${SchibstedGrotesk.variable} ${MartianMono.variable} antialiased`}
-      >
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>
         <Toaster richColors position="top-right" />
         <Suspense fallback={null}>
           <PostHogProvider>
@@ -64,4 +64,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}  
\ No newline at end of file
+}
diff --git a/app/my-bookings/page.tsx b/app/my-bookings/page.tsx
index e430470..350d774 100644
--- a/app/my-bookings/page.tsx
+++ b/app/my-bookings/page.tsx
@@ -1,192 +1,181 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { getBookingsByEmail, deleteBooking } from '@/lib/actions/booking.actions';
+import { CalendarDays, MapPin } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { deleteBooking, getBookingsByEmail } from "@/lib/actions/booking.actions";
+
+interface BookingEvent {
+  title: string;
+  description?: string;
+  date?: string;
+  location?: string;
+  venue?: string;
+  mode?: string;
+}
+
+interface BookingRecord {
+  _id: string;
+  eventId: BookingEvent | null;
+}
+
+function generateGoogleCalendarLink(event: BookingEvent) {
+  const baseUrl = "https://calendar.google.com/calendar/render?action=TEMPLATE";
+  const eventDate = event.date ? new Date(event.date) : new Date();
+  if (Number.isNaN(eventDate.getTime())) return "#";
+
+  const endDate = new Date(eventDate.getTime() + 2 * 60 * 60 * 1000);
+  const formatDate = (date: Date) => date.toISOString().replace(/-|:|\.\d{3}/g, "");
+  const params = new URLSearchParams({
+    text: event.title || "Tech Event",
+    dates: `${formatDate(eventDate)}/${formatDate(endDate)}`,
+    details: event.description || "DevEvent registration",
+    location: event.location || event.venue || "Online",
+  });
+
+  return `${baseUrl}&${params.toString()}`;
+}
 
 export default function MyBookingsPage() {
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState("");
   const [loading, setLoading] = useState(false);
   const [authenticated, setAuthenticated] = useState(false);
-  const [bookings, setBookings] = useState<any[]>([]);
-  const [modalOpen, setModalOpen] = useState(false);
+  const [bookings, setBookings] = useState<BookingRecord[]>([]);
   const [activeBookingId, setActiveBookingId] = useState<string | null>(null);
 
-  // Fetch registered events triggered by user submission setup
-  const handleFetchRegistrations = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleFetchRegistrations = async (event: React.FormEvent) => {
+    event.preventDefault();
     if (!email.trim()) return;
     setLoading(true);
 
-    const response = await getBookingsByEmail(email);
-    setLoading(false);
-    if (response.success) {
-      setBookings(response.bookings || []);
+    try {
+      const response = await getBookingsByEmail(email);
+      if (!response.success) throw new Error(response.error);
+      setBookings((response.bookings || []) as BookingRecord[]);
       setAuthenticated(true);
-    } else {
-      alert(response.error || 'Failed to authenticate profile. Please try again.');
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to load bookings.");
+    } finally {
+      setLoading(false);
     }
   };
 
-  // Triggers cancellation pipeline
   const handleCancelRegistration = async () => {
     if (!activeBookingId) return;
     setLoading(true);
-    
-    const response = await deleteBooking(activeBookingId);
-    setLoading(false);
-    setModalOpen(false);
-    setActiveBookingId(null);
 
-    if (response.success) {
-      // Instantly clear layout index matching the dropped booking
-      setBookings(prev => prev.filter(b => b._id !== activeBookingId));
-      alert('Registration successfully revoked.');
-    } else {
-      alert(response.error || 'Could not process cancellation.');
+    try {
+      const response = await deleteBooking(activeBookingId);
+      if (!response.success) throw new Error(response.error);
+      setBookings((current) => current.filter((booking) => booking._id !== activeBookingId));
+      toast.success("Registration cancelled.");
+      setActiveBookingId(null);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Could not cancel the booking.");
+    } finally {
+      setLoading(false);
     }
   };
 
-  // Helper utility function building custom preset links to export event configurations to Google Calendar
-  const generateGoogleCalendarLink = (event: any) => {
-    if (!event) return '#';
-    const baseUrl = 'https://calendar.google.com/calendar/render?action=TEMPLATE';
-    const text = encodeURIComponent(event.title || 'Tech Event');
-    
-    // Convert sample date formats or default to modern ranges safely
-    const eventDate = event.date ? new Date(event.date) : new Date();
-    const startTime = eventDate.toISOString().replace(/-|:|\.\d\d\d/g, "");
-    eventDate.setHours(eventDate.getHours() + 2); // Set arbitrary 2 hour runtime block
-    const endTime = eventDate.toISOString().replace(/-|:|\.\d\d\d/g, "");
-    
-    const dates = `${startTime}/${endTime}`;
-    const details = encodeURIComponent(event.description || 'Dev registration event.');
-    const location = encodeURIComponent(event.location || event.venue || 'Online/Specified Venue');
-    
-    return `${baseUrl}&text=${text}&dates=${dates}&details=${details}&location=${location}`;
+  const resetAccount = () => {
+    setAuthenticated(false);
+    setEmail("");
+    setBookings([]);
   };
 
   return (
-    <main className="min-h-screen max-w-6xl mx-auto py-12 px-4">
-      {/* View Layer 1: Authentication Phase Entry Screen */}
+    <section className="mx-auto min-h-[70vh] w-full max-w-6xl py-12">
       {!authenticated ? (
-        <div className="max-w-md mx-auto my-16 p-8 border rounded-2xl bg-white shadow-sm space-y-6">
-          <div className="text-center space-y-2">
-            <h1 className="text-2xl font-bold text-gray-900">My Registrations</h1>
-            <p className="text-sm text-gray-500">Enter your email address to access and manage your upcoming tech events.</p>
+        <div className="mx-auto my-16 max-w-md space-y-6 rounded-2xl border border-border bg-card p-8 text-card-foreground shadow-sm">
+          <div className="space-y-2 text-center">
+            <h1 className="text-3xl font-bold">My Bookings</h1>
+            <p className="text-sm text-muted-foreground">Enter your email address to view and manage your event registrations.</p>
           </div>
           <form onSubmit={handleFetchRegistrations} className="space-y-4">
+            <label htmlFor="bookings-email" className="sr-only">Email address</label>
             <input
+              id="bookings-email"
               type="email"
               required
+              autoComplete="email"
               placeholder="developer@example.com"
               value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm text-gray-900 "
+              onChange={(event) => setEmail(event.target.value)}
+              className="w-full rounded-xl border border-input bg-background px-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
             />
             <button
               type="submit"
               disabled={loading}
-              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 rounded-xl transition text-sm disabled:opacity-50"
+              className="w-full rounded-xl bg-primary py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
             >
-              {loading ? 'Searching Record Files...' : 'View My Bookings'}
+              {loading ? "Loading bookings…" : "View My Bookings"}
             </button>
           </form>
         </div>
       ) : (
-        /* View Layer 2: Dashboard Layout Panels Screen */
         <div className="space-y-8">
-          <div className="flex flex-col md:flex-row items-start md:items-center justify-between border-b pb-4 gap-4">
+          <div className="flex flex-col items-start justify-between gap-4 border-b border-border pb-4 md:flex-row md:items-center">
             <div>
-              <h1 className="text-2xl font-black text-gray-900">Dashboard</h1>
-              <p className="text-sm text-gray-400 mt-0.5">Showing event entries associated with: <span className="text-gray-700 font-medium">{email}</span></p>
+              <h1 className="text-3xl font-bold">Your Bookings</h1>
+              <p className="mt-1 text-sm text-muted-foreground">Registrations associated with <span className="font-medium text-foreground">{email}</span></p>
             </div>
-            <button
-              onClick={() => { setAuthenticated(false); setEmail(''); setBookings([]); }}
-              className="text-xs font-semibold text-gray-500 hover:text-gray-800 border px-3 py-1.5 rounded-lg hover:bg-gray-50 transition"
-            >
+            <button type="button" onClick={resetAccount} className="rounded-lg border border-border px-3 py-2 text-xs font-semibold text-muted-foreground transition hover:bg-accent hover:text-accent-foreground">
               Switch Account
             </button>
           </div>
 
-          {/* Grid Render Output */}
           {bookings.length > 0 ? (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {bookings.map((booking: any) => {
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {bookings.map((booking) => {
                 const event = booking.eventId;
-                if (!event) return null; // Edge protective fallback layer if parent model object missing
+                if (!event) return null;
                 return (
-                  <div key={booking._id} className="border bg-white rounded-2xl p-5 shadow-sm flex flex-col justify-between hover:shadow-md transition">
+                  <article key={booking._id} className="flex flex-col justify-between rounded-2xl border border-border bg-card p-5 text-card-foreground shadow-sm transition hover:-translate-y-1 hover:shadow-md">
                     <div className="space-y-3">
-                      <div className="flex items-center justify-between">
-                        <span className="text-[10px] font-bold tracking-wider uppercase bg-blue-50 text-blue-600 px-2.5 py-0.5 rounded-full">
-                          {event.mode || 'Confirmed'}
-                        </span>
-                        <span className="text-xs text-gray-400 font-mono">ID: {booking._id.slice(-6)}</span>
+                      <div className="flex items-center justify-between gap-3">
+                        <span className="rounded-full bg-accent px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-accent-foreground">{event.mode || "Confirmed"}</span>
+                        <span className="font-mono text-xs text-muted-foreground">ID: {booking._id.slice(-6)}</span>
                       </div>
-                      <h3 className="text-base font-bold text-gray-900 line-clamp-1">{event.title}</h3>
-                      <p className="text-xs text-gray-500 line-clamp-2">{event.description}</p>
-                      
-                      <div className="pt-2 space-y-1.5 text-xs text-gray-600 border-t border-gray-100">
-                        <div className="flex items-center gap-2">📅 <span>{event.date ? new Date(event.date).toLocaleDateString() : 'TBD'}</span></div>
-                        <div className="flex items-center gap-2">📍 <span className="line-clamp-1">{event.location || event.venue || 'Online Portal'}</span></div>
+                      <h2 className="line-clamp-2 text-base font-bold">{event.title}</h2>
+                      {event.description && <p className="line-clamp-2 text-xs text-muted-foreground">{event.description}</p>}
+                      <div className="space-y-2 border-t border-border pt-3 text-xs text-muted-foreground">
+                        <div className="flex items-center gap-2"><CalendarDays className="size-4" aria-hidden="true" /><span>{event.date ? new Date(event.date).toLocaleDateString() : "TBD"}</span></div>
+                        <div className="flex items-center gap-2"><MapPin className="size-4" aria-hidden="true" /><span className="line-clamp-1">{event.location || event.venue || "Online"}</span></div>
                       </div>
                     </div>
-
-                    <div className="mt-5 pt-3 border-t flex items-center gap-2">
-                      <a
-                        href={generateGoogleCalendarLink(event)}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="flex-1 text-center bg-gray-50 hover:bg-gray-100 border text-gray-700 font-medium py-1.5 rounded-lg text-xs transition"
-                      >
-                        📅 Add to Calendar
+                    <div className="mt-5 flex items-center gap-2 border-t border-border pt-3">
+                      <a href={generateGoogleCalendarLink(event)} target="_blank" rel="noopener noreferrer" className="flex-1 rounded-lg border border-border bg-secondary py-2 text-center text-xs font-medium text-secondary-foreground transition hover:bg-accent">
+                        Add to Calendar
                       </a>
-                      <button
-                        onClick={() => { setActiveBookingId(booking._id); setModalOpen(true); }}
-                        className="bg-red-50 hover:bg-red-100 text-red-600 font-medium px-3 py-1.5 rounded-lg text-xs transition"
-                      >
+                      <button type="button" onClick={() => setActiveBookingId(booking._id)} className="rounded-lg bg-red-50 px-3 py-2 text-xs font-medium text-red-700 transition hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/70">
                         Cancel
                       </button>
                     </div>
-                  </div>
+                  </article>
                 );
               })}
             </div>
           ) : (
-            /* Smooth Dashboard Empty State Component fallback execution block */
-            <div className="text-center py-16 border border-dashed rounded-2xl max-w-xl mx-auto bg-gray-50/50">
-              <h3 className="text-base font-semibold text-gray-800">No active registrations found</h3>
-              <p className="text-xs text-gray-400 mt-1 max-w-xs mx-auto">You haven't signed up for any events with this email profile segment yet.</p>
+            <div className="mx-auto max-w-xl rounded-2xl border border-dashed border-border bg-card/60 py-16 text-center">
+              <h2 className="text-base font-semibold">No active bookings found</h2>
+              <p className="mx-auto mt-1 max-w-xs text-xs text-muted-foreground">You haven&apos;t signed up for any events with this email yet.</p>
             </div>
           )}
         </div>
       )}
 
-      {/* Confirmation Step Sub-Modal Element Overlay */}
-      {modalOpen && (
-        <div className="fixed inset-0 bg-black/40 backdrop-blur-xs flex items-center justify-center p-4 z-50">
-          <div className="bg-white rounded-2xl p-6 max-w-sm w-full shadow-xl space-y-4">
-            <h3 className="text-base font-bold text-gray-900">Cancel Registration</h3>
-            <p className="text-xs text-gray-500">Are you sure you want to resign from this event? This action will permanently delete your booking record.</p>
+      {activeBookingId && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4 backdrop-blur-xs" role="presentation" onMouseDown={() => setActiveBookingId(null)}>
+          <div role="alertdialog" aria-modal="true" aria-labelledby="cancel-title" aria-describedby="cancel-description" className="w-full max-w-sm space-y-4 rounded-2xl border border-border bg-card p-6 text-card-foreground shadow-xl" onMouseDown={(event) => event.stopPropagation()}>
+            <h2 id="cancel-title" className="text-base font-bold">Cancel Registration</h2>
+            <p id="cancel-description" className="text-xs text-muted-foreground">Are you sure? This permanently removes your booking.</p>
             <div className="flex justify-end gap-2 pt-2">
-              <button
-                disabled={loading}
-                onClick={() => { setModalOpen(false); setActiveBookingId(null); }}
-                className="px-3 py-1.5 text-xs font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition"
-              >
-                No, Keep
-              </button>
-              <button
-                disabled={loading}
-                onClick={handleCancelRegistration}
-                className="px-3 py-1.5 text-xs font-semibold bg-red-600 hover:bg-red-700 text-white rounded-lg transition shadow-xs"
-              >
-                {loading ? 'Processing...' : 'Yes, Leave Event'}
-              </button>
+              <button type="button" disabled={loading} onClick={() => setActiveBookingId(null)} className="rounded-lg px-3 py-2 text-xs font-semibold text-muted-foreground transition hover:bg-accent">Keep Booking</button>
+              <button type="button" disabled={loading} onClick={handleCancelRegistration} className="rounded-lg bg-red-600 px-3 py-2 text-xs font-semibold text-white transition hover:bg-red-700 disabled:opacity-50">{loading ? "Cancelling…" : "Cancel Booking"}</button>
             </div>
           </div>
         </div>
       )}
-    </main>
+    </section>
   );
-}
\ No newline at end of file
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 8d1ee5d..e1c00c2 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -2,12 +2,12 @@ import Link from "next/link";
 
 export default function NotFound() {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-black text-white px-4 text-center">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background text-foreground px-4 text-center">
       <h1 className="text-6xl font-bold mb-4 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
         404
       </h1>
       <h2 className="text-2xl font-semibold mb-2">Page Not Found</h2>
-      <p className="text-gray-400 mb-6">
+      <p className="text-muted-foreground mb-6">
         Oops! The page you&apos;re looking for doesn&apos;t exist or has been moved.
       </p>
       <Link
@@ -18,4 +18,4 @@ export default function NotFound() {
       </Link>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/page.tsx b/app/page.tsx
index 20ffbc7..619c569 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,7 +3,6 @@ import EventCard from "@/components/EventCard";
 import SearchFilters from "@/components/SearchFilters"; // Added missing import
 import Footer from "@/components/Footer"; // Added missing import
 import { IEvent } from "@/database";
-import { cacheLife } from "next/cache";
 import { getAllEvents } from "@/lib/actions/event.actions";
 
 interface PageProps {
@@ -52,10 +51,10 @@ const Page = async ({ searchParams }: PageProps) => {
           </ul>
         ) : (
           /* Smooth Contextual Empty State displayed dynamically */
-          <div className="flex flex-col items-center justify-center text-center p-12 border border-dashed border-gray-300 rounded-2xl max-w-xl mx-auto bg-white/50">
-            <h4 className="text-lg font-semibold text-gray-800 mb-1">No events found</h4>
+          <div className="flex flex-col items-center justify-center text-center p-12 border border-dashed border-border rounded-2xl max-w-xl mx-auto bg-card/60">
+            <h4 className="text-lg font-semibold text-foreground mb-1">No events found</h4>
             {/* Fixed Linting Error: Escaped the apostrophe here */}
-            <p className="text-sm text-gray-500 max-w-xs">
+            <p className="text-sm text-muted-foreground max-w-xs">
               We couldn&apos;t find any listings matching your search constraints. Try checking your spelling or adjusting filters.
             </p>
           </div>
diff --git a/app/watchlist/page.tsx b/app/watchlist/page.tsx
index c2327a2..ab2a7a5 100644
--- a/app/watchlist/page.tsx
+++ b/app/watchlist/page.tsx
@@ -1,53 +1,46 @@
 "use client";
-import { useState } from "react";
 
-export default function WatchlistPage() {
-  const [bookmarks, setBookmarks] = useState<string[]>(() => {
-    if (typeof window === "undefined") return [];
+import { BookmarkX } from "lucide-react";
+import Link from "next/link";
+import { saveBookmarks, useBookmarks } from "@/lib/use-bookmarks";
 
-    return JSON.parse(
-      localStorage.getItem("bookmarkedEvents") || "[]"
-    );
-  });
+export default function WatchlistPage() {
+  const bookmarks = useBookmarks();
 
   const removeBookmark = (slug: string) => {
-    const updated = bookmarks.filter((item) => item !== slug);
-
-    setBookmarks(updated);
-
-    localStorage.setItem(
-      "bookmarkedEvents",
-      JSON.stringify(updated)
-    );
+    saveBookmarks(bookmarks.filter((item) => item !== slug));
   };
 
   return (
-    <main className="max-w-5xl mx-auto p-8">
-      <h1 className="text-3xl font-bold mb-6">
-        My Watchlist
-      </h1>
+    <section className="mx-auto min-h-[65vh] w-full max-w-5xl py-12">
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold">My Watchlist</h1>
+        <p className="mt-2 text-muted-foreground">Events you saved for later.</p>
+      </div>
 
       {bookmarks.length === 0 ? (
-        <p>No bookmarked events yet.</p>
+        <div className="rounded-2xl border border-dashed border-border bg-card/60 p-12 text-center">
+          <BookmarkX className="mx-auto mb-4 size-9 text-muted-foreground" aria-hidden="true" />
+          <h2 className="text-lg font-semibold">No saved events yet</h2>
+          <p className="mt-1 text-sm text-muted-foreground">Bookmark an event and it will appear here.</p>
+          <Link href="/events" className="mt-5 inline-flex rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90">
+            Explore Events
+          </Link>
+        </div>
       ) : (
-        <div className="space-y-4">
+        <ul className="space-y-4">
           {bookmarks.map((slug) => (
-            <div
-              key={slug}
-              className="border rounded-lg p-4 flex justify-between items-center"
-            >
-              <span>{slug}</span>
-
-              <button
-                onClick={() => removeBookmark(slug)}
-                className="px-3 py-1 bg-red-500 text-white rounded"
-              >
+            <li key={slug} className="flex items-center justify-between gap-4 rounded-xl border border-border bg-card p-4 text-card-foreground shadow-sm">
+              <Link href={`/events/${slug}`} className="font-medium capitalize hover:text-primary hover:underline">
+                {slug.replaceAll("-", " ")}
+              </Link>
+              <button type="button" onClick={() => removeBookmark(slug)} className="rounded-lg bg-red-50 px-3 py-2 text-sm font-medium text-red-700 transition hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/70">
                 Remove
               </button>
-            </div>
+            </li>
           ))}
-        </div>
+        </ul>
       )}
-    </main>
+    </section>
   );
-}
\ No newline at end of file
+}
diff --git a/components/BookEvent.tsx b/components/BookEvent.tsx
index 7313482..38bc112 100644
--- a/components/BookEvent.tsx
+++ b/components/BookEvent.tsx
@@ -31,7 +31,7 @@ const BookEvent = ({ eventId, slug }: { eventId: string; slug: string }) => {
                 captureEvent(POSTHOG_EVENTS.EVENT_BOOKED, { eventId, slug });
             } else {
                 setError(response.error || "An unexpected error occurred. Please try again.");
-                captureEvent(POSTHOG_EVENTS.BOOKING_FAILED, { eventId, slug, email });
+                captureEvent(POSTHOG_EVENTS.BOOKING_FAILED, { eventId, slug });
             }
         } catch {
             setError("A network error occurred. Please try again.");
diff --git a/components/CreateNewEvent.tsx b/components/CreateNewEvent.tsx
index 28cfc88..67c1abc 100644
--- a/components/CreateNewEvent.tsx
+++ b/components/CreateNewEvent.tsx
@@ -27,8 +27,8 @@ const eventSchema = z.object({
 
   location: z.string().min(2, "Location is required"),
 
-  mode: z.string().min(1, "Select event mode"),
-  type: z.string().min(1, "Select event type"),
+  mode: z.enum(["online", "offline", "hybrid"], "Select event mode"),
+  type: z.enum(["hackathon", "conference", "workshop", "meetup"], "Select event type"),
 
   targetAudience: z
     .string()
@@ -95,8 +95,8 @@ const CreateEventForm = () => {
 };
 const inputStyles = `
   w-full p-3 rounded-xl
-  bg-black/30
-  border border-cyan-500/10
+  bg-background/80 text-foreground placeholder:text-muted-foreground
+  border border-border
   focus:outline-none
   focus:border-cyan-400/40
   focus:ring-2
@@ -105,15 +105,14 @@ const inputStyles = `
 `;
 const selectStyles = `
   ${inputStyles}
-  bg-[#071018]
-  text-white
+  bg-background
   cursor-pointer
 `;
 
 const sectionStyles = `
   rounded-2xl
   border border-cyan-500/20
-  bg-white/[0.02]
+  bg-card/70
   backdrop-blur-sm
   p-6
   space-y-6
@@ -277,13 +276,13 @@ const buttonStyles = `
                 id="mode-select"
                 {...register("mode")}
                 className={selectStyles}>
-            <option value="" className="bg-[#071018] text-gray-400">
+            <option value="">
   Select Mode
 </option>
 
-        <option value="online" className="bg-[#071018]">Online</option>
-        <option value="offline" className="bg-[#071018]">Offline</option>
-        <option value="hybrid" className="bg-[#071018]">Hybrid</option>
+        <option value="online">Online</option>
+        <option value="offline">Offline</option>
+        <option value="hybrid">Hybrid</option>
           </select>
 
           {errors.mode && (
@@ -409,4 +408,4 @@ const buttonStyles = `
     );
   };
      
-export default CreateEventForm;
\ No newline at end of file
+export default CreateEventForm;
diff --git a/components/EventCard.tsx b/components/EventCard.tsx
index 96aef17..99ecc71 100644
--- a/components/EventCard.tsx
+++ b/components/EventCard.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import { Bookmark } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
 import { captureEvent } from "@/lib/posthog/helpers";
 import { POSTHOG_EVENTS } from "@/lib/posthog/events";
+import { saveBookmarks, useBookmarks } from "@/lib/use-bookmarks";
 
 interface Props {
   title: string;
@@ -15,51 +16,23 @@ interface Props {
   slug: string;
 }
 
-const EventCard = ({
-  title,
-  image,
-  location,
-  date,
-  time,
-  slug,
-}: Props) => {
-  const [bookmarked, setBookmarked] = useState(() => {
-    if (typeof window === "undefined") return false;
+const EventCard = ({ title, image, location, date, time, slug }: Props) => {
+  const bookmarks = useBookmarks();
+  const bookmarked = bookmarks.includes(slug);
 
-    const saved = JSON.parse(
-      localStorage.getItem("bookmarkedEvents") || "[]"
-    );
-
-    return saved.includes(slug);
-  });
-
-  const toggleBookmark = (
-    e: React.MouseEvent
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const saved = JSON.parse(
-      localStorage.getItem("bookmarkedEvents") || "[]"
-    );
-
-    let updated;
+  const toggleBookmark = (event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
 
-    if (saved.includes(slug)) {
-      updated = saved.filter(
-        (item: string) => item !== slug
-      );
-      setBookmarked(false);
-      captureEvent(POSTHOG_EVENTS.EVENT_UNBOOKMARKED, { slug, title });
-    } else {
-      updated = [...saved, slug];
-      setBookmarked(true);
-      captureEvent(POSTHOG_EVENTS.EVENT_BOOKMARKED, { slug, title });
-    }
+    const isRemoving = bookmarks.includes(slug);
+    const updated = isRemoving
+      ? bookmarks.filter((item) => item !== slug)
+      : [...bookmarks, slug];
 
-    localStorage.setItem(
-      "bookmarkedEvents",
-      JSON.stringify(updated)
+    saveBookmarks(updated);
+    captureEvent(
+      isRemoving ? POSTHOG_EVENTS.EVENT_UNBOOKMARKED : POSTHOG_EVENTS.EVENT_BOOKMARKED,
+      { slug, title },
     );
   };
 
@@ -67,19 +40,7 @@ const EventCard = ({
     <Link
       href={`/events/${slug}`}
       onClick={() => captureEvent(POSTHOG_EVENTS.EVENT_VIEWED, { slug, title })}
-      className="
-    event-card
-    group
-    cursor-pointer
-    rounded-2xl
-    overflow-hidden
-    border border-cyan-500/10
-    transition-all duration-300 ease-out
-    hover:-translate-y-2
-    hover:border-cyan-400/30
-    hover:bg-white/2
-    hover:shadow-[0_0_25px_rgba(34,211,238,0.15)]
-  "
+      className="event-card group cursor-pointer overflow-hidden rounded-2xl border border-cyan-500/10 bg-card/70 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-cyan-400/30 hover:bg-card hover:shadow-[0_0_25px_rgba(34,211,238,0.15)]"
     >
       <div className="overflow-hidden">
         <Image
@@ -87,56 +48,39 @@ const EventCard = ({
           alt={title}
           width={410}
           height={300}
-          className="
-          poster
-          transition-transform duration-500
-          group-hover:scale-105
-          group-hover:brightness-110
-          "
+          className="poster transition-transform duration-500 group-hover:scale-105 group-hover:brightness-110"
         />
       </div>
 
       <div className="p-4">
         <div className="flex justify-end">
           <button
+            type="button"
             onClick={toggleBookmark}
-            className="text-xl"
+            className="flex size-9 items-center justify-center rounded-full text-muted-foreground transition hover:bg-accent hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={bookmarked ? `Remove ${title} from watchlist` : `Add ${title} to watchlist`}
+            aria-pressed={bookmarked}
           >
-            {bookmarked ? "🔖" : "📑"}
+            <Bookmark size={19} fill={bookmarked ? "currentColor" : "none"} aria-hidden="true" />
           </button>
         </div>
-        <div className="flex flex-row gap-2 mt-1">
-          <Image
-            src="/icons/pin.svg"
-            alt="location"
-            width={14}
-            height={14}
-          />
+
+        <div className="mt-1 flex flex-row gap-2">
+          <Image src="/icons/pin.svg" alt="" width={14} height={14} aria-hidden="true" />
           <p>{location}</p>
         </div>
 
-        <p className="title transition-colors duration-300 group-hover:text-cyan-300">
+        <p className="title transition-colors duration-300 group-hover:text-cyan-600 dark:group-hover:text-cyan-300">
           {title}
         </p>
 
         <div className="datetime mt-4">
           <div>
-            <Image
-              src="/icons/calendar.svg"
-              alt="date"
-              width={14}
-              height={14}
-            />
+            <Image src="/icons/calendar.svg" alt="" width={14} height={14} aria-hidden="true" />
             <p>{date}</p>
           </div>
-
           <div>
-            <Image
-              src="/icons/clock.svg"
-              alt="time"
-              width={14}
-              height={14}
-            />
+            <Image src="/icons/clock.svg" alt="" width={14} height={14} aria-hidden="true" />
             <p>{time}</p>
           </div>
         </div>
diff --git a/components/EventDetails.tsx b/components/EventDetails.tsx
index 47a6dc5..6195316 100644
--- a/components/EventDetails.tsx
+++ b/components/EventDetails.tsx
@@ -71,7 +71,9 @@ const EventDetails = async ({ params }: { params: Promise<string> }) => {
 
     // Fetch actual booking count for this event
     const bookingCountResult = await getBookingsCountByEventId(event._id);
-    const bookings = bookingCountResult.success ? bookingCountResult.count : 0;
+    const bookings = bookingCountResult.success && typeof bookingCountResult.count === "number"
+        ? bookingCountResult.count
+        : 0;
 
     const similarEvents: IEvent[] = await getSimilarEventsBySlug(slug);
 
@@ -140,4 +142,4 @@ const EventDetails = async ({ params }: { params: Promise<string> }) => {
         </section>
     )
 }
-export default EventDetails
\ No newline at end of file
+export default EventDetails
diff --git a/components/EventDetailsSkeleton.tsx b/components/EventDetailsSkeleton.tsx
index 8c564e3..0bf5a7b 100644
--- a/components/EventDetailsSkeleton.tsx
+++ b/components/EventDetailsSkeleton.tsx
@@ -4,26 +4,26 @@ export default function EventDetailsSkeleton() {
     <div className="animate-pulse p-6 space-y-8">
       {/* Header Skeleton */}
       <div className="space-y-3">
-        <div className="h-8 bg-gray-700 rounded w-1/3"></div>
-        <div className="h-4 bg-gray-700 rounded w-2/3"></div>
+        <div className="h-8 bg-muted rounded w-1/3"></div>
+        <div className="h-4 bg-muted rounded w-2/3"></div>
       </div>
 
       {/* Main Content Area */}
       <div className="flex gap-8">
         <div className="flex-1 space-y-6">
           {/* Banner Image Placeholder */}
-          <div className="h-64 bg-gray-700 rounded-lg w-full"></div>
+          <div className="h-64 bg-muted rounded-lg w-full"></div>
           {/* Overview Section */}
-          <div className="h-20 bg-gray-700 rounded w-full"></div>
+          <div className="h-20 bg-muted rounded w-full"></div>
           {/* Details list */}
           <div className="space-y-3">
-            {[1, 2, 3].map((i) => <div key={i} className="h-6 bg-gray-700 rounded w-1/2"></div>)}
+            {[1, 2, 3].map((i) => <div key={i} className="h-6 bg-muted rounded w-1/2"></div>)}
           </div>
         </div>
 
         {/* Sidebar/Booking Placeholder */}
-        <div className="w-80 h-60 bg-gray-700 rounded-lg"></div>
+        <div className="w-80 h-60 bg-muted rounded-lg"></div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/ExploreBtn.tsx b/components/ExploreBtn.tsx
index d4b86e1..fa5c9bf 100644
--- a/components/ExploreBtn.tsx
+++ b/components/ExploreBtn.tsx
@@ -1,10 +1,11 @@
 'use client';
 
 import Image from "next/image";
+import Link from "next/link";
 
 const ExploreBtn = () => {
   return (
-    <a
+    <Link
       href="/events"
       className="
         group
@@ -28,7 +29,7 @@ const ExploreBtn = () => {
         height={20}
         className="transition-transform duration-300 group-hover:translate-y-1"
       />
-    </a>
+    </Link>
   )
 }
 
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 673fc0b..c880d0d 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -13,7 +13,7 @@ const Footer = () => {
               DevEvent
             </h2>
 
-            <p className="mt-3 text-gray-400 text-sm leading-6">
+            <p className="mt-3 text-muted-foreground text-sm leading-6">
               The hub for developers to discover hackathons,
               meetups, conferences, and opportunities worldwide.
             </p>
@@ -23,7 +23,7 @@ const Footer = () => {
           <div>
             <h3 className="text-lg font-semibold mb-4">Quick Links</h3>
 
-            <ul className="space-y-3 text-gray-400 list-none">
+            <ul className="space-y-3 text-muted-foreground list-none">
               <li>
                 <Link href="/" className="hover:text-cyan-400 transition duration-300">
                   Home
@@ -54,7 +54,7 @@ const Footer = () => {
           <div>
             <h3 className="text-lg font-semibold mb-4">Connect</h3>
 
-            <ul className="space-y-3 text-gray-400 list-none">
+            <ul className="space-y-3 text-muted-foreground list-none">
               <li>
                 <a
                   href="https://github.com/niharika-mente"
@@ -82,7 +82,7 @@ const Footer = () => {
         </div>
 
         {/* Bottom Section */}
-        <div className="mt-10 border-t border-cyan-500/10 pt-5 text-center text-gray-500 text-sm">
+        <div className="mt-10 border-t border-cyan-500/10 pt-5 text-center text-muted-foreground text-sm">
           <p>Connecting developers with opportunities.</p>
 
           <p className="mt-2">
@@ -95,4 +95,4 @@ const Footer = () => {
   )
 }
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/components/LightRays.tsx b/components/LightRays.tsx
index 19519e6..d0bd13c 100644
--- a/components/LightRays.tsx
+++ b/components/LightRays.tsx
@@ -30,6 +30,24 @@ interface LightRaysProps {
   className?: string;
 }
 
+interface RaysUniforms {
+  iTime: { value: number };
+  iResolution: { value: number[] };
+  rayPos: { value: number[] };
+  rayDir: { value: number[] };
+  raysColor: { value: number[] };
+  raysSpeed: { value: number };
+  lightSpread: { value: number };
+  rayLength: { value: number };
+  pulsating: { value: number };
+  fadeDistance: { value: number };
+  saturation: { value: number };
+  mousePos: { value: number[] };
+  mouseInfluence: { value: number };
+  noiseAmount: { value: number };
+  distortion: { value: number };
+}
+
 const DEFAULT_COLOR = "#ffffff";
 
 const hexToRgb = (hex: string): [number, number, number] => {
@@ -87,12 +105,12 @@ const LightRays: React.FC<LightRaysProps> = ({
   className = "",
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const uniformsRef = useRef<any>(null);
+  const uniformsRef = useRef<RaysUniforms | null>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const mouseRef = useRef({ x: 0.5, y: 0.5 });
   const smoothMouseRef = useRef({ x: 0.5, y: 0.5 });
   const animationIdRef = useRef<number | null>(null);
-  const meshRef = useRef<any>(null);
+  const meshRef = useRef<Mesh | null>(null);
   const cleanupFunctionRef = useRef<(() => void) | null>(null);
   const [isVisible, setIsVisible] = useState(false);
   const observerRef = useRef<IntersectionObserver | null>(null);
@@ -450,4 +468,4 @@ void main() {
   );
 };
 
-export default LightRays;
\ No newline at end of file
+export default LightRays;
diff --git a/components/NavLinks.tsx b/components/NavLinks.tsx
index 7a7e44e..4e35b4f 100644
--- a/components/NavLinks.tsx
+++ b/components/NavLinks.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 import { Menu, X } from "lucide-react";
+import ThemeToggle from "./ThemeToggle";
 
 const links = [
   { name: "Home", href: "/" },
@@ -30,7 +31,7 @@ export default function NavLinks() {
             className={`relative group text-sm cursor-pointer ${
               pathname === link.href
                 ? "text-cyan-400"
-                : "text-white hover:text-cyan-400"
+                : "text-foreground/80 hover:text-cyan-600 dark:hover:text-cyan-400"
             }`}
           >
             {link.name}
@@ -42,23 +43,27 @@ export default function NavLinks() {
             />
           </Link>
         ))}
+        <ThemeToggle />
       </div>
 
-      <button
-        onClick={() => setOpen(!open)}
-        className="md:hidden text-white cursor-pointer"
-        aria-label="Toggle Menu"
-        aria-expanded={open}
-        aria-controls="mobile-menu"
-      >
-        {open ? <X size={26} /> : <Menu size={26} />}
-      </button>
+      <div className="flex items-center gap-2 md:hidden">
+        <ThemeToggle />
+        <button
+          onClick={() => setOpen(!open)}
+          className="flex size-9 cursor-pointer items-center justify-center rounded-full text-foreground hover:bg-accent"
+          aria-label="Toggle navigation menu"
+          aria-expanded={open}
+          aria-controls="mobile-menu"
+        >
+          {open ? <X size={24} /> : <Menu size={24} />}
+        </button>
+      </div>
 
       {/* Mobile Menu */}
       {open && (
         <div
           id="mobile-menu"
-          className="absolute top-full left-0 w-full bg-black border-t border-gray-800 md:hidden"
+          className="absolute top-full left-0 w-full border-t border-border bg-background/98 shadow-lg md:hidden"
         >
           <div className="flex flex-col p-4 gap-4">
             {links.map((link) => (
@@ -68,7 +73,7 @@ export default function NavLinks() {
                 onClick={() => setOpen(false)}
                 aria-current={pathname === link.href ? "page" : undefined}
                 className={`text-sm ${
-                  pathname === link.href ? "text-cyan-400" : "text-white"
+                  pathname === link.href ? "text-cyan-600 dark:text-cyan-400" : "text-foreground"
                 }`}
               >
                 {link.name}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index e00a7b3..22eb1a3 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -5,7 +5,7 @@ import NavLinks from "./NavLinks";
 
 const Navbar = () => {
   return (
-    <header className="sticky top-0 z-50 bg-black/90 backdrop-blur-md border-b border-gray-800">
+    <header className="sticky top-0 z-50 border-b border-border bg-background/90 backdrop-blur-md">
       <nav className="max-w-7xl mx-auto flex items-center justify-between px-4 py-4">
         <Link href="/" className="flex items-center gap-2 shrink-0">
           <Image
@@ -14,7 +14,7 @@ const Navbar = () => {
             width={24}
             height={24}
           />
-          <span className="text-white font-bold text-lg">
+          <span className="text-foreground font-bold text-lg">
             DevEvent
           </span>
         </Link>
@@ -27,4 +27,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/components/SearchFilters.tsx b/components/SearchFilters.tsx
index add7e18..5378872 100644
--- a/components/SearchFilters.tsx
+++ b/components/SearchFilters.tsx
@@ -1,103 +1,95 @@
-'use client';
+"use client";
 
-import { useRouter, useSearchParams, usePathname } from 'next/navigation';
-import { useState, useEffect } from 'react';
-import { captureEvent } from '@/lib/posthog/helpers';
-import { POSTHOG_EVENTS } from '@/lib/posthog/events';
+import { Search } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { POSTHOG_EVENTS } from "@/lib/posthog/events";
+import { captureEvent } from "@/lib/posthog/helpers";
 
-const MODES = ['All', 'Online', 'Offline', 'Hybrid'];
-const POPULAR_TAGS = ['All', 'Hackathon', 'Meetup', 'Web3', 'React', 'DevOps', 'AI'];
+const MODES = ["All", "Online", "Offline", "Hybrid"];
+const POPULAR_TAGS = ["All", "Hackathon", "Meetup", "Web3", "React", "DevOps", "AI"];
 
 const SORT_OPTIONS = [
-  { label: 'Newest First', value: '' },
-  { label: 'Date (Earliest First)', value: 'date_asc' },
-  { label: 'Date (Latest First)', value: 'date_desc' },
-  { label: 'Popularity (Most Booked)', value: 'popularity' },
-  { label: 'Name (A–Z)', value: 'name_asc' },
-  { label: 'Name (Z–A)', value: 'name_desc' },
+  { label: "Newest First", value: "" },
+  { label: "Date (Earliest First)", value: "date_asc" },
+  { label: "Date (Latest First)", value: "date_desc" },
+  { label: "Popularity (Most Booked)", value: "popularity" },
+  { label: "Name (A–Z)", value: "name_asc" },
+  { label: "Name (Z–A)", value: "name_desc" },
 ];
 
 export default function SearchFilters() {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const [search, setSearch] = useState(searchParams.get("query") || "");
 
-  const [search, setSearch] = useState(searchParams.get('query') || '');
-
-  const handleFilterChange = (key: string, value: string) => {
+  const handleFilterChange = useCallback((key: string, value: string) => {
     const params = new URLSearchParams(searchParams.toString());
-    if (value && value !== 'All') {
-      params.set(key, value);
-    } else {
-      params.delete(key);
-    }
-    router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    if (value && value !== "All") params.set(key, value);
+    else params.delete(key);
+    if (key !== "page") params.delete("page");
+
+    const queryString = params.toString();
+    router.push(queryString ? `${pathname}?${queryString}` : pathname, { scroll: false });
     captureEvent(POSTHOG_EVENTS.EVENT_FILTER_CHANGED, { filter: key, value });
-  };
+  }, [pathname, router, searchParams]);
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      handleFilterChange('query', search);
-      if (search.trim()) {
-        captureEvent(POSTHOG_EVENTS.EVENT_SEARCHED, { query: search });
-      }
+    const timer = window.setTimeout(() => {
+      if (search === (searchParams.get("query") || "")) return;
+      handleFilterChange("query", search);
+      if (search.trim()) captureEvent(POSTHOG_EVENTS.EVENT_SEARCHED, { query: search });
     }, 400);
-    return () => clearTimeout(timer);
-  }, [search]);
+    return () => window.clearTimeout(timer);
+  }, [handleFilterChange, search, searchParams]);
 
   const selectClass =
-    'px-3 py-1.5 rounded-lg border border-[var(--color-border-dark)] bg-[var(--color-dark-200)] text-[var(--color-light-100)] text-sm focus:outline-none focus:ring-1 focus:ring-[var(--color-blue)] transition cursor-pointer';
+    "rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground transition cursor-pointer focus:outline-none focus:ring-2 focus:ring-ring";
 
   return (
-    <div className="w-full max-w-6xl mx-auto my-6 px-4 space-y-4">
-      {/* Search input */}
+    <div className="mx-auto my-6 w-full max-w-6xl space-y-4 px-4">
       <div className="relative">
-        <span className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--color-light-200)] text-sm pointer-events-none">
-          🔍
-        </span>
+        <Search className="pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
+        <label htmlFor="event-search-input" className="sr-only">Search events</label>
         <input
           id="event-search-input"
-          type="text"
+          type="search"
           placeholder="Search events by title, description or tags..."
           value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="w-full pl-10 pr-4 py-3 rounded-xl border border-[var(--color-border-dark)] bg-[var(--color-dark-200)] text-[var(--color-light-100)] placeholder:text-[var(--color-light-200)] focus:outline-none focus:ring-1 focus:ring-[var(--color-blue)] shadow-sm transition"
+          onChange={(event) => setSearch(event.target.value)}
+          className="w-full rounded-xl border border-border bg-card py-3 pl-10 pr-4 text-foreground shadow-sm transition placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
         />
       </div>
 
-      {/* Filter row */}
-      <div className="flex flex-col md:flex-row gap-4 md:items-center justify-between pt-1">
-
-        {/* Mode filter */}
-        <div className="flex items-center gap-2 shrink-0">
-          <span className="text-sm font-medium text-[var(--color-light-200)]">Mode:</span>
+      <div className="flex flex-col justify-between gap-4 pt-1 md:flex-row md:items-center">
+        <div className="flex shrink-0 items-center gap-2">
+          <label htmlFor="event-mode-filter" className="text-sm font-medium text-muted-foreground">Mode:</label>
           <select
             id="event-mode-filter"
-            value={searchParams.get('mode') || 'All'}
-            onChange={(e) => handleFilterChange('mode', e.target.value)}
+            value={searchParams.get("mode") || "All"}
+            onChange={(event) => handleFilterChange("mode", event.target.value)}
             className={selectClass}
           >
-            {MODES.map((mode) => (
-              <option key={mode} value={mode}>{mode}</option>
-            ))}
+            {MODES.map((mode) => <option key={mode} value={mode}>{mode}</option>)}
           </select>
         </div>
 
-        {/* Tag pills */}
-        <div className="flex items-center gap-2 overflow-x-auto max-w-full">
-          <span className="text-sm font-medium text-[var(--color-light-200)] shrink-0">Tags:</span>
-          <div className="flex gap-1.5 flex-wrap">
+        <div className="flex max-w-full items-center gap-2 overflow-x-auto">
+          <span className="shrink-0 text-sm font-medium text-muted-foreground">Tags:</span>
+          <div className="flex flex-wrap gap-1.5">
             {POPULAR_TAGS.map((tag) => {
-              const isActive = (searchParams.get('tag') || 'All') === tag;
+              const isActive = (searchParams.get("tag") || "All") === tag;
               return (
                 <button
+                  type="button"
                   key={tag}
-                  id={`tag-filter-${tag.toLowerCase()}`}
-                  onClick={() => handleFilterChange('tag', tag)}
-                  className={`px-3 py-1 text-xs font-medium rounded-full border transition cursor-pointer ${
+                  onClick={() => handleFilterChange("tag", tag)}
+                  aria-pressed={isActive}
+                  className={`cursor-pointer rounded-full border px-3 py-1 text-xs font-medium transition ${
                     isActive
-                      ? 'bg-[var(--primary)] text-black border-[var(--primary)]'
-                      : 'bg-[var(--color-dark-100)] text-[var(--color-light-100)] border-[var(--color-border-dark)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]'
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-border bg-card text-foreground hover:border-primary hover:text-primary"
                   }`}
                 >
                   {tag}
@@ -107,25 +99,15 @@ export default function SearchFilters() {
           </div>
         </div>
 
-        {/* Sort dropdown */}
-        <div className="flex items-center gap-2 shrink-0">
-          <label
-            htmlFor="event-sort-select"
-            className="text-sm font-medium text-[var(--color-light-200)] whitespace-nowrap"
-          >
-            Sort by:
-          </label>
+        <div className="flex shrink-0 items-center gap-2">
+          <label htmlFor="event-sort-select" className="whitespace-nowrap text-sm font-medium text-muted-foreground">Sort by:</label>
           <select
             id="event-sort-select"
-            value={searchParams.get('sortBy') || ''}
-            onChange={(e) => handleFilterChange('sortBy', e.target.value)}
+            value={searchParams.get("sortBy") || ""}
+            onChange={(event) => handleFilterChange("sortBy", event.target.value)}
             className={`${selectClass} min-w-[185px]`}
           >
-            {SORT_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
+            {SORT_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
           </select>
         </div>
       </div>
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
new file mode 100644
index 0000000..72e26c8
--- /dev/null
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+
+export default function ThemeToggle() {
+  const toggleTheme = () => {
+    const nextTheme = document.documentElement.classList.contains("dark") ? "light" : "dark";
+    document.documentElement.classList.toggle("dark", nextTheme === "dark");
+    document.documentElement.dataset.theme = nextTheme;
+    localStorage.setItem("devevent-theme", nextTheme);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      className="flex size-9 items-center justify-center rounded-full border border-border bg-card text-card-foreground shadow-sm transition hover:border-primary/60 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+      aria-label="Toggle color theme"
+      title="Toggle color theme"
+    >
+      <Moon className="size-[17px] dark:hidden" aria-hidden="true" />
+      <Sun className="hidden size-[17px] dark:block" aria-hidden="true" />
+    </button>
+  );
+}
diff --git a/lib/actions/booking.actions.ts b/lib/actions/booking.actions.ts
index 1df4286..fb2ea1c 100644
--- a/lib/actions/booking.actions.ts
+++ b/lib/actions/booking.actions.ts
@@ -26,8 +26,8 @@ export async function createBooking({ eventId, slug, email }: CreateBookingParam
         revalidatePath("/");
 
         return { success: true, booking: JSON.parse(JSON.stringify(booking)) };
-    } catch (error: any) {
-        if (error.code === 11000) {
+    } catch (error: unknown) {
+        if (typeof error === "object" && error !== null && "code" in error && error.code === 11000) {
             return { success: false, error: 'You have already booked this event' };
         }
         console.error('Error creating booking:', error);
diff --git a/lib/actions/create-event.actions.ts b/lib/actions/create-event.actions.ts
index 6129d94..3bf7b4f 100644
--- a/lib/actions/create-event.actions.ts
+++ b/lib/actions/create-event.actions.ts
@@ -12,8 +12,8 @@ type CreateEventInput = {
   date: string;
   time: string;
   location: string;
-  mode: string;
-  type: string;
+  mode: "online" | "offline" | "hybrid";
+  type: "hackathon" | "conference" | "workshop" | "meetup";
   targetAudience: string;
   agenda: string;
   organizer: string;
@@ -60,12 +60,11 @@ export async function createEvent(data: CreateEventInput)  {
       success: true,
       event: JSON.parse(JSON.stringify(event)),
     };
-  } catch (error: any) {
+  } catch (error: unknown) {
   console.error("Create Event Error:", error);
 
   const message =
-    error?.errors?.[0]?.message ||  // Mongoose validation error
-    error?.message ||               // General JS error
+    (error instanceof Error && error.message) ||
     "Failed to create event";       // Fallback
 
   return {
@@ -73,4 +72,4 @@ export async function createEvent(data: CreateEventInput)  {
     error: message,
   };
 }
-}
\ No newline at end of file
+}
diff --git a/lib/actions/event.actions.ts b/lib/actions/event.actions.ts
index d3ede59..5d7b6a3 100644
--- a/lib/actions/event.actions.ts
+++ b/lib/actions/event.actions.ts
@@ -1,37 +1,141 @@
-import connectToDatabase from "@/lib/mongodb";
+"use server";
+
+import type { QueryFilter, SortOrder } from "mongoose";
+import { type IEvent } from "@/database";
 import Event from "@/database/event.model";
+import connectToDatabase from "@/lib/mongodb";
+
+type SortBy = "date_asc" | "date_desc" | "name_asc" | "name_desc" | "popularity";
+
+interface EventFilters {
+  query?: string;
+  mode?: string;
+  tag?: string;
+  sortBy?: SortBy;
+}
+
+interface PaginatedEvents {
+  events: IEvent[];
+  total: number;
+  totalPages: number;
+  currentPage: number;
+}
 
-const escapeRegex = (text: string) => text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+const escapeRegex = (text: string) => text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+
+function buildFilter(filters?: EventFilters): QueryFilter<IEvent> {
+  const queryCondition: QueryFilter<IEvent> = {};
+
+  if (filters?.query) {
+    const safeQuery = escapeRegex(filters.query);
+    queryCondition.$or = [
+      { title: { $regex: safeQuery, $options: "i" } },
+      { description: { $regex: safeQuery, $options: "i" } },
+      { tags: { $regex: safeQuery, $options: "i" } },
+    ];
+  }
+
+  if (filters?.mode && filters.mode !== "All") {
+    queryCondition.mode = { $regex: new RegExp(`^${escapeRegex(filters.mode)}$`, "i") };
+  }
+
+  if (filters?.tag && filters.tag !== "All") {
+    queryCondition.tags = { $regex: new RegExp(`^${escapeRegex(filters.tag)}$`, "i") };
+  }
 
-export async function getAllEvents(filters?: { query?: string; mode?: string; tag?: string }) {
+  return queryCondition;
+}
+
+function getSort(sortBy?: SortBy): Record<string, SortOrder> {
+  switch (sortBy) {
+    case "date_asc": return { date: 1 };
+    case "date_desc": return { date: -1 };
+    case "name_asc": return { title: 1 };
+    case "name_desc": return { title: -1 };
+    default: return { createdAt: -1 };
+  }
+}
+
+export async function getAllEvents(filters?: EventFilters): Promise<IEvent[]>;
+export async function getAllEvents(filters: EventFilters | undefined, page: number, limit: number): Promise<PaginatedEvents>;
+export async function getAllEvents(
+  filters?: EventFilters,
+  page?: number,
+  limit?: number,
+): Promise<IEvent[] | PaginatedEvents> {
   try {
     await connectToDatabase();
-    const queryCondition: any = {};
-
-    if (filters?.query) {
-      const safeQuery = escapeRegex(filters.query);
-      queryCondition.$or = [
-        { title: { $regex: safeQuery, $options: 'i' } },
-        { description: { $regex: safeQuery, $options: 'i' } },
-        { tags: { $regex: safeQuery, $options: 'i' } }
-      ];
+    const queryCondition = buildFilter(filters);
+
+    if (page === undefined || limit === undefined) {
+      const events = await Event.find(queryCondition).sort(getSort(filters?.sortBy)).lean();
+      return JSON.parse(JSON.stringify(events)) as IEvent[];
     }
 
-    if (filters?.mode && filters.mode !== 'All') {
-      const safeMode = escapeRegex(filters.mode);
-      queryCondition.mode = { $regex: new RegExp(`^${safeMode}$`, 'i') };
+    const safePage = Math.max(1, page);
+    const safeLimit = Math.min(100, Math.max(1, limit));
+    const skip = (safePage - 1) * safeLimit;
+    const total = await Event.countDocuments(queryCondition);
+
+    if (filters?.sortBy === "popularity") {
+      const events = await Event.aggregate<IEvent>([
+        { $match: queryCondition },
+        { $lookup: { from: "bookings", localField: "_id", foreignField: "eventId", as: "bookings" } },
+        { $addFields: { bookingCount: { $size: "$bookings" } } },
+        { $sort: { bookingCount: -1, createdAt: -1 } },
+        { $project: { bookings: 0, bookingCount: 0 } },
+        { $skip: skip },
+        { $limit: safeLimit },
+      ]);
+      return {
+        events: JSON.parse(JSON.stringify(events)) as IEvent[],
+        total,
+        totalPages: Math.max(1, Math.ceil(total / safeLimit)),
+        currentPage: safePage,
+      };
     }
 
-    if (filters?.tag && filters.tag !== 'All') {
-      const safeTag = escapeRegex(filters.tag);
-      queryCondition.tags = { $regex: new RegExp(`^${safeTag}$`, 'i') };
+    const events = await Event.find(queryCondition)
+      .sort(getSort(filters?.sortBy))
+      .skip(skip)
+      .limit(safeLimit)
+      .lean();
+
+    return {
+      events: JSON.parse(JSON.stringify(events)) as IEvent[],
+      total,
+      totalPages: Math.max(1, Math.ceil(total / safeLimit)),
+      currentPage: safePage,
+    };
+  } catch (error) {
+    console.error("Error fetching events:", error);
+    if (page !== undefined && limit !== undefined) {
+      return { events: [], total: 0, totalPages: 1, currentPage: Math.max(1, page) };
     }
+    return [];
+  }
+}
+
+export async function getSimilarEventsBySlug(slug: string): Promise<IEvent[]> {
+  try {
+    await connectToDatabase();
+    const currentEvent = await Event.findOne({ slug }).select("_id type tags").lean();
+    if (!currentEvent) return [];
 
-    const events = await Event.find(queryCondition).sort({ createdAt: -1 });
-    return JSON.parse(JSON.stringify(events));
+    const similarEvents = await Event.find({
+      _id: { $ne: currentEvent._id },
+      $or: [
+        { type: currentEvent.type },
+        { tags: { $in: currentEvent.tags } },
+      ],
+    })
+      .sort({ createdAt: -1 })
+      .limit(3)
+      .lean();
 
+    return JSON.parse(JSON.stringify(similarEvents)) as IEvent[];
   } catch (error) {
-    console.error('Error fetching events:', error);
-    return []; 
+    console.error("Error fetching similar events:", error);
+    return [];
   }
 }
diff --git a/lib/mongodb.ts b/lib/mongodb.ts
index 95f845f..e03b7ba 100644
--- a/lib/mongodb.ts
+++ b/lib/mongodb.ts
@@ -6,12 +6,6 @@ import mongoose, { Mongoose } from "mongoose";
  */
 const MONGODB_URI = process.env.MONGODB_URI;
 
-if (!MONGODB_URI) {
-    throw new Error(
-        "Please define the MONGODB_URI environment variable inside .env.local"
-    );
-}
-
 /**
  * Interface for the cached connection object.
  * - conn: The active Mongoose connection instance (or null if not connected).
@@ -27,7 +21,6 @@ interface MongooseCache {
  * This prevents TypeScript errors when accessing globalThis.mongoose.
  */
 declare global {
-    // eslint-disable-next-line no-var
     var mongoose: MongooseCache | undefined;
 }
 
@@ -51,6 +44,12 @@ globalThis.mongoose = cached;
  * @returns Promise<Mongoose> - The connected Mongoose instance.
  */
 async function connectToDatabase(): Promise<Mongoose> {
+    if (!MONGODB_URI) {
+        throw new Error(
+            "Please define the MONGODB_URI environment variable inside .env.local"
+        );
+    }
+
     // Return cached connection if available
     if (cached.conn) {
         return cached.conn;
@@ -62,7 +61,7 @@ async function connectToDatabase(): Promise<Mongoose> {
             bufferCommands: false, // Disable command buffering for better error handling
         };
 
-        cached.promise = mongoose.connect(MONGODB_URI!, options);
+        cached.promise = mongoose.connect(MONGODB_URI, options);
     }
 
     try {
diff --git a/lib/use-bookmarks.ts b/lib/use-bookmarks.ts
new file mode 100644
index 0000000..3aebbfc
--- /dev/null
+++ b/lib/use-bookmarks.ts
@@ -0,0 +1,41 @@
+"use client";
+
+import { useMemo, useSyncExternalStore } from "react";
+
+const BOOKMARKS_KEY = "bookmarkedEvents";
+const BOOKMARKS_EVENT = "devevent-bookmarks-changed";
+
+function subscribe(callback: () => void) {
+  const handleStorage = (event: StorageEvent) => {
+    if (event.key === BOOKMARKS_KEY) callback();
+  };
+  window.addEventListener("storage", handleStorage);
+  window.addEventListener(BOOKMARKS_EVENT, callback);
+  return () => {
+    window.removeEventListener("storage", handleStorage);
+    window.removeEventListener(BOOKMARKS_EVENT, callback);
+  };
+}
+
+function getSnapshot() {
+  return localStorage.getItem(BOOKMARKS_KEY) || "[]";
+}
+
+export function useBookmarks(): string[] {
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, () => "[]");
+  return useMemo(() => {
+    try {
+      const value: unknown = JSON.parse(snapshot);
+      return Array.isArray(value)
+        ? value.filter((item): item is string => typeof item === "string")
+        : [];
+    } catch {
+      return [];
+    }
+  }, [snapshot]);
+}
+
+export function saveBookmarks(bookmarks: string[]) {
+  localStorage.setItem(BOOKMARKS_KEY, JSON.stringify(bookmarks));
+  window.dispatchEvent(new Event(BOOKMARKS_EVENT));
+}
diff --git a/package-lock.json b/package-lock.json
index 93d36fb..cf834e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "lucide-react": "^0.562.0",
         "mongodb": "^7.2.0",
         "mongoose": "^9.1.4",
-        "next": "16.1.3",
+        "next": "^16.1.3",
         "ogl": "^1.0.11",
         "posthog-js": "^1.331.0",
         "posthog-node": "^5.21.2",
@@ -86,6 +86,7 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -592,32 +593,10 @@
         }
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmmirror.com/@emnapi/runtime/-/runtime-1.11.1.tgz",
-      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmmirror.com/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
-      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -1372,7 +1351,6 @@
       "resolved": "https://registry.npmmirror.com/@jridgewell/source-map/-/source-map-0.3.11.tgz",
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25"
@@ -2526,6 +2504,7 @@
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.19.43.tgz",
       "integrity": "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -2536,6 +2515,7 @@
       "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2617,6 +2597,7 @@
       "integrity": "sha512-PJ5vePq5/ognBbrIcoC5+SHO5dfpeLPzP9FpLkzWrguoYQEeeSjlJpVwOpo1JRSTEi7dRcwNy4h4dzV70PqHcg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.61.1",
         "@typescript-eslint/types": "8.61.1",
@@ -3125,6 +3106,18 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/runtime": {
       "version": "1.10.0",
       "resolved": "https://registry.npmmirror.com/@emnapi/runtime/-/runtime-1.10.0.tgz",
@@ -3136,6 +3129,17 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
       "version": "1.12.2",
       "resolved": "https://registry.npmmirror.com/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz",
@@ -3183,7 +3187,6 @@
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.14.1.tgz",
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -3193,29 +3196,25 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -3226,15 +3225,13 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -3247,7 +3244,6 @@
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -3257,7 +3253,6 @@
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -3266,15 +3261,13 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -3291,7 +3284,6 @@
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -3305,7 +3297,6 @@
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -3318,7 +3309,6 @@
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -3333,7 +3323,6 @@
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -3343,21 +3332,20 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/acorn": {
       "version": "8.17.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.17.0.tgz",
       "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3370,7 +3358,6 @@
       "resolved": "https://registry.npmmirror.com/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
       "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       },
@@ -3393,6 +3380,7 @@
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.20.0.tgz",
       "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -3409,7 +3397,6 @@
       "resolved": "https://registry.npmmirror.com/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -3427,7 +3414,6 @@
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -3763,6 +3749,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -3790,8 +3777,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/call-bind": {
       "version": "1.0.9",
@@ -3895,7 +3881,6 @@
       "resolved": "https://registry.npmmirror.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -3978,8 +3963,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/compare-func": {
       "version": "2.0.0",
@@ -4066,6 +4050,7 @@
       "integrity": "sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -4505,8 +4490,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
       "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/es-object-atoms": {
       "version": "1.1.2",
@@ -4609,6 +4593,7 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4794,6 +4779,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5056,7 +5042,6 @@
       "resolved": "https://registry.npmmirror.com/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -5414,8 +5399,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "license": "BSD-2-Clause",
-      "peer": true
+      "license": "BSD-2-Clause"
     },
     "node_modules/global-directory": {
       "version": "5.0.0",
@@ -6164,7 +6148,6 @@
       "resolved": "https://registry.npmmirror.com/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -6179,7 +6162,6 @@
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -6625,7 +6607,6 @@
       "resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.2.tgz",
       "integrity": "sha512-DFEqQ3ihfS9blba08cLfYf1NRAIEm+dDjic073DRDc3/JspI/8wYmtDsHwd3+4hwvdxSK7PGaElfTmm0awWJ4w==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       },
@@ -6738,8 +6719,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -6770,7 +6750,6 @@
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.54.0.tgz",
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -6993,14 +6972,14 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/next": {
       "version": "16.1.3",
-      "resolved": "https://registry.npmmirror.com/next/-/next-16.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.1.3.tgz",
       "integrity": "sha512-gthG3TRD+E3/mA0uDQb9lqBmx1zVosq5kIwxNN6+MRNd085GzD+9VXMPUs+GGZCbZ+GDZdODUq4Pm7CTXK6ipw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@next/env": "16.1.3",
         "@swc/helpers": "0.5.15",
@@ -7538,6 +7517,7 @@
       "resolved": "https://registry.npmmirror.com/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7547,6 +7527,7 @@
       "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -7559,6 +7540,7 @@
       "resolved": "https://registry.npmmirror.com/react-hook-form/-/react-hook-form-7.79.0.tgz",
       "integrity": "sha512-mhYp/MTmXvzYX6AJcJVko0rktoIhhmRnEouObj4wF5i/tCttgJvnp1+9wRkpITZjDTqpo4IOSJqu0dBlPlV/Lw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -7775,7 +7757,6 @@
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.3.3.tgz",
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -8014,7 +7995,6 @@
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8033,7 +8013,6 @@
       "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -8331,7 +8310,6 @@
       "resolved": "https://registry.npmmirror.com/terser/-/terser-5.48.0.tgz",
       "integrity": "sha512-J/9An6vs9Us6wKRriSFXBWdRZapREHqFzdNUKk0pmu804EMR6dr6winwo7e5JDxN4xahxQsuysyYFwlwj4XN/Q==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.15.0",
@@ -8350,7 +8328,6 @@
       "resolved": "https://registry.npmmirror.com/terser-webpack-plugin/-/terser-webpack-plugin-5.6.1.tgz",
       "integrity": "sha512-201R5j+sJpK8nFWwKVyNfZot8FaJbLZDq5evriVzbV1wDtSXDjRUDRfJzHpAaxFDMEhsZL1QkeqM61wgsS3KaQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
@@ -8457,6 +8434,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8641,6 +8619,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8781,7 +8760,6 @@
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.5.2.tgz",
       "integrity": "sha512-6i/00NBjP4yGPs+caKSyRfpTF/8Torsu0MOW3mMzIbhgISFder8i7xbqgHlLMwJrdiN8ndBV3UA1/AfzPSr+jg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.1.2"
       },
@@ -8809,7 +8787,6 @@
       "resolved": "https://registry.npmmirror.com/webpack/-/webpack-5.107.2.tgz",
       "integrity": "sha512-v7RhXaJbpMlV0D7hC7lb2EbnxkoeUqf9qhKr6lozx3Q48pmFrqqNRmZFUEGmi7pSwm6fCQ2H1IjvCkHqdpVdjQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.8",
         "@types/json-schema": "^7.0.15",
@@ -8856,7 +8833,6 @@
       "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.5.0.tgz",
       "integrity": "sha512-HPuy+uuoTCaaoEoI1LQ3JN9+vrPBvEesnnX1jADHy728cHSMlq4wUc4afYqahq2B1mhQVZxCXOkNTnXltr+2vQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -8866,7 +8842,6 @@
       "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.24.0.tgz",
       "integrity": "sha512-SkE2t82KlkkxQRVMVLAGKxLfORGQfrkx5dkj+vlgXRVNEdPc4eZcR+J/Fvj8C+yKSFH5L0q3NFlyufOVQnCcYQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.3.3"
@@ -8880,7 +8855,6 @@
       "resolved": "https://registry.npmmirror.com/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -8894,7 +8868,6 @@
       "resolved": "https://registry.npmmirror.com/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -9120,6 +9093,7 @@
       "resolved": "https://registry.npmmirror.com/zod/-/zod-4.4.3.tgz",
       "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index a2fc561..9ecfba3 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "lucide-react": "^0.562.0",
     "mongodb": "^7.2.0",
     "mongoose": "^9.1.4",
-    "next": "16.1.3",
+    "next": "^16.1.3",
     "ogl": "^1.0.11",
     "posthog-js": "^1.331.0",
     "posthog-node": "^5.21.2",
diff --git a/tsconfig.json b/tsconfig.json
index 2627c60..e83516c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {