diff --git a/nuxt-frontend/components/home-new/LandingSection.vue b/nuxt-frontend/components/home-new/LandingSection.vue
index 21c169273..1027ef873 100644
--- a/nuxt-frontend/components/home-new/LandingSection.vue
+++ b/nuxt-frontend/components/home-new/LandingSection.vue
@@ -2,20 +2,20 @@
   <div
     class="relative bg-gradient-to-t from-pink-5 to-white landing-bg-mobile-clip-path md:landing-bg-clip-path overflow-hidden px-0 pb-[3.125rem] md:pb-[6.25rem] 3xl:outer-container"
   >
-    <img
+    <!-- <img
       :src="background400"
       :srcset="`${background400} 400w, ${background800} 800w, ${background1200} 1200w, ${background2100} 2100w`"
       class="absolute top-0 left-0 w-full h-full -z-[1] object-contain"
       alt="canopas-landing"
       loading="eager"
       preloading="high"
-    />
-    <!-- <NuxtImg
+    /> -->
+    <NuxtImg
       preload
-      src="/landing/bg/background-2100w.webp"
+      src="/images/landing/bg/background-2100w.webp"
       class="absolute top-0 left-0 w-full h-full -z-[1] object-contain"
       alt="canopas-landing"
-    /> -->
+    />
     <div
       class="relative container flex flex-col items-center lg:flex-row-reverse lg:items-start pb-[1.563rem] lg:pb-[3.125rem]"
     >
diff --git a/nuxt-frontend/components/home-new/ServiceSectionMobile.vue b/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
index 15b3e8eaa..3ab1475b4 100644
--- a/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
+++ b/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
@@ -60,16 +60,6 @@
 </template>
 
 <script>
