diff --git a/vue-frontend/src/App.vue b/vue-frontend/src/App.vue
index 97c543d84..c7f0c9a57 100644
--- a/vue-frontend/src/App.vue
+++ b/vue-frontend/src/App.vue
@@ -128,35 +128,4 @@ a {
 .v2-button:hover > .fa {
   @apply tw-text-[#fff];
 }
-.gradient-btn {
-  @apply tw-mb-0 tw-ml-auto tw-mr-auto tw-mt-5 tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-from-[#ff835b] tw-to-[#f2709c] tw-p-4 tw-text-center tw-text-white tw-bg-gradient-[270.11deg] hover:tw-bg-gradient-to-r hover:tw-from-[#ff9472] hover:tw-via-[#ff909c] hover:tw-to-[#f2709c] hover:tw-shadow-[inset_2px_1000px_1px_#fff] active:tw-scale-[0.98] lg:tw-mb-0 lg:tw-ml-2 lg:tw-mr-2 lg:tw-mt-5 lg:tw-px-4 lg:tw-py-4;
-}
-.gradient-btn > span {
-  @apply tw-mx-1.5 tw-my-0 tw-font-bold;
-}
-.gradient-btn:hover > a > span,
-.gradient-btn:hover > span {
-  @apply tw-from-[#f2709c] tw-to-[#ff9472] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[89.88deg];
-}
-.white-btn > span {
-  @apply tw-from-[#FF835B] tw-to-[#F2709C] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[270.11deg];
-}
-.gradient-btn:hover > .fa,
-.gradient-btn:hover > .fas,
-.gradient-btn:hover > a > .fab {
-  @apply tw-text-[#f2709c];
-}
-.gradient-border-btn {
-  @apply tw-m-[5px] tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-bg-gradient-to-r tw-from-[#ff9472] tw-via-[#ff909c] tw-to-[#f2709c] tw-p-[1rem] tw-text-center tw-shadow-[inset_2px_1000px_1px_#fff] hover:tw-border hover:tw-border-solid hover:tw-border-transparent hover:tw-from-[#f2709c] hover:tw-to-[#ff9472] hover:tw-shadow-none hover:tw-bg-gradient-[91.53deg] active:tw-scale-[0.98];
-}
-.gradient-border-btn > a > .fab {
-  @apply tw-text-[#f2709c];
-}
-.gradient-border-btn:hover > .arrow,
-.gradient-border-btn:hover > .fa,
-.gradient-border-btn:hover > a > .fab,
-.gradient-border-btn:hover > span,
-.gradient-border-btn:hover > span > span {
-  @apply tw-text-white;
-}
 </style>
diff --git a/vue-frontend/src/assets/css/tailwind.css b/vue-frontend/src/assets/css/tailwind.css
index 72895308c..fdbde3465 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,
@@ -115,3 +122,78 @@
     animation-play-state: running;
   }
 }
+@layer components {
+  .header-1 {
+    @apply tw-font-opensans-bold tw-tracking-[-0.08rem] xl:tw-tracking-[-0.15rem]  tw-text-[2rem] tw-leading-[2.6rem] md:tw-text-[2.875rem]  md:tw-leading-[3.688rem] xl:tw-text-[3.75rem] xl:tw-leading-[4.875rem];
+  }
+  .header-2 {
+    @apply tw-font-opensans-bold tw-tracking-[-0.08rem] xl:tw-tracking-[-0.12rem] tw-text-[1.5rem] tw-leading-[2.25rem] md:tw-text-[2.25rem]  md:tw-leading-[2.938rem] xl:tw-text-[3rem] xl:tw-leading-[3.9rem];
+  }
+  .header-3 {
+    @apply tw-font-opensans-semibold tw-tracking-[-0.08rem] tw-text-[1.25rem] tw-leading-[1.875rem] md:tw-text-[1.625rem]  md:tw-leading-[2.313rem] xl:tw-text-[2rem] xl:tw-leading-[3rem];
+  }
+  .sub-h1-regular {
+    @apply tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-text-[1.313rem]  md:tw-leading-[1.813rem] xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem] tw-font-inter-regular;
+  }
+  .sub-h1-semibold {
+    @apply tw-text-[1.125rem] tw-leading-[1.688rem] md:tw-text-[1.313rem]  md:tw-leading-[1.813rem]  xl:tw-text-[1.5rem] xl:tw-leading-[2.25rem]  tw-font-inter-semibold;
+  }
+  .sub-h2-medium {
+    @apply xl:tw-text-[1.375rem] xl:tw-leading-[2.063rem] tw-font-inter-medium;
+  }
+  .sub-h3-regular {
+    @apply tw-text-base xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem] tw-font-inter-regular;
+  }
+  .sub-h3-medium {
+    @apply tw-text-base xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem] tw-font-inter-medium;
+  }
+  .sub-h3-semibold {
+    @apply tw-text-base xl:tw-text-[1.25rem] xl:tw-leading-[1.875rem] tw-font-inter-semibold;
+  }
+  .sub-h4-regular {
+    @apply tw-font-inter-regular tw-text-[0.75rem] tw-leading-[1.125rem] xl:tw-text-[1.125rem] xl:tw-leading-[1.688rem];
+  }
+  .sub-h4-semibold {
+    @apply tw-font-inter-semibold tw-text-[0.75rem] tw-leading-[1.125rem] xl:tw-text-[1.125rem] xl:tw-leading-[1.688rem];
+  }
+  .primary-btn {
+    @apply tw-h-12  tw-mx-auto tw-flex tw-w-max tw-items-center tw-rounded-xl tw-py-3 tw-px-6 tw-text-center;
+  }
+  .gradient-border-btn {
+    @apply tw-m-[5px] tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-bg-gradient-to-r tw-from-[#ff9472] tw-via-[#ff909c] tw-to-[#f2709c] tw-p-[1rem] tw-text-center tw-shadow-[inset_2px_1000px_1px_#fff] hover:tw-border hover:tw-border-solid hover:tw-border-transparent hover:tw-from-[#f2709c] hover:tw-to-[#ff9472] hover:tw-shadow-none hover:tw-bg-gradient-[91.53deg] active:tw-scale-[0.98];
+  }
+  .gradient-border-btn > a > .fab {
+    @apply tw-text-[#f2709c];
+  }
+  .gradient-border-btn:hover > .arrow,
+  .gradient-border-btn:hover > .fa,
+  .gradient-border-btn:hover > a > .fab,
+  .gradient-border-btn:hover > span,
+  .gradient-border-btn:hover > span > span {
+    @apply tw-text-white;
+  }
+  .white-btn > span {
+    @apply tw-from-[#FF835B] tw-to-[#F2709C] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[270.11deg];
+  }
+  .gradient-btn {
+    @apply tw-mb-0 tw-ml-auto tw-mr-auto tw-mt-5 tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-from-[#ff835b] tw-to-[#f2709c] tw-p-4 tw-text-center tw-text-white tw-bg-gradient-[270.11deg] hover:tw-bg-gradient-to-r hover:tw-from-[#ff9472] hover:tw-via-[#ff909c] hover:tw-to-[#f2709c] hover:tw-shadow-[inset_2px_1000px_1px_#fff] active:tw-scale-[0.98] lg:tw-mb-0 lg:tw-ml-2 lg:tw-mr-2 lg:tw-mt-5 lg:tw-px-4 lg:tw-py-4;
+  }
+  .gradient-btn > span {
+    @apply tw-mx-1.5 tw-my-0 tw-font-bold;
+  }
+  .gradient-btn:hover > a > span,
+  .gradient-btn:hover > span {
+    @apply tw-from-[#f2709c] tw-to-[#ff9472] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[89.88deg];
+  }
+
+  .gradient-btn:hover > .fa,
+  .gradient-btn:hover > .fas,
+  .gradient-btn:hover > a > .fab {
+    @apply tw-text-[#f2709c];
+  }
+  .cta-button:hover > span,
+  .portfolio-nav:hover > span,
+  .v2-button:hover > .fa {
+    @apply tw-text-[#fff];
+  }
+}
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..cd94ac0e4 100644
--- a/vue-frontend/src/components/android-app-development/BlackCtaSection.vue
+++ b/vue-frontend/src/components/android-app-development/BlackCtaSection.vue
@@ -1,40 +1,31 @@
 <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 header-1">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] sub-h1-regular md:tw-my-4">
+          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="gradient-btn primary-btn"
           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]"
-            >Let's Chat
-          </span>
+          <span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
         </router-link>
       </div>
     </div>
diff --git a/vue-frontend/src/components/android-app-development/BlogSection.vue b/vue-frontend/src/components/android-app-development/BlogSection.vue
index 51b45af35..8dc548288 100644
--- a/vue-frontend/src/components/android-app-development/BlogSection.vue
+++ b/vue-frontend/src/components/android-app-development/BlogSection.vue
@@ -1,20 +1,14 @@
 <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]"
-      >
-        Our Blogs
-      </p>
-      <div class="blog tw-mt-8 tw-block md:tw-hidden">
+      <p class="tw-text-center header-2 tw-text-black-core/[0.87]">Our blogs</p>
+      <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,20 +18,20 @@
             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]"
-                >
+                <p class="tw-mt-3 tw-text-black-core/[0.60]">
                   {{ blog.publishDate }}
                 </p>
                 <a
@@ -46,7 +40,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 sub-h1-semibold tw-text-black-core/[0.87]"
                   >
                     {{ blog.title }}
                   </p>
@@ -56,20 +50,15 @@
           </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]"
-      >
-        Our Blogs
+      <p class="tw-mb-8 tw-text-center header-2 tw-text-black-core/[0.87]">
+        Our blogs
       </p>
       <div class="tw-flex tw-flex-row tw-space-x-5 tw-space-y-1">
         <div
@@ -89,7 +78,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 +107,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 +139,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 +155,7 @@
         </div>
       </div>
     </div>
-    <!-- Desktop UI end -->
+    <!-- ---------------------DESKTOP UI END------------------ -->
   </section>
 </template>
 
@@ -196,7 +185,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="header-3 tw-text-black-core/[0.87]">Android<span><br><span class="sub-h1-regular tw-text-black-core/[0.87]">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 +194,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="header-3 tw-text-white">Jetpack Compose</span><br><span class="tw-text-white sub-h1-regular">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 +203,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 sub-h1-regular">Keyboard Handling In<br> <span class="header-3 tw-text-white">Jetpack Compose</span><br><span class="tw-text-white sub-h1-regular">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 +213,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="header-3 tw-text-white">Retrofit</span> <br><span class="tw-text-white sub-h1-regular">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 +224,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="header-3 tw-text-black-core/[0.87]">Android</span><br><span class=" tw-text-black-core/[0.87] sub-h1-regular">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 +245,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..4caeabc07 100644
--- a/vue-frontend/src/components/android-app-development/CaseStudySection.vue
+++ b/vue-frontend/src/components/android-app-development/CaseStudySection.vue
@@ -1,24 +1,21 @@
 <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="header-2 tw-text-black-core-[0.87]">Case studies</span>
         <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
-        >
-        <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 sub-h1-regular 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 +28,19 @@
             :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="header-2 tw-text-black-core/[0.87]">{{
+              item.title
+            }}</span>
             <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-mt-2 sub-h3-regular tw-text-black-core/[0.6]"
               v-html="item.content"
             ></span>
           </div>
@@ -53,46 +49,37 @@
       <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]"
-            v-html="item.content"
-          ></span>
-          <div class="tw-mt-4 tw-flex tw-flex-wrap tw-justify-center">
+          <span class="sub-h3-regular" v-html="item.content"></span>
+          <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 primary-btn 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]"
-                >Inquire Now</span
-              >
+              <span class="sub-h3-semibold">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,19 +92,18 @@
         :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">
-                <span
-                  class="v2-canopas-gradient-text tw-text-left tw-font-inter-medium tw-text-[1.5rem] tw-leading-[1.816rem]"
-                >
+              <div>
+                <span class="tw-text-[#FF9472] tw-text-left sub-h3-semibold">
                   {{ item.title }}
                 </span>
               </div>
@@ -128,12 +114,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 header-3 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] sub-h3-medium"
                 v-html="item.description"
               ></span>
 
@@ -149,37 +135,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 header-3 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] sub-h3-regular"
                     >
                       <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 header-3 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] sub-h3-regular"
                     >
                       <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 header-3 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] sub-h3-regular"
                     >
                       <span>Monthly Users</span>
                     </div>
