diff --git a/app/api/auth/clear/route.ts b/app/api/auth/clear/route.ts
new file mode 100644
index 0000000..983b761
--- /dev/null
+++ b/app/api/auth/clear/route.ts
@@ -0,0 +1,74 @@
+import { createServerClient } from '@supabase/ssr'
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export async function POST(request: NextRequest) {
+  try {
+    const cookieStore = await cookies()
+    
+    const supabase = createServerClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+      {
+        cookies: {
+          getAll() {
+            return cookieStore.getAll()
+          },
+          setAll(cookiesToSet) {
+            cookiesToSet.forEach(({ name, value, options }) => {
+              cookieStore.set(name, value, options)
+            })
+          },
+        },
+      }
+    )
+
+    // Sign out from Supabase
+    await supabase.auth.signOut()
+
+    // Manually clear all Supabase-related cookies
+    const allCookies = cookieStore.getAll()
+    const supabaseCookies = allCookies.filter(cookie => 
+      cookie.name.includes('sb-') || cookie.name.includes('supabase')
+    )
+
+    // Create response that clears cookies
+    const response = NextResponse.redirect(new URL('/auth/login', request.url))
+    
+    // Clear each Supabase cookie explicitly
+    supabaseCookies.forEach(cookie => {
+      response.cookies.set(cookie.name, '', {
+        expires: new Date(0),
+        path: '/',
+        domain: undefined,
+        httpOnly: false,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax'
+      })
+    })
+
+    // Also clear common Supabase cookie patterns
+    const commonCookieNames = [
+      'sb-access-token',
+      'sb-refresh-token',
+      'supabase-auth-token',
+      'supabase.auth.token'
+    ]
+
+    commonCookieNames.forEach(cookieName => {
+      response.cookies.set(cookieName, '', {
+        expires: new Date(0),
+        path: '/',
+        domain: undefined,
+        httpOnly: false,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax'
+      })
+    })
+
+    return response
+  } catch (error) {
+    console.error('Error clearing auth:', error)
+    return NextResponse.json({ error: 'Failed to clear auth' }, { status: 500 })
+  }
+}
\ No newline at end of file
diff --git a/app/auth/debug/page.tsx b/app/auth/debug/page.tsx
new file mode 100644
index 0000000..2bd93f5
--- /dev/null
+++ b/app/auth/debug/page.tsx
@@ -0,0 +1,92 @@
+import { createServerClient } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+
+export default async function AuthDebugPage() {
+  const cookieStore = await cookies()
+  
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll()
+        },
+        setAll(cookiesToSet) {
+          cookiesToSet.forEach(({ name, value, options }) => {
+            cookieStore.set(name, value, options)
+          })
+        },
+      },
+    }
+  )
+
+  const { data: { session }, error } = await supabase.auth.getSession()
+  const { data: { user } } = await supabase.auth.getUser()
+
+  const allCookies = cookieStore.getAll()
+  const supabaseCookies = allCookies.filter(cookie => 
+    cookie.name.includes('sb-') || cookie.name.includes('supabase')
+  )
+
+  return (
+    <div className="p-8">
+      <h1 className="text-2xl font-bold mb-6">Authentication Debug Information</h1>
+      
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-lg font-semibold mb-2">Server-side Session</h2>
+          <pre className="bg-gray-100 p-4 rounded overflow-auto">
+            {JSON.stringify({ session: !!session, user: !!user, error }, null, 2)}
+          </pre>
+        </div>
+
+        <div>
+          <h2 className="text-lg font-semibold mb-2">Session Details</h2>
+          <pre className="bg-gray-100 p-4 rounded overflow-auto">
+            {JSON.stringify({
+              sessionExists: !!session,
+              userExists: !!user,
+              userId: user?.id,
+              userEmail: user?.email,
+              sessionExpiry: session?.expires_at,
+              accessTokenExists: !!session?.access_token,
+              refreshTokenExists: !!session?.refresh_token,
+              errorMessage: error?.message
+            }, null, 2)}
+          </pre>
+        </div>
+
+        <div>
+          <h2 className="text-lg font-semibold mb-2">All Cookies</h2>
+          <pre className="bg-gray-100 p-4 rounded overflow-auto text-sm">
+            {JSON.stringify(allCookies.map(c => ({ name: c.name, value: c.value.substring(0, 50) + '...' })), null, 2)}
+          </pre>
+        </div>
+
+        <div>
+          <h2 className="text-lg font-semibold mb-2">Supabase Cookies</h2>
+          <pre className="bg-gray-100 p-4 rounded overflow-auto">
+            {JSON.stringify(supabaseCookies.map(c => ({ 
+              name: c.name, 
+              hasValue: !!c.value,
+              valueLength: c.value.length
+            })), null, 2)}
+          </pre>
+        </div>
+
+        <div>
+          <h2 className="text-lg font-semibold mb-2">Clear Auth Action</h2>
+          <form action="/api/auth/clear" method="POST">
+            <button 
+              type="submit"
+              className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
+            >
+              Clear All Auth Cookies
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
index d7ecdae..b0ffa88 100644
--- a/app/auth/login/page.tsx
+++ b/app/auth/login/page.tsx
@@ -18,6 +18,7 @@ export default function LoginPage() {
         signIn,
         signInWithGoogle,
         signInWithApple,
+        clearStaleAuthData,
         isGoogleAuthEnabled,
         isAppleAuthEnabled
     } = useAuth()
@@ -98,9 +99,20 @@ export default function LoginPage() {
         }
     }
 
