diff --git a/app/(landing)/sections/Hero/Hero.tsx b/app/(landing)/sections/Hero/Hero.tsx
index 7231b86..ad911ef 100644
--- a/app/(landing)/sections/Hero/Hero.tsx
+++ b/app/(landing)/sections/Hero/Hero.tsx
@@ -1,7 +1,28 @@
+"use client";
 import Image from 'next/image';
 import Navbar from './Navbar';
+import React, { useState, useEffect } from "react";
+import clsx from 'clsx';
+
+const FIRE_IMG = [
+  "/landing/fire3.png",
+  "/landing/fire1.png",
+  "/landing/fire2.png",
+];
+
+const animationTime = 700;
 
 export default function Hero() {
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % FIRE_IMG.length);
+    }, animationTime);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   return (
     <>
       <Navbar />
@@ -30,13 +51,42 @@ export default function Hero() {
         </div>
 
         <Image
-          src="/landing/fire.png"
+          src={FIRE_IMG[0]}
+          width="0"
+          height="0"
+          sizes="100vw"
+          alt="Fire"
+          // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
+          className={clsx("h-auto w-[790px] pl-8 md:w-[800px] lg:w-[800px]", {
+            "opacity-100": currentImageIndex === 0,
+            "opacity-0 absolute": currentImageIndex !== 0,
+          })}
+          priority
+        />
+        <Image
+          src={FIRE_IMG[1]}
+          width="0"
+          height="0"
+          sizes="100vw"
+          alt="Fire"
+          // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
+          className={clsx("h-auto w-[790px] pl-8 md:w-[800px] lg:w-[800px]", {
+            "opacity-100": currentImageIndex === 1,
+            "opacity-0 absolute ": currentImageIndex !== 1,
+          })}
+          priority
+        />
+        <Image
+          src={FIRE_IMG[2]}
           width="0"
           height="0"
           sizes="100vw"
           alt="Fire"
           // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
-          className="h-auto w-[790px] pl-8 md:w-[550px] lg:w-[650px]"
+          className={clsx("h-auto w-[790px] pl-8 md:w-[800px] lg:w-[800px]", {
+            "opacity-100": currentImageIndex === 2,
+            "opacity-0 absolute ": currentImageIndex !== 2,
+          })}
           priority
         />
       </div>
diff --git a/public/landing/Fire1.PNG b/public/landing/Fire1.PNG
new file mode 100644
index 0000000..66cba02
Binary files /dev/null and b/public/landing/Fire1.PNG differ
diff --git a/public/landing/Fire2.PNG b/public/landing/Fire2.PNG
new file mode 100644
index 0000000..d8034d6
Binary files /dev/null and b/public/landing/Fire2.PNG differ
diff --git a/public/landing/Fire3.PNG b/public/landing/Fire3.PNG
new file mode 100644
index 0000000..e96e373
Binary files /dev/null and b/public/landing/Fire3.PNG differ