diff --git a/vue-frontend/src/assets/images/andriod-app-development/development/1.webp b/vue-frontend/src/assets/images/andriod-app-development/development/1.webp
index 56999cb1d..8955800ef 100644
Binary files a/vue-frontend/src/assets/images/andriod-app-development/development/1.webp and b/vue-frontend/src/assets/images/andriod-app-development/development/1.webp differ
diff --git a/vue-frontend/src/assets/images/andriod-app-development/development/2.webp b/vue-frontend/src/assets/images/andriod-app-development/development/2.webp
index b4e0ec782..30251adf1 100644
Binary files a/vue-frontend/src/assets/images/andriod-app-development/development/2.webp and b/vue-frontend/src/assets/images/andriod-app-development/development/2.webp differ
diff --git a/vue-frontend/src/assets/images/andriod-app-development/development/3.webp b/vue-frontend/src/assets/images/andriod-app-development/development/3.webp
index d6e0dccd1..fae035fd8 100644
Binary files a/vue-frontend/src/assets/images/andriod-app-development/development/3.webp and b/vue-frontend/src/assets/images/andriod-app-development/development/3.webp differ
diff --git a/vue-frontend/src/assets/images/andriod-app-development/development/4.webp b/vue-frontend/src/assets/images/andriod-app-development/development/4.webp
index ad2010f62..9b5f06a8e 100644
Binary files a/vue-frontend/src/assets/images/andriod-app-development/development/4.webp and b/vue-frontend/src/assets/images/andriod-app-development/development/4.webp differ
diff --git a/vue-frontend/src/assets/images/andriod-app-development/development/5.webp b/vue-frontend/src/assets/images/andriod-app-development/development/5.webp
index c550b5b72..47a1cbfed 100644
Binary files a/vue-frontend/src/assets/images/andriod-app-development/development/5.webp and b/vue-frontend/src/assets/images/andriod-app-development/development/5.webp differ
diff --git a/vue-frontend/src/components/android-app-development/BlackCtaSection.vue b/vue-frontend/src/components/android-app-development/BlackCtaSection.vue
index 7e1290815..a7fd9d691 100644
--- a/vue-frontend/src/components/android-app-development/BlackCtaSection.vue
+++ b/vue-frontend/src/components/android-app-development/BlackCtaSection.vue
@@ -1,38 +1,38 @@
 <template>
-  <div class="tw-relative tw-mb-16 tw-h-48 md:tw-h-72 xll:tw-h-[30rem]">
+  <div
+    class="tw-relative tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem] tw-h-[217px] md:tw-h-[376px] xl:tw-h-[476px]"
+  >
     <img
       :src="BackgroundImage[0]"
       :srcset="`${BackgroundImage[0]} 400w, ${BackgroundImage[1]} 800w, ${BackgroundImage[2]} 1200w, ${BackgroundImage[3]} 2400w`"
       alt="Background-Image"
-      class="tw-h-full lg:tw-h-[22.5rem] xll:tw-h-full tw-w-full tw-object-cover"
+      class="tw-h-full tw-w-full tw-object-cover"
       loading="lazy"
     />
     <div
-      class="tw-container tw-absolute tw-top-4 tw-w-full tw-flex-col tw-items-center tw-justify-center tw-p-4 tw-text-center tw-text-[#FFF] md:tw-left-0 md:tw-top-1/2 md:tw-top-16 md:tw--mt-10 md:tw-text-center lg:!tw-left-[50%] lg:!tw-top-[72%] xll:!tw-top-[60%] lg:tw--translate-x-1/2 lg:tw--translate-y-1/2 lg:tw-transform xl:tw-w-[60%] 2xl:tw-w-[49%] xs:tw-left-[13%] xs:tw-w-[75%] xl2:tw-w-[55%] 2xll:tw-w-[45%] xll:tw-w-[61%]"
+      class="tw-container tw-absolute tw-top-4 md:tw-top-[5rem] xl:tw-top-[8rem] tw-w-full tw-p-4 tw-text-center tw-text-[#FFF] xs:tw-left-[13%] xll:tw-left-[24%] 3xl:tw-left-[33%] xs:tw-w-[75%]"
     >
-      <div class="tw-flex tw-w-full">
-        <div class="tw-m-auto tw-text-white">
-          <p
-            class="tw-font-inter-semibold tw-text-[1.375rem] tw-leading-[2.625rem] md:tw-font-inter-bold md:tw-text-[3.4375rem] md:tw-leading-[4.16rem]"
-          >
-            Have an app idea?
-          </p>
+      <div class="tw-m-auto">
+        <p
+          class="tw-text-white tw-font-inter-semibold tw-text-[2rem] tw-leading-[2.6rem] md:tw-text-[3.125rem] md:tw-leading-[3.75rem] xl:tw-text-[3.75rem] xl:tw-leading-[4.875rem]"
+        >
+          Have an app idea?
+        </p>
 
-          <div
-            class="tw-font-inter-regular tw-text-base md:tw-my-4 md:tw-font-inter-medium md:tw-text-[1.5rem] md:tw-leading-[1.815625rem]"
-          >
-            See if we can make it a reality.
-          </div>
+        <div
+          class="tw-mt-2 tw-text-white/[0.8] tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-my-4 md:tw-font-inter-medium md:tw-text-[1.5rem] md:tw-leading-[1.815625rem]"
+        >
+          See if we can make it a reality.
         </div>
       </div>
-      <div class="tw-mx-auto tw-mt-4">
+      <div class="tw-mx-auto tw-mt-5">
         <router-link
-          class="gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-full tw-p-3 tw-px-7 tw-text-center"
+          class="tw-h-[3rem] gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-[12px] tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
           to="/contact"
           @click.native="mixpanel.track('tap_android_development_cta')"
         >
           <span
-            class="tw-mr-2.5 tw-font-inter-medium tw-text-[1rem] tw-font-normal tw-leading-[1.1875rem] md:tw-block md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
+            class="tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.5rem] md:tw-block md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
             >Let's Chat
           </span>
         </router-link>
diff --git a/vue-frontend/src/components/android-app-development/BlogSection.vue b/vue-frontend/src/components/android-app-development/BlogSection.vue
index 51b45af35..6c092a193 100644
--- a/vue-frontend/src/components/android-app-development/BlogSection.vue
+++ b/vue-frontend/src/components/android-app-development/BlogSection.vue
@@ -1,20 +1,18 @@
 <template>
-  <section
-    class="section tw-my-20 md:tw-my-24 lg:tw-mb-40 lg:tw-mt-44 xll:tw-my-52"
-  >
+  <section class="section tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem]">
     <!-- Mobile UI start -->
     <div
-      class="tw-relative tw-z-[1] tw-h-[27rem] tw-overflow-hidden tw-py-12 sm:tw-py-8 md:tw-hidden"
+      class="tw-relative tw-z-[1] tw-h-[27rem] sm:tw-h-[30rem] tw-overflow-hidden md:tw-hidden"
     >
       <p
-        class="tw-text-center tw-font-inter-bold tw-text-[1.875rem] tw-leading-[2.4375rem] tw-text-black-core/[0.87]"
+        class="tw-text-center tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.25rem] tw-text-black-core/[0.87]"
       >
-        Our Blogs
+        Our blogs
       </p>
-      <div class="blog tw-mt-8 tw-block md:tw-hidden">
+      <div class="blog tw-mt-6 tw-block md:tw-hidden">
         <swiper
-          :slidesPerView="2"
-          :spaceBetween="10"
+          :slidesPerView="1.425"
+          :spaceBetween="0"
           :centeredSlides="true"
           class="tw-p-4"
         >
@@ -24,19 +22,21 @@
             class="tw-relative tw-flex tw-flex-col"
           >
             <div class="tw-overflow-hidden">
-              <div class="tw-h-full tw-w-full tw-cursor-pointer">
+              <div
+                class="tw-scale-75 tw-transition-all tw-duration-200 tw-ease-out"
+              >
                 <img
                   @click="openBlog(blog.link, 'tap_android_app_blog_section')"
                   :src="blog.image[0]"
                   :srcset="`${blog.image[0]} 400w, ${blog.image[1]} 800w`"
                   :alt="blog.title"
-                  class="tw-h-full tw-w-full tw-rounded-[10px] tw-object-cover"
+                  class="tw-h-full tw-w-full tw-rounded-lg tw-object-cover"
                   loading="lazy"
                 />
               </div>
               <div class="title tw-hidden">
                 <p
-                  class="tw-mt-2 tw-pl-2 tw-font-inter-regular tw-text-[0.875rem] tw-leading-[1.3125rem] tw-text-black-core/[0.6]"
+                  class="tw-mt-3 tw-font-inter-regular tw-text-[0.75rem] tw-leading-[1.125rem] tw-text-black-core/[0.6]"
                 >
                   {{ blog.publishDate }}
                 </p>
@@ -46,7 +46,7 @@
                   target="_blank"
                 >
                   <p
-                    class="tw-mt-2 tw-cursor-pointer tw-pl-2 tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.6875rem] tw-text-black-core/[0.87]"
+                    class="tw-mt-2 tw-cursor-pointer tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.688rem] tw-text-black-core/[0.87]"
                   >
                     {{ blog.title }}
                   </p>
@@ -56,9 +56,6 @@
           </swiper-slide>
         </swiper>
       </div>
-      <div
-        class="tw-absolute tw-inset-0 tw-z-[0] tw-mx-auto tw-h-full tw-w-[60%] tw-rounded-[10px] tw-border tw-border-black-core/[0.60]"
-      ></div>
     </div>
 
     <!-- Mobile UI end -->