+    const handleClearAuthData = async () => {
+        try {
+            await clearStaleAuthData()
+            setError('')
+            // Optionally refresh the page to ensure clean state
+            window.location.reload()
+        } catch (error: unknown) {
+            setError(error instanceof Error ? error.message : 'Failed to clear auth data')
+        }
+    }
+
     return (
-        <div className="min-h-screen flex items-center justify-center bg-background">
-            <div className="max-w-md w-full space-y-8">
+        <div className="min-h-screen flex items-center justify-center bg-background px-4 sm:px-6 lg:px-8">
+            <div className="max-w-md w-full space-y-8 p-6 sm:p-8 border border-border rounded-lg shadow-sm bg-card">
                 <div>
                     <h2 className="mt-6 text-center text-3xl font-extrabold text-foreground">
                         Sign in to LocalLoop
@@ -113,21 +125,21 @@ export default function LoginPage() {
                     </p>
                 </div>
 
-                <form className="mt-8 space-y-6" onSubmit={handleEmailLogin}>
+                <form className="mt-6 space-y-6" onSubmit={handleEmailLogin}>
                     {error && (
-                        <div className="bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded">
+                        <div className="bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-md">
                             {error}
                         </div>
                     )}
 
-                    <div className="rounded-md shadow-sm -space-y-px">
+                    <div className="space-y-4">
                         <div>
                             <input
                                 type="email"
                                 required
                                 value={email}
                                 onChange={(e) => setEmail(e.target.value)}
-                                className="relative block w-full px-3 py-2 border border-border placeholder-muted-foreground text-foreground bg-background rounded-t-md focus:outline-none focus:ring-primary focus:border-primary"
+                                className="block w-full px-4 py-3 border border-border placeholder-muted-foreground text-foreground bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-base"
                                 placeholder="Email address"
                             />
                         </div>
@@ -137,7 +149,7 @@ export default function LoginPage() {
                                 required
                                 value={password}
                                 onChange={(e) => setPassword(e.target.value)}
-                                className="relative block w-full px-3 py-2 border border-border placeholder-muted-foreground text-foreground bg-background rounded-b-md focus:outline-none focus:ring-primary focus:border-primary"
+                                className="block w-full px-4 py-3 border border-border placeholder-muted-foreground text-foreground bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-base"
                                 placeholder="Password"
                             />
                         </div>
@@ -153,7 +165,7 @@ export default function LoginPage() {
                         <button
                             type="submit"
                             disabled={loading}
-                            className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50"
+                            className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 min-h-[44px]"
                         >
                             {loading ? 'Signing in...' : 'Sign in'}
                         </button>
@@ -169,13 +181,13 @@ export default function LoginPage() {
                             </div>
                         </div>
 
-                        <div className="mt-6 grid grid-cols-2 gap-3">
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                             {/* Google Auth Button */}
                             <button
                                 onClick={handleGoogleLogin}
                                 type="button"
                                 disabled={!isGoogleAuthEnabled}
-                                className={`w-full inline-flex justify-center py-2 px-4 border rounded-md shadow-sm text-sm font-medium transition-colors ${isGoogleAuthEnabled
+                                className={`w-full inline-flex justify-center py-3 px-4 border rounded-md shadow-sm text-base font-medium transition-colors min-h-[44px] ${isGoogleAuthEnabled
                                     ? 'border-border bg-background text-muted-foreground hover:bg-accent'
                                     : 'border-border bg-muted text-muted-foreground cursor-not-allowed'
                                     }`}
@@ -188,7 +200,7 @@ export default function LoginPage() {
                                 onClick={handleAppleLogin}
                                 type="button"
                                 disabled={!isAppleAuthEnabled}
-                                className={`w-full inline-flex justify-center items-center py-2 px-4 border rounded-md shadow-sm text-sm font-medium transition-colors ${isAppleAuthEnabled
+                                className={`w-full inline-flex justify-center items-center py-3 px-4 border rounded-md shadow-sm text-base font-medium transition-colors min-h-[44px] ${isAppleAuthEnabled
                                     ? 'border-border bg-background text-muted-foreground hover:bg-accent'
                                     : 'border-border bg-muted text-muted-foreground cursor-not-allowed relative'
                                     }`}
@@ -211,6 +223,17 @@ export default function LoginPage() {
                         )}
                     </div>
                 </form>
+
+                {/* Debug: Clear stale auth data button */}
+                <div className="mt-6 pt-4 border-t border-border">
+                    <button
+                        onClick={handleClearAuthData}
+                        type="button"
+                        className="w-full text-xs text-muted-foreground hover:text-foreground underline decoration-dotted underline-offset-4 transition-colors"
+                    >
+                        Having login issues? Clear authentication data
+                    </button>
+                </div>
             </div>
         </div>
     )
diff --git a/app/auth/signup/page.tsx b/app/auth/signup/page.tsx
index bb2b7d8..dbc6b5a 100644
--- a/app/auth/signup/page.tsx
+++ b/app/auth/signup/page.tsx
@@ -63,8 +63,8 @@ export default function SignupPage() {
     }
 
     return (
-        <div className="min-h-screen flex items-center justify-center bg-background">
-            <div className="max-w-md w-full space-y-8">
+        <div className="min-h-screen flex items-center justify-center bg-background px-4 sm:px-6 lg:px-8">
+            <div className="max-w-md w-full space-y-8 p-6 sm:p-8 border border-border rounded-lg shadow-sm bg-card">
                 <div>
                     <h2 className="mt-6 text-center text-3xl font-extrabold text-foreground">
                         Create your LocalLoop account
@@ -77,21 +77,21 @@ export default function SignupPage() {
                     </p>
                 </div>
 
-                <form className="mt-8 space-y-6" onSubmit={handleEmailSignup}>
+                <form className="mt-6 space-y-6" onSubmit={handleEmailSignup}>
                     {error && (
-                        <div className="bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded">
+                        <div className="bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-md">
                             {error}
                         </div>
                     )}
 
-                    <div className="rounded-md shadow-sm -space-y-px">
+                    <div className="space-y-4">
                         <div>
                             <input
                                 type="email"
                                 required
                                 value={email}
                                 onChange={(e) => setEmail(e.target.value)}
-                                className="relative block w-full px-3 py-2 border border-border placeholder-muted-foreground text-foreground bg-background rounded-t-md focus:outline-none focus:ring-primary focus:border-primary"
+                                className="block w-full px-4 py-3 border border-border placeholder-muted-foreground text-foreground bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-base"
                                 placeholder="Email address"
                             />
                         </div>
@@ -101,7 +101,7 @@ export default function SignupPage() {
                                 required
                                 value={password}
                                 onChange={(e) => setPassword(e.target.value)}
-                                className="relative block w-full px-3 py-2 border border-border placeholder-muted-foreground text-foreground bg-background rounded-b-md focus:outline-none focus:ring-primary focus:border-primary"
+                                className="block w-full px-4 py-3 border border-border placeholder-muted-foreground text-foreground bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-base"
                                 placeholder="Password"
                             />
                         </div>
@@ -111,7 +111,7 @@ export default function SignupPage() {
                         <button
                             type="submit"
                             disabled={loading}
-                            className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50"
+                            className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 min-h-[44px]"
                         >
                             {loading ? 'Creating account...' : 'Create account'}
                         </button>
@@ -127,13 +127,13 @@ export default function SignupPage() {
                             </div>
                         </div>
 
-                        <div className="mt-6 grid grid-cols-2 gap-3">
+                        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
                             {/* Google Auth Button */}
                             <button
                                 onClick={handleGoogleLogin}
                                 type="button"
                                 disabled={!isGoogleAuthEnabled}
-                                className={`w-full inline-flex justify-center py-2 px-4 border rounded-md shadow-sm text-sm font-medium transition-colors ${isGoogleAuthEnabled
+                                className={`w-full inline-flex justify-center py-3 px-4 border rounded-md shadow-sm text-base font-medium transition-colors min-h-[44px] ${isGoogleAuthEnabled
                                     ? 'border-border bg-background text-muted-foreground hover:bg-accent'
                                     : 'border-border bg-muted text-muted-foreground cursor-not-allowed'
                                     }`}
@@ -146,7 +146,7 @@ export default function SignupPage() {
                                 onClick={handleAppleLogin}
                                 type="button"
                                 disabled={!isAppleAuthEnabled}
-                                className={`w-full inline-flex justify-center items-center py-2 px-4 border rounded-md shadow-sm text-sm font-medium transition-colors ${isAppleAuthEnabled
+                                className={`w-full inline-flex justify-center items-center py-3 px-4 border rounded-md shadow-sm text-base font-medium transition-colors min-h-[44px] ${isAppleAuthEnabled
                                     ? 'border-border bg-background text-muted-foreground hover:bg-accent'
                                     : 'border-border bg-muted text-muted-foreground cursor-not-allowed relative'
                                     }`}
diff --git a/components/GoogleCalendarConnect.tsx b/components/GoogleCalendarConnect.tsx
index 35e807f..002343a 100644
--- a/components/GoogleCalendarConnect.tsx
+++ b/components/GoogleCalendarConnect.tsx
@@ -111,8 +111,6 @@ export interface GoogleCalendarConnectProps {
     returnUrl?: string
     /** Additional CSS classes */
     className?: string
-    /** Callback when connection status changes */
-    onStatusChange?: (connected: boolean) => void
     eventData?: EventData // Add eventData prop for passing event information
 }
 
@@ -121,7 +119,6 @@ export default function GoogleCalendarConnect({
     action = 'connect',
     returnUrl,
     className = '',
-    onStatusChange,  
     eventData
 }: GoogleCalendarConnectProps) {
     // const router = useRouter() // Will be used in disconnect functionality later
@@ -154,35 +151,36 @@ export default function GoogleCalendarConnect({
         }
     }
 
-    const handleDisconnect = async () => {
-        try {
-            setIsLoading(true)
-
-            const response = await fetch('/api/auth/google/disconnect', {
-                method: 'POST',
-                credentials: 'include',
-                headers: {
-                    'Content-Type': 'application/json',
-                }
-            })
-
-            if (response.ok) {
-                setLocalConnected(false)
-                onStatusChange?.(false)
-                alert('Google Calendar disconnected successfully!')
-            } else {
-                const error = await response.json()
-                console.error('Failed to disconnect Google Calendar:', error)
-                alert(`Failed to disconnect: ${error.error || 'Unknown error'}`)
-            }
-
-        } catch (error) {
-            console.error('Error disconnecting Google Calendar:', error)
-            alert('An error occurred while disconnecting. Please try again.')
-        } finally {
-            setIsLoading(false)
-        }
-    }
+    // Note: handleDisconnect moved to ProfileDropdown component
+    // const handleDisconnect = async () => {
+    //     try {
+    //         setIsLoading(true)
+
+    //         const response = await fetch('/api/auth/google/disconnect', {
+    //             method: 'POST',
+    //             credentials: 'include',
+    //             headers: {
+    //                 'Content-Type': 'application/json',
+    //             }
+    //         })
+
+    //         if (response.ok) {
+    //             setLocalConnected(false)
+    //             onStatusChange?.(false)
+    //             alert('Google Calendar disconnected successfully!')
+    //         } else {
+    //             const error = await response.json()
+    //             console.error('Failed to disconnect Google Calendar:', error)
+    //             alert(`Failed to disconnect: ${error.error || 'Unknown error'}`)
+    //         }
+
+    //     } catch (error) {
+    //         console.error('Error disconnecting Google Calendar:', error)
+    //         alert('An error occurred while disconnecting. Please try again.')
+    //     } finally {
+    //         setIsLoading(false)
+    //     }
+    // }
 
     const getActionText = () => {
         switch (action) {
@@ -212,7 +210,7 @@ export default function GoogleCalendarConnect({
     }
 
     return (
-        <div className={`p-4 border rounded-lg ${className}`}>
+        <div className={`p-4 sm:p-6 border border-border rounded-lg bg-card shadow-sm ${className}`}>
             {/* Success/Error Messages */}
             {callbackMessage && (
                 <div className={`mb-4 p-3 rounded-md ${callbackMessage.type === 'success'
@@ -221,40 +219,42 @@ export default function GoogleCalendarConnect({
                     }`}>
                     <div className="flex">
                         {callbackMessage.type === 'success' ? (
-                            <CheckCircle className="w-4 h-4 mr-2 mt-0.5" />
+                            <CheckCircle className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                         ) : (
-                            <AlertCircle className="w-4 h-4 mr-2 mt-0.5" />
+                            <AlertCircle className="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" />
                         )}
                         <span className="text-sm">{callbackMessage.message}</span>
                     </div>
                 </div>
             )}
 
-            <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-3">
+            {/* Header Section */}
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                <div className="space-y-2">
                     <div className="flex items-center space-x-2">
-                        <Calendar className="w-5 h-5 text-blue-600" />
+                        <Calendar className="w-5 h-5 text-blue-600 flex-shrink-0" />
                         <span className="font-medium text-gray-900">Google Calendar</span>
                     </div>
 
-                    <div className="flex items-center space-x-1">
+                    <div className="flex items-center space-x-2">
                         {localConnected ? (
                             <>
-                                <CheckCircle className="w-4 h-4 text-green-600" />
+                                <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
                                 <span className="text-sm text-green-600">{getStatusText()}</span>
                             </>
                         ) : (
                             <>
-                                <AlertCircle className="w-4 h-4 text-amber-500" />
+                                <AlertCircle className="w-4 h-4 text-amber-500 flex-shrink-0" />
                                 <span className="text-sm text-gray-500">{getStatusText()}</span>
                             </>
                         )}
                     </div>
                 </div>
 
-                <div className="flex items-center space-x-2 flex-shrink-0">
+                {/* Action Buttons */}
+                <div className="flex justify-center sm:justify-end">
                     {localConnected ? (
-                        <div className="flex items-center space-x-2 flex-wrap gap-2">
+                        <>
                             {action === 'create_event' && (
                                 <button
                                     onClick={async () => {
@@ -269,7 +269,7 @@ export default function GoogleCalendarConnect({
                                                 headers: {
                                                     'Content-Type': 'application/json',
                                                 },
-                                                credentials: 'include', // Important: include cookies for Supabase session
+                                                credentials: 'include',
                                                 body: JSON.stringify({
                                                     eventData: {
                                                         id: eventData.id,
@@ -301,40 +301,23 @@ export default function GoogleCalendarConnect({
                                             alert('An error occurred while adding the event to your calendar. Please try again.')
                                         }
                                     }}
-                                    className="flex items-center space-x-2 px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors text-sm whitespace-nowrap"
+                                    className="flex items-center justify-center space-x-2 px-4 py-2.5 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors text-sm font-medium min-h-[44px]"
                                 >
                                     <Calendar className="w-4 h-4 flex-shrink-0" />
-                                    <span className="hidden sm:inline">Add to Calendar</span>
-                                    <span className="sm:hidden">Add</span>
+                                    <span>Add to Calendar</span>
                                 </button>
                             )}
-                            <button
-                                onClick={handleDisconnect}
-                                disabled={isLoading}
-                                className="px-3 py-1.5 text-sm border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors whitespace-nowrap"
-                            >
-                                {isLoading ? (
-                                    <div className="flex items-center space-x-1">
-                                        <Loader2 className="w-3 h-3 animate-spin flex-shrink-0" />
-                                        <span className="hidden sm:inline">Disconnecting...</span>
-                                        <span className="sm:hidden">...</span>
-                                    </div>
-                                ) : (
-                                    'Disconnect'
-                                )}
-                            </button>
-                        </div>
+                        </>
                     ) : (
                         <button
                             onClick={handleConnect}
                             disabled={isLoading}
-                            className="px-4 py-2 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors whitespace-nowrap"
+                            className="flex items-center justify-center px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors min-h-[44px]"
                         >
                             {isLoading ? (
-                                <div className="flex items-center space-x-1">
-                                    <Loader2 className="w-3 h-3 animate-spin flex-shrink-0" />
-                                    <span className="hidden sm:inline">{getActionText().replace('Connect', 'Connecting...')}</span>
-                                    <span className="sm:hidden">...</span>
+                                <div className="flex items-center space-x-2">
+                                    <Loader2 className="w-4 h-4 animate-spin flex-shrink-0" />
+                                    <span>{getActionText().replace('Connect', 'Connecting...')}</span>
                                 </div>
                             ) : (
                                 getActionText()
@@ -346,19 +329,19 @@ export default function GoogleCalendarConnect({
 
             {/* Additional context based on action */}
             {action === 'create_event' && !localConnected && (
-                <p className="mt-2 text-xs text-gray-500">
+                <p className="mt-4 text-sm text-gray-600 text-center">
                     Connect your Google Calendar to add this event directly to your calendar
                 </p>
             )}
 
             {action === 'sync' && (
-                <p className="mt-2 text-xs text-gray-500">
+                <p className="mt-4 text-sm text-gray-600 text-center">
                     Synchronizes your LocalLoop events with your Google Calendar
                 </p>
             )}
 
             {action === 'connect' && (
-                <p className="mt-2 text-xs text-gray-500">
+                <p className="mt-4 text-sm text-gray-600 text-center">
                     Connect your Google Calendar to enable event management and one-click calendar additions
                 </p>
             )}
@@ -373,7 +356,6 @@ export function GoogleCalendarConnectWithStatus({
     action = 'connect',
     returnUrl,
     className = '',
-    onStatusChange,
     eventData
 }: Omit<GoogleCalendarConnectProps, 'isConnected'>) {
     const { isConnected, isLoading, refresh } = useGoogleCalendarStatus()
@@ -391,9 +373,9 @@ export function GoogleCalendarConnectWithStatus({
 
     if (isLoading) {
         return (
-            <div className={`p-4 border rounded-lg ${className}`}>
-                <div className="flex items-center space-x-2">
-                    <Loader2 className="w-4 h-4 animate-spin" />
+            <div className={`p-4 sm:p-6 border border-border rounded-lg bg-card shadow-sm ${className}`}>
+                <div className="flex items-center justify-center space-x-2">
+                    <Loader2 className="w-4 h-4 animate-spin flex-shrink-0" />
                     <span className="text-sm text-gray-500">Checking Google Calendar connection...</span>
                 </div>
             </div>
@@ -406,7 +388,6 @@ export function GoogleCalendarConnectWithStatus({
             action={action}
             returnUrl={returnUrl}
             className={className}
-            onStatusChange={onStatusChange}
             eventData={eventData}
         />
     )
diff --git a/components/auth/ProfileDropdown.tsx b/components/auth/ProfileDropdown.tsx
index 7ba52ba..953cc0a 100644
--- a/components/auth/ProfileDropdown.tsx
+++ b/components/auth/ProfileDropdown.tsx
@@ -1,13 +1,16 @@
 'use client'
 
 import { useState, useRef, useEffect } from 'react'
-import { User, LogOut, ChevronDown, Settings, Calendar, BarChart3 } from 'lucide-react'
+import { User, LogOut, ChevronDown, Settings, Calendar, BarChart3, CheckCircle, AlertCircle, Loader2 } from 'lucide-react'
 import { useAuth } from '@/lib/auth-context'
 import { useAuth as useAuthHook } from '@/lib/hooks/useAuth'
 import Link from 'next/link'
 
 export function ProfileDropdown() {
   const [isOpen, setIsOpen] = useState(false)
+  const [calendarConnected, setCalendarConnected] = useState(false)
+  const [calendarLoading, setCalendarLoading] = useState(false)
+  const [calendarCheckLoading, setCalendarCheckLoading] = useState(true)
   const dropdownRef = useRef<HTMLDivElement>(null)
   const { user, signOut } = useAuth()
   const { user: userProfile, isStaff, isAdmin } = useAuthHook()
@@ -21,6 +24,84 @@ export function ProfileDropdown() {
       'User'
   }
 
+  // Check Google Calendar connection status
+  const checkCalendarStatus = async () => {
+    try {
+      setCalendarCheckLoading(true)
+      const response = await fetch('/api/auth/google/status', {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        setCalendarConnected(data.connected || false)
+      } else {
+        setCalendarConnected(false)
+      }
+    } catch (error) {
+      console.error('Error checking Google Calendar status:', error)
+      setCalendarConnected(false)
+    } finally {
+      setCalendarCheckLoading(false)
+    }
+  }
+
+  // Handle Google Calendar connect
+  const handleCalendarConnect = async () => {
+    try {
+      setCalendarLoading(true)
+      
+      // Build OAuth initiation URL
+      const params = new URLSearchParams({
+        action: 'connect',
+        returnUrl: window.location.pathname
+      })
+
+      // Redirect to OAuth initiation endpoint
+      const connectUrl = `/api/auth/google/connect?${params.toString()}`
+      window.location.href = connectUrl
+
+    } catch (error) {
+      console.error('Error initiating Google Calendar connection:', error)
+      setCalendarLoading(false)
+    }
+  }
+
+  // Handle Google Calendar disconnect
+  const handleCalendarDisconnect = async () => {
+    try {
+      setCalendarLoading(true)
+
+      const response = await fetch('/api/auth/google/disconnect', {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        }
+      })
+
+      if (response.ok) {
+        setCalendarConnected(false)
+        // Show success feedback
+        alert('Google Calendar disconnected successfully!')
+      } else {
+        const error = await response.json()
+        console.error('Failed to disconnect Google Calendar:', error)
+        alert(`Failed to disconnect: ${error.error || 'Unknown error'}`)
+      }
+
+    } catch (error) {
+      console.error('Error disconnecting Google Calendar:', error)
+      alert('An error occurred while disconnecting. Please try again.')
+    } finally {
+      setCalendarLoading(false)
+    }
+  }
+
   // Handle sign out
   const handleSignOut = async () => {
     try {
@@ -42,6 +123,13 @@ export function ProfileDropdown() {
     }
   }
 
+  // Check calendar status on mount
+  useEffect(() => {
+    if (user) {
+      checkCalendarStatus()
+    }
+  }, [user])
+
   // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -105,6 +193,48 @@ export function ProfileDropdown() {
 
           <div className="border-t border-border my-1" />
 
+          {/* Google Calendar Connection */}
+          <div className="px-4 py-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Calendar className="w-4 h-4 text-muted-foreground" />
+                <span className="text-sm text-foreground">Google Calendar</span>
+              </div>
+              
+              {calendarCheckLoading ? (
+                <Loader2 className="w-3 h-3 animate-spin text-muted-foreground" />
+              ) : (
+                <div className="flex items-center gap-2">
+                  {calendarConnected ? (
+                    <>
+                      <CheckCircle className="w-3 h-3 text-green-600" />
+                      <button
+                        onClick={handleCalendarDisconnect}
+                        disabled={calendarLoading}
+                        className="text-xs text-red-600 hover:text-red-700 disabled:opacity-50"
+                      >
+                        {calendarLoading ? 'Disconnecting...' : 'Disconnect'}
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <AlertCircle className="w-3 h-3 text-amber-500" />
+                      <button
+                        onClick={handleCalendarConnect}
+                        disabled={calendarLoading}
+                        className="text-xs text-blue-600 hover:text-blue-700 disabled:opacity-50"
+                      >
+                        {calendarLoading ? 'Connecting...' : 'Connect'}
+                      </button>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="border-t border-border my-1" />
+
           <button
             onClick={handleSignOut}
             className="w-full flex items-center gap-2 px-4 py-2 text-sm text-foreground hover:bg-accent transition-colors"
diff --git a/components/checkout/GoogleCalendarAddButton.tsx b/components/checkout/GoogleCalendarAddButton.tsx
index 077679c..ff0b24f 100644
--- a/components/checkout/GoogleCalendarAddButton.tsx
+++ b/components/checkout/GoogleCalendarAddButton.tsx
@@ -18,9 +18,12 @@ export default function GoogleCalendarAddButton({
     className = ''
 }: GoogleCalendarAddButtonProps) {
     return (
-        <div className={`space-y-3 ${className}`}>
-            <div className="text-sm text-gray-600 text-center mb-4">
-                Add this event to your Google Calendar for easy access
+        <div className={`w-full max-w-md mx-auto ${className}`}>
+            <div className="text-center mb-4">
+                <h3 className="text-lg font-medium text-gray-900 mb-2">Add to Calendar</h3>
+                <p className="text-sm text-gray-600">
+                    Add this event to your Google Calendar for easy access
+                </p>
             </div>
             <GoogleCalendarConnectWithStatus
                 action="create_event"
@@ -36,6 +39,7 @@ export default function GoogleCalendarAddButton({
                     rsvp_count: 0,
                     organizer: { display_name: 'Event Organizer' }
                 }}
+                className="w-full"
             />
         </div>
     )
diff --git a/components/dashboard/AttendeeManagement.tsx b/components/dashboard/AttendeeManagement.tsx
index cac0b40..93c9b94 100644
--- a/components/dashboard/AttendeeManagement.tsx
+++ b/components/dashboard/AttendeeManagement.tsx
@@ -32,6 +32,7 @@ import {
     Mail,
 } from 'lucide-react'
 import { format } from 'date-fns'
+import { formatPrice } from '@/lib/utils/ticket-utils'
 
 interface Attendee {
     id: string
@@ -353,7 +354,7 @@ export default function AttendeeManagement() {
                         <CardContent>
                             <div className="text-2xl font-bold">{summary.ticketHolders}</div>
                             <p className="text-xs text-muted-foreground">
-                                ${(summary.totalRevenue / 100).toFixed(2)} revenue
+                                {formatPrice(summary.totalRevenue)} revenue
                             </p>
                         </CardContent>
                     </Card>
@@ -554,7 +555,7 @@ export default function AttendeeManagement() {
                                             <div className="text-xs text-muted-foreground mt-1">
                                                 {attendee.ticketType}
                                                 {attendee.ticketPrice > 0 && (
-                                                    <span> • ${(attendee.ticketPrice / 100).toFixed(2)}</span>
+                                                    <span> • {formatPrice(attendee.ticketPrice)}</span>
                                                 )}
                                             </div>
                                         </TableCell>
diff --git a/components/dashboard/RefundDialog.tsx b/components/dashboard/RefundDialog.tsx
index 357cb08..2a83331 100644
--- a/components/dashboard/RefundDialog.tsx
+++ b/components/dashboard/RefundDialog.tsx
@@ -21,7 +21,7 @@ import {
     Ticket,
     CheckCircle2
 } from 'lucide-react'
-import { calculateRefundAmount } from '@/lib/utils/ticket-utils'
+import { calculateRefundAmount, formatPrice } from '@/lib/utils/ticket-utils'
 
 interface OrderTicket {
     id: string
@@ -189,13 +189,13 @@ export default function RefundDialog({
                                                 {ticket.ticket_type.name}
                                             </div>
                                             <div className="text-sm text-muted-foreground">
-                                                Quantity: {ticket.quantity} • ${ticket.ticket_type.price.toFixed(2)} each
+                                                Quantity: {ticket.quantity} • {formatPrice(ticket.ticket_type.price)} each
                                             </div>
                                         </div>
                                     </div>
                                     <div className="text-right">
                                         <div className="font-medium text-foreground">
-                                            ${(ticket.ticket_type.price * ticket.quantity).toFixed(2)}
+                                            {formatPrice(ticket.ticket_type.price * ticket.quantity)}
                                         </div>
                                     </div>
                                 </div>
@@ -209,17 +209,17 @@ export default function RefundDialog({
                         <div className="space-y-2 text-sm">
                             <div className="flex justify-between">
                                 <span className="text-gray-600">Original Amount:</span>
-                                <span className="font-medium">${order.total_amount.toFixed(2)}</span>
+                                <span className="font-medium">{formatPrice(order.total_amount)}</span>
                             </div>
                             {!isEventCancelled && (
                                 <div className="flex justify-between">
                                     <span className="text-gray-600">Processing Fee:</span>
-                                    <span className="font-medium text-red-600">-${refundCalculation.stripeFee.toFixed(2)}</span>
+                                    <span className="font-medium text-red-600">-{formatPrice(refundCalculation.stripeFee)}</span>
                                 </div>
                             )}
                             <div className="border-t pt-2 flex justify-between font-semibold">
                                 <span>Refund Amount:</span>
-                                <span className="text-green-600">${refundCalculation.netRefund.toFixed(2)}</span>
+                                <span className="text-green-600">{formatPrice(refundCalculation.netRefund)}</span>
                             </div>
                         </div>
                     </div>
@@ -270,7 +270,7 @@ export default function RefundDialog({
                                 <div className="text-sm">
                                     <div className="font-medium text-red-800 mb-1">Confirm Refund</div>
                                     <div className="text-red-700">
-                                        This action cannot be undone. Your refund of ${refundCalculation.netRefund.toFixed(2)} will be processed immediately.
+                                        This action cannot be undone. Your refund of {formatPrice(refundCalculation.netRefund)} will be processed immediately.
                                     </div>
                                 </div>
                             </div>
diff --git a/components/events/EventCard.tsx b/components/events/EventCard.tsx
index 61f4517..c5332ae 100644
--- a/components/events/EventCard.tsx
+++ b/components/events/EventCard.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import Image from 'next/image';
 import { Calendar, MapPin, Users, Clock, Tag, ExternalLink, ImageIcon } from 'lucide-react';
 import { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription } from '@/components/ui';
-import { formatDateTime, formatPrice, truncateText } from '@/lib/utils';
+import { formatDateTime, formatPrice, truncateText, getEventCardDescription, formatLocationForCard } from '@/lib/utils';
 
 // Event interface (simplified from database types)
 export interface EventData {
@@ -188,7 +188,7 @@ function DefaultCard({ event, size, featured, showImage, className, onClick, spo
 
             <CardHeader>
                 <div className="flex items-start justify-between">
-                    <CardTitle as={featured ? 'h2' : 'h3'} className={featured ? 'text-lg' : 'text-base'}>
+                    <CardTitle as={featured ? 'h2' : 'h3'} className={`${featured ? 'text-lg' : 'text-base'} line-clamp-2 min-h-[3rem] leading-relaxed pr-2`}>
                         {event.title}
                     </CardTitle>
                     <div className="flex gap-2">
@@ -204,8 +204,8 @@ function DefaultCard({ event, size, featured, showImage, className, onClick, spo
                         )}
                     </div>
                 </div>
-                <CardDescription>
-                    {event.short_description || truncateText(event.description || '', 100)}
+                <CardDescription className="min-h-[3rem] line-clamp-2 text-sm leading-relaxed">
+                    {getEventCardDescription(event.description, event.short_description)}
                 </CardDescription>
             </CardHeader>
 
@@ -218,7 +218,7 @@ function DefaultCard({ event, size, featured, showImage, className, onClick, spo
 
                     <div className="flex items-center gap-2 text-muted-foreground">
                         <MapPin className="w-4 h-4 flex-shrink-0" />
-                        <span>{event.location || 'Location TBD'}</span>
+                        <span className="line-clamp-2">{formatLocationForCard(event.location)}</span>
                     </div>
 
                     <div className="flex items-center gap-2 text-muted-foreground">
@@ -274,7 +274,7 @@ function PreviewListCard({ event, className, onClick, isUpcoming, hasPrice, lowe
 
                 <div className="flex-1 min-w-0">
                     <div className="flex items-start justify-between mb-2">
-                        <h3 className="font-semibold text-base text-foreground truncate pr-2">
+                        <h3 className="font-semibold text-base text-foreground line-clamp-2 min-h-[3rem] leading-relaxed pr-2">
                             {event.title}
                         </h3>
                         <div className="flex gap-1 flex-shrink-0">
@@ -291,8 +291,8 @@ function PreviewListCard({ event, className, onClick, isUpcoming, hasPrice, lowe
                         </div>
                     </div>
 
-                    <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
-                        {event.short_description || truncateText(event.description || '', 120)}
+                    <p className="text-sm text-muted-foreground mb-3 line-clamp-2 min-h-[2.5rem] leading-relaxed">
+                        {getEventCardDescription(event.description, event.short_description)}
                     </p>
 
                     <div className="flex items-center gap-4 text-xs text-muted-foreground">
@@ -302,7 +302,7 @@ function PreviewListCard({ event, className, onClick, isUpcoming, hasPrice, lowe
                         </span>
                         <span className="flex items-center gap-1">
                             <MapPin className="w-3 h-3" />
-                            {truncateText(event.location || 'Location TBD', 25)}
+                            {truncateText(formatLocationForCard(event.location), 25)}
                         </span>
                         <span className="flex items-center gap-1">
                             <Users className="w-3 h-3" />
@@ -362,8 +362,8 @@ function FullListCard({ event, className, onClick, spotsRemaining, isUpcoming, h
                         )}
                     </div>
                 </div>
-                <CardDescription className="text-base">
-                    {event.short_description || truncateText(event.description || '', 120)}
+                <CardDescription className="text-base line-clamp-2 min-h-[3rem] leading-relaxed">
+                    {getEventCardDescription(event.description, event.short_description)}
                 </CardDescription>
             </CardHeader>
 
@@ -383,7 +383,7 @@ function FullListCard({ event, className, onClick, spotsRemaining, isUpcoming, h
                         <div className="flex items-center gap-3 text-foreground">
                             <MapPin className="w-5 h-5 flex-shrink-0 text-blue-600" />
                             <div>
-                                <div className="font-medium">{event.location || 'Location TBD'}</div>
+                                <div className="font-medium">{formatLocationForCard(event.location)}</div>
                                 <div className="text-muted-foreground">View on map</div>
                             </div>
                         </div>
@@ -449,7 +449,7 @@ function CompactCard({ event, className, onClick, hasPrice, lowestPrice }: CardC
                     <div className="flex items-center gap-3 text-xs text-muted-foreground mt-1">
                         <span>{new Date(event.start_time).toLocaleDateString()}</span>
                         <span>•</span>
-                        <span>{truncateText(event.location || 'Location TBD', 20)}</span>
+                        <span>{truncateText(formatLocationForCard(event.location), 20)}</span>
                         <span>•</span>
                         <span>{event.rsvp_count} attending</span>
                     </div>
@@ -489,7 +489,7 @@ function TimelineCard({ event, className, onClick, hasPrice, lowestPrice }: Card
                 {/* Event Details */}
                 <div className="flex-1 min-w-0">
                     <div className="flex items-start justify-between mb-2">
-                        <h3 className="font-semibold text-base text-foreground group-hover:text-blue-600 transition-colors">
+                        <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 && (
@@ -499,8 +499,8 @@ function TimelineCard({ event, className, onClick, hasPrice, lowestPrice }: Card
                         )}
                     </div>
 
-                    <p className="text-sm text-gray-600 mb-2 line-clamp-2">
-                        {event.short_description || truncateText(event.description || '', 80)}
+                    <p className="text-sm text-gray-600 mb-2 line-clamp-2 min-h-[2.5rem] leading-relaxed">
+                        {getEventCardDescription(event.description, event.short_description, 80)}
                     </p>
 
                     <div className="flex items-center gap-4 text-xs text-gray-500">
@@ -510,7 +510,7 @@ function TimelineCard({ event, className, onClick, hasPrice, lowestPrice }: Card
                         </span>
                         <span className="flex items-center gap-1">
                             <MapPin className="w-3 h-3" />
-                            {truncateText(event.location || 'Location TBD', 25)}
+                            {truncateText(formatLocationForCard(event.location), 25)}
                         </span>
                         <span className="flex items-center gap-1">
                             <Users className="w-3 h-3" />
diff --git a/components/events/EventForm.tsx b/components/events/EventForm.tsx
index 40f7520..de843d7 100644
--- a/components/events/EventForm.tsx
+++ b/components/events/EventForm.tsx
@@ -439,6 +439,22 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                                 {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">
+                                        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
+                                    </p>
+                                </div>
+                                {formData.title.length > 60 && (
+                                    <p className="text-orange-600 text-sm mt-1">
+                                        Consider shortening your title for better display in event cards and search results
+                                    </p>
+                                )}
                             </div>
 
                             <div>
@@ -482,9 +498,22 @@ export default function EventForm({ eventId, isEdit = false, onSuccess, onCancel
                                     onChange={(e) => handleInputChange('short_description', e.target.value)}
                                     placeholder="Brief one-line description (optional)"
                                 />
-                                <p className="text-gray-500 text-sm mt-1">
-                                    This appears in event listings and search results
-                                </p>
+                                <div className="flex justify-between items-center mt-1">
+                                    <p className="text-gray-500 text-sm">
+                                        This appears in event listings and search results
+                                    </p>
+                                    <p className={cn(
+                                        "text-sm",
+                                        formData.short_description.length > 120 ? "text-orange-600 font-medium" : "text-gray-400"
+                                    )}>
+                                        {formData.short_description.length}/120
+                                    </p>
+                                </div>
+                                {formData.short_description.length > 120 && (
+                                    <p className="text-orange-600 text-sm mt-1">
+                                        Consider shortening your description - it may be truncated in event listings
+                                    </p>
+                                )}
                             </div>
 
                             <div className="md:col-span-2">
diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx
index c985aba..89c2920 100644
--- a/components/ui/Footer.tsx
+++ b/components/ui/Footer.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 export function Footer() {
     return (
@@ -7,11 +8,14 @@ export function Footer() {
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                 <div className="text-center">
                     <Link href="/" className="flex items-center justify-center mb-4" data-test-id="footer-logo">
-                        <img 
+                        <Image 
                             src="/logo.svg" 
                             alt="LocalLoop" 
+                            width={96}
+                            height={48}
                             className="w-24 h-12" 
                         />
+                        <span className="ml-2 text-xl font-bold text-foreground" data-test-id="footer-title">LocalLoop</span>
                     </Link>
                     <p className="text-muted-foreground mb-6" data-test-id="footer-description">
                         Connecting communities through local events
diff --git a/components/ui/Navigation.tsx b/components/ui/Navigation.tsx
index b15e3a2..911c03a 100644
--- a/components/ui/Navigation.tsx
+++ b/components/ui/Navigation.tsx
@@ -2,8 +2,9 @@
 
 import React, { useState } from 'react'
 import Link from 'next/link'
+import Image from 'next/image'
 import { useRouter } from 'next/navigation'
-import { Menu, X } from 'lucide-react'
+import { Menu, X, Shield, Settings } from 'lucide-react'
 import { useAuth } from '@/lib/auth-context'
 import { useAuth as useAuthHook } from '@/lib/hooks/useAuth'
 import { ProfileDropdown } from '@/components/auth/ProfileDropdown'
@@ -38,27 +39,51 @@ export function Navigation({
         <header className={`bg-card shadow-sm border-b border-border sticky top-0 z-50 ${className}`} data-test-id="homepage-header">
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div className="flex items-center justify-between h-16">
-                    {/* Left side - Logo (always shown, always clickable home button) */}
-                    <Link href="/" className="flex items-center gap-2">
-                        <img 
-                            src="/logo.svg" 
-                            alt="LocalLoop" 
-                            className="w-12 h-12" 
-                        />
-                        <span className="text-xl font-bold text-card-foreground" data-test-id="homepage-title">LocalLoop</span>
-                    </Link>
+                    {/* Left side - Logo and Admin/Staff Badge */}
+                    <div className="flex items-center gap-3">
+                        <Link href="/" className="flex items-center gap-2">
+                            <Image 
+                                src="/logo.svg" 
+                                alt="LocalLoop" 
+                                width={48}
+                                height={48}
+                                className="w-12 h-12" 
+                            />
+                            <span className="text-xl font-bold text-card-foreground" data-test-id="homepage-title">LocalLoop</span>
+                        </Link>
+                        
+                        {/* Admin/Staff Badge */}
+                        {user && (isAdmin || isStaff) && (
+                            <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${
+                                isAdmin 
+                                    ? 'bg-red-100 text-red-700 border border-red-200' 
+                                    : 'bg-blue-100 text-blue-700 border border-blue-200'
+                            }`}>
+                                {isAdmin ? (
+                                    <Settings className="w-3 h-3" />
+                                ) : (
+                                    <Shield className="w-3 h-3" />
+                                )}
+                                <span className="hidden sm:inline">
+                                    {isAdmin ? 'Admin' : 'Staff'}
+                                </span>
+                            </div>
+                        )}
+                    </div>
 
                     {/* Right side - Full Navigation (always shown) */}
                     <>
                         {/* Desktop Navigation */}
                         <nav className="hidden md:flex items-center gap-6" data-test-id="desktop-navigation">
-                            <button
-                                onClick={handleBrowseEvents}
-                                className="text-muted-foreground hover:text-foreground transition-colors"
-                                data-test-id="browse-events-button"
-                            >
-                                Browse Events
-                            </button>
+                            {(isStaff || isAdmin) && (
+                                <Link
+                                    href="/create-event"
+                                    className="text-muted-foreground hover:text-foreground transition-colors"
+                                    data-test-id="create-event-link"
+                                >
+                                    Create Event
+                                </Link>
+                            )}
 
                             {(isStaff || isAdmin) && (
                                 <Link href="/staff" className="text-muted-foreground hover:text-foreground transition-colors">
@@ -73,26 +98,26 @@ export function Navigation({
                                 My Events
                             </Link>
 
-                            <Link
-                                href="/create-event"
+                            <button
+                                onClick={handleBrowseEvents}
                                 className="text-muted-foreground hover:text-foreground transition-colors"
-                                data-test-id="create-event-link"
+                                data-test-id="browse-events-button"
                             >
-                                Create Event
-                            </Link>
+                                Browse Events
+                            </button>
 
                             <ThemeToggle />
 
 
-                            {/* Auth state conditional rendering */}
-                            {authLoading ? (
-                                <div className="w-20 h-10 bg-muted animate-pulse rounded-lg" />
-                            ) : user ? (
+                            {/* Auth state conditional rendering - Optimistic UI */}
+                            {user ? (
                                 <ProfileDropdown />
                             ) : (
                                 <Link
                                     href="/auth/login"
-                                    className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"
+                                    className={`bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-200 ${
+                                        authLoading ? 'opacity-75 pointer-events-none' : 'opacity-100'
+                                    }`}
                                 >
                                     Sign In
                                 </Link>
@@ -118,16 +143,34 @@ export function Navigation({
                 {/* Mobile Navigation */}
                 {isMobileMenuOpen && (
                     <div className="md:hidden border-t border-border py-4">
+                        {/* Mobile Admin/Staff Badge */}
+                        {user && (isAdmin || isStaff) && (
+                            <div className="mb-4 flex justify-center">
+                                <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium ${
+                                    isAdmin 
+                                        ? 'bg-red-100 text-red-700 border border-red-200' 
+                                        : 'bg-blue-100 text-blue-700 border border-blue-200'
+                                }`}>
+                                    {isAdmin ? (
+                                        <Settings className="w-4 h-4" />
+                                    ) : (
+                                        <Shield className="w-4 h-4" />
+                                    )}
+                                    <span>{isAdmin ? 'Admin' : 'Staff'}</span>
+                                </div>
+                            </div>
+                        )}
+                        
                         <nav className="flex flex-col space-y-4">
-                            <button
-                                onClick={() => {
-                                    handleBrowseEvents()
-                                    setIsMobileMenuOpen(false)
-                                }}
-                                className="text-muted-foreground hover:text-foreground transition-colors py-2 text-left"
-                            >
-                                Browse Events
-                            </button>
+                            {(isStaff || isAdmin) && (
+                                <Link
+                                    href="/create-event"
+                                    className="text-muted-foreground hover:text-foreground transition-colors py-2"
+                                    onClick={() => setIsMobileMenuOpen(false)}
+                                >
+                                    Create Event
+                                </Link>
+                            )}
 
                             {(isStaff || isAdmin) && (
                                 <Link
@@ -147,26 +190,28 @@ export function Navigation({
                                 My Events
                             </Link>
 
-                            <Link
-                                href="/create-event"
-                                className="text-muted-foreground hover:text-foreground transition-colors py-2"
-                                onClick={() => setIsMobileMenuOpen(false)}
+                            <button
+                                onClick={() => {
+                                    handleBrowseEvents()
+                                    setIsMobileMenuOpen(false)
+                                }}
+                                className="text-muted-foreground hover:text-foreground transition-colors py-2 text-left"
                             >
-                                Create Event
-                            </Link>
+                                Browse Events
+                            </button>
 
                             <ThemeToggle />
 
 
-                            {/* Auth state conditional rendering for mobile */}
-                            {authLoading ? (
-                                <div className="w-full h-12 bg-muted animate-pulse rounded-lg" />
-                            ) : user ? (
+                            {/* Auth state conditional rendering for mobile - Optimistic UI */}
+                            {user ? (
                                 <ProfileDropdown />
                             ) : (
                                 <Link
                                     href="/auth/login"
-                                    className="bg-primary text-primary-foreground px-4 py-3 rounded-lg hover:bg-primary/90 transition-colors text-left"
+                                    className={`bg-primary text-primary-foreground px-4 py-3 rounded-lg hover:bg-primary/90 transition-all duration-200 text-left ${
+                                        authLoading ? 'opacity-75 pointer-events-none' : 'opacity-100'
+                                    }`}
                                     onClick={() => setIsMobileMenuOpen(false)}
                                 >
                                     Sign In
diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts
index 61e6d39..32d7687 100644
--- a/e2e/example.spec.ts
+++ b/e2e/example.spec.ts
@@ -47,7 +47,14 @@ test('navigation elements are present', async ({ page }) => {
     // On desktop, desktop nav should be visible
     await expect(page.locator('[data-test-id="desktop-navigation"]')).toBeVisible();
     await expect(page.locator('[data-test-id="browse-events-button"]')).toBeVisible();
-    await expect(page.locator('[data-test-id="create-event-link"]')).toBeVisible();
+    
+    // Create event link is only visible for staff/admin users
+    // Check if it exists, but don't require it since it depends on user role
+    const createEventLink = page.locator('[data-test-id="create-event-link"]');
+    const createEventLinkExists = await createEventLink.count() > 0;
+    if (createEventLinkExists) {
+      await expect(createEventLink).toBeVisible();
+    }
   }
 
   console.log('Navigation elements are present and responsive');
diff --git a/lib/auth-context.tsx b/lib/auth-context.tsx
index 87e6ee5..9f57c15 100644
--- a/lib/auth-context.tsx
+++ b/lib/auth-context.tsx
@@ -19,6 +19,7 @@ interface AuthContextType {
   signInWithApple: () => Promise<void>
   resetPassword: (email: string) => Promise<void>
   updatePassword: (password: string) => Promise<void>
+  clearStaleAuthData: () => Promise<void>
   // Feature flags
   isGoogleAuthEnabled: boolean
   isAppleAuthEnabled: boolean
@@ -115,6 +116,26 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
   const signOut = async () => {
     const { error } = await supabase.auth.signOut()
+    
+    // Clear any potential stale auth data from localStorage/sessionStorage
+    try {
+      // Clear localStorage
+      Object.keys(localStorage).forEach(key => {
+        if (key.includes('sb-') || key.includes('supabase')) {
+          localStorage.removeItem(key)
+        }
+      })
+      
+      // Clear sessionStorage
+      Object.keys(sessionStorage).forEach(key => {
+        if (key.includes('sb-') || key.includes('supabase')) {
+          sessionStorage.removeItem(key)
+        }
+      })
+    } catch (storageError) {
+      console.warn('Failed to clear client storage:', storageError)
+    }
+    
     if (error) throw error
   }
 
@@ -150,6 +171,36 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     if (error) throw error
   }
 
+  const clearStaleAuthData = async () => {
+    try {
+      // Sign out from Supabase
+      await supabase.auth.signOut()
+      
+      // Clear localStorage
+      Object.keys(localStorage).forEach(key => {
+        if (key.includes('sb-') || key.includes('supabase')) {
+          localStorage.removeItem(key)
+        }
+      })
+      
+      // Clear sessionStorage
+      Object.keys(sessionStorage).forEach(key => {
+        if (key.includes('sb-') || key.includes('supabase')) {
+          sessionStorage.removeItem(key)
+        }
+      })
+      
+      // Reset auth state
+      setUser(null)
+      setSession(null)
+      setLoading(false)
+      
+      console.log('🧹 Cleared all stale auth data')
+    } catch (error) {
+      console.error('❌ Failed to clear stale auth data:', error)
+    }
+  }
+
   const value = {
     user,
     session,
@@ -161,6 +212,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     signInWithApple,
     resetPassword,
     updatePassword,
+    clearStaleAuthData,
     isGoogleAuthEnabled: ENABLE_GOOGLE_AUTH,
     isAppleAuthEnabled: ENABLE_APPLE_AUTH,
   }
diff --git a/lib/utils.ts b/lib/utils.ts
index c87af83..fb4e472 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -56,6 +56,35 @@ export function truncateText(text: string, length: number): string {
     return text.slice(0, length).trim() + '...';
 }
 
+/**
+ * Get display description for event cards with consistent length
+ * Prioritizes short_description, falls back to truncated description
+ * @param description - Full description
+ * @param shortDescription - Short description (optional)
+ * @param maxLength - Maximum character length (default: 85)
+ * @returns Consistent length description for card display
+ */
+export function getEventCardDescription(
+    description?: string, 
+    shortDescription?: string, 
+    maxLength: number = 85
+): string {
+    // Prioritize short description if it exists
+    if (shortDescription) {
+        // If short description is too long, truncate it too
+        return shortDescription.length > maxLength 
+            ? truncateText(shortDescription, maxLength)
+            : shortDescription;
+    }
+    
+    // Fall back to truncated full description
+    if (description) {
+        return truncateText(description, maxLength);
+    }
+    
+    return '';
+}
+
 /**
  * Convert price from cents to dollars
  * @param cents - Price in cents
@@ -68,6 +97,23 @@ export function formatPrice(cents: number): string {
     }).format(cents / 100);
 }
 
+/**
+ * Format location to show only building/venue and city (first 2 lines)
+ * @param location - Full location string
+ * @returns Formatted location with building and city only
+ */
+export function formatLocationForCard(location?: string): string {
+    if (!location) return 'Location TBD';
+    
+    // Split by common address delimiters
+    const lines = location.split(/[,\n\r]+/).map(line => line.trim()).filter(Boolean);
+    
+    // Take only first 2 lines (building/venue and city)
+    const displayLines = lines.slice(0, 2);
+    
+    return displayLines.join(', ');
+}
+
 /**
  * Generate a slug from a string
  * @param text - Text to convert to slug
diff --git a/test-auth-storage.html b/test-auth-storage.html
new file mode 100644
index 0000000..a794e86
--- /dev/null
+++ b/test-auth-storage.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Auth Storage Inspector</title>
+</head>
+<body>
+    <h1>Authentication Storage Inspector</h1>
+    <div id="results"></div>
+    
+    <script>
+        function inspectStorage() {
+            const results = document.getElementById('results');
+            let output = '';
+            
+            // Check localStorage
+            output += '<h2>LocalStorage</h2>';
+            output += '<ul>';
+            for (let i = 0; i < localStorage.length; i++) {
+                const key = localStorage.key(i);
+                if (key && (key.includes('sb-') || key.includes('supabase'))) {
+                    output += `<li><strong>${key}:</strong> ${localStorage.getItem(key)}</li>`;
+                }
+            }
+            output += '</ul>';
+            
+            // Check sessionStorage
+            output += '<h2>SessionStorage</h2>';
+            output += '<ul>';
+            for (let i = 0; i < sessionStorage.length; i++) {
+                const key = sessionStorage.key(i);
+                if (key && (key.includes('sb-') || key.includes('supabase'))) {
+                    output += `<li><strong>${key}:</strong> ${sessionStorage.getItem(key)}</li>`;
+                }
+            }
+            output += '</ul>';
+            
+            // Check cookies
+            output += '<h2>Cookies</h2>';
+            const cookies = document.cookie.split(';').filter(c => c.includes('supabase') || c.includes('sb-'));
+            output += '<ul>';
+            cookies.forEach(cookie => {
+                output += `<li>${cookie.trim()}</li>`;
+            });
+            output += '</ul>';
+            
+            // Show all localStorage keys for debugging
+            output += '<h2>All LocalStorage Keys</h2>';
+            const allKeys = [];
+            for (let i = 0; i < localStorage.length; i++) {
+                allKeys.push(localStorage.key(i));
+            }
+            output += `<p>${allKeys.join(', ')}</p>`;
+            
+            results.innerHTML = output;
+        }
+        
+        // Clear all Supabase auth data
+        function clearAuthData() {
+            // Clear localStorage
+            for (let i = localStorage.length - 1; i >= 0; i--) {
+                const key = localStorage.key(i);
+                if (key && (key.includes('sb-') || key.includes('supabase'))) {
+                    localStorage.removeItem(key);
+                    console.log('Removed localStorage key:', key);
+                }
+            }
+            
+            // Clear sessionStorage
+            for (let i = sessionStorage.length - 1; i >= 0; i--) {
+                const key = sessionStorage.key(i);
+                if (key && (key.includes('sb-') || key.includes('supabase'))) {
+                    sessionStorage.removeItem(key);
+                    console.log('Removed sessionStorage key:', key);
+                }
+            }
+            
+            // Clear cookies (attempt to clear common Supabase cookie patterns)
+            const cookiesToClear = [
+                'sb-access-token',
+                'sb-refresh-token',
+                'supabase-auth-token',
+                'supabase.auth.token'
+            ];
+            
+            cookiesToClear.forEach(cookieName => {
+                document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+                document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.vercel.app;`;
+                document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.local-loop-qa.vercel.app;`;
+                console.log('Attempted to clear cookie:', cookieName);
+            });
+            
+            alert('Auth data cleared! Refresh the page to see changes.');
+        }
+        
+        // Run inspection on load
+        inspectStorage();
+    </script>
+    
+    <button onclick="inspectStorage()">Refresh Inspection</button>
+    <button onclick="clearAuthData()">Clear All Auth Data</button>
+</body>
+</html>
\ No newline at end of file
diff --git a/utils/supabase/middleware.ts b/utils/supabase/middleware.ts
index ff207ff..6f9ebd2 100644
--- a/utils/supabase/middleware.ts
+++ b/utils/supabase/middleware.ts
@@ -31,9 +31,58 @@ export async function updateSession(request: NextRequest) {
   // supabase.auth.getUser(). A simple mistake could make it very hard to debug
   // issues with users being randomly logged out.
 
-  const {
-    data: { user },
-  } = await supabase.auth.getUser()
+  let user = null
+  let isAuthValid = false
+  
+  try {
+    // Check both session and user for comprehensive auth validation
+    const [
+      { data: { session }, error: sessionError },
+      { data: { user: authUser }, error: userError }
+    ] = await Promise.all([
+      supabase.auth.getSession(),
+      supabase.auth.getUser()
+    ])
+    
+    // Authentication is valid only if:
+    // 1. No errors occurred
+    // 2. Session exists and is not expired
+    // 3. User exists
+    const hasValidSession = !!(session && !sessionError && session.expires_at && 
+      new Date(session.expires_at * 1000) > new Date())
+    const hasValidUser = !!(authUser && !userError)
+    
+    isAuthValid = hasValidSession && hasValidUser
+    user = isAuthValid ? authUser : null
+    
+    // If there are auth errors or invalid session, clear stale cookies
+    if (!isAuthValid && (sessionError || userError)) {
+      const errorMsg = sessionError?.message || userError?.message
+      console.warn('Middleware auth validation failed:', errorMsg)
+      
+      const cookiesToClear = request.cookies.getAll().filter(cookie => 
+        cookie.name.includes('sb-') || cookie.name.includes('supabase')
+      )
+      
+      if (cookiesToClear.length > 0) {
+        console.log('Clearing stale auth cookies:', cookiesToClear.map(c => c.name))
+        supabaseResponse = NextResponse.next({ request })
+        cookiesToClear.forEach(cookie => {
+          supabaseResponse.cookies.set(cookie.name, '', {
+            expires: new Date(0),
+            path: '/',
+            httpOnly: false,
+            secure: process.env.NODE_ENV === 'production',
+            sameSite: 'lax'
+          })
+        })
+      }
+    }
+  } catch (error) {
+    console.error('Middleware auth exception:', error)
+    user = null
+    isAuthValid = false
+  }
 
   // Protected routes
   const protectedRoutes = ['/dashboard', '/profile', '/admin']