diff --git a/frontend/app/venues/page.tsx b/frontend/app/venues/page.tsx
index 557bf98..60a7b16 100644
--- a/frontend/app/venues/page.tsx
+++ b/frontend/app/venues/page.tsx
@@ -30,7 +30,7 @@ export default function VenuesPage() {
         async function fetchVenues() {
             try {
                 // Fetch venues
-                const venuesRes = await fetch(`${getApiUrl()}/venues/?limit=500`)
+                const venuesRes = await fetch(`${getApiUrl()}/venues/?limit=100`)
                 const venuesData: Venue[] = await venuesRes.json()
 
                 // Fetch show counts for each venue (batch approach)
diff --git a/frontend/components/ui/avatar.tsx b/frontend/components/ui/avatar.tsx
new file mode 100644
index 0000000..ade699f
--- /dev/null
+++ b/frontend/components/ui/avatar.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> { }
+
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Avatar.displayName = "Avatar"
+
+interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> { }
+
+const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
+    ({ className, src, alt = "", ...props }, ref) => {
+        const [hasError, setHasError] = React.useState(false)
+
+        if (hasError || !src) {
+            return null
+        }
+
+        return (
+            <img
+                ref={ref}
+                src={src}
+                alt={alt}
+                onError={() => setHasError(true)}
+                className={cn("aspect-square h-full w-full object-cover", className)}
+                {...props}
+            />
+        )
+    }
+)
+AvatarImage.displayName = "AvatarImage"
+
+interface AvatarFallbackProps extends React.HTMLAttributes<HTMLDivElement> { }
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+AvatarFallback.displayName = "AvatarFallback"
+
+export { Avatar, AvatarImage, AvatarFallback }