diff --git a/public/images/home-integrating-1.png b/public/images/home-integrating-1.png
new file mode 100644
index 0000000..f72044a
Binary files /dev/null and b/public/images/home-integrating-1.png differ
diff --git a/public/images/home-integrating-2.png b/public/images/home-integrating-2.png
new file mode 100644
index 0000000..b892ba3
Binary files /dev/null and b/public/images/home-integrating-2.png differ
diff --git a/public/images/home-integrating-3.png b/public/images/home-integrating-3.png
new file mode 100644
index 0000000..f31757e
Binary files /dev/null and b/public/images/home-integrating-3.png differ
diff --git a/public/images/home-models.svg b/public/images/home-models.svg
new file mode 100644
index 0000000..eebcd18
--- /dev/null
+++ b/public/images/home-models.svg
@@ -0,0 +1,9 @@
+<svg width="324" height="912" viewBox="0 0 324 912" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M154 0.5C152.619 0.5 151.5 1.61929 151.5 3C151.5 4.38071 152.619 5.5 154 5.5V0.5ZM303.232 910.768C304.209 911.744 305.791 911.744 306.768 910.768L322.678 894.858C323.654 893.882 323.654 892.299 322.678 891.322C321.701 890.346 320.118 890.346 319.142 891.322L305 905.464L290.858 891.322C289.882 890.346 288.299 890.346 287.322 891.322C286.346 892.299 286.346 893.882 287.322 894.858L303.232 910.768ZM302.5 758V909H307.5V758H302.5ZM154 609.5C236.014 609.5 302.5 675.986 302.5 758H307.5C307.5 673.224 238.776 604.5 154 604.5V609.5ZM0.5 456C0.5 540.776 69.2243 609.5 154 609.5V604.5C71.9857 604.5 5.5 538.014 5.5 456H0.5ZM154 302.5C69.2243 302.5 0.5 371.224 0.5 456H5.5C5.5 373.986 71.9857 307.5 154 307.5V302.5ZM302.5 154C302.5 236.014 236.014 302.5 154 302.5V307.5C238.776 307.5 307.5 238.776 307.5 154H302.5ZM154 5.5C236.014 5.5 302.5 71.9857 302.5 154H307.5C307.5 69.2243 238.776 0.5 154 0.5V5.5Z" fill="url(#paint0_linear_3535_5910)"/>
+<defs>
+<linearGradient id="paint0_linear_3535_5910" x1="154" y1="3" x2="154" y2="909" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0041AC"/>
+<stop offset="1" stop-color="#A9EA98"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/section-3/index.tsx b/src/components/section-3/index.tsx
index 9ba6ffa..d4a3046 100644
--- a/src/components/section-3/index.tsx
+++ b/src/components/section-3/index.tsx
@@ -23,22 +23,39 @@ export default function Section3() {
   };
 
   const [visibleCircle, setVisibleCircle] = useState<number | null>(null);
+  const [hoveredCircle, setHoveredCircle] = useState<number | null>(null);
   const visualizationRef = useRef(null);
   const isInView = useInView(visualizationRef);
+  const [revealedImageIndex, setRevealedImageIndex] = useState(0);
+
   useEffect(() => {
     if (isInView) {
+      let fullReveal = false;
       let i = 0;
-      const interval = setInterval(() => {
+
+      const runLoop = () => {
         if (i === 3) {
-          clearInterval(interval);
+          // wait 10s before starting the loop again
+          setTimeout(() => {
+            fullReveal = true;
+            i = 0;
+          }, 10000);
+        }
+
+        if (!fullReveal && i < 4) {
+          setRevealedImageIndex(i);
         }
         setVisibleCircle(i);
         i++;
-      }, 1000);
+      };
+
+      runLoop()
+      const interval = setInterval(runLoop, 1000);
 
       return () => clearInterval(interval);
     }
-  }, [isInView]);
+  }, [isInView, setRevealedImageIndex]);
+
   return (
     <section className="relative bg-white py-20 scroll-mt-8" id="section-1">
       <Lines verticalClassName="pl-[152px] pr-[152px]" sectionName="section-1" rows={[1074]} colorClass="bg-blue-900/10" hoveringColumnsNumber={5} hoveredIndex={hoveredIndex} />
@@ -47,37 +64,67 @@ export default function Section3() {
           <div className="relative" ref={visualizationRef}>
             <Image
               alt=""
-              src="/images/home-models.png"
+              src="/images/home-models.svg"
               width={316}
               height={906}
             />
             <div className="absolute top-8 left-8 group">
-              <div onMouseEnter={() => setVisibleCircle(0)} onMouseLeave={() => setVisibleCircle(null)} className={cn("flex h-60 w-60 items-center justify-center rounded-full bg-light-green transition-opacity",
-                {
-                  "opacity-1": visibleCircle === 0,
-                  "opacity-0": visibleCircle !== 0
-                }
-              )} >
+              {revealedImageIndex > 0 && < Image
+                className="absolute inset-0 w-[240px] h-[240px] z-0"
+                alt=""
+                src="/images/home-integrating-1.png"
+                width={240}
+                height={240}
+              />}
+              <div
+                onMouseEnter={() => setHoveredCircle(0)}
+                onMouseLeave={() => setHoveredCircle(null)}
+                className={cn("relative flex h-60 w-60 items-center justify-center rounded-full bg-light-green transition-opacity z-10",
+                  {
+                    "opacity-1": visibleCircle === 0 || hoveredCircle === 0,
+                    "opacity-0": visibleCircle !== 0 && hoveredCircle !== 0
+                  }
+                )} >
                 <div className="text-center text-blue-800 text-lg font-medium uppercase tracking-tight">CLIMATE MODELS SIMULATIONS</div>
               </div>
             </div>
             <div className="absolute top-[318px] left-8">
-              <div onMouseEnter={() => setVisibleCircle(1)} onMouseLeave={() => setVisibleCircle(null)} className={cn("flex h-60 w-60 items-center justify-center rounded-full bg-light-green transition-opacity",
-                {
-                  "opacity-1": visibleCircle === 1,
-                  "opacity-0": visibleCircle !== 1
-                }
-              )} >
+              {revealedImageIndex > 1 && <Image
+                alt=""
+                className="absolute inset-0 w-[240px] h-[240px] z-0"
+                src="/images/home-integrating-2.png"
+                width={217}
+                height={212}
+              />}
+              <div
+                onMouseEnter={() => setHoveredCircle(1)}
+                onMouseLeave={() => setHoveredCircle(null)}
+                className={cn("relative flex h-60 w-60 items-center justify-center rounded-full bg-light-green transition-opacity z-10",
+                  {
+                    "opacity-1": visibleCircle === 1 || hoveredCircle === 1,
+                    "opacity-0": visibleCircle !== 1 && hoveredCircle !== 1
+                  }
+                )} >
                 <div className="text-center text-blue-800 text-lg font-medium uppercase tracking-tight">Data streaming</div>
               </div>
             </div>
             <div className="absolute top-[614px] left-8">
-              <div onMouseEnter={() => setVisibleCircle(2)} onMouseLeave={() => setVisibleCircle(null)} className={cn("flex flex-col h-60 w-60 items-center justify-center rounded-full bg-light-green transition-opacity",
-                {
-                  "opacity-1": visibleCircle === 2,
-                  "opacity-0": visibleCircle !== 2
-                }
-              )} >
+              {revealedImageIndex > 2 && <Image
+                alt=""
+                className="absolute inset-0 w-[240px] h-[240px] z-0 fade-in-100"
+                src="/images/home-integrating-3.png"
+                width={202}
+                height={206}
+              />}
+              <div
+                onMouseEnter={() => setHoveredCircle(2)}
+                onMouseLeave={() => setHoveredCircle(null)}
+                className={cn("relative flex flex-col h-60 w-60 items-center justify-center rounded-full bg-light-green transition-opacity z-10",
+                  {
+                    "opacity-1": visibleCircle === 2 || hoveredCircle === 2,
+                    "opacity-0": visibleCircle !== 2 && hoveredCircle !== 2
+                  }
+                )} >
                 <div className="text-center text-blue-800 text-lg font-medium uppercase tracking-tight pb-1">Impact models</div>
                 <div className="text-center text-blue-800 text-xs font-medium uppercase tracking-tight leading-5">Applications in <br />different sectors</div>
               </div>