diff --git a/.cursorignore b/.cursorignore
new file mode 100644
index 0000000..6f9f00f
--- /dev/null
+++ b/.cursorignore
@@ -0,0 +1 @@
+# Add directories or file patterns to ignore during indexing (e.g. foo/ or *.csv)
diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/app/favicon.ico and /dev/null differ
diff --git a/app/globals.css b/app/globals.css
index 7b94767..9cca00f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -108,6 +108,7 @@ body {
   background: linear-gradient(to bottom,
       transparent,
       rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+  overflow-x: hidden;
 }
 
 /* Custom scrollbar for better UX */
@@ -159,6 +160,7 @@ body {
     html {
       scroll-behavior: smooth;
       -webkit-overflow-scrolling: touch;
+      overflow-x: hidden;
     }
 
     /* Improve tap highlighting */
diff --git a/app/page.tsx b/app/page.tsx
index 7074e19..b778e7b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -75,14 +75,22 @@ async function getEventsData(): Promise<EventData[]> {
 // Main Page Component - Server Component that renders the full page
 export default async function HomePage() {
   const events = await getEventsData();
+  const now = new Date();
+  
+  // Separate events by featured status and time
   const featuredEvents = events.filter(event => event.featured);
   const nonFeaturedEvents = events.filter(event => !event.featured);
+  
+  // Separate non-featured events into upcoming and past
+  const upcomingEvents = nonFeaturedEvents.filter(event => new Date(event.start_time) >= now);
+  const pastEvents = nonFeaturedEvents.filter(event => new Date(event.start_time) < now);
 
   return (
     <div className="min-h-screen bg-background">
       <HomePageClient
         featuredEvents={featuredEvents}
-        nonFeaturedEvents={nonFeaturedEvents}
+        upcomingEvents={upcomingEvents}
+        pastEvents={pastEvents}
       />
     </div>
   );
diff --git a/app/staff/events/create/StaffEventCreateClient.tsx b/app/staff/events/create/StaffEventCreateClient.tsx
index 537696b..60f090f 100644
--- a/app/staff/events/create/StaffEventCreateClient.tsx
+++ b/app/staff/events/create/StaffEventCreateClient.tsx
@@ -1,10 +1,14 @@
 'use client'
 
+import { useState } from 'react'
 import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Eye, EyeOff } from 'lucide-react'
 import EventForm from '@/components/events/EventForm'
 
 export default function StaffEventCreateClient() {
     const router = useRouter()
+    const [showPreview, setShowPreview] = useState(false)
 
     const handleSuccess = () => {
         // Redirect to the staff dashboard after successful creation
@@ -16,9 +20,23 @@ export default function StaffEventCreateClient() {
     }
 
     return (
-        <EventForm
-            onSuccess={handleSuccess}
-            onCancel={handleCancel}
-        />
+        <>
+            <div className="mb-4 flex justify-end">
+                <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setShowPreview(!showPreview)}
+                    className="flex items-center gap-2"
+                >
+                    {showPreview ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                    {showPreview ? 'Hide Preview' : 'Show Preview'}
+                </Button>
+            </div>
+            <EventForm
+                onSuccess={handleSuccess}
+                onCancel={handleCancel}
+                showPreview={showPreview}
+            />
+        </>
     )
 } 
\ No newline at end of file
diff --git a/app/staff/events/create/page.tsx b/app/staff/events/create/page.tsx
index cdb4ea4..0979177 100644
--- a/app/staff/events/create/page.tsx
+++ b/app/staff/events/create/page.tsx
@@ -25,9 +25,11 @@ export default async function StaffEventCreatePage() {
     return (
         <div className="min-h-screen bg-background">
             <div className="max-w-4xl mx-auto py-8 px-4">
-                <div className="mb-8">
-                    <h1 className="text-3xl font-bold text-foreground">Create New Event</h1>
-                    <p className="mt-2 text-muted-foreground">Create and manage your event details</p>
+                <div className="mb-6 flex items-start justify-between">
+                    <div>
+                        <h1 className="text-3xl font-bold text-foreground">Create New Event</h1>
+                        <p className="mt-2 text-muted-foreground">Create and manage your event details</p>
+                    </div>
                 </div>
                 <StaffEventCreateClient />
             </div>
diff --git a/components/dashboard/UserDashboard.tsx b/components/dashboard/UserDashboard.tsx
index 3b94794..c3faa80 100644
--- a/components/dashboard/UserDashboard.tsx
+++ b/components/dashboard/UserDashboard.tsx
@@ -390,8 +390,8 @@ export default function UserDashboard({ user }: UserDashboardProps) {
         <div className="max-w-4xl mx-auto p-6">
             {/* Header */}
             <div className="mb-8">
-                <h1 className="text-3xl font-bold text-gray-900 mb-2">My Dashboard</h1>
-                <p className="text-gray-600">
+                <h1 className="text-3xl font-bold text-foreground mb-2">My Dashboard</h1>
+                <p className="text-muted-foreground">
                     Welcome back! Here are your tickets, orders, and event RSVPs.
                 </p>
             </div>
diff --git a/components/events/EventCard.tsx b/components/events/EventCard.tsx
index c5332ae..e204c19 100644
--- a/components/events/EventCard.tsx
+++ b/components/events/EventCard.tsx
@@ -62,6 +62,7 @@ interface CardComponentProps {
     isUpcoming: boolean;
     hasPrice: boolean;
     lowestPrice: number;
+    isSoon: boolean;
 }
 
 // Safe Image component with error handling
@@ -127,6 +128,12 @@ export function EventCard({
     const isUpcoming = new Date(event.start_time) > new Date();
     const hasPrice = Boolean(event.is_paid && event.ticket_types && event.ticket_types.length > 0);
     const lowestPrice = hasPrice ? Math.min(...event.ticket_types!.map(t => t.price)) : 0;
+    
+    // Check if event is soon (within 7 days)
+    const eventDate = new Date(event.start_time);
+    const today = new Date();
+    const daysDifference = Math.ceil((eventDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+    const isSoon = isUpcoming && daysDifference <= 7 && daysDifference >= 0;
 
     const commonProps: CardComponentProps = {
         event,
@@ -138,7 +145,8 @@ export function EventCard({
         spotsRemaining,
         isUpcoming,
         hasPrice,
-        lowestPrice
+        lowestPrice,
+        isSoon
     };
 
     // Render based on style
@@ -157,7 +165,7 @@ export function EventCard({
 }
 
 // Default Card Style (same as current homepage implementation)
-function DefaultCard({ event, size, featured, showImage, className, onClick, spotsRemaining, isUpcoming, hasPrice, lowestPrice }: CardComponentProps) {
+function DefaultCard({ event, size, featured, showImage, className, onClick, spotsRemaining, isUpcoming, hasPrice, lowestPrice, isSoon }: Readonly<CardComponentProps>) {
     return (
         <Card
             size={size}
@@ -192,13 +200,23 @@ function DefaultCard({ event, size, featured, showImage, className, onClick, spo
                         {event.title}
                     </CardTitle>
                     <div className="flex gap-2">
+                        {!event.is_paid && isUpcoming && (
+                            <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
+                                Free
+                            </span>
+                        )}
                         {event.is_paid && (
-                            <span className="text-xs bg-secondary text-secondary-foreground px-2 py-1 rounded-full">
+                            <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
                                 {hasPrice ? formatPrice(lowestPrice) : 'Paid'}
                             </span>
                         )}
+                        {isSoon && (
+                            <span className="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded-full">
+                                Soon
+                            </span>
+                        )}
                         {!isUpcoming && (
-                            <span className="text-xs bg-muted text-muted-foreground px-2 py-1 rounded-full">
+                            <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">
                                 Past
                             </span>
                         )}
@@ -250,7 +268,7 @@ function DefaultCard({ event, size, featured, showImage, className, onClick, spo
 }
 
 // Preview List Style - Compact horizontal layout for list views
-function PreviewListCard({ event, className, onClick, isUpcoming, hasPrice, lowestPrice }: CardComponentProps) {
+function PreviewListCard({ event, className, onClick, isUpcoming, hasPrice, lowestPrice, isSoon }: Readonly<CardComponentProps>) {
     return (
         <Card
             variant="outlined"
@@ -278,13 +296,23 @@ function PreviewListCard({ event, className, onClick, isUpcoming, hasPrice, lowe
                             {event.title}
                         </h3>
                         <div className="flex gap-1 flex-shrink-0">
+                            {!event.is_paid && isUpcoming && (
+                                <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
+                                    Free
+                                </span>
+                            )}
                             {event.is_paid && (
-                                <span className="text-xs bg-secondary text-secondary-foreground px-2 py-1 rounded-full">
+                                <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
                                     {hasPrice ? formatPrice(lowestPrice) : 'Paid'}
                                 </span>
                             )}
+                            {isSoon && (
+                                <span className="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded-full">
+                                    Soon
+                                </span>
+                            )}
                             {!isUpcoming && (
-                                <span className="text-xs bg-muted text-muted-foreground px-2 py-1 rounded-full">
+                                <span className="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">
                                     Past
                                 </span>
                             )}
@@ -316,7 +344,7 @@ function PreviewListCard({ event, className, onClick, isUpcoming, hasPrice, lowe
 }
 
 // Full List Style - Detailed view with all information
-function FullListCard({ event, className, onClick, spotsRemaining, isUpcoming, hasPrice, lowestPrice }: CardComponentProps) {
+function FullListCard({ event, className, onClick, spotsRemaining, isUpcoming, hasPrice, lowestPrice, isSoon }: Readonly<CardComponentProps>) {
     return (
         <Card
             variant="default"
@@ -350,13 +378,23 @@ function FullListCard({ event, className, onClick, spotsRemaining, isUpcoming, h
                         {event.title}
                     </CardTitle>
                     <div className="flex gap-2">
+                        {!event.is_paid && isUpcoming && (
+                            <span className="text-sm bg-green-100 text-green-800 px-3 py-1 rounded-full font-medium">
+                                Free Event
+                            </span>
+                        )}
                         {event.is_paid && (
-                            <span className="text-sm bg-secondary text-secondary-foreground px-3 py-1 rounded-full font-medium">
+                            <span className="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-medium">
                                 {hasPrice ? formatPrice(lowestPrice) : 'Paid Event'}
                             </span>
                         )}
+                        {isSoon && (
+                            <span className="text-sm bg-orange-100 text-orange-800 px-3 py-1 rounded-full font-medium">
+                                Soon
+                            </span>
+                        )}
                         {!isUpcoming && (
-                            <span className="text-sm bg-muted text-muted-foreground px-3 py-1 rounded-full">
+                            <span className="text-sm bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full">
                                 Past Event
                             </span>
                         )}
@@ -433,7 +471,7 @@ function FullListCard({ event, className, onClick, spotsRemaining, isUpcoming, h
 }
 
 // Compact Card Style - Minimal information for dense layouts
-function CompactCard({ event, className, onClick, hasPrice, lowestPrice }: CardComponentProps) {
+function CompactCard({ event, className, onClick, hasPrice, lowestPrice, isUpcoming, isSoon }: Readonly<CardComponentProps>) {
     return (
         <Card
             size="sm"
@@ -455,11 +493,21 @@ function CompactCard({ event, className, onClick, hasPrice, lowestPrice }: CardC
                     </div>
                 </div>
                 <div className="flex items-center gap-2 ml-3">
+                    {!event.is_paid && isUpcoming && (
+                        <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+                            Free
+                        </span>
+                    )}
                     {event.is_paid && (
-                        <span className="text-xs bg-secondary text-secondary-foreground px-2 py-1 rounded">
+                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
                             {hasPrice ? formatPrice(lowestPrice) : 'Paid'}
                         </span>
                     )}
+                    {isSoon && (
+                        <span className="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded">
+                            Soon
+                        </span>
+                    )}
                     <ExternalLink className="w-3 h-3 text-muted-foreground group-hover:text-foreground" />
                 </div>
             </div>
@@ -468,7 +516,7 @@ function CompactCard({ event, className, onClick, hasPrice, lowestPrice }: CardC
 }
 
 // Timeline Card Style - Vertical timeline layout
-function TimelineCard({ event, className, onClick, hasPrice, lowestPrice }: CardComponentProps) {
+function TimelineCard({ event, className, onClick, hasPrice, lowestPrice, isUpcoming, isSoon }: Readonly<CardComponentProps>) {
     const eventDate = new Date(event.start_time);
     const day = eventDate.getDate();
     const month = eventDate.toLocaleDateString('en-US', { month: 'short' });
@@ -492,11 +540,23 @@ function TimelineCard({ event, className, onClick, hasPrice, lowestPrice }: Card
                         <h3 className="font-semibold text-base text-foreground group-hover:text-blue-600 transition-colors line-clamp-2 min-h-[3rem] leading-relaxed">
                             {event.title}
                         </h3>
-                        {event.is_paid && (
-                            <span className="text-xs bg-secondary text-secondary-foreground px-2 py-1 rounded-full ml-2">
-                                {hasPrice ? formatPrice(lowestPrice) : 'Paid'}
-                            </span>
-                        )}
+                        <div className="flex gap-1 ml-2">
+                            {!event.is_paid && isUpcoming && (
+                                <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
+                                    Free
+                                </span>
+                            )}
+                            {event.is_paid && (
+                                <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
+                                    {hasPrice ? formatPrice(lowestPrice) : 'Paid'}
+                                </span>
+                            )}
+                            {isSoon && (
+                                <span className="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded-full">
+                                    Soon
+                                </span>
+                            )}
+                        </div>
                     </div>
 
                     <p className="text-sm text-gray-600 mb-2 line-clamp-2 min-h-[2.5rem] leading-relaxed">
diff --git a/components/events/EventDetailClient.tsx b/components/events/EventDetailClient.tsx
index 2efec88..95236d0 100644
--- a/components/events/EventDetailClient.tsx
+++ b/components/events/EventDetailClient.tsx
@@ -213,83 +213,74 @@ export function EventDetailClient({ event }: EventDetailClientProps) {
                         <div className="sticky top-24 space-y-6">
                             {/* Registration/Ticket Section */}
                             {event.is_paid && ticketTypes.length > 0 ? (
-                                <Card data-test-id="ticket-section">
-                                    <CardContent className="p-6">
-                                        <h2 className="text-xl font-semibold mb-4 text-foreground" data-test-id="ticket-section-title">Get Tickets</h2>
-
-                                        {checkoutStep === 'tickets' ? (
-                                            <div className="space-y-4" data-test-id="ticket-selection">
-                                                <div data-test-id="ticket-selection-component">
-                                                    <TicketSelection
-                                                        eventId={event.id}
-                                                        selectedTickets={selectedTickets}
-                                                        onTicketsChange={handleTicketsChange}
-                                                    />
-                                                </div>
+                                checkoutStep === 'tickets' ? (
+                                    <div className="space-y-4" data-test-id="ticket-selection">
+                                        <div data-test-id="ticket-selection-component">
+                                            <TicketSelection
+                                                eventId={event.id}
+                                                selectedTickets={selectedTickets}
+                                                onTicketsChange={handleTicketsChange}
+                                            />
+                                        </div>
 
-                                                {getTotalTickets() > 0 && (
-                                                    <div className="border-t border-border pt-4" data-test-id="ticket-summary">
-                                                        <div className="flex justify-between items-center mb-4">
-                                                            <span className="font-medium text-foreground">Total:</span>
-                                                            <span className="text-xl font-bold text-foreground" data-test-id="total-price">{formatPrice(getTotalPrice())}</span>
-                                                        </div>
-                                                        <button
-                                                            onClick={handleProceedToCheckout}
-                                                            className="w-full bg-primary text-primary-foreground py-2 px-4 rounded-lg hover:bg-primary/90 transition-colors"
-                                                            data-test-id="proceed-to-checkout-button"
-                                                        >
-                                                            Proceed to Checkout
-                                                        </button>
+                                        {getTotalTickets() > 0 && (
+                                            <Card data-test-id="ticket-summary">
+                                                <CardContent className="p-4">
+                                                    <div className="flex justify-between items-center mb-4">
+                                                        <span className="font-medium text-foreground">Total:</span>
+                                                        <span className="text-xl font-bold text-foreground" data-test-id="total-price">{formatPrice(getTotalPrice())}</span>
                                                     </div>
-                                                )}
-                                            </div>
-                                        ) : (
-                                            <div className="space-y-4" data-test-id="checkout-section">
-                                                <button
-                                                    onClick={handleBackToTickets}
-                                                    className="flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
-                                                    data-test-id="back-to-tickets-button"
-                                                >
-                                                    <ArrowLeft className="w-4 h-4" />
-                                                    Back to Tickets
-                                                </button>
-
-                                                <div data-test-id="checkout-form">
-                                                    <CheckoutForm
-                                                        eventId={event.id}
-                                                        selectedTickets={selectedTickets}
-                                                        onSuccess={(paymentIntentId) => {
-                                                            console.log('Payment successful:', paymentIntentId)
-                                                            // Handle success - could redirect or show success message
-                                                            setCheckoutStep('tickets')
-                                                        }}
-                                                        onCancel={() => {
-                                                            setCheckoutStep('tickets')
-                                                        }}
-                                                    />
-                                                </div>
-                                            </div>
+                                                    <button
+                                                        onClick={handleProceedToCheckout}
+                                                        className="w-full bg-primary text-primary-foreground py-2 px-4 rounded-lg hover:bg-primary/90 transition-colors"
+                                                        data-test-id="proceed-to-checkout-button"
+                                                    >
+                                                        Proceed to Checkout
+                                                    </button>
+                                                </CardContent>
+                                            </Card>
                                         )}
-                                    </CardContent>
-                                </Card>
-                            ) : (
-                                <Card data-test-id="rsvp-section">
-                                    <CardContent className="p-6">
-                                        <h2 className="text-xl font-semibold mb-4 text-foreground" data-test-id="rsvp-section-title">RSVP</h2>
-                                        <div data-test-id="rsvp-component">
-                                            <RSVPTicketSection
-                                                eventId={event.database_id || event.id}
-                                                eventTitle={event.title}
-                                                eventDate={formatDate(event.start_time)}
-                                                eventTime={formatTime(event.start_time)}
-                                                eventLocation={event.location || 'Location TBD'}
-                                                capacity={event.capacity}
-                                                currentRSVPs={event.rsvp_count}
-                                                isRegistrationOpen={true}
+                                    </div>
+                                ) : (
+                                    <div className="space-y-4" data-test-id="checkout-section">
+                                        <button
+                                            onClick={handleBackToTickets}
+                                            className="flex items-center gap-2 text-primary hover:text-primary/80 transition-colors"
+                                            data-test-id="back-to-tickets-button"
+                                        >
+                                            <ArrowLeft className="w-4 h-4" />
+                                            Back to Tickets
+                                        </button>
+
+                                        <div data-test-id="checkout-form">
+                                            <CheckoutForm
+                                                eventId={event.id}
+                                                selectedTickets={selectedTickets}
+                                                onSuccess={(paymentIntentId) => {
+                                                    console.log('Payment successful:', paymentIntentId)
+                                                    // Handle success - could redirect or show success message
+                                                    setCheckoutStep('tickets')
+                                                }}
+                                                onCancel={() => {
+                                                    setCheckoutStep('tickets')
+                                                }}
                                             />
                                         </div>
-                                    </CardContent>
-                                </Card>
+                                    </div>
+                                )
+                            ) : (
+                                <div data-test-id="rsvp-component">
+                                    <RSVPTicketSection
+                                        eventId={event.database_id || event.id}
+                                        eventTitle={event.title}
+                                        eventDate={formatDate(event.start_time)}
+                                        eventTime={formatTime(event.start_time)}
+                                        eventLocation={event.location || 'Location TBD'}
+                                        capacity={event.capacity}
+                                        currentRSVPs={event.rsvp_count}
+                                        isRegistrationOpen={true}
+                                    />
+                                </div>
                             )}
 
                             {/* Event Stats */}
diff --git a/components/events/EventForm.tsx b/components/events/EventForm.tsx
index de843d7..c79d7eb 100644
--- a/components/events/EventForm.tsx
+++ b/components/events/EventForm.tsx
@@ -25,9 +25,7 @@ import {
     AlertCircle,
     Save,
     X,
-    Plus,
-    Eye,
-    EyeOff
+    Plus
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -60,6 +58,7 @@ interface EventFormProps {
     isEdit?: boolean
     onSuccess?: (eventId: string) => void
     onCancel?: () => void
+    showPreview?: boolean
 }
 
 const CATEGORIES = [
@@ -114,7 +113,6 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
     const [error, setError] = useState<string | null>(null)
     const [validationErrors, setValidationErrors] = useState<Record<string, string>>({})
     const [tagInput, setTagInput] = useState('')
-    const [showPreview, setShowPreview] = useState(false)
 
     // Load event data for editing
     const loadEventData = useCallback(async () => {
@@ -384,30 +382,7 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
     }
 
     return (
-        <div className="max-w-4xl mx-auto space-y-8">
-            {/* Header */}
-            <div className="flex items-center justify-between">
-                <div>
-                    <h1 className="text-3xl font-bold text-gray-900">
-                        {isEdit ? 'Edit Event' : 'Create New Event'}
-                    </h1>
-                    <p className="text-gray-600 mt-1">
-                        {isEdit ? 'Update your event details below' : 'Fill in the details below to create your event'}
-                    </p>
-                </div>
-
-                <div className="flex items-center gap-3">
-                    <Button
-                        type="button"
-                        variant="outline"
-                        onClick={() => setShowPreview(!showPreview)}
-                        className="flex items-center gap-2"
-                    >
-                        {showPreview ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                        {showPreview ? 'Hide Preview' : 'Show Preview'}
-                    </Button>
-                </div>
-            </div>
+        <div className="max-w-4xl mx-auto space-y-6">
 
             {error && (
                 <Alert className="border-red-200 bg-red-50">
@@ -416,7 +391,7 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                 </Alert>
             )}
 
-            <form onSubmit={handleSubmit} className="space-y-8">
+            <form onSubmit={handleSubmit} className="space-y-6">
                 {/* Basic Information */}
                 <Card>
                     <CardHeader>
@@ -425,27 +400,28 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             Basic Information
                         </CardTitle>
                     </CardHeader>
-                    <CardContent className="space-y-6">
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <CardContent className="space-y-4 p-6">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div className="md:col-span-2">
-                                <Label htmlFor="title">Event Title *</Label>
+                                <Label htmlFor="title" className="block mb-2">Event Title *</Label>
                                 <Input
                                     id="title"
                                     value={formData.title}
                                     onChange={(e) => handleInputChange('title', e.target.value)}
-                                    placeholder="Enter a compelling event title"
+                                    placeholder="Summer Food Truck Festival"
                                     className={cn(validationErrors.title && 'border-red-500')}
                                 />
                                 {validationErrors.title && (
                                     <p className="text-red-500 text-sm mt-1">{validationErrors.title}</p>
                                 )}
-                                <div className="flex justify-between items-center mt-1">
-                                    <p className="text-gray-500 text-sm">
+                                <div className="flex justify-between items-center mt-2">
+                                    <p className="text-muted-foreground text-sm">
+
                                         Keep it concise and engaging
                                     </p>
                                     <p className={cn(
                                         "text-sm",
-                                        formData.title.length > 60 ? "text-orange-600 font-medium" : "text-gray-400"
+                                        formData.title.length > 60 ? "text-orange-600 font-medium" : "text-muted-foreground"
                                     )}>
                                         {formData.title.length}/60
                                     </p>
@@ -458,24 +434,24 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             </div>
 
                             <div>
-                                <Label htmlFor="slug">URL Slug *</Label>
+                                <Label htmlFor="slug" className="block mb-2">URL Slug *</Label>
                                 <Input
                                     id="slug"
                                     value={formData.slug}
                                     onChange={(e) => handleInputChange('slug', e.target.value)}
-                                    placeholder="event-url-slug"
+                                    placeholder="summer-food-truck-festival"
                                     className={cn(validationErrors.slug && 'border-red-500')}
                                 />
                                 {validationErrors.slug && (
                                     <p className="text-red-500 text-sm mt-1">{validationErrors.slug}</p>
                                 )}
-                                <p className="text-gray-500 text-sm mt-1">
+                                <p className="text-muted-foreground text-sm mt-2">
                                     This will be part of your event URL
                                 </p>
                             </div>
 
                             <div>
-                                <Label htmlFor="category">Category *</Label>
+                                <Label htmlFor="category" className="block mb-2">Category *</Label>
                                 <Select value={formData.category} onValueChange={(value) => handleInputChange('category', value)}>
                                     <SelectTrigger>
                                         <SelectValue placeholder="Select category" />
@@ -491,15 +467,16 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             </div>
 
                             <div className="md:col-span-2">
-                                <Label htmlFor="short_description">Short Description</Label>
+                                <Label htmlFor="short_description" className="block mb-2">Short Description</Label>
                                 <Input
                                     id="short_description"
                                     value={formData.short_description}
                                     onChange={(e) => handleInputChange('short_description', e.target.value)}
-                                    placeholder="Brief one-line description (optional)"
+                                    placeholder="Local food trucks with diverse cuisines and live music"
                                 />
                                 <div className="flex justify-between items-center mt-1">
-                                    <p className="text-gray-500 text-sm">
+                                    <p className="text-muted-foreground text-sm">
+
                                         This appears in event listings and search results
                                     </p>
                                     <p className={cn(
@@ -517,12 +494,12 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             </div>
 
                             <div className="md:col-span-2">
-                                <Label htmlFor="description">Full Description *</Label>
+                                <Label htmlFor="description" className="block mb-2">Full Description *</Label>
                                 <Textarea
                                     id="description"
                                     value={formData.description}
                                     onChange={(e) => handleInputChange('description', e.target.value)}
-                                    placeholder="Provide detailed information about your event..."
+                                    placeholder="Join us for a celebration of local food trucks featuring diverse cuisines from around the world. Enjoy live music, family activities, and delicious food from 15+ local vendors. Free parking available at the community center."
                                     rows={6}
                                     className={cn(validationErrors.description && 'border-red-500')}
                                 />
@@ -542,10 +519,10 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             Date & Time
                         </CardTitle>
                     </CardHeader>
-                    <CardContent className="space-y-6">
+                    <CardContent className="space-y-4 p-6">
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                             <div>
-                                <Label htmlFor="start_time">Start Date & Time *</Label>
+                                <Label htmlFor="start_time" className="block mb-2">Start Date & Time *</Label>
                                 <Input
                                     id="start_time"
                                     type="datetime-local"
@@ -559,7 +536,7 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             </div>
 
                             <div>
-                                <Label htmlFor="end_time">End Date & Time *</Label>
+                                <Label htmlFor="end_time" className="block mb-2">End Date & Time *</Label>
                                 <Input
                                     id="end_time"
                                     type="datetime-local"
@@ -573,7 +550,7 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             </div>
 
                             <div>
-                                <Label htmlFor="timezone">Timezone</Label>
+                                <Label htmlFor="timezone" className="block mb-2">Timezone</Label>
                                 <Select value={formData.timezone} onValueChange={(value) => handleInputChange('timezone', value)}>
                                     <SelectTrigger>
                                         <SelectValue placeholder="Select timezone" />
@@ -599,25 +576,25 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             Location
                         </CardTitle>
                     </CardHeader>
-                    <CardContent className="space-y-6">
+                    <CardContent className="space-y-4 p-6">
                         <div className="flex items-center space-x-2">
                             <Switch
                                 id="is_online"
                                 checked={formData.is_online}
                                 onCheckedChange={(checked) => handleInputChange('is_online', checked)}
                             />
-                            <Label htmlFor="is_online">This is an online event</Label>
+                            <Label htmlFor="is_online" className="font-medium">This is an online event</Label>
                         </div>
 
                         {formData.is_online ? (
                             <div>
-                                <Label htmlFor="online_url">Online Event URL *</Label>
+                                <Label htmlFor="online_url" className="block mb-2">Online Event URL *</Label>
                                 <Input
                                     id="online_url"
                                     type="url"
                                     value={formData.online_url}
                                     onChange={(e) => handleInputChange('online_url', e.target.value)}
-                                    placeholder="https://zoom.us/j/123456789"
+                                    placeholder="https://youtube.com/live/food-truck-festival"
                                     className={cn(validationErrors.online_url && 'border-red-500')}
                                 />
                                 {validationErrors.online_url && (
@@ -627,12 +604,12 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                         ) : (
                             <div className="space-y-4">
                                 <div>
-                                    <Label htmlFor="location">Venue/Location *</Label>
+                                    <Label htmlFor="location" className="block mb-2">Venue/Location *</Label>
                                     <Input
                                         id="location"
                                         value={formData.location}
                                         onChange={(e) => handleInputChange('location', e.target.value)}
-                                        placeholder="Venue name or address"
+                                        placeholder="Downtown Plaza, 123 Main Street"
                                         className={cn(validationErrors.location && 'border-red-500')}
                                     />
                                     {validationErrors.location && (
@@ -641,26 +618,26 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                                 </div>
 
                                 <div>
-                                    <Label htmlFor="location_details">Location Details</Label>
+                                    <Label htmlFor="location_details" className="block mb-2">Location Details</Label>
                                     <Textarea
                                         id="location_details"
                                         value={formData.location_details}
                                         onChange={(e) => handleInputChange('location_details', e.target.value)}
-                                        placeholder="Additional location details, directions, parking info..."
+                                        placeholder="Free parking available behind the community center. Enter from Oak Street entrance."
                                         rows={3}
                                     />
                                 </div>
 
                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                     <div>
-                                        <Label htmlFor="latitude">Latitude (optional)</Label>
+                                        <Label htmlFor="latitude" className="block mb-2">Latitude (optional)</Label>
                                         <Input
                                             id="latitude"
                                             type="number"
                                             step="any"
                                             value={formData.latitude}
                                             onChange={(e) => handleInputChange('latitude', e.target.value)}
-                                            placeholder="40.7128"
+                                            placeholder="40.7580"
                                             className={cn(validationErrors.latitude && 'border-red-500')}
                                         />
                                         {validationErrors.latitude && (
@@ -669,14 +646,14 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                                     </div>
 
                                     <div>
-                                        <Label htmlFor="longitude">Longitude (optional)</Label>
+                                        <Label htmlFor="longitude" className="block mb-2">Longitude (optional)</Label>
                                         <Input
                                             id="longitude"
                                             type="number"
                                             step="any"
                                             value={formData.longitude}
                                             onChange={(e) => handleInputChange('longitude', e.target.value)}
-                                            placeholder="-74.0060"
+                                            placeholder="-73.9855"
                                             className={cn(validationErrors.longitude && 'border-red-500')}
                                         />
                                         {validationErrors.longitude && (
@@ -697,23 +674,23 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             Capacity & Ticketing
                         </CardTitle>
                     </CardHeader>
-                    <CardContent className="space-y-6">
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <CardContent className="space-y-4 p-6">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div>
-                                <Label htmlFor="capacity">Event Capacity</Label>
+                                <Label htmlFor="capacity" className="block mb-2">Event Capacity</Label>
                                 <Input
                                     id="capacity"
                                     type="number"
                                     min="1"
                                     value={formData.capacity}
                                     onChange={(e) => handleInputChange('capacity', e.target.value)}
-                                    placeholder="Leave empty for unlimited"
+                                    placeholder="500"
                                     className={cn(validationErrors.capacity && 'border-red-500')}
                                 />
                                 {validationErrors.capacity && (
                                     <p className="text-red-500 text-sm mt-1">{validationErrors.capacity}</p>
                                 )}
-                                <p className="text-gray-500 text-sm mt-1">
+                                <p className="text-muted-foreground text-sm mt-2">
                                     Maximum number of attendees (leave empty for unlimited)
                                 </p>
                             </div>
@@ -724,7 +701,7 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                                     checked={formData.is_paid}
                                     onCheckedChange={(checked) => handleInputChange('is_paid', checked)}
                                 />
-                                <Label htmlFor="is_paid">This is a paid event</Label>
+                                <Label htmlFor="is_paid" className="font-medium">This is a paid event</Label>
                             </div>
                         </div>
 
@@ -747,31 +724,31 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             Media & Presentation
                         </CardTitle>
                     </CardHeader>
-                    <CardContent className="space-y-6">
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <CardContent className="space-y-4 p-6">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <div>
-                                <Label htmlFor="image_url">Event Image URL</Label>
+                                <Label htmlFor="image_url" className="block mb-2">Event Image URL</Label>
                                 <Input
                                     id="image_url"
                                     type="url"
                                     value={formData.image_url}
                                     onChange={(e) => handleInputChange('image_url', e.target.value)}
-                                    placeholder="https://example.com/event-image.jpg"
+                                    placeholder="https://images.unsplash.com/food-trucks-downtown-plaza.jpg"
                                 />
-                                <p className="text-gray-500 text-sm mt-1">
+                                <p className="text-muted-foreground text-sm mt-2">
                                     URL to an image that represents your event
                                 </p>
                             </div>
 
                             <div>
-                                <Label htmlFor="image_alt_text">Image Alt Text</Label>
+                                <Label htmlFor="image_alt_text" className="block mb-2">Image Alt Text</Label>
                                 <Input
                                     id="image_alt_text"
                                     value={formData.image_alt_text}
                                     onChange={(e) => handleInputChange('image_alt_text', e.target.value)}
-                                    placeholder="Describe the image for accessibility"
+                                    placeholder="Colorful food trucks lined up in downtown plaza with people enjoying meals"
                                 />
-                                <p className="text-gray-500 text-sm mt-1">
+                                <p className="text-muted-foreground text-sm mt-2">
                                     Describe the image for accessibility
                                 </p>
                             </div>
@@ -798,7 +775,7 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                                 <Input
                                     value={tagInput}
                                     onChange={(e) => setTagInput(e.target.value)}
-                                    placeholder="Add a tag"
+                                    placeholder="food, music, family-friendly"
                                     onKeyDown={(e) => {
                                         if (e.key === 'Enter') {
                                             e.preventDefault()
@@ -825,14 +802,14 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                             Publishing Options
                         </CardTitle>
                     </CardHeader>
-                    <CardContent className="space-y-4">
+                    <CardContent className="space-y-4 p-6">
                         <div className="flex items-center space-x-2">
                             <Switch
                                 id="published"
                                 checked={formData.published}
                                 onCheckedChange={(checked) => handleInputChange('published', checked)}
                             />
-                            <Label htmlFor="published">Publish event (make it visible to the public)</Label>
+                            <Label htmlFor="published" className="font-medium">Publish event (make it visible to the public)</Label>
                         </div>
 
                         <div className="flex items-center space-x-2">
@@ -841,7 +818,7 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                                 checked={formData.featured}
                                 onCheckedChange={(checked) => handleInputChange('featured', checked)}
                             />
-                            <Label htmlFor="featured">Feature this event (appears in featured section)</Label>
+                            <Label htmlFor="featured" className="font-medium">Feature this event (appears in featured section)</Label>
                         </div>
                     </CardContent>
                 </Card>
diff --git a/components/events/TicketSelection.tsx b/components/events/TicketSelection.tsx
index bdd537b..ecb46b7 100644
--- a/components/events/TicketSelection.tsx
+++ b/components/events/TicketSelection.tsx
@@ -171,13 +171,13 @@ export default function TicketSelection({
     return (
         <div className="space-y-6" data-test-id="ticket-selection-container">
             <Card data-test-id="ticket-types-card">
-                <CardHeader>
+                <CardHeader className="pb-6">
                     <CardTitle className="flex items-center gap-2" data-test-id="ticket-section-title">
                         <ShoppingCart className="h-5 w-5" />
                         Get Your Tickets
                     </CardTitle>
                 </CardHeader>
-                <CardContent className="space-y-4">
+                <CardContent className="space-y-4 pt-0">
                     {ticketTypes.map((ticket) => {
                         // Handle undefined sold_count gracefully
                         const soldCount = ticket.sold_count || 0
diff --git a/components/filters/EventFilters.tsx b/components/filters/EventFilters.tsx
index 4a4a6a3..0ce9b09 100644
--- a/components/filters/EventFilters.tsx
+++ b/components/filters/EventFilters.tsx
@@ -152,7 +152,7 @@ export function EventFilters({
                         onKeyDown={handleSearchKeyDown}
                         className="block w-full pl-10 pr-3 py-2 border border-border rounded-md leading-5 bg-background placeholder:text-muted-foreground text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring text-sm"
                         aria-autocomplete="list"
-                        aria-controls="search-suggestions"
+                        aria-controls={isSearchFocused && suggestions.length > 0 ? "search-suggestions" : undefined}
                         aria-activedescendant={highlightedIndex >= 0 ? `suggestion-${highlightedIndex}` : undefined}
                     />
                     {/* Autocomplete Suggestions Dropdown */}
diff --git a/components/homepage/HomePageClient.tsx b/components/homepage/HomePageClient.tsx
index 0116bfa..7c4182d 100644
--- a/components/homepage/HomePageClient.tsx
+++ b/components/homepage/HomePageClient.tsx
@@ -11,12 +11,14 @@ import { Footer } from '@/components/ui/Footer';
 
 interface HomePageClientProps {
   featuredEvents: EventData[];
-  nonFeaturedEvents: EventData[];
+  upcomingEvents: EventData[];
+  pastEvents: EventData[];
 }
 
-export function HomePageClient({ featuredEvents, nonFeaturedEvents }: HomePageClientProps) {
+export function HomePageClient({ featuredEvents, upcomingEvents, pastEvents }: HomePageClientProps) {
   const router = useRouter();
-  const [filteredEvents, setFilteredEvents] = React.useState(nonFeaturedEvents);
+  const [filteredEvents, setFilteredEvents] = React.useState(upcomingEvents);
+  const [showPastEvents, setShowPastEvents] = React.useState(false);
 
   // Memoize the filtered events setter to prevent infinite re-renders
   const handleFilteredEventsChange = React.useCallback((events: EventData[]) => {
@@ -33,7 +35,17 @@ export function HomePageClient({ featuredEvents, nonFeaturedEvents }: HomePageCl
     pageSize: 8
   });
 
-  // Infinite scroll setup
+  // Pagination for past events
+  const {
+    paginatedData: paginatedPastEvents,
+    loadMore: loadMorePast,
+    state: pastPaginationState
+  } = usePagination({
+    data: pastEvents,
+    pageSize: 8
+  });
+
+  // Infinite scroll setup for upcoming events
   const { loadingTriggerRef } = useInfiniteScroll({
     loadMore,
     hasMore: paginationState.hasMore,
@@ -41,6 +53,14 @@ export function HomePageClient({ featuredEvents, nonFeaturedEvents }: HomePageCl
     threshold: 300
   });
 
+  // Infinite scroll setup for past events
+  const { loadingTriggerRef: pastLoadingTriggerRef } = useInfiniteScroll({
+    loadMore: loadMorePast,
+    hasMore: pastPaginationState.hasMore,
+    isLoading: pastPaginationState.isLoading,
+    threshold: 300
+  });
+
   // Event click handler - navigate to event detail page
   const handleEventClick = (eventId: string) => {
     router.push(`/events/${eventId}`);
@@ -48,10 +68,9 @@ export function HomePageClient({ featuredEvents, nonFeaturedEvents }: HomePageCl
 
   // Category filter handler for hero pills
   const handleCategoryFilter = (category: string) => {
-    // Filter events by category and update filtered events
-    const allEvents = [...featuredEvents, ...nonFeaturedEvents];
-    const categoryFiltered = allEvents.filter(event =>
-      !event.featured && event.category && event.category.toLowerCase() === category.toLowerCase()
+    // Filter upcoming events by category
+    const categoryFiltered = upcomingEvents.filter(event =>
+      event.category && event.category.toLowerCase() === category.toLowerCase()
     );
     handleFilteredEventsChange(categoryFiltered);
 
@@ -64,7 +83,7 @@ export function HomePageClient({ featuredEvents, nonFeaturedEvents }: HomePageCl
 
   // View all events handler
   const handleViewAll = () => {
-    handleFilteredEventsChange(nonFeaturedEvents);
+    handleFilteredEventsChange(upcomingEvents);
     const upcomingSection = document.getElementById('upcoming-events');
     if (upcomingSection) {
       upcomingSection.scrollIntoView({ behavior: 'smooth' });
@@ -85,7 +104,7 @@ export function HomePageClient({ featuredEvents, nonFeaturedEvents }: HomePageCl
           {/* EventFilters Integration */}
           <div className="max-w-3xl mx-auto mb-6 sm:mb-8" data-test-id="event-filters-container">
             <EventFilters
-              events={nonFeaturedEvents}
+              events={upcomingEvents}
               onFilteredEventsChange={handleFilteredEventsChange}
               showSearch={true}
               showActiveFilters={true}
@@ -212,6 +231,56 @@ export function HomePageClient({ featuredEvents, nonFeaturedEvents }: HomePageCl
             </>
           )}
         </section>
+
+        {/* Past Events Section */}
+        {pastEvents.length > 0 && (
+          <section className="mt-12 sm:mt-16" data-test-id="past-events-section">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-4 sm:mb-6 gap-2">
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground" data-test-id="past-events-title">Past Events</h2>
+              <button
+                onClick={() => setShowPastEvents(!showPastEvents)}
+                className="text-muted-foreground hover:text-foreground font-medium text-left sm:text-right transition-colors"
+                data-test-id="toggle-past-events-button"
+              >
+                {showPastEvents ? 'Hide Past Events' : 'Show Past Events'} {showPastEvents ? '↑' : '↓'}
+              </button>
+            </div>
+
+            {showPastEvents && (
+              <>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6" data-test-id="past-events-grid">
+                  {paginatedPastEvents.map((event) => (
+                    <div key={event.id} data-test-id={`past-event-${event.id}`}>
+                      <EventCard
+                        event={event}
+                        size="md"
+                        onClick={() => handleEventClick(event.id)}
+                      />
+                    </div>
+                  ))}
+                </div>
+
+                {/* Past Events Infinite Scroll Loading Trigger */}
+                <div ref={pastLoadingTriggerRef} className="mt-6 sm:mt-8" data-test-id="past-events-loading-trigger">
+                  {pastPaginationState.isLoading && (
+                    <div data-test-id="past-events-loading-spinner">
+                      <LoadingSpinner
+                        size="md"
+                        text="Loading more past events..."
+                        className="py-6 sm:py-8"
+                      />
+                    </div>
+                  )}
+                  {!pastPaginationState.hasMore && paginatedPastEvents.length > 0 && (
+                    <div className="text-center py-6 sm:py-8 text-gray-500" data-test-id="end-of-past-events-message">
+                      <p>You&apos;ve reached the end of the past events list.</p>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </section>
+        )}
       </main>
 
       <Footer />
diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx
index 89c2920..9c076ca 100644
--- a/components/ui/Footer.tsx
+++ b/components/ui/Footer.tsx
@@ -10,10 +10,11 @@ export function Footer() {
                     <Link href="/" className="flex items-center justify-center mb-4" data-test-id="footer-logo">
                         <Image 
                             src="/logo.svg" 
-                            alt="LocalLoop" 
-                            width={96}
+                            alt="" 
+                            width={48}
                             height={48}
-                            className="w-24 h-12" 
+                            className="w-12 h-12" 
+
                         />
                         <span className="ml-2 text-xl font-bold text-foreground" data-test-id="footer-title">LocalLoop</span>
                     </Link>
diff --git a/components/ui/Navigation.tsx b/components/ui/Navigation.tsx
index 911c03a..6ffcbc3 100644
--- a/components/ui/Navigation.tsx
+++ b/components/ui/Navigation.tsx
@@ -44,7 +44,7 @@ export function Navigation({
                         <Link href="/" className="flex items-center gap-2">
                             <Image 
                                 src="/logo.svg" 
-                                alt="LocalLoop" 
+                                alt="" 
                                 width={48}
                                 height={48}
                                 className="w-12 h-12" 
@@ -75,6 +75,13 @@ export function Navigation({
                     <>
                         {/* Desktop Navigation */}
                         <nav className="hidden md:flex items-center gap-6" data-test-id="desktop-navigation">
+
+                            {(isStaff || isAdmin) && (
+                                <Link href="/staff" className="text-muted-foreground hover:text-foreground transition-colors">
+                                    Staff
+                                </Link>
+                            )}
+
                             {(isStaff || isAdmin) && (
                                 <Link
                                     href="/create-event"
@@ -85,12 +92,6 @@ export function Navigation({
                                 </Link>
                             )}
 
-                            {(isStaff || isAdmin) && (
-                                <Link href="/staff" className="text-muted-foreground hover:text-foreground transition-colors">
-                                    Staff
-                                </Link>
-                            )}
-
                             <Link
                                 href="/my-events"
                                 className="text-muted-foreground hover:text-foreground transition-colors"
@@ -162,23 +163,24 @@ export function Navigation({
                         )}
                         
                         <nav className="flex flex-col space-y-4">
+
                             {(isStaff || isAdmin) && (
                                 <Link
-                                    href="/create-event"
+                                    href="/staff"
                                     className="text-muted-foreground hover:text-foreground transition-colors py-2"
                                     onClick={() => setIsMobileMenuOpen(false)}
                                 >
-                                    Create Event
+                                    Staff
                                 </Link>
                             )}
 
                             {(isStaff || isAdmin) && (
                                 <Link
-                                    href="/staff"
+                                    href="/create-event"
                                     className="text-muted-foreground hover:text-foreground transition-colors py-2"
                                     onClick={() => setIsMobileMenuOpen(false)}
                                 >
-                                    Staff
+                                    Create Event
                                 </Link>
                             )}
 
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 8f04044..dc48cec 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <SwitchPrimitive.Root
         className={cn(
-            "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+            "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/20 data-[state=unchecked]:border-border",
             className
         )}
         {...props}