diff --git a/src/assets/hero-bakery.jpg b/src/assets/hero-bakery.jpg
new file mode 100644
index 0000000..fc262f9
Binary files /dev/null and b/src/assets/hero-bakery.jpg differ
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index 9d17487..da45fef 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -1,12 +1,17 @@
 import logoImage from "@/assets/logo.png";
+import heroBakeryImage from "@/assets/hero-bakery.jpg";
 
 const HeroSection = () => {
   return (
-    <section className="hero-gradient flex flex-col justify-center items-center text-center px-6 py-16 pt-20 pb-12 relative">
-      {/* Decorative top border */}
-      <div className="absolute top-0 left-0 right-0 h-2 bg-primary/20" />
+    <section className="relative flex flex-col justify-center items-center text-center px-6 py-16 pt-20 pb-12 overflow-hidden">
+      {/* Background image with opacity */}
+      <div 
+        className="absolute inset-0 bg-cover bg-center opacity-40"
+        style={{ backgroundImage: `url(${heroBakeryImage})` }}
+      />
+      <div className="absolute inset-0 bg-background/60" />
       
-      <div className="animate-fade-up max-w-4xl">
+      <div className="animate-fade-up max-w-4xl relative z-10">
         <img 
           src={logoImage} 
           alt="Lennart Svensson Konditorivaror"