diff --git a/vue-frontend/src/assets/css/tailwind.css b/vue-frontend/src/assets/css/tailwind.css
index 72895308c..798274092 100644
--- a/vue-frontend/src/assets/css/tailwind.css
+++ b/vue-frontend/src/assets/css/tailwind.css
@@ -71,6 +71,13 @@
   font-weight: 700;
   src: url(../fonts/Open-Sans-Bold.woff2) format("woff2");
 }
+@font-face {
+  font-display: swap;
+  font-family: Opensans-SemiBold;
+  font-style: normal;
+  font-weight: 600;
+  src: url(../fonts/Open-Sans-SemiBold.woff2) format("woff2");
+}
 @layer utilities {
   input:-webkit-autofill,
   input:-webkit-autofill:active,
diff --git a/vue-frontend/src/assets/fonts/Open-Sans-SemiBold.woff2 b/vue-frontend/src/assets/fonts/Open-Sans-SemiBold.woff2
new file mode 100644
index 000000000..3f4251875
Binary files /dev/null and b/vue-frontend/src/assets/fonts/Open-Sans-SemiBold.woff2 differ
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..db05908d9 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-40 xl:tw-mt-16 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-20 xl:tw-top-32 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-opensans-bold 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-12 gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-3 tw-px-6 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-base 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..216ed8715 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"
-  >
-    <!-- Mobile UI start -->
+  <section class="section tw-mt-16 md:tw-mt-40 xl:tw-mt-60">
+    <!-- ---------------------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-opensans-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,20 +56,17 @@
           </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------------------ -->
 
-    <!-- Mobile UI end -->
-    <!-- Desktop UI start -->
+    <!-- ---------------------DSKTOP UI START------------------ -->
     <div
       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-opensans-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
@@ -89,7 +86,7 @@
           </aspect-ratio>
 
           <div
-            class="overlay tw-rounded-[20px] tw-duration-700 tw-ease-in tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-overflow-hidden tw-w-full tw-h-0 tw-opacity-0 group-hover:tw-opacity-100"
+            class="tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-right-[0] tw-rounded-[18px] tw-transition-all tw-duration-700 tw-opacity-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100 group-hover:tw-h-full"
             :class="blog.bgColor"
           >
             <div
@@ -118,7 +115,7 @@
               :alt="blog.title"
             />
             <div
-              class="overlay tw-rounded-[20px] tw-duration-700 tw-ease-in tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-overflow-hidden tw-w-full tw-h-0 tw-opacity-0 group-hover:tw-opacity-100"
+              class="tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-right-[0] tw-rounded-[18px] tw-transition-all tw-duration-700 tw-opacity-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100 group-hover:tw-h-full"
               :class="blog.bgColor"
             >
               <div
@@ -150,7 +147,7 @@
             :alt="blog.title"
           />
           <div
-            class="overlay tw-rounded-[18px] tw-duration-700 tw-ease-in tw-opacity-0 tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100"
+            class="tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-right-[0] tw-rounded-[18px] tw-transition-all tw-duration-700 tw-opacity-0 tw-overflow-hidden tw-w-full tw-h-0 group-hover:tw-opacity-100 group-hover:tw-h-full"
             :class="blog.bgColor"
           >
             <div
@@ -166,7 +163,7 @@
         </div>
       </div>
     </div>
-    <!-- Desktop UI end -->
+    <!-- ---------------------DESKTOP UI END------------------ -->
   </section>
 </template>
 
@@ -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-opensans-semibold 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-opensans-semibold 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-opensans-semibold 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-opensans-semibold 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-opensans-semibold 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,12 +253,10 @@ 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;
 }
-
-.content:hover .overlay {
-  @apply tw-h-full;
-}
 </style>
diff --git a/vue-frontend/src/components/android-app-development/CaseStudySection.vue b/vue-frontend/src/components/android-app-development/CaseStudySection.vue
index 35021480a..078cb4bc4 100644
--- a/vue-frontend/src/components/android-app-development/CaseStudySection.vue
+++ b/vue-frontend/src/components/android-app-development/CaseStudySection.vue
@@ -1,24 +1,24 @@
 <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-16 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-opensans-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
         >
       </div>
