diff --git a/app/admin/events/page.tsx b/app/admin/events/page.tsx
index 6c8ae20f2..5b911f894 100644
--- a/app/admin/events/page.tsx
+++ b/app/admin/events/page.tsx
@@ -6,26 +6,59 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Input } from "@/components/ui/input"
-import { Search, Plus, Calendar, MapPin } from "lucide-react"
+import { Search, Plus, Calendar, MapPin, Edit, Trash2 } from "lucide-react"
 import { toast } from "sonner"
 import { apiFetch } from "@/lib/api-fetch"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Switch } from "@/components/ui/switch"
 
 interface Event {
   id: number
   slug: string
   title: string
   excerpt: string
+  description: string
   organizer: string
   date: string
+  time: string
+  duration: string
+  category: string
   location: string
+  capacity: number
+  price: string
+  payment: string
   status: string
   featured: boolean
+  registration_required: boolean
 }
 
 export default function AdminEvents() {
   const [events, setEvents] = useState<Event[]>([])
   const [loading, setLoading] = useState(true)
   const [searchTerm, setSearchTerm] = useState("")
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+  const [editingEvent, setEditingEvent] = useState<Event | null>(null)
+  const [formData, setFormData] = useState({
+    title: "",
+    slug: "",
+    excerpt: "",
+    description: "",
+    organizer: "",
+    date: "",
+    time: "",
+    duration: "",
+    category: "",
+    location: "",
+    capacity: 0,
+    price: "Free",
+    payment: "Not Required",
+    status: "draft",
+    featured: false,
+    registration_required: true
+  })
+  const [formLoading, setFormLoading] = useState(false)
 
   const fetchEvents = async () => {
     try {
@@ -50,7 +83,7 @@ export default function AdminEvents() {
         return
       }
       const data = await response.json()
-      setEvents(data.events || [])
+      setEvents(data || [])
     } catch (error) {
       toast.error("Failed to fetch events")
       console.error('Fetch error:', error)
@@ -76,6 +109,135 @@ export default function AdminEvents() {
     featured: events.filter(e => e.featured).length
   }
 
+  const handleCreateEvent = async () => {
+    try {
+      setFormLoading(true)
+      
+      // Generate slug from title if not provided
+      const slug = formData.slug || formData.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
+      
+      const eventData = {
+        ...formData,
+        slug,
+        categories: [formData.category],
+        tags: [],
+        locations: [formData.location],
+        registered: 0,
+        event_type: ["Offline"],
+        team_size: { min: 1, max: 1 },
+        user_types: ["Professionals", "College Students"],
+        rules: [],
+        schedule: {},
+        faq: {},
+        socials: {},
+        sponsors: []
+      }
+
+      let response
+      if (editingEvent) {
+        // Update existing event
+        response = await apiFetch('/api/admin/events', {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            slug: editingEvent.slug,
+            data: eventData
+          })
+        })
+      } else {
+        // Create new event
+        response = await apiFetch('/api/admin/events', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(eventData)
+        })
+      }
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        const errorMessage = errorData.error || (editingEvent ? 'Failed to update event' : 'Failed to create event')
+        throw new Error(errorMessage)
+      }
+
+      toast.success(editingEvent ? 'Event updated successfully!' : 'Event created successfully!')
+      setIsCreateDialogOpen(false)
+      setEditingEvent(null)
+      setFormData({
+        title: "",
+        slug: "",
+        excerpt: "",
+        description: "",
+        organizer: "",
+        date: "",
+        time: "",
+        duration: "",
+        category: "",
+        location: "",
+        capacity: 0,
+        price: "Free",
+        payment: "Not Required",
+        status: "draft",
+        featured: false,
+        registration_required: true
+      })
+      fetchEvents()
+    } catch (error) {
+      toast.error(editingEvent ? 'Failed to update event' : 'Failed to create event')
+      console.error('Create/Update event error:', error)
+    } finally {
+      setFormLoading(false)
+    }
+  }
+
+  const handleEditEvent = (event: Event) => {
+    setEditingEvent(event)
+    setFormData({
+      title: event.title,
+      slug: event.slug,
+      excerpt: event.excerpt,
+      description: event.description,
+      organizer: event.organizer,
+      date: event.date,
+      time: event.time,
+      duration: event.duration,
+      category: event.category,
+      location: event.location,
+      capacity: event.capacity,
+      price: event.price,
+      payment: event.payment,
+      status: event.status,
+      featured: event.featured,
+      registration_required: event.registration_required
+    })
+    setIsCreateDialogOpen(true)
+  }
+
+  const handleDeleteEvent = async (slug: string) => {
+    if (!confirm('Are you sure you want to delete this event?')) {
+      return
+    }
+
+    try {
+      const response = await apiFetch(`/api/admin/events?slug=${slug}`, {
+        method: 'DELETE'
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to delete event')
+      }
+
+      toast.success('Event deleted successfully!')
+      fetchEvents()
+    } catch (error) {
+      toast.error('Failed to delete event')
+      console.error('Delete event error:', error)
+    }
+  }
+
   return (
     <div className="space-y-8 md:space-y-14 min-h-screen px-4 py-8 md:px-8 lg:px-16 relative overflow-x-hidden">
       {/* Header */}
@@ -95,7 +257,7 @@ export default function AdminEvents() {
           <Button variant="outline" className="text-sm">
             Export
           </Button>
-          <Button disabled>
+          <Button onClick={() => setIsCreateDialogOpen(true)}>
             <Plus className="h-4 w-4 mr-2" />
             Create Event
           </Button>
@@ -171,6 +333,7 @@ export default function AdminEvents() {
                   <TableHead>Location</TableHead>
                   <TableHead>Status</TableHead>
                   <TableHead>Featured</TableHead>
+                  <TableHead>Actions</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -207,6 +370,24 @@ export default function AdminEvents() {
                         </Badge>
                       )}
                     </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleEditEvent(event)}
+                        >
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleDeleteEvent(event.slug)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>
@@ -214,6 +395,235 @@ export default function AdminEvents() {
           )}
         </CardContent>
       </Card>
+
+      {/* Create Event Dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={(open) => {
+        setIsCreateDialogOpen(open)
+        if (!open) {
+          setEditingEvent(null)
+          setFormData({
+            title: "",
+            slug: "",
+            excerpt: "",
+            description: "",
+            organizer: "",
+            date: "",
+            time: "",
+            duration: "",
+            category: "",
+            location: "",
+            capacity: 0,
+            price: "Free",
+            payment: "Not Required",
+            status: "draft",
+            featured: false,
+            registration_required: true
+          })
+        }
+      }}>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{editingEvent ? 'Edit Event' : 'Create New Event'}</DialogTitle>
+          </DialogHeader>
+          
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label htmlFor="title">Event Title *</Label>
+                <Input
+                  id="title"
+                  value={formData.title}
+                  onChange={(e) => setFormData({...formData, title: e.target.value})}
+                  placeholder="Enter event title"
+                />
+              </div>
+              <div>
+                <Label htmlFor="slug">Slug</Label>
+                <Input
+                  id="slug"
+                  value={formData.slug}
+                  onChange={(e) => setFormData({...formData, slug: e.target.value})}
+                  placeholder="auto-generated from title"
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label htmlFor="excerpt">Excerpt *</Label>
+              <Textarea
+                id="excerpt"
+                value={formData.excerpt}
+                onChange={(e) => setFormData({...formData, excerpt: e.target.value})}
+                placeholder="Brief description of the event"
+                rows={2}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="description">Description *</Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={(e) => setFormData({...formData, description: e.target.value})}
+                placeholder="Detailed description of the event"
+                rows={4}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label htmlFor="organizer">Organizer *</Label>
+                <Input
+                  id="organizer"
+                  value={formData.organizer}
+                  onChange={(e) => setFormData({...formData, organizer: e.target.value})}
+                  placeholder="Event organizer"
+                />
+              </div>
+              <div>
+                <Label htmlFor="category">Category *</Label>
+                <select
+                  id="category"
+                  value={formData.category}
+                  onChange={(e) => setFormData({...formData, category: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="">Select category</option>
+                  <option value="Workshop">Workshop</option>
+                  <option value="Conference">Conference</option>
+                  <option value="Meetup">Meetup</option>
+                  <option value="Webinar">Webinar</option>
+                  <option value="Training">Training</option>
+                  <option value="Seminar">Seminar</option>
+                  <option value="Networking">Networking</option>
+                  <option value="Tech Talk">Tech Talk</option>
+                  <option value="Career Fair">Career Fair</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-3 gap-4">
+              <div>
+                <Label htmlFor="date">Date *</Label>
+                <Input
+                  id="date"
+                  type="date"
+                  value={formData.date}
+                  onChange={(e) => setFormData({...formData, date: e.target.value})}
+                />
+              </div>
+              <div>
+                <Label htmlFor="time">Time *</Label>
+                <Input
+                  id="time"
+                  value={formData.time}
+                  onChange={(e) => setFormData({...formData, time: e.target.value})}
+                  placeholder="e.g., 10:00 AM"
+                />
+              </div>
+              <div>
+                <Label htmlFor="duration">Duration *</Label>
+                <Input
+                  id="duration"
+                  value={formData.duration}
+                  onChange={(e) => setFormData({...formData, duration: e.target.value})}
+                  placeholder="e.g., 2 hours"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label htmlFor="location">Location *</Label>
+                <Input
+                  id="location"
+                  value={formData.location}
+                  onChange={(e) => setFormData({...formData, location: e.target.value})}
+                  placeholder="Event location"
+                />
+              </div>
+              <div>
+                <Label htmlFor="capacity">Capacity *</Label>
+                <Input
+                  id="capacity"
+                  type="number"
+                  value={formData.capacity}
+                  onChange={(e) => setFormData({...formData, capacity: parseInt(e.target.value) || 0})}
+                  placeholder="Maximum participants"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label htmlFor="price">Price</Label>
+                <Input
+                  id="price"
+                  value={formData.price}
+                  onChange={(e) => setFormData({...formData, price: e.target.value})}
+                  placeholder="e.g., Free, ₹500"
+                />
+              </div>
+              <div>
+                <Label htmlFor="payment">Payment Type</Label>
+                <select
+                  id="payment"
+                  value={formData.payment}
+                  onChange={(e) => setFormData({...formData, payment: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="Not Required">Not Required</option>
+                  <option value="Required">Required</option>
+                </select>
+              </div>
+            </div>
+
+            <div>
+              <Label htmlFor="status">Status</Label>
+              <select
+                id="status"
+                value={formData.status}
+                onChange={(e) => setFormData({...formData, status: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="draft">Draft</option>
+                <option value="live">Live</option>
+                <option value="published">Published</option>
+                <option value="cancelled">Cancelled</option>
+                <option value="completed">Completed</option>
+              </select>
+            </div>
+
+            <div className="flex items-center space-x-4">
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="featured"
+                  checked={formData.featured}
+                  onCheckedChange={(checked) => setFormData({...formData, featured: checked})}
+                />
+                <Label htmlFor="featured">Featured Event</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="registration_required"
+                  checked={formData.registration_required}
+                  onCheckedChange={(checked) => setFormData({...formData, registration_required: checked})}
+                />
+                <Label htmlFor="registration_required">Registration Required</Label>
+              </div>
+            </div>
+
+            <div className="flex justify-end space-x-2 pt-4">
+              <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={handleCreateEvent} disabled={formLoading}>
+                {formLoading ? (editingEvent ? 'Updating...' : 'Creating...') : (editingEvent ? 'Update Event' : 'Create Event')}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 } 
\ No newline at end of file
diff --git a/app/api/admin/events/route.ts b/app/api/admin/events/route.ts
index f84455829..a75025f91 100644
--- a/app/api/admin/events/route.ts
+++ b/app/api/admin/events/route.ts
@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { createClient } from '@/lib/supabase/server'
+import { createClient, createServiceClient } from '@/lib/supabase/server'
 
 // GET - Fetch all events (admin only)
 export async function GET(request: NextRequest) {
@@ -23,59 +23,38 @@ export async function GET(request: NextRequest) {
     }
 
     const { searchParams } = new URL(request.url)
-    const limit = parseInt(searchParams.get('limit') || '50')
+    const limit = parseInt(searchParams.get('limit') || '100')
     const offset = parseInt(searchParams.get('offset') || '0')
-    const search = searchParams.get('search') || undefined
-    const status = searchParams.get('status') || undefined
-    const featured = searchParams.get('featured') === 'true' ? true : undefined
 
-    let query = supabase
-      .from('events')
-      .select('*', { count: 'exact' })
-
-    // Apply filters
-    if (search) {
-      query = query.or(`title.ilike.%${search}%,excerpt.ilike.%${search}%,tags.cs.{${search}}`)
-    }
-
-    if (status) {
-      query = query.eq('status', status)
-    }
+    // Use service client for admin operations to bypass RLS
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+    const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY
 
-    if (featured !== undefined) {
-      query = query.eq('featured', featured)
+    if (!supabaseUrl || !supabaseServiceKey) {
+      return NextResponse.json(
+        { error: 'Server configuration error' },
+        { status: 500 }
+      )
     }
 
-    // Order by date (upcoming first, then by date)
-    query = query.order('date', { ascending: true })
+    const serviceSupabase = createServiceClient(supabaseUrl, supabaseServiceKey)
 
-    // Apply pagination
-    query = query.range(offset, offset + limit - 1)
-
-    const { data: events, error, count } = await query
+    const { data: events, error } = await serviceSupabase
+      .from('events')
+      .select('*')
+      .order('created_at', { ascending: false })
+      .range(offset, offset + limit - 1)
 
     if (error) {
       console.error('Error fetching events:', error)
-      return NextResponse.json(
-        { error: 'Failed to fetch events' },
-        { status: 500 }
-      )
+      return NextResponse.json({ error: 'Failed to fetch events' }, { status: 500 })
     }
 
-    const total = count || 0
-    const hasMore = offset + limit < total
+    return NextResponse.json(events || [])
 
-    return NextResponse.json({
-      events: events || [],
-      total,
-      hasMore
-    })
   } catch (error) {
-    console.error('Error fetching events:', error)
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    )
+    console.error('Error in GET /api/admin/events:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
 }
 
@@ -89,7 +68,7 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
-    // Check if user is admin (using profiles table)
+    // Check if user is admin
     const { data: profile, error: profileError } = await supabase
       .from('profiles')
       .select('is_admin')
@@ -100,32 +79,49 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
-    const eventData = await request.json()
-    const { data: event, error } = await supabase
+    const formData = await request.json()
+
+    // Transform payment field for database constraint
+    const transformedData = { ...formData }
+    if (transformedData.payment === 'Required') {
+      transformedData.payment = 'Paid' // Transform 'Required' to 'Paid' for database constraint
+    } else if (transformedData.payment === 'Not Required') {
+      transformedData.payment = 'Free' // Transform 'Not Required' to 'Free' for database constraint
+    }
+
+    // Use service client for database operations
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+    const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY
+
+    if (!supabaseUrl || !supabaseServiceKey) {
+      return NextResponse.json(
+        { error: 'Server configuration error' },
+        { status: 500 }
+      )
+    }
+
+    const serviceSupabase = createServiceClient(supabaseUrl, supabaseServiceKey)
+
+    const { data: newEvent, error } = await serviceSupabase
       .from('events')
-      .insert([eventData])
+      .insert(transformedData)
       .select()
       .single()
 
     if (error) {
       console.error('Error creating event:', error)
-      return NextResponse.json(
-        { error: 'Failed to create event' },
-        { status: 500 }
-      )
+      return NextResponse.json({ error: 'Failed to create event' }, { status: 500 })
     }
 
-    return NextResponse.json(event, { status: 201 })
+    return NextResponse.json(newEvent)
+
   } catch (error) {
-    console.error('Error creating event:', error)
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    )
+    console.error('Error in POST /api/admin/events:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
 }
 
-// PUT - Update event (admin only)
+// PUT - Update existing event (admin only)
 export async function PUT(request: NextRequest) {
   try {
     const supabase = await createClient()
@@ -135,7 +131,7 @@ export async function PUT(request: NextRequest) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
-    // Check if user is admin (using profiles table)
+    // Check if user is admin
     const { data: profile, error: profileError } = await supabase
       .from('profiles')
       .select('is_admin')
@@ -146,38 +142,106 @@ export async function PUT(request: NextRequest) {
       return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
     }
 
-    const { slug, data } = await request.json()
+    const requestData = await request.json()
+    
+    // Handle nested data format from frontend
+    const { slug, data: eventData } = requestData as { slug: string; data?: Record<string, unknown> }
+    const formData = eventData || requestData // Use nested data if available, otherwise use direct data
     
     if (!slug) {
-      return NextResponse.json({ error: 'Slug is required' }, { status: 400 })
+      return NextResponse.json({ error: 'Event slug is required' }, { status: 400 })
+    }
+
+    // Transform payment field for database constraint
+    const transformedData = { ...formData }
+    if (transformedData.payment === 'Required') {
+      transformedData.payment = 'Paid' // Transform 'Required' to 'Paid' for database constraint
+    } else if (transformedData.payment === 'Not Required') {
+      transformedData.payment = 'Free' // Transform 'Not Required' to 'Free' for database constraint
     }
 
-    if (!data) {
-      return NextResponse.json({ error: 'Event data is required' }, { status: 400 })
+    // Use service client for database operations
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+    const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY
+
+    if (!supabaseUrl || !supabaseServiceKey) {
+      return NextResponse.json(
+        { error: 'Server configuration error' },
+        { status: 500 }
+      )
     }
 
-    const { data: event, error } = await supabase
+    const serviceSupabase = createServiceClient(supabaseUrl, supabaseServiceKey)
+
+    // Check for event existence with the original slug
+    const { data: existingEvents, error: checkError } = await serviceSupabase
+      .from('events')
+      .select('id, slug, title')
+      .eq('slug', slug)
+
+    if (checkError) {
+      return NextResponse.json(
+        { error: 'Failed to check event existence' },
+        { status: 500 }
+      )
+    }
+
+    if (!existingEvents || existingEvents.length === 0) {
+      return NextResponse.json(
+        { error: `Event with slug '${slug}' not found` },
+        { status: 404 }
+      )
+    }
+
+
+    // Check if slug is being changed
+    if (transformedData.slug && transformedData.slug !== slug) {
+      // Check if new slug already exists
+      const { data: existingWithNewSlug, error: slugCheckError } = await serviceSupabase
+        .from('events')
+        .select('id')
+        .eq('slug', transformedData.slug)
+
+      if (slugCheckError) {
+        return NextResponse.json(
+          { error: 'Failed to check new slug existence' },
+          { status: 500 }
+        )
+      }
+
+      if (existingWithNewSlug && existingWithNewSlug.length > 0) {
+        return NextResponse.json(
+          { error: `Event with slug '${transformedData.slug}' already exists` },
+          { status: 409 }
+        )
+      }
+    }
+
+    const { data: events, error } = await serviceSupabase
       .from('events')
-      .update(data)
+      .update(transformedData)
       .eq('slug', slug)
       .select()
-      .single()
 
     if (error) {
-      console.error('Error updating event:', error)
       return NextResponse.json(
         { error: 'Failed to update event' },
         { status: 500 }
       )
     }
 
-    return NextResponse.json(event)
+    if (!events || events.length === 0) {
+      return NextResponse.json(
+        { error: `Event with slug '${slug}' not found` },
+        { status: 404 }
+      )
+    }
+
+    return NextResponse.json(events[0])
+
   } catch (error) {
-    console.error('Error updating event:', error)
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    )
+    console.error('Error in PUT /api/admin/events:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
 }
 
@@ -191,7 +255,7 @@ export async function DELETE(request: NextRequest) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
-    // Check if user is admin (using profiles table)
+    // Check if user is admin
     const { data: profile, error: profileError } = await supabase
       .from('profiles')
       .select('is_admin')
@@ -204,30 +268,38 @@ export async function DELETE(request: NextRequest) {
 
     const { searchParams } = new URL(request.url)
     const slug = searchParams.get('slug')
-    
+
     if (!slug) {
       return NextResponse.json({ error: 'Slug is required' }, { status: 400 })
     }
 
-    const { error } = await supabase
+    // Use service client for database operations
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+    const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY
+
+    if (!supabaseUrl || !supabaseServiceKey) {
+      return NextResponse.json(
+        { error: 'Server configuration error' },
+        { status: 500 }
+      )
+    }
+
+    const serviceSupabase = createServiceClient(supabaseUrl, supabaseServiceKey)
+
+    const { error } = await serviceSupabase
       .from('events')
       .delete()
       .eq('slug', slug)
 
     if (error) {
       console.error('Error deleting event:', error)
-      return NextResponse.json(
-        { error: 'Failed to delete event' },
-        { status: 500 }
-      )
+      return NextResponse.json({ error: 'Failed to delete event' }, { status: 500 })
     }
 
-    return NextResponse.json({ success: true })
+    return NextResponse.json({ message: 'Event deleted successfully' })
+
   } catch (error) {
-    console.error('Error deleting event:', error)
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    )
+    console.error('Error in DELETE /api/admin/events:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/api/events/[slug]/payment/route.ts b/app/api/events/[slug]/payment/route.ts
new file mode 100644
index 000000000..574547d93
--- /dev/null
+++ b/app/api/events/[slug]/payment/route.ts
@@ -0,0 +1,365 @@
+import { NextRequest, NextResponse } from 'next/server';
+import Razorpay from 'razorpay';
+import { createClient } from '@/lib/supabase/server';
+import crypto from 'crypto';
+
+// Initialize Razorpay client
+const getRazorpayClient = () => {
+  if (!process.env.RAZORPAY_KEY_ID || !process.env.RAZORPAY_KEY_SECRET) {
+    throw new Error('Razorpay credentials not configured');
+  }
+  
+  return new Razorpay({
+    key_id: process.env.RAZORPAY_KEY_ID,
+    key_secret: process.env.RAZORPAY_KEY_SECRET,
+  });
+};
+
+// POST: Create payment order for an event
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  try {
+    const { slug } = await params;
+    const supabase = await createClient();
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    // Get the event by slug
+    const { data: event, error: eventError } = await supabase
+      .from('events')
+      .select('id, title, price, payment, capacity, registered, registration_required')
+      .eq('slug', slug)
+      .single();
+
+    if (eventError || !event) {
+      return NextResponse.json(
+        { error: 'Event not found' },
+        { status: 404 }
+      );
+    }
+
+    // Check if event requires payment
+    if (event.payment !== 'Required' && event.payment !== 'Paid') {
+      return NextResponse.json(
+        { error: 'This event does not require payment' },
+        { status: 400 }
+      );
+    }
+
+    // Parse price (assuming format like "₹500" or "500")
+    const priceMatch = event.price.match(/(\d+)/);
+    if (!priceMatch) {
+      return NextResponse.json(
+        { error: 'Invalid event price format' },
+        { status: 400 }
+      );
+    }
+
+    const priceInPaise = parseInt(priceMatch[1]) * 100; // Convert to paise
+
+    // Check if event is at capacity
+    if (event.registered >= event.capacity) {
+      return NextResponse.json(
+        { error: 'Event is at full capacity' },
+        { status: 400 }
+      );
+    }
+
+    // Check if user is already registered
+    const { data: existingRegistration } = await supabase
+      .from('master_registrations')
+      .select('id, payment_status')
+      .eq('user_id', user.id)
+      .eq('activity_type', 'event')
+      .eq('activity_id', event.id.toString())
+      .single();
+
+    if (existingRegistration) {
+      if (existingRegistration.payment_status === 'paid') {
+        return NextResponse.json(
+          { error: 'You are already registered and paid for this event' },
+          { status: 400 }
+        );
+      } else if (existingRegistration.payment_status === 'pending') {
+        return NextResponse.json(
+          { error: 'You have a pending payment for this event' },
+          { status: 400 }
+        );
+      }
+    }
+
+    // Create Razorpay order
+    const orderData = {
+      amount: priceInPaise,
+      currency: 'INR',
+      receipt: `event_${event.id}_${user.id}_${Date.now()}`,
+      notes: {
+        event_id: event.id,
+        event_title: event.title,
+        user_id: user.id,
+        type: 'event_registration'
+      }
+    };
+
+    const razorpay = getRazorpayClient();
+    const order = await razorpay.orders.create(orderData);
+
+    // Store pending payment
+    const { error: paymentError } = await supabase
+      .from('pending_payments')
+      .insert({
+        user_id: user.id,
+        order_id: order.id,
+        plan_id: `event_${event.id}`,
+        amount: priceInPaise,
+        currency: 'INR',
+        expires_at: new Date(Date.now() + 15 * 60 * 1000).toISOString(), // 15 minutes
+        status: 'pending',
+        notes: JSON.stringify({
+          event_id: event.id,
+          event_title: event.title,
+          event_slug: slug,
+          type: 'event_registration'
+        })
+      });
+
+    if (paymentError) {
+      console.error('Error storing pending payment:', paymentError);
+      return NextResponse.json(
+        { error: 'Failed to create payment order' },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({
+      orderId: order.id,
+      key: process.env.RAZORPAY_KEY_ID,
+      amount: priceInPaise,
+      currency: 'INR',
+      event_title: event.title,
+      event_price: event.price
+    });
+
+  } catch (error) {
+    console.error('Error creating payment order:', error);
+    return NextResponse.json(
+      { error: 'Failed to create payment order' },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT: Verify payment and complete event registration
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  try {
+    await params; // Extract slug but don't use it yet
+    const body = await request.json();
+    const { orderId, paymentId, signature } = body;
+
+    if (!orderId || !paymentId || !signature) {
+      return NextResponse.json(
+        { error: 'Missing payment verification data' },
+        { status: 400 }
+      );
+    }
+
+    const supabase = await createClient();
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    // Verify Razorpay signature
+    const razorpaySecret = process.env.RAZORPAY_KEY_SECRET;
+    if (!razorpaySecret) {
+      return NextResponse.json(
+        { error: 'Payment verification failed' },
+        { status: 500 }
+      );
+    }
+
+    const body_string = orderId + "|" + paymentId;
+    const expected_signature = crypto
+      .createHmac('sha256', razorpaySecret)
+      .update(body_string.toString())
+      .digest('hex');
+
+    if (signature !== expected_signature) {
+      return NextResponse.json(
+        { error: 'Invalid payment signature' },
+        { status: 400 }
+      );
+    }
+
+    // Get pending payment record
+    const { data: pendingPayment, error: paymentError } = await supabase
+      .from('pending_payments')
+      .select('*')
+      .eq('order_id', orderId)
+      .eq('user_id', user.id)
+      .eq('status', 'pending')
+      .single();
+
+    if (paymentError || !pendingPayment) {
+      return NextResponse.json(
+        { error: 'Payment record not found or already processed' },
+        { status: 400 }
+      );
+    }
+
+    // Parse event details from notes
+    const notes = JSON.parse(pendingPayment.notes);
+    const eventId = notes.event_id;
+
+    // Get event details
+    const { data: event, error: eventError } = await supabase
+      .from('events')
+      .select('id, title, capacity, registered')
+      .eq('id', eventId)
+      .single();
+
+    if (eventError || !event) {
+      return NextResponse.json(
+        { error: 'Event not found' },
+        { status: 404 }
+      );
+    }
+
+    // Check if event is still available
+    if (event.registered >= event.capacity) {
+      return NextResponse.json(
+        { error: 'Event is now at full capacity' },
+        { status: 400 }
+      );
+    }
+
+    // Create or update registration
+    const { data: existingRegistration } = await supabase
+      .from('master_registrations')
+      .select('id')
+      .eq('user_id', user.id)
+      .eq('activity_type', 'event')
+      .eq('activity_id', eventId.toString())
+      .single();
+
+    let registration;
+    if (existingRegistration) {
+      // Update existing registration
+      const { data: updatedRegistration, error: updateError } = await supabase
+        .from('master_registrations')
+        .update({
+          payment_status: 'paid',
+          payment_amount: pendingPayment.amount,
+          payment_currency: pendingPayment.currency,
+          payment_id: paymentId,
+          status: 'registered',
+          updated_at: new Date().toISOString()
+        })
+        .eq('id', existingRegistration.id)
+        .select()
+        .single();
+
+      if (updateError) throw updateError;
+      registration = updatedRegistration;
+    } else {
+      // Create new registration
+      const { data: newRegistration, error: createError } = await supabase
+        .from('master_registrations')
+        .insert({
+          user_id: user.id,
+          activity_type: 'event',
+          activity_id: eventId.toString(),
+          registration_date: new Date().toISOString(),
+          status: 'registered',
+          payment_status: 'paid',
+          payment_amount: pendingPayment.amount,
+          payment_currency: pendingPayment.currency,
+          payment_id: paymentId,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString()
+        })
+        .select()
+        .single();
+
+      if (createError) throw createError;
+      registration = newRegistration;
+
+      // Update event registration count
+      await supabase
+        .from('events')
+        .update({ 
+          registered: event.registered + 1,
+          updated_at: new Date().toISOString()
+        })
+        .eq('id', eventId);
+    }
+
+    // Update pending payment status
+    await supabase
+      .from('pending_payments')
+      .update({
+        status: 'completed',
+        notes: JSON.stringify({
+          ...notes,
+          payment_id: paymentId,
+          registration_id: registration.id,
+          completed_at: new Date().toISOString()
+        })
+      })
+      .eq('order_id', orderId);
+
+    // Log payment activity
+    await supabase
+      .from('user_activity_log')
+      .insert({
+        user_id: user.id,
+        activity_type: 'event_payment',
+        points: 0,
+        metadata: JSON.stringify({
+          event_id: eventId,
+          event_title: event.title,
+          payment_id: paymentId,
+          amount: pendingPayment.amount,
+          currency: pendingPayment.currency
+        })
+      });
+
+    return NextResponse.json({
+      success: true,
+      message: 'Payment verified and registration completed',
+      registration: {
+        id: registration.id,
+        event_title: event.title,
+        payment_status: 'paid',
+        amount: pendingPayment.amount,
+        currency: pendingPayment.currency
+      }
+    });
+
+  } catch (error) {
+    console.error('Error verifying payment:', error);
+    return NextResponse.json(
+      { error: 'Failed to verify payment' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/events/[slug]/register/route.ts b/app/api/events/[slug]/register/route.ts
new file mode 100644
index 000000000..5a3e59bd8
--- /dev/null
+++ b/app/api/events/[slug]/register/route.ts
@@ -0,0 +1,169 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { masterRegistrationsService } from '@/lib/services/master-registrations';
+import { createClient } from '@/lib/supabase/server';
+
+// POST: Register for an event (backward compatible)
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  try {
+    const { slug } = await params;
+    const supabase = await createClient();
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    // Get the event by slug
+    const { data: event, error: eventError } = await supabase
+      .from('events')
+      .select('id, title, capacity, registered, registration_required, price, payment')
+      .eq('slug', slug)
+      .single();
+
+    if (eventError || !event) {
+      return NextResponse.json(
+        { error: 'Event not found' },
+        { status: 404 }
+      );
+    }
+
+    // Check if registration is required
+    if (!event.registration_required) {
+      return NextResponse.json(
+        { error: 'Registration not required for this event' },
+        { status: 400 }
+      );
+    }
+
+    // Check if event requires payment
+    if (event.payment === 'Required' || event.payment === 'Paid') {
+      return NextResponse.json(
+        { error: 'This event requires payment. Please use the payment flow.' },
+        { status: 400 }
+      );
+    }
+
+    // Check if event is at capacity
+    if (event.registered >= event.capacity) {
+      return NextResponse.json(
+        { error: 'Event is at full capacity' },
+        { status: 400 }
+      );
+    }
+
+    // Check if user is already registered using master system
+    const isRegistered = await masterRegistrationsService.isRegistered(
+      user.id,
+      'event',
+      event.id.toString()
+    );
+
+    if (isRegistered) {
+      return NextResponse.json(
+        { error: 'You are already registered for this event' },
+        { status: 400 }
+      );
+    }
+
+    // Register using master system
+    const registration = await masterRegistrationsService.register({
+      activity_type: 'event',
+      activity_id: event.id.toString(),
+      status: 'registered',
+      payment_status: 'not_applicable'
+    }, user.id);
+
+    // Update event registration count
+    await supabase
+      .from('events')
+      .update({ 
+        registered: event.registered + 1,
+        updated_at: new Date().toISOString()
+      })
+      .eq('id', event.id);
+
+    return NextResponse.json({
+      success: true,
+      data: registration,
+      message: 'Successfully registered for event'
+    });
+
+  } catch (error) {
+    console.error('Error registering for event:', error);
+    return NextResponse.json(
+      { error: 'Failed to register for event' },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE: Unregister from an event (backward compatible)
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  try {
+    const { slug } = await params;
+    const supabase = await createClient();
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    // Get the event by slug
+    const { data: event, error: eventError } = await supabase
+      .from('events')
+      .select('id, registered')
+      .eq('slug', slug)
+      .single();
+
+    if (eventError || !event) {
+      return NextResponse.json(
+        { error: 'Event not found' },
+        { status: 404 }
+      );
+    }
+
+    // Unregister using master system
+    await masterRegistrationsService.unregister(
+      user.id,
+      'event',
+      event.id.toString()
+    );
+
+    // Update event registration count
+    await supabase
+      .from('events')
+      .update({ 
+        registered: Math.max(0, event.registered - 1),
+        updated_at: new Date().toISOString()
+      })
+      .eq('id', event.id);
+
+    return NextResponse.json({
+      success: true,
+      message: 'Successfully unregistered from event'
+    });
+
+  } catch (error) {
+    console.error('Error unregistering from event:', error);
+    return NextResponse.json(
+      { error: 'Failed to unregister from event' },
+      { status: 500 }
+    );
+  }
+}
\ No newline at end of file
diff --git a/app/api/events/[slug]/route.ts b/app/api/events/[slug]/route.ts
new file mode 100644
index 000000000..93502a2fd
--- /dev/null
+++ b/app/api/events/[slug]/route.ts
@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { eventsService } from '@/lib/services/events';
+import { UnifiedCache } from '@/lib/unified-cache-system';
+
+// GET: Fetch a specific event by slug
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  try {
+    const { slug } = await params;
+
+    if (!slug) {
+      return NextResponse.json(
+        { error: 'Event slug is required' },
+        { status: 400 }
+      );
+    }
+
+    // Try to get from cache first
+    const cacheKey = `event:${slug}`;
+    const cached = await UnifiedCache.get(cacheKey);
+    
+    if (cached) {
+      return NextResponse.json(cached);
+    }
+
+    // Fetch from database
+    const event = await eventsService.getEventBySlug(slug);
+    
+    if (!event) {
+      return NextResponse.json(
+        { error: 'Event not found' },
+        { status: 404 }
+      );
+    }
+
+    // Cache the result
+    await UnifiedCache.set(cacheKey, event, 'API_STANDARD');
+
+    return NextResponse.json(event);
+
+  } catch (error) {
+    console.error('Error in GET /api/events/[slug]:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/events/featured/route.ts b/app/api/events/featured/route.ts
new file mode 100644
index 000000000..ca79a0391
--- /dev/null
+++ b/app/api/events/featured/route.ts
@@ -0,0 +1,31 @@
+import { NextRequest } from 'next/server';
+import { eventsService } from '@/lib/services/events';
+import { UnifiedCache } from '@/lib/unified-cache-system';
+
+// GET: Fetch featured events
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const limit = parseInt(searchParams.get('limit') || '5');
+
+    // Try to get from cache first
+    const cacheKey = `featured_events:${limit}`;
+    const cached = await UnifiedCache.get(cacheKey);
+    
+    if (cached) {
+      return UnifiedCache.createResponse({ events: cached }, 'API_STANDARD');
+    }
+
+    // Fetch from database
+    const events = await eventsService.getFeaturedEvents(limit);
+    
+    // Cache the result
+    await UnifiedCache.set(cacheKey, events, 'API_STANDARD');
+
+    return UnifiedCache.createResponse({ events }, 'API_STANDARD');
+
+  } catch (error) {
+    console.error('Error in GET /api/events/featured:', error);
+    return UnifiedCache.createResponse({ events: [] }, 'API_STANDARD');
+  }
+}
diff --git a/app/api/events/route.ts b/app/api/events/route.ts
new file mode 100644
index 000000000..5dc39d52d
--- /dev/null
+++ b/app/api/events/route.ts
@@ -0,0 +1,158 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { eventsService, EventsFilters } from '@/lib/services/events';
+import { UnifiedCache } from '@/lib/unified-cache-system';
+import { createClient } from '@/lib/supabase/server';
+import { createClient as createServiceClient } from '@supabase/supabase-js';
+
+// Define the type for event data in POST request
+interface EventData {
+  slug: string;
+  title: string;
+  excerpt: string;
+  description: string;
+  organizer: string;
+  organizer_contact?: string;
+  date: string;
+  time: string;
+  duration: string;
+  category: string;
+  categories?: string[];
+  tags?: string[];
+  featured?: boolean;
+  image?: string;
+  location: string;
+  locations?: string[];
+  capacity: number;
+  registered?: number;
+  price: number;
+  payment: string;
+  status?: string;
+  eventType?: string[];
+  teamSize?: number;
+  userTypes?: string[];
+  registration_required?: boolean;
+  registration_deadline?: string;
+  rules?: string[];
+  schedule?: unknown[];
+  prize?: string;
+  prize_details?: string;
+  faq?: unknown[];
+  socials?: Record<string, string>;
+  sponsors?: unknown[];
+  marking_scheme?: unknown;
+}
+
+// GET: Fetch events with optional filters
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    
+    const filters: EventsFilters = {
+      search: searchParams.get('search') || undefined,
+      category: searchParams.get('category') || undefined,
+      status: searchParams.get('status') || undefined,
+      featured: searchParams.get('featured') === 'true' ? true : undefined,
+      dateFilter: (searchParams.get('dateFilter') as 'upcoming' | 'past' | 'all') || 'all',
+      limit: parseInt(searchParams.get('limit') || '10'),
+      offset: parseInt(searchParams.get('offset') || '0')
+    };
+
+    // Try to get from cache first
+    const cacheKey = `events:${JSON.stringify(filters)}`;
+    const cached = await UnifiedCache.get(cacheKey);
+    
+    if (cached) {
+      return UnifiedCache.createResponse(cached, 'API_STANDARD');
+    }
+
+    // Fetch from database
+    const result = await eventsService.getEvents(filters);
+    
+    // Cache the result
+    await UnifiedCache.set(cacheKey, result, 'API_STANDARD');
+
+    return UnifiedCache.createResponse(result, 'API_STANDARD');
+
+  } catch (error) {
+    console.error('Error in GET /api/events:', error);
+    return UnifiedCache.createResponse({
+      events: [],
+      total: 0,
+      hasMore: false
+    }, 'USER_PRIVATE');
+  }
+}
+
+// POST: Create a new event
+export async function POST(request: NextRequest) {
+  try {
+    const eventData: EventData = await request.json();
+
+    // Check for admin authentication header or session
+    const supabase = await createClient();
+    const { data: { user } } = await supabase.auth.getUser();
+
+    let isAuthorized = false;
+
+    // Check if user is authenticated and is admin
+    if (user) {
+      // Check admin status from profiles table
+      const { data: profile } = await supabase
+        .from('profiles')
+        .select('is_admin')
+        .eq('id', user.id)
+        .single();
+      
+      if (profile?.is_admin) {
+        isAuthorized = true;
+      }
+    }
+
+    // If not authorized through session, check if it's a direct admin request
+    if (!isAuthorized) {
+      return NextResponse.json(
+        { error: 'Unauthorized: Admin access required' },
+        { status: 401 }
+      );
+    }
+
+    // Use service client for admin operations
+    const supabaseServiceUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
+    const supabaseServiceKey = process.env.SUPABASE_SERVICE_ROLE_KEY!;
+    const supabaseService = createServiceClient(supabaseServiceUrl, supabaseServiceKey);
+
+    // Insert the new event
+    const { data, error } = await supabaseService
+      .from('events')
+      .insert([{
+        ...eventData,
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString()
+      }])
+      .select()
+      .single();
+
+    if (error) {
+      console.error('Error creating event:', error);
+      return UnifiedCache.createResponse(
+        { error: 'Failed to create event', details: error.message },
+        'USER_PRIVATE'
+      );
+    }
+
+    // Invalidate event caches after successful creation
+    await UnifiedCache.purgeByTags(['content', 'api']);
+
+    return NextResponse.json(
+      { message: 'Event created successfully', event: data },
+      { status: 201 }
+    );
+
+  } catch (error) {
+    console.error('Error in POST /api/events:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/register/route.ts b/app/api/register/route.ts
new file mode 100644
index 000000000..a0e340114
--- /dev/null
+++ b/app/api/register/route.ts
@@ -0,0 +1,87 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { masterRegistrationsService, RegistrationRequest } from '@/lib/services/master-registrations';
+import { createClient } from '@/lib/supabase/server';
+
+// POST: Universal registration endpoint for any activity type
+export async function POST(request: NextRequest) {
+  try {
+    const supabase = await createClient();
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    const body: RegistrationRequest = await request.json();
+    
+    // Validate required fields
+    if (!body.activity_type || !body.activity_id) {
+      return NextResponse.json(
+        { error: 'Activity type and activity ID are required' },
+        { status: 400 }
+      );
+    }
+
+    // Validate activity type
+    const validActivityTypes = [
+      'hackathon', 'event', 'internship', 'test', 'round', 
+      'volunteer', 'sponsorship', 'mentor', 'judge', 'collaboration'
+    ];
+
+    if (!validActivityTypes.includes(body.activity_type)) {
+      return NextResponse.json(
+        { error: `Invalid activity type. Must be one of: ${validActivityTypes.join(', ')}` },
+        { status: 400 }
+      );
+    }
+
+    // Check if user is already registered
+    const isRegistered = await masterRegistrationsService.isRegistered(
+      user.id,
+      body.activity_type,
+      body.activity_id
+    );
+
+    if (isRegistered) {
+      return NextResponse.json(
+        { error: 'You are already registered for this activity' },
+        { status: 400 }
+      );
+    }
+
+    // Get user profile for additional data
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('first_name, last_name, email, phone, company, current_position')
+      .eq('id', user.id)
+      .single();
+
+    // Enhance registration data with profile information
+    const enhancedRequest: RegistrationRequest = {
+      ...body,
+      full_name: body.full_name || (profile ? `${profile.first_name || ''} ${profile.last_name || ''}`.trim() : undefined),
+      email: body.email || profile?.email || user.email,
+      phone: body.phone || profile?.phone,
+      institution: body.institution || profile?.company,
+      department: body.department || profile?.current_position,
+    };
+
+    const registration = await masterRegistrationsService.register(enhancedRequest, user.id);
+
+    return NextResponse.json({
+      success: true,
+      data: registration,
+      message: `Successfully registered for ${body.activity_type}`
+    });
+
+  } catch (error) {
+    console.error('Error registering for activity:', error);
+    return NextResponse.json(
+      { error: 'Failed to register for activity' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/registrations/[activityType]/[activityId]/route.ts b/app/api/registrations/[activityType]/[activityId]/route.ts
new file mode 100644
index 000000000..3352ccea5
--- /dev/null
+++ b/app/api/registrations/[activityType]/[activityId]/route.ts
@@ -0,0 +1,116 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { masterRegistrationsService } from '@/lib/services/master-registrations';
+import { createClient } from '@/lib/supabase/server';
+
+// GET: Get specific registration details
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ activityType: string; activityId: string }> }
+) {
+  try {
+    const supabase = await createClient();
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    const { activityType, activityId } = await params;
+
+    const result = await masterRegistrationsService.getActivityWithRegistration(
+      activityType,
+      activityId,
+      user.id
+    );
+
+    return NextResponse.json({
+      success: true,
+      data: result
+    });
+
+  } catch (error) {
+    console.error('Error fetching registration details:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch registration details' },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT: Update registration
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ activityType: string; activityId: string }> }
+) {
+  try {
+    const supabase = await createClient();
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    const { activityType, activityId } = await params;
+    const updates = await request.json();
+
+    const registration = await masterRegistrationsService.updateRegistration(
+      user.id,
+      activityType,
+      activityId,
+      updates
+    );
+
+    return NextResponse.json({
+      success: true,
+      data: registration,
+      message: 'Registration updated successfully'
+    });
+
+  } catch (error) {
+    console.error('Error updating registration:', error);
+    return NextResponse.json(
+      { error: 'Failed to update registration' },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE: Unregister from activity
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ activityType: string; activityId: string }> }
+) {
+  try {
+    const supabase = await createClient();
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    const { activityType, activityId } = await params;
+
+    await masterRegistrationsService.unregister(user.id, activityType, activityId);
+
+    return NextResponse.json({
+      success: true,
+      message: 'Successfully unregistered from activity'
+    });
+
+  } catch (error) {
+    console.error('Error unregistering from activity:', error);
+    return NextResponse.json(
+      { error: 'Failed to unregister from activity' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/registrations/route.ts b/app/api/registrations/route.ts
new file mode 100644
index 000000000..dbc35d7a1
--- /dev/null
+++ b/app/api/registrations/route.ts
@@ -0,0 +1,115 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { masterRegistrationsService, RegistrationRequest, RegistrationFilters } from '@/lib/services/master-registrations';
+import { createClient } from '@/lib/supabase/server';
+
+// GET: Get user's registrations with optional filters
+export async function GET(request: NextRequest) {
+  try {
+    const supabase = await createClient();
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const filters: RegistrationFilters = {
+      user_id: user.id,
+      activity_type: searchParams.get('activity_type') as "test" | "internship" | "round" | "event" | "hackathon" | "volunteer" | "sponsorship" | "mentor" | "judge" | "collaboration" | undefined,
+      activity_id: searchParams.get('activity_id') || undefined,
+      status: searchParams.get('status') as "pending" | "registered" | "completed" | "approved" | "rejected" | "cancelled" | "attended" | "no_show" | "disqualified" | undefined,
+      payment_status: searchParams.get('payment_status') as "pending" | "paid" | "failed" | "refunded" | undefined,
+      limit: searchParams.get('limit') ? parseInt(searchParams.get('limit')!) : undefined,
+      offset: searchParams.get('offset') ? parseInt(searchParams.get('offset')!) : undefined,
+    };
+
+    const registrations = await masterRegistrationsService.getUserRegistrations(filters);
+
+    return NextResponse.json({
+      success: true,
+      data: registrations,
+      count: registrations.length
+    });
+
+  } catch (error) {
+    console.error('Error fetching registrations:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch registrations' },
+      { status: 500 }
+    );
+  }
+}
+
+// POST: Register for any activity type
+export async function POST(request: NextRequest) {
+  try {
+    const supabase = await createClient();
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    const body: RegistrationRequest = await request.json();
+    
+    // Validate required fields
+    if (!body.activity_type || !body.activity_id) {
+      return NextResponse.json(
+        { error: 'Activity type and activity ID are required' },
+        { status: 400 }
+      );
+    }
+
+    // Check if user is already registered
+    const isRegistered = await masterRegistrationsService.isRegistered(
+      user.id,
+      body.activity_type,
+      body.activity_id
+    );
+
+    if (isRegistered) {
+      return NextResponse.json(
+        { error: 'You are already registered for this activity' },
+        { status: 400 }
+      );
+    }
+
+    // Get user profile for additional data
+    const { data: profile } = await supabase
+      .from('profiles')
+      .select('first_name, last_name, email, phone, company, current_position')
+      .eq('id', user.id)
+      .single();
+
+    // Enhance registration data with profile information
+    const enhancedRequest: RegistrationRequest = {
+      ...body,
+      full_name: body.full_name || (profile ? `${profile.first_name || ''} ${profile.last_name || ''}`.trim() : undefined),
+      email: body.email || profile?.email || user.email,
+      phone: body.phone || profile?.phone,
+      institution: body.institution || profile?.company,
+      department: body.department || profile?.current_position,
+    };
+
+    const registration = await masterRegistrationsService.register(enhancedRequest, user.id);
+
+    return NextResponse.json({
+      success: true,
+      data: registration,
+      message: 'Successfully registered for activity'
+    });
+
+  } catch (error) {
+    console.error('Error registering for activity:', error);
+    return NextResponse.json(
+      { error: 'Failed to register for activity' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/user/events/route.ts b/app/api/user/events/route.ts
new file mode 100644
index 000000000..d45042267
--- /dev/null
+++ b/app/api/user/events/route.ts
@@ -0,0 +1,85 @@
+import { NextResponse } from 'next/server';
+import { masterRegistrationsService } from '@/lib/services/master-registrations';
+import { createClient } from '@/lib/supabase/server';
+
+// GET: Fetch user's event registrations (updated to use master system)
+export async function GET() {
+  try {
+    const supabase = await createClient();
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    // Get user's event registrations from master system
+    const registrations = await masterRegistrationsService.getUserRegistrations({
+      user_id: user.id,
+      activity_type: 'event'
+    });
+
+    // Get event details for each registration
+    const registrationsWithDetails = await Promise.all(
+      registrations.map(async (reg) => {
+        const { data: event } = await supabase
+          .from('events')
+          .select(`
+            id,
+            slug,
+            title,
+            excerpt,
+            organizer,
+            date,
+            time,
+            location,
+            category,
+            featured,
+            image
+          `)
+          .eq('id', reg.activity_id)
+          .single();
+
+        return {
+          id: reg.id,
+          registrationDate: reg.registration_date,
+          status: reg.status,
+          paymentStatus: reg.payment_status,
+          notes: reg.metadata?.notes,
+          event: event ? {
+            id: event.id,
+            slug: event.slug,
+            title: event.title,
+            excerpt: event.excerpt,
+            organizer: event.organizer,
+            date: event.date,
+            time: event.time,
+            location: event.location,
+            category: event.category,
+            featured: event.featured,
+            image: event.image
+          } : null
+        };
+      })
+    );
+
+    // Filter out registrations where event was not found
+    const validRegistrations = registrationsWithDetails.filter(reg => reg.event !== null);
+
+    return NextResponse.json({
+      registrations: validRegistrations,
+      total: validRegistrations.length
+    });
+
+  } catch (error) {
+    console.error('Error in GET /api/user/events:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/user/registrations/route.ts b/app/api/user/registrations/route.ts
new file mode 100644
index 000000000..bd2a31938
--- /dev/null
+++ b/app/api/user/registrations/route.ts
@@ -0,0 +1,158 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { masterRegistrationsService } from '@/lib/services/master-registrations';
+import { createClient } from '@/lib/supabase/server';
+
+// GET: Fetch user's all registrations across all activity types
+export async function GET(request: NextRequest) {
+  try {
+    const supabase = await createClient();
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const activityType = searchParams.get('activity_type');
+
+    // Get user's registrations from master system
+    const registrations = await masterRegistrationsService.getUserRegistrations({
+      user_id: user.id,
+      activity_type: activityType as "test" | "internship" | "round" | "event" | "hackathon" | "volunteer" | "sponsorship" | "mentor" | "judge" | "collaboration" | undefined
+    });
+
+    // Get activity details for each registration
+    const registrationsWithDetails = await Promise.all(
+      registrations.map(async (reg) => {
+        let activity = null;
+        
+        try {
+          // Get activity details based on type
+          switch (reg.activity_type) {
+            case 'event':
+              const { data: event } = await supabase
+                .from('events')
+                .select('id, slug, title, excerpt, organizer, date, time, location, category, featured, image')
+                .eq('id', reg.activity_id)
+                .single();
+              activity = event;
+              break;
+              
+            case 'hackathon':
+              const { data: hackathon } = await supabase
+                .from('hackathons')
+                .select('id, slug, title, excerpt, organizer, date, time, location, category, featured, image')
+                .eq('id', reg.activity_id)
+                .single();
+              activity = hackathon;
+              break;
+              
+            case 'test':
+              const { data: test } = await supabase
+                .from('tests')
+                .select('id, title, description, duration, difficulty, category')
+                .eq('id', reg.activity_id)
+                .single();
+              activity = test;
+              break;
+              
+            case 'internship':
+              const { data: internship } = await supabase
+                .from('internships')
+                .select('id, title, company, location, duration, domain, level')
+                .eq('id', reg.activity_id)
+                .single();
+              activity = internship;
+              break;
+              
+            case 'round':
+              const { data: round } = await supabase
+                .from('test_rounds')
+                .select('id, title, description, start_date, end_date, test_id')
+                .eq('id', reg.activity_id)
+                .single();
+              activity = round;
+              break;
+              
+            default:
+              // For other activity types, just return basic info
+              activity = {
+                id: reg.activity_id,
+                title: `${reg.activity_type} #${reg.activity_id}`,
+                type: reg.activity_type
+              };
+          }
+        } catch (error) {
+          console.error(`Error fetching ${reg.activity_type} details:`, error);
+          activity = {
+            id: reg.activity_id,
+            title: `${reg.activity_type} #${reg.activity_id}`,
+            type: reg.activity_type,
+            error: 'Activity not found'
+          };
+        }
+
+        return {
+          id: reg.id,
+          activityType: reg.activity_type,
+          activityId: reg.activity_id,
+          registrationDate: reg.registration_date,
+          status: reg.status,
+          paymentStatus: reg.payment_status,
+          paymentAmount: reg.payment_amount,
+          paymentCurrency: reg.payment_currency,
+          fullName: reg.full_name,
+          email: reg.email,
+          phone: reg.phone,
+          institution: reg.institution,
+          department: reg.department,
+          yearOfStudy: reg.year_of_study,
+          experienceLevel: reg.experience_level,
+          metadata: reg.metadata,
+          createdAt: reg.created_at,
+          updatedAt: reg.updated_at,
+          activity: activity
+        };
+      })
+    );
+
+    // Group registrations by activity type
+    const groupedRegistrations = registrationsWithDetails.reduce((acc, reg) => {
+      if (!acc[reg.activityType]) {
+        acc[reg.activityType] = [];
+      }
+      acc[reg.activityType].push(reg);
+      return acc;
+    }, {} as Record<string, unknown[]>);
+
+    // Get statistics
+    const stats = await masterRegistrationsService.getRegistrationStats();
+
+    return NextResponse.json({
+      success: true,
+      data: {
+        registrations: registrationsWithDetails,
+        grouped: groupedRegistrations,
+        stats: {
+          total: stats.total,
+          byActivityType: stats.by_activity_type,
+          byStatus: stats.by_status,
+          byPaymentStatus: stats.by_payment_status
+        }
+      },
+      count: registrationsWithDetails.length
+    });
+
+  } catch (error) {
+    console.error('Error in GET /api/user/registrations:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/webhooks/razorpay/route.ts b/app/api/webhooks/razorpay/route.ts
index 7a88e6fda..19faa1509 100644
--- a/app/api/webhooks/razorpay/route.ts
+++ b/app/api/webhooks/razorpay/route.ts
@@ -184,6 +184,30 @@ async function updateHackathonRegistration(userId: string, hackathonId: string,
   }
 }
 
+/**
+ * Update event registration status
+ */
+async function updateEventRegistration(userId: string, eventId: string) {
+  const supabase = await createClient()
+  
+  const { error } = await supabase
+    .from('master_registrations')
+    .update({
+      payment_status: 'paid',
+      status: 'registered',
+      updated_at: new Date().toISOString(),
+    })
+    .eq('user_id', userId)
+    .eq('activity_type', 'event')
+    .eq('activity_id', eventId)
+  
+  if (error) {
+    console.error('Failed to update event registration:', error)
+  } else {
+    console.log(`✅ Event registration confirmed: ${userId} -> ${eventId}`)
+  }
+}
+
 export async function POST(request: NextRequest) {
   try {
     const signature = request.headers.get('x-razorpay-signature')
@@ -282,8 +306,42 @@ export async function POST(request: NextRequest) {
         if (paidOrder) {
           console.log(`🎉 Order paid: ${paidOrder.id} (₹${paidOrder.amount / 100})`)
           
-          // Additional order completion logic here
-          response.message = `Order ${paidOrder.id} completed`
+          // Handle different order types based on notes
+          if (paidOrder.notes) {
+            const notes = paidOrder.notes as Record<string, unknown>
+            
+            // Handle event registrations
+            if (notes.event_id && notes.type === 'event_registration') {
+              await updateEventRegistration(
+                String(notes.user_id),
+                String(notes.event_id)
+              )
+              response.message = `Event registration completed for order ${paidOrder.id}`
+            }
+            // Handle hackathon registrations
+            else if (notes.hackathon_id && notes.type === 'hackathon_registration') {
+              await updateHackathonRegistration(
+                String(notes.user_id),
+                String(notes.hackathon_id),
+                paidOrder.id
+              )
+              response.message = `Hackathon registration completed for order ${paidOrder.id}`
+            }
+            // Handle internship applications
+            else if (notes.internshipId && notes.type === 'internship_application') {
+              await updateInternshipApplication(
+                String(notes.userId),
+                String(notes.internshipId),
+                paidOrder.id
+              )
+              response.message = `Internship application completed for order ${paidOrder.id}`
+            }
+            else {
+              response.message = `Order ${paidOrder.id} completed`
+            }
+          } else {
+            response.message = `Order ${paidOrder.id} completed`
+          }
         }
         break
 
diff --git a/app/events/[slug]/page.tsx b/app/events/[slug]/page.tsx
new file mode 100644
index 000000000..eb3e414d1
--- /dev/null
+++ b/app/events/[slug]/page.tsx
@@ -0,0 +1,639 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useParams } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { 
+  Calendar, 
+  Clock, 
+  MapPin, 
+  Users, 
+  DollarSign, 
+  CheckCircle, 
+  XCircle,
+  ArrowLeft,
+  ExternalLink,
+  Share2,
+  Star
+} from "lucide-react"
+import Link from "next/link"
+import { motion } from "framer-motion"
+import Header from "@/components/header"
+import Footer from "@/components/footer"
+import { toast } from "sonner"
+import { useRegistrationStatus } from "@/hooks/useMasterRegistrations"
+
+interface Event {
+  id: number
+  slug: string
+  title: string
+  excerpt: string
+  description: string
+  organizer: string
+  organizer_contact?: {
+    email?: string
+    phone?: string
+  }
+  date: string
+  time: string
+  duration: string
+  registration_deadline?: string
+  category: string
+  categories: string[]
+  tags: string[]
+  featured: boolean
+  image?: string
+  location: string
+  locations: string[]
+  capacity: number
+  registered: number
+  price: string
+  payment: string
+  status: string
+  event_type: string[]
+  team_size: {
+    min: number
+    max: number
+  }
+  user_types: string[]
+  rules: string[]
+  schedule: Record<string, unknown>
+  prize?: string
+  prize_details?: string
+  faq: Record<string, unknown>
+  socials: Record<string, unknown>
+  sponsors: Record<string, unknown>[]
+  marking_scheme?: Record<string, unknown>
+}
+
+export default function EventPage() {
+  const params = useParams()
+  const slug = params?.slug as string
+  const [event, setEvent] = useState<Event | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [copied, setCopied] = useState(false)
+  const [registering, setRegistering] = useState(false)
+
+  const { 
+    isRegistered, 
+    registration, 
+    loading: statusLoading, 
+    refetch: refetchStatus 
+  } = useRegistrationStatus('event', event?.id?.toString() || '')
+
+  useEffect(() => {
+    const fetchEvent = async () => {
+      try {
+        setLoading(true)
+        const response = await fetch(`/api/events/${slug}`)
+        
+        if (!response.ok) {
+          throw new Error('Event not found')
+        }
+        
+        const data = await response.json()
+        setEvent(data)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load event')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    if (slug) {
+      fetchEvent()
+    }
+  }, [slug])
+
+  const handleShare = async () => {
+    const url = window.location.href
+    try {
+      await navigator.clipboard.writeText(url)
+      setCopied(true)
+      toast.success('Event link copied to clipboard!')
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      toast.error('Failed to copy link')
+    }
+  }
+
+  const handleRegister = async () => {
+    if (!event) return
+
+    setRegistering(true)
+    try {
+      if (event.payment === 'Required' || event.payment === 'Paid') {
+        // Redirect to payment page
+        window.location.href = `/events/${event.slug}/register`
+      } else {
+        // Direct registration for free events
+        const response = await fetch(`/api/events/${event.slug}/register`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json()
+          throw new Error(errorData.error || 'Failed to register')
+        }
+
+        toast.success('Successfully registered for the event!')
+        refetchStatus()
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to register')
+    } finally {
+      setRegistering(false)
+    }
+  }
+
+  const handleUnregister = async () => {
+    if (!event) return
+
+    setRegistering(true)
+    try {
+      const response = await fetch(`/api/events/${event.slug}/register`, {
+        method: 'DELETE',
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Failed to unregister')
+      }
+
+      toast.success('Successfully unregistered from the event')
+      refetchStatus()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Failed to unregister')
+    } finally {
+      setRegistering(false)
+    }
+  }
+
+  const isRegistrationOpen = () => {
+    if (!event) return false
+    if (event.status !== 'live' && event.status !== 'published') return false
+    if (event.registered >= event.capacity) return false
+    if (event.registration_deadline) {
+      return new Date(event.registration_deadline) > new Date()
+    }
+    return true
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'live':
+        return 'bg-green-100 text-green-800 border-green-200'
+      case 'published':
+        return 'bg-blue-100 text-blue-800 border-blue-200'
+      case 'draft':
+        return 'bg-gray-100 text-gray-800 border-gray-200'
+      default:
+        return 'bg-gray-100 text-gray-800 border-gray-200'
+    }
+  }
+
+  const getPaymentBadge = () => {
+    if (!event) return null
+    
+    if (event.payment === 'Required' || event.payment === 'Paid') {
+      return (
+        <Badge className="bg-purple-100 text-purple-800 border-purple-200">
+          <DollarSign className="h-3 w-3 mr-1" />
+          Paid Event - ₹{event.price}
+        </Badge>
+      )
+    }
+    
+    return (
+      <Badge className="bg-green-100 text-green-800 border-green-200">
+        <CheckCircle className="h-3 w-3 mr-1" />
+        Free Event
+      </Badge>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
+        <Header />
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-center min-h-[60vh]">
+            <div className="text-center">
+              <div className="relative mb-6">
+                <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent mx-auto"></div>
+                <div className="absolute inset-0 rounded-full border-4 border-primary/20 animate-ping"></div>
+              </div>
+              <h3 className="text-xl font-semibold text-foreground mb-2">Loading Event Details</h3>
+              <p className="text-muted-foreground">Please wait while we fetch the event information...</p>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </div>
+    )
+  }
+
+  if (error || !event) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
+        <Header />
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-center min-h-[60vh]">
+            <div className="text-center">
+              <div className="mb-6">
+                <XCircle className="h-16 w-16 text-destructive mx-auto" />
+              </div>
+              <h3 className="text-2xl font-bold text-foreground mb-2">Event Not Found</h3>
+              <p className="text-muted-foreground mb-6">The event you&apos;re looking for doesn&apos;t exist or has been removed.</p>
+              <Link href="/events">
+                <Button className="bg-primary hover:bg-primary/90">
+                  <ArrowLeft className="h-4 w-4 mr-2" />
+                  Back to Events
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted/20">
+      <Header />
+      
+      <div className="container mx-auto px-4 py-8">
+        {/* Back Button */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-6"
+        >
+          <Link href="/events">
+            <Button variant="ghost" className="text-muted-foreground hover:text-foreground">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Events
+            </Button>
+          </Link>
+        </motion.div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Event Header */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              <Card className="relative overflow-hidden border-0 shadow-lg bg-gradient-to-br from-card via-card to-card/80">
+                {/* Background decoration */}
+                <div className="absolute inset-0 bg-gradient-to-r from-primary/5 via-transparent to-secondary/5"></div>
+                <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary/10 to-transparent rounded-full -translate-y-16 translate-x-16"></div>
+                
+                <CardHeader className="relative">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-4">
+                        <Badge className={`${getStatusColor(event.status)} font-medium`}>
+                          {event.status}
+                        </Badge>
+                        {getPaymentBadge()}
+                        {event.featured && (
+                          <Badge className="bg-gradient-to-r from-yellow-100 to-yellow-200 text-yellow-800 border-yellow-300 font-medium">
+                            <Star className="h-3 w-3 mr-1" />
+                            Featured
+                          </Badge>
+                        )}
+                      </div>
+                      <CardTitle className="text-4xl font-bold mb-3 bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text">
+                        {event.title}
+                      </CardTitle>
+                      <CardDescription className="text-xl font-medium text-muted-foreground">
+                        by {event.organizer}
+                      </CardDescription>
+                    </div>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleShare}
+                      className="flex items-center gap-2 hover:bg-primary/10 transition-colors"
+                    >
+                      {copied ? <CheckCircle className="h-4 w-4" /> : <Share2 className="h-4 w-4" />}
+                      {copied ? 'Copied!' : 'Share'}
+                    </Button>
+                  </div>
+                </CardHeader>
+                
+                <CardContent className="relative">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors">
+                      <div className="p-2 rounded-full bg-primary/10">
+                        <Calendar className="h-5 w-5 text-primary" />
+                      </div>
+                      <div>
+                        <p className="text-sm text-muted-foreground">Date</p>
+                        <p className="font-semibold">{new Date(event.date).toLocaleDateString('en-US', { 
+                          weekday: 'long', 
+                          year: 'numeric', 
+                          month: 'long', 
+                          day: 'numeric' 
+                        })}</p>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors">
+                      <div className="p-2 rounded-full bg-primary/10">
+                        <Clock className="h-5 w-5 text-primary" />
+                      </div>
+                      <div>
+                        <p className="text-sm text-muted-foreground">Time</p>
+                        <p className="font-semibold">{event.time}</p>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors">
+                      <div className="p-2 rounded-full bg-primary/10">
+                        <MapPin className="h-5 w-5 text-primary" />
+                      </div>
+                      <div>
+                        <p className="text-sm text-muted-foreground">Location</p>
+                        <p className="font-semibold">{event.location}</p>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors">
+                      <div className="p-2 rounded-full bg-primary/10">
+                        <Users className="h-5 w-5 text-primary" />
+                      </div>
+                      <div>
+                        <p className="text-sm text-muted-foreground">Participants</p>
+                        <p className="font-semibold">
+                          {event.capacity > 0 ? `${event.registered}/${event.capacity}` : `${event.registered} registered`}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* About Section */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+            >
+              <Card className="border-0 shadow-lg">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-xl">
+                    <div className="p-2 rounded-full bg-primary/10">
+                      <ExternalLink className="h-5 w-5 text-primary" />
+                    </div>
+                    About This Event
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="prose prose-sm max-w-none">
+                    <div className="p-4 rounded-lg bg-gradient-to-r from-primary/5 to-secondary/5 border border-primary/20 mb-6">
+                      <p className="text-muted-foreground font-medium leading-relaxed">{event.excerpt}</p>
+                    </div>
+                    <div className="prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground">
+                      <div dangerouslySetInnerHTML={{ __html: event.description }} />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* Event Details */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.3 }}
+            >
+              <Card className="border-0 shadow-lg">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-xl">
+                    <div className="p-2 rounded-full bg-primary/10">
+                      <Users className="h-5 w-5 text-primary" />
+                    </div>
+                    Event Details
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="p-4 rounded-lg bg-muted/30 border border-muted/50">
+                      <h4 className="font-semibold mb-3 flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-primary"></div>
+                        Category
+                      </h4>
+                      <Badge className="bg-primary/10 text-primary border-primary/20 font-medium">
+                        {event.category}
+                      </Badge>
+                    </div>
+                    
+                    <div className="p-4 rounded-lg bg-muted/30 border border-muted/50">
+                      <h4 className="font-semibold mb-3 flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-primary"></div>
+                        Duration
+                      </h4>
+                      <p className="text-muted-foreground font-medium">{event.duration}</p>
+                    </div>
+                    
+                    <div className="p-4 rounded-lg bg-muted/30 border border-muted/50">
+                      <h4 className="font-semibold mb-3 flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-primary"></div>
+                        Event Type
+                      </h4>
+                      <div className="flex flex-wrap gap-2">
+                        {event.event_type.map((type, index) => (
+                          <Badge key={index} variant="secondary" className="font-medium">
+                            {type}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                    
+                    <div className="p-4 rounded-lg bg-muted/30 border border-muted/50">
+                      <h4 className="font-semibold mb-3 flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-primary"></div>
+                        Target Audience
+                      </h4>
+                      <div className="flex flex-wrap gap-2">
+                        {event.user_types.map((type, index) => (
+                          <Badge key={index} variant="outline" className="font-medium">
+                            {type}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+
+                  {event.tags && event.tags.length > 0 && (
+                    <div className="p-4 rounded-lg bg-gradient-to-r from-primary/5 to-secondary/5 border border-primary/20">
+                      <h4 className="font-semibold mb-3 flex items-center gap-2">
+                        <div className="w-2 h-2 rounded-full bg-primary"></div>
+                        Tags
+                      </h4>
+                      <div className="flex flex-wrap gap-2">
+                        {event.tags.map((tag, index) => (
+                          <Badge key={index} variant="secondary" className="font-medium">
+                            #{tag}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </motion.div>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Registration Card */}
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.1 }}
+            >
+              <Card className="sticky top-8 border-0 shadow-xl bg-gradient-to-br from-card via-card to-card/90">
+                <CardHeader className="pb-4">
+                  <CardTitle className="flex items-center gap-2 text-xl">
+                    <div className="p-2 rounded-full bg-primary/10">
+                      <Calendar className="h-5 w-5 text-primary" />
+                    </div>
+                    Registration
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  {statusLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                      <div className="relative">
+                        <div className="animate-spin rounded-full h-8 w-8 border-2 border-primary border-t-transparent"></div>
+                        <div className="absolute inset-0 rounded-full border-2 border-primary/20 animate-ping"></div>
+                      </div>
+                    </div>
+                  ) : isRegistered ? (
+                    <div className="space-y-4">
+                      <div className="flex items-center gap-3 p-4 rounded-lg bg-green-50 border border-green-200">
+                        <div className="p-2 rounded-full bg-green-100">
+                          <CheckCircle className="h-5 w-5 text-green-600" />
+                        </div>
+                        <div>
+                          <p className="font-semibold text-green-800">You&apos;re Registered!</p>
+                          <p className="text-sm text-green-600">See you at the event</p>
+                        </div>
+                      </div>
+                      {registration?.payment_status === 'paid' && (
+                        <div className="p-3 rounded-lg bg-blue-50 border border-blue-200">
+                          <div className="flex items-center gap-2">
+                            <DollarSign className="h-4 w-4 text-blue-600" />
+                            <span className="text-sm text-blue-800">
+                              Payment Status: <span className="font-semibold">Paid</span>
+                            </span>
+                          </div>
+                        </div>
+                      )}
+                      <Button
+                        variant="outline"
+                        onClick={handleUnregister}
+                        disabled={registering}
+                        className="w-full hover:bg-red-50 hover:border-red-200 hover:text-red-600"
+                      >
+                        {registering ? 'Unregistering...' : 'Unregister'}
+                      </Button>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {!isRegistrationOpen() ? (
+                        <div className="text-center py-6">
+                          <div className="p-3 rounded-full bg-red-100 w-fit mx-auto mb-4">
+                            <XCircle className="h-8 w-8 text-red-500" />
+                          </div>
+                          <h3 className="font-semibold text-red-800 mb-2">Registration Closed</h3>
+                          <p className="text-sm text-muted-foreground">
+                            {event.registered >= event.capacity 
+                              ? 'Event is at full capacity'
+                              : event.registration_deadline && new Date(event.registration_deadline) <= new Date()
+                              ? 'Registration deadline has passed'
+                              : 'Registration is not available'
+                            }
+                          </p>
+                        </div>
+                      ) : (
+                        <div className="space-y-4">
+                          <div className="text-center p-4 rounded-lg bg-gradient-to-r from-primary/5 to-secondary/5 border border-primary/20">
+                            <div className="text-3xl font-bold text-primary mb-2">
+                              {event.payment === 'Required' || event.payment === 'Paid' ? `₹${event.price}` : 'Free'}
+                            </div>
+                            <p className="text-sm text-muted-foreground">
+                              {event.payment === 'Required' || event.payment === 'Paid' ? 'per registration' : 'No cost to participate'}
+                            </p>
+                          </div>
+                          <Button
+                            onClick={handleRegister}
+                            disabled={registering}
+                            className="w-full h-12 text-lg font-semibold bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary shadow-lg hover:shadow-xl transition-all duration-200"
+                            size="lg"
+                          >
+                            {registering ? (
+                              <div className="flex items-center gap-2">
+                                <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
+                                Processing...
+                              </div>
+                            ) : (
+                              <div className="flex items-center gap-2">
+                                {event.payment === 'Required' || event.payment === 'Paid' ? (
+                                  <>
+                                    <DollarSign className="h-5 w-5" />
+                                    Register & Pay
+                                  </>
+                                ) : (
+                                  <>
+                                    <CheckCircle className="h-5 w-5" />
+                                    Register Now
+                                  </>
+                                )}
+                              </div>
+                            )}
+                          </Button>
+                          
+                          {event.payment === 'Required' || event.payment === 'Paid' ? (
+                            <p className="text-xs text-center text-muted-foreground">
+                              Secure payment powered by Razorpay
+                            </p>
+                          ) : null}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {event.registration_deadline && (
+                    <div className="pt-4 border-t border-muted">
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground p-3 rounded-lg bg-muted/30">
+                        <Clock className="h-4 w-4" />
+                        <span>Registration deadline: {new Date(event.registration_deadline).toLocaleDateString()}</span>
+                      </div>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+      
+      <Footer />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/events/[slug]/register/page.tsx b/app/events/[slug]/register/page.tsx
new file mode 100644
index 000000000..937ceba3b
--- /dev/null
+++ b/app/events/[slug]/register/page.tsx
@@ -0,0 +1,455 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useParams, useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { 
+  Calendar, 
+  Clock, 
+  MapPin, 
+  Users, 
+  CheckCircle, 
+  XCircle,
+  ArrowLeft,
+  CreditCard,
+  Shield,
+  Loader2
+} from "lucide-react"
+import Link from "next/link"
+import { motion } from "framer-motion"
+import Header from "@/components/header"
+import Footer from "@/components/footer"
+import Image from "next/image"
+import { toast } from "sonner"
+
+interface Event {
+  id: number
+  slug: string
+  title: string
+  excerpt: string
+  organizer: string
+  date: string
+  time: string
+  location: string
+  capacity: number
+  registered: number
+  price: string
+  payment: string
+  image?: string
+  registration_deadline?: string
+}
+
+
+export default function EventRegistrationPage() {
+  const params = useParams()
+  const router = useRouter()
+  const slug = params.slug as string
+  
+  const [event, setEvent] = useState<Event | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [processing, setProcessing] = useState(false)
+  const [paymentLoading, setPaymentLoading] = useState(false)
+
+  useEffect(() => {
+    const fetchEvent = async () => {
+      try {
+        setLoading(true)
+        const response = await fetch(`/api/events/${slug}`)
+        
+        if (!response.ok) {
+          throw new Error('Event not found')
+        }
+        
+        const data = await response.json()
+        setEvent(data.data)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load event')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    if (slug) {
+      fetchEvent()
+    }
+  }, [slug])
+
+  const loadRazorpayScript = () => {
+    return new Promise((resolve) => {
+      const script = document.createElement('script')
+      script.src = 'https://checkout.razorpay.com/v1/checkout.js'
+      script.onload = () => resolve(true)
+      script.onerror = () => resolve(false)
+      document.body.appendChild(script)
+    })
+  }
+
+  const handlePayment = async () => {
+    if (!event) return
+
+    try {
+      setPaymentLoading(true)
+
+      // Load Razorpay script
+      const razorpayLoaded = await loadRazorpayScript()
+      if (!razorpayLoaded) {
+        throw new Error('Failed to load payment gateway')
+      }
+
+      // Create payment order
+      const response = await fetch(`/api/events/${slug}/payment`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Failed to create payment order')
+      }
+
+      const orderData = await response.json()
+
+      // Configure Razorpay options
+      const options = {
+        key: orderData.key,
+        amount: orderData.amount,
+        currency: orderData.currency,
+        name: 'CodeUnia',
+        description: `Registration for ${orderData.event_title}`,
+        order_id: orderData.orderId,
+        handler: async function (response: Record<string, unknown>) {
+          try {
+            setProcessing(true)
+            
+            // Verify payment
+            const verifyResponse = await fetch(`/api/events/${slug}/payment`, {
+              method: 'PUT',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                orderId: response.razorpay_order_id,
+                paymentId: response.razorpay_payment_id,
+                signature: response.razorpay_signature,
+              }),
+            })
+
+            if (!verifyResponse.ok) {
+              const errorData = await verifyResponse.json()
+              throw new Error(errorData.error || 'Payment verification failed')
+            }
+
+            await verifyResponse.json()
+            toast.success('Payment successful! You are now registered for the event.')
+            
+            // Redirect to event page
+            router.push(`/events/${slug}`)
+          } catch (err) {
+            console.error('Payment verification error:', err)
+            toast.error(err instanceof Error ? err.message : 'Payment verification failed')
+          } finally {
+            setProcessing(false)
+          }
+        },
+        prefill: {
+          name: '',
+          email: '',
+          contact: '',
+        },
+        notes: {
+          event_id: event.id,
+          event_title: event.title,
+        },
+        theme: {
+          color: '#6366f1',
+        },
+        modal: {
+          ondismiss: function() {
+            setPaymentLoading(false)
+          }
+        }
+      }
+
+      // Open Razorpay checkout
+      const razorpay = new window.Razorpay(options)
+      razorpay.open()
+
+    } catch (err) {
+      console.error('Payment error:', err)
+      toast.error(err instanceof Error ? err.message : 'Payment failed')
+      setPaymentLoading(false)
+    }
+  }
+
+  const handleFreeRegistration = async () => {
+    if (!event) return
+
+    try {
+      setProcessing(true)
+      const response = await fetch(`/api/events/${slug}/register`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Registration failed')
+      }
+
+      toast.success('Successfully registered for the event!')
+      router.push(`/events/${slug}`)
+    } catch (err) {
+      console.error('Registration error:', err)
+      toast.error(err instanceof Error ? err.message : 'Registration failed')
+    } finally {
+      setProcessing(false)
+    }
+  }
+
+  const isRegistrationOpen = () => {
+    if (!event) return false
+    if (event.registered >= event.capacity) return false
+    if (event.registration_deadline) {
+      return new Date(event.registration_deadline) > new Date()
+    }
+    return true
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="relative">
+          <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+          <div className="absolute inset-0 rounded-full border-4 border-primary/20 animate-ping"></div>
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !event) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="text-center">
+          <XCircle className="h-16 w-16 text-red-500 mx-auto mb-4" />
+          <h2 className="text-2xl font-bold mb-2">Event Not Found</h2>
+          <p className="text-muted-foreground mb-8">{error || 'The event you are looking for does not exist.'}</p>
+          <Button asChild>
+            <Link href="/events">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Events
+            </Link>
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted/10">
+      <Header />
+      
+      <div className="container mx-auto px-4 py-8">
+        {/* Back Button */}
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-6"
+        >
+          <Button variant="ghost" asChild>
+            <Link href={`/events/${slug}`}>
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Event
+            </Link>
+          </Button>
+        </motion.div>
+
+        <div className="max-w-4xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Event Summary */}
+            <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-2xl">{event.title}</CardTitle>
+                  <CardDescription>by {event.organizer}</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {event.image && (
+                    <div className="relative h-48 w-full rounded-lg overflow-hidden">
+                      <Image
+                        src={event.image}
+                        alt={event.title}
+                        fill
+                        className="object-cover"
+                      />
+                    </div>
+                  )}
+                  
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-2">
+                      <Calendar className="h-4 w-4 text-muted-foreground" />
+                      <span>{new Date(event.date).toLocaleDateString()}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Clock className="h-4 w-4 text-muted-foreground" />
+                      <span>{event.time}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <MapPin className="h-4 w-4 text-muted-foreground" />
+                      <span>{event.location}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Users className="h-4 w-4 text-muted-foreground" />
+                      <span>{event.registered}/{event.capacity} registered</span>
+                    </div>
+                  </div>
+
+                  <div className="pt-4 border-t">
+                    <p className="text-sm text-muted-foreground">{event.excerpt}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* Registration Form */}
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.1 }}
+            >
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <CreditCard className="h-5 w-5" />
+                    Complete Registration
+                  </CardTitle>
+                  <CardDescription>
+                    {event.payment === 'Required' || event.payment === 'Paid' 
+                      ? 'Complete your payment to register for this event'
+                      : 'Register for this free event'
+                    }
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  {!isRegistrationOpen() ? (
+                    <div className="text-center py-8">
+                      <XCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
+                      <h3 className="text-lg font-semibold mb-2">Registration Closed</h3>
+                      <p className="text-muted-foreground">
+                        {event.registered >= event.capacity 
+                          ? 'This event is at full capacity.'
+                          : event.registration_deadline && new Date(event.registration_deadline) <= new Date()
+                          ? 'The registration deadline has passed.'
+                          : 'Registration is not currently open.'
+                        }
+                      </p>
+                    </div>
+                  ) : (
+                    <>
+                      {/* Price Display */}
+                      <div className="text-center p-6 bg-gradient-to-br from-primary/5 to-purple-500/5 rounded-lg border border-primary/20">
+                        <div className="text-3xl font-bold text-primary mb-2">
+                          {event.payment === 'Required' || event.payment === 'Paid' ? event.price : 'Free'}
+                        </div>
+                        <p className="text-muted-foreground">
+                          {event.payment === 'Required' || event.payment === 'Paid' 
+                            ? 'per registration' 
+                            : 'No payment required'
+                          }
+                        </p>
+                      </div>
+
+                      {/* Registration Button */}
+                      <div className="space-y-4">
+                        {event.payment === 'Required' || event.payment === 'Paid' ? (
+                          <Button
+                            onClick={handlePayment}
+                            disabled={paymentLoading || processing}
+                            className="w-full"
+                            size="lg"
+                          >
+                            {paymentLoading ? (
+                              <>
+                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                Processing...
+                              </>
+                            ) : processing ? (
+                              <>
+                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                Verifying Payment...
+                              </>
+                            ) : (
+                              <>
+                                <CreditCard className="h-4 w-4 mr-2" />
+                                Pay & Register
+                              </>
+                            )}
+                          </Button>
+                        ) : (
+                          <Button
+                            onClick={handleFreeRegistration}
+                            disabled={processing}
+                            className="w-full"
+                            size="lg"
+                          >
+                            {processing ? (
+                              <>
+                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                Registering...
+                              </>
+                            ) : (
+                              <>
+                                <CheckCircle className="h-4 w-4 mr-2" />
+                                Register Now
+                              </>
+                            )}
+                          </Button>
+                        )}
+
+                        {/* Security Notice */}
+                        <div className="flex items-start gap-3 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+                          <Shield className="h-5 w-5 text-green-600 mt-0.5" />
+                          <div className="text-sm">
+                            <p className="font-semibold text-green-800 dark:text-green-200 mb-1">
+                              Secure Payment
+                            </p>
+                            <p className="text-green-700 dark:text-green-300">
+                              Your payment is processed securely through Razorpay. 
+                              We use industry-standard encryption to protect your data.
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Registration Deadline */}
+                      {event.registration_deadline && (
+                        <div className="pt-4 border-t">
+                          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                            <Clock className="h-4 w-4" />
+                            <span>Registration deadline: {new Date(event.registration_deadline).toLocaleDateString()}</span>
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </CardContent>
+              </Card>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  )
+}
diff --git a/app/events/page.tsx b/app/events/page.tsx
new file mode 100644
index 000000000..013f4083b
--- /dev/null
+++ b/app/events/page.tsx
@@ -0,0 +1,542 @@
+"use client" 
+
+import { useState, useEffect, useRef } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Search, Clock, ArrowRight, Calendar, Users, MapPin, DollarSign, Link as LinkIcon, Sparkles } from "lucide-react"
+import Link from "next/link"
+import { motion } from "framer-motion"
+import { Event } from "@/lib/services/events"
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+import Image from "next/image";
+import "keen-slider/keen-slider.min.css"
+import { useKeenSlider } from "keen-slider/react"
+import { cn } from "@/lib/utils";
+import { useEvents, useFeaturedEvents } from "@/hooks/useEvents"
+
+// Event categories for dropdown
+const eventCategories = [
+  "All",
+  "Workshop",
+  "Conference", 
+  "Meetup",
+  "Webinar",
+  "Training",
+  "Seminar",
+  "Networking",
+  "Tech Talk",
+  "Career Fair"
+];
+
+export default function EventsPage() {
+  const [searchTerm, setSearchTerm] = useState("")
+  const [dateFilter] = useState("All")
+  const [selectedCategory, setSelectedCategory] = useState<string>("All")
+  const [copiedEventId, setCopiedEventId] = useState<string | null>(null)
+
+  // Use custom hooks for data fetching
+  const { data: eventsData, loading: eventsLoading, error: eventsError } = useEvents({
+    search: searchTerm,
+    category: selectedCategory,
+    dateFilter: dateFilter === "Upcoming" ? "upcoming" : dateFilter === "All" ? "all" : "all"
+  })
+
+  const { loading: featuredLoading } = useFeaturedEvents(5)
+
+  // Extract events from the response
+  const events = eventsData?.events || []
+  const isLoading = eventsLoading || featuredLoading
+
+  // Unique values for filters
+
+  const filteredEvents = events.filter((event) => {
+    const matchesSearch =
+      event.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      event.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      event.tags.some((tag: string) => tag.toLowerCase().includes(searchTerm.toLowerCase()))
+
+    const matchesDate = isDateMatch(event)
+    const matchesDropdownCategory = selectedCategory === "All" || event.category === selectedCategory
+
+    return matchesSearch && matchesDate && matchesDropdownCategory
+  })
+
+  const filteredFeaturedEvents = filteredEvents.filter((event) => event.featured)
+  const regularEvents = filteredEvents.filter((event) => !event.featured)
+
+  // Add keen-slider hook for featured events with autoplay and navigation
+  const realSliderRef = useRef<HTMLDivElement>(null)
+  const sliderTimer = useRef<NodeJS.Timeout | null>(null)
+  const [, slider] = useKeenSlider<HTMLDivElement>({
+    slides: { perView: 1.2, spacing: 24 },
+    breakpoints: {
+      "(min-width: 640px)": { slides: { perView: 1.5, spacing: 24 } },
+      "(min-width: 1024px)": { slides: { perView: 2.2, spacing: 32 } },
+    },
+    loop: filteredFeaturedEvents.length > 1,
+  })
+
+  // Autoplay effect
+  useEffect(() => {
+    if (!slider) return
+    if (filteredFeaturedEvents.length > 1) {
+      const autoplay = () => {
+        slider.current?.next()
+      }
+      sliderTimer.current = setInterval(autoplay, 3500)
+      // Pause on hover
+      const sliderEl = realSliderRef.current
+      if (sliderEl) {
+        const pause = () => sliderTimer.current && clearInterval(sliderTimer.current)
+        const resume = () => { sliderTimer.current = setInterval(autoplay, 3500) }
+        sliderEl.addEventListener("mouseenter", pause)
+        sliderEl.addEventListener("mouseleave", resume)
+        return () => {
+          sliderEl.removeEventListener("mouseenter", pause)
+          sliderEl.removeEventListener("mouseleave", resume)
+        }
+      }
+      return () => {
+        if (sliderTimer.current) clearInterval(sliderTimer.current)
+      }
+    } else {
+      // If less than 2, clear any existing interval
+      if (sliderTimer.current) clearInterval(sliderTimer.current)
+    }
+  }, [slider, filteredFeaturedEvents.length])
+
+  // Date filter logic
+  function isDateMatch(event: Event) {
+    const today = new Date();
+    const eventDate = new Date(event.date);
+    if (dateFilter === "All") return true;
+    if (dateFilter === "Today") {
+      return eventDate.toDateString() === today.toDateString();
+    }
+    if (dateFilter === "This Week") {
+      const weekStart = new Date(today);
+      weekStart.setDate(today.getDate() - today.getDay());
+      const weekEnd = new Date(weekStart);
+      weekEnd.setDate(weekStart.getDate() + 6);
+      return eventDate >= weekStart && eventDate <= weekEnd;
+    }
+    // Default: Upcoming
+    return eventDate >= today;
+  }
+
+  const getCategoryColor = (category: string) => {
+    switch (category) {
+      case "Workshop":
+        return "bg-gradient-to-r from-blue-500 to-indigo-600 text-white"
+      case "Conference":
+        return "bg-gradient-to-r from-emerald-500 to-teal-600 text-white"
+      case "Meetup":
+        return "bg-gradient-to-r from-purple-500 to-violet-600 text-white"
+      case "Webinar":
+        return "bg-gradient-to-r from-red-500 to-pink-600 text-white"
+      case "Training":
+        return "bg-gradient-to-r from-orange-500 to-amber-600 text-white"
+      case "Seminar":
+        return "bg-gradient-to-r from-yellow-500 to-orange-500 text-white"
+      case "Networking":
+        return "bg-gradient-to-r from-cyan-500 to-blue-500 text-white"
+      case "Tech Talk":
+        return "bg-gradient-to-r from-pink-500 to-rose-500 text-white"
+      case "Career Fair":
+        return "bg-gradient-to-r from-green-500 to-emerald-500 text-white"
+      default:
+        return "bg-gradient-to-r from-gray-500 to-slate-600 text-white"
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "upcoming":
+        return "bg-gradient-to-r from-green-500 to-emerald-600 text-white"
+      case "ongoing":
+        return "bg-gradient-to-r from-blue-500 to-cyan-600 text-white"
+      case "completed":
+        return "bg-gradient-to-r from-gray-500 to-slate-600 text-white"
+      case "cancelled":
+        return "bg-gradient-to-r from-red-500 to-pink-600 text-white"
+      default:
+        return "bg-gradient-to-r from-gray-500 to-slate-600 text-white"
+    }
+  }
+
+
+  // Helper to copy event link
+  const handleCopyLink = (slug: string, id: string) => {
+    const url = `${window.location.origin}/events/${slug}`
+    navigator.clipboard.writeText(url)
+    setCopiedEventId(id)
+    setTimeout(() => setCopiedEventId(null), 1500)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="relative">
+          <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+          <div className="absolute inset-0 rounded-full border-4 border-primary/20 animate-ping"></div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col overflow-hidden bg-gradient-to-br from-background via-background to-muted/10">
+       <Header/>
+      
+      {/* Hero Section */}
+      <section className="py-20 md:py-32 relative overflow-hidden">
+                <div
+                    className={cn(
+                        "absolute inset-0",
+                        "[background-size:20px_20px]",
+                        "[background-image:linear-gradient(to_right,rgba(99,102,241,0.8)_1px,transparent_1px),linear-gradient(to_bottom,rgba(99,102,241,0.8)_1px,transparent_1px)]",
+                        "dark:[background-image:linear-gradient(to_right,rgba(139,92,246,0.8)_1px,transparent_1px),linear-gradient(to_bottom,rgba(139,92,246,0.8)_1px,transparent_1px)]"
+                    )}
+                />
+                <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-purple-500/5 animate-gradient"></div>
+                <div className="absolute inset-0">
+                    <div className="absolute top-20 left-10 w-72 h-72 bg-primary/10 rounded-full blur-3xl animate-pulse-slow"></div>
+                    <div
+                        className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse-slow"
+                        style={{ animationDelay: "2s" }}
+                    ></div>
+                </div>
+
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5 }}
+                    className="container px-4 mx-auto relative z-10"
+                >
+                    <div className="max-w-4xl mx-auto text-center space-y-8">
+                        <motion.div
+                            initial={{ scale: 0.9 }}
+                            animate={{ scale: 1 }}
+                            transition={{ duration: 0.3 }}
+                        >
+                            <div className="flex flex-col items-center justify-center gap-4">
+                                <button className="bg-slate-800 no-underline group relative shadow-2xl shadow-zinc-900 rounded-full p-px text-sm font-semibold leading-6 text-white inline-block cursor-default">
+                                    <span className="absolute inset-0 overflow-hidden rounded-full">
+                                        <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+                                    </span>
+                                    <div className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10">
+                                        <span>Events & Conferences </span>
+                                        <span>
+                                            <Sparkles className="w-3 h-3" />
+                                        </span>
+                                    </div>
+                                    <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40" />
+                                </button>
+                            </div>
+                        </motion.div>
+                        <motion.h1
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.5, delay: 0.2 }}
+                            className="text-5xl md:text-6xl font-bold tracking-tight leading-tight"
+                        >
+                            Learn, Network,{" "}
+                            <motion.span
+                                className="gradient-text inline-block"
+                                animate={{
+                                    backgroundPosition: [
+                                        "0% 50%",
+                                        "100% 50%",
+                                        "0% 50%",
+                                    ],
+                                }}
+                                transition={{
+                                    duration: 4,
+                                    repeat: Infinity,
+                                    ease: "linear",
+                                }}
+                                style={{
+                                    background:
+                                        "linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #6366f1)",
+                                    backgroundSize: "300% 100%",
+                                    WebkitBackgroundClip: "text",
+                                    WebkitTextFillColor: "transparent",
+                                }}
+                            >
+                                Grow
+                            </motion.span>
+                        </motion.h1>
+                        <motion.p
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.5, delay: 0.3 }}
+                            className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"
+                        >
+                            Discover amazing events, workshops, and conferences. Connect with industry experts, learn new skills, and expand your professional network!
+                        </motion.p>
+                    </div>
+                </motion.div>
+            </section>
+
+      {/* Search and Filters */}
+      <section className="py-8 bg-gradient-to-b from-muted/30 to-background relative border-b border-primary/10">
+        <div className="container px-4 mx-auto">
+          <div className="flex flex-col lg:flex-row gap-4 items-center justify-between">
+            {/* Search Bar */}
+            <div className="relative w-full lg:w-96 group">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground z-10 group-focus-within:text-primary transition-colors" />
+              <Input
+                placeholder="Search events by title, description, or tags..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10 pr-4 h-12 shadow-lg border-2 focus:border-primary/50 transition-all duration-300 bg-background/80 backdrop-blur-sm rounded-xl"
+              />
+            </div>
+          </div>
+
+          {/* Category Dropdown */}
+          <div className="mt-4 w-full max-w-xs">
+            <label htmlFor="category-select" className="block text-sm font-medium text-muted-foreground mb-1">Event Category</label>
+            <select
+              id="category-select"
+              value={selectedCategory}
+              onChange={e => setSelectedCategory(e.target.value)}
+              className="w-full px-4 py-2 rounded-lg border border-primary/20 bg-background/80 shadow focus:border-primary focus:ring-2 focus:ring-primary/20 text-base"
+            >
+              {eventCategories.map(cat => (
+                <option key={cat} value={cat}>{cat}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </section>
+
+      {/* All Events */}
+      <section className="py-16 bg-gradient-to-b from-muted/30 to-background relative">
+        <div className="container px-4 mx-auto">
+          <motion.div 
+            className="flex items-center justify-between mb-12"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="space-y-2">
+              <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-purple-500/10 border border-primary/20 rounded-full px-4 py-2 text-sm font-medium">
+                <Calendar className="h-4 w-4" />
+                <span>All Events</span>
+              </div>
+              <h2 className="text-3xl md:text-4xl font-bold">
+                Browse <span className="bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">All Events</span>
+              </h2>
+            </div>
+            <div className="text-sm text-muted-foreground font-medium bg-background/80 backdrop-blur-sm px-4 py-2 rounded-full">
+              {regularEvents.length} events found
+            </div>
+          </motion.div>
+
+          {/* Events Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
+            {regularEvents.map((event, index) => (
+              <motion.div
+                key={event.id}
+                className="flex h-full"
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <Card className="flex flex-col h-full group relative overflow-hidden border-0 shadow-lg hover:shadow-xl transition-all duration-300 bg-gradient-to-br from-background to-muted/20">
+                  {/* Event Image/Logo */}
+                  <div className="h-32 w-full relative flex items-center justify-center bg-gradient-to-br from-muted to-muted/50 border-b border-primary/10">
+                    {event.image ? (
+                      <Image
+                        src={event.image}
+                        alt={event.title || 'Event image'}
+                        fill
+                        className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
+                        priority={index < 6}
+                      />
+                    ) : (
+                      <div className="flex items-center justify-center w-full h-full">
+                        <Calendar className="h-12 w-12 text-muted-foreground opacity-40" />
+                      </div>
+                    )}
+                    {/* Event Type Badge */}
+                    <div className="absolute top-2 left-2 flex gap-1 z-10">
+                      <Badge className={`${getCategoryColor(event.category)} shadow-lg text-xs`} variant="secondary">
+                        {event.category}
+                      </Badge>
+                    </div>
+                    {/* Status Badge */}
+                    <div className="absolute top-2 right-2 z-10 flex flex-col items-end gap-1">
+                      <Badge className={`${getStatusColor(event.status)} shadow-lg text-xs`} variant="secondary">
+                        {event.status}
+                      </Badge>
+                    </div>
+                  </div>
+                  {/* Card Content */}
+                  <div className="flex-1 flex flex-col p-4">
+                    {/* Title and Organizer */}
+                    <div className="flex items-center gap-3 mb-2">
+                      <div className="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center text-white font-bold text-lg shadow-lg">
+                        {event.organizer
+                          .split(" ")
+                          .map((n: string) => n[0])
+                          .join("")}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-start justify-between gap-2">
+                          <div className="font-semibold text-base truncate hover:text-primary transition-colors cursor-pointer flex-1">
+                            {event.title}
+                          </div>
+                          <div className="flex items-center gap-2 flex-shrink-0">
+                            <button
+                              onClick={() => handleCopyLink(event.slug, String(event.id))}
+                              className="p-1 bg-background/80 rounded-full border border-primary/20 hover:bg-primary/10 transition-colors"
+                              title="Copy event link"
+                            >
+                              <LinkIcon className="h-4 w-4 text-primary" />
+                            </button>
+                            {copiedEventId === String(event.id) && (
+                              <span className="text-xs text-primary bg-background/90 px-2 py-1 rounded shadow">Link copied!</span>
+                            )}
+                          </div>
+                        </div>
+                        <div className="text-xs text-muted-foreground truncate">{event.organizer}</div>
+                      </div>
+                    </div>
+                    {/* Description/Excerpt */}
+                    <div className="text-xs text-muted-foreground mb-2 line-clamp-2">{event.excerpt}</div>
+                    {/* Meta Row */}
+                    <div className="grid grid-cols-2 gap-2 text-xs mb-2">
+                      <div className="flex items-center gap-1">
+                        <Calendar className="h-3 w-3" />
+                        {new Date(event.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Clock className="h-3 w-3" />
+                        {event.time}
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <MapPin className="h-3 w-3" />
+                        {event.location}
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Users className="h-3 w-3" />
+                        {event.registered}/{event.capacity}
+                      </div>
+                    </div>
+                    
+                    {/* Payment Information */}
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-1">
+                        <DollarSign className="h-3 w-3" />
+                        <span className="text-xs font-medium">
+                          {event.payment === 'Required' || event.payment === 'Paid' ? event.price : 'Free'}
+                        </span>
+                      </div>
+                      <Badge 
+                        variant="outline" 
+                        className={`text-xs ${
+                          event.payment === 'Required' || event.payment === 'Paid' 
+                            ? 'border-green-200 text-green-700 bg-green-50' 
+                            : 'border-blue-200 text-blue-700 bg-blue-50'
+                        }`}
+                      >
+                        {event.payment === 'Required' || event.payment === 'Paid' ? 'Paid' : 'Free'}
+                      </Badge>
+                    </div>
+                    {/* Registration Deadline */}
+                    {event.registration_deadline && (
+                      <div className="flex items-center gap-1 text-xs text-orange-600 mb-2">
+                        <Clock className="h-3 w-3" />
+                        Reg. Deadline: {new Date(event.registration_deadline).toLocaleDateString()}
+                      </div>
+                    )}
+                    {/* Tags */}
+                    <div className="flex flex-wrap gap-1 mb-2">
+                      {event.tags.slice(0, 2).map((tag: string) => (
+                        <Badge key={tag} variant="outline" className="text-xxs bg-background/50 backdrop-blur-sm">
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+                    {/* Action Button */}
+                    <div className="mt-auto pt-2 flex justify-end">
+                      <Button
+                        variant="default"
+                        size="lg"
+                        className="font-semibold px-6 py-2 rounded-full text-base bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 shadow-lg transition-transform duration-200 transform-gpu hover:scale-105 focus:ring-2 focus:ring-primary/40"
+                        asChild
+                      >
+                        <Link href={`/events/${event.slug}`}>
+                          Join Now <ArrowRight className="ml-1 h-5 w-5" />
+                        </Link>
+                      </Button>
+                    </div>
+                  </div>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+
+          {eventsError && (
+            <motion.div 
+              className="text-center py-20"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5 }}
+            >
+              <div className="w-32 h-32 bg-gradient-to-br from-red-100 to-red-50 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg relative overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-br from-red-500/10 to-red-600/10 animate-pulse"></div>
+                <Calendar className="h-16 w-16 text-red-500 relative z-10" />
+              </div>
+              <h3 className="text-2xl font-bold mb-4 text-red-600">Error loading events</h3>
+              <p className="text-muted-foreground mb-8 max-w-md mx-auto">
+                {eventsError}
+              </p>
+              <Button
+                onClick={() => window.location.reload()}
+                className="bg-red-600 hover:bg-red-700 text-white"
+              >
+                Try Again
+              </Button>
+            </motion.div>
+          )}
+
+          {!eventsError && regularEvents.length === 0 && (
+            <motion.div 
+              className="text-center py-20"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5 }}
+            >
+              <div className="w-32 h-32 bg-gradient-to-br from-muted to-muted/50 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg relative overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-purple-500/10 animate-pulse"></div>
+                <Calendar className="h-16 w-16 text-muted-foreground relative z-10" />
+              </div>
+              <h3 className="text-2xl font-bold mb-4">No events found</h3>
+              <p className="text-muted-foreground mb-8 max-w-md mx-auto">
+                Try adjusting your search terms or browse different categories.
+              </p>
+              <Button
+                onClick={() => {
+                  setSearchTerm("")
+                }}
+                className="glow-effect hover:scale-105 transition-all duration-300 bg-gradient-to-r from-primary to-purple-600"
+              >
+                Clear Filters
+              </Button>
+            </motion.div>
+          )}
+        </div>
+      </section>
+
+      <Footer/>
+    </div>
+  )
+}
diff --git a/app/protected/events/page.tsx b/app/protected/events/page.tsx
new file mode 100644
index 000000000..bb5123b4f
--- /dev/null
+++ b/app/protected/events/page.tsx
@@ -0,0 +1,286 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Calendar, MapPin, Clock, User, CheckCircle, XCircle, AlertCircle } from "lucide-react"
+import { useEventRegistrations } from "@/hooks/useEventRegistrations"
+import { toast } from "sonner"
+import Image from "next/image"
+import Link from "next/link"
+
+export default function UserEventsPage() {
+  const { data, loading, error, unregisterFromEvent } = useEventRegistrations()
+  const [unregistering, setUnregistering] = useState<string | null>(null)
+
+  const handleUnregister = async (eventSlug: string, eventTitle: string) => {
+    try {
+      setUnregistering(eventSlug)
+      await unregisterFromEvent(eventSlug)
+      toast.success(`Successfully unregistered from "${eventTitle}"`)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to unregister from event')
+    } finally {
+      setUnregistering(null)
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'registered':
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-300'
+      case 'attended':
+        return 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-300'
+      case 'cancelled':
+        return 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-300'
+      case 'no_show':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-300'
+      default:
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300'
+    }
+  }
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'registered':
+        return <AlertCircle className="h-4 w-4" />
+      case 'attended':
+        return <CheckCircle className="h-4 w-4" />
+      case 'cancelled':
+        return <XCircle className="h-4 w-4" />
+      case 'no_show':
+        return <AlertCircle className="h-4 w-4" />
+      default:
+        return <AlertCircle className="h-4 w-4" />
+    }
+  }
+
+  const getPaymentStatusColor = (status: string) => {
+    switch (status) {
+      case 'paid':
+        return 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-300'
+      case 'pending':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-300'
+      case 'refunded':
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300'
+      default:
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300'
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex-1 w-full flex flex-col gap-8 p-6 max-w-4xl mx-auto">
+        <div className="space-y-6">
+          <div className="text-center space-y-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mb-4">
+              <Calendar className="h-8 w-8 text-white" />
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 dark:from-white dark:via-blue-200 dark:to-purple-200 bg-clip-text text-transparent">
+              My Events
+            </h1>
+          </div>
+          <div className="flex items-center justify-center py-20">
+            <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex-1 w-full flex flex-col gap-8 p-6 max-w-4xl mx-auto">
+        <div className="space-y-6">
+          <div className="text-center space-y-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-red-500 to-pink-600 rounded-full mb-4">
+              <XCircle className="h-8 w-8 text-white" />
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-900 via-red-800 to-pink-800 dark:from-white dark:via-red-200 dark:to-pink-200 bg-clip-text text-transparent">
+              Error Loading Events
+            </h1>
+            <p className="text-xl text-red-600 dark:text-red-400">{error}</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const registrations = data?.registrations || []
+
+  return (
+    <div className="flex-1 w-full flex flex-col gap-8 p-6 max-w-4xl mx-auto">
+      <div className="space-y-6">
+        {/* Page Header */}
+        <div className="text-center space-y-4">
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mb-4">
+            <Calendar className="h-8 w-8 text-white" />
+          </div>
+          
+          <div className="space-y-2">
+            <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 dark:from-white dark:via-blue-200 dark:to-purple-200 bg-clip-text text-transparent">
+              My Events
+            </h1>
+            <p className="text-xl text-gray-600 dark:text-gray-300 font-medium">
+              Track your event registrations and participation
+            </p>
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Total Registrations</CardTitle>
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{registrations.length}</div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Attended</CardTitle>
+              <CheckCircle className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-green-600">
+                {registrations.filter(r => r.status === 'attended').length}
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Upcoming</CardTitle>
+              <Clock className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold text-blue-600">
+                {registrations.filter(r => r.status === 'registered' && new Date(r.event.date) > new Date()).length}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Events List */}
+        {registrations.length === 0 ? (
+          <Card>
+            <CardContent className="text-center py-20">
+              <Calendar className="h-16 w-16 text-gray-400 mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
+                No Event Registrations
+              </h3>
+              <p className="text-gray-500 dark:text-gray-400 mb-6">
+                You haven&apos;t registered for any events yet. Explore our events and start participating!
+              </p>
+              <Button asChild>
+                <Link href="/events">Browse Events</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="space-y-4">
+            {registrations.map((registration) => (
+              <Card key={registration.id} className="hover:shadow-lg transition-shadow">
+                <CardContent className="p-6">
+                  <div className="flex flex-col lg:flex-row gap-6">
+                    {/* Event Image */}
+                    <div className="w-full lg:w-48 h-32 relative rounded-lg overflow-hidden bg-gradient-to-br from-muted to-muted/50">
+                      {registration.event.image ? (
+                        <Image
+                          src={registration.event.image}
+                          alt={registration.event.title}
+                          fill
+                          className="object-cover"
+                        />
+                      ) : (
+                        <div className="flex items-center justify-center w-full h-full">
+                          <Calendar className="h-12 w-12 text-muted-foreground opacity-40" />
+                        </div>
+                      )}
+                      {registration.event.featured && (
+                        <Badge className="absolute top-2 left-2 bg-yellow-500 text-white">
+                          Featured
+                        </Badge>
+                      )}
+                    </div>
+
+                    {/* Event Details */}
+                    <div className="flex-1 space-y-4">
+                      <div>
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="flex-1">
+                            <h3 className="text-xl font-semibold mb-2">
+                              <Link 
+                                href={`/events/${registration.event.slug}`}
+                                className="hover:text-primary transition-colors"
+                              >
+                                {registration.event.title}
+                              </Link>
+                            </h3>
+                            <p className="text-muted-foreground mb-3 line-clamp-2">
+                              {registration.event.excerpt}
+                            </p>
+                          </div>
+                          <div className="flex flex-col gap-2">
+                            <Badge className={getStatusColor(registration.status)}>
+                              {getStatusIcon(registration.status)}
+                              <span className="ml-1 capitalize">{registration.status}</span>
+                            </Badge>
+                            <Badge className={getPaymentStatusColor(registration.paymentStatus)}>
+                              {registration.paymentStatus}
+                            </Badge>
+                          </div>
+                        </div>
+
+                        {/* Event Meta */}
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-muted-foreground">
+                          <div className="flex items-center gap-2">
+                            <User className="h-4 w-4" />
+                            <span>{registration.event.organizer}</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <Calendar className="h-4 w-4" />
+                            <span>{new Date(registration.event.date).toLocaleDateString()}</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <Clock className="h-4 w-4" />
+                            <span>{registration.event.time}</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <MapPin className="h-4 w-4" />
+                            <span>{registration.event.location}</span>
+                          </div>
+                        </div>
+
+                        {/* Registration Details */}
+                        <div className="pt-2 border-t border-muted">
+                          <div className="flex items-center justify-between">
+                            <div className="text-sm text-muted-foreground">
+                              Registered on {new Date(registration.registrationDate).toLocaleDateString()}
+                            </div>
+                            {registration.status === 'registered' && new Date(registration.event.date) > new Date() && (
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => handleUnregister(registration.event.slug, registration.event.title)}
+                                disabled={unregistering === registration.event.slug}
+                              >
+                                {unregistering === registration.event.slug ? 'Unregistering...' : 'Unregister'}
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/app/protected/hackathons/page.tsx b/app/protected/hackathons/page.tsx
new file mode 100644
index 000000000..4d5dc11bb
--- /dev/null
+++ b/app/protected/hackathons/page.tsx
@@ -0,0 +1,349 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Search, Clock, Calendar, CheckCircle, XCircle, AlertCircle, Trophy, Award, MapPin, Users } from "lucide-react"
+import Link from "next/link"
+import { motion } from "framer-motion"
+import { useMasterRegistrations, MasterRegistration } from "@/hooks/useMasterRegistrations"
+
+export default function ProtectedHackathonsPage() {
+  const [searchTerm, setSearchTerm] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+
+  // Get user's hackathon registrations
+  const { 
+    registrations, 
+    loading: registrationsLoading, 
+    error: registrationsError 
+  } = useMasterRegistrations({ activity_type: 'hackathon' })
+
+  // Filter registrations based on search and status
+  const filteredRegistrations = registrations.filter((reg: MasterRegistration) => {
+    const matchesSearch = !searchTerm || 
+      reg.metadata?.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      reg.metadata?.organizer?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      reg.metadata?.category?.toLowerCase().includes(searchTerm.toLowerCase())
+
+    const matchesStatus = statusFilter === "all" || reg.status === statusFilter
+
+    return matchesSearch && matchesStatus
+  })
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "registered":
+        return "bg-blue-100 text-blue-800 border-blue-200"
+      case "pending":
+        return "bg-yellow-100 text-yellow-800 border-yellow-200"
+      case "approved":
+        return "bg-green-100 text-green-800 border-green-200"
+      case "rejected":
+        return "bg-red-100 text-red-800 border-red-200"
+      case "cancelled":
+        return "bg-gray-100 text-gray-800 border-gray-200"
+      case "completed":
+        return "bg-purple-100 text-purple-800 border-purple-200"
+      case "attended":
+        return "bg-emerald-100 text-emerald-800 border-emerald-200"
+      case "no_show":
+        return "bg-orange-100 text-orange-800 border-orange-200"
+      case "disqualified":
+        return "bg-red-100 text-red-800 border-red-200"
+      default:
+        return "bg-gray-100 text-gray-800 border-gray-200"
+    }
+  }
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "registered":
+        return <CheckCircle className="h-4 w-4" />
+      case "pending":
+        return <Clock className="h-4 w-4" />
+      case "approved":
+        return <CheckCircle className="h-4 w-4" />
+      case "rejected":
+        return <XCircle className="h-4 w-4" />
+      case "cancelled":
+        return <XCircle className="h-4 w-4" />
+      case "completed":
+        return <Trophy className="h-4 w-4" />
+      case "attended":
+        return <Award className="h-4 w-4" />
+      case "no_show":
+        return <AlertCircle className="h-4 w-4" />
+      case "disqualified":
+        return <XCircle className="h-4 w-4" />
+      default:
+        return <Clock className="h-4 w-4" />
+    }
+  }
+
+
+  if (registrationsLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="relative">
+          <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+          <div className="absolute inset-0 rounded-full border-4 border-primary/20 animate-ping"></div>
+        </div>
+      </div>
+    )
+  }
+
+  if (registrationsError) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
+        <div className="text-center">
+          <AlertCircle className="h-16 w-16 text-red-500 mx-auto mb-4" />
+          <h2 className="text-2xl font-bold mb-2">Error Loading Your Hackathons</h2>
+          <p className="text-muted-foreground">{registrationsError}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted/10">
+      <div className="container mx-auto px-4 py-8">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-8"
+        >
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-primary to-purple-600 rounded-full mb-4">
+            <Trophy className="h-8 w-8 text-white" />
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent mb-2">
+            My Hackathon Dashboard
+          </h1>
+          <p className="text-xl text-muted-foreground">
+            Track your hackathon participation and achievements
+          </p>
+        </motion.div>
+
+        {/* Stats Cards */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+          className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"
+        >
+          <Card className="text-center p-6 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border-blue-200 dark:border-blue-800">
+            <div className="text-3xl font-bold text-blue-600 mb-2">{registrations.length}</div>
+            <div className="text-sm text-muted-foreground">Total Participations</div>
+          </Card>
+          <Card className="text-center p-6 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border-green-200 dark:border-green-800">
+            <div className="text-3xl font-bold text-green-600 mb-2">
+              {registrations.filter(r => r.status === 'completed' || r.status === 'attended').length}
+            </div>
+            <div className="text-sm text-muted-foreground">Completed</div>
+          </Card>
+          <Card className="text-center p-6 bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 border-orange-200 dark:border-orange-800">
+            <div className="text-3xl font-bold text-orange-600 mb-2">
+              {registrations.filter(r => r.status === 'registered' || r.status === 'pending').length}
+            </div>
+            <div className="text-sm text-muted-foreground">Active</div>
+          </Card>
+          <Card className="text-center p-6 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border-purple-200 dark:border-purple-800">
+            <div className="text-3xl font-bold text-purple-600 mb-2">
+              {registrations.filter(r => r.payment_status === 'paid').length}
+            </div>
+            <div className="text-sm text-muted-foreground">Paid</div>
+          </Card>
+        </motion.div>
+
+        {/* Search and Filters */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="flex flex-col lg:flex-row gap-4 items-center justify-between mb-8"
+        >
+          {/* Search Bar */}
+          <div className="relative w-full lg:w-96 group">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground z-10 group-focus-within:text-primary transition-colors" />
+            <Input
+              placeholder="Search your hackathons..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10 pr-4 h-12 shadow-lg border-2 focus:border-primary/50 transition-all duration-300 bg-background/80 backdrop-blur-sm rounded-xl"
+            />
+          </div>
+          
+          {/* Status Filter */}
+          <div className="flex gap-2">
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="px-4 py-2 rounded-lg border border-primary/20 bg-background/80 shadow focus:border-primary focus:ring-2 focus:ring-primary/20 text-base"
+            >
+              <option value="all">All Status</option>
+              <option value="registered">Registered</option>
+              <option value="pending">Pending</option>
+              <option value="approved">Approved</option>
+              <option value="completed">Completed</option>
+              <option value="attended">Attended</option>
+              <option value="cancelled">Cancelled</option>
+              <option value="rejected">Rejected</option>
+            </select>
+          </div>
+        </motion.div>
+
+        {/* Hackathons List */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+          className="mb-8"
+        >
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-bold">Your Hackathon Participations</h2>
+            <div className="text-sm text-muted-foreground bg-background/80 backdrop-blur-sm px-4 py-2 rounded-full">
+              {filteredRegistrations.length} hackathons found
+            </div>
+          </div>
+
+          {/* Hackathons List */}
+          <div className="space-y-4">
+            {filteredRegistrations.map((registration: MasterRegistration, index) => (
+              <motion.div
+                key={registration.id}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <Card className="p-6 hover:shadow-lg transition-all duration-300 border-l-4 border-l-primary">
+                  <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+                    {/* Left Side - Hackathon Info */}
+                    <div className="flex-1">
+                      <div className="flex items-start gap-4">
+                        <div className="w-12 h-12 bg-gradient-to-br from-primary to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">
+                          {registration.metadata?.title?.charAt(0) || 'H'}
+                        </div>
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2 mb-2">
+                            <h3 className="text-lg font-semibold">
+                              {registration.metadata?.title || `Hackathon #${registration.activity_id}`}
+                            </h3>
+                            <Badge className={`${getStatusColor(registration.status)} flex items-center gap-1`}>
+                              {getStatusIcon(registration.status)}
+                              {registration.status}
+                            </Badge>
+                          </div>
+                          
+                          <div className="flex flex-wrap gap-2 mb-3">
+                            {registration.metadata?.category && (
+                              <Badge variant="outline" className="text-xs">
+                                {registration.metadata.category}
+                              </Badge>
+                            )}
+                            <Badge variant="outline" className="text-xs">
+                              {registration.payment_status}
+                            </Badge>
+                            {registration.payment_amount && (
+                              <Badge variant="outline" className="text-xs">
+                                {registration.payment_currency} {registration.payment_amount}
+                              </Badge>
+                            )}
+                          </div>
+
+                          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-muted-foreground">
+                            <div className="flex items-center gap-1">
+                              <Calendar className="h-4 w-4" />
+                              <span>Registered: {new Date(registration.registration_date).toLocaleDateString()}</span>
+                            </div>
+                            {registration.metadata?.event_date && (
+                              <div className="flex items-center gap-1">
+                                <Clock className="h-4 w-4" />
+                                <span>Event: {new Date(registration.metadata.event_date).toLocaleDateString()}</span>
+                              </div>
+                            )}
+                            {registration.metadata?.location && (
+                              <div className="flex items-center gap-1">
+                                <MapPin className="h-4 w-4" />
+                                <span>{registration.metadata.location}</span>
+                              </div>
+                            )}
+                            {registration.metadata?.team_name && (
+                              <div className="flex items-center gap-1">
+                                <Users className="h-4 w-4" />
+                                <span>Team: {registration.metadata.team_name}</span>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Right Side - Actions */}
+                    <div className="flex flex-col sm:flex-row gap-2">
+                      {registration.metadata?.slug && (
+                        <Button asChild variant="outline" size="sm">
+                          <Link href={`/hackathons/${registration.metadata.slug}`}>
+                            View Details
+                          </Link>
+                        </Button>
+                      )}
+                      <Button variant="outline" size="sm" disabled>
+                        View Certificate
+                      </Button>
+                    </div>
+                  </div>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+
+          {filteredRegistrations.length === 0 && (
+            <motion.div 
+              className="text-center py-20"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5 }}
+            >
+              <div className="w-32 h-32 bg-gradient-to-br from-muted to-muted/50 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg relative overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-purple-500/10 animate-pulse"></div>
+                <Trophy className="h-16 w-16 text-muted-foreground relative z-10" />
+              </div>
+              <h3 className="text-2xl font-bold mb-4">No hackathons found</h3>
+              <p className="text-muted-foreground mb-8 max-w-md mx-auto">
+                {registrations.length === 0 
+                  ? "You haven't participated in any hackathons yet. Start your journey by exploring available hackathons!"
+                  : "Try adjusting your search terms or filters to find your hackathons."
+                }
+              </p>
+              <div className="flex gap-4 justify-center">
+                <Button
+                  onClick={() => {
+                    setSearchTerm("")
+                    setStatusFilter("all")
+                  }}
+                  variant="outline"
+                >
+                  Clear Filters
+                </Button>
+                {registrations.length === 0 && (
+                  <Button
+                    asChild
+                    className="glow-effect hover:scale-105 transition-all duration-300 bg-gradient-to-r from-primary to-purple-600"
+                  >
+                    <Link href="/hackathons">
+                      Browse Hackathons
+                    </Link>
+                  </Button>
+                )}
+              </div>
+            </motion.div>
+          )}
+        </motion.div>
+      </div>
+    </div>
+  )
+}
diff --git a/check-database-status.sql b/check-database-status.sql
new file mode 100644
index 000000000..be637ca33
--- /dev/null
+++ b/check-database-status.sql
@@ -0,0 +1,57 @@
+-- =====================================================
+-- DATABASE STATUS CHECK
+-- =====================================================
+-- Copy and paste this entire query into your Supabase SQL Editor
+-- and share the results with me
+
+-- 1. Check if profiles table exists
+SELECT 
+    'Table Check' as check_type,
+    table_name,
+    CASE 
+        WHEN table_name = 'profiles' THEN 'EXISTS'
+        ELSE 'OTHER TABLE'
+    END as status
+FROM information_schema.tables 
+WHERE table_schema = 'public' 
+AND table_name = 'profiles';
+
+-- 2. Check if update_username function exists
+SELECT 
+    'Function Check' as check_type,
+    proname as function_name,
+    CASE 
+        WHEN proname = 'update_username' THEN 'EXISTS'
+        ELSE 'OTHER FUNCTION'
+    END as status
+FROM pg_proc 
+WHERE proname = 'update_username';
+
+-- 3. Check if set_username function exists
+SELECT 
+    'Function Check' as check_type,
+    proname as function_name,
+    CASE 
+        WHEN proname = 'set_username' THEN 'EXISTS'
+        ELSE 'OTHER FUNCTION'
+    END as status
+FROM pg_proc 
+WHERE proname = 'set_username';
+
+-- 4. List all tables in public schema
+SELECT 
+    'All Tables' as check_type,
+    table_name,
+    'EXISTS' as status
+FROM information_schema.tables 
+WHERE table_schema = 'public'
+ORDER BY table_name;
+
+-- 5. List all functions in public schema
+SELECT 
+    'All Functions' as check_type,
+    proname as function_name,
+    'EXISTS' as status
+FROM pg_proc 
+WHERE pronamespace = (SELECT oid FROM pg_namespace WHERE nspname = 'public')
+ORDER BY proname;
diff --git a/check-schema-permissions.sql b/check-schema-permissions.sql
new file mode 100644
index 000000000..92b340d82
--- /dev/null
+++ b/check-schema-permissions.sql
@@ -0,0 +1,55 @@
+-- =====================================================
+-- CHECK SCHEMA AND PERMISSIONS
+-- =====================================================
+-- Copy and paste this query to check schema and permissions
+
+-- 1. Check current schema
+SELECT 
+    'Current Schema' as check_type,
+    current_schema() as schema_name,
+    'Current schema being used' as info;
+
+-- 2. Check if profiles table exists in different schemas
+SELECT 
+    'Table Schema Check' as check_type,
+    table_schema,
+    table_name,
+    'EXISTS' as status
+FROM information_schema.tables 
+WHERE table_name = 'profiles'
+ORDER BY table_schema;
+
+-- 3. Check table permissions for current user
+SELECT 
+    'Table Permissions' as check_type,
+    table_name,
+    privilege_type,
+    grantee
+FROM information_schema.table_privileges 
+WHERE table_name = 'profiles'
+AND table_schema = 'public';
+
+-- 4. Check function permissions
+SELECT 
+    'Function Permissions' as check_type,
+    routine_name,
+    privilege_type,
+    grantee
+FROM information_schema.routine_privileges 
+WHERE routine_name = 'update_username'
+AND routine_schema = 'public';
+
+-- 5. Check if we can access profiles table directly
+SELECT 
+    'Direct Access Test' as check_type,
+    COUNT(*) as row_count,
+    'Can access profiles table' as info
+FROM public.profiles;
+
+-- 6. Check search_path
+SELECT 
+    'Search Path' as check_type,
+    setting as search_path,
+    'Current search path' as info
+FROM pg_settings 
+WHERE name = 'search_path';
diff --git a/components/UsernameField.tsx b/components/UsernameField.tsx
index f3ddca7c6..eed22e43b 100644
--- a/components/UsernameField.tsx
+++ b/components/UsernameField.tsx
@@ -109,7 +109,11 @@ export function UsernameField({
       })
 
       if (error) {
-        if (error.message.includes('Username can only be changed once')) {
+        // Handle specific database errors
+        if (error.message.includes('relation "profiles" does not exist')) {
+          setError("Database setup incomplete. Please contact support.")
+          console.error('Profiles table does not exist. Database migration needed.')
+        } else if (error.message.includes('Username can only be changed once')) {
           setError("You can only change your username once")
         } else if (error.message.includes('Username is already taken')) {
           setError("Username is already taken")
diff --git a/components/dashboard/DashboardContent.tsx b/components/dashboard/DashboardContent.tsx
index 93298e60c..b250eda3e 100644
--- a/components/dashboard/DashboardContent.tsx
+++ b/components/dashboard/DashboardContent.tsx
@@ -1,11 +1,13 @@
 'use client'
 
 import React from 'react'
-import { Sparkles, Rocket, Shield, User } from 'lucide-react'
+import { Sparkles, Rocket, Shield, User, Calendar } from 'lucide-react'
 import { ContributionGraph } from '@/components/ui/contribution-graph'
 import { useContributionGraph } from '@/hooks/useContributionGraph'
 import MembershipCard from '@/components/MembershipCard'
 import { ClientOnly } from '@/components/ClientOnly'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
 
 interface DashboardContentProps {
   userId: string
@@ -37,6 +39,34 @@ export function DashboardContent({ userId, displayName }: DashboardContentProps)
         </div>
       </div>
 
+      {/* Quick Actions */}
+      <div className="flex flex-wrap gap-4 justify-center">
+        <Button asChild variant="outline" className="flex items-center gap-2">
+          <Link href="/events">
+            <Calendar className="h-4 w-4" />
+            Browse Events
+          </Link>
+        </Button>
+        <Button asChild variant="outline" className="flex items-center gap-2">
+          <Link href="/protected/events">
+            <User className="h-4 w-4" />
+            My Events
+          </Link>
+        </Button>
+        <Button asChild variant="outline" className="flex items-center gap-2">
+          <Link href="/hackathons">
+            <Rocket className="h-4 w-4" />
+            Browse Hackathons
+          </Link>
+        </Button>
+        <Button asChild variant="outline" className="flex items-center gap-2">
+          <Link href="/protected/hackathons">
+            <Rocket className="h-4 w-4" />
+            My Hackathons
+          </Link>
+        </Button>
+      </div>
+
       {/* Membership Card Section */}
       <ClientOnly fallback={<div className="flex justify-center my-8 h-48 bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse" />}>
         <div className="flex justify-center my-8">
diff --git a/fix-username-function.sql b/fix-username-function.sql
new file mode 100644
index 000000000..53c468b1a
--- /dev/null
+++ b/fix-username-function.sql
@@ -0,0 +1,59 @@
+-- =====================================================
+-- FIX UPDATE_USERNAME FUNCTION
+-- =====================================================
+-- Copy and paste this query to fix the update_username function
+
+-- Drop and recreate the function with proper schema references
+DROP FUNCTION IF EXISTS update_username(UUID, TEXT);
+
+CREATE OR REPLACE FUNCTION update_username(
+    user_id UUID,
+    new_username TEXT
+)
+RETURNS BOOLEAN
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+DECLARE
+    can_edit BOOLEAN;
+    username_exists BOOLEAN;
+BEGIN
+    -- Check if user can still edit username
+    SELECT username_editable INTO can_edit 
+    FROM public.profiles 
+    WHERE id = user_id;
+    
+    IF NOT FOUND THEN
+        RETURN FALSE;
+    END IF;
+    
+    IF NOT can_edit THEN
+        RETURN FALSE; -- Username already edited once
+    END IF;
+    
+    -- Check if new username already exists
+    SELECT EXISTS(SELECT 1 FROM public.profiles WHERE username = new_username AND id != user_id) 
+    INTO username_exists;
+    
+    IF username_exists THEN
+        RETURN FALSE; -- Username already taken
+    END IF;
+    
+    -- Update username and mark as non-editable
+    UPDATE public.profiles 
+    SET username = new_username, username_editable = FALSE
+    WHERE id = user_id;
+    
+    RETURN TRUE;
+END;
+$$;
+
+-- Grant execute permission to authenticated users
+GRANT EXECUTE ON FUNCTION update_username(UUID, TEXT) TO authenticated;
+GRANT EXECUTE ON FUNCTION update_username(UUID, TEXT) TO anon;
+GRANT EXECUTE ON FUNCTION update_username(UUID, TEXT) TO service_role;
+
+-- Test the function
+SELECT 
+    'Function Fixed' as status,
+    'update_username function has been updated with proper schema references' as message;
diff --git a/hooks/useEventRegistrations.ts b/hooks/useEventRegistrations.ts
new file mode 100644
index 000000000..2b2370c7b
--- /dev/null
+++ b/hooks/useEventRegistrations.ts
@@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react'
+
+export interface EventRegistration {
+  id: number
+  registrationDate: string
+  status: 'registered' | 'attended' | 'cancelled' | 'no_show'
+  paymentStatus: 'pending' | 'paid' | 'refunded'
+  notes?: string
+  event: {
+    id: number
+    slug: string
+    title: string
+    excerpt: string
+    organizer: string
+    date: string
+    time: string
+    location: string
+    category: string
+    featured: boolean
+    image?: string
+  }
+}
+
+export interface EventRegistrationsResponse {
+  registrations: EventRegistration[]
+  total: number
+}
+
+export function useEventRegistrations() {
+  const [data, setData] = useState<EventRegistrationsResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchRegistrations = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+
+        const response = await fetch('/api/user/events')
+        
+        if (!response.ok) {
+          if (response.status === 401) {
+            throw new Error('Please sign in to view your event registrations')
+          }
+          throw new Error('Failed to fetch event registrations')
+        }
+
+        const result = await response.json()
+        setData(result)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchRegistrations()
+  }, [])
+
+  const registerForEvent = async (eventSlug: string) => {
+    try {
+      const response = await fetch(`/api/events/${eventSlug}/register`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Failed to register for event')
+      }
+
+      const result = await response.json()
+      
+      // Refresh the registrations list
+      const refreshResponse = await fetch('/api/user/events')
+      if (refreshResponse.ok) {
+        const refreshData = await refreshResponse.json()
+        setData(refreshData)
+      }
+
+      return result
+    } catch (err) {
+      throw err
+    }
+  }
+
+  const unregisterFromEvent = async (eventSlug: string) => {
+    try {
+      const response = await fetch(`/api/events/${eventSlug}/register`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Failed to unregister from event')
+      }
+
+      const result = await response.json()
+      
+      // Refresh the registrations list
+      const refreshResponse = await fetch('/api/user/events')
+      if (refreshResponse.ok) {
+        const refreshData = await refreshResponse.json()
+        setData(refreshData)
+      }
+
+      return result
+    } catch (err) {
+      throw err
+    }
+  }
+
+  return { 
+    data, 
+    loading, 
+    error, 
+    registerForEvent, 
+    unregisterFromEvent 
+  }
+}
diff --git a/hooks/useEvents.ts b/hooks/useEvents.ts
new file mode 100644
index 000000000..237f8b557
--- /dev/null
+++ b/hooks/useEvents.ts
@@ -0,0 +1,146 @@
+import { useState, useEffect } from 'react'
+
+export interface EventsParams {
+  search?: string
+  category?: string
+  dateFilter?: string
+  limit?: number
+  offset?: number
+}
+
+export interface EventsResponse {
+  events: any[]
+  total: number
+  hasMore: boolean
+}
+
+export function useEvents(params: EventsParams = {}) {
+  const [data, setData] = useState<EventsResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Force useEffect to run by using a more explicit dependency
+  const paramsString = JSON.stringify(params)
+  
+  useEffect(() => {
+    let isMounted = true
+    
+    const fetchEvents = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+
+        // Build query parameters
+        const queryParams = new URLSearchParams()
+        if (params.search) queryParams.append('search', params.search)
+        if (params.category && params.category !== 'All') queryParams.append('category', params.category)
+        if (params.dateFilter) queryParams.append('dateFilter', params.dateFilter)
+        if (params.limit) queryParams.append('limit', params.limit.toString())
+        if (params.offset) queryParams.append('offset', params.offset.toString())
+
+        const url = `/api/events?${queryParams.toString()}`
+        
+        const response = await fetch(url)
+        
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+        }
+
+        const result = await response.json()
+        
+        if (isMounted) {
+          setData(result)
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : 'Failed to fetch events')
+        }
+      } finally {
+        if (isMounted) {
+          setLoading(false)
+        }
+      }
+    }
+
+    fetchEvents()
+    
+    return () => {
+      isMounted = false
+    }
+  }, [paramsString]) // Use paramsString instead of individual params
+
+  return { data, loading, error }
+}
+
+export function useFeaturedEvents(limit: number = 5) {
+  const [events, setEvents] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchFeaturedEvents = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+
+        const response = await fetch(`/api/events/featured?limit=${limit}`)
+        
+        if (!response.ok) {
+          throw new Error('Failed to fetch featured events')
+        }
+
+        const result = await response.json()
+        setEvents(result.events || [])
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchFeaturedEvents()
+  }, [limit])
+
+  return { events, loading, error }
+}
+
+export function useEvent(slug: string) {
+  const [event, setEvent] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchEvent = async () => {
+      if (!slug) {
+        setError('No event slug provided')
+        setLoading(false)
+        return
+      }
+
+      try {
+        setLoading(true)
+        setError(null)
+
+        const response = await fetch(`/api/events/${slug}`)
+        
+        if (!response.ok) {
+          if (response.status === 404) {
+            throw new Error('Event not found')
+          }
+          throw new Error('Failed to fetch event')
+        }
+
+        const result = await response.json()
+        setEvent(result)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchEvent()
+  }, [slug])
+
+  return { event, loading, error }
+}
\ No newline at end of file
diff --git a/hooks/useMasterRegistrations.ts b/hooks/useMasterRegistrations.ts
new file mode 100644
index 000000000..1d99de428
--- /dev/null
+++ b/hooks/useMasterRegistrations.ts
@@ -0,0 +1,268 @@
+import { useState, useEffect } from 'react';
+
+// Types
+export interface MasterRegistration {
+  id: number;
+  user_id: string;
+  activity_type: 'hackathon' | 'event' | 'internship' | 'test' | 'round' | 'volunteer' | 'sponsorship' | 'mentor' | 'judge' | 'collaboration';
+  activity_id: string;
+  registration_date: string;
+  status: 'registered' | 'pending' | 'approved' | 'rejected' | 'cancelled' | 'completed' | 'attended' | 'no_show' | 'disqualified';
+  payment_status: 'not_applicable' | 'pending' | 'paid' | 'failed' | 'refunded';
+  payment_amount?: number;
+  payment_currency?: string;
+  payment_id?: string;
+  full_name?: string;
+  email?: string;
+  phone?: string;
+  institution?: string;
+  department?: string;
+  year_of_study?: string;
+  experience_level?: string;
+  metadata?: Record<string, any>;
+  created_at: string;
+  updated_at: string;
+  activity?: any;
+}
+
+export interface RegistrationRequest {
+  activity_type: MasterRegistration['activity_type'];
+  activity_id: string;
+  status?: MasterRegistration['status'];
+  payment_status?: MasterRegistration['payment_status'];
+  payment_amount?: number;
+  payment_currency?: string;
+  payment_id?: string;
+  full_name?: string;
+  email?: string;
+  phone?: string;
+  institution?: string;
+  department?: string;
+  year_of_study?: string;
+  experience_level?: string;
+  metadata?: Record<string, any>;
+}
+
+export interface RegistrationFilters {
+  activity_type?: MasterRegistration['activity_type'];
+  activity_id?: string;
+  status?: MasterRegistration['status'];
+  payment_status?: MasterRegistration['payment_status'];
+  limit?: number;
+  offset?: number;
+}
+
+// Hook for managing master registrations
+export function useMasterRegistrations(filters?: RegistrationFilters) {
+  const [registrations, setRegistrations] = useState<MasterRegistration[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchRegistrations = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const params = new URLSearchParams();
+      if (filters?.activity_type) params.append('activity_type', filters.activity_type);
+      if (filters?.activity_id) params.append('activity_id', filters.activity_id);
+      if (filters?.status) params.append('status', filters.status);
+      if (filters?.payment_status) params.append('payment_status', filters.payment_status);
+      if (filters?.limit) params.append('limit', filters.limit.toString());
+      if (filters?.offset) params.append('offset', filters.offset.toString());
+
+      const response = await fetch(`/api/registrations?${params.toString()}`);
+      
+      if (!response.ok) {
+        throw new Error('Failed to fetch registrations');
+      }
+
+      const data = await response.json();
+      setRegistrations(data.data || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRegistrations();
+  }, [filters?.activity_type, filters?.activity_id, filters?.status, filters?.payment_status]);
+
+  const register = async (request: RegistrationRequest): Promise<MasterRegistration> => {
+    const response = await fetch('/api/register', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(request),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || 'Registration failed');
+    }
+
+    const data = await response.json();
+    
+    // Refresh registrations
+    await fetchRegistrations();
+    
+    return data.data;
+  };
+
+  const unregister = async (activityType: string, activityId: string): Promise<void> => {
+    const response = await fetch(`/api/registrations/${activityType}/${activityId}`, {
+      method: 'DELETE',
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || 'Unregistration failed');
+    }
+
+    // Refresh registrations
+    await fetchRegistrations();
+  };
+
+  const updateRegistration = async (
+    activityType: string,
+    activityId: string,
+    updates: Partial<RegistrationRequest>
+  ): Promise<MasterRegistration> => {
+    const response = await fetch(`/api/registrations/${activityType}/${activityId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(updates),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || 'Update failed');
+    }
+
+    const data = await response.json();
+    
+    // Refresh registrations
+    await fetchRegistrations();
+    
+    return data.data;
+  };
+
+  const isRegistered = (activityType: string, activityId: string): boolean => {
+    return registrations.some(
+      reg => reg.activity_type === activityType && reg.activity_id === activityId
+    );
+  };
+
+  const getRegistration = (activityType: string, activityId: string): MasterRegistration | undefined => {
+    return registrations.find(
+      reg => reg.activity_type === activityType && reg.activity_id === activityId
+    );
+  };
+
+  return {
+    registrations,
+    loading,
+    error,
+    register,
+    unregister,
+    updateRegistration,
+    isRegistered,
+    getRegistration,
+    refetch: fetchRegistrations
+  };
+}
+
+// Hook for user's all registrations dashboard
+export function useUserRegistrations() {
+  const [data, setData] = useState<{
+    registrations: MasterRegistration[];
+    grouped: Record<string, MasterRegistration[]>;
+    stats: {
+      total: number;
+      byActivityType: Record<string, number>;
+      byStatus: Record<string, number>;
+      byPaymentStatus: Record<string, number>;
+    };
+  } | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchUserRegistrations = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch('/api/user/registrations');
+      
+      if (!response.ok) {
+        throw new Error('Failed to fetch user registrations');
+      }
+
+      const result = await response.json();
+      setData(result.data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUserRegistrations();
+  }, []);
+
+  return {
+    data,
+    loading,
+    error,
+    refetch: fetchUserRegistrations
+  };
+}
+
+// Hook for checking registration status
+export function useRegistrationStatus(activityType: string, activityId: string) {
+  const [isRegistered, setIsRegistered] = useState(false);
+  const [registration, setRegistration] = useState<MasterRegistration | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const checkStatus = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(`/api/registrations/${activityType}/${activityId}`);
+      
+      if (!response.ok) {
+        throw new Error('Failed to check registration status');
+      }
+
+      const result = await response.json();
+      setIsRegistered(result.data.is_registered);
+      setRegistration(result.data.registration || null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (activityType && activityId) {
+      checkStatus();
+    }
+  }, [activityType, activityId]);
+
+  return {
+    isRegistered,
+    registration,
+    loading,
+    error,
+    refetch: checkStatus
+  };
+}
diff --git a/lib/services/events.ts b/lib/services/events.ts
new file mode 100644
index 000000000..426c3610b
--- /dev/null
+++ b/lib/services/events.ts
@@ -0,0 +1,214 @@
+// Server-side service for events
+import { createClient } from '@/lib/supabase/server'
+import { Event, EventsFilters, EventsResponse } from '@/types/events'
+
+// Re-export types for convenience
+export type { Event, EventsFilters, EventsResponse }
+
+// Simple in-memory cache for development
+const cache = new Map<string, { data: unknown; timestamp: number }>()
+const CACHE_DURATION = 5 * 60 * 1000 // 5 minutes
+
+function getCachedData(key: string) {
+  const cached = cache.get(key)
+  if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
+    return cached.data
+  }
+  return null
+}
+
+function setCachedData(key: string, data: unknown) {
+  cache.set(key, { data, timestamp: Date.now() })
+}
+
+class EventsService {
+  async getEvents(filters: EventsFilters = {}): Promise<EventsResponse> {
+    const cacheKey = `events:${JSON.stringify(filters)}`
+    const cached = getCachedData(cacheKey)
+    if (cached) {
+      return cached as EventsResponse
+    }
+
+    const supabase = await createClient()
+    
+    let query = supabase
+      .from('events')
+      .select('*', { count: 'exact' })
+
+    // Apply filters
+    if (filters.search) {
+      query = query.or(`title.ilike.%${filters.search}%,description.ilike.%${filters.search}%`)
+    }
+
+    if (filters.category) {
+      query = query.eq('category', filters.category)
+    }
+
+    if (filters.status) {
+      query = query.eq('status', filters.status)
+    }
+
+    if (filters.featured !== undefined) {
+      query = query.eq('featured', filters.featured)
+    }
+
+    if (filters.dateFilter === 'upcoming') {
+      // Get today's date in YYYY-MM-DD format for comparison
+      const today = new Date().toISOString().split('T')[0]
+      console.log('Upcoming filter - Today:', today)
+      query = query.gte('date', today)
+    } else if (filters.dateFilter === 'past') {
+      // Get today's date in YYYY-MM-DD format for comparison
+      const today = new Date().toISOString().split('T')[0]
+      console.log('Past filter - Today:', today)
+      query = query.lt('date', today)
+    }
+
+    // Apply pagination
+    const limit = filters.limit || 10
+    const offset = filters.offset || 0
+    query = query.range(offset, offset + limit - 1)
+
+    // Order by date
+    query = query.order('date', { ascending: true })
+
+    const { data: events, error, count } = await query
+
+    if (error) {
+      console.error('Error fetching events:', error)
+      throw new Error('Failed to fetch events')
+    }
+
+    const total = count || 0
+    const hasMore = offset + limit < total
+
+    const result = {
+      events: events || [],
+      total,
+      hasMore
+    }
+
+    setCachedData(cacheKey, result)
+    return result
+  }
+
+  async getEventBySlug(slug: string): Promise<Event | null> {
+    const cacheKey = `event:${slug}`
+    const cached = getCachedData(cacheKey)
+    if (cached) {
+      return cached as Event
+    }
+
+    const supabase = await createClient()
+    
+    const { data: event, error } = await supabase
+      .from('events')
+      .select('*')
+      .eq('slug', slug)
+      .single()
+
+    if (error) {
+      if (error.code === 'PGRST116') {
+        return null // Event not found
+      }
+      console.error('Error fetching event:', error)
+      throw new Error('Failed to fetch event')
+    }
+
+    setCachedData(cacheKey, event)
+    return event
+  }
+
+  async getFeaturedEvents(limit: number = 5) {
+    const cacheKey = `featured_events:${limit}`
+    const cached = getCachedData(cacheKey)
+    if (cached) {
+      return cached as Event[]
+    }
+
+    try {
+      const supabase = await createClient()
+      
+      const { data: events, error } = await supabase
+        .from('events')
+        .select('*')
+        .eq('featured', true)
+        .gte('date', new Date().toISOString().split('T')[0])
+        .order('date', { ascending: true })
+        .limit(limit)
+
+      if (error) {
+        console.error('Error fetching featured events:', error)
+        // Return empty array instead of throwing to prevent 500 errors
+        return []
+      }
+
+      const result = events || []
+      setCachedData(cacheKey, result)
+      return result
+    } catch (error) {
+      console.error('Error in getFeaturedEvents:', error)
+      // Return empty array as fallback
+      return []
+    }
+  }
+
+  async createEvent(eventData: Omit<Event, 'id' | 'created_at' | 'updated_at'>): Promise<Event> {
+    const supabase = await createClient()
+    
+    const { data: event, error } = await supabase
+      .from('events')
+      .insert([eventData])
+      .select()
+      .single()
+
+    if (error) {
+      console.error('Error creating event:', error)
+      throw new Error('Failed to create event')
+    }
+
+    // Clear cache after creating new event
+    cache.clear()
+    return event
+  }
+
+  async updateEvent(slug: string, eventData: Partial<Omit<Event, 'id' | 'created_at' | 'updated_at'>>): Promise<Event> {
+    const supabase = await createClient()
+    
+    const { data: event, error } = await supabase
+      .from('events')
+      .update(eventData)
+      .eq('slug', slug)
+      .select()
+      .single()
+
+    if (error) {
+      console.error('Error updating event:', error)
+      throw new Error('Failed to update event')
+    }
+
+    // Clear cache after updating event
+    cache.clear()
+    return event
+  }
+
+  async deleteEvent(slug: string) {
+    const supabase = await createClient()
+    
+    const { error } = await supabase
+      .from('events')
+      .delete()
+      .eq('slug', slug)
+
+    if (error) {
+      console.error('Error deleting event:', error)
+      throw new Error('Failed to delete event')
+    }
+
+    // Clear cache after deleting event
+    cache.clear()
+    return true
+  }
+}
+
+export const eventsService = new EventsService()
diff --git a/lib/services/master-registrations.ts b/lib/services/master-registrations.ts
new file mode 100644
index 000000000..90ebfcf22
--- /dev/null
+++ b/lib/services/master-registrations.ts
@@ -0,0 +1,317 @@
+import { createClient } from '@supabase/supabase-js';
+
+// Types for master registration system
+export interface MasterRegistration {
+  id: number;
+  user_id: string;
+  activity_type: 'hackathon' | 'event' | 'internship' | 'test' | 'round' | 'volunteer' | 'sponsorship' | 'mentor' | 'judge' | 'collaboration';
+  activity_id: string;
+  registration_date: string;
+  status: 'registered' | 'pending' | 'approved' | 'rejected' | 'cancelled' | 'completed' | 'attended' | 'no_show' | 'disqualified';
+  payment_status: 'not_applicable' | 'pending' | 'paid' | 'failed' | 'refunded';
+  payment_amount?: number;
+  payment_currency?: string;
+  payment_id?: string;
+  full_name?: string;
+  email?: string;
+  phone?: string;
+  institution?: string;
+  department?: string;
+  year_of_study?: string;
+  experience_level?: string;
+  metadata?: Record<string, unknown>;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface RegistrationRequest {
+  activity_type: MasterRegistration['activity_type'];
+  activity_id: string;
+  status?: MasterRegistration['status'];
+  payment_status?: MasterRegistration['payment_status'];
+  payment_amount?: number;
+  payment_currency?: string;
+  payment_id?: string;
+  full_name?: string;
+  email?: string;
+  phone?: string;
+  institution?: string;
+  department?: string;
+  year_of_study?: string;
+  experience_level?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface RegistrationFilters {
+  user_id?: string;
+  activity_type?: MasterRegistration['activity_type'];
+  activity_id?: string;
+  status?: MasterRegistration['status'];
+  payment_status?: MasterRegistration['payment_status'];
+  limit?: number;
+  offset?: number;
+}
+
+class MasterRegistrationsService {
+  private supabase;
+
+  constructor() {
+    this.supabase = createClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.SUPABASE_SERVICE_ROLE_KEY!
+    );
+  }
+
+  // Register for any activity type
+  async register(request: RegistrationRequest, userId: string): Promise<MasterRegistration> {
+    const { data, error } = await this.supabase
+      .from('master_registrations')
+      .insert({
+        user_id: userId,
+        activity_type: request.activity_type,
+        activity_id: request.activity_id,
+        registration_date: new Date().toISOString(),
+        status: request.status || 'registered',
+        payment_status: request.payment_status || 'not_applicable',
+        payment_amount: request.payment_amount,
+        payment_currency: request.payment_currency,
+        payment_id: request.payment_id,
+        full_name: request.full_name,
+        email: request.email,
+        phone: request.phone,
+        institution: request.institution,
+        department: request.department,
+        year_of_study: request.year_of_study,
+        experience_level: request.experience_level,
+        metadata: request.metadata || {}
+      })
+      .select()
+      .single();
+
+    if (error) {
+      throw new Error(`Registration failed: ${error.message}`);
+    }
+
+    return data;
+  }
+
+  // Get user's registrations with filters
+  async getUserRegistrations(filters: RegistrationFilters): Promise<MasterRegistration[]> {
+    let query = this.supabase
+      .from('master_registrations')
+      .select('*')
+      .order('created_at', { ascending: false });
+
+    if (filters.user_id) {
+      query = query.eq('user_id', filters.user_id);
+    }
+
+    if (filters.activity_type) {
+      query = query.eq('activity_type', filters.activity_type);
+    }
+
+    if (filters.activity_id) {
+      query = query.eq('activity_id', filters.activity_id);
+    }
+
+    if (filters.status) {
+      query = query.eq('status', filters.status);
+    }
+
+    if (filters.payment_status) {
+      query = query.eq('payment_status', filters.payment_status);
+    }
+
+    if (filters.limit) {
+      query = query.limit(filters.limit);
+    }
+
+    if (filters.offset) {
+      query = query.range(filters.offset, filters.offset + (filters.limit || 10) - 1);
+    }
+
+    const { data, error } = await query;
+
+    if (error) {
+      throw new Error(`Failed to fetch registrations: ${error.message}`);
+    }
+
+    return data || [];
+  }
+
+  // Check if user is registered for a specific activity
+  async isRegistered(userId: string, activityType: string, activityId: string): Promise<boolean> {
+    const { data, error } = await this.supabase
+      .from('master_registrations')
+      .select('id')
+      .eq('user_id', userId)
+      .eq('activity_type', activityType)
+      .eq('activity_id', activityId)
+      .single();
+
+    if (error && error.code !== 'PGRST116') {
+      throw new Error(`Failed to check registration: ${error.message}`);
+    }
+
+    return !!data;
+  }
+
+  // Update registration status
+  async updateRegistration(
+    userId: string,
+    activityType: string,
+    activityId: string,
+    updates: Partial<RegistrationRequest>
+  ): Promise<MasterRegistration> {
+    const { data, error } = await this.supabase
+      .from('master_registrations')
+      .update({
+        ...updates,
+        updated_at: new Date().toISOString()
+      })
+      .eq('user_id', userId)
+      .eq('activity_type', activityType)
+      .eq('activity_id', activityId)
+      .select()
+      .single();
+
+    if (error) {
+      throw new Error(`Failed to update registration: ${error.message}`);
+    }
+
+    return data;
+  }
+
+  // Cancel/unregister from an activity
+  async unregister(userId: string, activityType: string, activityId: string): Promise<void> {
+    const { error } = await this.supabase
+      .from('master_registrations')
+      .delete()
+      .eq('user_id', userId)
+      .eq('activity_type', activityType)
+      .eq('activity_id', activityId);
+
+    if (error) {
+      throw new Error(`Failed to unregister: ${error.message}`);
+    }
+  }
+
+  // Get registration statistics
+  async getRegistrationStats(activityType?: string): Promise<{
+    total: number;
+    by_status: Record<string, number>;
+    by_payment_status: Record<string, number>;
+    by_activity_type: Record<string, number>;
+  }> {
+    let query = this.supabase
+      .from('master_registrations')
+      .select('status, payment_status, activity_type');
+
+    if (activityType) {
+      query = query.eq('activity_type', activityType);
+    }
+
+    const { data, error } = await query;
+
+    if (error) {
+      throw new Error(`Failed to fetch statistics: ${error.message}`);
+    }
+
+    const stats = {
+      total: data?.length || 0,
+      by_status: {} as Record<string, number>,
+      by_payment_status: {} as Record<string, number>,
+      by_activity_type: {} as Record<string, number>
+    };
+
+    data?.forEach(registration => {
+      // Count by status
+      stats.by_status[registration.status] = (stats.by_status[registration.status] || 0) + 1;
+      
+      // Count by payment status
+      stats.by_payment_status[registration.payment_status] = (stats.by_payment_status[registration.payment_status] || 0) + 1;
+      
+      // Count by activity type
+      stats.by_activity_type[registration.activity_type] = (stats.by_activity_type[registration.activity_type] || 0) + 1;
+    });
+
+    return stats;
+  }
+
+  // Get activity details with registration info
+  async getActivityWithRegistration(
+    activityType: string,
+    activityId: string,
+    userId?: string
+  ): Promise<{
+    activity: Record<string, unknown>;
+    registration?: MasterRegistration;
+    is_registered: boolean;
+    total_registrations: number;
+  }> {
+    // Get activity details based on type
+    let tableName;
+
+    switch (activityType) {
+      case 'hackathon':
+        tableName = 'hackathons';
+        break;
+      case 'event':
+        tableName = 'events';
+        break;
+      case 'test':
+        tableName = 'tests';
+        break;
+      case 'internship':
+        tableName = 'internships';
+        break;
+      default:
+        throw new Error(`Unsupported activity type: ${activityType}`);
+    }
+
+    const { data: activity, error: activityError } = await this.supabase
+      .from(tableName)
+      .select('*')
+      .eq('id', activityId)
+      .single();
+
+    if (activityError) {
+      throw new Error(`Activity not found: ${activityError.message}`);
+    }
+
+    // Get user's registration if userId provided
+    let registration: MasterRegistration | undefined;
+    let is_registered = false;
+
+    if (userId) {
+      const { data: regData } = await this.supabase
+        .from('master_registrations')
+        .select('*')
+        .eq('user_id', userId)
+        .eq('activity_type', activityType)
+        .eq('activity_id', activityId)
+        .single();
+
+      if (regData) {
+        registration = regData;
+        is_registered = true;
+      }
+    }
+
+    // Get total registrations for this activity
+    const { count: total_registrations } = await this.supabase
+      .from('master_registrations')
+      .select('*', { count: 'exact', head: true })
+      .eq('activity_type', activityType)
+      .eq('activity_id', activityId);
+
+    return {
+      activity,
+      registration,
+      is_registered,
+      total_registrations: total_registrations || 0
+    };
+  }
+}
+
+export const masterRegistrationsService = new MasterRegistrationsService();
diff --git a/supabase/migrations/20241201000003_create_profiles_table_and_functions.sql b/supabase/migrations/20241201000003_create_profiles_table_and_functions.sql
new file mode 100644
index 000000000..3b45e0442
--- /dev/null
+++ b/supabase/migrations/20241201000003_create_profiles_table_and_functions.sql
@@ -0,0 +1,351 @@
+-- =====================================================
+-- CREATE PROFILES TABLE AND USERNAME FUNCTIONS
+-- =====================================================
+-- This migration creates the profiles table and the required
+-- username management functions that the application expects
+
+-- =====================================================
+-- STEP 1: CREATE PROFILES TABLE
+-- =====================================================
+
+CREATE TABLE IF NOT EXISTS profiles (
+    id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
+    created_at TIMESTAMPTZ DEFAULT NOW(),
+    updated_at TIMESTAMPTZ DEFAULT NOW(),
+    
+    -- Basic profile info
+    first_name TEXT,
+    last_name TEXT,
+    bio TEXT,
+    
+    -- Contact information
+    phone TEXT,
+    email TEXT,
+    
+    -- Social links
+    github_url TEXT,
+    linkedin_url TEXT,
+    twitter_url TEXT,
+    
+    -- Professional info
+    current_position TEXT,
+    company TEXT,
+    location TEXT,
+    skills TEXT[],
+    
+    -- Settings
+    is_public BOOLEAN DEFAULT true,
+    email_notifications BOOLEAN DEFAULT true,
+    
+    -- Metadata
+    profile_completion_percentage INTEGER DEFAULT 0,
+    
+    -- Username and Codeunia ID system
+    username TEXT UNIQUE,
+    username_editable BOOLEAN DEFAULT true,
+    codeunia_id TEXT UNIQUE,
+    username_set BOOLEAN DEFAULT false,
+    profile_complete BOOLEAN DEFAULT false,
+    
+    -- Unified setup flow fields
+    email_confirmed_at TIMESTAMPTZ,
+    auth_provider TEXT,
+    setup_completed_at TIMESTAMPTZ,
+    
+    -- Premium membership fields
+    is_premium BOOLEAN DEFAULT false,
+    premium_expires_at TIMESTAMPTZ,
+    premium_plan TEXT,
+    premium_purchased_at TIMESTAMPTZ,
+    points_multiplier DECIMAL DEFAULT 1.0,
+    
+    -- Membership card email fields
+    membership_card_sent BOOLEAN DEFAULT false,
+    membership_card_sent_at TIMESTAMPTZ,
+    
+    -- Admin access
+    is_admin BOOLEAN DEFAULT false
+);
+
+-- =====================================================
+-- STEP 2: CREATE INDEXES
+-- =====================================================
+
+-- Username index for fast lookups
+CREATE INDEX IF NOT EXISTS idx_profiles_username ON profiles(username);
+CREATE INDEX IF NOT EXISTS idx_profiles_codeunia_id ON profiles(codeunia_id);
+CREATE INDEX IF NOT EXISTS idx_profiles_email ON profiles(email);
+CREATE INDEX IF NOT EXISTS idx_profiles_is_admin ON profiles(is_admin);
+CREATE INDEX IF NOT EXISTS idx_profiles_username_editable ON profiles(username_editable);
+CREATE INDEX IF NOT EXISTS idx_profiles_profile_complete ON profiles(profile_complete);
+
+-- =====================================================
+-- STEP 3: CREATE UPDATED_AT TRIGGER
+-- =====================================================
+
+-- Function to update the updated_at column
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+    NEW.updated_at = NOW();
+    RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+-- Trigger to automatically update updated_at
+DROP TRIGGER IF EXISTS update_profiles_updated_at ON profiles;
+CREATE TRIGGER update_profiles_updated_at
+    BEFORE UPDATE ON profiles
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+
+-- =====================================================
+-- STEP 4: CREATE USERNAME MANAGEMENT FUNCTIONS
+-- =====================================================
+
+-- Function to update username (for existing users)
+CREATE OR REPLACE FUNCTION update_username(
+    user_id UUID,
+    new_username TEXT
+)
+RETURNS BOOLEAN
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+DECLARE
+    profile_record RECORD;
+    username_exists BOOLEAN;
+BEGIN
+    -- Validate input
+    IF user_id IS NULL OR new_username IS NULL THEN
+        RAISE EXCEPTION 'User ID and username are required';
+    END IF;
+    
+    -- Check if username is valid format
+    IF NOT (new_username ~ '^[a-zA-Z0-9_-]+$') THEN
+        RAISE EXCEPTION 'Username can only contain letters, numbers, underscores, and hyphens';
+    END IF;
+    
+    -- Check username length
+    IF LENGTH(new_username) < 3 OR LENGTH(new_username) > 30 THEN
+        RAISE EXCEPTION 'Username must be between 3 and 30 characters';
+    END IF;
+    
+    -- Get the user's profile
+    SELECT * INTO profile_record
+    FROM profiles
+    WHERE id = user_id;
+    
+    -- Check if user exists
+    IF NOT FOUND THEN
+        RAISE EXCEPTION 'User not found';
+    END IF;
+    
+    -- Check if username is already editable
+    IF NOT profile_record.username_editable THEN
+        RAISE EXCEPTION 'Username can only be changed once';
+    END IF;
+    
+    -- Check if username is already taken (case-insensitive)
+    SELECT EXISTS(
+        SELECT 1 FROM profiles 
+        WHERE LOWER(username) = LOWER(new_username) 
+        AND id != user_id
+    ) INTO username_exists;
+    
+    IF username_exists THEN
+        RAISE EXCEPTION 'Username is already taken';
+    END IF;
+    
+    -- Update the username
+    UPDATE profiles
+    SET 
+        username = new_username,
+        username_editable = false,
+        username_set = true,
+        updated_at = NOW()
+    WHERE id = user_id;
+    
+    RETURN true;
+END;
+$$;
+
+-- Function to set username (for new users during setup)
+CREATE OR REPLACE FUNCTION set_username(
+    user_id UUID,
+    new_username TEXT
+)
+RETURNS BOOLEAN
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+DECLARE
+    profile_record RECORD;
+    username_exists BOOLEAN;
+BEGIN
+    -- Validate input
+    IF user_id IS NULL OR new_username IS NULL THEN
+        RAISE EXCEPTION 'User ID and username are required';
+    END IF;
+    
+    -- Check if username is valid format
+    IF NOT (new_username ~ '^[a-zA-Z0-9_-]+$') THEN
+        RAISE EXCEPTION 'Username can only contain letters, numbers, underscores, and hyphens';
+    END IF;
+    
+    -- Check username length
+    IF LENGTH(new_username) < 3 OR LENGTH(new_username) > 30 THEN
+        RAISE EXCEPTION 'Username must be between 3 and 30 characters';
+    END IF;
+    
+    -- Check if username is already taken (case-insensitive)
+    SELECT EXISTS(
+        SELECT 1 FROM profiles 
+        WHERE LOWER(username) = LOWER(new_username)
+    ) INTO username_exists;
+    
+    IF username_exists THEN
+        RAISE EXCEPTION 'Username is already taken';
+    END IF;
+    
+    -- Insert or update the profile
+    INSERT INTO profiles (
+        id, username, username_editable, username_set, 
+        profile_complete, setup_completed_at, updated_at
+    )
+    VALUES (
+        user_id, new_username, false, true, 
+        true, NOW(), NOW()
+    )
+    ON CONFLICT (id) 
+    DO UPDATE SET
+        username = EXCLUDED.username,
+        username_editable = EXCLUDED.username_editable,
+        username_set = EXCLUDED.username_set,
+        profile_complete = EXCLUDED.profile_complete,
+        setup_completed_at = EXCLUDED.setup_completed_at,
+        updated_at = EXCLUDED.updated_at;
+    
+    RETURN true;
+END;
+$$;
+
+-- Function to generate a safe random username
+CREATE OR REPLACE FUNCTION generate_safe_username()
+RETURNS TEXT
+LANGUAGE plpgsql
+AS $$
+DECLARE
+    random_username TEXT;
+    username_exists BOOLEAN;
+    attempts INTEGER := 0;
+    max_attempts INTEGER := 10;
+BEGIN
+    LOOP
+        -- Generate a random username
+        random_username := 'user' || LPAD(FLOOR(RANDOM() * 1000000)::TEXT, 6, '0');
+        
+        -- Check if it exists
+        SELECT EXISTS(
+            SELECT 1 FROM profiles 
+            WHERE LOWER(username) = LOWER(random_username)
+        ) INTO username_exists;
+        
+        -- If it doesn't exist, return it
+        IF NOT username_exists THEN
+            RETURN random_username;
+        END IF;
+        
+        -- Increment attempts
+        attempts := attempts + 1;
+        
+        -- If we've tried too many times, raise an exception
+        IF attempts >= max_attempts THEN
+            RAISE EXCEPTION 'Unable to generate unique username after % attempts', max_attempts;
+        END IF;
+    END LOOP;
+END;
+$$;
+
+-- Function to mark email as confirmed
+CREATE OR REPLACE FUNCTION mark_email_confirmed(user_id UUID)
+RETURNS BOOLEAN
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+BEGIN
+    UPDATE profiles
+    SET 
+        email_confirmed_at = NOW(),
+        updated_at = NOW()
+    WHERE id = user_id;
+    
+    RETURN true;
+END;
+$$;
+
+-- Function to create email profile
+CREATE OR REPLACE FUNCTION create_email_profile(
+    user_id UUID,
+    user_email TEXT,
+    user_metadata JSONB
+)
+RETURNS BOOLEAN
+LANGUAGE plpgsql
+SECURITY DEFINER
+AS $$
+BEGIN
+    INSERT INTO profiles (
+        id, email, first_name, last_name, 
+        is_public, email_notifications, profile_completion_percentage,
+        username_editable, username_set, profile_complete, is_admin
+    )
+    VALUES (
+        user_id, 
+        user_email,
+        COALESCE(user_metadata->>'first_name', user_metadata->>'given_name', ''),
+        COALESCE(user_metadata->>'last_name', user_metadata->>'family_name', ''),
+        true, true, 0,
+        true, false, false, false
+    )
+    ON CONFLICT (id) DO NOTHING;
+    
+    RETURN true;
+END;
+$$;
+
+-- =====================================================
+-- STEP 5: ENABLE ROW LEVEL SECURITY
+-- =====================================================
+
+-- Enable RLS on profiles table
+ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
+
+-- Policy: Users can view their own profile and public profiles
+CREATE POLICY "Users can view own profile and public profiles" ON profiles
+    FOR SELECT USING (
+        auth.uid() = id OR is_public = true
+    );
+
+-- Policy: Users can update their own profile
+CREATE POLICY "Users can update own profile" ON profiles
+    FOR UPDATE USING (auth.uid() = id);
+
+-- Policy: Users can insert their own profile
+CREATE POLICY "Users can insert own profile" ON profiles
+    FOR INSERT WITH CHECK (auth.uid() = id);
+
+-- =====================================================
+-- STEP 6: GRANT PERMISSIONS
+-- =====================================================
+
+-- Grant necessary permissions
+GRANT SELECT, INSERT, UPDATE ON profiles TO authenticated;
+GRANT USAGE ON SCHEMA public TO authenticated;
+
+-- =====================================================
+-- MIGRATION COMPLETE
+-- =====================================================
+
+-- Add a comment to track this migration
+COMMENT ON TABLE profiles IS 'User profiles table created by migration 20241201000003';
diff --git a/test-fixed-function.sql b/test-fixed-function.sql
new file mode 100644
index 000000000..d25275a8d
--- /dev/null
+++ b/test-fixed-function.sql
@@ -0,0 +1,26 @@
+-- =====================================================
+-- TEST THE FIXED FUNCTION
+-- =====================================================
+-- Copy and paste this query to test the fixed function
+
+-- 1. Test the function with a dummy call (this should work now)
+SELECT 
+    'Function Test' as test_type,
+    update_username(auth.uid(), 'test_username_456') as result,
+    'Should return true or false, not error' as expected;
+
+-- 2. Check if the function definition is correct now
+SELECT 
+    'Function Definition' as test_type,
+    proname as function_name,
+    pg_get_function_identity_arguments(oid) as arguments,
+    'Function should reference public.profiles' as expected
+FROM pg_proc 
+WHERE proname = 'update_username';
+
+-- 3. Verify we can still access the profiles table
+SELECT 
+    'Table Access' as test_type,
+    COUNT(*) as row_count,
+    'Should show number of profiles' as expected
+FROM public.profiles;
diff --git a/test-username-function.sql b/test-username-function.sql
new file mode 100644
index 000000000..e708ef8c4
--- /dev/null
+++ b/test-username-function.sql
@@ -0,0 +1,37 @@
+-- =====================================================
+-- TEST USERNAME FUNCTION
+-- =====================================================
+-- Copy and paste this query to test the update_username function
+
+-- 1. First, let's see the current user and their profile
+SELECT 
+    'Current User' as test_type,
+    auth.uid() as user_id,
+    'User ID from auth' as info;
+
+-- 2. Check if current user has a profile
+SELECT 
+    'Profile Check' as test_type,
+    id,
+    username,
+    username_editable,
+    username_set,
+    first_name,
+    last_name
+FROM profiles 
+WHERE id = auth.uid();
+
+-- 3. Test the update_username function with a dummy call
+-- (This will show us the exact error if any)
+SELECT 
+    'Function Test' as test_type,
+    update_username(auth.uid(), 'test_username_123') as result;
+
+-- 4. Check function definition
+SELECT 
+    'Function Definition' as test_type,
+    proname as function_name,
+    pg_get_function_identity_arguments(oid) as arguments,
+    prosrc as function_source
+FROM pg_proc 
+WHERE proname = 'update_username';
diff --git a/types/events.ts b/types/events.ts
new file mode 100644
index 000000000..63672d286
--- /dev/null
+++ b/types/events.ts
@@ -0,0 +1,68 @@
+export interface Event {
+  id?: number
+  slug: string
+  title: string
+  excerpt: string
+  description: string
+  organizer: string
+  organizer_contact?: {
+    email?: string
+    phone?: string
+    [key: string]: string | undefined
+  }
+  date: string
+  time: string
+  duration: string
+  registration_deadline?: string
+  category: string
+  categories: string[]
+  tags: string[]
+  featured: boolean
+  image?: string
+  location: string
+  locations: string[]
+  capacity: number
+  registered: number
+  team_size?: {
+    min?: number
+    max?: number
+    [key: string]: number | undefined
+  }
+  user_types: string[]
+  price: string
+  payment: string
+  status: 'live' | 'draft' | 'published' | 'cancelled' | 'completed'
+  event_type: string[]
+  registration_required: boolean
+  rules?: string[]
+  schedule?: Record<string, unknown> | { date: string; label: string }[]
+  prize?: string
+  prize_details?: string
+  faq?: Record<string, unknown> | { question: string; answer: string }[]
+  socials?: {
+    linkedin?: string
+    whatsapp?: string
+    instagram?: string
+    [key: string]: string | undefined
+  }
+  sponsors?: { logo: string; name: string; type: string }[]
+  marking_scheme?: Record<string, unknown>
+  created_at?: string
+  updated_at?: string
+}
+
+export interface EventsFilters {
+  search?: string
+  category?: string
+  status?: string
+  featured?: boolean
+  dateFilter?: 'upcoming' | 'past' | 'all'
+  limit?: number
+  offset?: number
+}
+
+export interface EventsResponse {
+  events: Event[]
+  total: number
+  hasMore: boolean
+}