diff --git a/src/pages/Home/LandingPage.jsx b/src/pages/Home/LandingPage.jsx
index 04b09825..1d441312 100644
--- a/src/pages/Home/LandingPage.jsx
+++ b/src/pages/Home/LandingPage.jsx
@@ -13,44 +13,7 @@ import "swiper/css/navigation";
 import SwaperSlideContent from "./SwaperSlideContent";
 import SwaperBlogContent from "./SwaperBlogContent";
 
-const slides = [
-  {
-    ImageUrl: "/assets/img/app/dashboard-light-01.png",
-    Title: "Project & Task Management",
-    Body: "Plan, assign, and track projects and tasks seamlessly for better team collaboration.",
-  },
-  {
-    ImageUrl: "/assets/img/app/dashboard-light-02.png",
-    Title: "Attendance & Leave Tracking",
-    Body: "Monitor employee attendance and manage leave requests with ease.",
-  },
-  {
-    ImageUrl: "/assets/img/app/dashboard-light-04.png",
-    Title: "Role-based Permissions",
-    Body: "Securely control access with customizable roles and permissions.",
-  },
-  {
-    ImageUrl: "/assets/img/app/dashboard-light-05.png",
-    Title: "Expense & Budget Tracking",
-    Body: "Keep projects on budget with real-time expense and cost management.",
-    ContentAlign: "left",
-  },
-  {
-    ImageUrl: "/assets/img/app/dashboard-light-06.png",
-    Title: "Reporting & Analytics",
-    Body: "Gain actionable insights through powerful reports and analytics dashboards.",
-  },
-  {
-    ImageUrl: "/assets/img/app/dashboard-light-07.png",
-    Title: "Document Management",
-    Body: "Organize, share, and access all your project and employee documents in one place.",
-  },
-  {
-    ImageUrl: "/assets/img/app/dashboard-light-08.png",
-    Title: "Inventory Management",
-    Body: "Track materials, supplies, and assets — never run short again.",
-  },
-];
+
 
 const swiperConfig = {
   spaceBetween: 30,
@@ -219,7 +182,7 @@ const LandingPage = () => {
                 </div>
               </div>
 
-              <div
+                <div
                 id="heroDashboardAnimation"
                 className="hero-animation-img mt-10"
               >
@@ -227,12 +190,77 @@ const LandingPage = () => {
                   id="heroAnimationImg"
                   className="position-relative hero-dashboard-img"
                 >
-                  <Swiper {...swiperConfig}>
-                    {slides.map((slide, index) => (
-                      <SwiperSlide key={index}>
-                        <SwaperSlideContent {...slide} />
-                      </SwiperSlide>
-                    ))}
+                  <Swiper
+                    spaceBetween={30}
+                    centeredSlides={true}
+                    rewind={true}
+                    autoplay={{
+                      delay: 3500,
+                      disableOnInteraction: false,
+                    }}
+                    pagination={{
+                      clickable: true,
+                    }}
+                    keyboard={{
+                      enabled: true,
+                    }}
+                    navigation={false}
+                    modules={[EffectFlip, Autoplay, Pagination, Navigation]}
+                    className="mySwiper"
+                    onSlideChange={() => console.log("slide change")}
+                    onSwiper={(swiper) => console.log(swiper)}
+                  >
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="/img/app/dashboard-light-01.png"
+                        Title="Project & Task Management"
+                        Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="/img/app/dashboard-light-02.png"
+                        Title="Attendance & Leave Tracking"
+                        Body="Monitor employee attendance and manage leave requests with ease."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="/app/dashboard-light-04.png"
+                        Title="Role-based Permissions"
+                        Body="Securely control access with customizable roles and permissions."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="/img/app/dashboard-light-05.png"
+                        Title="Expense & Budget Tracking"
+                        Body="Keep projects on budget with real-time expense and cost management."
+                        ContentAlign="left"
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="img/app/dashboard-light-06.png"
+                        Title="Reporting & Analytics"
+                        Body="Gain actionable insights through powerful reports and analytics dashboards."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="/img/app/dashboard-light-07.png"
+                        Title="Document Management"
+                        Body="Organize, share, and access all your project and employee documents in one place."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
+                    <SwiperSlide>
+                      <SwaperSlideContent
+                        ImageUrl="/img/app/dashboard-light-08.png"
+                        Title="Inventory Management"
+                        Body="Track materials, supplies, and assets — never run short again."
+                      ></SwaperSlideContent>
+                    </SwiperSlide>
                   </Swiper>
                 </div>
               </div>
@@ -305,7 +333,7 @@ const LandingPage = () => {
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
-                    src="./../../public/img/icons/check.svg"
+                    src="/img/icons/check.svg"
                     alt="3d select solid"
                   />
                 </div>
@@ -317,7 +345,7 @@ const LandingPage = () => {
               </div>
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
-                  <img src="./../../public/img/icons/user.svg" alt="user" />
+                  <img src="/img/icons/user.svg" alt="user" />
                 </div>
                 <h5 className="mb-2">Reporting & Analytics</h5>
                 <p className="features-icon-description">
@@ -328,7 +356,7 @@ const LandingPage = () => {
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
-                    src="./../../public/img/icons/keyboard.svg"
+                    src="/img/icons/keyboard.svg"
                     alt="keyboard"
                   />
                 </div>
@@ -341,7 +369,7 @@ const LandingPage = () => {
               <div className="col-lg-3 col-sm-4 text-center features-icon-box">
                 <div className="text-center mb-4">
                   <img
-                    src="./../../public/img/icons/keyboard.svg"
+                    src="/img/icons/keyboard.svg"
                     alt="keyboard"
                   />
                 </div>
@@ -369,7 +397,7 @@ const LandingPage = () => {
             <div className="col-lg-3 col-sm-4 text-center features-icon-box">
               <div className="text-center mb-4">
                 <img
-                  src="./../../public/img/icons/keyboard.svg"
+                  src="/img/icons/keyboard.svg"
                   alt="keyboard"
                 />
               </div>
@@ -537,7 +565,7 @@ const LandingPage = () => {
                   <div className="card-header">
                     <div className="text-center">
                       <img
-                        src="./../../public/img/icons/paper-airplane.png"
+                        src="/img/icons/paper-airplane.png"
                         alt="paper airplane icon"
                         className="mb-8 pb-2"
                       />
@@ -636,7 +664,7 @@ const LandingPage = () => {
                   <div className="card-header">
                     <div className="text-center">
                       <img
-                        src="./../../public/img/icons/plane.png"
+                        src="/img/icons/plane.png"
                         alt="plane icon"
                         className="mb-8 pb-2"
                       />
@@ -732,7 +760,7 @@ const LandingPage = () => {
                   <div className="card-header">
                     <div className="text-center">
                       <img
-                        src="./../../public/img/icons/shuttle-rocket.png"
+                        src="/img/icons/shuttle-rocket.png"
                         alt="shuttle rocket icon"
                         className="mb-8 pb-2"
                       />
@@ -841,7 +869,7 @@ const LandingPage = () => {
                 <div className="card border border-primary shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/icons/laptop.svg"
+                      src="/img/icons/laptop.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -858,7 +886,7 @@ const LandingPage = () => {
                 <div className="card border border-success shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/icons/user-success.svg"
+                      src="/img/icons/user-success.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -875,7 +903,7 @@ const LandingPage = () => {
                 <div className="card border border-info shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/icons/diamond-info.svg"
+                      src="/img/icons/diamond-info.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -892,7 +920,7 @@ const LandingPage = () => {
                 <div className="card border border-warning shadow-none">
                   <div className="card-body text-center">
                     <img
-                      src="./../../public/img/icons/check-warning.svg"
+                      src="/img/icons/check-warning.svg"
                       alt="laptop"
                       className="mb-4"
                     />
@@ -921,7 +949,7 @@ const LandingPage = () => {
               <span className="position-relative fw-extrabold z-1">
                 questions
                 <img
-                  src="./../../public/img/icons/section-title-icon.png"
+                  src="/img/icons/section-title-icon.png"
                   alt="laptop charging"
                   className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                 />
@@ -935,7 +963,7 @@ const LandingPage = () => {
               <div className="col-lg-5">
                 <div className="text-center">
                   <img
-                    src="./../../public/img/illustrations/faq-boy-with-logos.png"
+                    src="/img/illustrations/faq-boy-with-logos.png"
                     alt="faq boy with logos"
                     className="faq-image"
                   />
@@ -1098,7 +1126,7 @@ const LandingPage = () => {
         {/*  CTA: Start */}
         <section id="landingCTA" className="section-py landing-cta ">
           <img
-            src="./../../public/img/backgrounds/cta-bg-light.png"
+            src="img/backgrounds/cta-bg-light.png"
             className="position-absolute bottom-0 end-0 scaleX-n1-rtl h-100 w-100 z-n1"
             alt="cta image"
             data-app-light-img="backgrounds/cta-bg-light.png"
@@ -1117,7 +1145,7 @@ const LandingPage = () => {
                     <span className="position-relative fw-extrabold z-1">
                       Let's work
                       <img
-                        src="./../../public/img/icons/section-title-icon.png"
+                        src="/img/icons/section-title-icon.png"
                         alt="laptop charging"
                         className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                       />
@@ -1187,7 +1215,7 @@ const LandingPage = () => {
               <div className="col-lg-6 pt-lg-12 text-center text-lg-end">
                 <img
                   style={{ width: "80%" }}
-                  src="./../../public/img/images/contact-customer-service.png"
+                  src="/img/images/contact-customer-service.png"
                   alt="hero elements"
                 ></img>
               </div>
@@ -1210,7 +1238,7 @@ const LandingPage = () => {
               <span className="position-relative fw-extrabold z-1">
                 Let's work
                 <img
-                  src="./../../public/img/icons/section-title-icon.png"
+                  src="/img/icons/section-title-icon.png"
                   alt="laptop charging"
                   className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                 />
@@ -1224,12 +1252,12 @@ const LandingPage = () => {
               <div className="col-lg-5">
                 <div className="contact-img-box position-relative border p-2 h-100">
                   <img
-                    src="./../../public/img/icons/contact-border.png"
+                    src="/img/icons/contact-border.png"
                     alt="contact border"
                     className="contact-border-img position-absolute d-none d-lg-block scaleX-n1-rtl"
                   />
                   <img
-                    src="./../../public/img/images/contact-customer-service.png"
+                    src="/img/images/contact-customer-service.png"
                     alt="contact customer service"
                     className="contact-img w-100 scaleX-n1-rtl"
                   />
@@ -1352,7 +1380,7 @@ const LandingPage = () => {
       <footer className="landing-footer bg-body footer-text">
         <div className="footer-top position-relative overflow-hidden z-1">
           <img
-            src="./../../public/img/backgrounds/footer-bg.png"
+            src="/img/backgrounds/footer-bg.png"
             alt="footer bg"
             className="footer-bg banner-bg-img z-n1"
           />
@@ -1452,7 +1480,7 @@ const LandingPage = () => {
                             padding: "0px",
                             borderRadius: "50px",
                           }}
-                          src="../../../public/img/brand/marco.png"
+                          src="/img/brand/marco.png"
                           width="50"
                         />
                         <span> Marco PMS</span>
@@ -1489,7 +1517,7 @@ const LandingPage = () => {
                 <h6 className="footer-title mt-3">Download our app</h6>
                 <a href="javascript:void(0);">
                   <img
-                    src="./../../public/img/icons/apple-icon.png"
+                    src="/img/icons/apple-icon.png"
                     alt="apple icon"
                   />
                 </a>
@@ -1498,7 +1526,7 @@ const LandingPage = () => {
                   target="_blank"
                 >
                   <img
-                    src="./../../public/img/icons/google-play-icon.png"
+                    src="/img/icons/google-play-icon.png"
                     alt="google play icon"
                   />
                 </a>
@@ -1527,7 +1555,7 @@ const LandingPage = () => {
                 target="_blank"
               >
                 <img
-                  src="./../../public/img/icons/facebook.svg"
+                  src="/img/icons/facebook.svg"
                   alt="facebook icon"
                 />
               </a>
@@ -1537,13 +1565,13 @@ const LandingPage = () => {
                 target="_blank"
               >
                 <img
-                  src="./../../public/img/icons/twitter.svg"
+                  src="/img/icons/twitter.svg"
                   alt="twitter icon"
                 />
               </a>
               <a href="https://www.instagram.com/marcoaiot/" target="_blank">
                 <img
-                  src="./../../public/img/icons/instagram.svg"
+                  src="/img/icons/instagram.svg"
                   alt="google icon"
                 />
               </a>