-      <!-- ---------------------Mobile UI------------------ -->
+      <!-- ---------------------MOBILE UI START------------------ -->
       <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-opensans-bold 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-base tw-text-black-core/[0.6]"
               v-html="item.content"
             ></span>
           </div>
@@ -53,46 +53,42 @@
       <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-base"
             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-12 tw-w-max tw-items-center tw-rounded-xl 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]"
+              <span class="tw-font-inter-semibold tw-text-base"
                 >Inquire Now</span
               >
             </router-link>
           </div>
         </div>
       </div>
-
-      <!-- ------------------------ MobileUI END---------------------- -->
     </div>
-    <div class="tw-hidden md:tw-block tw-bg-[#F6F6F6] tw-mt-14">
+    <!-- ------------------------ MOBILE UI END---------------------- -->
+
+    <!-- ---------------------DESKTOP UI START------------------ -->
+    <div class="tw-hidden md:tw-block tw-bg-[#F6F6F6] tw-mt-[4.5rem]">
       <swiper
         :slidesPerView="1"
         :centeredSlides="true"
@@ -105,18 +101,19 @@
         :spaceBetween="20"
         :navigation="true"
         :modules="modules"
+        @autoplayTimeLeft="onAutoplayTimeLeft"
         class="swiper-container xll:tw-container"
       >
         <swiper-slide v-for="item in cases" :key="item">
           <div
-            class="tw-flex tw-flex-row xl:tw-px-[4rem] tw-py-[6rem] tw-w-[91%] 2xl:tw-w-[77%] 2xll:tw-w-[72%] xll:tw-w-[91%] tw-mx-auto"
+            class="tw-flex tw-flex-row xl:tw-px-16 tw-py-24 tw-w-[91%] 2xl:tw-w-[77%] 2xll:tw-w-[72%] xll:tw-w-[91%] tw-mx-auto"
           >
             <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-opensans-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-opensans-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-opensans-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-opensans-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,8 +196,17 @@
             </div>
           </div>
         </swiper-slide>
+        <div
+          class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-1 tw-bg-black-core/[0.08]"
+        >
+          <div
+            class="progressbar tw-h-1 tw-bg-gradient-to-r tw-from-[#FF835B] tw-to-[#F2709C] tw-rounded-xl"
+            ref="progressBar"
+          ></div>
+        </div>
       </swiper>
     </div>
+    <!-- ---------------------DESKTOP UI END------------------ -->
   </section>
 </template>
 
@@ -231,9 +233,18 @@ import smileplus_800w from "@/assets/images/andriod-app-development/casestudy/de
 import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import config from "@/config.js";
