diff --git a/app/events/[slug]/page.tsx b/app/events/[slug]/page.tsx
index 9d270daf..a82fcd12 100644
--- a/app/events/[slug]/page.tsx
+++ b/app/events/[slug]/page.tsx
@@ -5,13 +5,13 @@ 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, 
+import {
+  Calendar,
+  Clock,
+  MapPin,
+  Users,
+  DollarSign,
+  CheckCircle,
   XCircle,
   ArrowLeft,
   ExternalLink,
@@ -89,11 +89,11 @@ export default function EventPage() {
   const [copied, setCopied] = useState(false)
   const [registering, setRegistering] = useState(false)
 
-  const { 
-    isRegistered, 
-    registration, 
-    loading: statusLoading, 
-    refetch: refetchStatus 
+  const {
+    isRegistered,
+    registration,
+    loading: statusLoading,
+    refetch: refetchStatus
   } = useRegistrationStatus('event', event?.id?.toString() || '')
 
   // Track analytics
@@ -109,11 +109,11 @@ export default function EventPage() {
       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) {
@@ -208,9 +208,12 @@ export default function EventPage() {
   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'
+        return 'bg-gradient-to-r from-green-500 to-emerald-600 text-white border-0'
+      case 'upcoming':
+        return 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white border-0'
+      case 'ongoing':
+        return 'bg-gradient-to-r from-purple-500 to-violet-600 text-white border-0'
       case 'draft':
         return 'bg-gray-100 text-gray-800 border-gray-200'
       default:
@@ -220,7 +223,7 @@ export default function EventPage() {
 
   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">
@@ -229,9 +232,9 @@ export default function EventPage() {
         </Badge>
       )
     }
-    
+
     return (
-      <Badge className="bg-green-100 text-green-800 border-green-200">
+      <Badge className="bg-green-100 text-green-800 border-green-200 hover:bg-green-100 hover:text-green-800">
         <CheckCircle className="h-3 w-3 mr-1" />
         Free Event
       </Badge>
@@ -288,8 +291,8 @@ export default function EventPage() {
   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="container mx-auto px-4 pt-24 pb-8">
         {/* Back Button */}
         <motion.div
           initial={{ opacity: 0, y: -20 }}
@@ -298,7 +301,7 @@ export default function EventPage() {
           className="mb-6"
         >
           <Link href="/events">
-            <Button variant="ghost" className="text-muted-foreground hover:text-foreground">
+            <Button variant="ghost" className="text-foreground hover:text-primary">
               <ArrowLeft className="h-4 w-4 mr-2" />
               Back to Events
             </Button>
@@ -318,13 +321,13 @@ export default function EventPage() {
                 {/* 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}
+                          {event.status.charAt(0).toUpperCase() + event.status.slice(1)}
                         </Badge>
                         {getPaymentBadge()}
                         {event.featured && (
@@ -340,9 +343,9 @@ export default function EventPage() {
                       {event.company ? (
                         <div className="flex items-center gap-2">
                           <span className="text-sm text-muted-foreground">Hosted by</span>
-                          <CompanyBadge 
-                            company={event.company} 
-                            size="lg" 
+                          <CompanyBadge
+                            company={event.company}
+                            size="lg"
                             showVerification={true}
                           />
                         </div>
@@ -363,7 +366,7 @@ export default function EventPage() {
                     </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">
@@ -372,15 +375,15 @@ export default function EventPage() {
                       </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 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" />
@@ -390,7 +393,7 @@ export default function EventPage() {
                         <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" />
@@ -400,7 +403,7 @@ export default function EventPage() {
                         <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" />
@@ -435,14 +438,14 @@ export default function EventPage() {
                   </CardHeader>
                   <CardContent>
                     <div className="flex items-start gap-4">
-                      <CompanyBadge 
-                        company={event.company} 
-                        size="lg" 
+                      <CompanyBadge
+                        company={event.company}
+                        size="lg"
                         showVerification={true}
                         showName={false}
                       />
                       <div className="flex-1">
-                        <Link 
+                        <Link
                           href={`/companies/${event.company.slug}`}
                           className="text-lg font-semibold hover:text-primary transition-colors"
                         >
@@ -462,7 +465,7 @@ export default function EventPage() {
                             </span>
                           )}
                           {event.company.website && (
-                            <a 
+                            <a
                               href={event.company.website}
                               target="_blank"
                               rel="noopener noreferrer"
@@ -542,7 +545,7 @@ export default function EventPage() {
                         {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>
@@ -550,7 +553,7 @@ export default function EventPage() {
                       </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>
@@ -564,7 +567,7 @@ export default function EventPage() {
                         ))}
                       </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>
@@ -664,11 +667,11 @@ export default function EventPage() {
                           </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.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'
+                                ? 'Registration deadline has passed'
+                                : 'Registration is not available'
                             }
                           </p>
                         </div>
@@ -709,7 +712,7 @@ export default function EventPage() {
                               </div>
                             )}
                           </Button>
-                          
+
                           {event.payment === 'Required' || event.payment === 'Paid' ? (
                             <p className="text-xs text-center text-muted-foreground">
                               Secure payment powered by Razorpay
@@ -734,7 +737,7 @@ export default function EventPage() {
           </div>
         </div>
       </div>
-      
+
       <Footer />
     </div>
   )
diff --git a/app/events/page.tsx b/app/events/page.tsx
index e57d6783..f2262a15 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -1,4 +1,4 @@
-"use client" 
+"use client"
 
 import React, { useState, useEffect, useRef } from "react"
 
@@ -24,7 +24,7 @@ import type { Company } from "@/types/company"
 const eventCategories = [
   "All",
   "Workshop",
-  "Conference", 
+  "Conference",
   "Meetup",
   "Webinar",
   "Training",
@@ -55,7 +55,7 @@ export default function EventsPage() {
     company_industry: selectedIndustry !== "All" ? selectedIndustry : undefined,
     company_size: selectedCompanySize !== "All" ? selectedCompanySize : undefined
   }), [searchTerm, selectedCategory, dateFilter, selectedCompany, selectedIndustry, selectedCompanySize])
-  
+
   // Use custom hooks for data fetching
   const { data: eventsData, loading: eventsLoading, error: eventsError } = useEvents(eventsParams)
 
@@ -71,7 +71,7 @@ export default function EventsPage() {
         if (response.ok) {
           const data = await response.json()
           setCompanies(data.companies || [])
-          
+
           // Extract unique industries from companies
           const uniqueIndustries = Array.from(
             new Set(data.companies.map((c: Company) => c.industry).filter(Boolean))
@@ -88,7 +88,7 @@ export default function EventsPage() {
   // Extract events from the response
   const events = eventsData?.events || []
   const isLoading = eventsLoading || featuredLoading
-  
+
   // Debug logging
   console.log('Events Page Debug:', {
     eventsLoading,
@@ -204,11 +204,14 @@ export default function EventsPage() {
   }
 
   const getStatusColor = (status: string) => {
-    switch (status) {
-      case "upcoming":
+    switch (status.toLowerCase()) {
+      case "live":
+      case "published":
         return "bg-gradient-to-r from-green-500 to-emerald-600 text-white"
-      case "ongoing":
+      case "upcoming":
         return "bg-gradient-to-r from-blue-500 to-cyan-600 text-white"
+      case "ongoing":
+        return "bg-gradient-to-r from-purple-500 to-violet-600 text-white"
       case "completed":
         return "bg-gradient-to-r from-gray-500 to-slate-600 text-white"
       case "cancelled":
@@ -228,7 +231,7 @@ export default function EventsPage() {
   }
 
   console.log('About to check isLoading:', isLoading)
-  
+
   if (isLoading) {
     console.log('Rendering loading spinner')
     return (
@@ -240,103 +243,103 @@ export default function EventsPage() {
       </div>
     )
   }
-  
+
   console.log('Rendering main content with', events.length, 'events')
 
   return (
     <div className="flex flex-col overflow-hidden bg-gradient-to-br from-background via-background to-muted/10">
-       <Header/>
-      
+      <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>
+        <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">
@@ -434,7 +437,7 @@ export default function EventsPage() {
       {/* 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 
+          <motion.div
             className="flex items-center justify-between mb-12"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -489,7 +492,7 @@ export default function EventsPage() {
                     {/* 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}
+                        {event.status.charAt(0).toUpperCase() + event.status.slice(1)}
                       </Badge>
                     </div>
                   </div>
@@ -518,9 +521,9 @@ export default function EventsPage() {
                         {/* Company Badge */}
                         {event.company ? (
                           <div className="mb-2">
-                            <CompanyBadge 
-                              company={event.company} 
-                              size="sm" 
+                            <CompanyBadge
+                              company={event.company}
+                              size="sm"
                               showVerification={true}
                             />
                           </div>
@@ -550,7 +553,7 @@ export default function EventsPage() {
                         {event.registered}/{event.capacity}
                       </div>
                     </div>
-                    
+
                     {/* Payment Information */}
                     <div className="flex items-center justify-between mb-2">
                       <div className="flex items-center gap-1">
@@ -559,13 +562,12 @@ export default function EventsPage() {
                           {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'
-                        }`}
+                      <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>
@@ -605,7 +607,7 @@ export default function EventsPage() {
           </div>
 
           {eventsError && (
-            <motion.div 
+            <motion.div
               className="text-center py-20"
               initial={{ opacity: 0, scale: 0.9 }}
               animate={{ opacity: 1, scale: 1 }}
@@ -629,7 +631,7 @@ export default function EventsPage() {
           )}
 
           {!eventsError && regularEvents.length === 0 && (
-            <motion.div 
+            <motion.div
               className="text-center py-20"
               initial={{ opacity: 0, scale: 0.9 }}
               animate={{ opacity: 1, scale: 1 }}
@@ -660,7 +662,7 @@ export default function EventsPage() {
         </div>
       </section>
 
-      <Footer/>
+      <Footer />
     </div>
   )
 }
diff --git a/app/hackathons/[id]/page.tsx b/app/hackathons/[id]/page.tsx
index aff968c9..35fb83a1 100644
--- a/app/hackathons/[id]/page.tsx
+++ b/app/hackathons/[id]/page.tsx
@@ -31,7 +31,7 @@ const RotatingSponsorsGrid = ({ sponsors }: { sponsors?: Sponsor[] }) => {
   if (!sponsors || sponsors.length === 0) {
     return null;
   }
-  
+
   const shouldAnimate = sponsors.length > 4;
 
   return (
@@ -40,11 +40,11 @@ const RotatingSponsorsGrid = ({ sponsors }: { sponsors?: Sponsor[] }) => {
         <span className="inline-block w-2 h-2 bg-primary rounded-full animate-pulse"></span>
         Our Sponsors
       </h3>
-      
+
       {/* Mobile Animation - Horizontal Scroll */}
       <div className="md:hidden relative w-full overflow-hidden">
         <div className={`flex gap-4 py-2 ${shouldAnimate ? 'animate-scroll' : ''}`}
-             style={{ minWidth: shouldAnimate ? '200%' : undefined }}>
+          style={{ minWidth: shouldAnimate ? '200%' : undefined }}>
           {(shouldAnimate ? [...sponsors, ...sponsors] : sponsors).map((sponsor, idx) => (
             <motion.div
               key={sponsor.name + idx}
@@ -78,12 +78,12 @@ const RotatingSponsorsGrid = ({ sponsors }: { sponsors?: Sponsor[] }) => {
               className="w-full h-[200px] rounded-xl border border-primary/10 bg-background/50 backdrop-blur-sm p-4 flex flex-col items-center justify-center gap-4 hover:border-primary/20 transition-all duration-300 hover:shadow-lg group"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ 
-                duration: 0.5, 
+              transition={{
+                duration: 0.5,
                 delay: idx * 0.1,
                 ease: "easeOut"
               }}
-              whileHover={{ 
+              whileHover={{
                 y: -8,
                 scale: 1.02,
                 transition: { duration: 0.2 }
@@ -115,7 +115,7 @@ export default function HackathonDetailPage() {
   const [registering, setRegistering] = useState(false)
   const [checkingRegistration, setCheckingRegistration] = useState(true)
   const params = useParams()
-  
+
   const slug = params?.id as string
 
   // Use custom hook for fetching hackathon
@@ -148,7 +148,7 @@ export default function HackathonDetailPage() {
       try {
         const supabase = createClient()
         const { data: { user } } = await supabase.auth.getUser()
-        
+
         if (!user) {
           setCheckingRegistration(false)
           setIsRegistered(false)
@@ -205,7 +205,7 @@ export default function HackathonDetailPage() {
       setIsRegistered(true)
       setCheckingRegistration(false)
       toast.success('Successfully registered for the hackathon!')
-      
+
       // Force a hard reload to clear any cached state
       window.location.href = window.location.href
     } catch (err) {
@@ -233,7 +233,7 @@ export default function HackathonDetailPage() {
       setIsRegistered(false)
       setCheckingRegistration(false)
       toast.success('Successfully unregistered from the hackathon')
-      
+
       // Force a hard reload to clear any cached state
       window.location.href = window.location.href
     } catch (err) {
@@ -268,11 +268,14 @@ export default function HackathonDetailPage() {
   }
 
   const getStatusColor = (status: string) => {
-    switch (status) {
-      case "upcoming":
+    switch (status.toLowerCase()) {
+      case "live":
+      case "published":
         return "bg-gradient-to-r from-green-500 to-emerald-600 text-white"
-      case "ongoing":
+      case "upcoming":
         return "bg-gradient-to-r from-blue-500 to-cyan-600 text-white"
+      case "ongoing":
+        return "bg-gradient-to-r from-purple-500 to-violet-600 text-white"
       case "completed":
         return "bg-gradient-to-r from-gray-500 to-slate-600 text-white"
       case "cancelled":
@@ -299,27 +302,27 @@ export default function HackathonDetailPage() {
         </div>
       )
     }
-    
+
     return (
-    <div className="space-y-6">
-      <div className="bg-background/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/10 shadow-xl">
-        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
-          <Calendar className="h-6 w-6 text-primary" />
-          About the Hackathon
-        </h2>
-        <p className="text-lg leading-relaxed mb-6">{hackathon?.description}</p>
-        <div className="flex flex-wrap gap-2 pt-6 border-t border-primary/10">
+      <div className="space-y-6">
+        <div className="bg-background/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/10 shadow-xl">
+          <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+            <Calendar className="h-6 w-6 text-primary" />
+            About the Hackathon
+          </h2>
+          <p className="text-lg leading-relaxed mb-6">{hackathon?.description}</p>
+          <div className="flex flex-wrap gap-2 pt-6 border-t border-primary/10">
             {hackathon?.tags?.map((tag: string) => (
-            <Badge key={tag} variant="outline" className="text-sm bg-background/50 backdrop-blur-sm border-primary/20 hover:bg-primary/10 transition-colors">
-              #{tag}
-            </Badge>
-          ))}
+              <Badge key={tag} variant="outline" className="text-sm bg-background/50 backdrop-blur-sm border-primary/20 hover:bg-primary/10 transition-colors">
+                #{tag}
+              </Badge>
+            ))}
+          </div>
         </div>
+        {/* Sponsors Grid */}
+        <RotatingSponsorsGrid sponsors={hackathon?.sponsors} />
       </div>
-      {/* Sponsors Grid */}
-      <RotatingSponsorsGrid sponsors={hackathon?.sponsors} />
-    </div>
-  )
+    )
   }
 
   const renderRules = () => {
@@ -337,7 +340,7 @@ export default function HackathonDetailPage() {
         </div>
       )
     }
-    
+
     let rulesArray: string[] = [];
     if (Array.isArray(hackathon?.rules)) {
       rulesArray = hackathon.rules;
@@ -361,50 +364,50 @@ export default function HackathonDetailPage() {
         </div>
       );
     }
-    
+
     return (
-    <div className="space-y-6">
-      <div className="bg-background/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/10 shadow-xl">
-        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
-          <svg className="h-6 w-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-          Hackathon Rules & Guidelines
-        </h2>
-        <div className="mb-6">
-          <p className="text-muted-foreground mb-4">
-            To ensure a fair and enjoyable experience for all participants, please follow these rules and guidelines:
-          </p>
-        </div>
-        <div className="grid md:grid-cols-2 gap-6">
-          <div>
-            <h3 className="font-semibold mb-3 text-primary">General Rules</h3>
-            <ul className="list-disc pl-5 space-y-2 text-sm">
-              {rulesArray.slice(0, Math.ceil(rulesArray.length / 2)).map((rule, index) => (
-                <li key={index} className="text-muted-foreground">{rule}</li>
-              ))}
-            </ul>
+      <div className="space-y-6">
+        <div className="bg-background/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/10 shadow-xl">
+          <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+            <svg className="h-6 w-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Hackathon Rules & Guidelines
+          </h2>
+          <div className="mb-6">
+            <p className="text-muted-foreground mb-4">
+              To ensure a fair and enjoyable experience for all participants, please follow these rules and guidelines:
+            </p>
           </div>
-          <div>
-            <h3 className="font-semibold mb-3 text-primary">Additional Guidelines</h3>
-            <ul className="list-disc pl-5 space-y-2 text-sm">
-              {rulesArray.slice(Math.ceil(rulesArray.length / 2)).map((rule, index) => (
-                <li key={index} className="text-muted-foreground">{rule}</li>
-              ))}
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-semibold mb-3 text-primary">General Rules</h3>
+              <ul className="list-disc pl-5 space-y-2 text-sm">
+                {rulesArray.slice(0, Math.ceil(rulesArray.length / 2)).map((rule, index) => (
+                  <li key={index} className="text-muted-foreground">{rule}</li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-semibold mb-3 text-primary">Additional Guidelines</h3>
+              <ul className="list-disc pl-5 space-y-2 text-sm">
+                {rulesArray.slice(Math.ceil(rulesArray.length / 2)).map((rule, index) => (
+                  <li key={index} className="text-muted-foreground">{rule}</li>
+                ))}
+              </ul>
+            </div>
+          </div>
+          <div className="mt-6 p-4 bg-yellow-500/10 rounded-lg border border-yellow-500/20">
+            <h3 className="font-semibold mb-2 text-yellow-600">⚠️ Important Reminders:</h3>
+            <ul className="text-sm text-muted-foreground space-y-1">
+              <li>• Violation of rules may result in disqualification</li>
+              <li>• Questions about rules should be asked before the event starts</li>
+              <li>• Organizers reserve the right to modify rules if necessary</li>
             </ul>
           </div>
         </div>
-        <div className="mt-6 p-4 bg-yellow-500/10 rounded-lg border border-yellow-500/20">
-          <h3 className="font-semibold mb-2 text-yellow-600">⚠️ Important Reminders:</h3>
-          <ul className="text-sm text-muted-foreground space-y-1">
-            <li>• Violation of rules may result in disqualification</li>
-            <li>• Questions about rules should be asked before the event starts</li>
-            <li>• Organizers reserve the right to modify rules if necessary</li>
-          </ul>
-        </div>
       </div>
-    </div>
-  )
+    )
   }
 
   const renderSchedule = () => {
@@ -422,7 +425,7 @@ export default function HackathonDetailPage() {
         </div>
       )
     }
-    
+
     let scheduleArray: { date: string, label: string }[] = [];
     if (Array.isArray(hackathon?.schedule)) {
       scheduleArray = hackathon.schedule;
@@ -495,10 +498,10 @@ export default function HackathonDetailPage() {
         </div>
       )
     }
-    
+
     const prizeAmount = hackathon?.prize || hackathon?.price || "";
     const prizeDetails = hackathon?.prize_details || "";
-    
+
     // If no prize information is provided at all
     if (!prizeAmount && !prizeDetails) {
       return (
@@ -513,31 +516,31 @@ export default function HackathonDetailPage() {
         </div>
       );
     }
-    
+
     return (
-    <div className="space-y-6">
-      <div className="bg-background/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/10 shadow-xl">
-        <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
-          <DollarSign className="h-6 w-6 text-primary" />
-          Prizes & Rewards
-        </h2>
-        
-        {/* Main Prize */}
-        <div className="text-center mb-8 p-6 bg-gradient-to-r from-primary/10 to-purple-500/10 rounded-xl border border-primary/20">
-          {prizeAmount && (
-            <div className="text-4xl font-bold text-primary mb-2">{prizeAmount}</div>
-          )}
-          {prizeDetails ? (
-            <div className="text-muted-foreground text-left mt-4 whitespace-pre-line">
-              {prizeDetails}
-            </div>
-          ) : prizeAmount && (
-            <p className="text-muted-foreground mt-2">Detailed prize breakdown coming soon!</p>
-          )}
+      <div className="space-y-6">
+        <div className="bg-background/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/10 shadow-xl">
+          <h2 className="text-2xl font-bold mb-6 flex items-center gap-2">
+            <DollarSign className="h-6 w-6 text-primary" />
+            Prizes & Rewards
+          </h2>
+
+          {/* Main Prize */}
+          <div className="text-center mb-8 p-6 bg-gradient-to-r from-primary/10 to-purple-500/10 rounded-xl border border-primary/20">
+            {prizeAmount && (
+              <div className="text-4xl font-bold text-primary mb-2">{prizeAmount}</div>
+            )}
+            {prizeDetails ? (
+              <div className="text-muted-foreground text-left mt-4 whitespace-pre-line">
+                {prizeDetails}
+              </div>
+            ) : prizeAmount && (
+              <p className="text-muted-foreground mt-2">Detailed prize breakdown coming soon!</p>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  )
+    )
   }
 
   const renderFAQ = () => {
@@ -556,7 +559,7 @@ export default function HackathonDetailPage() {
         </div>
       )
     }
-    
+
     let faqArray: { question: string, answer: string }[] = [];
     if (Array.isArray(hackathon?.faq)) {
       faqArray = hackathon.faq;
@@ -578,7 +581,7 @@ export default function HackathonDetailPage() {
         </div>
       );
     }
-    
+
     return (
       <div className="space-y-6">
         <div className="bg-background/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/10 shadow-xl">
@@ -602,7 +605,7 @@ export default function HackathonDetailPage() {
               </div>
             ))}
           </div>
-          
+
           <div className="mt-8 p-4 bg-primary/5 rounded-lg border border-primary/10">
             <h3 className="font-semibold mb-2 text-primary">Still have questions?</h3>
             <p className="text-sm text-muted-foreground mb-3">
@@ -641,7 +644,7 @@ export default function HackathonDetailPage() {
   if (fetchError) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
-        <motion.div 
+        <motion.div
           className="text-center space-y-4"
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
@@ -706,7 +709,7 @@ export default function HackathonDetailPage() {
                 {/* Hackathon Header */}
                 <div className="space-y-4">
                   <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight">{hackathon?.title}</h1>
-                  
+
                   {/* Hosted by Section */}
                   {hackathon?.company ? (
                     <div className="flex items-center gap-3 p-4 bg-muted/30 rounded-lg border border-primary/10">
@@ -714,9 +717,9 @@ export default function HackathonDetailPage() {
                       <div className="flex items-center gap-2 flex-wrap">
                         <span className="text-sm text-muted-foreground">Hosted by</span>
                         <Link href={`/companies/${hackathon.company.slug}`} className="hover:opacity-80 transition-opacity">
-                          <CompanyBadge 
-                            company={hackathon.company} 
-                            size="md" 
+                          <CompanyBadge
+                            company={hackathon.company}
+                            size="md"
                             showVerification={true}
                           />
                         </Link>
@@ -725,12 +728,12 @@ export default function HackathonDetailPage() {
                   ) : hackathon?.organizer && (
                     <div className="text-base md:text-lg text-muted-foreground font-bold mt-1">by {hackathon.organizer}</div>
                   )}
-                  
+
                   <p className="text-lg md:text-xl text-muted-foreground leading-relaxed">{hackathon?.excerpt}</p>
                   <div className="flex items-center gap-3 flex-wrap mt-2">
                     <Badge className={`${getCategoryColor(hackathon?.category || '')} shadow-lg`} variant="secondary">{hackathon?.category}</Badge>
                     {hackathon?.featured && (<Badge className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white border-0 shadow-lg"><Star className="h-3 w-3 mr-1" />Featured</Badge>)}
-                    <Badge className={`${getStatusColor(hackathon?.status || '')} shadow-lg`} variant="secondary">{hackathon?.status}</Badge>
+                    <Badge className={`${getStatusColor(hackathon?.status || '')} shadow-lg`} variant="secondary">{hackathon?.status ? hackathon.status.charAt(0).toUpperCase() + hackathon.status.slice(1) : ''}</Badge>
                   </div>
                 </div>
                 {/* Registration Card (mobile only) */}
@@ -751,7 +754,7 @@ export default function HackathonDetailPage() {
                       )}
                       {isAuthenticated ? (
                         isRegistered ? (
-                          <Button 
+                          <Button
                             variant="outline"
                             onClick={handleUnregister}
                             disabled={registering}
@@ -760,7 +763,7 @@ export default function HackathonDetailPage() {
                             {registering ? 'Processing...' : 'Unregister'}
                           </Button>
                         ) : (
-                          <Button 
+                          <Button
                             onClick={handleRegister}
                             disabled={registering || checkingRegistration}
                             className="w-full bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg mt-2"
@@ -837,7 +840,7 @@ export default function HackathonDetailPage() {
                       )}
                       {isAuthenticated ? (
                         isRegistered ? (
-                          <Button 
+                          <Button
                             variant="outline"
                             onClick={handleUnregister}
                             disabled={registering}
@@ -846,7 +849,7 @@ export default function HackathonDetailPage() {
                             {registering ? 'Processing...' : 'Unregister'}
                           </Button>
                         ) : (
-                          <Button 
+                          <Button
                             onClick={handleRegister}
                             disabled={registering || checkingRegistration}
                             className="w-full bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg mt-2"
@@ -877,9 +880,9 @@ export default function HackathonDetailPage() {
                       {hackathon?.team_size ? (
                         Array.isArray(hackathon.team_size) && hackathon.team_size.length === 2
                           ? `${hackathon.team_size[0]}-${hackathon.team_size[1]} members`
-                          : typeof hackathon.team_size === 'object' && hackathon.team_size.min && hackathon.team_size.max 
+                          : typeof hackathon.team_size === 'object' && hackathon.team_size.min && hackathon.team_size.max
                             ? `${hackathon.team_size.min}-${hackathon.team_size.max} members`
-                            : typeof hackathon.team_size === 'number' 
+                            : typeof hackathon.team_size === 'number'
                               ? `${hackathon.team_size} member${hackathon.team_size > 1 ? 's' : ''}`
                               : hackathon.team_size
                       ) : '-'}
@@ -906,44 +909,44 @@ export default function HackathonDetailPage() {
                 <div className="bg-white dark:bg-background border border-primary/10 rounded-xl shadow-md p-6">
                   <div className="text-lg font-semibold mb-2">Need Help?</div>
                   <div className="text-sm text-muted-foreground mb-2">Have questions about this hackathon? Contact the organizers or check the FAQ section.</div>
-                  
+
                   {/* Social Icons Row */}
                   {hackathon?.socials && Object.keys(hackathon.socials).length > 0 && (
                     <div className="flex flex-wrap justify-center gap-3 mb-4">
                       {hackathon.socials.linkedin && (
                         <a href={hackathon.socials.linkedin} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="rounded-full bg-blue-100 dark:bg-blue-900/30 p-3 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors shadow">
-                          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="4" fill="none" stroke="currentColor" strokeWidth="2"/><path d="M8 11v5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/><circle cx="8" cy="8" r="1" fill="currentColor"/><path d="M12 16v-3a2 2 0 0 1 4 0v3" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
+                          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="4" fill="none" stroke="currentColor" strokeWidth="2" /><path d="M8 11v5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /><circle cx="8" cy="8" r="1" fill="currentColor" /><path d="M12 16v-3a2 2 0 0 1 4 0v3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>
                         </a>
                       )}
                       {hackathon.socials.twitter && (
                         <a href={hackathon.socials.twitter} target="_blank" rel="noopener noreferrer" aria-label="Twitter/X" className="rounded-full bg-slate-100 dark:bg-slate-900/30 p-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors shadow">
-                          <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+                          <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>
                         </a>
                       )}
                       {hackathon.socials.discord && (
                         <a href={hackathon.socials.discord} target="_blank" rel="noopener noreferrer" aria-label="Discord" className="rounded-full bg-indigo-100 dark:bg-indigo-900/30 p-3 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors shadow">
-                          <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
+                          <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" /></svg>
                         </a>
                       )}
                       {hackathon.socials.website && (
                         <a href={hackathon.socials.website} target="_blank" rel="noopener noreferrer" aria-label="Website" className="rounded-full bg-gray-100 dark:bg-gray-900/30 p-3 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors shadow">
-                          <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" strokeWidth="2"/><path strokeWidth="2" d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+                          <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" strokeWidth="2" /><path strokeWidth="2" d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></svg>
                         </a>
                       )}
                       {hackathon.socials.whatsapp && (
                         <a href={hackathon.socials.whatsapp} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" className="rounded-full bg-green-100 dark:bg-green-900/30 p-3 hover:bg-green-200 dark:hover:bg-green-800 transition-colors shadow">
-                          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.477 2 2 6.477 2 12c0 1.85.504 3.59 1.38 5.08L2 22l5.09-1.36A9.953 9.953 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2Zm0 18a7.95 7.95 0 0 1-4.09-1.13l-.29-.17-3.02.8.81-2.95-.19-.3A7.96 7.96 0 1 1 20 12c0 4.411-3.589 8-8 8Zm4.29-5.38c-.22-.11-1.3-.64-1.5-.71-.2-.07-.35-.11-.5.11-.15.22-.57.71-.7.86-.13.15-.26.16-.48.05-.22-.11-.93-.34-1.77-1.09-.66-.59-1.1-1.31-1.23-1.53-.13-.22-.01-.34.1-.45.1-.1.22-.26.33-.39.11-.13.15-.22.22-.37.07-.15.04-.28-.02-.39-.07-.11-.5-1.21-.68-1.66-.18-.44-.36-.38-.5-.39-.13-.01-.28-.01-.43-.01-.15 0-.39.06-.6.28-.21.22-.8.78-.8 1.9 0 1.12.82 2.2.93 2.35.11.15 1.62 2.48 3.93 3.38.55.19.98.3 1.31.38.55.14 1.05.12 1.44.07.44-.07 1.3-.53 1.48-1.04.18-.51.18-.95.13-1.04-.05-.09-.2-.14-.42-.25Z"/></svg>
+                          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.477 2 2 6.477 2 12c0 1.85.504 3.59 1.38 5.08L2 22l5.09-1.36A9.953 9.953 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2Zm0 18a7.95 7.95 0 0 1-4.09-1.13l-.29-.17-3.02.8.81-2.95-.19-.3A7.96 7.96 0 1 1 20 12c0 4.411-3.589 8-8 8Zm4.29-5.38c-.22-.11-1.3-.64-1.5-.71-.2-.07-.35-.11-.5.11-.15.22-.57.71-.7.86-.13.15-.26.16-.48.05-.22-.11-.93-.34-1.77-1.09-.66-.59-1.1-1.31-1.23-1.53-.13-.22-.01-.34.1-.45.1-.1.22-.26.33-.39.11-.13.15-.22.22-.37.07-.15.04-.28-.02-.39-.07-.11-.5-1.21-.68-1.66-.18-.44-.36-.38-.5-.39-.13-.01-.28-.01-.43-.01-.15 0-.39.06-.6.28-.21.22-.8.78-.8 1.9 0 1.12.82 2.2.93 2.35.11.15 1.62 2.48 3.93 3.38.55.19.98.3 1.31.38.55.14 1.05.12 1.44.07.44-.07 1.3-.53 1.48-1.04.18-.51.18-.95.13-1.04-.05-.09-.2-.14-.42-.25Z" /></svg>
                         </a>
                       )}
                       {hackathon.socials.instagram && (
                         <a href={hackathon.socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="rounded-full bg-pink-100 dark:bg-pink-900/30 p-3 hover:bg-pink-200 dark:hover:bg-pink-800 transition-colors shadow">
-                          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="5" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" strokeWidth="2"/><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor"/></svg>
+                          <svg width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="5" fill="none" stroke="currentColor" strokeWidth="2" /><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" strokeWidth="2" /><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" /></svg>
                         </a>
                       )}
                     </div>
                   )}
-                  
-                  <Button 
+
+                  <Button
                     className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold rounded-xl py-3 px-4 shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 border-0 group relative overflow-hidden"
                     onClick={() => {
                       const phoneNumber = hackathon?.organizer_contact?.phone || '+91 86990 25107';
@@ -978,8 +981,8 @@ export default function HackathonDetailPage() {
           </div>
         </div>
       </div>
-      
-      <Footer/>
+
+      <Footer />
     </div>
   )
 }
diff --git a/app/hackathons/page.tsx b/app/hackathons/page.tsx
index 3dd24288..b366ca8d 100644
--- a/app/hackathons/page.tsx
+++ b/app/hackathons/page.tsx
@@ -224,11 +224,14 @@ export default function HackathonsPage() {
   }
 
   const getStatusColor = (status: string) => {
-    switch (status) {
-      case "upcoming":
+    switch (status.toLowerCase()) {
+      case "live":
+      case "published":
         return "bg-gradient-to-r from-green-500 to-emerald-600 text-white"
-      case "ongoing":
+      case "upcoming":
         return "bg-gradient-to-r from-blue-500 to-cyan-600 text-white"
+      case "ongoing":
+        return "bg-gradient-to-r from-purple-500 to-violet-600 text-white"
       case "completed":
         return "bg-gradient-to-r from-gray-500 to-slate-600 text-white"
       case "cancelled":
@@ -750,7 +753,7 @@ export default function HackathonsPage() {
                           Featured
                         </Badge>
                         <Badge className={`${getStatusColor(hackathon.status)} shadow-lg`} variant="secondary">
-                          {hackathon.status}
+                          {hackathon.status.charAt(0).toUpperCase() + hackathon.status.slice(1)}
                         </Badge>
                       </div>
                       <CardDescription className="text-sm leading-relaxed min-h-[48px] max-h-[48px] overflow-hidden line-clamp-2">
@@ -882,7 +885,7 @@ export default function HackathonsPage() {
                     {/* Status Badge */}
                     <div className="absolute top-2 right-2 z-10 flex flex-col items-end gap-1">
                       <Badge className={`${getStatusColor(hackathon.status)} shadow-lg text-xs`} variant="secondary">
-                        {hackathon.status}
+                        {hackathon.status.charAt(0).toUpperCase() + hackathon.status.slice(1)}
                       </Badge>
                     </div>
                   </div>