diff --git a/frontend/package.json b/frontend/package.json
index 02011c37..f4413df2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.13.0",
+    "react-lazy-load-image-component": "^1.6.2",
     "react-pageflip": "^2.0.3",
     "react-router-dom": "^6.24.1",
     "split-type": "^0.3.4",
diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx
index ede290f0..e31ee1bc 100644
--- a/frontend/src/components/Pages/Boardgame.jsx
+++ b/frontend/src/components/Pages/Boardgame.jsx
@@ -9,232 +9,235 @@ import board8 from "../../assets/Boardgames/board8.png";
 import board10 from "../../assets/Boardgames/board10.png";
 import bg from "../../assets/Boardgames/bg.jpg";
 
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
 
 export default function Boardgame() {
     return (
         <>
-        <div className="w-full mt-10 md:mt-0">
-            <section className="w-full pt-12 md:pt-24 lg:pt-32">
-                <div className="container mx-auto space-y-10 xl:space-y-16">
-                    <div className="flex flex-col items-center space-y-4 text-center">
-                        <div className="space-y-2">
-                            <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl">
-                                Discover Our Boardgame Collection
-                            </h1>
-                            <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
-                                Explore our diverse selection of captivating boardgames, perfect for game nights, family gatherings, and strategic adventures.
-                            </p>
+            <div className="w-full mt-10 md:mt-0">
+                <section className="w-full pt-12 md:pt-24 lg:pt-32">
+                    <div className="container mx-auto space-y-10 xl:space-y-16">
+                        <div className="flex flex-col items-center space-y-4 text-center">
+                            <div className="space-y-2">
+                                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl">
+                                    Discover Our Boardgame Collection
+                                </h1>
+                                <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
+                                    Explore our diverse selection of captivating boardgames, perfect for game nights, family gatherings, and strategic adventures.
+                                </p>
+                            </div>
                         </div>
+                        <LazyLoadImage
+                            alt={"bg"}
+                            effect="blur"
+                            wrapperProps={{
+                                style: { transitionDelay: "1s" },
+                            }}
+                            className="mx-auto w-full aspect-[3/1] overflow-hidden rounded-t-xl object-cover object-center shadow-2xl"
+                            src={bg} />
                     </div>
-                    <img
-                        src={bg}
-                        width="1200"
-                        height="400"
-                        alt="Boardgame Hero"
-                        className="mx-auto w-full aspect-[3/1] overflow-hidden rounded-t-xl object-cover object-center shadow-2xl"
-                    />
-                </div>
-            </section>
-            <section className="w-full py-12 md:py-24 lg:py-32">
-                <div className="container mx-auto grid grid-cols-1 gap-6 px-4 md:grid-cols-2 lg:grid-cols-3 md:px-6">
-                    <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
-                        <a className="absolute inset-0 z-10" href="#">
-                            <span className="sr-only">View</span>
-                        </a>
-                        <img
-                            src={board1}
-                            alt="Catan"
-                            width="500"
-                            height="400"
-                            className="object-cover w-full h-64"
-                            style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
-                        />
-                        <div className="p-4 bg-background">
-                            <h3 className="text-xl font-bold">Catan</h3>
-                            <p className="text-sm text-muted-foreground">
-                                Settle the island of Catan in this classic resource management game.
-                            </p>
+                </section>
+                <section className="w-full py-12 md:py-24 lg:py-32">
+                    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 md:grid-cols-2 lg:grid-cols-3 md:px-6">
+                        <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
+                            <a className="absolute inset-0 z-10" href="#">
+                                <span className="sr-only">View</span>
+                            </a>
+                            <img
+                                src={board1}
+                                alt="Catan"
+                                width="500"
+                                height="400"
+                                className="object-cover w-full h-64"
+                                style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
+                            />
+                            <div className="p-4 bg-background">
+                                <h3 className="text-xl font-bold">Catan</h3>
+                                <p className="text-sm text-muted-foreground">
+                                    Settle the island of Catan in this classic resource management game.
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                    <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
-                        <a className="absolute inset-0 z-10" href="#">
-                            <span className="sr-only">View</span>
-                        </a>
-                        <img
-                            src={board2}
-                            alt="Ticket to Ride"
-                            width="500"
-                            height="400"
-                            className="object-cover w-full h-64"
-                            style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
-                        />
-                        <div className="p-4 bg-background">
-                            <h3 className="text-xl font-bold">Ticket to Ride</h3>
-                            <p className="text-sm text-muted-foreground">
-                                Connect cities across a map and complete your railway routes.
-                            </p>
+                        <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
+                            <a className="absolute inset-0 z-10" href="#">
+                                <span className="sr-only">View</span>
+                            </a>
+                            <img
+                                src={board2}
+                                alt="Ticket to Ride"
+                                width="500"
+                                height="400"
+                                className="object-cover w-full h-64"
+                                style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
+                            />
+                            <div className="p-4 bg-background">
+                                <h3 className="text-xl font-bold">Ticket to Ride</h3>
+                                <p className="text-sm text-muted-foreground">
+                                    Connect cities across a map and complete your railway routes.
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                    <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
-                        <a className="absolute inset-0 z-10" href="#">
-                            <span className="sr-only">View</span>
-                        </a>
-                        <img
-                            src={board3}
-                            alt="Pandemic"
-                            width="500"
-                            height="400"
-                            className="object-cover w-full h-64"
-                            style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
-                        />
-                        <div className="p-4 bg-background">
-                            <h3 className="text-xl font-bold">Pandemic</h3>
-                            <p className="text-sm text-muted-foreground">
-                                Work together to contain the spread of deadly diseases across the globe.
-                            </p>
+                        <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
+                            <a className="absolute inset-0 z-10" href="#">
+                                <span className="sr-only">View</span>
+                            </a>
+                            <img
+                                src={board3}
+                                alt="Pandemic"
+                                width="500"
+                                height="400"
+                                className="object-cover w-full h-64"
+                                style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
+                            />
+                            <div className="p-4 bg-background">
+                                <h3 className="text-xl font-bold">Pandemic</h3>
+                                <p className="text-sm text-muted-foreground">
+                                    Work together to contain the spread of deadly diseases across the globe.
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                    <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
-                        <a className="absolute inset-0 z-10" href="#">
-                            <span className="sr-only">View</span>
-                        </a>
-                        <img
-                            src={board4}
-                            alt="Codenames"
-                            width="500"
-                            height="400"
-                            className="object-cover w-full h-64"
-                            style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
-                        />
-                        <div className="p-4 bg-background">
-                            <h3 className="text-xl font-bold">Codenames</h3>
-                            <p className="text-sm text-muted-foreground">
-                                Compete to make word associations and guess your teams secret code words.
-                            </p>
+                        <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
+                            <a className="absolute inset-0 z-10" href="#">
+                                <span className="sr-only">View</span>
+                            </a>
+                            <img
+                                src={board4}
+                                alt="Codenames"
+                                width="500"
+                                height="400"
+                                className="object-cover w-full h-64"
+                                style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
+                            />
+                            <div className="p-4 bg-background">
+                                <h3 className="text-xl font-bold">Codenames</h3>
+                                <p className="text-sm text-muted-foreground">
+                                    Compete to make word associations and guess your teams secret code words.
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                    <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
-                        <a className="absolute inset-0 z-10" href="#">
-                            <span className="sr-only">View</span>
-                        </a>
-                        <img
-                            src={board5}
-                            alt="Azul"
-                            width="500"
-                            height="400"
-                            className="object-cover w-full h-64"
-                            style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
-                        />
-                        <div className="p-4 bg-background">
-                            <h3 className="text-xl font-bold">Azul</h3>
-                            <p className="text-sm text-muted-foreground">
-                                Collect and place beautiful tiles to decorate the walls of a palace.
-                            </p>
+                        <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
+                            <a className="absolute inset-0 z-10" href="#">
+                                <span className="sr-only">View</span>
+                            </a>
+                            <img
+                                src={board5}
+                                alt="Azul"
+                                width="500"
+                                height="400"
+                                className="object-cover w-full h-64"
+                                style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
+                            />
+                            <div className="p-4 bg-background">
+                                <h3 className="text-xl font-bold">Azul</h3>
+                                <p className="text-sm text-muted-foreground">
+                                    Collect and place beautiful tiles to decorate the walls of a palace.
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                    <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
-                        <a className="absolute inset-0 z-10" href="#">
-                            <span className="sr-only">View</span>
-                        </a>
-                        <img
-                            src={board6}
-                            alt="Azul"
-                            width="500"
-                            height="400"
-                            className="object-cover w-full h-64"
-                            style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
-                        />
-                        <div className="p-4 bg-background">
-                            <h3 className="text-xl font-bold">Azul</h3>
-                            <p className="text-sm text-muted-foreground">
-                                Collect and place beautiful tiles to decorate the walls of a palace.
-                            </p>
+                        <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
+                            <a className="absolute inset-0 z-10" href="#">
+                                <span className="sr-only">View</span>
+                            </a>
+                            <img
+                                src={board6}
+                                alt="Azul"
+                                width="500"
+                                height="400"
+                                className="object-cover w-full h-64"
+                                style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
+                            />
+                            <div className="p-4 bg-background">
+                                <h3 className="text-xl font-bold">Azul</h3>
+                                <p className="text-sm text-muted-foreground">
+                                    Collect and place beautiful tiles to decorate the walls of a palace.
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                    <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
-                        <a className="absolute inset-0 z-10" href="#">
-                            <span className="sr-only">View</span>
-                        </a>
-                        <img
-                            src={board7}
-                            alt="Azul"
-                            width="500"
-                            height="400"
-                            className="object-cover w-full h-64"
-                            style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
-                        />
-                        <div className="p-4 bg-background">
-                            <h3 className="text-xl font-bold">Azul</h3>
-                            <p className="text-sm text-muted-foreground">
-                                Collect and place beautiful tiles to decorate the walls of a palace.
-                            </p>
+                        <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
+                            <a className="absolute inset-0 z-10" href="#">
+                                <span className="sr-only">View</span>
+                            </a>
+                            <img
+                                src={board7}
+                                alt="Azul"
+                                width="500"
+                                height="400"
+                                className="object-cover w-full h-64"
+                                style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
+                            />
+                            <div className="p-4 bg-background">
+                                <h3 className="text-xl font-bold">Azul</h3>
+                                <p className="text-sm text-muted-foreground">
+                                    Collect and place beautiful tiles to decorate the walls of a palace.
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                    <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
-                        <a className="absolute inset-0 z-10" href="#">
-                            <span className="sr-only">View</span>
-                        </a>
-                        <img
-                            src={board8}
-                            alt="Azul"
-                            width="500"
-                            height="400"
-                            className="object-cover w-full h-64"
-                            style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
-                        />
-                        <div className="p-4 bg-background">
-                            <h3 className="text-xl font-bold">Azul</h3>
-                            <p className="text-sm text-muted-foreground">
-                                Collect and place beautiful tiles to decorate the walls of a palace.
-                            </p>
+                        <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
+                            <a className="absolute inset-0 z-10" href="#">
+                                <span className="sr-only">View</span>
+                            </a>
+                            <img
+                                src={board8}
+                                alt="Azul"
+                                width="500"
+                                height="400"
+                                className="object-cover w-full h-64"
+                                style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
+                            />
+                            <div className="p-4 bg-background">
+                                <h3 className="text-xl font-bold">Azul</h3>
+                                <p className="text-sm text-muted-foreground">
+                                    Collect and place beautiful tiles to decorate the walls of a palace.
+                                </p>
+                            </div>
                         </div>
-                    </div>
-                    <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
-                        <a className="absolute inset-0 z-10" href="#">
-                            <span className="sr-only">View</span>
-                        </a>
-                        <img
-                            src={board10}
-                            alt="Wingspan"
-                            width="500"
-                            height="400"
-                            className="object-cover w-full h-64"
-                            style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
-                        />
-                        <div className="p-4 bg-background">
-                            <h3 className="text-xl font-bold">Wingspan</h3>
-                            <p className="text-sm text-muted-foreground">
-                                Attract and collect birds in this relaxing engine-building game.
-                            </p>
+                        <div className="relative overflow-hidden transition-transform duration-300 ease-in-out rounded-lg shadow-lg group hover:shadow-xl hover:-translate-y-2">
+                            <a className="absolute inset-0 z-10" href="#">
+                                <span className="sr-only">View</span>
+                            </a>
+                            <img
+                                src={board10}
+                                alt="Wingspan"
+                                width="500"
+                                height="400"
+                                className="object-cover w-full h-64"
+                                style={{ aspectRatio: '500 / 400', objectFit: 'cover' }}
+                            />
+                            <div className="p-4 bg-background">
+                                <h3 className="text-xl font-bold">Wingspan</h3>
+                                <p className="text-sm text-muted-foreground">
+                                    Attract and collect birds in this relaxing engine-building game.
+                                </p>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </section>
-            <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100">
-                <div className="container mx-auto px-4 md:px-6 text-center">
-                    <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl mb-4">
-                        Subscribe to our Newsletter
-                    </h2>
-                    <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl mb-6">
-                        Stay updated with our latest boardgame collections, special offers, and events. Subscribe now and never miss out!
-                    </p>
-                    <form className="flex flex-col items-center space-y-4 sm:space-y-0 sm:flex-row sm:space-x-4 justify-center">
-                        <input
-                            type="email"
-                            className="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                            placeholder="Enter your email"
-                            required
-                        />
-                        <button
-                            type="submit"
-                            className="px-6 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        >
-                            Subscribe
-                        </button>
-                    </form>
-                </div>
-            </section>
-        </div>
+                </section>
+                <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100">
+                    <div className="container mx-auto px-4 md:px-6 text-center">
+                        <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl mb-4">
+                            Subscribe to our Newsletter
+                        </h2>
+                        <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl mb-6">
+                            Stay updated with our latest boardgame collections, special offers, and events. Subscribe now and never miss out!
+                        </p>
+                        <form className="flex flex-col items-center space-y-4 sm:space-y-0 sm:flex-row sm:space-x-4 justify-center">
+                            <input
+                                type="email"
+                                className="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                placeholder="Enter your email"
+                                required
+                            />
+                            <button
+                                type="submit"
+                                className="px-6 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                                Subscribe
+                            </button>
+                        </form>
+                    </div>
+                </section>
+            </div>
         </>
     );
 }