+import { ref } from "vue";
+
 export default {
-  data() {
+  setup() {
+    const progressBar = ref(null);
+    const onAutoplayTimeLeft = (s, time, progress) => {
+      progressBar.value.style.setProperty("--progress", `${progress * 100}%`);
+    };
+
     return {
+      onAutoplayTimeLeft,
+      progressBar,
       resultsimage,
       modules: [Autoplay],
       cases: [
@@ -309,7 +320,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-opensans-bold tw-text-[1.5rem] tw-leading-[2.25rem]">New Project</span> Together`,
           images: [cta_400w, cta_800w],
           className: "tw-text-center ",
           textalign:
@@ -325,3 +336,11 @@ export default {
   inject: ["mixpanel"],
 };
 </script>
+<style lang="postcss">
+@import "swiper/css";
+@import "swiper/css/pagination";
+.progressbar {
+  width: calc(100% - var(--progress, 0%));
+  transition: width 0.04s ease;
+}
+</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..f93cb93cf 100644
--- a/vue-frontend/src/components/android-app-development/CtaSection.vue
+++ b/vue-frontend/src/components/android-app-development/CtaSection.vue
@@ -1,37 +1,69 @@
 <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-40 xl:tw-py-60">
+    <!-- ---------------------MOBILE UI START------------------ -->
+    <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-opensans-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-12 gradient-btn consultation-btn 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"
           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]"
-            >Contact Us
-          </span>
+          <span class="tw-font-inter-semibold tw-text-base">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>
+    <!-- ---------------------MOBILE UI END------------------ -->
+
+    <!-- ---------------------DESKTOP UI START------------------ -->
+    <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-opensans-bold 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-10 md:!tw-ml-[25%] xl:!tw-ml-[14%] 2xl:!tw-ml-[-7%]"
+        >
+          <router-link
+            class="tw-h-12 gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-3 tw-px-6 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>
+    <!-- ---------------------DESKTOP UI END------------------ -->
+  </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..b8d5da3df 100644
--- a/vue-frontend/src/components/android-app-development/DevelopmentSection.vue
+++ b/vue-frontend/src/components/android-app-development/DevelopmentSection.vue
@@ -1,100 +1,36 @@
 <template>
-  <div class="tw-mt-16 tw-bg-white tw-h-[70%]">
+  <div class="tw-mt-16 md:tw-mt-40 xl:tw-mt-60 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%]"
+      <div
+        class="tw-container tw-flex tw-flex-col tw-text-center xll:tw--mb-72"
       >
-        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>
-    <!-- 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="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"
-          >
-            <div class="tw-relative !-tw-mr-2 tw-mb-8 tw-mt-12">
-              <div
-                class="tw-border-b-2 tw-border-dotted tw-border-[#000000]/[0.87] 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%]"
-            >
-              <span
-                class="tw-text-center tw-font-inter-bold tw-text-[3.75rem] tw-leading-[5.625rem] !tw-bg-white"
-              >
-                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="[item.bgColor]"
-            >
-              <div
-                class="tw-justify-left tw-mb-5 tw-flex tw-flex-row tw-items-center tw-space-x-4"
-              >
-                <img
-                  alt="development-icon"
-                  :src="item.icon"
-                  class="tw-h-10 tw-w-10 tw-object-contain md:tw-hidden"
-                  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]"
-                  >{{ 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]"
-              >
-                <ul class="tw-pl-8 tw-pr-4 md:tw-hidden">
-                  <li
-                    v-for="list in item.description"
-                    :key="list"
-                    class="tw-mb-3.5 tw-list-disc"
-                  >
-                    {{ 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>
-          </div>
-        </div>
+        <span
+          class="tw-font-opensans-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 End -->
-    <div
-      class="tw-h-[25vh] xl:tw-h-[50vh] 2xl:tw-h-[60vh] xll:tw-h-screen tw-w-screen"
-    ></div>
-
-    <div class="swiper-content tw-mt-8 md:tw-hidden">
+    <!-- ---------------------MOBILE UI START------------------ -->
+    <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"
         @swiper="setSwiperRef"
         :breakpoints="{
           '768': {
@@ -138,26 +74,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 +87,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-opensans-semibold 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,18 +103,86 @@
                   {{ 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>
       </swiper>
     </div>
+    <!-- ---------------------MOBILE UI END------------------ -->
+
+    <!-- ---------------------DESKTOP UI START------------------ -->
+    <div class="sticky-parent tw-hidden md:tw-block">
+      <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--48 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-12 tw-mt-[6rem] xl:tw-mt-[6.5rem] xll:tw-mt-[-15rem]"
+            >
+              <div
+                class="tw-border-b-2 tw-border-dotted tw-border-[#000000]/[0.6] tw-text-center"
+              ></div>
+            </div>
+            <div
+              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-opensans-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-p-[1.88rem] !tw-w-[39.75rem] xl:!tw-w-[45rem] tw-mx-auto"
+              :class="[item.bgColor]"
+            >
+              <div class="tw-justify-left tw-flex tw-flex-row tw-items-center">
+                <img
+                  alt="development-icon"
+                  :src="item.icon"
+                  class="tw-h-10 tw-w-10 tw-object-contain md:tw-hidden"
+                  loading="lazy"
+                />
+                <span
+                  class="tw-font-opensans-semibold 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.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
+                    v-for="list in item.description"
+                    :key="list"
+                    class="tw-mb-3.5 tw-list-disc"
+                  >
+                    {{ list }}
+                  </li>
+                </ul>
+                <p
+                  v-for="list in item.description"
+                  :key="list"
+                  class="tw-mt-4 tw-hidden md:tw-block"
+                >
+                  {{ list }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      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>
 </template>
 
@@ -205,15 +192,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 +215,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 +227,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 +239,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 +251,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 +265,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 +276,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..bc556f376 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-40 xl:tw-mt-60">
     <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-opensans-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,41 +84,133 @@
                 </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-12 tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-3 tw-px-6 tw-text-center"
+                @click="showAdditionalFAQs = !showAdditionalFAQs"
+              >
+                <span class="tw-text-white tw-font-inter-semibold tw-text-base"
+                  >{{ 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"
         type="button"
         :disabled="!isActivePrev"
-        class="clients-indicators tw-mx-1 tw-my-0 tw-cursor-pointer tw-drop-shadow-md sm:tw-mx-2"
+        class="tw-h-12 tw-flex tw-ml-auto tw-items-center tw-text-center"
         @click="slide(-1)"
         @click.native="mixpanel.track('tap_android_app_faq_previous_arrow')"
         aria-label="leftArrow"
       >
         <font-awesome-icon
           :class="isActivePrev ? 'footer-icon' : ''"
-          class="arrow tw-h-3.5 tw-w-3.5 tw-rounded-full tw-border-[#3d3d3d26] tw-bg-white tw-p-2.5 tw-drop-shadow-md md:tw-h-5 md:tw-w-5"
+          class="tw-mr-2 tw-h-5 tw-w-5"
           icon="arrow-left"
           id="leftArrow"
-        />
+        /><span
+          class="v2-canopas-gradient-text tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.688rem]"
+          >Back</span
+        >
       </button>
       <button
         v-else
         type="button"
+        class="tw-h-12 tw-flex tw-ml-auto tw-items-center tw-text-center"
         :disabled="!isActiveNext"
-        class="clients-indicators tw-mx-1 tw-my-0 tw-cursor-pointer tw-drop-shadow-md tw-drop-shadow-md sm:tw-mx-2"
         @click="slide(1)"
         @click.native="mixpanel.track('tap_android_app_faq_next_arrow')"
         aria-label="rightArrow"
       >
+        <span
+          class="v2-canopas-gradient-text tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.688rem]"
+          >View More Questions</span
+        >
         <font-awesome-icon
           :class="isActiveNext ? 'footer-icon' : ''"
-          class="arrow tw-h-3.5 tw-w-3.5 tw-rounded-full tw-bg-white tw-p-2.5 tw-drop-shadow-md md:tw-h-5 md:tw-w-5"
+          class="tw-ml-2 tw-h-5 tw-w-5"
           icon="arrow-right"
           id="rightArrow"
         />
@@ -133,12 +223,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..3e0b3bf36 100644
--- a/vue-frontend/src/components/android-app-development/LandingSection.vue
+++ b/vue-frontend/src/components/android-app-development/LandingSection.vue
@@ -15,16 +15,16 @@
       alt="android-landing"
     />
     <div
-      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%]"
+      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-[84%] md:tw-top-[49%] lg:tw-top-[48%] 2xl:tw-w-[69%] 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-opensans-bold 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..0c8381702 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-opensans-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..89437d14c 100644
--- a/vue-frontend/src/components/android-app-development/SuccessStorySection.vue
+++ b/vue-frontend/src/components/android-app-development/SuccessStorySection.vue
@@ -1,12 +1,12 @@
 <template>
   <section>
-    <div class="div tw-relative tw-mt-10 tw-mb-20">
+    <div class="div tw-relative tw-mt-16 md:tw-mt-40 xl:tw-mt-60">
       <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-opensans-bold tw-text-black-core/[0.87]"
       >
-        Success Stories
+        Success stories
       </h2>
-      <!-- Mobile UI -->
+      <!-- ---------------------MOBILE UI START------------------ -->
       <div
         class="md:tw-hidden tw-container tw-my-8 tw-h-[700px] tw-relative tw-overflow-hidden"
       >
@@ -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>
@@ -69,134 +69,73 @@
           class="tw--mt-4 tw-w-full tw-h-12 after:tw-absolute after:tw-z-[9] after:tw-left-0 after:tw-h-[5%] after:tw-w-full after:tw-blur-lg after:tw-bg-white-gradient-bottom"
         ></div>
       </div>
-      <!-- Mobile UI End-->
+      <!-- ---------------------MOBILE UI END------------------ -->
+
+      <!-- ---------------------DESKTOP UI START------------------ -->
       <div class="tw-hidden md:tw-block">
         <h2
           class="testimonial tw-opacity-[5%] tw-top-1/2 tw-left-1/2 tw-transform tw--translate-x-1/2 tw--translate-y-1/2 tw-absolute tw-tracking-wide tw-font-black tw-font-inter-bold tw-text-[7.5rem] lg:tw-text-[9.5rem] xl:tw-text-[11.75rem] 2xl:tw-text-[13.75rem] xl:tw-leading-[20.625rem] tw-text-black-core/[0.4] tw-text-center"
         >
           Testimonials
         </h2>
+
         <div
-          class="tw-mx-auto tw-hidden tw-container md:tw-flex tw-flex-row sm:tw-text-black-core/[0.87] tw-text-black-900 md:tw-px-6 lg:tw-px-4 xl:tw-px-24"
+          class="tw-container tw-w-[90%] 2xl:tw-w-[50%] tw-mx-auto tw-flex tw-items-center tw-justify-center swiper-content"
         >
-          <div
-            class="tw-basis-[190%] xl:tw-basis-[150%] tw-pointer-events-none lg:tw-mt-[7%]"
+          <swiper
+            :slidesPerView="1"
+            :centeredSlides="true"
+            :spaceBetween="0"
+            :speed="900"
+            :direction="'vertical'"
+            :autoplay="{
+              delay: 4000,
+              disableOnInteraction: false,
+            }"
+            :loop="true"
+            :modules="modules"
+            class="swiper-container tw-h-[600px] lg:tw-h-[700px] tw-flex tw-items-center tw-justify-center"
           >
-            <swiper
-              :slidesPerView="5"
-              :centeredSlides="true"
-              :spaceBetween="10"
-              :allowTouchMove="false"
-              :slideToClickedSlide="true"
-              :direction="'vertical'"
-              :speed="950"
-              :autoplay="{
-                delay: 4000,
-                disableOnInteraction: false,
-              }"
-              :loop="true"
-              :modules="modules"
-              class="swiper-container tw-h-[600px] tw-px-2"
-              @swiper="setSwiperRef"
-              @slideChange="onSlideChange"
+            <swiper-slide
+              v-for="(client, index) in client"
+              :key="index"
+              class="!tw-flex tw-justify-center tw-flex-col"
             >
-              <swiper-slide v-for="(client, index) in client" :key="index">
-                <div
-                  class="tw-my-10 tw-flex tw-flex-col tw-items-center tw-justify-center"
-                  :class="
-                    activeIndex == index || activeindex == 0
-                      ? 'tw-animate-zoomEffect tw-mt-8 '
-                      : ''
-                  "
+              <div class="tw-flex tw-gap-x-4 tw-my-5">
+                <span class="tw-flex tw-flex-row">
+                  <font-awesome-icon
+                    v-for="i in 5"
+                    :key="i"
+                    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.688rem] tw-text-black-core/[0.87]"
+                  >(5.0)</span
                 >
-                  <img
-                    @click="slideTo(index), (activeIndex = index)"
-                    :class="
-                      activeIndex == index || activeindex == 0
-                        ? 'lg:tw-h-[50px] lg:tw-w-[50px]'
-                        : 'tw-grayscale'
-                    "
-                    :src="getImageUrl(index)"
-                    :alt="client.name"
-                    class="tw-pointer-events-auto tw-cursor-pointer tw-h-10 tw-w-10 tw-mb-2"
-                  />
+              </div>
+              <div
+                class="tw-font-opensans-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="[
-                      client.className && activeIndex == index
-                        ? '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'
-                        : '',
-                    ]"
-                    class="tw-text-black-core/[0.60] tw-text-[0.875rem] tw-text-center tw-leading-[1.05rem] tw-font-inter-regular"
-                  >
-                    {{ getFirstWord(client.name) }}</span
+                    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.688rem] tw-text-black-core/[0.40]"
+                    v-html="client.desktop_designation"
+                  ></span>
                 </div>
-              </swiper-slide></swiper
-            >
-          </div>
-          <div class="swiper-content">
-            <swiper
-              :slidesPerView="1"
-              :centeredSlides="true"
-              :spaceBetween="10"
-              :speed="950"
-              :direction="'vertical'"
-              :allowTouchMove="false"
-              :autoplay="{
-                delay: 4000,
-                disableOnInteraction: false,
-              }"
-              :loop="true"
-              :modules="modules"
-              class="swiper-container tw-h-[600px] lg:tw-h-[700px] tw-mt-[4%] tw-flex"
-              @swiper="setSwiperRef"
-              @slideChange="onSlideChange"
-            >
-              <swiper-slide
-                v-for="(client, index) in client"
-                :key="index"
-                class="tw-pl-8 xl:tw-pl-0 !tw-flex tw-justify-center tw-flex-col"
-              >
-                <div class="-tw-ml-4 md:tw-pr-6 lg:tw-px-4 xl:tw-px-24">
-                  <div class="tw-flex tw-gap-x-4 tw-my-5">
-                    <span class="tw-flex tw-flex-row">
-                      <font-awesome-icon
-                        v-for="i in 5"
-                        :key="i"
-                        class="fa-star tw-w-6 tw-h-6 footer-icon"
-                        icon="star"
-                    /></span>
-                    <span
-                      class="tw-font-inter-regular tw-text-[1.125rem] tw-leading-[1.6875rem] 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]"
-                    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]"
-                        >{{ 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]"
-                        v-html="client.desktop_designation"
-                      ></span>
-                    </div>
-                  </div>
-                </div>
-              </swiper-slide>
-            </swiper>
-          </div>
+              </div>
+            </swiper-slide>
+          </swiper>
         </div>
       </div>
     </div>
+    <!-- ---------------------DESKTOP UI END------------------ -->
   </section>
 </template>
 
@@ -216,13 +155,12 @@ export default {
       activeIndex: 0,
       swiperRef: 0,
       imageUrl: "",
-
       clients: [
         {
           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 +169,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 +177,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 +185,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 +193,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.",
         },
@@ -267,9 +205,7 @@ export default {
       return Array(50).fill(this.clients).flat();
     },
   },
-  mounted() {
-    this.imageUrl = this.getImageUrl();
-  },
+
   methods: {
     getFirstWord(str) {
       const words = str.trim().split(" ");
diff --git a/vue-frontend/tailwind.config.cjs b/vue-frontend/tailwind.config.cjs
index 0fdfe9172..5bbc547f3 100755
--- a/vue-frontend/tailwind.config.cjs
+++ b/vue-frontend/tailwind.config.cjs
@@ -70,6 +70,7 @@ module.exports = {
         "inter-semibold": ["Inter-SemiBold"],
         "inter-regular": ["Inter-Regular"],
         "opensans-bold": ["Opensans-Bold"],
+        "opensans-semibold": ["Opensans-SemiBold"],
       },
       letterSpacing: {
         "extra-wider": "0.0625em",
@@ -187,7 +188,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%);",