diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 574c25f..4623af8 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -71,9 +71,9 @@ const Index = () => {
   }, [searchQuery, selectedCategory, fuse]);
   return <div className="min-h-screen bg-background">
       <section className="relative">
-        {/* Hero Image - Sized to show full content */}
+        {/* Hero Image - Full width with aspect ratio */}
         <div 
-          className="h-[300px] md:h-[400px] lg:h-[500px] bg-contain bg-center bg-no-repeat bg-white"
+          className="w-full aspect-[16/7] md:aspect-[16/6] lg:aspect-[16/5] bg-cover bg-center"
           style={{ backgroundImage: `url(${heroBg})` }}
         />