diff --git a/frontend/src/components/ui/Landing.jsx b/frontend/src/components/ui/Landing.jsx
index b070cf90..aa50f3ef 100644
--- a/frontend/src/components/ui/Landing.jsx
+++ b/frontend/src/components/ui/Landing.jsx
@@ -3,16 +3,17 @@ import coffecup from "../../assets/landing/coffecup.png";
 import { useEffect, useRef } from "react";
 import SplitType from "split-type";
 import gsap from "gsap";
+import { LazyLoadImage, trackWindowScroll } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
 
-
-export default function Landing() {
+function Landing() {
 
   const textRef = useRef(null);
 
   useEffect(() => {
     const splitText = new SplitType(textRef.current, { types: "chars, words" })
     const tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });
-    
+
     // Set initial opacity to 0 for all characters
     gsap.set(splitText.chars, { opacity: 0 });
 
@@ -22,13 +23,13 @@ export default function Landing() {
       stagger: 0.1,
       ease: 'power1.inOut',
     })
-    .to(splitText.chars, {
-      opacity: 0,
-      duration: 0.1,
-      stagger: 0.1,
-      ease: 'power1.inOut',
-      delay: 1
-    });
+      .to(splitText.chars, {
+        opacity: 0,
+        duration: 0.1,
+        stagger: 0.1,
+        ease: 'power1.inOut',
+        delay: 1
+      });
   });
 
   return (
@@ -43,43 +44,30 @@ export default function Landing() {
           </div>
           <div>
             <div className="flex justify-center pt-64 z-0">
-          <div className="absolute flex justify-center md:w-2/4 md:left-2/4 rotate-12 -bottom-20">
-            <img src={heropic} alt="" className="w-2/4" />
-          </div>
-          <div className="absolute flex justify-center md:w-2/4 md:left-2/4 -rotate-12 -bottom-16">
-            <img src={heropic} alt="" className="w-2/4" />
-          </div>
+              <div className="absolute flex justify-center md:w-2/4 md:left-2/4 rotate-12 -bottom-20 items-center">
+                <img src={heropic} alt="" className="w-2/4" />
+              </div>
+
+              <div className="absolute flex justify-center md:w-2/4 md:left-2/4 -rotate-12 -bottom-16">
+                <img src={heropic} alt="" className="w-2/4" />
+              </div>
+            </div>
           </div>
         </div>
-        </div>
       </section>
 
 
       <section className="flex flex-row justify-center items-center p-32">
-        {/* <div className="w-3/5 p-28 mt-20">
-          <h1 className="text-8xl font-bold text-black ">
-            Our name says it all!
-          </h1>
-          <p className="text-black text-2xl">
-            Founder, Jonathan Li, shares a passion for board games, boba, and
-            delicious food, so he combined them all to become Sip & Play, Park
-            Slope’s first board game cafe. It is a straightforward concept: come
-            in with your friends and family to play any board game from our
-            library of 300+ games! We hope when you visit, you also enjoy our
-            coffee, espresso, boba, sandwiches, and snacks!
-          </p>
-          <ul className="text-xl mt-4">
-            <li>New opening hours:</li>
-            <li>Sunday: 10am-11pm</li>
-            <li>Mon-Thurs: 11am-11pm</li>
-            <li>Fri: 11am-midnight</li>
-            <li>Sat: 10am-midnight</li>
-          </ul>
-          <button className="p-2 border-2 border-slate-500">Learn more↗️</button>
-        </div> */}
-        
+
         <div className="w-1/2 absolute p-4 md:right-40 m-auto">
-          <img src={coffecup} alt="" className="w-96 rotate-12"/>
+          <LazyLoadImage
+            alt={"image.alt"}
+            effect="blur"
+            wrapperProps={{
+              style: { transitionDelay: "1s" },
+            }}
+            className="w-96 rotate-12"
+            src={coffecup} />
         </div>
         <div className="py-28 z-10">
           <h1 className="text-[4rem] md:text-[18rem] font-bold text-black">
@@ -90,3 +78,5 @@ export default function Landing() {
     </div>
   );
 }
+
+export default trackWindowScroll(Landing)
\ No newline at end of file
diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index 38094e46..c6356e39 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -1,5 +1,7 @@
-import { useState,useEffect } from "react";
+import { useState, useEffect } from "react";
 import { MdStars, MdArrowBackIos, MdArrowForwardIos } from "react-icons/md";
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
 
 const ReviewCarousel = () => {
   const reviews = [
@@ -55,7 +57,7 @@ const ReviewCarousel = () => {
 
   const [currentIndex, setCurrentIndex] = useState(0);
   const [showMoreStates, setShowMoreStates] = useState(
-    reviews.map(() => false) 
+    reviews.map(() => false)
   );
 
   const toggleShowMore = (index) => {
@@ -75,18 +77,18 @@ const ReviewCarousel = () => {
       prevIndex === 0 ? reviews.length - 4 : prevIndex - 1
     );
   };
-  const [cardsToShow, setCardsToShow] = useState(1); 
+  const [cardsToShow, setCardsToShow] = useState(1);
 
   const updateCardsToShow = () => {
     if (window.innerWidth >= 768) {
-      setCardsToShow(4); 
+      setCardsToShow(4);
     } else {
-      setCardsToShow(1); 
+      setCardsToShow(1);
     }
   };
 
   useEffect(() => {
-    updateCardsToShow(); 
+    updateCardsToShow();
     window.addEventListener("resize", updateCardsToShow);
 
     return () => {
@@ -118,11 +120,19 @@ const ReviewCarousel = () => {
               >
                 <div className="relative min-h-[250px] max-h-[350px] md:min-h-[300px] md:max-h-[400px] p-4 rounded-xl bg-amber-200 z-10 overflow-hidden">
                   <div className="flex flex-col items-center justify-center mb-1">
-                    <img
+                    {/* <img
                       src={review.img}
                       alt=""
                       className="w-20 h-20 rounded-full"
-                    />
+                    /> */}
+                    <LazyLoadImage
+                      alt={`${index}img`}
+                      effect="blur"
+                      className="w-20 h-20 rounded-full"
+                      wrapperProps={{
+                        style: { transitionDelay: "1s" },
+                      }}
+                      src={review.img} />
                     <h1 className="text-xl font-semibold text-center">{review.name}</h1>
                     <div className="flex">
                       {Array(review.rating)