@@ -67,9 +64,9 @@
       class="tw-container tw-flex tw-hidden tw-flex-col md:tw-block md:tw-min-h-[580px] lg:tw-py-0"
     >
       <p
-        class="tw-mb-8 tw-text-center tw-font-inter-bold tw-text-[3.4375rem] tw-leading-[5.15625rem] tw-text-black-core/[0.87]"
+        class="tw-mb-8 tw-text-center tw-font-inter-bold tw-text-[2.25rem] md:tw-leading-[2.813rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem] tw-text-black-core/[0.87]"
       >
-        Our Blogs
+        Our blogs
       </p>
       <div class="tw-flex tw-flex-row tw-space-x-5 tw-space-y-1">
         <div
@@ -196,7 +193,7 @@ export default {
           image: [jacoco_400w, jacoco_800w, jacoco_desktop_400w],
           publishDate: "Sep 27, 2021",
           title: "Android code coverage using JaCoCo",
-          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2.125rem] lg:tw-leading-[3.1875rem] tw-text-black-core/[0.87]">Android<span><br><span class="tw-font-inter-regular tw-text-black-core/[0.87] tw-text-[1.5rem] tw-leading-[2.25rem] tw-text-black-core/[0.87]">Code coverage using JaCoCo</span>`,
+          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-black-core/[0.87]">Android<span><br><span class="tw-font-inter-regular tw-text-black-core/[0.87] tw-text-[1.5rem] tw-leading-[2.25rem]">Code coverage using JaCoCo</span>`,
           link: "https://blog.canopas.com/android-code-coverage-using-jacoco-6639a1fc4293",
           bgColor: "tw-bg-gradient-to-b tw-from-[#E7E7E7] tw-to-[#DADADA]",
         },
@@ -205,7 +202,7 @@ export default {
           image: [mvvm_400w, mvvm_800w],
           publishDate: "Dec 3, 2021",
           title: "Jetpack Compose: MVVM State management in a simple way",
-          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] xl:tw-text-[2.125rem] xl:tw-leading-[3.1875rem] tw-text-white">Jetpack Compose</span><br> MVVM State management in a simple way`,
+          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-white">Jetpack Compose</span><br><span class="tw-text-white tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">MVVM State management in a simple way</span>`,
           link: "https://blog.canopas.com/jetpack-compose-mvvm-state-management-in-a-simple-way-4c632fa6f554",
           bgColor: "tw-bg-gradient-to-b tw-from-[#282828] tw-to-[#282828]",
         },
@@ -214,7 +211,7 @@ export default {
           image: [keyboard_400w, keyboard_800w],
           publishDate: "Apr 26, 2022",
           title: "Keyboard Handling In Jetpack Compose — All You Need To Know",
-          hovertitle: `<span >Keyboard Handling In<br> <span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] xl:tw-text-[2.125rem] xl:tw-leading-[3.1875rem] tw-text-white">Jetpack Compose</span><br>All You Need To Know</span>`,
+          hovertitle: `<span class="tw-text-white tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">Keyboard Handling In<br> <span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-white">Jetpack Compose</span><br><span class="tw-text-white tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">All You Need To Know</span></span>`,
           link: "https://blog.canopas.com/keyboard-handling-in-jetpack-compose-all-you-need-to-know-3e6fddd30d9a",
           bgColor: "tw-bg-gradient-to-b tw-from-[#070710] tw-to-[#222241]",
         },
@@ -224,7 +221,7 @@ export default {
           publishDate: "Feb 17, 2022",
           title:
             "Retrofit — Effective error handling with Kotlin Coroutine and Result API",
-          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2.125rem] lg:tw-leading-[3.1875rem] tw-text-white">Retrofit</span> <br><span class="tw-text-white">Effective error handling with Kotlin Coroutine and Result API</span>`,
+          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-white">Retrofit</span> <br><span class="tw-text-white tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">Effective error handling with Kotlin Coroutine and Result API</span>`,
           link: "https://blog.canopas.com/retrofit-effective-error-handling-with-kotlin-coroutine-and-result-api-405217e9a73d",
           className: "tw-basis-[54%]",
           bgColor: "tw-bg-gradient-to-b tw-from-[#282828] tw-to-[#282828]",
@@ -235,7 +232,7 @@ export default {
           publishDate: "Mar 10, 2022",
           title:
             "Android — Send live audio stream from client to server using WebSocket and OkHttp client",
-          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2.125rem] lg:tw-leading-[3.1875rem] tw-text-black-core/[0.80]">Android</span><br>Send live audio stream from client to server using WebSocket and OkHttp client`,
+          hovertitle: `<span class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.1875rem] lg:tw-text-[2rem] lg:tw-leading-[3rem] tw-text-black-core/[0.87]">Android</span><br><span class=" tw-text-black-core/[0.87] tw-font-inter-regular tw-text-base lg:tw-text-[1.5rem] lg:tw-leading-[2.25rem]">Send live audio stream from client to server using WebSocket and OkHttp client</span>`,
           link: "https://blog.canopas.com/android-send-live-audio-stream-from-client-to-server-using-websocket-and-okhttp-client-ecc9f28118d9",
           className: "tw-basis-[60%] ",
           bgColor: "tw-bg-gradient-to-b tw-from-[#FEE4DF] tw-to-[#FDCCBC]",
@@ -256,7 +253,9 @@ export default {
 .swiper-slide-active .title {
   @apply tw-block tw-animate-fadeIn tw-delay-500;
 }
-
+.swiper-slide-active div {
+  @apply tw-scale-[1];
+}
 .section .blog:not(.blog) {
   @apply tw-container;
 }
diff --git a/vue-frontend/src/components/android-app-development/CaseStudySection.vue b/vue-frontend/src/components/android-app-development/CaseStudySection.vue
index 35021480a..2cbca8f56 100644
--- a/vue-frontend/src/components/android-app-development/CaseStudySection.vue
+++ b/vue-frontend/src/components/android-app-development/CaseStudySection.vue
@@ -1,15 +1,15 @@
 <template>
   <section
-    class="tw--mt-24 lg:tw--mt-48 xl:tw--mt-[32rem] 2xl:tw-mt-[-34rem] xll:tw--mt-[100rem] xll:tw-container"
+    class="tw-mt-6 md:tw--mt-24 lg:tw--mt-48 xl:tw--mt-[32rem] 2xl:tw-mt-[-30rem] xll:tw-container"
   >
     <div class="tw-container">
       <div class="tw-flex tw-flex-col tw-text-center">
         <span
-          class="tw-font-inter-bold tw-text-[1.875rem] tw-leading-[2.4375rem] md:tw-text-[3.4375rem] md:tw-leading-[5.15625rem] tw-text-black-core/[0.87]"
-          >Case Studies</span
+          class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.25rem] md:tw-text-[2.25rem] md:tw-text-[2.875rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem] tw-text-black-core/[0.87]"
+          >Case studies</span
         >
         <span
-          class="tw-py-4 tw-font-inter-regular tw-text-base tw-mx-auto md:tw-text-[1.5rem] md:tw-leading-9 tw-text-black-core/[0.60] lg:tw-w-[80%] xl:tw-w-[61%]"
+          class="tw-mt-4 md:tw-mt-6 tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-text-[1.313rem] md:tw-leading-[1.938rem] tw-mx-auto xl:tw-text-[1.5rem] xl:tw-leading-9 tw-text-black-core/[0.60] lg:tw-w-[80%] xl:tw-w-[61%]"
           >Explore our case studies to witness how we've transformed our
           client's ideas into successful Android apps.</span
         >
@@ -18,7 +18,7 @@
       <div
         v-for="item in cases"
         :key="item"
-        class="tw-mt-7 tw-relative md:tw-hidden"
+        class="tw-mt-6 tw-relative md:tw-hidden"
         :class="item.className"
       >
         <a
@@ -31,20 +31,20 @@
             :src="item.images[0]"
             :srcset="`${item.images[0]} 400w, ${item.images[1]} 800w,`"
             alt="casestudy-image"
-            class="tw-w-full tw-h-full tw-object-cover tw-mt-7"
+            class="tw-w-full tw-h-full tw-object-cover"
             loading="lazy"
           />
 
           <div
             :class="item.textalign"
-            class="tw-absolute tw-bottom-[10%] tw-flex tw-flex-col tw-text-black-core/[0.87]"
+            class="tw-absolute tw-bottom-4 tw-flex tw-flex-col"
           >
             <span
-              class="tw-font-inter-semibold tw-text-[1.375rem] tw-leading-[1.7875rem]"
+              class="tw-font-inter-semibold tw-text-[1.5rem] tw-leading-[2.25rem] tw-text-black-core/[0.87]"
               >{{ item.title }}</span
             >
             <span
-              class="tw-font-inter-regular tw-text-[1rem] tw-leading-[1.4rem]"
+              class="tw-mt-2 tw-font-inter-regular tw-text-[1rem] tw-leading-[1.5rem] tw-text-black-core/[0.6]"
               v-html="item.content"
             ></span>
           </div>
@@ -53,36 +53,32 @@
       <div
         v-for="item in cta"
         :key="item"
-        class="tw-mt-7 tw-relative md:tw-hidden"
+        class="tw-mt-16 tw-relative md:tw-hidden"
         :class="item.className"
       >
         <img
           :src="item.images[0]"
           :srcset="`${item.images[0]} 400w, ${item.images[1]} 800w,`"
           alt="casestudy-image"
-          class="tw-w-full tw-h-full tw-object-cover tw-mt-7"
+          class="tw-w-full tw-h-full tw-object-cover"
           loading="lazy"
         />
         <div
           :class="item.textalign"
