diff --git a/src/components/HeritageSection.tsx b/src/components/HeritageSection.tsx
index 276b9bf..36adb29 100644
--- a/src/components/HeritageSection.tsx
+++ b/src/components/HeritageSection.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import bakeryHeritageImage from "@/assets/bakery-heritage.jpg";
 import mandelkubbImage from "@/assets/mandelkubb.jpg";
 import kolasnittImage from "@/assets/kolasnitt.jpg";
 import chokladsnittImage from "@/assets/chokladsnitt.jpg";
@@ -66,6 +67,21 @@ const HeritageSection = () => {
               : "opacity-0 translate-y-24 scale-95"
           }`}
         >
+          {/* Image */}
+          <div 
+            className={`relative rounded-sm overflow-hidden mb-12 shadow-xl transition-all duration-[6000ms] ease-out ${
+              heroVisible
+                ? "opacity-100 translate-y-0 scale-100"
+                : "opacity-0 translate-y-20 scale-95"
+            }`}
+          >
+            <img
+              src={bakeryHeritageImage}
+              alt="Traditionellt svenskt konditori"
+              className="w-full h-[400px] md:h-[500px] object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent" />
+          </div>
 
           {/* Text Content */}
           <div className="text-center max-w-3xl mx-auto">
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index acd5dab..da45fef 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -1,9 +1,17 @@
 import logoImage from "@/assets/logo.png";
+import heroBakeryImage from "@/assets/hero-bakery.jpg";
 
 const HeroSection = () => {
   return (
-    <section className="relative flex flex-col justify-center items-center text-center px-6 py-16 pt-20 pb-12 bg-background">
-      <div className="animate-fade-up max-w-4xl">
+    <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 relative z-10">
         <img 
           src={logoImage} 
           alt="Lennart Svensson Konditorivaror"