@@ -203,8 +185,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 +222,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 +309,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="header-2">New Project</span> Together`,
           images: [cta_400w, cta_800w],
           className: "tw-text-center ",
           textalign:
@@ -325,3 +325,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..c5c5d7558 100644
--- a/vue-frontend/src/components/android-app-development/CtaSection.vue
+++ b/vue-frontend/src/components/android-app-development/CtaSection.vue
@@ -1,37 +1,66 @@
 <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-text-black-core/[0.87] header-1"
       >
-        <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="gradient-btn primary-btn"
           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="sub-h3-semibold">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/[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-text-black-core/[0.87] header-1 lg:!tw-w-[47%] 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="gradient-btn primary-btn"
+            to="/contact"
+            @click.native="mixpanel.track('tap_android_development_cta')"
+          >
+            <span class="sub-h4-semibold">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..5e36868a2 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="header-2 tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full xs:tw-mx-auto xs:tw-w-[71%]"
+        >
+          Android app development services</span
+        >
+        <span
+          class="tw-mt-4 md:tw-mt-6 sub-h1-regular tw-text-black-core/[0.60]"
+          >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"
             >
@@ -167,14 +86,11 @@
                 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
-              >
+              <span class="header-3 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]"
-            >
+            <div class="sub-h3-regular tw-text-black-core/[0.60] md:tw-p-4">
               <ul class="tw-pl-8 tw-pr-4 md:tw-hidden">
                 <li
                   v-for="list in item.description"
@@ -184,18 +100,82 @@
                   {{ 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 header-1 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] header-3"
+                  >{{ item.title }}</span
+                >
+              </div>
+              <div class="tw-text-black-core/[0.6] sub-h3-medium">
+                <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 +185,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 +208,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 +220,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 +232,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 +244,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 +258,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 +269,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..3e9ebb1fe 100644
--- a/vue-frontend/src/components/android-app-development/FaqSection.vue
+++ b/vue-frontend/src/components/android-app-development/FaqSection.vue
@@ -1,18 +1,17 @@
 <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">
-          <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
+        <div class="tw-text-center">
+          <span class="header-2 tw-text-black-core/[0.87]"
+            >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 +20,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 +36,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%] sub-h1-semibold"
                         :class="
                           openList && faq.id == currentIndex
                             ? 'v2-canopas-gradient-text footer-icon'
@@ -76,7 +73,7 @@
                         :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]"
+                          class="faq-answer tw-mt-4 tw-w-[90%] tw-animate-fadeIn sub-h3-regular tw-text-black-core/[0.87]"
                           v-html="faq.answer"
                         ></div>
                       </div>
@@ -86,41 +83,129 @@
                 </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%] sub-h1-semibold"
+                          :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 sub-h3-regular tw-text-black-core/[0.87]"
+                            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 primary-btn"
+                @click="showAdditionalFAQs = !showAdditionalFAQs"
+              >
+                <span class="tw-text-white sub-h3-semibold"
+                  >{{ 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 sub-h4-semibold">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 sub-h4-semibold"
+          >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 +218,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..4e35b2783 100644
--- a/vue-frontend/src/components/android-app-development/LandingSection.vue
+++ b/vue-frontend/src/components/android-app-development/LandingSection.vue
@@ -15,17 +15,13 @@
       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]"
-      >
-        Android App<br />
-        Development Company
+      <h1 class="header-1 tw-text-white">
+        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]"
-      >
+      <p class="tw-mt-4 md:tw-mt-6 sub-h1-regular tw-text-white/[0.80]">
         We create bespoke Android applications known for their supreme
         performance, unwavering security, and utmost reliability. With an
         unshakable commitment, our team curates unique, captivating apps to
@@ -33,15 +29,14 @@
       </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 primary-btn 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]"
+          <span class="sub-h3-semibold xl:sub-h4-semibold"
             >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..ebf150c3d 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,41 +7,34 @@
       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]"
-          >
-            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]"
-          >
+          <p class="header-2">Whether you need...</p>
+          <ul class="tw-pt-6 sub-h1-semibold">
             <li v-for="reason in reasons" :key="reason" class="tw-flex">
               <span class="tw-pr-1">*</span>
               <div class="sm:tw-w-[90%]">{{ reason }}</div>
             </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 sub-h3-regular 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 primary-btn tw-border tw-border-solid tw-border-white tw-bg-white hover:tw-bg-transparent active:tw-scale-[0.98]"
           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]"
+          <span class="sub-h4-semibold v2-canopas-gradient-text"
             >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..327970514 100644
--- a/vue-frontend/src/components/android-app-development/SuccessStorySection.vue
+++ b/vue-frontend/src/components/android-app-development/SuccessStorySection.vue
@@ -1,12 +1,10 @@
 <template>
   <section>
-    <div class="div tw-relative tw-mt-10 tw-mb-20">
-      <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]"
-      >
-        Success Stories
+    <div class="div tw-relative tw-mt-16 md:tw-mt-40 xl:tw-mt-60">
+      <h2 class="sm:tw-pb-10 tw-text-center header-2 tw-text-black-core/[0.87]">
+        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,29 +34,28 @@
               <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] sub-h1-semibold 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] sub-h3-regular"
                       >{{ 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]"
-                      >{{ client.designation }}</span
-                    >
+                    <span class="sub-h4-regular tw-text-black-core/[0.6]">{{
+                      client.designation
+                    }}</span>
                   </div>
                 </div>
               </div>
@@ -69,134 +66,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 header-3 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] sub-h2-medium"
+                    >{{ client.name }}</span
                   >
+                  <span
+                    class="tw-mt-1 sub-h4-regular 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 +152,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 +166,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 +174,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 +182,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 +190,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 +202,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%);",