diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 6eb991b..66eeb18 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={cn(
+      <body suppressHydrationWarning className={cn(
         spaceGrotesk.variable,
         jetbrainsMono.variable,
         "min-h-screen bg-background font-sans antialiased flex flex-col"
diff --git a/frontend/app/venues/page.tsx b/frontend/app/venues/page.tsx
index 1264ddb..c7f7708 100644
--- a/frontend/app/venues/page.tsx
+++ b/frontend/app/venues/page.tsx
@@ -23,6 +23,7 @@ type SortOption = "name" | "city" | "shows"
 export default function VenuesPage() {
     const [venues, setVenues] = useState<Venue[]>([])
     const [loading, setLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
     const [searchQuery, setSearchQuery] = useState("")
     const [stateFilter, setStateFilter] = useState<string>("")
     const [sortBy, setSortBy] = useState<SortOption>("name")
@@ -30,6 +31,7 @@ export default function VenuesPage() {
     useEffect(() => {
         async function fetchVenues() {
             try {
+                setError(null)
                 // Fetch venues
                 const venuesRes = await fetch(`${getApiUrl()}/venues/?limit=100`)
                 const venuesData: Venue[] = await venuesRes.json()
@@ -55,6 +57,7 @@ export default function VenuesPage() {
                 setVenues(venuesWithCounts)
             } catch (error) {
                 console.error("Failed to fetch venues:", error)
+                setError("Failed to load venues. Please try again.")
             } finally {
                 setLoading(false)
             }
@@ -102,6 +105,17 @@ export default function VenuesPage() {
         return result
     }, [venues, searchQuery, stateFilter, sortBy])
 
+    if (error) {
+        return (
+            <div className="container py-10 text-center">
+                <MapPin className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                <h1 className="text-2xl font-bold mb-2">Unable to Load Venues</h1>
+                <p className="text-muted-foreground mb-4">{error}</p>
+                <Button onClick={() => window.location.reload()}>Try Again</Button>
+            </div>
+        )
+    }
+
     if (loading) {
         return (
             <div className="container py-10">
