diff --git a/app/Services/UseCaseData.js b/app/Services/UseCaseData.js
index 297cb7c..5835965 100644
--- a/app/Services/UseCaseData.js
+++ b/app/Services/UseCaseData.js
@@ -5,7 +5,7 @@ import Axios from 'axios';
 
 function UseCaseData() {
 
-    console.log("~~~~~~~~ ameye 009 ~~~~~~~~~");
+    // console.log("~~~~~~~~ ameye 009 ~~~~~~~~~");
 var res = null;
    const getWrenchBoardBlog = () => {
         Axios.get("http://10.0.0.52:5101/wp/wrenchboard/", {
@@ -19,7 +19,7 @@ var res = null;
           }).then((response) => {
            console.log(response);
            res = response;
-           console.log("~~~~~~~~ ameye ~~~~~~~~~");
+        //    console.log("~~~~~~~~ ameye ~~~~~~~~~");
            return response;
           // console.log(blogResultData);
         });
diff --git a/app/about-us/AboutText.js b/app/about-us/AboutText.js
index 4e645d9..f1b18a8 100644
--- a/app/about-us/AboutText.js
+++ b/app/about-us/AboutText.js
@@ -33,7 +33,7 @@ function AboutTextComponent() {
         <div className="row">
           <div className="row">
             {servicesContent?.map(({ id, ...item }) => (
-              <div className="col-lg-3 col-md-6">
+              <div key={id} className="col-lg-3 col-md-6">
                 <ServiceItem index={id} {...item} />
               </div>
             ))}
diff --git a/app/about-us/HeaderAbout.js b/app/about-us/HeaderAbout.js
index 4b153be..9ffc2e4 100644
--- a/app/about-us/HeaderAbout.js
+++ b/app/about-us/HeaderAbout.js
@@ -4,6 +4,7 @@ import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'
 import { Link } from 'react-router-dom';
+import Image from 'next/image';
 
 function HeaderAbout({ action }) {
     useEffect(() => {
@@ -20,7 +21,7 @@ function HeaderAbout({ action }) {
                             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                                 <div className="appie-logo-box">
                                     <Link to="/">
-                                        <img src={logo} alt="" width="175px" height="38px" loading='eager' />
+                                        <Image src={logo} alt="" width="175px" height="38px" loading='eager' />
                                     </Link>
                                 </div>
                             </div>
diff --git a/app/about-us/HeroAbout.js b/app/about-us/HeroAbout.js
index 5f6d2fd..4a00cbc 100644
--- a/app/about-us/HeroAbout.js
+++ b/app/about-us/HeroAbout.js
@@ -20,7 +20,7 @@ function HeroAbout() {
                       We Empower Reward for Achievements
                       </h3>
                       <p>
-                        WrenchBoard is the platform for planning and rewarding accomplishments for individuals and parents. Parents can set up family accounts to oversee their children's activities and earnings.
+                        WrenchBoard is the platform for planning and rewarding accomplishments for individuals and parents. Parents can set up family accounts to oversee their children&#39;s activities and earnings.
                       </p>
                       <p>
                         At WrenchBoard, we believe in the power of motivating through rewards. As children complete projects, tasks, or chores and earn rewards, children also gain financial, time management, and valuable execution skills that enhance the joy of personal growth.
diff --git a/app/about-us/TeamAbout.js b/app/about-us/TeamAbout.js
index 5c5814c..7f68b22 100644
--- a/app/about-us/TeamAbout.js
+++ b/app/about-us/TeamAbout.js
@@ -3,6 +3,7 @@ import team1 from '../../assets/images/team-1.jpg';
 import team2 from '../../assets/images/team-2.jpg';
 import team3 from '../../assets/images/team-3.jpg';
 import team4 from '../../assets/images/team-4.jpg';
+import Image from 'next/image';
 
 function TeamAbout() {
     return (
@@ -25,7 +26,7 @@ function TeamAbout() {
                                 data-wow-delay="200ms"
                             >
                                 <div className="thumb">
-                                    <img src={team1} alt="" />
+                                    <Image width='100' height='100' src={team1} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -57,7 +58,7 @@ function TeamAbout() {
                                 data-wow-delay="400ms"
                             >
                                 <div className="thumb">
-                                    <img src={team2} alt="" />
+                                    <Image width='100' height='100' src={team2} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -89,7 +90,7 @@ function TeamAbout() {
                                 data-wow-delay="600ms"
                             >
                                 <div className="thumb">
-                                    <img src={team3} alt="" />
+                                    <Image width='100' height='100' src={team3} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -121,7 +122,7 @@ function TeamAbout() {
                                 data-wow-delay="800ms"
                             >
                                 <div className="thumb">
-                                    <img src={team4} alt="" />
+                                    <Image width='100' height='100' src={team4} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
diff --git a/app/blog/blogdetail/Blog.jsx b/app/blog/blogdetail/Blog.jsx
index 6c19afe..34bcda8 100644
--- a/app/blog/blogdetail/Blog.jsx
+++ b/app/blog/blogdetail/Blog.jsx
@@ -1,6 +1,6 @@
 import singlePost from "../../assets/images/single-post/1.jpg";
 import { BlogLoader, ImageLoader } from "../../lib/SkeletonLoaders";
-// import Image from "next/image";
+import Image from "next/image";
 // import LazyImage from "../../lib/LazyImage";
 
 /**
diff --git a/app/blog/blogdetail/[id]/page.js b/app/blog/blogdetail/[id]/page.js
index a42cf9d..8ed8689 100644
--- a/app/blog/blogdetail/[id]/page.js
+++ b/app/blog/blogdetail/[id]/page.js
@@ -20,7 +20,7 @@ import '../../../assets/css/main.css';
 import '../../../assets/css/style.css';
 
 
-function page() {
+function Page() {
     const [isLoading, setIsLoading] = useState(false);
     const [blogs, setBlogs] = useState([]);
     const { id } = useParams();
@@ -81,4 +81,4 @@ function page() {
   )
 }
 
-export default page
\ No newline at end of file
+export default Page
\ No newline at end of file
diff --git a/app/components/Error/index.js b/app/components/Error/index.js
index 4510614..8e921f8 100644
--- a/app/components/Error/index.js
+++ b/app/components/Error/index.js
@@ -19,9 +19,9 @@ function Error() {
                             <div className="appie-error-content text-center">
                                 <Svg />
                                 <span>Sorry!</span>
-                                <h3 className="title">The page can’t be found.</h3>
+                                <h3 className="title">The page can&#39;t be found.</h3>
                                 <p>
-                                    The page you're looking for isn't available. Use the go back
+                                    The page you&#39;re looking for isn&#39;t available. Use the go back
                                     button below
                                 </p>
                                 {/* <a onClick={(e) => goBack(e)} href="#">
diff --git a/app/components/FeaturedScreen.js b/app/components/FeaturedScreen.js
index 17df824..a8797a0 100644
--- a/app/components/FeaturedScreen.js
+++ b/app/components/FeaturedScreen.js
@@ -5,6 +5,7 @@ import localImgLoad from '../../lib/localImgLoad'
 import 'owl.carousel/dist/assets/owl.carousel.css'
 import 'owl.carousel/dist/assets/owl.theme.default.css'
 import LazyImage from '../../lib/LazyImage'
+import Image from 'next/image'
 
 export default function FeaturedScreen() {
   
@@ -47,43 +48,43 @@ export default function FeaturedScreen() {
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_1.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_1.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_1.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_2.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_2.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_2.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_3.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_3.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_3.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_4.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_6.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_6.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_5.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_4.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_4.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_7.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_7.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
                             </div>
                         </div>
                     </OwlCarousel>
diff --git a/app/components/News/Blog.js b/app/components/News/Blog.js
index 7cfa020..34ca12d 100644
--- a/app/components/News/Blog.js
+++ b/app/components/News/Blog.js
@@ -4,6 +4,7 @@ import author from '../../assets/images/single-post/author.png';
 import cmnt1 from '../../assets/images/single-post/c1.png';
 import cmnt2 from '../../assets/images/single-post/c2.png';
 import cmnt3 from '../../assets/images/single-post/c3.png';
+import Image from 'next/image';
 
 function Blog() {
     return (
@@ -13,13 +14,13 @@ function Blog() {
                     Tosser posh grub he lost his bottle bamboozled show off show off pick your nose
                     and blow off cheesed off starkers what a load of rubbish, Jeffrey bubble and
                     squeak I Charles a load of old tosh some dodgy chav wind up David gormless,
-                    hotpot arse over tit hanky panky bog-standard don't get shirty with me bloke
+                    hotpot arse over tit hanky panky bog-standard don&#39;t get shirty with me bloke
                     Richard. Smashing he legged it in my flat bodge a blinding shot amongst
-                    brilliant blag, I grub A bit of how's your father bite your arm off the BBC the
+                    brilliant blag, I grub A bit of how&#39;s your father bite your arm off the BBC the
                     full monty chancer, bobby bender he nicked it down the pub Why cheeky bugger.
-                    Starkers pardon you bubble and squeak a blinding shot it's all gone to pot bits
+                    Starkers pardon you bubble and squeak a blinding shot it&#39;s all gone to pot bits
                     and bobs car boot lurgy so I said cheesed off boot Harry such a fibber, naff
-                    chinwag bamboozled the bee's knees bloke fanny around loo are you taking the
+                    chinwag bamboozled the bee&#39;s knees bloke fanny around loo are you taking the
                     piss barney off his nut cack. Arse over tit he nicked it that matie boy lost the
                     plot pardon me my lady well cheers he legged it, boot bits and bobs brown bread
                     is cras bamboozled bite your arm off down the pub brolly, cobblers horse play
@@ -32,7 +33,7 @@ function Blog() {
                     kyver cack zonked tickety boo mush morish.
                 </p>
                 <div className="post-thumb">
-                    <img src={singlePost} alt="" />
+                    <Image width='100' height='100' src={singlePost} alt="" />
                 </div>
                 <h4 className="article-title">Logotype Masterclass with Jessica Hische</h4>
                 <p>
@@ -51,32 +52,32 @@ function Blog() {
                 </p>
                 <p>
                     James Bond old happy days the wireless cracking goal bloke me old mucker, arse
-                    over tit blower mush the bee's knees chip shop the BBC, say lemon squeezy
+                    over tit blower mush the bee&#39;s knees chip shop the BBC, say lemon squeezy
                     blatant what a load of rubbish bog-standard nancy boy. Mush spiffing good time
                     brown bread cheeky bite your arm off chip shop bugger all mate, my lady down the
                     pub is faff about pukka.
                 </p>
                 <blockquote>
                     <p>
-                        I don't want no agro brilliant are you taking the piss skive off super boot
-                        chancer don't get shirty.
+                        I don&#39;t want no agro brilliant are you taking the piss skive off super boot
+                        chancer don&#39;t get shirty.
                     </p>
                     <cite>Indigo Violet</cite>
                 </blockquote>
                 <p>
                     That faff about the full monty blower bubble and squeak cheeky old matie boy
-                    burke, the bee's knees what a load of rubbish golly gosh mufty is Elizabeth
-                    squiffy, lurgy chimney pot Jeffrey Richard naff Queen's English cheesed off. Old
+                    burke, the bee&#39;s knees what a load of rubbish golly gosh mufty is Elizabeth
+                    squiffy, lurgy chimney pot Jeffrey Richard naff Queen&#39;s English cheesed off. Old
                     bonnet cheesed off lurgy me old mucker a blinding shot bits and bobs lavatory
                     barney, say no biggie jolly good mush chancer pukka what a load of rubbish,
-                    Harry don't get shirty with me arse over tit he lost his bottle spiffing good
+                    Harry don&#39;t get shirty with me arse over tit he lost his bottle spiffing good
                     time bubble and squeak say. I bog Harry a load of old tosh quaint brown bread
                     get stuffed mate bobby, lemon squeezy boot bum bag chimney pot codswallop
-                    amongst, lavatory twit bits and bobs pardon you daft ummm I'm telling. Blatant
+                    amongst, lavatory twit bits and bobs pardon you daft ummm I&#39;m telling. Blatant
                     matie boy say bugger all mate butty gormless, you mug pukka happy days bobby.
                     Down the pub what a load of rubbish geeza faff about chancer bits and bobs daft
-                    lavatory boot victoria sponge spend a penny grub ummm I'm telling, absolutely
-                    bladdered A bit of how's your father arse over tit do one chimney pot tomfoolery
+                    lavatory boot victoria sponge spend a penny grub ummm I&#39;m telling, absolutely
+                    bladdered A bit of how&#39;s your father arse over tit do one chimney pot tomfoolery
                     porkies owt to do with me spiffing good time zonked.
                 </p>
                 <div className="post-tags">
@@ -98,7 +99,7 @@ function Blog() {
                     </a>
                 </div>
                 <div className="post-admin">
-                    <img src={author} alt="" />
+                    <Image width='100' height='100' src={author} alt="" />
                     <a href="#">Justin Case</a>
                     <span>About Author</span>
                     <p>
@@ -112,7 +113,7 @@ function Blog() {
                 <ol className="comment-list">
                     <li>
                         <div className="single-comment">
-                            <img src={cmnt1} alt="" />
+                            <Image width='100' height='100' src={cmnt1} alt="" />
                             <h5>
                                 <a href="#">Jason Response</a>
                             </h5>
@@ -121,7 +122,7 @@ function Blog() {
                                 <p>
                                     He legged it bevvy mush owt to do with me such fibber fa about
                                     cup of tea sloshed morish butty bubble. Butty gormless lavatory
-                                    twit bits and bobs pardon you daft ummm I'm telling.
+                                    twit bits and bobs pardon you daft ummm I&#39;m telling.
                                 </p>
                             </div>
                             <a className="comment-reply-link" href="#">
@@ -132,7 +133,7 @@ function Blog() {
                         <ul className="children">
                             <li>
                                 <div className="single-comment">
-                                    <img src={cmnt2} alt="" />
+                                    <Image width='100' height='100' src={cmnt2} alt="" />
                                     <h5>
                                         <a href="#">Sue Shei</a>
                                     </h5>
@@ -141,7 +142,7 @@ function Blog() {
                                         <p>
                                             Super chancer cheeky bloke haggle give us a bell well
                                             mufty chinwag say bite. lavatory twit bits and bobs
-                                            pardon you daft ummm I'm telling. Blatant matie boy say
+                                            pardon you daft ummm I&#39;m telling. Blatant matie boy say
                                             bugger all mate butty gormless
                                         </p>
                                     </div>
@@ -153,7 +154,7 @@ function Blog() {
                             </li>
                             <li>
                                 <div className="single-comment">
-                                    <img src={cmnt3} alt="" />
+                                    <Image width='100' height='100' src={cmnt3} alt="" />
                                     <h5>
                                         <a href="#">Douglas Lyphe</a>
                                     </h5>
@@ -163,7 +164,7 @@ function Blog() {
                                             Oxford baking cakes dropped clanger fanny around
                                             vagabond amongst cor blimey guvnor. Blatant matie boy
                                             say bugger all mate butty gormless lavatory twit bits
-                                            and bobs pardon you daft ummm I'm telling.
+                                            and bobs pardon you daft ummm I&#39;m telling.
                                         </p>
                                     </div>
                                     <a className="comment-reply-link" href="#">
diff --git a/app/components/News/BlogSideBar.js b/app/components/News/BlogSideBar.js
index b8aa0e0..7fe784f 100644
--- a/app/components/News/BlogSideBar.js
+++ b/app/components/News/BlogSideBar.js
@@ -3,6 +3,7 @@ import BlogImg1 from '../../assets/images/blog/p1.jpg';
 import BlogImg2 from '../../assets/images/blog/p2.jpg';
 import BlogImg3 from '../../assets/images/blog/p3.jpg';
 import BlogImg4 from '../../assets/images/blog/p4.jpg';
+import Image from 'next/image';
 
 function BlogSideBar() {
     return (
@@ -52,7 +53,7 @@ function BlogSideBar() {
                 <h3 className="widget-title">Popular Posts</h3>
                 <div className="popular-post">
                     <a href="single-post.html">
-                        <img src={BlogImg1} alt="" />
+                        <Image width='100' height='100' src={BlogImg1} alt="" />
                     </a>
                     <h5>
                         <a href="single-post.html">Using creative problem Solving</a>
@@ -61,7 +62,7 @@ function BlogSideBar() {
                 </div>
                 <div className="popular-post">
                     <a href="single-post.html">
-                        <img src={BlogImg2} alt="" />
+                        <Image width='100' height='100' src={BlogImg2} alt="" />
                     </a>
                     <h5>
                         <a href="single-post.html">Fundamentals of UI Design</a>
@@ -70,7 +71,7 @@ function BlogSideBar() {
                 </div>
                 <div className="popular-post">
                     <a href="single-post.html">
-                        <img src={BlogImg3} alt="" />
+                        <Image width='100' height='100' src={BlogImg3} alt="" />
                     </a>
                     <h5>
                         <a href="single-post.html">Making music with Other people</a>
@@ -79,7 +80,7 @@ function BlogSideBar() {
                 </div>
                 <div className="popular-post">
                     <a href="single-post.html">
-                        <img src={BlogImg4} alt="" />
+                        <Image width='100' height='100' src={BlogImg4} alt="" />
                     </a>
                     <h5>
                         <a href="single-post.html">Brush strokes energize Trees in paintings</a>
diff --git a/app/components/News/Blogs.js b/app/components/News/Blogs.js
index f2b7dda..3a92eb7 100644
--- a/app/components/News/Blogs.js
+++ b/app/components/News/Blogs.js
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import blogOne from "../../assets/images/blog/1.jpg";
 import BlogData from "../../Services/BlogData";
-// import Image from "next/image";
+import Image from "next/image";
 
 /**
  * Fetches blog data from an API and renders the blogs on the page.
diff --git a/app/components/News/HeaderNews.js b/app/components/News/HeaderNews.js
index 3f55074..52a07b0 100644
--- a/app/components/News/HeaderNews.js
+++ b/app/components/News/HeaderNews.js
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import Image from 'next/image';
 import logo from '../../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
@@ -18,7 +19,7 @@ function HeaderNews({ action }) {
                             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                                 <div className="wrench-logo-box">
                                     <a href="/">
-                                        <img src={logo} alt="" />
+                                        <Image width='auto' height='auto' src={logo} alt="" />
                                     </a>
                                 </div>
                             </div>
diff --git a/app/components/NextAfterHero.js b/app/components/NextAfterHero.js
index e12ba07..9b224d9 100644
--- a/app/components/NextAfterHero.js
+++ b/app/components/NextAfterHero.js
@@ -38,7 +38,7 @@ function NextAfterHero() {
                                         </div>
                                         <h4 className="title">Carefully designed</h4>
                                         <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
+                                            He lost his bottle loo don&#39;t get shirty with me ruddy.
                                         </p>
                                     </div>
                                 </div>
@@ -60,7 +60,7 @@ function NextAfterHero() {
                                         </div>
                                         <h4 className="title">Clean Modern Code</h4>
                                         <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
+                                            He lost his bottle loo don&#39;t get shirty with me ruddy.
                                         </p>
                                     </div>
                                 </div>
@@ -82,7 +82,7 @@ function NextAfterHero() {
                                         </div>
                                         <h4 className="title">User Interactive</h4>
                                         <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
+                                            He lost his bottle loo don&#39;t get shirty with me ruddy.
                                         </p>
                                     </div>
                                 </div>
@@ -104,7 +104,7 @@ function NextAfterHero() {
                                         </div>
                                         <h4 className="title">Choose a App</h4>
                                         <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
+                                            He lost his bottle loo don&#39;t get shirty with me ruddy.
                                         </p>
                                     </div>
                                 </div>
diff --git a/app/components/ProjectHomeOne.js b/app/components/ProjectHomeOne.js
index 6e0ed28..57c73e7 100644
--- a/app/components/ProjectHomeOne.js
+++ b/app/components/ProjectHomeOne.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 
 function ProjectHomeOne() {
     return (
@@ -29,7 +30,7 @@ function ProjectHomeOne() {
                                     </div>
                                 </div>
                                 <div className="appie-project-thumb">
-                                    <img src="assets/images/project-thumb.png" alt="" />
+                                    <Image width='auto' height='auto' src="assets/images/project-thumb.png" alt="" />
                                 </div>
                             </div>
                         </div>
diff --git a/app/components/RecentJobsOne.js b/app/components/RecentJobsOne.js
index 77c0c63..c590da1 100644
--- a/app/components/RecentJobsOne.js
+++ b/app/components/RecentJobsOne.js
@@ -60,11 +60,11 @@ titleLen(title){
                         <div className="row">
 
                             {
-                                this.state.jobsDataResults.map(i => {
+                                this.state.jobsDataResults.map((i, index) => {
                                     var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                                     var postDt  = new Date(i.expire).toLocaleDateString("en-US", options); 
 
-                                    return (<div className="col-md-6 col-xl-3">
+                                    return (<div key={index} className="col-md-6 col-xl-3">
                                         <div
                                             className="appie-single-service container-fluid mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
                                             data-wow-duration="3000ms"
diff --git a/app/components/SelectFeatutes.js b/app/components/SelectFeatutes.js
index b8f1b51..f8922f8 100644
--- a/app/components/SelectFeatutes.js
+++ b/app/components/SelectFeatutes.js
@@ -149,7 +149,7 @@ function SelectFeatures({ className }) {
                                                 Assign <br /> tasks or chores
                                             </h3>
                                             <p>
-                                                Adapt to your family's needs with the flexibility of using one-time or repeated tasks or chores with the option to find any task.
+                                                Adapt to your family&#39;s needs with the flexibility of using one-time or repeated tasks or chores with the option to find any task.
                                             </p>
                                             <a className="main-btn" href="#">
                                                 Learn More
diff --git a/app/components/ServicesHomeOne.js b/app/components/ServicesHomeOne.js
index b0bf74c..f9eee09 100644
--- a/app/components/ServicesHomeOne.js
+++ b/app/components/ServicesHomeOne.js
@@ -4,6 +4,7 @@ import IconTwo from '../assets/images/icon/assign-chores.png';
 import IconThree from '../assets/images/icon/financial-education.png';
 import IconFour from '../assets/images/icon/family-connect.png';
 import Main from '../lnd/LndParts/Design/Main';
+import Image from 'next/image';
 
 function ServiceItem({ icon, title, description, index }) {
   return (
@@ -14,7 +15,7 @@ function ServiceItem({ icon, title, description, index }) {
       style={{ cursor: "default" }}
     >
       <div className="icon">
-        <img src={icon} alt={title} width={70} height={70} loading="lazy" />
+        <Image src={icon} alt={title} width={70} height={70} loading="lazy" />
       </div>
       <h4 className="appie-title">{title}</h4>
       <p>{description}</p>
diff --git a/app/components/TeamHomeOne.js b/app/components/TeamHomeOne.js
index 015dd63..e51b808 100644
--- a/app/components/TeamHomeOne.js
+++ b/app/components/TeamHomeOne.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import teamOne from '../../assets/images/Olu-Amey-001.jpg';
 import teamTwo from '../../assets/images/team-2.jpg';
 import teamThree from '../../assets/images/Toks-Law.jpg';
@@ -25,7 +26,7 @@ function TeamHomeOne() {
                                 data-wow-delay="200ms"
                             >
                                 <div className="thumb">
-                                    <img src={teamOne} alt="" />
+                                    <Image width='auto' height='auto' src={teamOne} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -57,7 +58,7 @@ function TeamHomeOne() {
                                 data-wow-delay="400ms"
                             >
                                 <div className="thumb">
-                                    <img src={teamTwo} alt="" />
+                                    <Image width='auto' height='auto' src={teamTwo} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -89,7 +90,7 @@ function TeamHomeOne() {
                                 data-wow-delay="600ms"
                             >
                                 <div className="thumb">
-                                    <img src={teamThree} alt="" />
+                                    <Image width='auto' height='auto' src={teamThree} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -121,7 +122,7 @@ function TeamHomeOne() {
                                 data-wow-delay="800ms"
                             >
                                 <div className="thumb">
-                                    <img src={teamFour} alt="" />
+                                    <Image width='auto' height='auto' src={teamFour} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
diff --git a/app/components/TestimonialHomeOne.js b/app/components/TestimonialHomeOne.js
index 17f1f01..815aaaa 100644
--- a/app/components/TestimonialHomeOne.js
+++ b/app/components/TestimonialHomeOne.js
@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+import Image from 'next/image';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick-theme.css';
 import 'slick-carousel/slick/slick.css';
@@ -30,13 +31,13 @@ function TestimonialHomeOne() {
                             <Slider ref={sliderRef} dots arrows={false}>
                                 <div className="appie-testimonial-item text-center">
                                     <div className="author-info">
-                                        <img src={user} alt="" />
+                                        <Image width='auto' height='auto' src={user} alt="" />
                                         <h5 className="title">Lanta Greece</h5>
                                         <span>July, 2021</span>
                                     </div>
                                     <div className="text">
                                         <p>
-                                            Loving what you do to earn an income is the new word of mouth. I would absolutely recommend WrenchBoard.It 's so easy to use and you get paid instantly.
+                                            Loving what you do to earn an income is the new word of mouth. I would absolutely recommend WrenchBoard.It&#39;s so easy to use and you get paid instantly.
                                         </p>
                                         <ul>
                                             <li>
@@ -59,7 +60,7 @@ function TestimonialHomeOne() {
                                 </div>
                                 <div className="appie-testimonial-item text-center">
                                     <div className="author-info">
-                                        <img src={user} alt="" />
+                                        <Image width='auto' height='auto' src={user} alt="" />
                                         <h5 className="title">Jason Response</h5>
                                         <span>April 14, 2022</span>
                                     </div>
@@ -90,7 +91,7 @@ function TestimonialHomeOne() {
                                 </div>
                                 <div className="appie-testimonial-item text-center">
                                     <div className="author-info">
-                                        <img src={user} alt="" />
+                                        <Image width='auto' height='auto' src={user} alt="" />
                                         <h5 className="title">Jason Response</h5>
                                         <span>April 14, 2022</span>
                                     </div>
diff --git a/app/components/WrenchBoardHome.js b/app/components/WrenchBoardHome.js
index 3b3e3a9..cf7573e 100644
--- a/app/components/WrenchBoardHome.js
+++ b/app/components/WrenchBoardHome.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import heroThumbOne from '../../assets/images/Actualize.jpg';
 import heroThumbTwo from '../../assets/images/hero-thumb-2.png';
 import shapeTwo from '../../assets/images/shape/shape-2.png';
@@ -42,14 +43,14 @@ function WrenchBoardHome() {
                                     data-wow-duration="2000ms"
                                     data-wow-delay="200ms"
                                 >
-                                    <img src={heroThumbOne} alt="" />
+                                    <Image width='auto' height='auto' src={heroThumbOne} alt="" />
                                 </div>
                                 <div
                                     className="thumb-2 wow animated fadeInRight"
                                     data-wow-duration="2000ms"
                                     data-wow-delay="600ms"
                                 >
-                                    <img src={heroThumbTwo} alt="" />
+                                    <Image width='auto' height='auto' src={heroThumbTwo} alt="" />
                                 </div>
                             </div>
                         </div>
diff --git a/app/faq/FAQService.js b/app/faq/FAQService.js
index c3e073d..92d337d 100644
--- a/app/faq/FAQService.js
+++ b/app/faq/FAQService.js
@@ -68,7 +68,7 @@ function FAQService() {
                                     </div>
                                 </div>
                                 <div className='container-fluid text-center'>
-                                    <p className='my-4'>Can't find an answer <Link href='/contact'>contact us</Link> </p>
+                                    <p className='my-4'>Can&#39;t find an answer <Link href='/contact'>contact us</Link> </p>
                                 </div>
                             </div>
                         </div>
@@ -96,7 +96,7 @@ export function Accordion({ datas, name, accordionHandler, isOpen }) {
             </div>
             <div className="accordion-title-icon">
               <span className={`horizontal ${isOpen.type == name ? 'vertical' : ''}`}>
-                <Image width='auto' height='auto' className="" src={Arrow} />
+                <Image width='auto' height='auto' className="" src={Arrow} alt='image' />
               </span>
             </div>
           </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index c4102cb..a099dc2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -32,7 +32,7 @@ export default function RootLayout({
     <meta property="og:image" content="%PUBLIC_URL%/favicon-32x32.png" />
 
       <body className={inter.className}>{children}</body>
-      <Script>
+      <Script id='chat-support'>
         {`
             var LHC_API = LHC_API || {};
             LHC_API.args = {
diff --git a/app/lib/LazyImage.js b/app/lib/LazyImage.js
index 6df62bd..9ee5c43 100644
--- a/app/lib/LazyImage.js
+++ b/app/lib/LazyImage.js
@@ -1,5 +1,6 @@
 "use client"
 import React, { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
 
 /**
  * Renders an image lazily using the Intersection Observer API.
@@ -13,12 +14,13 @@ function LazyImage({ src, alt }) {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
+    const currentRef = imgRef.current
     const observer = new IntersectionObserver(
       (entries) => {
         const [entry] = entries;
         if (entry.isIntersecting) {
           setIsVisible(true);
-          observer.unobserve(imgRef.current); // Stop observing once the image is in the viewport
+          observer.unobserve(currentRef); // Stop observing once the image is in the viewport
         }
       },
       {
@@ -28,19 +30,19 @@ function LazyImage({ src, alt }) {
       }
     );
 
-    if (imgRef.current) {
-      observer.observe(imgRef.current);
+    if (currentRef) {
+      observer.observe(currentRef);
     }
 
     return () => {
-      if (imgRef.current) {
-        observer.unobserve(imgRef.current);
+      if (currentRef) {
+        observer.unobserve(currentRef);
       }
     };
   }, []);
 
   return (
-    <img
+    <Image width='auto' height='auto'
       ref={imgRef}
       src={isVisible ? src : ''}
       alt={alt}
diff --git a/app/lnd/Lnd.js b/app/lnd/Lnd.js
index f5a9bec..1a448ba 100644
--- a/app/lnd/Lnd.js
+++ b/app/lnd/Lnd.js
@@ -27,6 +27,7 @@
 
 
 import React , {useState, useEffect} from 'react'
+import Image from 'next/image'
 //import { HashLink as Link } from 'react-router-hash-link';
 import Design from './LndParts/Design/Main'
 import Work from './LndParts/Work/Main'
@@ -63,7 +64,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
             <div className="container">
                 <nav className="navbar navbar-expand-lg">
                     <Link to="/" className="navbar-brand">
-                        <img src="assets/images/logo.png" alt="image" />
+                        <Image width='auto' height='auto' src="assets/images/logo.png" alt="image" />
                     </Link>
                     <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                         aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -138,9 +139,9 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
             <section className="banner_section homedark-banner min-vh-100">
                 <div className="container">
                     <div className="row position-relative">
-                        <span className="position-absolute banner_shape1"> <img src={localImgLoad('images/banner-shape-one1.png')} width='10px' alt="image" /> </span>
-                        <span className="position-absolute banner_shape2"> <img src={localImgLoad('images/banner-shape2two.png')} width='10px' alt="image" /> </span>
-                        <span className="position-absolute banner_shape3"> <img src={localImgLoad('images/banner-shapethree3.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape1"> <Image height='auto' src={localImgLoad('images/banner-shape-one1.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape2"> <Image height='auto' src={localImgLoad('images/banner-shape2two.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape3"> <Image height='auto' src={localImgLoad('images/banner-shapethree3.png')} width='10px' alt="image" /> </span>
 
                         <div className="col-12 col-lg-6 mx-auto text-center"  data-aos="fade-right" data-aos-duration="1500">
                             <div className="banner_text my-3 p-4">
@@ -151,7 +152,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="thumbnil">
                                     <a className="popup-youtube play-button" onClick = {() => setytShow(true)} data-url="#" data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
                                         {/* <span className="play_btn position-relative">
-                                            <img src={localImgLoad('images/play_icon.png')} className='position-relative' width='30px' height='30px' alt="image" />
+                                            <Image src={localImgLoad('images/play_icon.png')} className='position-relative' width='30px' height='30px' alt="image" />
                                             <div className="waves-block">
                                                 <div className="waves wave-1"></div>
                                                 <div className="waves wave-2"></div>
@@ -159,7 +160,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                             </div>
                                         </span> */}
                                         <span className="play_btn position-relative rounded-circle d-flex justify-content-center align-items-center">
-                                            <img src={localImgLoad('images/play_icon.png')} className='p-1 position-relative rounded-circle' width='30px' height='30px' alt="image" />
+                                            <Image src={localImgLoad('images/play_icon.png')} className='p-1 position-relative rounded-circle' width='30px' height='30px' alt="image" />
                                         </span>
                                     </a>
                                 </div>
@@ -172,30 +173,30 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="img-con d-block d-sm-flex justify-content-around align-items-center gap-5">
                             <div className="col-lg-2 d-none d-lg-block">
                                 <div className="banner_screen screen1 text-center">
-                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-5.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_position_animatin" src={localImgLoad('images/hero-image-5.png')} alt="image" />
                                 </div>
                             </div>
 
                             <div className="col-12 col-sm-4 col-lg-2">
                                 <div className="banner_screen screen2 text-center">
-                                    <img className="moving_animation" src={localImgLoad('images/hero-image-4.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_animation" src={localImgLoad('images/hero-image-4.png')} alt="image" />
                                 </div>
                             </div>
 
                             <div className="my-4 my-md-0 col-12 col-sm-4 col-lg-3">
                                 <div className="banner_screen screen3 text-center">
-                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-1.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_position_animatin" src={localImgLoad('images/hero-image-1.png')} alt="image" />
                                 </div>
                             </div>
 
                             <div className="col-12 col-sm-4 col-lg-2">
                                 <div className="banner_screen screen4 text-center">
-                                    <img className="moving_animation" src={localImgLoad('images/hero-image-2.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_animation" src={localImgLoad('images/hero-image-2.png')} alt="image" />
                                 </div>
                             </div>
                             <div className="col-lg-2 d-none d-lg-block">
                                 <div className="banner_screen screen5 text-center">
-                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-3.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_position_animatin" src={localImgLoad('images/hero-image-3.png')} alt="image" />
                                 </div>
                             </div>
                         </div>
@@ -208,14 +209,14 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                     <ul className="app_btn" data-aos="fade-in" data-aos-duration="1500">
                         <li>
                             <a href="#" className="app_store">
-                                <img className="blue_img" src={localImgLoad('images/appstore_blue.png')} alt="image" />
-                                <img className="white_img" src={localImgLoad('images/appstore_white.png')} alt="image" />
+                                <Image width='auto' height='auto' className="blue_img" src={localImgLoad('images/appstore_blue.png')} alt="image" />
+                                <Image width='auto' height='auto' className="white_img" src={localImgLoad('images/appstore_white.png')} alt="image" />
                             </a>
                         </li>
                         <li>
                             <a href="#">
-                                <img className="blue_img" src={localImgLoad('images/googleplay_blue.png')} alt="image" />
-                                <img className="white_img" src={localImgLoad('images/googleplay_white.png')} alt="image" />
+                                <Image width='auto' height='auto' className="blue_img" src={localImgLoad('images/googleplay_blue.png')} alt="image" />
+                                <Image width='auto' height='auto' className="white_img" src={localImgLoad('images/googleplay_white.png')} alt="image" />
                             </a>
                         </li>
                     </ul>
@@ -227,7 +228,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12" data-aos="fade-up" data-aos-duration="1000">
                             <li>
                                 <div className="icon">
-                                    <img src={localImgLoad('images/download-dark.png')} alt="image" />
+                                    <Image width='auto' height='auto' src={localImgLoad('images/download-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
@@ -239,7 +240,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1200">
                             <li>
                                 <div className="icon">
-                                    <img src={localImgLoad('images/followers-dark.png')} alt="image" />
+                                    <Image width='auto' height='auto' src={localImgLoad('images/followers-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
@@ -251,7 +252,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1400">
                             <li>
                                 <div className="icon">
-                                    <img src={localImgLoad('images/reviews-dark.png')} alt="image" />
+                                    <Image width='auto' height='auto' src={localImgLoad('images/reviews-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
@@ -263,7 +264,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1600">
                             <li>
                                 <div className="icon">
-                                    <img src={localImgLoad('images/countries-dark.png')} alt="image" />
+                                    <Image width='auto' height='auto' src={localImgLoad('images/countries-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
@@ -286,7 +287,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="col-md-4">
                                     <div className="feature_box" data-aos="fade-up" data-aos-duration="1500">
                                         <div className="image">
-                                            <img src={localImgLoad('images/features1.png')} alt="image" />
+                                            <Image width='auto' height='auto' src={localImgLoad('images/features1.png')} alt="image" />
                                         </div>
                                         <div className="text">
                                             <h4>Secure data</h4>
@@ -298,7 +299,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="col-md-4">
                                     <div className="feature_box" data-aos="fade-up" data-aos-duration="1700">
                                         <div className="image">
-                                            <img src={localImgLoad('images/features2.png')} alt="image" />
+                                            <Image width='auto' height='auto' src={localImgLoad('images/features2.png')} alt="image" />
                                         </div>
                                         <div className="text">
                                             <h4>Automate everything</h4>
@@ -310,7 +311,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="col-md-4">
                                     <div className="feature_box" data-aos="fade-up" data-aos-duration="1900">
                                         <div className="image">
-                                            <img src={localImgLoad('images/features3.png')} alt="image" />
+                                            <Image width='auto' height='auto' src={localImgLoad('images/features3.png')} alt="image" />
                                         </div>
                                         <div className="text">
                                             <h4>Secure data</h4>
diff --git a/app/lnd/LndParts/AboutApp/Main.js b/app/lnd/LndParts/AboutApp/Main.js
index 725f761..986e849 100644
--- a/app/lnd/LndParts/AboutApp/Main.js
+++ b/app/lnd/LndParts/AboutApp/Main.js
@@ -1,5 +1,5 @@
-import { Link } from 'react-router-dom'
 import React from 'react'
+import Image from 'next/image';
 //import frame from '../../../../assets/images/about-frame.png'
 import frame from '../../../../assets/images/use-case-side-main.png'; //about-frame.png'
 import screen from '../../../../assets/images/use-case-side-extra.png'; //about-screen.png'
@@ -17,10 +17,10 @@ const Main = ({ video, dark }) => {
             <div className="col-lg-6">
               <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
                 <div className="frame_img">
-                  <img className="moving_position_animatin" src={frame} alt="image" />
+                  <Image width='auto' height='auto' className="moving_position_animatin" src={frame} alt="image" />
                 </div>
                 <div className="screen_img">
-                  <img className="moving_animation" src={screen} alt="image" />
+                  <Image width='auto' height='auto' className="moving_animation" src={screen} alt="image" />
                 </div>
               </div>
             </div>
diff --git a/app/lnd/LndParts/Design/Main.js b/app/lnd/LndParts/Design/Main.js
index 10dccbe..cbca629 100644
--- a/app/lnd/LndParts/Design/Main.js
+++ b/app/lnd/LndParts/Design/Main.js
@@ -1,5 +1,6 @@
 "use client"
 import React, { useState } from 'react'
+import Image from 'next/image'
 //import localImgLoad from  "../../../lib/localImgLoad"; // "../../../lib/localImgLoad"; 
 
 // import img1 from '../../../../assets/images/modern01.png'
@@ -22,7 +23,7 @@ const Main = ({gredient}) => {
         <section className={`row_am ${gredient && "gredient-bg"}`} >
             {gredient &&
             <div className="modernui_section_bg modernui-gredient"> 
-                <img src="assets/images/section-bg.png" alt="image"/> 
+                <Image width='auto' height='auto' src="assets/images/section-bg.png" alt="image"/> 
             </div>
             }
             <div className="container">
@@ -43,7 +44,7 @@ const Main = ({gredient}) => {
                             </div>
                             <div className="row">
                             {list?.map(({ icon, header, paragraph, name }, idx) => (
-                                <div className="col-12 mb-10" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
+                                <div key={idx} className="col-12 mb-10" onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                     <div
                                         className={`appie-traffic-service features appie-modern-design`}
                                     >
diff --git a/app/lnd/LndParts/Download/Main.js b/app/lnd/LndParts/Download/Main.js
index bae2dff..4ec3f72 100644
--- a/app/lnd/LndParts/Download/Main.js
+++ b/app/lnd/LndParts/Download/Main.js
@@ -1,5 +1,6 @@
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import React, {useState} from 'react'
+import Image from 'next/image'
 import img from '../../../../assets/images/anim_line.png'
 import blueapp from '../../../../assets/images/appstore_blue.png'
 import blue from '../../../../assets/images/googleplay_blue.png'
@@ -32,15 +33,15 @@ const Main = () => {
             <div className="container">
                 <div className={`free_app_inner aos-init ${animate && "aos-animate"}`} data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
                     <div className="anim_line dark_bg">
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
                     </div>
                     <div className="row">
                         <div className="col-md-6">
@@ -52,13 +53,13 @@ const Main = () => {
                                 </div>
                                 <ul className="app_btn">
                                 <li>
-                                    <Link to="#">
-                                    <img src={blueapp} alt="image" />
+                                    <Link href="#">
+                                    <Image width='auto' height='auto' src={blueapp} alt="image" />
                                     </Link>
                                 </li>
                                 <li>
-                                    <Link to="#">
-                                    <img src={blue} alt="image" />
+                                    <Link href="#">
+                                    <Image width='auto' height='auto' src={blue} alt="image" />
                                     </Link>
                                 </li>
                                 </ul>
@@ -66,8 +67,8 @@ const Main = () => {
                         </div>
                         <div className="col-md-6">
                             <div className="free_img">
-                                <img src={screen} alt="image" />
-                                <img className="mobile_mockup" src={screen1} alt="image" />
+                                <Image width='auto' height='auto' src={screen} alt="image" />
+                                <Image width='auto' height='auto' className="mobile_mockup" src={screen1} alt="image" />
                             </div>
                         </div>
                     </div>
diff --git a/app/lnd/LndParts/Faq/Main.js b/app/lnd/LndParts/Faq/Main.js
index f2c8093..9fb3c81 100644
--- a/app/lnd/LndParts/Faq/Main.js
+++ b/app/lnd/LndParts/Faq/Main.js
@@ -1,4 +1,5 @@
 import React ,{ useState } from 'react'
+import Image from 'next/image'
 
 const Main = ({gredient}) => {
 
@@ -7,7 +8,7 @@ const Main = ({gredient}) => {
   return (
     <>
         <section className="row_am faq_section">
-        {gredient && <div className="faq_bg"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
+        {gredient && <div className="faq_bg"> <Image width='auto' height='auto' src="assets/images/section-bg.png" alt="image"/> </div>}
             <div className="container">
                 <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                     <h2><span>FAQ</span> - Frequently Asked Questions</h2>
diff --git a/app/lnd/LndParts/Features/Main.js b/app/lnd/LndParts/Features/Main.js
index 0e01a2d..9539eb6 100644
--- a/app/lnd/LndParts/Features/Main.js
+++ b/app/lnd/LndParts/Features/Main.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import img1 from '../../../assets/images/secure_data.png'
 import img2 from '../../../assets/images/functional.png'
 import img3 from '../../../assets/images/live-chat.png'
@@ -20,7 +21,7 @@ const Main = ({video}) => {
                 <div className="left_data feature_box">
                     <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
                     <div className="icon">
-                        <img src="assets/images/secure.png" alt="image" />
+                        <Image width='auto' height='auto' src="assets/images/secure.png" alt="image" />
                     </div>
                     <div className="text">
                         <h4>Secure data</h4>
@@ -29,7 +30,7 @@ const Main = ({video}) => {
                     </div>
                     <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
                     <div className="icon">
-                        <img src="assets/images/abt_functional.png" alt="image" />
+                        <Image width='auto' height='auto' src="assets/images/abt_functional.png" alt="image" />
                     </div>
                     <div className="text">
                         <h4>Fully functional</h4>
@@ -40,7 +41,7 @@ const Main = ({video}) => {
                 <div className="right_data feature_box">
                     <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
                     <div className="icon">
-                        <img src="assets/images/communication.png" alt="image"/>
+                        <Image width='auto' height='auto' src="assets/images/communication.png" alt="image"/>
                     </div>
                     <div className="text">
                         <h4>Live chat</h4>
@@ -49,7 +50,7 @@ const Main = ({video}) => {
                     </div>
                     <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
                     <div className="icon">
-                        <img src="assets/images/abt_support.png" alt="image" />
+                        <Image width='auto' height='auto' src="assets/images/abt_support.png" alt="image" />
                     </div>
                     <div className="text">
                         <h4>24-7 Support</h4>
@@ -58,7 +59,7 @@ const Main = ({video}) => {
                     </div>
                 </div>
                 <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                    <img src="assets/images/features_frame.png" alt="image" />
+                    <Image width='auto' height='auto' src="assets/images/features_frame.png" alt="image" />
                 </div>
                 </div>
             </div>
@@ -75,7 +76,7 @@ const Main = ({video}) => {
                 <div className="left_data feature_box">
                     <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
                     <div className="icon">
-                        <img src={img1} alt="image" />
+                        <Image width='auto' height='auto' src={img1} alt="image" />
                     </div>
                     <div className="text">
                         <h4>Secure data</h4>
@@ -84,7 +85,7 @@ const Main = ({video}) => {
                     </div>
                     <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
                     <div className="icon">
-                        <img src={img2} alt="image" />
+                        <Image width='auto' height='auto' src={img2} alt="image" />
                     </div>
                     <div className="text">
                         <h4>Fully functional</h4>
@@ -95,7 +96,7 @@ const Main = ({video}) => {
                 <div className="right_data feature_box">
                     <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
                     <div className="icon">
-                        <img src={img3} alt="image"/>
+                        <Image width='auto' height='auto' src={img3} alt="image"/>
                     </div>
                     <div className="text">
                         <h4>Live chat</h4>
@@ -104,7 +105,7 @@ const Main = ({video}) => {
                     </div>
                     <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
                     <div className="icon">
-                        <img src={img4} alt="image" />
+                        <Image width='auto' height='auto' src={img4} alt="image" />
                     </div>
                     <div className="text">
                         <h4>24-7 Support</h4>
@@ -113,7 +114,7 @@ const Main = ({video}) => {
                     </div>
                 </div>
                 <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                    <img src={img5} alt="image" />
+                    <Image width='auto' height='auto' src={img5} alt="image" />
                 </div>
                 </div>
             </div>
diff --git a/app/lnd/LndParts/Interface/Main.js b/app/lnd/LndParts/Interface/Main.js
index 3744a64..98e9c1a 100644
--- a/app/lnd/LndParts/Interface/Main.js
+++ b/app/lnd/LndParts/Interface/Main.js
@@ -1,5 +1,6 @@
 import OwlCarousel from 'react-owl-carousel'
 import React from 'react'
+import Image from 'next/image'
 import img1 from '../../../assets/images/screen-1.png'
 import img2 from '../../../assets/images/screen-2.png'
 import img3 from '../../../assets/images/screen-3.png'
@@ -42,32 +43,32 @@ const Main = () => {
                     <OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img1} alt="image" />
+                                <Image width='auto' height='auto' src={img1} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img2} alt="image" />
+                                <Image width='auto' height='auto' src={img2} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img3} alt="image" />
+                                <Image width='auto' height='auto' src={img3} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img4} alt="image" />
+                                <Image width='auto' height='auto' src={img4} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img5} alt="image" />
+                                <Image width='auto' height='auto' src={img5} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img3} alt="image" />
+                                <Image width='auto' height='auto' src={img3} alt="image" />
                             </div>
                         </div>
                     </OwlCarousel>
diff --git a/app/lnd/LndParts/Pricing/Main.js b/app/lnd/LndParts/Pricing/Main.js
index fb75738..54a4127 100644
--- a/app/lnd/LndParts/Pricing/Main.js
+++ b/app/lnd/LndParts/Pricing/Main.js
@@ -1,5 +1,6 @@
-import { Link } from 'react-router-dom'
 import React , { useState} from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
 import img1 from '../../../assets/images/standard.png'
 import img2 from '../../../assets/images/unlimited.png'
 import img3 from '../../../assets/images/premium.png'
@@ -32,7 +33,7 @@ const Main = ({gredient , video}) => {
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    <img src="assets/images/standard-one.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/standard-one.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Standard</h3>
@@ -56,13 +57,13 @@ const Main = ({gredient , video}) => {
                                         <p>Support on request</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                             <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
-                                    <img src="assets/images/unlimited-one.png" alt="image"/>
+                                    <Image width='auto' height='auto' src="assets/images/unlimited-one.png" alt="image"/>
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Unlimited</h3>
@@ -86,13 +87,13 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    <img src="assets/images/premium-one.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/premium-one.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Premium</h3>
@@ -116,7 +117,7 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                         </div>
@@ -127,7 +128,7 @@ const Main = ({gredient , video}) => {
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    <img src="assets/images/standard.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/standard.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Standard</h3>
@@ -151,14 +152,14 @@ const Main = ({gredient , video}) => {
                                         <p>Support on request</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
 
                             <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
-                                    <img src="assets/images/unlimited.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/unlimited.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Unlimited</h3>
@@ -182,14 +183,14 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
 
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    <img src="assets/images/premium.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/premium.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Premium</h3>
@@ -213,13 +214,13 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
+                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link href="/contact">contact us</Link> for custom packages</p>
                 </div>
             </section>
         :
@@ -244,7 +245,7 @@ const Main = ({gredient , video}) => {
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
+                                    { video ? <Image width='auto' height='auto' src="assets/images/standard-one.png" alt="image" /> : <Image width='auto' height='auto' src={img1} alt="image" /> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Standard</h3>
@@ -268,13 +269,13 @@ const Main = ({gredient , video}) => {
                                         <p>Support on request</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                             <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
-                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2} alt="image"/> }
+                                    { video ? <Image width='auto' height='auto' src="assets/images/unlimited-one.png" alt="image"/> : <Image width='auto' height='auto' src={img2} alt="image"/> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Unlimited</h3>
@@ -298,13 +299,13 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
+                                    {video ? <Image width='auto' height='auto' src="assets/images/premium-one.png" alt="image" /> : <Image width='auto' height='auto' src={img3} alt="image" /> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Premium</h3>
@@ -328,7 +329,7 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                         </div>
@@ -339,7 +340,7 @@ const Main = ({gredient , video}) => {
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
+                                    { video ? <Image width='auto' height='auto' src="assets/images/standard-one.png" alt="image" /> : <Image width='auto' height='auto' src={img1} alt="image" /> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Standard</h3>
@@ -363,14 +364,14 @@ const Main = ({gredient , video}) => {
                                         <p>Support on request</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
 
                             <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
-                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2}alt="image"/> }
+                                    { video ? <Image width='auto' height='auto' src="assets/images/unlimited-one.png" alt="image"/> : <Image width='auto' height='auto' src={img2}alt="image"/> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Unlimited</h3>
@@ -394,14 +395,14 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
 
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
+                                    {video ? <Image width='auto' height='auto' src="assets/images/premium-one.png" alt="image" /> : <Image width='auto' height='auto' src={img3} alt="image" /> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Premium</h3>
@@ -425,13 +426,13 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
+                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link href="/contact">contact us</Link> for custom packages</p>
                 </div>
             </section>
         }
diff --git a/app/lnd/LndParts/Story/Main.js b/app/lnd/LndParts/Story/Main.js
index f40c2e4..2ba005c 100644
--- a/app/lnd/LndParts/Story/Main.js
+++ b/app/lnd/LndParts/Story/Main.js
@@ -1,4 +1,5 @@
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
+import Image from 'next/image'
 import React from 'react'
 import story1 from '../../../../assets/images/story01.png'
 import story2 from '../../../../assets/images/story02.png'
@@ -17,7 +18,7 @@ const Main = () => {
                     <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
-                            <img src={story1} alt="image" />
+                            <Image width='auto' height='auto' src={story1} alt="image" />
                             <span>45 min ago</span>
                             </div>
                             <div className="story_text">
@@ -31,26 +32,26 @@ const Main = () => {
                     <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
-                            <img src={story2} alt="image" />
+                            <Image width='auto' height='auto' src={story2} alt="image" />
                             <span>45 min ago</span>
                             </div>
                             <div className="story_text">
                                 <h3>Top rated app! Yupp.</h3>
                                 <p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
-                                <Link to="/blog-single">READ MORE</Link>
+                                <Link href="/blog-single">READ MORE</Link>
                             </div>
                         </div>
                     </div>
                     <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
-                            <img src={story3} alt="image" />
+                            <Image width='auto' height='auto' src={story3} alt="image" />
                             <span>45 min ago</span>
                             </div>
                             <div className="story_text">
                                 <h3>Creative ideas on app.</h3>
                                 <p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
-                                <Link to="/blog-single">READ MORE</Link>
+                                <Link href="/blog-single">READ MORE</Link>
                             </div>
                         </div>
                     </div>
diff --git a/app/lnd/LndParts/Testimonial/Main.js b/app/lnd/LndParts/Testimonial/Main.js
index 42809a4..ca8b258 100644
--- a/app/lnd/LndParts/Testimonial/Main.js
+++ b/app/lnd/LndParts/Testimonial/Main.js
@@ -1,5 +1,6 @@
 import OwlCarousel from 'react-owl-carousel'
-import { Link } from 'react-router-dom'
+import Image from 'next/image'
+import Link from 'next/link'
 import React from 'react'
 import user1 from '../../../../assets/images/testimonial_user1.png'
 import user2 from '../../../../assets/images/testimonial_user2.png'
@@ -52,7 +53,7 @@ const Main = () => {
                                 beenthe standar dummy. ”
                                 </p>
                                 <div className="testimonial_img">
-                                <img src={user1} alt="image" />
+                                <Image width='auto' height='auto' src={user1} alt="image" />
                                 </div>
                                 <h3>Shayna John</h3>
                                 <span className="designation">Careative inc</span>
@@ -72,7 +73,7 @@ const Main = () => {
                                 beenthe standar dummy. ”
                                 </p>
                                 <div className="testimonial_img">
-                                <img src={user2} alt="image" />
+                                <Image width='auto' height='auto' src={user2} alt="image" />
                                 </div>
                                 <h3>Willium Den</h3>
                                 <span className="designation">Careative inc</span>
@@ -92,7 +93,7 @@ const Main = () => {
                                 beenthe standar dummy. ”
                                 </p>
                                 <div className="testimonial_img">
-                                <img src={user3} alt="image" />
+                                <Image width='auto' height='auto' src={user3} alt="image" />
                                 </div>
                                 <h3>Cyrus Stephen</h3>
                                 <span className="designation">Careative inc</span>
@@ -110,11 +111,11 @@ const Main = () => {
                         <p>5.0 / 5.0</p>
                         </div>
                         <h3>2578</h3>
-                        <Link to="/review">TOTAL USER REVIEWS <i className="icofont-arrow-right"></i></Link>
+                        <Link href="/review">TOTAL USER REVIEWS <i className="icofont-arrow-right"></i></Link>
                     </div>
 
                     <div className="avtar_faces">
-                        <img src={user4} alt="image" />
+                        <Image width='auto' height='auto' src={user4} alt="image" />
                     </div>
                 </div>
             </div>
diff --git a/app/lnd/LndParts/Trusted/Main.js b/app/lnd/LndParts/Trusted/Main.js
index 6968f45..b2eeccc 100644
--- a/app/lnd/LndParts/Trusted/Main.js
+++ b/app/lnd/LndParts/Trusted/Main.js
@@ -5,6 +5,7 @@ import img2 from '../../../assets/images/spoty.png'
 import img3 from '../../../assets/images/shopboat.png'
 import img4 from '../../../assets/images/slack.png'
 import img5 from '../../../assets/images/envato.png'
+import Image from 'next/image'
 
 const Main = () => {
     const company_slider = {
@@ -40,42 +41,42 @@ const Main = () => {
                 <OwlCarousel id="company_slider" {...company_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
                     <div className="item">
                     <div className="logo">
-                        <img src={img1} alt="image" />
+                        <Image width='auto' height='auto' src={img1} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img2} alt="image" />
+                        <Image width='auto' height='auto' src={img2} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img3} alt="image" />
+                        <Image width='auto' height='auto' src={img3} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img4} alt="image" />
+                        <Image width='auto' height='auto' src={img4} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img5} alt="image" />
+                        <Image width='auto' height='auto' src={img5} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img1} alt="image" />
+                        <Image width='auto' height='auto' src={img1} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img2} alt="image" />
+                        <Image width='auto' height='auto' src={img2} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img3} alt="image" />
+                        <Image width='auto' height='auto' src={img3} alt="image" />
                     </div>
                     </div>
                 </OwlCarousel>
diff --git a/app/lnd/LndParts/Work/Main.js b/app/lnd/LndParts/Work/Main.js
index 4016487..8a5f783 100644
--- a/app/lnd/LndParts/Work/Main.js
+++ b/app/lnd/LndParts/Work/Main.js
@@ -1,5 +1,6 @@
 import React , {useState} from 'react'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
+import Image from 'next/image'
 import img from '../../../../assets/images/download_app.jpg'
 import img1 from '../../../../assets/images/create_account.jpg'
 import img2 from '../../../../assets/images/enjoy_app.jpg'
@@ -29,9 +30,9 @@ const Main = ({dark}) => {
                                 <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
                                 <h4>Download app</h4>
                                 <div className="app_icon">
-                                    <Link to="#"><i className="icofont-brand-android-robot"></i></Link>
-                                    <Link to="#"><i className="icofont-brand-apple"></i></Link>
-                                    <Link to="#"><i className="icofont-brand-windows"></i></Link>
+                                    <Link href="#"><i className="icofont-brand-android-robot"></i></Link>
+                                    <Link href="#"><i className="icofont-brand-apple"></i></Link>
+                                    <Link href="#"><i className="icofont-brand-windows"></i></Link>
                                 </div>
                                 <p>Download App either for Windows, Mac or Android</p>
                                 </div>
@@ -39,7 +40,7 @@ const Main = ({dark}) => {
                                 <h3>01</h3>
                                 </div>
                                 <div className="step_img" data-aos="fade-left" data-aos-duration="1500">
-                                <img src={img} alt="image" />
+                                <Image width='auto' height='auto' src={img} alt="image" />
                                 </div>
                             </li>
                             <li>
@@ -52,20 +53,20 @@ const Main = ({dark}) => {
                                 <h3>02</h3>
                                 </div>
                                 <div className="step_img" data-aos="fade-right" data-aos-duration="1500">
-                                <img src={img1} alt="image" />
+                                <Image width='auto' height='auto' src={img1} alt="image" />
                                 </div>
                             </li>
                             <li>
                                 <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
                                 <h4>It’s done, enjoy the app</h4>
-                                <span>Have any questions check our <Link to="#">FAQs</Link></span>
+                                <span>Have any questions check our <Link href="#">FAQs</Link></span>
                                 <p>Get most amazing app experience,Explore and share the app</p>
                                 </div>
                                 <div className="step_number">
                                 <h3>03</h3>
                                 </div>
                                 <div className="step_img" data-aos="fade-left" data-aos-duration="1500">
-                                <img src={img2} alt="image" />
+                                <Image width='auto' height='auto' src={img2} alt="image" />
                                 </div>
                             </li>
                         </ul>
@@ -76,25 +77,25 @@ const Main = ({dark}) => {
                 <div className="yt_video" style={{display: "none"}} data-aos="fade-in" data-aos-duration="1500">
                     <div className="anim_line dark_bg">
                         
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
                     </div>
                     <div className="thumbnil">
                          
-                        <span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image"/> </span>
-                        <span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image"/> </span>
-                        <span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image"/> </span>
-                        <img src="assets/images/yt_thumb.png" alt="image" />
-                        <Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                        <span className="banner_shape1"> <Image width='auto' height='auto' src="assets/images/banner-shape1.png" alt="image"/> </span>
+                        <span className="banner_shape2"> <Image width='auto' height='auto' src="assets/images/banner-shape2.png" alt="image"/> </span>
+                        <span className="banner_shape3"> <Image width='auto' height='auto' src="assets/images/banner-shape3.png" alt="image"/> </span>
+                        <Image width='auto' height='auto' src="assets/images/yt_thumb.png" alt="image" />
+                        <Link href="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
                         <span className="play_btn">
-                            <img src={video} alt="image" />
+                            <Image width='auto' height='auto' src={video} alt="image" />
                             <div className="waves-block">
                             <div className="waves wave-1"></div>
                             <div className="waves wave-2"></div>
@@ -108,25 +109,25 @@ const Main = ({dark}) => {
                 </div> :
                 <div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
                     <div className="anim_line dark_bg">
-                    <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
+                    <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
                         
                     </div>
                     <div className="thumbnil">
-                        <span className="banner_shape1"> <img src={banner} alt="image"/> </span>
-                        <span className="banner_shape2"> <img src={banner1} alt="image"/> </span>
-                        <span className="banner_shape3"> <img src={banner2} alt="image"/> </span>
-                        <img src={ytvideo} alt="image" />
-                        <Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                        <span className="banner_shape1"> <Image width='auto' height='auto' src={banner} alt="image"/> </span>
+                        <span className="banner_shape2"> <Image width='auto' height='auto' src={banner1} alt="image"/> </span>
+                        <span className="banner_shape3"> <Image width='auto' height='auto' src={banner2} alt="image"/> </span>
+                        <Image width='auto' height='auto' src={ytvideo} alt="image" />
+                        <Link href="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
                         <span className="play_btn">
-                            <img src={video} alt="image" />
+                            <Image width='auto' height='auto' src={video} alt="image" />
                             <div className="waves-block">
                             <div className="waves wave-1"></div>
                             <div className="waves wave-2"></div>
diff --git a/app/service/MissionStatement.js b/app/service/MissionStatement.js
index 7f07698..23a4645 100644
--- a/app/service/MissionStatement.js
+++ b/app/service/MissionStatement.js
@@ -67,8 +67,9 @@ function MissionStatement() {
                                     data-grp-name="faq-accrodion"
                                 >
                                     {
-                                         ourMissions.map((item) => (
+                                         ourMissions.map((item, index) => (
                                                 <div
+                                                    key={index}
                                                     className={`accrodion ${
                                                         showQuestion === item.id ? 'active' : ''
                                                     }`}
diff --git a/app/use-cases/UseCase.js b/app/use-cases/UseCase.js
index 1a0a5d6..20b1bd5 100644
--- a/app/use-cases/UseCase.js
+++ b/app/use-cases/UseCase.js
@@ -20,7 +20,7 @@ function UseCase() {
                             <div key={index} className="col-12 col-md-6 col-lg-4">
                                 <div className="post-item-1">
 
-                                    {<img src={blgImg} alt={i.title} />}
+                                    {<Image width='auto' height='auto' src={blgImg} alt={i.title} />}
                                     <div className="b-post-details">
                                         <h3>
                                             <Link href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>