-          class="tw-absolute tw--mt-3 xs:tw-mt-0 tw-bottom-[10%] tw-flex tw-flex-col tw-text-black-core/[0.87]"
+          class="tw-absolute tw--mt-2 xs:tw-mt-0 tw-bottom-[1.53rem] tw-flex tw-flex-col tw-text-black-core/[0.87]"
         >
           <span
-            class="tw-font-inter-semibold tw-text-[1.375rem] tw-leading-[1.7875rem]"
-            >{{ item.title }}</span
-          >
-          <span
-            class="tw-font-inter-regular tw-text-[1rem] tw-leading-[1.4rem]"
+            class="tw-font-inter-regular tw-text-[1rem] tw-leading-[1.5rem]"
             v-html="item.content"
           ></span>
-          <div class="tw-mt-4 tw-flex tw-flex-wrap tw-justify-center">
+          <div class="tw-mt-2 tw-flex tw-flex-wrap tw-justify-center">
             <router-link
-              class="white-btn gradient-border-btn tw-flex tw-h-[2.8125rem] tw-w-max tw-items-center tw-rounded-full tw-border-none"
+              class="white-btn gradient-border-btn tw-flex tw-h-[3rem] tw-w-max tw-items-center tw-rounded-[12px] tw-border-none"
               to="/contact"
               @click.native="mixpanel.track('tap_android_development_cta4')"
             >
               <span
-                class="tw-font-inter-semibold tw-text-[1rem] tw-font-normal tw-leading-[1.21rem] !tw-tracking-[0] md:tw-text-[1.09375rem] md:tw-text-[1.1875rem] md:tw-leading-[1.3125rem] md:tw-leading-[1.4375rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
+                class="tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.5rem]"
                 >Inquire Now</span
               >
             </router-link>
@@ -92,7 +88,7 @@
 
       <!-- ------------------------ MobileUI END---------------------- -->
     </div>
-    <div class="tw-hidden md:tw-block tw-bg-[#F6F6F6] tw-mt-14">
+    <div class="tw-hidden md:tw-block tw-bg-[#F6F6F6] tw-mt-[4.5rem]">
       <swiper
         :slidesPerView="1"
         :centeredSlides="true"
@@ -102,6 +98,7 @@
           delay: 4000,
           disableOnInteraction: false,
         }"
+        :pagination="{ type: 'progressbar' }"
         :spaceBetween="20"
         :navigation="true"
         :modules="modules"
@@ -114,9 +111,9 @@
             <div
               class="tw-flex tw-flex-col tw-w-[77%] xl:tw-w-[48%] 2xll:tw-w-[50%] lg:tw-mr-auto xll:tw-ml-auto"
             >
-              <div class="tw-mb-4">
+              <div>
                 <span
-                  class="v2-canopas-gradient-text tw-text-left tw-font-inter-medium tw-text-[1.5rem] tw-leading-[1.816rem]"
+                  class="tw-text-[#FF9472] tw-text-left tw-font-inter-semibold tw-text-[1.25rem] tw-leading-[1.875rem]"
                 >
                   {{ item.title }}
                 </span>
@@ -128,12 +125,12 @@
                 :target="item.target"
               >
                 <h2
-                  class="tw-mb-[1rem] tw-font-inter-semibold tw-text-[2rem] tw-leading-[2.7375rem] lg:tw-text-[2.875rem] lg:tw-leading-[3.7375rem]"
+                  class="tw-mt-4 tw-font-inter-semibold tw-text-[2rem] tw-leading-[3rem] tw-text-black-core/[0.87]"
                   v-html="item.deskcontent"
                 ></h2
               ></a>
               <span
-                class="tw-text-black-core/[0.60] tw-font-inter-medium tw-text-[1rem] tw-leading-[1.575rem] lg:tw-text-[1.25rem] lg:tw-leading-[1.875rem]"
+                class="tw-mt-4 tw-text-black-core/[0.6] tw-font-inter-medium tw-text-[1rem] tw-leading-[1.575rem] lg:tw-text-[1.25rem] lg:tw-leading-[1.875rem]"
                 v-html="item.description"
               ></span>
 
@@ -149,37 +146,33 @@
                 <div class="tw-inline-flex tw-p-2 lg:tw-p-4">
                   <div class="tw-p-[0.8rem]">
                     <span
-                      class="tw-font-inter-semibold tw-text-[1rem] lg:tw-text-[2.125rem] tw-leading-[1.7625rem] lg:tw-leading-[2.7625rem] v2-canopas-gradient-text"
+                      class="tw-font-inter-semibold tw-text-[2rem] tw-leading-[3rem] tw-text-[#FF9472]"
                       >{{ item.resultcount[0] }}</span
                     >
                     <div
-                      class="tw-flex-1 tw-font-inter-regular tw-text-[1rem] tw-leading-4 lg:tw-text-[1.25rem] lg:tw-leading-[1.625rem]"
+                      class="tw-flex-1 tw-text-black-core-[0.87] tw-font-inter-regular tw-text-[1rem] tw-leading-4 lg:tw-text-[1.25rem] lg:tw-leading-[1.875rem]"
                     >
                       <span>Downloads</span>
                     </div>
                   </div>
-                  <div
-                    class="tw-border-l-[0.5px] tw-border-black-core/[0.6] tw-p-[0.8rem]"
-                  >
+                  <div class="tw-border-l-[0.5px] tw-p-[0.8rem]">
                     <span
-                      class="tw-font-inter-semibold tw-text-[1rem] lg:tw-text-[2.125rem] tw-leading-[1.7625rem] lg:tw-leading-[2.7625rem] v2-canopas-gradient-text"
+                      class="tw-font-inter-semibold tw-text-[2rem] tw-leading-[3rem] tw-text-[#FF9472]"
                       >{{ item.resultcount[1] }}</span
                     >
                     <div
-                      class="tw-flex-1 tw-font-inter-regular tw-text-[1rem] tw-leading-4 lg:tw-text-[1.25rem] lg:tw-leading-[1.625rem]"
+                      class="tw-flex-1 tw-text-black-core-[0.87] tw-font-inter-regular tw-text-[1rem] tw-leading-4 lg:tw-text-[1.25rem] lg:tw-leading-[1.875rem]"
                     >
                       <span>App Rating</span>
                     </div>
                   </div>
-                  <div
-                    class="tw-border-l-[0.5px] tw-border-black-core/[0.6] tw-p-[0.8rem]"
-                  >
+                  <div class="tw-border-l-[0.5px] tw-p-[0.8rem]">
                     <span
-                      class="tw-font-inter-semibold lg:tw-text-[2.125rem] tw-leading-[1.7625rem] lg:tw-leading-[2.7625rem] v2-canopas-gradient-text"
+                      class="tw-font-inter-semibold lg:tw-text-[2rem] tw-leading-[3rem] tw-text-[#FF9472]"
                       >{{ item.resultcount[2] }}</span
                     >
                     <div
-                      class="tw-flex-1 tw-font-inter-regular tw-text-[1rem] tw-leading-4 lg:tw-text-[1.25rem] lg:tw-leading-[1.625rem]"
+                      class="tw-flex-1 tw-text-black-core-[0.87] tw-font-inter-regular tw-text-[1rem] tw-leading-4 lg:tw-text-[1.25rem] lg:tw-leading-[1.875rem]"
                     >
                       <span>Monthly Users</span>
                     </div>
@@ -203,6 +196,7 @@
             </div>
           </div>
         </swiper-slide>
+        <div class="swiper-pagination"></div>
       </swiper>
     </div>
   </section>
@@ -228,14 +222,14 @@ import togness_400w from "@/assets/images/andriod-app-development/casestudy/desk
 import togness_800w from "@/assets/images/andriod-app-development/casestudy/desktop/p3-800w.webp";
 import smileplus_400w from "@/assets/images/andriod-app-development/casestudy/desktop/p4-400w.webp";
 import smileplus_800w from "@/assets/images/andriod-app-development/casestudy/desktop/p4-800w.webp";
