diff --git a/nuxt-frontend/pages/android-app-development.vue b/nuxt-frontend/pages/android-app-development.vue
index f956d1b4d..987f7c5b8 100644
--- a/nuxt-frontend/pages/android-app-development.vue
+++ b/nuxt-frontend/pages/android-app-development.vue
@@ -4,8 +4,8 @@
     <div class="xll:bg-black-core/[90%] 3xl:bg-white" ref="landing">
       <LandingSection />
     </div>
-
-    <CaseStudy />
+    <DevelopmentSection />
+    <CaseStudy ref="casestudy" />
     <PinkCtaSection class="hidden lg:block" />
     <SuccessStorySection />
     <BlackCtaSection />
@@ -20,6 +20,7 @@
 import Header from "@/components/partials/NewHeader.vue";
 import config from "@/config.js";
 import LandingSection from "@/components/android-app-development/LandingSection.vue";
+import DevelopmentSection from "@/components/android-app-development/DevelopmentSection.vue";
 import { elementInViewPort } from "@/utils.js";
 import { defineAsyncComponent } from "vue";
 
@@ -50,6 +51,7 @@ const NewFooter = defineAsyncComponent(() =>
 const { $mixpanel } = useNuxtApp();
 
 const landingsection = ref(null);
+const developmentsection = ref(null);
 const casestudy = ref(null);
 const successstorysection = ref(null);
 const pinkctasection = ref(null);
@@ -71,6 +73,7 @@ useSeoMeta({
 let event = "";
 let events = {
   landing: "view_android_development_landing_section",
+  casestudy: "view_android_development_middle_sections",
   footer: "view_android_development_footer",
 };
 
@@ -79,6 +82,7 @@ let elements;
 onMounted(() => {
   elements = ref({
     landingsection: landingsection,
+    developmentsection: developmentsection,
     casestudy: casestudy,
     successstorysection: successstorysection,
     pinkctasection: pinkctasection,