diff --git a/src/app/globals.css b/src/app/globals.css
index aa2ef70..6cbab07 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9463,26 +9463,25 @@ body {
 .form-textarea {
   width: 100%;
   padding: 15px 20px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid #e2e8f0;
+  background-color: #ffffff;
   border-radius: 12px;
   outline: none;
   font-size: 15px;
-  color: #fff;
+  color: #787878;
   transition: all 0.3s ease;
   height: 60px;
 }
 
 .form-select-custom-styled-global option,
 .form-select option {
-  background-color: #111827;
-  color: #fff;
+  background-color: #ffffff;
+  color: #1e293b;
 }
 
 .form-textarea-custom-global,
 .form-textarea {
   min-height: 110px;
-  /* height: auto; */
   resize: vertical;
 }
 
@@ -9493,7 +9492,7 @@ body {
 .form-textarea:focus,
 .form-select:focus {
   border-color: #3779b9;
-  background-color: rgba(255, 255, 255, 0.08);
+  background-color: #ffffff;
   box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.15);
 }
 
@@ -10125,7 +10124,7 @@ body {
   border-radius: 12px;
   border: 1px solid #e2e8f0;
   outline: none;
-  background: #fff;
+  /* background: #fff; */
   transition: all 0.3s ease;
   font-size: 14px;
   color: #1e293b;
@@ -17736,9 +17735,9 @@ h4.service-details__dynamic-content-erp {
 
 .careers-popup-optimized .form-input {
   padding: 10px 14px !important;
-  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
-  background: rgba(255, 255, 255, 0.03) !important;
-  color: #fff !important;
+  border: 1.5px solid #e2e8f0 !important;
+  /* background: #ffffff !important; */
+  color: #787878 !important;
   font-weight: 500 !important;
   border-radius: 10px !important;
 }
@@ -17746,14 +17745,15 @@ h4.service-details__dynamic-content-erp {
 
 .careers-popup-optimized .form-input:focus {
   border-color: #3779b9 !important;
-  background: rgba(55, 121, 185, 0.05) !important;
+  background: #ffffff !important;
   box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1) !important;
 }
 
 .careers-popup-optimized .form-textarea {
   min-height: 60px !important;
-  background: rgba(255, 255, 255, 0.03) !important;
-  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
+  background: #ffffff !important;
+  border: 1.5px solid #e2e8f0 !important;
+  color: #787878 !important;
 }
 
 /* File Upload Popup Styling */
@@ -17769,8 +17769,9 @@ h4.service-details__dynamic-content-erp {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1.5px dashed rgba(255, 255, 255, 0.1);
+  background: #ffffff;
+  color: #000000 !important;
+  border: 1.5px dashed #c0cad8;
   border-radius: 10px;
   padding: 8px 12px;
   cursor: pointer;
@@ -17779,11 +17780,11 @@ h4.service-details__dynamic-content-erp {
 
 .careers-popup-optimized .file-upload-label:hover {
   border-color: #3779b9;
-  background: rgba(255, 255, 255, 0.05);
+  background: #f0f6ff;
 }
 
 .careers-popup-optimized .file-content {
-  color: rgba(255, 255, 255, 0.6);
+  color: #000000;
 }
 
 /* ── Careers Popup Optimized (Dark Theme & No-Scroll) ── */
@@ -17852,23 +17853,24 @@ h4.service-details__dynamic-content-erp {
 
 .careers-popup-optimized .form-input {
   padding: 12px 16px !important;
-  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
-  background: rgba(255, 255, 255, 0.03) !important;
-  color: #fff !important;
+  border: 1.5px solid #e2e8f0 !important;
+  /* background: #ffffff !important; */
+  color: #787878 !important;
   font-weight: 500 !important;
   border-radius: 12px !important;
 }
 
 .careers-popup-optimized .form-input:focus {
   border-color: #3779b9 !important;
-  background: rgba(55, 121, 185, 0.05) !important;
+  /* background: #ffffff !important; */
   box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1) !important;
 }
 
 .careers-popup-optimized .form-textarea {
   min-height: 80px !important;
-  background: rgba(255, 255, 255, 0.03) !important;
-  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
+  background: #ffffff !important;
+  border: 1.5px solid #e2e8f0 !important;
+  color: #787878 !important;
 }
 
 /* File Upload Popup Styling */
@@ -17884,8 +17886,9 @@ h4.service-details__dynamic-content-erp {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1.5px dashed rgba(255, 255, 255, 0.1);
+  background: #ffffff;
+  color: #000000 !important;
+  border: 1.5px dashed #c0cad8;
   border-radius: 12px;
   padding: 10px 15px;
   cursor: pointer;
@@ -17894,16 +17897,17 @@ h4.service-details__dynamic-content-erp {
 
 .careers-popup-optimized .file-upload-label:hover {
   border-color: #3779b9;
-  background: rgba(255, 255, 255, 0.05);
+  background: #f0f6ff;
 }
 
 .careers-popup-optimized .file-content {
-  color: rgba(255, 255, 255, 0.6);
+  color: #787878;
 }
 
 .careers-popup-optimized .file-name-text {
   font-size: 13px;
   font-weight: 500;
+  color: #787878;
 }
 
 .careers-popup-optimized .file-browse-btn {
diff --git a/src/components/about/Results.tsx b/src/components/about/Results.tsx
index ac5c819..92db7bd 100644
--- a/src/components/about/Results.tsx
+++ b/src/components/about/Results.tsx
@@ -13,7 +13,7 @@ const ResultsSection = () => {
                                     <h6 className="sec-title__tagline">Discover Our Process</h6>
                                     <h3 className="sec-title__title">How We Deliver Exceptional Results</h3>
                                 </div>
-                                <img src="/assets/images/services/deliver/element.webp" alt="How We Deliver Exceptional Results" className="sec-title__text-shape" />
+                                <img loading="lazy" src="/assets/images/services/deliver/element.webp" alt="How We Deliver Exceptional Results" className="sec-title__text-shape" />
                                 <p>
                                     Delve into Metatroncube’s unique approach to delivering exceptional results. Our ‘Discover Our Process’ section illuminates the meticulous steps we take in transforming your digital vision into tangible success.
                                 </p>
@@ -55,11 +55,11 @@ const ResultsSection = () => {
                     <div className="col-lg-6">
                         <div className="image-area-wrapper p-relative">
                             <div className="main-image">
-                                <img src="/assets/images/services/deliver/big-img.webp" alt="Business Meeting" />
+                                <img loading="lazy" src="/assets/images/services/deliver/big-img.webp" alt="Business Meeting" />
                             </div>
                             <div className="circular-image">
                                 <div className="inner-circle">
-                                    <img src="/assets/images/services/deliver/small-img.webp" alt="Profile" />
+                                    <img loading="lazy" src="/assets/images/services/deliver/small-img.webp" alt="Profile" />
                                 </div>
                             </div>
                         </div>
diff --git a/src/components/about/WhyChooseUs.tsx b/src/components/about/WhyChooseUs.tsx
index 1aea7f2..0b8ff03 100644
--- a/src/components/about/WhyChooseUs.tsx
+++ b/src/components/about/WhyChooseUs.tsx
@@ -10,11 +10,11 @@ const WhyChooseUs = () => {
                     <div className="col-lg-6">
                         <div className="image-area-wrapper p-relative">
                             <div className="main-image">
-                                <img src="/assets/images/careers/3/big-img.webp" alt="Business Meeting" />
+                                <img loading="lazy" src="/assets/images/careers/3/big-img.webp" alt="Business Meeting" />
                             </div>
                             <div className="circular-image">
                                 <div className="inner-circle">
-                                    <img src="/assets/images/careers/3/small-ing.webp" alt="Profile" />
+                                    <img loading="lazy" src="/assets/images/careers/3/small-ing.webp" alt="Profile" />
                                 </div>
                             </div>
                         </div>
diff --git a/src/components/blog/BlogDetails.tsx b/src/components/blog/BlogDetails.tsx
index 0b8d24f..b9a943e 100644
--- a/src/components/blog/BlogDetails.tsx
+++ b/src/components/blog/BlogDetails.tsx
@@ -39,7 +39,7 @@ const BlogDetails = ({ blog }: BlogDetailsProps) => {
                     <div className="col-lg-8">
                         <div className="blog-details-content">
                             <div className="blog-details-img mb-40">
-                                <img src={blog.big_image || blog.image} alt={blog.title} className="w-100" />
+                                <img loading="lazy" src={blog.big_image || blog.image} alt={blog.title} className="w-100" />
                             </div>
 
                             <div className="blog-meta mb-30">
diff --git a/src/components/blog/BlogSidebar.tsx b/src/components/blog/BlogSidebar.tsx
index af535c1..6a5b6f7 100644
--- a/src/components/blog/BlogSidebar.tsx
+++ b/src/components/blog/BlogSidebar.tsx
@@ -146,7 +146,7 @@ const BlogSidebar = ({
                         <div key={post.id} className="single-post-item">
                             <div className="thumb bg-cover">
                                 <Link href={`/${post.slug}`}>
-                                    <img src={post.image} alt={post.title} />
+                                    <img loading="lazy" src={post.image} alt={post.title} />
                                 </Link>
                             </div>
                             <div className="post-content">
diff --git a/src/components/cards/ServiceCard.tsx b/src/components/cards/ServiceCard.tsx
index 125fa5f..00c1921 100644
--- a/src/components/cards/ServiceCard.tsx
+++ b/src/components/cards/ServiceCard.tsx
@@ -10,7 +10,7 @@ const ServiceCard: React.FC<ServiceCardProps> = ({ service }) => {
     return (
         <div className="service1-boxarea">
             <div className="icons">
-                <img src={service.icon} alt={service.title} />
+                <img loading="lazy" src={service.icon} alt={service.title} />
             </div>
             <div className="space24"></div>
             <div className="space16"></div>
diff --git a/src/components/careers/CareersWorkProcess.tsx b/src/components/careers/CareersWorkProcess.tsx
index 261d942..2d51343 100644
--- a/src/components/careers/CareersWorkProcess.tsx
+++ b/src/components/careers/CareersWorkProcess.tsx
@@ -104,7 +104,7 @@ const CareersWorkProcess = () => {
                                     <h3>{step.title}</h3>
                                     <p>{step.desc}</p>
                                     <div className="icon">
-                                        <img src={step.icon} alt={step.title} style={{ width: "60px", height: "60px", objectFit: "contain" }} />
+                                        <img loading="lazy" src={step.icon} alt={step.title} style={{ width: "60px", height: "60px", objectFit: "contain" }} />
                                     </div>
                                 </div>
                             </div>
diff --git a/src/components/careers/ContactSection.tsx b/src/components/careers/ContactSection.tsx
index c6fbd69..9d99b68 100644
--- a/src/components/careers/ContactSection.tsx
+++ b/src/components/careers/ContactSection.tsx
@@ -145,7 +145,7 @@ const ContactSection = () => {
                     </div>
                     <div className="col-lg-4">
                         <div className="contact-one__image wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
-                            <img src="/assets/images/about/7/4-top-right.webp" alt="Contact Support" />
+                            <img loading="lazy" src="/assets/images/about/7/4-top-right.webp" alt="Contact Support" />
                         </div>
                     </div>
                 </div>
@@ -159,7 +159,7 @@ const ContactSection = () => {
                     <div className="row">
                         <div className="col-lg-6">
                             <div className="contact-one__image-two">
-                                <img src="/assets/images/about/7/4-left-img.webp" alt="Business Growth" />
+                                <img loading="lazy" src="/assets/images/about/7/4-left-img.webp" alt="Business Growth" />
                             </div>
                         </div>
                         <div className="col-lg-6">
diff --git a/src/components/careers/FaqVideoSection.tsx b/src/components/careers/FaqVideoSection.tsx
index 97de915..405341d 100644
--- a/src/components/careers/FaqVideoSection.tsx
+++ b/src/components/careers/FaqVideoSection.tsx
@@ -104,7 +104,7 @@ const FaqVideoSection = () => {
                                     </div>
                                 )}
 
-                                <form className="faq-contact-form" onSubmit={handleSubmit}>
+                                <form className="faq-contact-form" onSubmit={handleSubmit} suppressHydrationWarning>
                                     <div className="row">
                                         <div className="col-md-6 mb-20">
                                             <label className="faq-form-label">Full Name</label>
@@ -114,6 +114,7 @@ const FaqVideoSection = () => {
                                                 placeholder="Full Name"
                                                 value={formData.name}
                                                 onChange={handleChange}
+                                                suppressHydrationWarning
                                             />
                                             {formErrors.name && <small className="faq-error">{formErrors.name}</small>}
                                         </div>
@@ -125,6 +126,7 @@ const FaqVideoSection = () => {
                                                 placeholder="Email Address"
                                                 value={formData.email}
                                                 onChange={handleChange}
+                                                suppressHydrationWarning
                                             />
                                             {formErrors.email && <small className="faq-error">{formErrors.email}</small>}
                                         </div>
@@ -136,6 +138,7 @@ const FaqVideoSection = () => {
                                                 placeholder="Phone Number"
                                                 value={formData.phone}
                                                 onChange={handleChange}
+                                                suppressHydrationWarning
                                             />
                                             {formErrors.phone && <small className="faq-error">{formErrors.phone}</small>}
                                         </div>
@@ -146,6 +149,7 @@ const FaqVideoSection = () => {
                                                 value={formData.service}
                                                 onChange={handleChange}
                                                 className="faq-select"
+                                                suppressHydrationWarning
                                             >
                                                 <option value="">Select Service</option>
                                                 <option value="Website Development">Website Development</option>
@@ -165,6 +169,7 @@ const FaqVideoSection = () => {
                                                 rows={5}
                                                 value={formData.message}
                                                 onChange={handleChange}
+                                                suppressHydrationWarning
                                             ></textarea>
                                             {formErrors.message && <small className="faq-error">{formErrors.message}</small>}
                                         </div>
diff --git a/src/components/careers/ServiceSection.tsx b/src/components/careers/ServiceSection.tsx
index eddb79f..59cdd0a 100644
--- a/src/components/careers/ServiceSection.tsx
+++ b/src/components/careers/ServiceSection.tsx
@@ -60,7 +60,7 @@ const ServiceSection2 = () => {
                         <h6 className="sec-title__tagline">OUR BEST SERVICE</h6>
                         <h3 className="sec-title__title">We Run All Kinds Of Services <br /> From Technologies</h3>
                     </div>
-                    <img src="/assets/images/services/service/element-small.webp" alt="We Run All Kinds Of Services" className="sec-title__text-shape" />
+                    <img loading="lazy" src="/assets/images/services/service/element-small.webp" alt="We Run All Kinds Of Services" className="sec-title__text-shape" />
                 </div>
 
                 <div className="row mt-50 justify-content-center">
@@ -76,7 +76,7 @@ const ServiceSection2 = () => {
                                 <div className="home-services__card__shape--two"></div>
                                 <div className="home-services__card__content">
                                     <div className="home-services__card__icon">
-                                        <img src={service.icon} alt="icon" width="42" height="42" />
+                                        <img loading="lazy" src={service.icon} alt="icon" width="42" height="42" />
                                     </div>
                                     <h4 className="home-services__card__count">--</h4>
                                     <h2 className="home-services__card__title">
@@ -87,7 +87,7 @@ const ServiceSection2 = () => {
                                     </p>
                                 </div>
                                 <div className="home-services__card__image">
-                                    <img src={service.image} alt={service.title} />
+                                    <img loading="lazy" src={service.image} alt={service.title} />
                                     <div className="home-services__card__hover">
                                         <Link href={`/service/${service.slug}`} className="home-services__card__hover-link">
                                             <i className="fa-solid fa-arrow-right"></i>
diff --git a/src/components/careers/WorkProcessSection.tsx b/src/components/careers/WorkProcessSection.tsx
index 57b4ba1..f4102be 100644
--- a/src/components/careers/WorkProcessSection.tsx
+++ b/src/components/careers/WorkProcessSection.tsx
@@ -85,7 +85,7 @@ const WorkProcessSection2 = () => {
             <div className="container">
                 <div className="work-process-wrapper style2">
                     <div className="shape1 d-none d-xxl-block">
-                        <img src="/assets/images/services/journey/element-2.webp" alt="digital transformation journey" />
+                        <img loading="lazy" src="/assets/images/services/journey/element-2.webp" alt="digital transformation journey" />
                     </div>
 
                     <div className="row justify-content-center mb-30">
@@ -103,7 +103,7 @@ const WorkProcessSection2 = () => {
                     <div className="row gy-5 gx-70 align-items-center">
                         <div className="col-xl-5">
                             <figure className="main-image text-center m-img wow fadeInUp" data-wow-delay="0.5s">
-                                <img src="/assets/images/careers/career.webp" alt="Our story" loading="lazy" />
+                                <img loading="lazy" src="/assets/images/careers/career.webp" alt="Our story" />
                             </figure>
                         </div>
 
diff --git a/src/components/common/InnerBanner.tsx b/src/components/common/InnerBanner.tsx
index 51df424..84064af 100644
--- a/src/components/common/InnerBanner.tsx
+++ b/src/components/common/InnerBanner.tsx
@@ -162,6 +162,7 @@ const InnerBanner = ({
           data-wow-duration="1500ms"
         >
           <img
+            loading="lazy"
             src="/assets/img/elements/elements16.png"
             alt="shape"
             width={169}
@@ -177,6 +178,7 @@ const InnerBanner = ({
           data-wow-duration="1500ms"
         >
           <img
+            loading="lazy"
             src="/assets/img/elements/elements8.png"
             alt="shape"
             width={188}
@@ -192,6 +194,7 @@ const InnerBanner = ({
           data-wow-duration="1500ms"
         >
           <img
+            loading="lazy"
             src="/assets/img/elements/elements9.png"
             alt="shape"
             width={535}
diff --git a/src/components/contact/ContactSection.tsx b/src/components/contact/ContactSection.tsx
index 00c4e9d..45c204e 100644
--- a/src/components/contact/ContactSection.tsx
+++ b/src/components/contact/ContactSection.tsx
@@ -189,7 +189,7 @@ const ContactSection = () => {
                                                     borderRadius: '12px',
                                                     outline: 'none',
                                                     fontSize: '15px',
-                                                    color: '#1e293b'
+                                                    color: '#787878'
                                                 }}
                                             >
                                                 <option value="">Select Service</option>
diff --git a/src/components/faq/FaqPageSection.tsx b/src/components/faq/FaqPageSection.tsx
index 16d24b3..8ff7e64 100644
--- a/src/components/faq/FaqPageSection.tsx
+++ b/src/components/faq/FaqPageSection.tsx
@@ -95,7 +95,7 @@ const FaqPageSection = () => {
                     {/* Center Image */}
                     <div className="col-xl-4 col-md-12 text-center">
                         <div className="faq-center-image-wrap">
-                            <img src="/assets/images/faq/1.webp" alt="FAQ Center" className="main-faq-img" />
+                            <img loading="lazy" src="/assets/images/faq/1.webp" alt="FAQ Center" className="main-faq-img" />
                         </div>
                     </div>
 
diff --git a/src/components/home/AboutThree.tsx b/src/components/home/AboutThree.tsx
index bf095c5..35543c3 100644
--- a/src/components/home/AboutThree.tsx
+++ b/src/components/home/AboutThree.tsx
@@ -41,10 +41,10 @@ const AboutThree = () => {
         <section className="about-three">
             <div className="about-three__bg">
                 <div className="about-three__shape-one">
-                    <img src="/assets/images/careers/2/element-1.webp" alt="Team defining innovation strategy at Metatron Cube Solutions." />
+                    <img loading="lazy" src="/assets/images/careers/2/element-1.webp" alt="Team defining innovation strategy at Metatron Cube Solutions." />
                 </div>
                 <div className="about-three__shape-two">
-                    <img src="/assets/images/careers/2/element-2.webp" alt="element-1" />
+                    <img loading="lazy" src="/assets/images/careers/2/element-2.webp" alt="element-1" />
                 </div>
             </div>
             <div className="container">
@@ -63,7 +63,7 @@ const AboutThree = () => {
                                 <ul className="about-three__card__list">
                                     <li className="about-three__card__item">
                                         <div className="about-three__card__icon">
-                                            <img src="/assets/images/careers/2/icon.webp" alt="Innovate Fearlessly" />
+                                            <img loading="lazy" src="/assets/images/careers/2/icon.webp" alt="Innovate Fearlessly" />
                                         </div>
                                         <h3 className='text-white'>Innovate Fearlessly</h3>
                                     </li>
@@ -111,7 +111,7 @@ const AboutThree = () => {
                     <div className="col-xl-6 wow fadeInRight animated" data-wow-delay="200ms">
                         <div className="pelocis-stretch-element-inside-column" style={{ marginLeft: '0px', marginRight: '-375.012px' }}>
                             <div className="about-three__img">
-                                <img src="/assets/images/careers/2/right-img.webp" alt="What we offer" />
+                                <img loading="lazy" src="/assets/images/careers/2/right-img.webp" alt="What we offer" />
                             </div>
                         </div>
                     </div>
diff --git a/src/components/home/AboutTwo.tsx b/src/components/home/AboutTwo.tsx
index 132bc44..833f36a 100644
--- a/src/components/home/AboutTwo.tsx
+++ b/src/components/home/AboutTwo.tsx
@@ -7,11 +7,13 @@ const AboutTwo = () => {
         <section className="about-two">
             <div className="about-two__shape"></div>
             <img
+                loading="lazy"
                 src="/assets/images/services/why/left-element.webp"
                 alt="metatroncube canada"
                 className="about-two__shape__two"
             />
             <img
+                loading="lazy"
                 src="/assets/images/services/why/right-element.webp"
                 alt="metatroncube digital solutions"
                 className="about-two__shape__three"
@@ -22,6 +24,7 @@ const AboutTwo = () => {
                     <div className="col-xl-6">
                         <div className="about-two__img">
                             <img
+                                loading="lazy"
                                 src="/assets/images/services/choose/circle.webp"
                                 alt="about"
                             />
@@ -43,8 +46,8 @@ const AboutTwo = () => {
                             <ul className="about-two__list">
                                 <li>
                                     <div className="about-two__list__icon-box">
-                                        {/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
-                                        <img src="/assets/images/services/why/icon-1.webp" alt="Latest Technology" className="about-two__list__icon" />
+                                        {/* <img loading="lazy" src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
+                                        <img loading="lazy" src="/assets/images/services/why/icon-1.webp" alt="Latest Technology" className="about-two__list__icon" />
                                     </div>
                                     <div className="about-two__list__content">
                                         <h3 className="about-two__list__title">Latest Technology</h3>
@@ -53,8 +56,8 @@ const AboutTwo = () => {
                                 </li>
                                 <li>
                                     <div className="about-two__list__icon-box">
-                                        {/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
-                                        <img src="/assets/images/services/why/icon-2.webp" alt="Certified Experts" className="about-two__list__icon" />
+                                        {/* <img loading="lazy" src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
+                                        <img loading="lazy" src="/assets/images/services/why/icon-2.webp" alt="Certified Experts" className="about-two__list__icon" />
                                     </div>
                                     <div className="about-two__list__content">
                                         <h4 className="about-two__list__title">Certified Experts</h4>
@@ -63,8 +66,8 @@ const AboutTwo = () => {
                                 </li>
                                 <li>
                                     <div className="about-two__list__icon-box">
-                                        {/* <img src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
-                                        <img src="/assets/images/services/why/icon-3.webp" alt="Get Reasonable Price" className="about-two__list__icon" />
+                                        {/* <img loading="lazy" src="/assets/images/services/why/circle.webp" alt="circle" className="about-two__list__circle" /> */}
+                                        <img loading="lazy" src="/assets/images/services/why/icon-3.webp" alt="Get Reasonable Price" className="about-two__list__icon" />
                                     </div>
                                     <div className="about-two__list__content">
                                         <h4 className="about-two__list__title">Get Reasonable Price</h4>
diff --git a/src/components/home/CounsellingSolutions.tsx b/src/components/home/CounsellingSolutions.tsx
index c23ef7a..c1b081a 100644
--- a/src/components/home/CounsellingSolutions.tsx
+++ b/src/components/home/CounsellingSolutions.tsx
@@ -10,11 +10,13 @@ const CounsellingSolutions: React.FC = () => {
                     <div className="col-lg-6">
                         <div className="counselling-solutions__image">
                             <img
+                                loading="lazy"
                                 src="/assets/images/home/4/back.webp"
                                 alt="Why choose metatroncube Software Solution"
                                 className="counselling-solutions__image__one"
                             />
                             <img
+                                loading="lazy"
                                 src="/assets/images/home/4/front.webp"
                                 alt="Why choose Metatroncube Software Solution"
                                 className="counselling-solutions__image__two"
diff --git a/src/components/home/CounterAreaThree.tsx b/src/components/home/CounterAreaThree.tsx
index 32b4bcd..e2c04f6 100644
--- a/src/components/home/CounterAreaThree.tsx
+++ b/src/components/home/CounterAreaThree.tsx
@@ -87,7 +87,7 @@ const CounterAreaThree: React.FC = () => {
                     {counterItems.map((item, index) => (
                         <li key={index} className="counter-area-three__item count-box">
                             <div className="counter-area-three__icon">
-                                <img src={item.icon} alt={item.text} />
+                                <img loading="lazy" src={item.icon} alt={item.text} />
                             </div>
                             <div className="counter-area-three__content">
                                 <h3 className="counter-area-three__count">
diff --git a/src/components/home/CounterAreaTwo.tsx b/src/components/home/CounterAreaTwo.tsx
index 33e7bdd..b8ca2ef 100644
--- a/src/components/home/CounterAreaTwo.tsx
+++ b/src/components/home/CounterAreaTwo.tsx
@@ -87,7 +87,7 @@ const CounterAreaTwo: React.FC = () => {
                     {counterItems.map((item, index) => (
                         <li key={index} className="counter-area-two__item count-box">
                             <div className="counter-area-two__icon">
-                                <img src={item.icon} alt={item.text} />
+                                <img loading="lazy" src={item.icon} alt={item.text} />
                             </div>
                             <div className="counter-area-two__content">
                                 <h3 className="counter-area-two__count">
diff --git a/src/components/home/FaqFive.tsx b/src/components/home/FaqFive.tsx
index 7c86a5f..a110984 100644
--- a/src/components/home/FaqFive.tsx
+++ b/src/components/home/FaqFive.tsx
@@ -65,6 +65,7 @@ const FaqFive = () => {
                         <div className="pelocis-stretch-element-inside-column">
                             <div className="faq-four__image2 text-center">
                                 <img
+                                    loading="lazy"
                                     src="/assets/images/faq/3.webp"
                                     alt="Metatroncube FAQs: web-apps, SEO, & digital marketing"
                                 />
diff --git a/src/components/home/HistoryTwo.tsx b/src/components/home/HistoryTwo.tsx
index c368eca..9c0a271 100644
--- a/src/components/home/HistoryTwo.tsx
+++ b/src/components/home/HistoryTwo.tsx
@@ -30,12 +30,12 @@ const HistoryTwo = () => {
                     <div className="col-md-6 d-none d-md-block">
                         <div className="history-two__images">
                             <span className="history-two__images__date"></span>
-                            <img src="/assets/images/about/4/1.webp" alt="our mission" />
+                            <img loading="lazy" src="/assets/images/about/4/1.webp" alt="our mission" />
                         </div>
                     </div>
                     <div className="col-md-6 d-none d-md-block">
                         <div className="history-two__images history-two__images--right">
-                            <img src="/assets/images/about/4/2.webp" alt="our-vision" />
+                            <img loading="lazy" src="/assets/images/about/4/2.webp" alt="our-vision" />
                             {/* <span className="history-two__images__date">2021</span> */}
                         </div>
                     </div>
@@ -66,7 +66,7 @@ const HistoryTwo = () => {
                     <div className="col-md-6 d-none d-md-block">
                         <div className="history-two__images">
                             <span className="history-two__images__date"></span>
-                            <img src="/assets/images/about/4/3.webp" alt="our values" />
+                            <img loading="lazy" src="/assets/images/about/4/3.webp" alt="our values" />
                         </div>
                     </div>
                 </div>
diff --git a/src/components/home/HomeContactOne.tsx b/src/components/home/HomeContactOne.tsx
index 5c75aa5..eea19db 100644
--- a/src/components/home/HomeContactOne.tsx
+++ b/src/components/home/HomeContactOne.tsx
@@ -123,7 +123,7 @@ const HomeContactOne = () => {
                                         <span className="fa-solid fa-location-dot"></span>
                                         <div className="pl-5">
                                             <h3 className="home-contact__card__list__title">Location</h3>
-                                            <p className="home-contact__card__list__text">Canada</p>
+                                            <p className="home-contact__card__list__text">Waterloo, Ontario Canada</p>
                                         </div>
                                         <div className="home-contact__card__list__shape"></div>
                                     </li>
diff --git a/src/components/home/HomeServiceOne.tsx b/src/components/home/HomeServiceOne.tsx
index 94a8ffc..3fb2bf8 100644
--- a/src/components/home/HomeServiceOne.tsx
+++ b/src/components/home/HomeServiceOne.tsx
@@ -43,7 +43,7 @@ const HomeServiceOne: React.FC = () => {
                                             <div className="home-services__card__shape--two"></div>
                                             <div className="home-services__card__content">
                                                 <div className="home-services__card__icon">
-                                                    <img src={service.icon} alt="icon" width="42" height="42" />
+                                                    <img loading="lazy" src={service.icon} alt="icon" width="42" height="42" />
                                                 </div>
                                                 <h4 className="home-services__card__count">--</h4>
                                                 <h2 className="home-services__card__title">
@@ -54,7 +54,7 @@ const HomeServiceOne: React.FC = () => {
                                                 </p>
                                             </div>
                                             <div className="home-services__card__image">
-                                                <img src={service.image} alt={service.title} />
+                                                <img loading="lazy" src={service.image} alt={service.title} />
                                                 <div className="home-services__card__hover">
                                                     <Link href={`/service/${service.slug}`} className="home-services__card__hover-link">
                                                         <i className="fa-solid fa-arrow-right"></i>
diff --git a/src/components/home/PortfolioSection.tsx b/src/components/home/PortfolioSection.tsx
index ae78736..e83bc01 100644
--- a/src/components/home/PortfolioSection.tsx
+++ b/src/components/home/PortfolioSection.tsx
@@ -40,7 +40,7 @@ function MonitorCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen
         <div className="pf-monitor-wrap">
             <div className="pf-monitor" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
                 <div className="pf-monitor-screen">
-                    <img src={item.image} alt={item.alt} loading="lazy" />
+                    <img loading="lazy" src={item.image} alt={item.alt} />
                 </div>
                 <div className="pf-monitor-stand" />
                 <div className="pf-monitor-base" />
@@ -77,7 +77,7 @@ function GraphicCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen
         <div className={`pf-pinned-item ${orientation}`}>
             <div className="pf-pinned-paper" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
                 <div className="pf-pin" />
-                <img src={item.image} alt={item.alt} onLoad={handleLoad} loading="lazy" />
+                <img loading="lazy" src={item.image} alt={item.alt} onLoad={handleLoad} />
             </div>
             <div className="pf-card-info">
                 <h4 className="pf-card-name">{item.name}</h4>
@@ -91,7 +91,7 @@ function MetaCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: (
     return (
         <div className="pf-meta-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
             <div className="pf-meta-screen">
-                <img src={item.image} alt={item.alt} loading="lazy" />
+                <img loading="lazy" src={item.image} alt={item.alt} />
                 <div className="pf-meta-overlay">
                     <h4 className="pf-card-name" style={{ color: '#fff', margin: 0 }}>{item.name}</h4>
                 </div>
@@ -105,7 +105,7 @@ function LogoCard({ item, onOpen }: { item: (typeof PortfolioData)[0], onOpen: (
     return (
         <div className="pf-logo-wrap" onClick={onOpen} style={{ cursor: 'zoom-in' }}>
             <div className="pf-logo-frame">
-                <img src={item.image} alt={item.alt} loading="lazy" />
+                <img loading="lazy" src={item.image} alt={item.alt} />
             </div>
             <div className="pf-card-info">
                 <h3 className="pf-card-name">{item.name}</h3>
@@ -149,7 +149,7 @@ function MobileCard({ item, onOpen }: { item: (typeof MobileAppServicesData)[0],
             <div className="pf-phone">
                 <div className="pf-phone-notch" />
                 <div className="pf-phone-screen">
-                    <img src={item.image} alt={item.alt} loading="lazy" />
+                    <img loading="lazy" src={item.image} alt={item.alt} />
                 </div>
                 <div className="pf-phone-home-btn" />
             </div>
@@ -173,7 +173,7 @@ function PortfolioLightbox({ item, onClose }: { item: any; onClose: () => void }
     return (
         <div className="pf-lightbox-backdrop" onClick={onClose}>
             <div className="pf-lightbox-content" onClick={(e) => e.stopPropagation()}>
-                <img src={item.image} alt={item.alt || item.name} className="pf-lightbox-img" loading="lazy" />
+                <img loading="lazy" src={item.image} alt={item.alt || item.name} className="pf-lightbox-img" />
                 {/* <div className="pf-lightbox-details">
                     <h3>{item.name}</h3>
                 </div> */}
@@ -224,6 +224,7 @@ export default function PortfolioSection() {
                     {TABS.map((tab) => (
                         <button
                             key={tab.value}
+                            suppressHydrationWarning
                             className={`pf-tab-btn${activeTab === tab.value ? " active" : ""}`}
                             onClick={() => setActiveTab(tab.value)}
                         >
diff --git a/src/components/home/ProjectsSection.tsx b/src/components/home/ProjectsSection.tsx
index 0fd726a..23012e0 100644
--- a/src/components/home/ProjectsSection.tsx
+++ b/src/components/home/ProjectsSection.tsx
@@ -88,6 +88,7 @@ const ProjectsSection = () => {
                     {/* Row 1: All Items */}
                     <div className="d-flex justify-content-center mb-4 pr-10">
                         <button
+                            suppressHydrationWarning
                             className={`list-unstyled-item ${activeFilter === "all" ? "active" : ""}`}
                             onClick={() => setActiveFilter("all")}
                         >
@@ -100,6 +101,7 @@ const ProjectsSection = () => {
                         {categories.slice(1, 4).map((cat, idx) => (
                             <button
                                 key={idx}
+                                suppressHydrationWarning
                                 className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`}
                                 onClick={() => setActiveFilter(cat.filter)}
                             >
@@ -113,6 +115,7 @@ const ProjectsSection = () => {
                         {categories.slice(4, 7).map((cat, idx) => (
                             <button
                                 key={idx}
+                                suppressHydrationWarning
                                 className={`list-unstyled-item ${activeFilter === cat.filter ? "active" : ""}`}
                                 onClick={() => setActiveFilter(cat.filter)}
                             >
@@ -127,7 +130,7 @@ const ProjectsSection = () => {
                     {filteredProjects.map((project) => (
                         <div key={project.id} className="project-item">
                             <div className="projects-one__card" style={{ cursor: 'pointer' }} onClick={(e) => openPopup(project.title, e)}>
-                                <img src={project.image} alt={project.title} />
+                                <img loading="lazy" src={project.image} alt={project.title} />
                                 <div className="projects-one__card__hover d-flex">
                                     <div className="projects-one__card__hover-mask"></div>
                                     <div className="projects-one__card__hover-content-inner">
@@ -138,7 +141,7 @@ const ProjectsSection = () => {
                                             <p>{project.description}</p>
                                         </div>
                                         <div className="projects-one__card__hover-item"></div>
-                                        <div 
+                                        <div
                                             className="projects-one__card__hover-link"
                                             style={{ cursor: 'pointer' }}
                                             onClick={(e) => openPopup(project.title, e)}
@@ -160,9 +163,9 @@ const ProjectsSection = () => {
                 )}
             </div>
 
-            <CareersContactPopup 
-                isOpen={isPopupOpen} 
-                onClose={closePopup} 
+            <CareersContactPopup
+                isOpen={isPopupOpen}
+                onClose={closePopup}
                 defaultPosition={selectedPosition}
             />
         </section>
diff --git a/src/components/home/WhyChooseTwo.tsx b/src/components/home/WhyChooseTwo.tsx
index 0eafa24..88662df 100644
--- a/src/components/home/WhyChooseTwo.tsx
+++ b/src/components/home/WhyChooseTwo.tsx
@@ -7,7 +7,7 @@ interface WhyChooseTwoProps {
 const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
     return (
         <section className="why-choose-two">
-            <img src="/assets/images/about/3/element-bottom-left.webp" alt="Agency that gets excited about element" className="why-choose-two__shape-three" />
+            <img loading="lazy" src="/assets/images/about/3/element-bottom-left.webp" alt="Agency that gets excited about element" className="why-choose-two__shape-three" />
             <div className="container">
                 <div className={`row ${reverse ? 'flex-row-reverse' : ''}`}>
                     <div className="col-xl-6">
@@ -28,7 +28,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                                     <li className="why-choose-two__item">
                                         <div className="why-choose-two__count"></div>
                                         <div className="why-choose-two__icon">
-                                            <img src="/assets/images/about/3/icon-1.webp" alt="Urgent development solutions" />
+                                            <img loading="lazy" src="/assets/images/about/3/icon-1.webp" alt="Urgent development solutions" />
                                         </div>
                                         <div className="why-choose-two__item__content">
                                             <h3 className="why-choose-two__item__title">Urgent development solutions</h3>
@@ -40,7 +40,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                                     <li className="why-choose-two__item">
                                         <div className="why-choose-two__count"></div>
                                         <div className="why-choose-two__icon">
-                                             <img src="/assets/images/about/3/icon-2.webp" alt="Top quality services with reasonable price" />
+                                            <img loading="lazy" src="/assets/images/about/3/icon-2.webp" alt="Top quality services with reasonable price" />
                                         </div>
                                         <div className="why-choose-two__item__content">
                                             <h3 className="why-choose-two__item__title">Top quality services with reasonable price</h3>
@@ -52,7 +52,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                                     <li className="why-choose-two__item">
                                         <div className="why-choose-two__count"></div>
                                         <div className="why-choose-two__icon">
-                                             <img src="/assets/images/about/3/icon-3.webp" alt="Professional & experienced team" />
+                                            <img loading="lazy" src="/assets/images/about/3/icon-3.webp" alt="Professional & experienced team" />
                                         </div>
                                         <div className="why-choose-two__item__content">
                                             <h3 className="why-choose-two__item__title">Professional & experienced team</h3>
@@ -68,7 +68,7 @@ const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
                     <div className="col-xl-6">
                         <div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-227.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-267.812px' }}>
                             <div className="why-choose-two__shape-one">
-                                <img src="/assets/images/about/3/right-img.webp" alt="Agency that gets excited about" />
+                                <img loading="lazy" src="/assets/images/about/3/right-img.webp" alt="Agency that gets excited about" />
                             </div>
                             <div className="why-choose-two__shape-two"></div>
                         </div>
diff --git a/src/components/home/home-1/AboutSection.tsx b/src/components/home/home-1/AboutSection.tsx
index b633a47..3b91ace 100644
--- a/src/components/home/home-1/AboutSection.tsx
+++ b/src/components/home/home-1/AboutSection.tsx
@@ -14,11 +14,11 @@ const AboutSection = () => {
                         <div className="about-us-image-area p-relative wow fadeInRight" data-wow-delay=".5s">
                             <div className="border-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-6.png)" }}></div>
                             <figure className="image-1">
-                                <img src="/assets/images/about/about.webp" alt="comprehensive digital strategies" />
+                                <img loading="lazy" src="/assets/images/about/about.webp" alt="comprehensive digital strategies" />
                             </figure>
                             {/* <div className="image-2-area">
                                 <div className="image-2 p-relative">
-                                    <img src="/assets/img/about/about-img7.png" alt="" />
+                                    <img loading="lazy" src="/assets/img/about/about-img7.png" alt="" />
                                     <div className="play-btn">
                                         <div className="video_player_btn">
                                             <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
@@ -49,7 +49,7 @@ const AboutSection = () => {
                             <p className="mb-35 wow fadeInLeft" data-wow-delay=".5s">Partner with Metatroncube Software Solution and unlock a world of digital possibilities in web & app development, SEO, digital marketing, and graphic design services. Our commitment extends beyond mere product delivery; we focus on enhancing your market presence and driving business success with comprehensive digital strategies. Experience the unique Metatroncube advantage in every aspect of digital transformation.</p>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".8s">
                                 <div className="icon">
-                                    <img src="/assets/images/home/2/icon-1.webp" alt="Exceptional Digital Quality" />
+                                    <img loading="lazy" src="/assets/images/home/2/icon-1.webp" alt="Exceptional Digital Quality" />
                                 </div>
                                 <div className="content">
                                     <h5>Exceptional Digital Quality</h5>
@@ -58,7 +58,7 @@ const AboutSection = () => {
                             </div>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
                                 <div className="icon">
-                                    <img src="/assets/images/home/2/icon-2.webp" alt="Expertise in innovation" />
+                                    <img loading="lazy" src="/assets/images/home/2/icon-2.webp" alt="Expertise in innovation" />
                                 </div>
                                 <div className="content">
                                     <h5>Expertise in innovation</h5>
@@ -67,7 +67,7 @@ const AboutSection = () => {
                             </div>
                             <div className="icon-box mb-20 wow fadeInLeft" data-wow-delay=".9s">
                                 <div className="icon">
-                                    <img src="/assets/images/home/2/icon-3.webp" alt="Comprehensive web solutions" />
+                                    <img loading="lazy" src="/assets/images/home/2/icon-3.webp" alt="Comprehensive web solutions" />
                                 </div>
                                 <div className="content">
                                     <h5>Comprehensive web solutions</h5>
diff --git a/src/components/home/home-1/BannerSection.tsx b/src/components/home/home-1/BannerSection.tsx
index ddee7a5..ee8aa27 100644
--- a/src/components/home/home-1/BannerSection.tsx
+++ b/src/components/home/home-1/BannerSection.tsx
@@ -120,12 +120,12 @@ const BannerSection = () => {
                                     {/* Right Side: Floating Image Group + Category Slider */}
                                     <div className="hero-right-content" suppressHydrationWarning>
                                         <div className="hero-img-group" suppressHydrationWarning>
-                                            {/* <img src="https://modinatheme.com/html/printnow-html/assets/img/hero/t-shirt-bg.png" alt="shape" className="circle-shape" /> */}
-                                            <img src={banner.images.center} alt="t-shirt" className="main-shirt" />
-                                            {/* <img src="https://modinatheme.com/html/printnow-html/assets/img/hero/mockup-shape.png" alt="shape" className="mockup-shape" /> */}
-                                            <img src={banner.images.leftBottom} alt="shape" className="cup-shape" />
-                                            <img src={banner.images.topRight} alt="shape" className="t-shirt-shape" />
-                                            <img src={banner.images.rightBottom} alt="shape" className="cap-shape" />
+                                            {/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/t-shirt-bg.png" alt="shape" className="circle-shape" /> */}
+                                            <img loading="lazy" src={banner.images.center} alt="t-shirt" className="main-shirt" />
+                                            {/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/mockup-shape.png" alt="shape" className="mockup-shape" /> */}
+                                            <img loading="lazy" src={banner.images.leftBottom} alt="shape" className="cup-shape" />
+                                            <img loading="lazy" src={banner.images.topRight} alt="shape" className="t-shirt-shape" />
+                                            <img loading="lazy" src={banner.images.rightBottom} alt="shape" className="cap-shape" />
                                         </div>
 
                                         {/* Bottom Right "Our Service" Slider */}
@@ -150,7 +150,7 @@ const BannerSection = () => {
                                                             <div key={idx} className="slider-item" suppressHydrationWarning>
                                                                 <div className="slider-image-node" suppressHydrationWarning>
                                                                     <a href={cat.link}>
-                                                                        <img src={cat.image} alt={cat.title} />
+                                                                        <img loading="lazy" src={cat.image} alt={cat.title} />
                                                                     </a>
                                                                 </div>
                                                                 <div className="slider-category-title" suppressHydrationWarning>
diff --git a/src/components/home/home-1/BlogSection.tsx b/src/components/home/home-1/BlogSection.tsx
index c9a278c..b4b4191 100644
--- a/src/components/home/home-1/BlogSection.tsx
+++ b/src/components/home/home-1/BlogSection.tsx
@@ -151,7 +151,7 @@ const BlogSection = ({
                             <div key={blog.id} className="blog-slider-item px-3">
                                 <div className="blog-style-one relative overflow-hidden">
                                     <Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
-                                        <img src={blog.image} alt={blog.title} />
+                                        <img loading="lazy" src={blog.image} alt={blog.title} />
                                         <span className="blog-category-tag">{blog.category}</span>
                                     </Link>
                                     <div className="blog-content">
@@ -180,7 +180,7 @@ const BlogSection = ({
                             <div key={blog.id} className={columns}>
                                 <div className="blog-style-one relative overflow-hidden">
                                     <Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
-                                        <img src={blog.image} alt={blog.title} />
+                                        <img loading="lazy" src={blog.image} alt={blog.title} />
                                         <span className="blog-category-tag">{blog.category}</span>
                                     </Link>
                                     <div className="blog-content">
diff --git a/src/components/home/home-1/ChooseSection.tsx b/src/components/home/home-1/ChooseSection.tsx
index c4f488a..a59960b 100644
--- a/src/components/home/home-1/ChooseSection.tsx
+++ b/src/components/home/home-1/ChooseSection.tsx
@@ -20,7 +20,7 @@ const ChooseSection = () => (
                     </p>
                     <div className="faq-one__card">
                         <div className="faq-one__img">
-                            <img src="/assets/images/home/2/small-img.webp" alt="Located in the Kitchener and Waterloo regions" />
+                            <img loading="lazy" src="/assets/images/home/2/small-img.webp" alt="Located in the Kitchener and Waterloo regions" />
                         </div>
                         <div className="faq-one__content">
                             <ul className="faq-one__list list-unstyled">
@@ -34,7 +34,7 @@ const ChooseSection = () => (
                     </div>
                 </div>
                 <div className="col-xxl-6 col-xl-6 col-lg-12 col-md-12 wow fadeInLeft" data-wow-delay="1.2s">
-                    <figure className="image m-img"><img src="/assets/images/home/3/right-img.webp" alt="Diverse team collaborating over a laptop in an office setting." /></figure>
+                    <figure className="image m-img"><img loading="lazy" src="/assets/images/home/3/right-img.webp" alt="Diverse team collaborating over a laptop in an office setting." /></figure>
                 </div>
             </div>
         </div>
diff --git a/src/components/home/home-1/CtaSection.tsx b/src/components/home/home-1/CtaSection.tsx
index ddb1077..706ee42 100644
--- a/src/components/home/home-1/CtaSection.tsx
+++ b/src/components/home/home-1/CtaSection.tsx
@@ -5,7 +5,7 @@ const CtaSection = () => (
         <div className="small-container">
             <div className="row g-0 box-shadow-1 fix">
                 <div className="col-xxl-6 col-lg-6 bg-white">
-                    <figure className="image w-img"><img src="/assets/images/home/4/lets-discuss.webp" alt="Welcoming young woman smiling, embodying customer-focused service." /></figure>
+                    <figure className="image w-img"><img loading="lazy" src="/assets/images/home/4/lets-discuss.webp" alt="Welcoming young woman smiling, embodying customer-focused service." /></figure>
                 </div>
                 <div className="col-xxl-6 col-lg-6">
                     <div className="content p-relative">
diff --git a/src/components/home/home-1/TestimonialsSection.tsx b/src/components/home/home-1/TestimonialsSection.tsx
index 4ba3910..9b1b6fc 100644
--- a/src/components/home/home-1/TestimonialsSection.tsx
+++ b/src/components/home/home-1/TestimonialsSection.tsx
@@ -86,7 +86,7 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
                 <div className="row g-0">
                     <div className="col-xxl-4 col-xl-4 col-lg-12">
                         <div className="testimonials-video-area p-relative">
-                            <figure className="image w-img"><img src="/assets/images/about/6/left.webp" alt="What they're talking about us" /></figure>
+                            <figure className="image w-img"><img loading="lazy" src="/assets/images/about/6/left.webp" alt="What they're talking about us" /></figure>
                         </div>
                     </div>
                     <div className="col-xxl-8 col-xl-8 col-lg-12">
@@ -125,7 +125,7 @@ const TestimonialsSection = ({ className = "section-space" }: { className?: stri
                                                 <div key={index} style={{ outline: 'none', padding: '10px 15px 40px 10px' }}>
                                                     <div className="testimonials-two-box-solid">
                                                         <div className="author-image-solid">
-                                                            <img src={profileImg} alt={name} />
+                                                            <img loading="lazy" src={profileImg} alt={name} />
                                                         </div>
                                                         <div className="icon-quote-testi">
                                                             <i className="fa-solid fa-quote-right"></i>
diff --git a/src/components/home/home-2/About2Section.tsx b/src/components/home/home-2/About2Section.tsx
index 5b1bb4d..7dbb959 100644
--- a/src/components/home/home-2/About2Section.tsx
+++ b/src/components/home/home-2/About2Section.tsx
@@ -9,10 +9,10 @@ const About2Section = () => (
                 <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-12">
                     <div className="about-2-image-area p-relative wow fadeInLeft" data-wow-delay="500ms">
                         <figure className="main-image m-img">
-                            <img src="/assets/images/about/1/grid.webp" alt="Our story" loading="lazy" />
+                            <img loading="lazy" src="/assets/images/about/1/grid.webp" alt="Our story" />
                         </figure>
                         {/* <div className="small-image">
-                            <img src="/assets/imgs/about/about-4.jpg" alt="" />
+                            <img loading="lazy" src="/assets/imgs/about/about-4.jpg" alt="" />
                         </div> */}
                         {/* <div className="icon-box">
                             <div className="icon">
diff --git a/src/components/home/home-2/WorkProcessSection.tsx b/src/components/home/home-2/WorkProcessSection.tsx
index eb3c176..a814b90 100644
--- a/src/components/home/home-2/WorkProcessSection.tsx
+++ b/src/components/home/home-2/WorkProcessSection.tsx
@@ -21,7 +21,7 @@ const WorkProcessSection = () => (
                     <div key={i} className="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                         <div className="work-process-box text-center">
                             <div className="icon-box p-relative">
-                                <img src={`/assets/images/services/process/${proc.icon}`} alt={proc.desc} />
+                                <img loading="lazy" src={`/assets/images/services/process/${proc.icon}`} alt={proc.desc} />
                                 <span>{proc.num}</span>
                             </div>
                             <div className="content">
diff --git a/src/components/home/home-3/ChooseSection.tsx b/src/components/home/home-3/ChooseSection.tsx
index 2968d71..cd67ede 100644
--- a/src/components/home/home-3/ChooseSection.tsx
+++ b/src/components/home/home-3/ChooseSection.tsx
@@ -10,11 +10,11 @@ const ChooseSection = () => (
                     <div className="choose-3-image-area p-relative">
                         <div className="shape-1" style={{ backgroundImage: "url(/assets/images/services/choose/element-2.webp)" }}></div>
                         <figure className="image w-img">
-                            <img src="/assets/images/services/choose/grid.webp" alt="Crafting tailored digital solutions for every need" />
+                            <img loading="lazy" src="/assets/images/services/choose/grid.webp" alt="Crafting tailored digital solutions for every need" />
                         </figure>
                         {/* <div className="image-3-area">
                             <div className="image-3 p-relative">
-                                <img src="/assets/imgs/about/about-2.jpg" alt="" />
+                                <img loading="lazy" src="/assets/imgs/about/about-2.jpg" alt="" />
                                 <div className="play-btn">
                                     <div className="video_player_btn">
                                         <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
@@ -43,7 +43,7 @@ const ChooseSection = () => (
                                 <div key={i} className="col-lg-6">
                                     <div className="icon-box-area">
                                         <div className="icon-box">
-                                            {item.isIcon ? <i className={item.icon}></i> : <img src={`/assets/imgs/icon/${item.icon}`} alt="img" />}
+                                            {item.isIcon ? <i className={item.icon}></i> : <img loading="lazy" src={`/assets/imgs/icon/${item.icon}`} alt="img" />}
                                         </div>
                                         <h5><a href="#">{item.label}</a></h5>
                                     </div>
diff --git a/src/components/layout/CTA/CTA.tsx b/src/components/layout/CTA/CTA.tsx
index a2faa2c..bd78937 100644
--- a/src/components/layout/CTA/CTA.tsx
+++ b/src/components/layout/CTA/CTA.tsx
@@ -23,24 +23,24 @@ const CTA = () => {
                     <div className="col-lg-3"></div>
                     <div className="col-lg-4">
                         <div className="cta-images">
-                            <img src="/assets/img/home/section10/bg-element.webp" alt="" className="elements7 keyframe5" />
+                            <img loading="lazy" src="/assets/img/home/section10/bg-element.webp" alt="" className="elements7 keyframe5" />
                             <div className="img1">
-                                <img src="/assets/img/home/section10/right-image.webp" alt="" />
+                                <img loading="lazy" src="/assets/img/home/section10/right-image.webp" alt="" />
                             </div>
                             <ul className="aniamtion-key-1">
                                 <li>
                                     <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
-                                        <img src="/assets/img/icons/check5.svg" alt="" />Get Free Consultation
+                                        <img loading="lazy" src="/assets/img/icons/check5.svg" alt="" />Get Free Consultation
                                     </a>
                                 </li>
                                 <li>
                                     <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
-                                        <img src="/assets/img/icons/check5.svg" alt="" /> Request Pricing
+                                        <img loading="lazy" src="/assets/img/icons/check5.svg" alt="" /> Request Pricing
                                     </a>
                                 </li>
                                 <li>
                                     <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
-                                        <img src="/assets/img/icons/check5.svg" alt="" />Talk to an Expert
+                                        <img loading="lazy" src="/assets/img/icons/check5.svg" alt="" />Talk to an Expert
                                     </a>
                                 </li>
                             </ul>
diff --git a/src/components/layout/Footer1.tsx b/src/components/layout/Footer1.tsx
index ba77431..eb281de 100644
--- a/src/components/layout/Footer1.tsx
+++ b/src/components/layout/Footer1.tsx
@@ -47,7 +47,7 @@ const Footer1 = () => {
                             <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                                 <div className="footer-widget-1">
                                     <figure className="image">
-                                        <img src="/assets/images/logo/white-logo-2.png" alt="footer logo" />
+                                        <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="footer logo" />
                                     </figure>
                                     <p className="mt-20 mb-40">Metatroncube Software Solution: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p>
                                     <div className="footer-socials mb-20">
diff --git a/src/components/layout/Header/MobileMenu.tsx b/src/components/layout/Header/MobileMenu.tsx
index 21af119..6a0f007 100644
--- a/src/components/layout/Header/MobileMenu.tsx
+++ b/src/components/layout/Header/MobileMenu.tsx
@@ -28,7 +28,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileM
                     <div className="vl-offcanvas-header d-flex justify-content-between align-items-center mb-90">
                         <div className="vl-offcanvas-logo">
                             <Link href="#home" onClick={toggleMobileMenu}>
-                                <img src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
+                                <img loading="lazy" src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
                             </Link>
                         </div>
                         <div className="vl-offcanvas-close">
diff --git a/src/components/layout/Header1.tsx b/src/components/layout/Header1.tsx
index b70e67a..2619905 100644
--- a/src/components/layout/Header1.tsx
+++ b/src/components/layout/Header1.tsx
@@ -38,7 +38,7 @@ const Header1 = () => {
                         <div className="col-lg-3 col-md-6 col-9">
                             <div className="vl-logo">
                                 <Link href="/">
-                                    <img src="/assets/images/logo/white-logo-2.png" alt="header logo" style={{ width: '100%', maxWidth: '260px', height: 'auto', transition: 'all 0.3s' }} />
+                                    <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="header logo" style={{ width: '100%', maxWidth: '260px', height: 'auto', transition: 'all 0.3s' }} />
                                 </Link>
                             </div>
                         </div>
diff --git a/src/components/mobile-app-development-service/About.tsx b/src/components/mobile-app-development-service/About.tsx
index c5936b0..e36d780 100644
--- a/src/components/mobile-app-development-service/About.tsx
+++ b/src/components/mobile-app-development-service/About.tsx
@@ -8,13 +8,14 @@ const About = () => {
     const [isContactOpen, setIsContactOpen] = useState(false);
     return (
         <div className="about1-section-area sp1" id="about">
-            <img src="/assets/img-app/elements/elements9.png" alt="" className="elements9" />
+            <img loading="lazy" src="/assets/img-app/elements/elements9.png" alt="" className="elements9" />
             <div className="container">
                 <div className="row align-items-center">
                     <div className="col-lg-6">
                         <div className="about-images-area" style={{ position: 'relative' }}>
-                            <img src="/assets/img-app/elements/elements10.png" alt="" className="elements10" />
+                            <img loading="lazy" src="/assets/img-app/elements/elements10.png" alt="" className="elements10" />
                             <img
+                                loading="lazy"
                                 src="/assets/img-app/home/section2/about.webp"
                                 alt="About Metatroncube Software Solution"
                                 style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }}
@@ -26,7 +27,7 @@ const About = () => {
                     <div className="col-lg-5">
                         <div className="about-glass-container about-header-area heading2">
                             <GsapReveal y={20}>
-                                <h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>About Metatroncube Software Solution</h5>
+                                <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>About Metatroncube Software Solution</h5>
                             </GsapReveal>
                             <div className="space24"></div>
                             <GsapReveal y={20} delay={0.2}>
diff --git a/src/components/mobile-app-development-service/BannerBottom.tsx b/src/components/mobile-app-development-service/BannerBottom.tsx
index 8b0ee8d..cd82efc 100644
--- a/src/components/mobile-app-development-service/BannerBottom.tsx
+++ b/src/components/mobile-app-development-service/BannerBottom.tsx
@@ -59,7 +59,7 @@ const BannerBottom = () => {
                                     {floatingItems.map((item, idx) => (
                                         <div key={item.className} className={`floating-item ${item.className}`}>
                                             <div className={`floating-circle ${idx % 2 === 0 ? 'floating-slow' : 'floating-fast'}`}>
-                                                <img src={item.icon} alt={item.title} />
+                                                <img loading="lazy" src={item.icon} alt={item.title} />
                                             </div>
                                             <div className="floating-content">
                                                 <h6>{item.title}</h6>
@@ -71,6 +71,7 @@ const BannerBottom = () => {
 
                                 {/* Central hero image */}
                                 <img
+                                    loading="lazy"
                                     src="/assets/img-app/home/section1/second-section-centre-img.webp"
                                     alt="Digital Solutions Illustration"
                                     className="main-delivery-img img-fluid mt-2"
@@ -118,7 +119,7 @@ const BannerBottom = () => {
                                 }}
                             >
                                 <div className="call-icon-bg" style={{ width: '40px', height: '40px' }}>
-                                    <img src="/assets/img-app/icons/phn1.svg" alt="Phone Icon" />
+                                    <img loading="lazy" src="/assets/img-app/icons/phn1.svg" alt="Phone Icon" />
                                 </div>
                                 <div className="call-details ms-2">
                                     <span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our App Experts Today </span>
diff --git a/src/components/mobile-app-development-service/BrandSlider.tsx b/src/components/mobile-app-development-service/BrandSlider.tsx
index afccdc3..8ce4515 100644
--- a/src/components/mobile-app-development-service/BrandSlider.tsx
+++ b/src/components/mobile-app-development-service/BrandSlider.tsx
@@ -64,7 +64,7 @@ const BrandSlider = () => {
                     <div className="col-lg-8 m-auto text-center">
                         <div className="brand-header heading2 text-center">
                             <GsapReveal y={20}>
-                                <h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Partners</h5>
+                                <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Partners</h5>
                             </GsapReveal>
                             <div className="space24"></div>
                             <GsapReveal y={20} delay={0.2}>
@@ -84,7 +84,7 @@ const BrandSlider = () => {
                     <Slider {...settings}>
                         {brands.map((brand) => (
                             <div key={brand.id} className="brand-item">
-                                <img src={brand.src} alt={brand.alt} />
+                                <img loading="lazy" src={brand.src} alt={brand.alt} />
                             </div>
                         ))}
                     </Slider>
diff --git a/src/components/mobile-app-development-service/CaseStudies.tsx b/src/components/mobile-app-development-service/CaseStudies.tsx
index 4c41b3f..f9e77f8 100644
--- a/src/components/mobile-app-development-service/CaseStudies.tsx
+++ b/src/components/mobile-app-development-service/CaseStudies.tsx
@@ -64,12 +64,12 @@ const CaseStudies = () => {
     return (
         <section className="case-studies-section sp1 position-relative" id="portfolio" style={{ overflow: 'hidden' }}>
 
-            <img src="/assets/img-app/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
-            <img src="/assets/img-app/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
+            <img loading="lazy" src="/assets/img-app/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
+            <img loading="lazy" src="/assets/img-app/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
 
             {/* Floating Elements - Right (4) */}
-            <img src="/assets/img-app/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" />
-            <img src="/assets/img-app/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />
+            <img loading="lazy" src="/assets/img-app/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" />
+            <img loading="lazy" src="/assets/img-app/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />
 
 
             <div className="container">
@@ -80,7 +80,7 @@ const CaseStudies = () => {
                         <div className="consen-section-title upper text-center pb-80 heading2">
                             <GsapReveal y={20}>
                                 <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
-                                    <span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
+                                    <span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
                                     Case Studies
                                 </h5>
                             </GsapReveal>
@@ -156,7 +156,6 @@ const CaseStudies = () => {
                                                 width={200}
                                                 height={200}
                                                 className="loaded"
-                                                priority
                                             />
                                         </div>
                                         <div className="mobile-home-btn"></div>
@@ -188,6 +187,7 @@ const CaseStudies = () => {
 
             {/* Lightbox Component */}
             <ImageLightbox
+
                 isOpen={isLightboxOpen}
                 onClose={closeLightbox}
                 imageUrl={selectedImage || ""}
diff --git a/src/components/mobile-app-development-service/CaseStudy.tsx b/src/components/mobile-app-development-service/CaseStudy.tsx
index 9e84868..2a31267 100644
--- a/src/components/mobile-app-development-service/CaseStudy.tsx
+++ b/src/components/mobile-app-development-service/CaseStudy.tsx
@@ -58,12 +58,12 @@ const CaseStudy = () => {
                                     </div>
                                     <div className="col-lg-4">
                                         <div className="images" data-aos="zoom-in" data-aos-duration="1000">
-                                            <img src="/assets/img-app/elements/elements43.png" alt="" className="elements43" />
-                                            <img src="/assets/img-app/elements/elements27.png" alt="" className="elements27" />
-                                            <img src="/assets/img-app/elements/elements30.png" alt="" className="elements30" />
-                                            <img src="/assets/img-app/elements/elements39.png" alt="" className="elements39" />
+                                            <img loading="lazy" src="/assets/img-app/elements/elements43.png" alt="" className="elements43" />
+                                            <img loading="lazy" src="/assets/img-app/elements/elements27.png" alt="" className="elements27" />
+                                            <img loading="lazy" src="/assets/img-app/elements/elements30.png" alt="" className="elements30" />
+                                            <img loading="lazy" src="/assets/img-app/elements/elements39.png" alt="" className="elements39" />
                                             <div className="img1">
-                                                <img src="/assets/img-app/all-images/case/case-img4.png" alt="" />
+                                                <img loading="lazy" src="/assets/img-app/all-images/case/case-img4.png" alt="" />
                                             </div>
                                         </div>
                                     </div>
diff --git a/src/components/mobile-app-development-service/FAQ.tsx b/src/components/mobile-app-development-service/FAQ.tsx
index 21b7aae..28f1eea 100644
--- a/src/components/mobile-app-development-service/FAQ.tsx
+++ b/src/components/mobile-app-development-service/FAQ.tsx
@@ -97,7 +97,7 @@ const FAQ = () => {
                         <div className="space-margin60">
                             <GsapReveal y={20}>
                                 <h5 className="faqv2-subtitle">
-                                    <span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
+                                    <span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
                                     FAQ
                                 </h5>
                             </GsapReveal>
@@ -139,6 +139,7 @@ const FAQ = () => {
                         <div className="faqv2-center-wrap">
                             <div className="faqv2-main-img">
                                 <img
+                                    loading="lazy"
                                     src="/assets/img-app/home/section9/faq.webp"
                                     alt="FAQ Section"
                                 />
diff --git a/src/components/mobile-app-development-service/Hero.tsx b/src/components/mobile-app-development-service/Hero.tsx
index 0b131c8..e64b30c 100644
--- a/src/components/mobile-app-development-service/Hero.tsx
+++ b/src/components/mobile-app-development-service/Hero.tsx
@@ -11,8 +11,8 @@ const Hero = () => {
 
     return (
         <div className="hero1-section-area" id="home">
-            <img src="/assets/img-app/elements/elements4.png" alt="" className="elements4" />
-            <img src="/assets/img-app/elements/elements5.png" alt="" className="elements5" />
+            <img loading="lazy" src="/assets/img-app/elements/elements4.png" alt="" className="elements4" />
+            <img loading="lazy" src="/assets/img-app/elements/elements5.png" alt="" className="elements5" />
             <div className="container">
                 <div className="row align-items-center">
                     <div className="col-lg-7">
@@ -40,19 +40,19 @@ const Hero = () => {
                     <div className="col-lg-5">
                         <div className="hero-images-area">
                             <div className="img1" data-aos="zoom-in" data-aos-duration="1000">
-                                <img src="/assets/img-app/home/banner/centre-img.webp" alt="" />
+                                <img loading="lazy" src="/assets/img-app/home/banner/centre-img.webp" alt="" />
                             </div>
                             {/* <div className="image-bg1">
-                                <img src="/assets/img-app/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
+                                <img loading="lazy" src="/assets/img-app/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
                             </div> */}
                             <div className="elements1">
-                                <img src="/assets/img-app/home/banner/left-element.webp" alt="" className="animation-1 floating-slow" />
+                                <img loading="lazy" src="/assets/img-app/home/banner/left-element.webp" alt="" className="animation-1 floating-slow" />
                             </div>
                             <div className="elements2">
-                                <img src="/assets/img-app/home/banner/bottom-element.webp" alt="" className="animation-2 floating-fast" />
+                                <img loading="lazy" src="/assets/img-app/home/banner/bottom-element.webp" alt="" className="animation-2 floating-fast" />
                             </div>
                             <div className="elements3">
-                                <img src="/assets/img-app/home/banner/right-element.webp" alt="" className="animation-3 floating-slow" />
+                                <img loading="lazy" src="/assets/img-app/home/banner/right-element.webp" alt="" className="animation-3 floating-slow" />
                             </div>
                         </div>
                     </div>
diff --git a/src/components/mobile-app-development-service/Pricing.tsx b/src/components/mobile-app-development-service/Pricing.tsx
index 5d843b1..04dd191 100644
--- a/src/components/mobile-app-development-service/Pricing.tsx
+++ b/src/components/mobile-app-development-service/Pricing.tsx
@@ -13,7 +13,7 @@ const Pricing = () => {
                         <div className="consen-section-title upper text-center pb-60 heading2">
                             <GsapReveal y={20}>
                                 <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
-                                    <span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
+                                    <span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
                                     Pricing Plans
                                 </h5>
                             </GsapReveal>
@@ -71,6 +71,7 @@ const Pricing = () => {
                                     {plan.features.map((feature, i) => (
                                         <li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
                                             <img
+                                                loading="lazy"
                                                 src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"}
                                                 alt=""
                                                 style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }}
diff --git a/src/components/mobile-app-development-service/Service.tsx b/src/components/mobile-app-development-service/Service.tsx
index 7a8745e..26b413d 100644
--- a/src/components/mobile-app-development-service/Service.tsx
+++ b/src/components/mobile-app-development-service/Service.tsx
@@ -16,7 +16,7 @@ const Service = () => {
                     <div className="col-lg-7">
                         <div className="service-header heading2">
                             <GsapReveal y={20}>
-                                <h5 className="text-white"><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Services</h5>
+                                <h5 className="text-white"><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Services</h5>
                             </GsapReveal>
                             <div className="space24"></div>
                             <GsapReveal y={20} delay={0.15}>
diff --git a/src/components/mobile-app-development-service/Testimonial.tsx b/src/components/mobile-app-development-service/Testimonial.tsx
index 84bccb4..b6cc508 100644
--- a/src/components/mobile-app-development-service/Testimonial.tsx
+++ b/src/components/mobile-app-development-service/Testimonial.tsx
@@ -86,7 +86,7 @@ const Testimonial = () => {
                     <div className="col-lg-7 m-auto">
                         <div className="testimonial-header text-center heading2 space-margin60">
                             <GsapReveal y={20}>
-                                <h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Testimonials</h5>
+                                <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Testimonials</h5>
                             </GsapReveal>
                             <div className="space20"></div>
                             <GsapReveal y={20} delay={0.2}>
@@ -108,7 +108,7 @@ const Testimonial = () => {
                     <div className="col-lg-5">
                         <GsapReveal y={30} duration={1}>
                             <div className="testimonial-img-single" style={{ borderRadius: '24px', overflow: 'hidden' }}>
-                                <img src="/assets/img-app/home/section8/left.webp" alt="Testimonials" />
+                                <img loading="lazy" src="/assets/img-app/home/section8/left.webp" alt="Testimonials" />
                             </div>
                         </GsapReveal>
                     </div>
@@ -139,7 +139,7 @@ const Testimonial = () => {
                                                         position: 'relative',
                                                         transition: 'transform 0.3s ease'
                                                     }}>
-                                                        <img src="/assets/img-app/icons/quito1.svg" alt="" style={{ position: 'absolute', right: 30, top: 30, opacity: 0.15, width: 50 }} />
+                                                        <img loading="lazy" src="/assets/img-app/icons/quito1.svg" alt="" style={{ position: 'absolute', right: 30, top: 30, opacity: 0.15, width: 50 }} />
 
                                                         {/* Stars */}
                                                         <div className="stars" style={{ display: 'flex', gap: '6px', marginBottom: '25px' }}>
@@ -179,7 +179,7 @@ const Testimonial = () => {
                                                             flexShrink: 0
                                                         }}>
                                                             {profileImg ? (
-                                                                <img src={profileImg} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                                                <img loading="lazy" src={profileImg} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                                             ) : (
                                                                 <span style={{ fontWeight: 'bold', color: '#fff' }}>{getInitials(name)}</span>
                                                             )}
diff --git a/src/components/mobile-app-development-service/Work.tsx b/src/components/mobile-app-development-service/Work.tsx
index 6f3bff0..7acb60e 100644
--- a/src/components/mobile-app-development-service/Work.tsx
+++ b/src/components/mobile-app-development-service/Work.tsx
@@ -17,8 +17,8 @@ const Work = () => {
                     backgroundSize: 'cover',
                 }}
             >
-                <img src="/assets/img-app/home/section5/top-element-2.webp" alt="" className="elements16" />
-                <img src="/assets/img-app/home/section5/top-element-1.webp" alt="" className="elements1 keyframe5" />
+                <img loading="lazy" src="/assets/img-app/home/section5/top-element-2.webp" alt="" className="elements16" />
+                <img loading="lazy" src="/assets/img-app/home/section5/top-element-1.webp" alt="" className="elements1 keyframe5" />
 
                 <div className="container">
                     <div className="row align-items-center g-5">
@@ -27,16 +27,9 @@ const Work = () => {
                         <div className="col-12 col-xl-5">
                             <GsapReveal y={30} duration={1}>
                                 <img
+                                    loading="lazy"
                                     src="/assets/img-app/home/section5/left.webp"
                                     alt="How It Works"
-                                // style={{
-                                //     width: '100%',
-                                //     height: '100%',
-                                //     minHeight: '670px',
-                                //     objectFit: 'cover',
-                                //     display: 'block',
-                                //     borderRadius: '16px',
-                                // }}
                                 />
                             </GsapReveal>
                         </div>
@@ -45,7 +38,7 @@ const Work = () => {
                         <div className="col-12 col-xl-7">
                             <div className="work-content-area heading1">
                                 <GsapReveal y={20}>
-                                    <h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>OUR DEVELOPMENT PROCESS</h5>
+                                    <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>OUR DEVELOPMENT PROCESS</h5>
                                 </GsapReveal>
                                 <div className="space24"></div>
                                 <GsapReveal y={20} delay={0.15}>
diff --git a/src/components/mobile-app-development-service/WorkProcess.tsx b/src/components/mobile-app-development-service/WorkProcess.tsx
index e08e003..fa23ad6 100644
--- a/src/components/mobile-app-development-service/WorkProcess.tsx
+++ b/src/components/mobile-app-development-service/WorkProcess.tsx
@@ -54,12 +54,12 @@ const WorkProcess = () => {
                                     </div>
                                     <div className="col-xl-4 col-lg-12 d-flex align-items-center justify-content-center">
                                         <div className="images" data-aos="zoom-in" data-aos-duration="1000">
-                                            <img src="/assets/img-app/elements/elements12.png" alt="" className="elements12" />
-                                            <img src="/assets/img-app/elements/elements13.png" alt="" className="elements13" />
-                                            <img src="/assets/img-app/elements/elements14.png" alt="" className="elements14" />
-                                            <img src="/assets/img-app/elements/elements15.png" alt="" className="elements15" />
+                                            <img loading="lazy" src="/assets/img-app/elements/elements12.png" alt="" className="elements12" />
+                                            <img loading="lazy" src="/assets/img-app/elements/elements13.png" alt="" className="elements13" />
+                                            <img loading="lazy" src="/assets/img-app/elements/elements14.png" alt="" className="elements14" />
+                                            <img loading="lazy" src="/assets/img-app/elements/elements15.png" alt="" className="elements15" />
                                             <div className="img1 shadow-lg">
-                                                <img src="/assets/img-app/home/section5/bottom-circle.webp" alt="" />
+                                                <img loading="lazy" src="/assets/img-app/home/section5/bottom-circle.webp" alt="" />
                                             </div>
                                         </div>
                                     </div>
diff --git a/src/components/mobile-app-development-service/support/cards/BlogCard.tsx b/src/components/mobile-app-development-service/support/cards/BlogCard.tsx
index e267f24..179a972 100644
--- a/src/components/mobile-app-development-service/support/cards/BlogCard.tsx
+++ b/src/components/mobile-app-development-service/support/cards/BlogCard.tsx
@@ -10,19 +10,19 @@ const BlogCard: React.FC<BlogCardProps> = ({ blog }) => {
     return (
         <div className="vl-blog-1-item">
             <div className="vl-blog-1-thumb image-anime">
-                <img src={blog.image} alt={blog.title} />
+                <img loading="lazy" src={blog.image} alt={blog.title} />
             </div>
             <div className="vl-blog-1-content">
                 <div className="vl-blog-meta">
                     <ul>
                         <li>
                             <a href="#">
-                                <img src="/assets/img-app/icons/calender1.svg" alt="" /> {blog.date} <span> | </span>
+                                <img loading="lazy" src="/assets/img-app/icons/calender1.svg" alt="" /> {blog.date} <span> | </span>
                             </a>
                         </li>
                         <li>
                             <a href="#">
-                                <img src="/assets/img-app/icons/user1.svg" alt="" /> {blog.authorName}
+                                <img loading="lazy" src="/assets/img-app/icons/user1.svg" alt="" /> {blog.authorName}
                             </a>
                         </li>
                     </ul>
diff --git a/src/components/mobile-app-development-service/support/cards/CaseStudyCard.tsx b/src/components/mobile-app-development-service/support/cards/CaseStudyCard.tsx
index bcbe6df..ccc6163 100644
--- a/src/components/mobile-app-development-service/support/cards/CaseStudyCard.tsx
+++ b/src/components/mobile-app-development-service/support/cards/CaseStudyCard.tsx
@@ -10,7 +10,7 @@ const CaseStudyCard: React.FC<CaseStudyCardProps> = ({ caseStudy }) => {
     return (
         <div className="case-slider-boxarea">
             <div className="img1 image-anime">
-                <img src={caseStudy.image} alt={caseStudy.title} />
+                <img loading="lazy" src={caseStudy.image} alt={caseStudy.title} />
             </div>
             <div className="content-area">
                 <p>{caseStudy.tag}</p>
diff --git a/src/components/mobile-app-development-service/support/cards/MemberCard.tsx b/src/components/mobile-app-development-service/support/cards/MemberCard.tsx
index 50fa445..161e8ab 100644
--- a/src/components/mobile-app-development-service/support/cards/MemberCard.tsx
+++ b/src/components/mobile-app-development-service/support/cards/MemberCard.tsx
@@ -10,7 +10,7 @@ const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
     return (
         <div className="team-author-boxarea">
             <div className="img1 image-anime">
-                <img src={member.image} alt={member.name} />
+                <img loading="lazy" src={member.image} alt={member.name} />
             </div>
             <div className="content-area">
                 <div className="text">
@@ -19,7 +19,7 @@ const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
                     <p>{member.role}</p>
                 </div>
                 <div className="icons">
-                    <a href="#"><img src="/assets/img-app/icons/share1.svg" alt="" /></a>
+                    <a href="#"><img loading="lazy" src="/assets/img-app/icons/share1.svg" alt="" /></a>
                 </div>
             </div>
             <ul>
diff --git a/src/components/mobile-app-development-service/support/cards/ServiceCard.tsx b/src/components/mobile-app-development-service/support/cards/ServiceCard.tsx
index 03971ab..447cc81 100644
--- a/src/components/mobile-app-development-service/support/cards/ServiceCard.tsx
+++ b/src/components/mobile-app-development-service/support/cards/ServiceCard.tsx
@@ -10,7 +10,7 @@ const ServiceCard: React.FC<ServiceCardProps> = ({ service }) => {
     return (
         <div className="service1-boxarea h-100 d-flex flex-column" style={{ marginBottom: 0 }}>
             <div className="icons">
-                <img src={service.icon} alt={service.title} />
+                <img loading="lazy" src={service.icon} alt={service.title} />
             </div>
             <div className="space24"></div>
             <div className="space16"></div>
diff --git a/src/components/mobile-app-development-service/support/layout/CTA/CTA.tsx b/src/components/mobile-app-development-service/support/layout/CTA/CTA.tsx
index 994845e..3a0bd31 100644
--- a/src/components/mobile-app-development-service/support/layout/CTA/CTA.tsx
+++ b/src/components/mobile-app-development-service/support/layout/CTA/CTA.tsx
@@ -32,24 +32,24 @@ const CTA = () => {
                     <div className="col-lg-3"></div>
                     <div className="col-lg-4">
                         <div className="cta-images">
-                            <img src="/assets/img-app/home/section10/bg-element.webp" alt="" className="elements7 keyframe5" />
+                            <img loading="lazy" src="/assets/img-app/home/section10/bg-element.webp" alt="" className="elements7 keyframe5" />
                             <div className="img1">
-                                <img src="/assets/img-app/home/section10/right.webp" alt="" />
+                                <img loading="lazy" src="/assets/img-app/home/section10/right.webp" alt="" />
                             </div>
                             <ul className="aniamtion-key-1">
                                 <li>
                                     <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
-                                        <img src="/assets/img-app/icons/check5.svg" alt="" />Get Free Consultation
+                                        <img loading="lazy" src="/assets/img-app/icons/check5.svg" alt="" />Get Free Consultation
                                     </a>
                                 </li>
                                 <li>
                                     <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
-                                        <img src="/assets/img-app/icons/check5.svg" alt="" /> Request Pricing
+                                        <img loading="lazy" src="/assets/img-app/icons/check5.svg" alt="" /> Request Pricing
                                     </a>
                                 </li>
                                 <li>
                                     <a href="#" onClick={(e) => { e.preventDefault(); setIsContactOpen(true); }}>
-                                        <img src="/assets/img-app/icons/check5.svg" alt="" />Talk to an Expert
+                                        <img loading="lazy" src="/assets/img-app/icons/check5.svg" alt="" />Talk to an Expert
                                     </a>
                                 </li>
                             </ul>
diff --git a/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx b/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx
index eca5c56..1febca9 100644
--- a/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx
+++ b/src/components/mobile-app-development-service/support/layout/Footer/Footer.tsx
@@ -47,7 +47,7 @@ const Footer = () => {
                             <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                                 <div className="footer-widget-1">
                                     <figure className="image">
-                                        <img src="/assets/images/logo/white-logo-2.png" alt="footer logo" />
+                                        <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="footer logo" />
                                     </figure>
                                     <p className="mt-20 mb-40">Metatroncube Software Solution: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p>
                                     <div className="footer-socials mb-20">
diff --git a/src/components/mobile-app-development-service/support/layout/Header/Header.tsx b/src/components/mobile-app-development-service/support/layout/Header/Header.tsx
index 53eca31..837dacb 100644
--- a/src/components/mobile-app-development-service/support/layout/Header/Header.tsx
+++ b/src/components/mobile-app-development-service/support/layout/Header/Header.tsx
@@ -29,7 +29,7 @@ const Header = () => {
                             <div className="col-lg-3 col-md-6 col-6">
                                 <div className="vl-logo">
                                     <Link href="#home">
-                                        <img src="/assets/images/logo/white-logo-2.png" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
+                                        <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
                                     </Link>
                                 </div>
                             </div>
diff --git a/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx b/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx
index e6b62bd..ec5ce62 100644
--- a/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx
+++ b/src/components/mobile-app-development-service/support/layout/Header/MobileMenu.tsx
@@ -27,7 +27,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileM
                     <div className="vl-offcanvas-header d-flex justify-content-between align-items-center">
                         <div className="vl-offcanvas-logo">
                             <Link href="#home" onClick={toggleMobileMenu}>
-                                <img src="/assets/images/logo/white-logo-2.png" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
+                                <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
                             </Link>
                         </div>
                         <div className="vl-offcanvas-close">
diff --git a/src/components/services-digital-solutions/AboutService.tsx b/src/components/services-digital-solutions/AboutService.tsx
index b97e80c..d580d47 100644
--- a/src/components/services-digital-solutions/AboutService.tsx
+++ b/src/components/services-digital-solutions/AboutService.tsx
@@ -15,17 +15,17 @@ const AboutService = () => {
 
                             {/* Background Image */}
                             <div className="main-img-wrap">
-                                <img src="/assets/images/careers/1/large-img.webp" alt="Office Meeting" />
+                                <img loading="lazy" src="/assets/images/careers/1/large-img.webp" alt="Office Meeting" />
                             </div>
 
                             {/* Foreground Curved Image */}
                             <div className="curved-img-wrap">
-                                <img src="/assets/images/careers/1/small-img.webp" alt="Collaborative Work" />
+                                <img loading="lazy" src="/assets/images/careers/1/small-img.webp" alt="Collaborative Work" />
                             </div>
 
                             {/* Decorative Dots */}
                             <div className="dots-shape">
-                                <img src="/assets/imgs/shapes/shape-6.png" alt="dots" />
+                                <img loading="lazy" src="/assets/imgs/shapes/shape-6.png" alt="dots" />
                             </div>
                         </div>
                     </div>
@@ -46,7 +46,7 @@ const AboutService = () => {
                             <div className="single-format-content mb-20">
                                 <div className="format-row d-flex align-items-start gap-4">
                                     {/* <div className="small-feature-img">
-                                        <img src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
+                                        <img loading="lazy" src="/assets/img/about/about-img10.png" alt="Team" className="rounded-3" />
                                     </div> */}
                                     <div className="feature-bullets">
                                         <div className="bullet-item d-flex align-items-center">
diff --git a/src/components/services-digital-solutions/ServiceDetails.tsx b/src/components/services-digital-solutions/ServiceDetails.tsx
index 0ce7b28..561d344 100644
--- a/src/components/services-digital-solutions/ServiceDetails.tsx
+++ b/src/components/services-digital-solutions/ServiceDetails.tsx
@@ -48,7 +48,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
                             </div>
 
                             <div className="sidebar__call sidebar__single wow fadeInUp animated" data-wow-duration="1500ms" style={{ backgroundImage: 'url("/assets/images/services/details/cta.webp")', visibility: 'visible', animationDuration: '1500ms', animationName: 'fadeInUp' }}>
-                                <img src="/favicon.ico" alt="logo" className="sidebar__call__logo" />
+                                <img loading="lazy" src="/favicon.ico" alt="logo" className="sidebar__call__logo" />
                                 <div className="sidebar__call__inner">
                                     <span className="sidebar__call__icon">
                                         <i className="fa-solid fa-phone"></i>
@@ -64,7 +64,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
                     <div className="col-md-12 col-lg-8">
                         <div className="service-details__content">
                             {/* <div className="service-details__thumbnail">
-                                <img src={service.bigImage} alt={service.title} />
+                                <img loading="lazy" src={service.bigImage} alt={service.title} />
                             </div> */}
 
                             {service.content && (
@@ -80,7 +80,7 @@ const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
                     <div className="col-md-12 col-lg-12 mt-20">
                         <div className="service-details__content">
                             {/* <div className="service-details__thumbnail">
-                                <img src={service.bigImage} alt={service.title} />
+                                <img loading="lazy" src={service.bigImage} alt={service.title} />
                             </div> */}
 
                             {service.fullcontent && (
diff --git a/src/components/web-development-service/About.tsx b/src/components/web-development-service/About.tsx
index 475cb90..4920fd5 100644
--- a/src/components/web-development-service/About.tsx
+++ b/src/components/web-development-service/About.tsx
@@ -8,13 +8,14 @@ const About = () => {
     const [isContactOpen, setIsContactOpen] = useState(false);
     return (
         <div className="about1-section-area sp1" id="about">
-            <img src="/assets/img/elements/elements9.png" alt="" className="elements9" />
+            <img loading="lazy" src="/assets/img/elements/elements9.png" alt="" className="elements9" />
             <div className="container">
                 <div className="row align-items-center">
                     <div className="col-lg-6">
                         <div className="about-images-area" style={{ position: 'relative' }}>
-                            <img src="/assets/img/elements/elements10.png" alt="" className="elements10" />
+                            <img loading="lazy" src="/assets/img/elements/elements10.png" alt="" className="elements10" />
                             <img
+                                loading="lazy"
                                 src="/assets/img/home/section2/third-section.webp"
                                 alt="About MetatronCube IT Solution"
                                 style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', borderRadius: '12px' }}
@@ -26,7 +27,7 @@ const About = () => {
                     <div className="col-lg-5">
                         <div className="about-glass-container about-header-area heading2">
                             <GsapReveal y={20}>
-                                <h5><span><img src="/favicon.ico" alt="" /></span>About MetatronCube IT Solution</h5>
+                                <h5><span><img loading="lazy" src="/favicon.ico" alt="" /></span>About MetatronCube IT Solution</h5>
                             </GsapReveal>
                             <div className="space24"></div>
                             <GsapReveal y={20} delay={0.2}>
@@ -40,13 +41,13 @@ const About = () => {
                                 <h6>We specialize in:</h6>
                                 <div className="specialty-row mt-3">
                                     <ul className="specialty-list">
-                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Business Websites</li>
-                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Corporate Websites</li>
-                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Landing Pages</li>
+                                        <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Business Websites</li>
+                                        <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Corporate Websites</li>
+                                        <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Landing Pages</li>
                                     </ul>
                                     <ul className="specialty-list">
-                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> E-commerce Stores</li>
-                                        <li><span><img src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Custom Web Applications</li>
+                                        <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> E-commerce Stores</li>
+                                        <li><span><img loading="lazy" src="/assets/img/arrow.png" alt="" style={{ width: '20px', marginRight: '8px' }} /></span> Custom Web Applications</li>
                                     </ul>
 
                                 </div>
diff --git a/src/components/web-development-service/BannerBottom.tsx b/src/components/web-development-service/BannerBottom.tsx
index b5ff819..ee10a63 100644
--- a/src/components/web-development-service/BannerBottom.tsx
+++ b/src/components/web-development-service/BannerBottom.tsx
@@ -57,7 +57,7 @@ const BannerBottom = () => {
                                     {floatingItems.map((item, idx) => (
                                         <div key={item.className} className={`floating-item ${item.className}`}>
                                             <div className={`floating-circle ${idx % 2 === 0 ? 'floating-slow' : 'floating-fast'}`}>
-                                                <img src={item.icon} alt={item.title} />
+                                                <img loading="lazy" src={item.icon} alt={item.title} />
                                             </div>
                                             <div className="floating-content">
                                                 <h6>{item.title}</h6>
@@ -69,6 +69,7 @@ const BannerBottom = () => {
 
                                 {/* Central hero image */}
                                 <img
+                                    loading="lazy"
                                     src="/assets/img/home/section1/second-section-centre-img.webp"
                                     alt="Digital Solutions Illustration"
                                     className="main-delivery-img img-fluid mt-2"
@@ -114,7 +115,7 @@ const BannerBottom = () => {
                                 }}
                             >
                                 <div className="call-icon-bg" style={{ width: '40px', height: '40px' }}>
-                                    <img src="/assets/img/icons/phn1.svg" alt="Phone Icon" className="scooter-mini-icon" style={{ width: '20px' }} />
+                                    <img loading="lazy" src="/assets/img/icons/phn1.svg" alt="Phone Icon" className="scooter-mini-icon" style={{ width: '20px' }} />
                                 </div>
                                 <div className="call-details ms-2">
                                     <span style={{ color: '#fff', fontWeight: 600, fontSize: '16px' }}>Speak With Our Experts Today</span>
diff --git a/src/components/web-development-service/BrandSlider.tsx b/src/components/web-development-service/BrandSlider.tsx
index 4e9ede4..d8c2035 100644
--- a/src/components/web-development-service/BrandSlider.tsx
+++ b/src/components/web-development-service/BrandSlider.tsx
@@ -64,7 +64,7 @@ const BrandSlider = () => {
                     <div className="col-lg-8 m-auto text-center">
                         <div className="brand-header heading2 text-center">
                             <GsapReveal y={20}>
-                                <h5><span><img src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} loading="lazy" /></span>Our Partners</h5>
+                                <h5><span><img loading="lazy" src="/assets/img-app/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>Our Partners</h5>
                             </GsapReveal>
                             <div className="space24"></div>
                             <GsapReveal y={20} delay={0.2}>
@@ -84,7 +84,7 @@ const BrandSlider = () => {
                     <Slider {...settings}>
                         {brands.map((brand) => (
                             <div key={brand.id} className="brand-item">
-                                <img src={brand.src} alt={brand.alt} loading="lazy" />
+                                <img loading="lazy" src={brand.src} alt={brand.alt} />
                             </div>
                         ))}
                     </Slider>
diff --git a/src/components/web-development-service/CaseStudies.tsx b/src/components/web-development-service/CaseStudies.tsx
index 4ff818e..66fd18e 100644
--- a/src/components/web-development-service/CaseStudies.tsx
+++ b/src/components/web-development-service/CaseStudies.tsx
@@ -65,12 +65,12 @@ const CaseStudies = () => {
     return (
         <section className="case-studies-section sp1 position-relative" id="portfolio" style={{ overflow: 'hidden' }}>
 
-            <img src="/assets/img/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
-            <img src="/assets/img/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
+            <img loading="lazy" src="/assets/img/home/section6/1.webp" alt="" className="case-floating-element case-el-left-3" />
+            <img loading="lazy" src="/assets/img/home/section6/2.webp" alt="" className="case-floating-element case-el-left-4" />
 
             {/* Floating Elements - Right (4) */}
-            <img src="/assets/img/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" />
-            <img src="/assets/img/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />
+            <img loading="lazy" src="/assets/img/home/section6/3.webp" alt="" className="case-floating-element case-el-right-1" />
+            <img loading="lazy" src="/assets/img/home/section6/4.webp" alt="" className="case-floating-element case-el-right-2" />
 
 
             <div className="container">
@@ -81,7 +81,7 @@ const CaseStudies = () => {
                         <div className="consen-section-title upper text-center pb-80 heading2">
                             <GsapReveal y={20}>
                                 <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
-                                    <span><img src="/favicon.ico" alt="" /></span>
+                                    <span><img loading="lazy" src="/favicon.ico" alt="" /></span>
                                     Case Studies
                                 </h5>
                             </GsapReveal>
@@ -157,7 +157,6 @@ const CaseStudies = () => {
                                                 width={600}
                                                 height={400}
                                                 className="loaded"
-                                                priority
                                                 style={{ width: "100%", height: "100%", objectFit: "cover" }}
                                             />
                                         </div>
diff --git a/src/components/web-development-service/CaseStudy.tsx b/src/components/web-development-service/CaseStudy.tsx
index 15c513d..7ca445c 100644
--- a/src/components/web-development-service/CaseStudy.tsx
+++ b/src/components/web-development-service/CaseStudy.tsx
@@ -58,12 +58,12 @@ const CaseStudy = () => {
                                     </div>
                                     <div className="col-lg-4">
                                         <div className="images" data-aos="zoom-in" data-aos-duration="1000">
-                                            <img src="/assets/img/elements/elements43.png" alt="" className="elements43" />
-                                            <img src="/assets/img/elements/elements27.png" alt="" className="elements27" />
-                                            <img src="/assets/img/elements/elements30.png" alt="" className="elements30" />
-                                            <img src="/assets/img/elements/elements39.png" alt="" className="elements39" />
+                                            <img loading="lazy" src="/assets/img/elements/elements43.png" alt="" className="elements43" />
+                                            <img loading="lazy" src="/assets/img/elements/elements27.png" alt="" className="elements27" />
+                                            <img loading="lazy" src="/assets/img/elements/elements30.png" alt="" className="elements30" />
+                                            <img loading="lazy" src="/assets/img/elements/elements39.png" alt="" className="elements39" />
                                             <div className="img1">
-                                                <img src="/assets/img/all-images/case/case-img4.png" alt="" />
+                                                <img loading="lazy" src="/assets/img/all-images/case/case-img4.png" alt="" />
                                             </div>
                                         </div>
                                     </div>
diff --git a/src/components/web-development-service/FAQ.tsx b/src/components/web-development-service/FAQ.tsx
index 4ff836c..6fe9233 100644
--- a/src/components/web-development-service/FAQ.tsx
+++ b/src/components/web-development-service/FAQ.tsx
@@ -105,7 +105,7 @@ const FAQ = ({ faqData }: { faqData?: { question: string; answer: string }[] })
                         <div className="space-margin60">
                             <GsapReveal y={20}>
                                 <h5 className="faqv2-subtitle">
-                                    <span><img src="/favicon.ico" alt="" /></span>
+                                    <span><img loading="lazy" src="/favicon.ico" alt="" /></span>
                                     FAQ
                                 </h5>
                             </GsapReveal>
@@ -141,6 +141,7 @@ const FAQ = ({ faqData }: { faqData?: { question: string; answer: string }[] })
                         <div className="faqv2-center-wrap">
                             <div className="faqv2-main-img">
                                 <img
+                                    loading="lazy"
                                     src="/assets/img/home/section9/9.webp"
                                     alt="FAQ Section"
                                 />
diff --git a/src/components/web-development-service/Hero.tsx b/src/components/web-development-service/Hero.tsx
index 5824799..b48cab4 100644
--- a/src/components/web-development-service/Hero.tsx
+++ b/src/components/web-development-service/Hero.tsx
@@ -11,8 +11,8 @@ const Hero = () => {
 
     return (
         <div className="hero1-section-area" id="home">
-            <img src="/assets/img/elements/elements4.png" alt="" className="elements4" />
-            <img src="/assets/img/elements/elements5.png" alt="" className="elements5" />
+            <img loading="lazy" src="/assets/img/elements/elements4.png" alt="" className="elements4" />
+            <img loading="lazy" src="/assets/img/elements/elements5.png" alt="" className="elements5" />
             <div className="container">
                 <div className="row align-items-center">
                     <div className="col-lg-7">
@@ -40,19 +40,19 @@ const Hero = () => {
                     <div className="col-lg-5">
                         <div className="hero-images-area">
                             <div className="img1" data-aos="zoom-in" data-aos-duration="1000">
-                                <img src="/assets/img/home/banner/centre-img.webp" alt="" />
+                                <img loading="lazy" src="/assets/img/home/banner/centre-img.webp" alt="" />
                             </div>
                             {/* <div className="image-bg1">
-                                <img src="/assets/img/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
+                                <img loading="lazy" src="/assets/img/all-images/bg/hero-bg2.png" alt="" className="keyframe5" />
                             </div> */}
                             <div className="elements1">
-                                <img src="/assets/img/home/banner/1-element.webp" alt="" className="animation-1 floating-slow" />
+                                <img loading="lazy" src="/assets/img/home/banner/1-element.webp" alt="" className="animation-1 floating-slow" />
                             </div>
                             <div className="elements2">
-                                <img src="/assets/img/home/banner/bottom.webp" alt="" className="animation-2 floating-fast" />
+                                <img loading="lazy" src="/assets/img/home/banner/bottom.webp" alt="" className="animation-2 floating-fast" />
                             </div>
                             <div className="elements3">
-                                <img src="/assets/img/home/banner/right.webp" alt="" className="animation-3 floating-slow" />
+                                <img loading="lazy" src="/assets/img/home/banner/right.webp" alt="" className="animation-3 floating-slow" />
                             </div>
                         </div>
                     </div>
diff --git a/src/components/web-development-service/Pricing.tsx b/src/components/web-development-service/Pricing.tsx
index cf8fe9b..4014a06 100644
--- a/src/components/web-development-service/Pricing.tsx
+++ b/src/components/web-development-service/Pricing.tsx
@@ -13,7 +13,7 @@ const Pricing = () => {
                         <div className="consen-section-title upper text-center pb-60 heading2">
                             <GsapReveal y={20}>
                                 <h5 style={{ color: '#3779b9', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '2px' }}>
-                                    <span><img src="/favicon.ico" alt="" /></span>
+                                    <span><img loading="lazy" src="/favicon.ico" alt="" /></span>
                                     Pricing Plans
                                 </h5>
                             </GsapReveal>
@@ -71,6 +71,7 @@ const Pricing = () => {
                                     {plan.features.map((feature, i) => (
                                         <li key={i} className="d-flex align-items-center mb-3" style={{ color: plan.isPopular ? '#fff' : '#4a5568', fontSize: '16px' }}>
                                             <img
+                                                loading="lazy"
                                                 src={plan.isPopular ? "/assets/img/arrow-white.png" : "/assets/img/arrow.png"}
                                                 alt=""
                                                 style={{ width: '20px', height: '20px', objectFit: 'contain', marginRight: '10px' }}
diff --git a/src/components/web-development-service/Service.tsx b/src/components/web-development-service/Service.tsx
index 4f4a4ae..fbb8e67 100644
--- a/src/components/web-development-service/Service.tsx
+++ b/src/components/web-development-service/Service.tsx
@@ -16,7 +16,7 @@ const Service = () => {
                     <div className="col-lg-7">
                         <div className="service-header heading2">
                             <GsapReveal y={20}>
-                                <h5 className="text-white"><span><img src="/favicon.ico" alt="" /></span>Our Services</h5>
+                                <h5 className="text-white"><span><img loading="lazy" src="/favicon.ico" alt="" /></span>Our Services</h5>
                             </GsapReveal>
                             <div className="space24"></div>
                             <GsapReveal y={20} delay={0.15}>
@@ -33,6 +33,7 @@ const Service = () => {
                     <div className="col-lg-5" data-aos="zoom-in" data-aos-duration="900">
                         <div className="service-intro-img" style={{ position: 'relative' }}>
                             <img
+                                loading="lazy"
                                 src="/assets/img/home/section3/top-right-image.webp"
                                 alt="Our IT Services"
                                 style={{ width: '100%', borderRadius: '20px 0 20px 0', objectFit: 'cover', height: 280, boxShadow: '0 20px 50px rgba(0,0,0,0.15)' }}
diff --git a/src/components/web-development-service/Testimonial.tsx b/src/components/web-development-service/Testimonial.tsx
index 8b360dd..f6c33fc 100644
--- a/src/components/web-development-service/Testimonial.tsx
+++ b/src/components/web-development-service/Testimonial.tsx
@@ -85,7 +85,7 @@ const Testimonial = () => {
                     <div className="col-lg-7 m-auto">
                         <div className="testimonial-header text-center heading2 space-margin60">
                             <GsapReveal y={20}>
-                                <h5><span><img src="/favicon.ico" alt="" /></span>Testimonials</h5>
+                                <h5><span><img loading="lazy" src="/favicon.ico" alt="" /></span>Testimonials</h5>
                             </GsapReveal>
                             <div className="space20"></div>
                             <GsapReveal y={20} delay={0.2}>
@@ -107,7 +107,7 @@ const Testimonial = () => {
                     <div className="col-lg-5">
                         <GsapReveal y={30} duration={1}>
                             <div className="testimonial-img-single" style={{ borderRadius: '24px', overflow: 'hidden' }}>
-                                <img src="/assets/img/home/section8/left-img.webp" alt="Testimonials" />
+                                <img loading="lazy" src="/assets/img/home/section8/left-img.webp" alt="Testimonials" />
                             </div>
                         </GsapReveal>
                     </div>
@@ -138,7 +138,7 @@ const Testimonial = () => {
                                                         position: 'relative',
                                                         transition: 'transform 0.3s ease'
                                                     }}>
-                                                        <img src="/assets/img/icons/quito1.svg" alt="" style={{ position: 'absolute', right: 30, top: 30, opacity: 0.15, width: 50 }} />
+                                                        <img loading="lazy" src="/assets/img/icons/quito1.svg" alt="" style={{ position: 'absolute', right: 30, top: 30, opacity: 0.15, width: 50 }} />
 
                                                         {/* Stars */}
                                                         <div className="stars" style={{ display: 'flex', gap: '6px', marginBottom: '25px' }}>
@@ -178,7 +178,7 @@ const Testimonial = () => {
                                                             flexShrink: 0
                                                         }}>
                                                             {profileImg ? (
-                                                                <img src={profileImg} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                                                <img loading="lazy" src={profileImg} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                                             ) : (
                                                                 <span style={{ fontWeight: 'bold', color: '#fff' }}>{getInitials(name)}</span>
                                                             )}
diff --git a/src/components/web-development-service/Work.tsx b/src/components/web-development-service/Work.tsx
index a82f147..5d67e36 100644
--- a/src/components/web-development-service/Work.tsx
+++ b/src/components/web-development-service/Work.tsx
@@ -17,8 +17,8 @@ const Work = () => {
                     backgroundSize: 'cover',
                 }}
             >
-                <img src="/assets/img/home/section5/element-2.webp" alt="" className="elements16" />
-                <img src="/assets/img/home/section5/element-1.webp" alt="" className="elements1 keyframe5" />
+                <img loading="lazy" src="/assets/img/home/section5/element-2.webp" alt="" className="elements16" />
+                <img loading="lazy" src="/assets/img/home/section5/element-1.webp" alt="" className="elements1 keyframe5" />
 
                 <div className="container">
                     <div className="row align-items-center g-5">
@@ -27,16 +27,9 @@ const Work = () => {
                         <div className="col-12 col-xl-5">
                             <GsapReveal y={30} duration={1}>
                                 <img
+                                    loading="lazy"
                                     src="/assets/img/home/section5/left-side.webp"
                                     alt="How It Works"
-                                // style={{
-                                //     width: '100%',
-                                //     height: '100%',
-                                //     minHeight: '670px',
-                                //     objectFit: 'cover',
-                                //     display: 'block',
-                                //     borderRadius: '16px',
-                                // }}
                                 />
                             </GsapReveal>
                         </div>
@@ -45,7 +38,7 @@ const Work = () => {
                         <div className="col-12 col-xl-7">
                             <div className="work-content-area heading1">
                                 <GsapReveal y={20}>
-                                    <h5><span><img src="/favicon.ico" alt="" /></span>How It Works</h5>
+                                    <h5><span><img loading="lazy" src="/favicon.ico" alt="" /></span>How It Works</h5>
                                 </GsapReveal>
                                 <div className="space24"></div>
                                 <GsapReveal y={20} delay={0.15}>
@@ -77,7 +70,7 @@ const Work = () => {
                                     ].map((step, i) => (
                                         <div key={i} className="work-step-row" data-aos="fade-up" data-aos-duration={600 + i * 80}>
                                             <div className="work-step-num">
-                                                <img src={step.img} alt={step.title} />
+                                                <img loading="lazy" src={step.img} alt={step.title} />
                                             </div>
                                             <div className="work-step-body">
                                                 <h4>{step.title}</h4>
diff --git a/src/components/web-development-service/WorkProcess.tsx b/src/components/web-development-service/WorkProcess.tsx
index fe8a9bd..e1a244f 100644
--- a/src/components/web-development-service/WorkProcess.tsx
+++ b/src/components/web-development-service/WorkProcess.tsx
@@ -54,12 +54,12 @@ const WorkProcess = () => {
                                     </div>
                                     <div className="col-xl-4 col-lg-12 d-flex align-items-center justify-content-center">
                                         <div className="images" data-aos="zoom-in" data-aos-duration="1000">
-                                            <img src="/assets/img/elements/elements12.png" alt="" className="elements12" />
-                                            <img src="/assets/img/elements/elements13.png" alt="" className="elements13" />
-                                            <img src="/assets/img/elements/elements14.png" alt="" className="elements14" />
-                                            <img src="/assets/img/elements/elements15.png" alt="" className="elements15" />
+                                            <img loading="lazy" src="/assets/img/elements/elements12.png" alt="" className="elements12" />
+                                            <img loading="lazy" src="/assets/img/elements/elements13.png" alt="" className="elements13" />
+                                            <img loading="lazy" src="/assets/img/elements/elements14.png" alt="" className="elements14" />
+                                            <img loading="lazy" src="/assets/img/elements/elements15.png" alt="" className="elements15" />
                                             <div className="img1 shadow-lg">
-                                                <img src="/assets/img/home/section5/bottom circle.webp" alt="" />
+                                                <img loading="lazy" src="/assets/img/home/section5/bottom circle.webp" alt="" />
                                             </div>
                                         </div>
                                     </div>
diff --git a/src/components/web-development-service/support/layout/Footer/Footer.tsx b/src/components/web-development-service/support/layout/Footer/Footer.tsx
index 773f1a5..590f20b 100644
--- a/src/components/web-development-service/support/layout/Footer/Footer.tsx
+++ b/src/components/web-development-service/support/layout/Footer/Footer.tsx
@@ -47,7 +47,7 @@ const Footer = () => {
                             <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                                 <div className="footer-widget-1">
                                     <figure className="image">
-                                        <img src="/assets/images/logo/white-logo-2.png" alt="footer logo" />
+                                        <img loading="lazy" src="/assets/images/logo/white-logo-2.png" alt="footer logo" />
                                     </figure>
                                     <p className="mt-20 mb-40">Metatroncube Software Solution: Where innovation meets execution to elevate your digital presence. Partner with us for bespoke web and app development that powers your business growth.</p>
                                     <div className="footer-socials mb-20">
diff --git a/src/components/web-development-service/support/layout/Header/Header.tsx b/src/components/web-development-service/support/layout/Header/Header.tsx
index 4782784..28709ec 100644
--- a/src/components/web-development-service/support/layout/Header/Header.tsx
+++ b/src/components/web-development-service/support/layout/Header/Header.tsx
@@ -30,7 +30,7 @@ const Header = () => {
                             <div className="col-lg-3 col-md-6 col-6">
                                 <div className="vl-logo">
                                     <Link href="#home">
-                                        <img src="/assets/img/logo.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
+                                        <img loading="lazy" src="/assets/img/logo.webp" alt="MetatronCube" style={{ width: '100%', maxWidth: '250px', height: 'auto', transition: 'all 0.3s' }} />
                                     </Link>
                                 </div>
                             </div>
diff --git a/src/components/web-development-service/support/layout/Header/MobileMenu.tsx b/src/components/web-development-service/support/layout/Header/MobileMenu.tsx
index c0a2421..07aa294 100644
--- a/src/components/web-development-service/support/layout/Header/MobileMenu.tsx
+++ b/src/components/web-development-service/support/layout/Header/MobileMenu.tsx
@@ -27,7 +27,7 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ isMobileMenuOpen, toggleMobileM
                     <div className="vl-offcanvas-header d-flex justify-content-between align-items-center">
                         <div className="vl-offcanvas-logo">
                             <Link href="#home" onClick={toggleMobileMenu}>
-                                <img src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
+                                <img loading="lazy" src="/assets/img/logo.webp" alt="logo" style={{ width: '100%', maxWidth: '250px', height: 'auto' }} />
                             </Link>
                         </div>
                         <div className="vl-offcanvas-close">