-import { Autoplay } from "swiper/modules";
+import { Autoplay, Pagination, Navigation } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import config from "@/config.js";
 export default {
   data() {
     return {
       resultsimage,
-      modules: [Autoplay],
+      modules: [Pagination, Navigation, Autoplay],
       cases: [
         {
           title: "Justly",
@@ -309,7 +303,7 @@ export default {
       cta: [
         {
           title: "",
-          content: `"Let’s Start a <span class="tw-text-black-core/[0.87] tw-font-inter-semibold tw-text-[1.375rem] tw-leading-[2.0625rem]">New Project</span> Together"`,
+          content: `Let’s Start a <span class="tw-text-black-core/[0.87] tw-font-inter-semibold tw-text-[1.5rem] tw-leading-[2.25rem]">New Project</span> Together`,
           images: [cta_400w, cta_800w],
           className: "tw-text-center ",
           textalign:
@@ -325,3 +319,18 @@ export default {
   inject: ["mixpanel"],
 };
 </script>
+<style lang="postcss">
+@import "swiper/css";
+@import "swiper/css/pagination";
+.swiper-wrapper {
+  @apply !tw-items-center;
+}
+.swiper-horizontal > .swiper-pagination-progressbar,
+.swiper-pagination-horizontal,
+.swiper-pagination-progressbar-fill {
+  @apply !tw-h-1 tw-hidden md:tw-block !tw-top-0 tw-w-full !tw-rounded-[12px] !tw-bg-black-core/[0.08];
+}
+.swiper-pagination-progressbar-fill {
+  @apply !tw-h-1 !tw-rounded-[18px]  !tw-bg-[#FF9472];
+}
+</style>
diff --git a/vue-frontend/src/components/android-app-development/CtaSection.vue b/vue-frontend/src/components/android-app-development/CtaSection.vue
index f1501c452..bd76125b0 100644
--- a/vue-frontend/src/components/android-app-development/CtaSection.vue
+++ b/vue-frontend/src/components/android-app-development/CtaSection.vue
@@ -1,37 +1,67 @@
 <template>
-  <div class="tw-container tw-relative tw-flex tw-flex-row tw-py-8">
-    <div class="tw-relative tw-z-[1]">
+  <section class="tw-container tw-py-16 md:tw-py-[10rem] xl:tw-py-[15rem]">
+    <div class="md:tw-hidden tw-relative tw-flex tw-flex-col">
       <img
         :src="CtaBoyImage"
-        class="tw-h-full tw-w-[14.1875rem] tw-object-cover md:!tw-w-[22.64594rem] md:tw-w-[25.1875rem] lg:!tw-w-[32.625rem] xl:!tw-w-[34.625rem] xs:tw-w-[13.1875rem]"
+        class="tw-z-[1] tw-mx-auto tw-h-full tw-w-[14.1875rem] tw-object-cover xs:tw-w-[13.1875rem]"
         alt="android-cta-image"
         loading="lazy"
       />
-    </div>
-    <div
-      class="tw-border-[#00000]/[0.6] tw-absolute tw-left-[10%] tw-z-0 tw-mr-[0.2rem] tw-mt-8 tw-flex tw-flex-col tw-items-center tw-justify-center tw-rounded-lg tw-border-2 tw-py-2 md:!tw-mt-[3.7rem] lg:!tw-mt-[5.7rem] lg:!tw-py-12 xl:!tw-mt-[7.8rem] xl:!tw-py-4 2xl:!tw-pb-16 2xl:!tw-pt-12 2xl:tw-pr-8 xs:tw-mt-[2.8rem] xs:tw-py-4"
-    >
       <div
-        class="tw-ml-auto tw-w-[38%] tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.4625rem] tw-text-black-core/[0.87] md:tw-text-[2.4375rem] md:tw-leading-[3.15625rem] lg:!tw-w-[47%] lg:tw-text-[2.935rem] lg:tw-leading-[4.15625rem] xl:tw-text-[3.4375rem] xl:tw-leading-[5.15625rem] 2xl:!tw-w-[60%] xs:tw-w-[50%]"
+        class="tw-w-[80%] tw-mx-auto sm:tw-w-full tw-text-center tw-mt-8 tw-font-inter-bold tw-text-black-core/[0.87] tw-text-[2rem] tw-leading-[2.6rem]"
       >
-        <span>Let’s talk about what we can build and scale together.</span>
+        Let’s talk about what we can build and scale together.
       </div>
-      <div
-        class="tw-ml-auto tw-mt-4 sm:!tw-ml-[25%] md:!tw-ml-[23%] xl:!tw-ml-[19%] 2xl:!tw-ml-[-7%] xs:tw-ml-[30%]"
-      >
+      <div class="tw-mx-auto tw-mt-8 tw-z-[1]">
         <router-link
-          class="gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-full tw-p-3 tw-text-center"
+          class="tw-h-[3rem] gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-[12px] tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
           to="/contact"
           @click.native="mixpanel.track('tap_android_development_cta')"
         >
           <span
-            class="tw-mr-2.5 tw-font-inter-medium tw-text-[1rem] tw-font-normal tw-leading-[1.1875rem] !tw-tracking-[0] md:tw-block md:tw-text-[1.09375rem] md:tw-text-[1.1875rem] md:tw-leading-[1.3125rem] md:tw-leading-[1.436875rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
+            class="tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.5rem]"
             >Contact Us
           </span>
         </router-link>
       </div>
+      <div
+        class="tw-top-12 tw-absolute tw-inset-0 tw-z-[0] tw-mx-auto tw-h-[85%] sm:tw-h-[83%] tw-w-[100%] tw-rounded-[0.625rem] tw-border tw-border-black-core/[0.87]"
+      ></div>
+    </div>
+    <div class="tw-hidden tw-relative md:tw-flex tw-flex-row">
+      <div class="tw-relative tw-z-[1]">
+        <img
+          :src="CtaBoyImage"
+          class="tw-h-full tw-w-[14.1875rem] tw-object-cover md:!tw-w-[22.64594rem] md:tw-w-[25.1875rem] lg:!tw-w-[32.625rem] xl:!tw-w-[34.625rem] xs:tw-w-[13.1875rem]"
+          alt="android-cta-image"
+          loading="lazy"
+        />
+      </div>
+      <div
+        class="tw-h-[82%] lg:tw-h-[80%] xl:tw-h-[75%] tw-border-[#00000]/[0.6] tw-absolute tw-left-[10%] tw-z-0 tw-mr-[0.2rem] tw-mt-8 tw-flex tw-flex-col tw-items-center tw-justify-center tw-rounded-lg tw-border-2 tw-py-2 md:!tw-mt-[3.7rem] lg:!tw-mt-[5.7rem] lg:!tw-py-12 xl:!tw-mt-[7.8rem] xl:!tw-py-4 2xl:!tw-pb-16 2xl:!tw-pt-12 2xl:tw-pr-8 xs:tw-mt-[2.8rem] xs:tw-py-4"
+      >
+        <div
+          class="tw-ml-[19rem] lg:tw-ml-[27rem] xl:tw-ml-[27.5rem] tw-font-inter-semibold tw-text-black-core/[0.87] md:tw-text-[2.4375rem] md:tw-leading-[3.15625rem] lg:!tw-w-[47%] xl:tw-text-[3.75rem] xl:tw-leading-[4.875rem] 2xl:!tw-w-[60%]"
+        >
+          <span>Let’s talk about what we can build and scale together.</span>
+        </div>
+        <div
+          class="tw-ml-auto tw-mt-4 lg:tw-mt-[2.5rem] md:!tw-ml-[25%] xl:!tw-ml-[14%] 2xl:!tw-ml-[-7%]"
+        >
+          <router-link
+            class="tw-h-[3rem] gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-[12px] tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
+            to="/contact"
+            @click.native="mixpanel.track('tap_android_development_cta')"
+          >
+            <span
+              class="tw-font-inter-semibold !tw-tracking-[0] md:tw-block md:tw-text-[1.125rem] md:tw-leading-[1.688rem]"
+              >Contact Us
+            </span>
+          </router-link>
+        </div>
+      </div>
     </div>
-  </div>
+  </section>
 </template>
 <script>
 import CtaBoyImage from "@/assets/images/andriod-app-development/cta/cta3.webp";
diff --git a/vue-frontend/src/components/android-app-development/DevelopmentSection.vue b/vue-frontend/src/components/android-app-development/DevelopmentSection.vue
index 7d683f265..d5871f034 100644
--- a/vue-frontend/src/components/android-app-development/DevelopmentSection.vue
+++ b/vue-frontend/src/components/android-app-development/DevelopmentSection.vue
@@ -1,50 +1,64 @@
 <template>
-  <div class="tw-mt-16 tw-bg-white tw-h-[70%]">
+  <div
+    class="tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem] tw-bg-white tw-h-[70%]"
+  >
     <div
-      class="tw-container tw-mb-2.5 tw-flex tw-flex-col tw-text-center xll:tw--mb-[18rem]"
+      class="xl:tw-h-[0vh] xl:!tw-sticky"
+      :class="{
+        'xl:!tw-top-0': lastSlideReached && !isScrollingUp,
+        'xl:!tw-top-[7.5rem]': lastSlideReached && isScrollingUp,
+      }"
     >
-      <span
-        class="tw-mb-2.5 tw-font-inter-bold tw-text-[1.875rem] tw-leading-[2.4375rem] tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[3.4375rem] md:tw-leading-[5.15625rem] xs:tw-mx-auto xs:tw-w-[71%]"
-      >
-        Android App Development Services</span
-      >
-      <span
-        class="tw-font-inter-regular tw-text-base tw-text-black-core/[0.60] md:tw-font-inter-medium md:tw-text-[1.5rem] md:tw-leading-9 lg:tw-px-20 2xl:tw-px-56"
-        >With over a decade of expertise in Android app development, our team
-        can help you craft high- quality, user-friendly apps that drive business
-        growth and customer engagement.</span
+      <div
+        class="tw-container tw-flex tw-flex-col tw-text-center xll:tw--mb-[18rem]"
       >
+        <span
+          class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.25rem] tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[2.375rem] md:tw-leading-[3rem] xl:tw-text-[3rem] xl:tw-leading-[3.875rem] xs:tw-mx-auto xs:tw-w-[71%]"
+        >
+          Android app development services</span
+        >
+        <span
+          class="tw-mt-4 md:tw-mt-6 tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.688rem] tw-text-black-core/[0.6] md:tw-font-inter-medium md:tw-text-[1.313rem] md:tw-leading-[1.875rem] xl:tw-text-[1.5rem] xl:tw-leading-9"
+          >With over a decade of expertise in Android app development, our team
+          can help you craft high- quality, user-friendly apps that drive
+          business growth and customer engagement.</span
+        >
+      </div>
     </div>
+
     <!-- Desktop UI -->
     <div class="sticky-parent tw-hidden md:tw-block">
-      <div class="sticky tw-sticky tw-top-0 tw-max-h-screen tw-overflow-hidden">
+      <div
+        class="sticky tw-sticky tw-top-[92px] xl:!tw-top-0 xl:tw-max-h-full main tw-overflow-hidden"
+        :class="{ 'xl:!tw-top-[95px]': isScrollingUp }"
+      >
         <div class="tw-flex">
           <div
             v-for="(item, index) in items"
             :key="index"
-            class="tw-cursor-pointer tw-mt-32 xll:tw-mt-[36rem] tw-min-w-[100vw] md:tw-h-[70vh] xl:tw-h-screen"
+            class="tw-cursor-pointer tw-mt-[-12rem] xl:tw-mt-32 xll:tw-mt-[36rem] tw-min-w-[100vw] tw-h-[900px] xl:tw-h-full"
           >
-            <div class="tw-relative !-tw-mr-2 tw-mb-8 tw-mt-12">
+            <div
+              class="tw-relative !-tw-mr-2 tw-mb-12 tw-mt-[17rem] xl:tw-mt-[6.5rem] xll:tw-mt-[-15rem]"
+            >
               <div
-                class="tw-border-b-2 tw-border-dotted tw-border-[#000000]/[0.87] tw-text-center"
+                class="tw-border-b-2 tw-border-dotted tw-border-[#000000]/[0.6] tw-text-center"
               ></div>
             </div>
             <div
-              class="tw-absolute tw-top-[15.5%] xl:tw-top-[13.4%] xll:tw-top-[32.4%] tw-ml-[45%] xll:tw-ml-[47%] tw-hidden tw-h-20 !tw-bg-white tw-text-center md:tw-block 2xll:tw-ml-[47%] xll:tw-ml-[48%]"
+              class="tw-absolute tw-top-[6%] xl:tw-top-[23%] xll:tw-top-[31.5%] tw-ml-[45%] xll:tw-ml-[47%] tw-hidden tw-h-20 !tw-bg-white tw-text-center md:tw-block 2xll:tw-ml-[47%] xll:tw-ml-[48%]"
             >
               <span
-                class="tw-text-center tw-font-inter-bold tw-text-[3.75rem] tw-leading-[5.625rem] !tw-bg-white"
+                class="tw-text-center tw-font-inter-bold tw-text-[3.75rem] tw-leading-[4.875rem] tw-text-black-core/[0.87]"
               >
                 0{{ index + 1 }}</span
               >
             </div>
             <div
-              class="tw-ml-auto xll:tw-ml-[12%] xll:tw-ml-auto tw-rounded-[1.25rem] tw-px-2 tw-py-8 !tw-w-[45.75rem] tw-mx-auto"
+              class="tw-ml-auto xll:tw-ml-[12%] xll:tw-ml-auto tw-rounded-[1.25rem] tw-p-[1.88rem] !tw-w-[39.75rem] xl:!tw-w-[45rem] tw-mx-auto"
               :class="[item.bgColor]"
             >
-              <div
-                class="tw-justify-left tw-mb-5 tw-flex tw-flex-row tw-items-center tw-space-x-4"
-              >
+              <div class="tw-justify-left tw-flex tw-flex-row tw-items-center">
                 <img
                   alt="development-icon"
                   :src="item.icon"
@@ -52,12 +66,12 @@
                   loading="lazy"
                 />
                 <span
-                  class="tw-font-inter-bold tw-text-[1.375rem] tw-leading-[1.7875rem] tw-text-black-core/[0.87] md:tw-text-[2rem] md:tw-leading-[3rem]"
+                  class="tw-font-inter-bold tw-text-black-core/[0.87] md:tw-text-[1.625rem] md:tw-leading-[2.25rem] xl:tw-text-[2rem] xl:tw-leading-[3rem]"
                   >{{ item.title }}</span
                 >
               </div>
               <div
-                class="tw-font-inter-regular tw-text-base tw-text-black-core/[0.87] md:tw-p-4 md:tw-text-[1.25rem] md:tw-leading-[1.875rem]"
+                class="tw-font-inter-regular tw-text-base tw-text-black-core/[0.6] md:tw-text-[1.125rem] md:tw-leading-[1.75rem] xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem]"
               >
                 <ul class="tw-pl-8 tw-pr-4 md:tw-hidden">
                   <li
@@ -71,7 +85,7 @@
                 <p
                   v-for="list in item.description"
                   :key="list"
-                  class="tw-mb-4 tw-hidden md:tw-block"
+                  class="tw-mt-4 tw-hidden md:tw-block"
                 >
                   {{ list }}
                 </p>
@@ -81,17 +95,16 @@
         </div>
       </div>
     </div>
-    <!-- Desktop UI End -->
     <div
-      class="tw-h-[25vh] xl:tw-h-[50vh] 2xl:tw-h-[60vh] xll:tw-h-screen tw-w-screen"
+      class="tw-hidden md:tw-block tw-h-[25vh] xl:tw-h-[70vh] xll:tw-h-[60vh] tw-w-screen"
     ></div>
+    <!-- Desktop UI End -->
 
-    <div class="swiper-content tw-mt-8 md:tw-hidden">
+    <div class="swiper-content tw-mt-6 md:tw-hidden">
       <swiper
         :slidesPerView="1.1"
         :centeredSlides="true"
         :spaceBetween="10"
-        :mousewheel="true"
         :modules="modules"
         class="swiper-container"
         @reachEnd="handleReachEnd"
@@ -138,26 +151,9 @@
           class="tw-cursor-pointer"
         >
           <div
-            class="tw-relative !-tw-mr-2 tw-mb-8 tw-mt-12 tw-hidden md:tw-block"
-          >
-            <div
-              class="tw-border-b-2 tw-border-dotted tw-border-[#000000]/[0.87] tw-text-center"
-            ></div>
-          </div>
-          <div
-            class="tw-mr-4 tw-rounded-[1.25rem] tw-px-2 tw-py-8 md:tw-w-[34.7rem] lg:tw-w-[40.75rem] xl:!tw-w-[45.75rem]"
+            class="tw-mr-4 tw-rounded-[1.25rem] tw-px-4 tw-py-6 md:tw-w-[34.7rem] lg:tw-w-[40.75rem] xl:!tw-w-[45.75rem]"
             :class="[item.bgColor]"
           >
-            <div
-              class="tw-absolute tw-left-[38%] tw-top-0 tw-hidden tw-h-20 tw-bg-white tw-text-center md:tw-block lg:tw-left-[40%]"
-            >
-              <span
-                class="tw-text-center tw-font-inter-bold tw-text-[3.75rem] tw-leading-[5.625rem]"
-              >
-                0{{ index + 1 }}</span
-              >
-            </div>
-
             <div
               class="tw-justify-left tw-mb-5 tw-flex tw-flex-row tw-items-center tw-space-x-4"
             >
@@ -168,12 +164,12 @@
                 loading="lazy"
               />
               <span
-                class="tw-font-inter-bold tw-text-[1.375rem] tw-leading-[1.7875rem] tw-text-black-core/[0.87] md:tw-text-[2rem] md:tw-leading-[3rem]"
+                class="tw-font-inter-bold tw-text-[1.25rem] tw-leading-[1.875rem] tw-text-black-core/[0.87]"
                 >{{ item.title }}</span
               >
             </div>
             <div
-              class="tw-font-inter-regular tw-text-base tw-text-black-core/[0.87] md:tw-p-4 md:tw-text-[1.25rem] md:tw-leading-[1.875rem]"
+              class="tw-font-inter-regular tw-text-base tw-text-black-core/[0.6] md:tw-p-4"
             >
               <ul class="tw-pl-8 tw-pr-4 md:tw-hidden">
                 <li
@@ -184,13 +180,6 @@
                   {{ list }}
                 </li>
               </ul>
-              <p
-                v-for="list in item.description"
-                :key="list"
-                class="tw-mb-4 tw-hidden md:tw-block"
-              >
-                {{ list }}
-              </p>
             </div>
           </div>
         </swiper-slide>
@@ -205,15 +194,18 @@ import design from "@/assets/images/andriod-app-development/development/2.webp";
 import custom from "@/assets/images/andriod-app-development/development/3.webp";
 import app from "@/assets/images/andriod-app-development/development/4.webp";
 import maintenance from "@/assets/images/andriod-app-development/development/5.webp";
-
 import { Swiper, SwiperSlide } from "swiper/vue";
 export default {
   data() {
     return {
+      isScrollingUp: false,
+      currentCardIndex: 0,
+      scrollPosition: 0,
+      lastSlideReached: false,
       items: [
         {
           title: "Android App Development Consultation",
-          bgColor: "tw-bg-[#FFEFEF]",
+          bgColor: "tw-bg-[#F2709C]/[0.04]",
           icon: consultation,
           description: [
             "At Canopas, we believe that a successful project begins with a thorough understanding of your vision, goals, and market dynamics.",
@@ -225,7 +217,7 @@ export default {
         },
         {
           title: "Android UI/UX Design",
-          bgColor: "tw-bg-[#EFF7FF]",
+          bgColor: "tw-bg-[#F8F8F8]",
           icon: design,
           description: [
             "At Canopas, our design philosophy is centered on creating intuitive, user-friendly, and visually stunning interfaces that resonate with your target audience.",
@@ -237,7 +229,7 @@ export default {
         },
         {
           title: "Custom Android Application Development",
-          bgColor: "tw-bg-[#EEFAF0]",
+          bgColor: "tw-bg-[#F2709C]/[0.04]",
           icon: custom,
           description: [
             "Our approach to development is rooted in agility and focused collaboration.  We build in two-week sprints where our team devotes their complete energy and attention to sculpting the foundation of your app.",
@@ -249,7 +241,7 @@ export default {
         },
         {
           title: "Android App Deployment",
-          bgColor: "tw-bg-[#F4F1FC]",
+          bgColor: "tw-bg-[#F8F8F8]",
           icon: app,
           description: [
             "Launching your Android app into the marketplace involves more than just hitting 'publish'. At Canopas, we'll guide you through this crucial deployment phase with careful planning, meticulous testing, and comprehensive support.",
@@ -261,7 +253,7 @@ export default {
         },
         {
           title: "Maintenance and Support",
-          bgColor: "tw-bg-[#FDF9ED]",
+          bgColor: "tw-bg-[#F2709C]/[0.04]",
           icon: maintenance,
           description: [
             "Post-deployment, we monitor the app's performance and user feedback closely, ready to make quick updates or fixes if needed. Our maintenance and support services ensure your app stays relevant, competitive, and effective in the face of new devices, OS updates, and emerging user expectations.",
@@ -275,7 +267,7 @@ export default {
     };
   },
   mounted() {
-    document.addEventListener("scroll", horizontalScroll);
+    document.addEventListener("scroll", this.handleScroll);
 
     let sticky = document.querySelector(".sticky");
     let stickyParent = document.querySelector(".sticky-parent");
@@ -286,15 +278,39 @@ export default {
       sticky.getBoundingClientRect().height;
 
     function horizontalScroll() {
-      let stickyPosition = sticky.getBoundingClientRect().top;
-      if (stickyPosition > 1) {
-        return;
+      let scrolled = stickyParent.getBoundingClientRect().top;
+
+      if (scrolled > 0) {
+        sticky.scrollLeft = 0;
       } else {
-        let scrolled = stickyParent.getBoundingClientRect().top;
         sticky.scrollLeft =
           (scrollWidth / verticalScrollHeight) * -scrolled * 0.85;
       }
+      requestAnimationFrame(horizontalScroll);
     }
+
+    // Attach the existing horizontalScroll function separately
+    document.addEventListener("scroll", horizontalScroll);
+  },
+  beforeDestroy() {
+    document.removeEventListener("scroll", this.handleScroll);
+
+    document.removeEventListener("scroll", this.horizontalScroll);
+  },
+  methods: {
+    handleScroll() {
+      const windowHeight = window.innerHeight;
+      const lastSlide = document.querySelector(".main:last-child");
+      const lastSlidePosition = lastSlide.getBoundingClientRect().top;
+
+      if (lastSlidePosition <= windowHeight && lastSlidePosition >= 0) {
+        this.lastSlideReached = true;
+        this.isScrollingUp = window.scrollY < this.scrollPosition;
+      } else {
+        this.lastSlideReached = false;
+      }
+      this.scrollPosition = window.scrollY;
+    },
   },
   components: {
     Swiper,
diff --git a/vue-frontend/src/components/android-app-development/FaqSection.vue b/vue-frontend/src/components/android-app-development/FaqSection.vue
index ae855bc78..4f1084664 100644
--- a/vue-frontend/src/components/android-app-development/FaqSection.vue
+++ b/vue-frontend/src/components/android-app-development/FaqSection.vue
@@ -1,18 +1,18 @@
 <template>
-  <section>
+  <section class="sm:tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem]">
     <div
       class="tw-mb-4 tw-bg-pink-gradient-background md:tw-container md:tw-bg-none"
     >
       <div
         class="tw-mx-[2%] tw-my-0 tw-flex tw-flex-col tw-gap-4 md:tw-my-0 md:-tw-ml-8"
       >
-        <div class="tw-mb-4 tw-text-center">
+        <div class="tw-text-center">
           <span
-            class="tw-font-inter-bold tw-text-[1.875rem] tw-leading-[2.4375rem] tw-text-black-core/[0.87] md:tw-text-[3.4375rem] md:tw-leading-[5.15625rem]"
-            >FAQs on Android App Development</span
+            class="tw-font-inter-bold tw-text-[1.5rem] tw-leading-[2.25rem] tw-text-black-core/[0.87] md:tw-text-[2rem] md:tw-leading-[2.625rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem]"
+            >FAQs on android app development</span
           >
         </div>
-        <div class="tw-mx-auto">
+        <div class="tw-mt-6 tw-mx-auto">
           <img
             :src="faqImage"
             loading="lazy"
@@ -21,15 +21,13 @@
           />
         </div>
         <div
-          class="tw-container tw--mt-8 tw-flex-[67%] tw-pb-16 md:tw-w-[65rem]"
+          class="tw-container tw--mt-8 tw-flex-[67%] md:tw-pb-16 md:tw-w-[65rem]"
         >
           <div class="md:tw-pl-[30px]">
             <transition-group tag="div" :name="'faq-' + faqTransitionName">
-              <div
-                class="faq-section tw-mt-12 tw-h-auto tw-min-h-[28rem] sm:tw-min-h-[33rem]"
-              >
+              <div class="faq-section tw-mt-12 tw-h-auto">
                 <div
-                  class="tw-mt-6"
+                  class="tw-mt-3 md:tw-mt-6"
                   v-for="faq in faqs.slice(sliceFrom, sliceTo)"
                   :key="faq"
                 >
@@ -39,7 +37,7 @@
                   >
                     <div class="faq-header tw-flex tw-flex-row tw-items-center">
                       <div
-                        class="faq-question tw-w-[90%] tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.6875rem] md:tw-text-[1.5rem] lg:tw-text-[1.75rem] md:tw-leading-[2rem] lg:tw-leading-[2.625rem]"
+                        class="faq-question tw-w-[90%] tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-text-[1.313rem] md:tw-leading-[1.875rem] xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem]"
                         :class="
                           openList && faq.id == currentIndex
                             ? 'v2-canopas-gradient-text footer-icon'
@@ -86,12 +84,98 @@
                 </div>
               </div>
             </transition-group>
+            <collapse-transition>
+              <transition-group
+                tag="div"
+                :name="'faq-' + faqTransitionName"
+                v-if="showAdditionalFAQs"
+              >
+                <div class="faq-section tw-h-auto">
+                  <div
+                    class="tw-mt-3"
+                    v-for="faq in faqs.slice(5, 10)"
+                    :key="faq"
+                  >
+                    <div
+                      class="faq-container tw-cursor-pointer tw-overflow-hidden tw-rounded-[5px] tw-bg-white tw-p-[15px] tw-shadow-md sm:tw-p-[25px]"
+                      @click="expandListItem(faq.id)"
+                    >
+                      <div
+                        class="faq-header tw-flex tw-flex-row tw-items-center"
+                      >
+                        <div
+                          class="faq-question tw-w-[90%] tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-text-[1.313rem] md:tw-leading-[1.875rem] xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem]"
+                          :class="
+                            openList && faq.id == currentIndex
+                              ? 'v2-canopas-gradient-text footer-icon'
+                              : 'tw-text-black-core/[0.87]'
+                          "
+                        >
+                          {{ faq.question }}
+                        </div>
+                        <div
+                          class="faq-icon tw-w-[10%] tw-text-end"
+                          @click.native="
+                            mixpanel.track('tap_android_app_faq_questions')
+                          "
+                        >
+                          <font-awesome-icon
+                            class="xmark tw-text-black-core/[0.87]"
+                            :class="
+                              openList && faq.id == currentIndex
+                                ? 'footer-icon'
+                                : 'tw-text-black-core/[0.87]'
+                            "
+                            :icon="
+                              openList && faq.id == currentIndex
+                                ? 'xmark'
+                                : 'plus'
+                            "
+                          />
+                        </div>
+                      </div>
+                      <collapse-transition>
+                        <div
+                          class="faq-header tw-flex tw-flex-row tw-items-center"
+                          v-if="openList && faq.id == currentIndex"
+                          :key="faq.answer"
+                        >
+                          <div
+                            class="faq-answer tw-mt-4 tw-w-[90%] tw-animate-fadeIn tw-font-inter-regular tw-text-base tw-text-black-core/[0.87] md:tw-text-[1.25rem] md:tw-leading-[1.875rem]"
+                            v-html="faq.answer"
+                          ></div>
+                        </div>
+                      </collapse-transition>
+                      <div
+                        class="faq-divider"
+                        v-if="faq.id != faq.length"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+              </transition-group>
+            </collapse-transition>
+            <div class="tw-mx-auto tw-my-8 md:tw-hidden">
+              <div
+                class="tw-border tw-border-white tw-h-[3rem] tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-[0.75rem] tw-px-[1.5rem] tw-text-center"
+                @click="showAdditionalFAQs = !showAdditionalFAQs"
+              >
+                <span
+                  class="tw-text-white tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.5rem]"
+                  >{{ showAdditionalFAQs ? "View Less" : "View More" }}
+                </span>
+                <font-awesome-icon
+                  class="tw-ml-2 tw-mt-1 fab tw-w-4 tw-h-4 tw-text-white"
+                  :icon="showAdditionalFAQs ? faAngleUp : faAngleDown"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="tw-container tw--mt-8 tw-pr-4 tw-text-right md:tw-pr-6 md:tw-pt-4 xl:tw-pr-20 2xl:tw-pr-44"
+      class="tw-hidden md:tw-block tw-container tw--mt-8 tw-pr-4 tw-text-right md:tw-pr-6 md:tw-pt-4 xl:tw-pr-20 2xl:tw-pr-44"
     >
       <button
         v-if="isActivePrev"
@@ -133,12 +217,16 @@
 import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import faqImage from "@/assets/images/andriod-app-development/faq.webp";
+import { faAngleUp, faAngleDown } from "@fortawesome/free-solid-svg-icons";
 
 const TOTAL_FAQ_IN_SLIDE = 5;
 
 export default {
   data() {
     return {
+      faAngleUp,
+      faAngleDown,
+      showAdditionalFAQs: false,
       faqImage: faqImage,
       faqs: [
         {
diff --git a/vue-frontend/src/components/android-app-development/LandingSection.vue b/vue-frontend/src/components/android-app-development/LandingSection.vue
index eda665ffb..7405ecfa2 100644
--- a/vue-frontend/src/components/android-app-development/LandingSection.vue
+++ b/vue-frontend/src/components/android-app-development/LandingSection.vue
@@ -18,13 +18,13 @@
       class="tw-container tw-absolute tw-p-4 tw-w-full tw-text-center tw-text-[#FFF] tw-transform tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2 xl:tw-w-[80%] md:tw-top-[49%] lg:tw-top-[48%] 2xl:tw-w-[49%] xl2:tw-w-[60%] 2xll:tw-w-[50%] xll:tw-w-[65%]"
     >
       <h1
-        class="tracking-[0.08rem] tw-mb-2 tw-font-inter-semibold tw-text-[2rem] tw-leading-[2.6rem] tw-text-[#FFF] sm:tw-mb-6 md:tw-font-inter-bold md:tw-text-[3.75rem] lg:tw-text-[3.75rem] md:tw-leading-[4.625rem] lg:tw-leading-[5.625rem]"
+        class="tracking-[0.08rem] tw-font-inter-semibold tw-text-[2rem] tw-leading-[2.6rem] tw-text-[#FFF] md:tw-font-inter-bold md:tw-text-[2.813rem] xl:tw-text-[3.75rem] md:tw-leading-[3.438rem] xl:tw-leading-[4.875rem]"
       >
-        Android App<br />
-        Development Company
+        Android app <br />
+        development company
       </h1>
       <p
-        class="tw-font-inter-medium tw-text-[1rem] tw-text-base tw-text-[#FFF] md:tw-text-[1.25rem] md:tw-leading-[1.875rem]"
+        class="tw-mt-4 md:tw-mt-6 tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.688rem] tw-text-[#FFF]/[0.8] md:tw-text-[1.313rem] md:tw-leading-[2rem] xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem]"
       >
         We create bespoke Android applications known for their supreme
         performance, unwavering security, and utmost reliability. With an
@@ -33,15 +33,15 @@
       </p>
 
       <div
-        class="tw-mt-4 tw-flex tw-flex-wrap tw-justify-center md:tw-justify-center"
+        class="tw-mt-8 md:tw-mt-10 tw-flex tw-flex-wrap tw-justify-center md:tw-justify-center"
       >
         <router-link
-          class="white-btn gradient-border-btn tw-flex tw-h-[3.3rem] tw-w-max tw-items-center tw-rounded-full tw-border-none"
+          class="white-btn gradient-border-btn tw-flex tw-h-[3rem] md:tw-h-[3.438rem] tw-w-max tw-items-center tw-rounded-[12px] tw-border-none"
           to="/contact"
           @click.native="mixpanel.track('tap_android_development_cta')"
         >
           <span
-            class="tw-font-inter-semibold tw-text-[1rem] tw-font-normal tw-leading-[1.21rem] !tw-tracking-[0] md:tw-text-[1.1875rem] md:tw-leading-[1.4375rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
+            class="tw-font-inter-semibold tw-text-[1rem] tw-font-normal tw-leading-[1.21rem] !tw-tracking-[0] md:tw-text-[1.1875rem] md:tw-leading-[1.4375rem] lg:tw-text-[1.125rem] lg:tw-leading-[1.688rem]"
             >Consult Our Android Team</span
           >
         </router-link>
diff --git a/vue-frontend/src/components/android-app-development/PinkCtaSection.vue b/vue-frontend/src/components/android-app-development/PinkCtaSection.vue
index 68c357209..aa2729422 100644
--- a/vue-frontend/src/components/android-app-development/PinkCtaSection.vue
+++ b/vue-frontend/src/components/android-app-development/PinkCtaSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-relative tw-mb-16 tw-h-80 xll:tw-h-[30rem]">
+  <div class="tw-relative md:tw-h-[376px] xl:tw-h-[476px]">
     <img
       :src="background"
       alt="Background-Image"
@@ -7,19 +7,19 @@
       loading="lazy"
     />
     <div
-      class="tw-container tw-absolute tw-left-1/2 tw-flex tw-w-full tw--translate-x-1/2 tw--translate-y-[100%] tw-transform tw-flex-row tw-items-center lg:tw-mt-4 xll:!tw--mt-16"
+      class="tw-container tw-absolute tw-left-1/2 tw-flex tw-w-full tw--translate-x-1/2 tw--translate-y-[116%] xl:tw--translate-y-[120%] tw-transform tw-flex-row tw-items-center lg:tw-mt-4"
     >
       <div class="tw-flex tw-w-[66%]">
         <div
           class="tw-w-[80%] tw-py-5 tw-text-white lg:tw-w-[90%] xl:tw-m-auto 2xl:tw-w-9/12"
         >
           <p
-            class="tw-font-inter-bold tw-text-[2.188rem] tw-leading-[2.625rem] lg:tw-text-[3.4375rem] lg:tw-leading-[3.4375rem]"
+            class="tw-font-inter-bold tw-text-[2.188rem] tw-leading-[2.625rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem]"
           >
             Whether you need...
           </p>
           <ul
-            class="tw-pt-6 tw-font-inter-semibold tw-text-[1rem] tw-leading-5 md:tw-text-[1.188rem] md:tw-leading-[1.5rem] lg:tw-text-[1.375rem] lg:tw-leading-[1.8125rem]"
+            class="tw-pt-6 tw-font-inter-semibold tw-text-[1.188rem] tw-leading-[1.5rem] xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem]"
           >
             <li v-for="reason in reasons" :key="reason" class="tw-flex">
               <span class="tw-pr-1">*</span>
@@ -27,21 +27,21 @@
             </li>
           </ul>
           <div
-            class="tw-pb-8 tw-pt-6 tw-font-inter-regular tw-text-[0.875rem] tw-leading-[1.125rem] md:tw-text-[1.125rem] md:tw-leading-[1.375rem] lg:tw-text-[1.375rem] lg:tw-leading-[1.813rem] xl:tw-w-[85%]"
+            class="tw-text-white/[0.8] tw-pb-8 tw-pt-4 tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.375rem] lg:tw-text-[1.25rem] lg:tw-leading-[1.875rem] xl:tw-w-[85%]"
           >
             Bring us your toughest challenge and we'll show you the path to a
             sleek solution.
           </div>
         </div>
       </div>
-      <div class="tw-ml-auto xl:tw-mx-auto">
+      <div class="tw-pt--[8rem] tw-ml-auto xl:tw-mx-auto">
         <router-link
-          class="cta-button tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-full tw-border tw-border-solid tw-border-white tw-bg-white tw-p-3 tw-px-[1.875rem] tw-text-center tw-font-inter-medium tw-font-inter-medium tw-text-[1rem] tw-font-normal tw-leading-[1.1875rem] !tw-tracking-[0] hover:tw-bg-transparent hover:tw-text-white active:tw-scale-[0.98] md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-mx-0 lg:tw-text-[1.1875rem] lg:tw-leading-[1.436875rem]"
+          class="cta-button tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-[12px] tw-border tw-border-solid tw-border-white tw-bg-white tw-py-[0.88rem] tw-px-[2rem] tw-font-normal tw-leading-[1.1875rem] !tw-tracking-[0] hover:tw-bg-transparent hover:tw-text-white active:tw-scale-[0.98] tw-h-[3.438rem]"
           to="/contact"
           @click.native="mixpanel.track('tap_android_development_cta')"
         >
           <span
-            class="tw-from-[#ff9472] tw-to-[#f2709c] tw-bg-clip-text tw-font-inter-medium tw-text-transparent tw-bg-gradient-[270.11deg]"
+            class="tw-text-[1.125rem] tw-leading-[1.688rem] tw-from-[#FF835B] tw-to-[#F2709C] tw-bg-clip-text tw-font-inter-semibold tw-text-transparent tw-bg-gradient-[270.11deg]"
             >Let's Chat</span
           >
         </router-link>
diff --git a/vue-frontend/src/components/android-app-development/SuccessStorySection.vue b/vue-frontend/src/components/android-app-development/SuccessStorySection.vue
index 35c969de1..86b6927d1 100644
--- a/vue-frontend/src/components/android-app-development/SuccessStorySection.vue
+++ b/vue-frontend/src/components/android-app-development/SuccessStorySection.vue
@@ -1,10 +1,10 @@
 <template>
   <section>
-    <div class="div tw-relative tw-mt-10 tw-mb-20">
+    <div class="div tw-relative tw-mt-16 md:tw-mt-[10rem] xl:tw-mt-[15rem]">
       <h2
-        class="tw-pt-5 sm:tw-py-10 tw-text-center tw-text-[1.875rem] lg:tw-text-[3.4375rem] lg:tw-leading-[5.15625rem] md:tw-text-[2.813rem] tw-leading-[2.4375rem] md:tw-leadig-[3.875rem] tw-font-inter-bold tw-text-black-core/[0.87]"
+        class="sm:tw-pb-10 tw-text-center tw-text-[1.875rem] tw-leading-[2.438rem] md:tw-text-[2.25rem] md:tw-leadig-[2.875rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem] tw-font-inter-bold tw-text-black-core/[0.87]"
       >
-        Success Stories
+        Success stories
       </h2>
       <!-- Mobile UI -->
       <div
@@ -36,27 +36,27 @@
               <div
                 v-for="(client, index) in clients"
                 :key="index"
-                class="tw-mb-8 tw-mx-auto tw-rounded-[5px] sm:tw-px-10 md:tw-px-6 lg:tw-px-4 xl:tw-px-24 tw-text-black-core/[0.87] tw-p-5 tw-bg-gradient-to-l tw-from-[#FF835B]/[0.10] tw-to-[#F2709C]/[0.10]"
+                class="tw-mb-8 tw-mx-auto tw-rounded-[5px] sm:tw-px-10 md:tw-px-6 lg:tw-px-4 xl:tw-px-24 tw-p-5 tw-bg-[#F2709C]/[0.08]"
               >
                 <div
-                  class="tw-font-inter-medium tw-text-[1.125rem] md:tw-text-[2.25rem] lg:tw-text-[3.125rem] tw-leading-[1.6875rem] md:tw-leading-[2.75rem] lg:tw-leading-[3.75rem] tw-transition-all tw-ease tw-duration-500"
+                  class="tw-text-black-core/[0.87] tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.688rem] tw-transition-all tw-ease tw-duration-500"
                   v-html="client.review"
                 ></div>
-                <div class="tw-flex tw-flex-row tw-justify-between tw-mt-10">
+                <div class="tw-flex tw-flex-row tw-justify-between tw-mt-6">
                   <div class="tw-flex tw-flex-col">
                     <span class="tw-flex tw-flex-row">
                       <font-awesome-icon
                         v-for="i in 5"
                         :key="i"
-                        class="fa-star tw-w-5 tw-h-5 tw-text-[#FF3D2E]"
+                        class="fa-star tw-w-5 tw-h-5 tw-text-[#FFC700]"
                         icon="star"
                     /></span>
                     <span
-                      class="tw-mt-3 tw-text-black-core/[0.87] tw-font-inter-semibold tw-text-[1rem] tw-leading-[1.2rem] md:tw-text-[1.625rem]"
+                      class="tw-mt-2 tw-text-black-core/[0.87] tw-font-inter-regular tw-text-[1rem] tw-leading-[1.5rem]"
                       >{{ client.name }}</span
                     >
                     <span
-                      class="tw-mt-2 tw-font-inter-regular tw-text-[0.75rem] md:tw-text-[1.25rem] tw-leading-[0.9rem] tw-text-black-core/[0.60]"
+                      class="tw-font-inter-regular tw-text-[0.75rem] tw-leading-[1.125rem] tw-text-black-core/[0.60]"
                       >{{ client.designation }}</span
                     >
                   </div>
@@ -126,10 +126,10 @@
                         ? 'tw--ml-6'
                         : '',
                       activeIndex == index
-                        ? 'tw--ml-2 tw-text-black-core/[0.87] tw-text-[0.5rem] lg:tw-text-[1rem] tw-leading-[1.2rem] tw-font-inter-semibold tw-animate-zoomEffect'
+                        ? 'tw--ml-2 tw-text-black-core/[0.87] tw-text-[0.5rem] tw-leading-[1.125rem] xl:tw-text-[1.125rem] xl:tw-leading-[1.688rem] tw-font-inter-regular tw-animate-zoomEffect'
                         : '',
                     ]"
-                    class="tw-text-black-core/[0.60] tw-text-[0.875rem] tw-text-center tw-leading-[1.05rem] tw-font-inter-regular"
+                    class="tw-text-black-core/[0.60] tw-text-[0.875rem] tw-text-center tw-leading-[1.313rem] tw-font-inter-medium"
                   >
                     {{ getFirstWord(client.name) }}</span
                   >
@@ -142,7 +142,7 @@
               :slidesPerView="1"
               :centeredSlides="true"
               :spaceBetween="10"
-              :speed="950"
+              :speed="900"
               :direction="'vertical'"
               :allowTouchMove="false"
               :autoplay="{
@@ -166,26 +166,26 @@
                       <font-awesome-icon
                         v-for="i in 5"
                         :key="i"
-                        class="fa-star tw-w-6 tw-h-6 footer-icon"
+                        class="fa-star tw-w-6 tw-h-6 tw-text-[#FFC700]"
                         icon="star"
                     /></span>
                     <span
-                      class="tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.6875rem] tw-text-black-core/[0.87]"
+                      class="tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.688rem] tw-text-black-core/[0.87]"
                       >(5.0)</span
                     >
                   </div>
                   <div
-                    class="tw-font-inter-semibold tw-text-[1.5rem] lg:tw-text-[2.125rem] tw-leading-[2.5rem] lg:tw-leading-[3.1875rem]"
+                    class="tw-font-inter-semibold tw-text-[1.5rem] xl:tw-text-[2rem] tw-leading-[2.125rem] xl:tw-leading-[3rem] tw-text-black-core/[0.87]"
                     v-html="client.review"
                   ></div>
                   <div class="tw-flex tw-flex-row tw-justify-between tw-my-5">
                     <div class="tw-flex tw-flex-col">
                       <span
-                        class="tw-mt-3 v2-canopas-gradient-text tw-font-inter-semibold tw-text-[1.25rem] tw-leading-[1.5rem]"
+                        class="tw-mt-3 tw-text-black-core/[0.6] tw-font-inter-medium tw-text-[1.375rem] tw-leading-[2.063rem]"
                         >{{ client.name }}</span
                       >
                       <span
-                        class="tw-mt-4 tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.35rem] tw-text-black-core/[0.60]"
+                        class="tw-mt-4 tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.688rem] tw-text-black-core/[0.40]"
                         v-html="client.desktop_designation"
                       ></span>
                     </div>
@@ -222,7 +222,7 @@ export default {
           id: 1,
           name: "Rebecca Kimura",
           designation: "Founder at Togness, Australia",
-          desktop_designation: `Founder at Togness,<span class="tw-font-inter-medium tw-text-black-core/[0.87]"> Australia</span>`,
+          desktop_designation: `Founder at Togness, Australia`,
           review:
             "There was rarely ever a second explanation needed. Even if we struggled to explain technically what we wanted, they understood the first time.",
           className: "tw--ml-8",
@@ -231,7 +231,7 @@ export default {
           id: 2,
           name: "Elyass Bouchater",
           designation: "Product Manager at Luxe, Morocco",
-          desktop_designation: `Product Manager at Luxe, <span class="tw-font-inter-medium tw-text-black-core/[0.87]"> Morocco</span>`,
+          desktop_designation: `Product Manager at Luxe, Morocco`,
           review:
             "The Play Store is the hardest app store to get good reviews on, and we've just reached a five-star rating, which has been one of our biggest achievements, partly thanks to Canopas’ work.</span>",
         },
@@ -239,7 +239,7 @@ export default {
           id: 3,
           name: "Rob Eberhard",
           designation: "Founder at ActivScout, Canada",
-          desktop_designation: `Founder at ActivScout,<span class="tw-font-inter-medium tw-text-black-core/[0.87]"> Canada</span>`,
+          desktop_designation: `Founder at ActivScout, Canada`,
           review:
             "I was especially impressed with the skills of their backend developer and how well the project manager and she worked with one another to create a high performing iOS app.",
         },
@@ -247,7 +247,7 @@ export default {
           id: 4,
           name: "Lisa Weinstein",
           designation: "Founder at Brickandbatten, USA",
-          desktop_designation: `Founder at Brickandbatten, <span class="tw-font-inter-medium tw-text-black-core/[0.87]"> USA</span>`,
+          desktop_designation: `Founder at Brickandbatten, USA`,
           review:
             "There is not enough space to say all the wonderful things I would want to share about Canopas. The team is incredibly helpful, stays calm even when we had to deal with tough issues on our app and always found a way to help us fix whatever was needed or roll out any new features for our app in both the iOS and Android stores.",
         },
@@ -255,7 +255,7 @@ export default {
           id: 5,
           name: "Cyril Trosset",
           designation: "CTO at Udini, France",
-          desktop_designation: `CTO at Udini, <span class="tw-font-inter-medium tw-text-black-core/[0.87]"> France</span> `,
+          desktop_designation: `CTO at Udini, France`,
           review:
             "Multiple versions of this Android app have been successfully delivered over time. They are always very responsive on bug resolution. They are very efficient at producing complex interfaces and high quality apps.",
         },
diff --git a/vue-frontend/tailwind.config.cjs b/vue-frontend/tailwind.config.cjs
index 0fdfe9172..a90f748ae 100755
--- a/vue-frontend/tailwind.config.cjs
+++ b/vue-frontend/tailwind.config.cjs
@@ -187,7 +187,7 @@ module.exports = {
         "multi-gradient-background":
           "linear-gradient(180deg, #1A1A1A 11.98%, #A65B5F 36.02%, #F98188 55.21%, #9B565A 73.96%, #1A1A1A 91.67%)",
         "pink-gradient-background":
-          "linear-gradient(to top , #FFDCE8 -36%, #F2709C 19.02%, #FF9472 38.21%, #FFFFFF 65.96%, #FFFFFF 91.67%)",
+          "linear-gradient(183deg, #FFF 36.43%, rgba(249, 133, 132, 0.50) 58.99%, #F47695 79.68%);",
         "gradient-background":
           "linear-gradient(to bottom, #FFFFFF , #FDE0E2 23%, #FDE0E2 88%, #FFFFFF 100%);",
         "gradient-L": "linear-gradient(178deg, #FFFFFF  68%, #f77783 40%);",
@@ -226,7 +226,7 @@ module.exports = {
             120: "120deg",
             135: "135deg",
           }),
-        },
+        }
       );
     }),
     function ({ addComponents }) {