-import bullet1 from "@/assets/images/why/why-canopas-dot-1.svg";
-import bullet2 from "@/assets/images/why/why-canopas-dot-2.svg";
-import bullet3 from "@/assets/images/why/why-canopas-dot-3.svg";
-
-import circle1 from "@/assets/images/why/why-canopas-mobile-1.webp";
-import circle2 from "@/assets/images/why/why-canopas-mobile-2.webp";
-import circle3 from "@/assets/images/why/why-canopas-mobile-3.webp";
-import circle4 from "@/assets/images/why/why-canopas-mobile-4.webp";
-import circle5 from "@/assets/images/why/why-canopas-mobile-5.webp";
-
 export default {
   data() {
     return {
@@ -78,37 +68,37 @@ export default {
           title: "Mobile Development",
           content:
             "Whether your goal is to acquire new users, improve your retention rate, or increase in-app sales, our team will guide you based on our decade-long experience. <span class='font-bold'>From native to hybrid, we've got you covered.</span>",
-          image: circle1,
-          bullet: bullet1,
+          image: "/images/why/why-canopas-mobile-1.webp",
+          bullet: "/images/why/why-canopas-dot-1.svg",
           url: "/mobile-app-development",
         },
         {
           title: "Web Development",
           content:
             "Whether you need help with websites, web apps, an admin panel, an analytical dashboard, or desktop apps, our engineers will develop <span class='font-bold'>scalable backend and front-end solutions.</span>",
-          image: circle2,
-          bullet: bullet2,
+          image: "/images/why/why-canopas-mobile-2.webp",
+          bullet: "/images/why/why-canopas-dot-2.svg",
         },
         {
           title: "Custom Software Development",
           content:
             "<span class='font-bold'>Unlock your business growth with tailored solutions</span> for unique business needs, enabling scalability, seamless integration, competitive edge, long-term cost efficiency, and enhanced security.",
-          image: circle3,
-          bullet: bullet3,
+          image: "/images/why/why-canopas-mobile-3.webp",
+          bullet: "/images/why/why-canopas-dot-3.svg",
         },
         {
           title: "UI/UX Design",
           content:
             "We design user-centered UI/UX followed by user testing. <span class='font-bold'>We make design decisions based on only one thing: Data.</span> Because it ensures our clients get value from our work.",
-          image: circle4,
-          bullet: bullet1,
+          image: "/images/why/why-canopas-mobile-4.webp",
+          bullet: "/images/why/why-canopas-dot-1.svg",
         },
         {
           title: "Bug Fixing and Maintenance",
           content:
             "Looking to fix bugs in your app? We've helped multiple clients fix bugs and later added new features to match their vision. Plus, <span class='font-bold'>We offer 6 months of FREE maintenance on our work.</span>",
-          image: circle5,
-          bullet: bullet1,
+          image: "/images/why/why-canopas-mobile-5.webp",
+          bullet: "/images/why/why-canopas-dot-1.svg",
         },
       ],
     };
diff --git a/nuxt-frontend/nuxt.config.js b/nuxt-frontend/nuxt.config.js
index b7a1ad021..c0238d482 100644
--- a/nuxt-frontend/nuxt.config.js
+++ b/nuxt-frontend/nuxt.config.js
@@ -22,7 +22,6 @@ export default defineNuxtConfig({
     "@nuxt/image",
   ],
   image: {
-    dir: "assets/images",
     screens: {
       xs: 420,
       sm: 576,
diff --git a/nuxt-frontend/public/images/why/why-canopas-bg.svg b/nuxt-frontend/public/images/why/why-canopas-bg.svg
new file mode 100644
index 000000000..0d4fb42e3
--- /dev/null
+++ b/nuxt-frontend/public/images/why/why-canopas-bg.svg
@@ -0,0 +1,10 @@
+<svg width="1290" height="666" viewBox="0 0 1290 666" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="1283" cy="528" r="7" fill="#FF9472"/>
+<circle cx="249.5" cy="486.5" r="4.5" fill="#F797A5"/>
+<circle cx="4.5" cy="39.5" r="4.5" fill="#F797A5"/>
+<circle cx="1251" cy="234" r="8" fill="#3D3D3D"/>
+<circle cx="56" cy="416" r="7" fill="#F37299"/>
+<circle cx="107.5" cy="145.5" r="3.5" fill="#FF9472"/>
+<circle cx="1153.5" cy="3.5" r="3.5" fill="#FF9472"/>
+<circle cx="1186" cy="661" r="5" fill="#F2709C"/>
+</svg>
diff --git a/nuxt-frontend/public/images/why/why-canopas-circle.webp b/nuxt-frontend/public/images/why/why-canopas-circle.webp
new file mode 100644
index 000000000..d52e2c9fc
Binary files /dev/null and b/nuxt-frontend/public/images/why/why-canopas-circle.webp differ
diff --git a/nuxt-frontend/public/images/why/why-canopas-dot-1.svg b/nuxt-frontend/public/images/why/why-canopas-dot-1.svg
new file mode 100644
index 000000000..25db4be51
--- /dev/null
+++ b/nuxt-frontend/public/images/why/why-canopas-dot-1.svg
@@ -0,0 +1,18 @@
+<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_444_707)">
+<circle cx="12" cy="12" r="12" fill="#FF9472"/>
+</g>
+<defs>
+<filter id="filter0_d_444_707" x="0" y="0" width="35" height="33" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="6" operator="erode" in="SourceAlpha" result="effect1_dropShadow_444_707"/>
+<feOffset dx="8" dy="6"/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.580392 0 0 0 0 0.447059 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_444_707"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_444_707" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/nuxt-frontend/public/images/why/why-canopas-dot-2.svg b/nuxt-frontend/public/images/why/why-canopas-dot-2.svg
new file mode 100644
index 000000000..1cd5edff5
--- /dev/null
+++ b/nuxt-frontend/public/images/why/why-canopas-dot-2.svg
@@ -0,0 +1,18 @@
+<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_446_675)">
+<circle cx="12" cy="12" r="12" fill="#F2709C"/>
+</g>
+<defs>
+<filter id="filter0_d_446_675" x="0" y="0" width="35" height="33" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="6" operator="erode" in="SourceAlpha" result="effect1_dropShadow_446_675"/>
+<feOffset dx="8" dy="6"/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.94902 0 0 0 0 0.439216 0 0 0 0 0.611765 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_446_675"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_446_675" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/nuxt-frontend/public/images/why/why-canopas-dot-3.svg b/nuxt-frontend/public/images/why/why-canopas-dot-3.svg
new file mode 100644
index 000000000..acfbe71ad
--- /dev/null
+++ b/nuxt-frontend/public/images/why/why-canopas-dot-3.svg
@@ -0,0 +1,18 @@
+<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_446_676)">
+<circle cx="12" cy="12" r="12" fill="#F98386"/>
+</g>
+<defs>
+<filter id="filter0_d_446_676" x="0" y="0" width="35" height="33" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="6" operator="erode" in="SourceAlpha" result="effect1_dropShadow_446_676"/>
+<feOffset dx="8" dy="6"/>
+<feGaussianBlur stdDeviation="4.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.976471 0 0 0 0 0.513726 0 0 0 0 0.52549 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_446_676"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_446_676" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/nuxt-frontend/public/images/why/why-canopas-mobile-1.webp b/nuxt-frontend/public/images/why/why-canopas-mobile-1.webp
new file mode 100755
index 000000000..dd3955593
Binary files /dev/null and b/nuxt-frontend/public/images/why/why-canopas-mobile-1.webp differ
diff --git a/nuxt-frontend/public/images/why/why-canopas-mobile-2.webp b/nuxt-frontend/public/images/why/why-canopas-mobile-2.webp
new file mode 100644
index 000000000..3c1b4d94d
Binary files /dev/null and b/nuxt-frontend/public/images/why/why-canopas-mobile-2.webp differ
diff --git a/nuxt-frontend/public/images/why/why-canopas-mobile-3.webp b/nuxt-frontend/public/images/why/why-canopas-mobile-3.webp
new file mode 100755
index 000000000..b1f1d452f
Binary files /dev/null and b/nuxt-frontend/public/images/why/why-canopas-mobile-3.webp differ
diff --git a/nuxt-frontend/public/images/why/why-canopas-mobile-4.webp b/nuxt-frontend/public/images/why/why-canopas-mobile-4.webp
new file mode 100644
index 000000000..b6611d495
Binary files /dev/null and b/nuxt-frontend/public/images/why/why-canopas-mobile-4.webp differ
diff --git a/nuxt-frontend/public/images/why/why-canopas-mobile-5.webp b/nuxt-frontend/public/images/why/why-canopas-mobile-5.webp
new file mode 100644
index 000000000..2b66f4533
Binary files /dev/null and b/nuxt-frontend/public/images/why/why-canopas-mobile-5.webp differ
diff --git a/nuxt-frontend/public/images/why/why-canopas-mobile-bg.svg b/nuxt-frontend/public/images/why/why-canopas-mobile-bg.svg
new file mode 100644
index 000000000..3e350b463
--- /dev/null
+++ b/nuxt-frontend/public/images/why/why-canopas-mobile-bg.svg
@@ -0,0 +1,10 @@
+<svg width="381" height="1141" viewBox="0 0 381 1141" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="27.5" cy="23.5" r="4.5" transform="rotate(-90 27.5 23.5)" fill="#F797A5"/>
+<circle cx="350.5" cy="3.5" r="3.5" transform="rotate(-90 350.5 3.5)" fill="#FF9472"/>
+<circle cx="16" cy="299" r="3" transform="rotate(-90 16 299)" fill="#F37299"/>
+<circle cx="331.5" cy="288.5" r="3.5" transform="rotate(-90 331.5 288.5)" fill="#FF9472"/>
+<circle cx="376.5" cy="631.5" r="4.5" transform="rotate(-90 376.5 631.5)" fill="#F797A5"/>
+<circle cx="37" cy="776" r="4" transform="rotate(-90 37 776)" fill="#3D3D3D"/>
+<circle cx="5" cy="1136" r="5" transform="rotate(-90 5 1136)" fill="#F2709C"/>
+<circle cx="342" cy="1119" r="3" transform="rotate(-90 342 1119)" fill="#FF9472"/>
+</svg>