diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/justly1-800w.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/justly1-800w.webp
new file mode 100644
index 000000000..4e9ea56d9
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/justly1-800w.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/justly2-800w.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/justly2-800w.webp
new file mode 100644
index 000000000..89396af9a
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/justly2-800w.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/luxe1-800w.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/luxe1-800w.webp
new file mode 100644
index 000000000..2063243fc
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/luxe1-800w.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/luxe2-800w.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/luxe2-800w.webp
new file mode 100644
index 000000000..7cdf170e5
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/luxe2-800w.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/justly1.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/justly1.webp
new file mode 100644
index 000000000..24c0a46d3
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/justly1.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/justly2.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/justly2.webp
new file mode 100644
index 000000000..a9b4f964b
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/justly2.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/luxeradio1.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/luxeradio1.webp
new file mode 100644
index 000000000..5768a62a0
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/luxeradio1.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/luxeradio2.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/luxeradio2.webp
new file mode 100644
index 000000000..2b1a506ff
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/luxeradio2.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/togness1.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/togness1.webp
new file mode 100644
index 000000000..24f98dc9f
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/togness1.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/togness2.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/togness2.webp
new file mode 100644
index 000000000..37286009f
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/mobile/togness2.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/togness1-800w.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/togness1-800w.webp
new file mode 100644
index 000000000..1d3cadb49
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/togness1-800w.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/casestudy/togness2-800w.webp b/vue-frontend/src/assets/images/ios-app-development/casestudy/togness2-800w.webp
new file mode 100644
index 000000000..5c6b16789
Binary files /dev/null and b/vue-frontend/src/assets/images/ios-app-development/casestudy/togness2-800w.webp differ
diff --git a/vue-frontend/src/components/ios-app-development/BlogSection.vue b/vue-frontend/src/components/ios-app-development/BlogSection.vue
index 63adb62f6..eb82f8caf 100644
--- a/vue-frontend/src/components/ios-app-development/BlogSection.vue
+++ b/vue-frontend/src/components/ios-app-development/BlogSection.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="tw-my-20 md:tw-mb-32 lg:tw-my-32 xll:tw-container">
     <div
-      class="tw-pb-4 md:tw-py-12 tw-text-center tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] md:tw-text-[2.65625rem] md:tw-leading-[3.796875rem] lg:tw-text-[3.4375rem] lg:tw-leading-[5.15625rem] tw-tracking-[-4%] xll:tw-py-24 tw-text-black-core/[0.87]"
+      class="tw-pb-4 md:tw-py-12 tw-text-center tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] md:tw-text-[2.65625rem] md:tw-leading-[3.796875rem] lg:tw-text-[3.4375rem] lg:tw-leading-[5.15625rem] tw-tracking-[-0.04rem] xll:tw-py-24 tw-text-black-core/[0.87]"
     >
       <span>Our Blogs</span>
     </div>
@@ -48,7 +48,7 @@
               class="=tw-w-80 tw-h-28 tw-bg-white tw-flex tw-flex-col tw-justify-center tw-px-8"
             >
               <h2
-                class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-4%] tw-text-black-core/[0.87]"
+                class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-0.04rem] tw-text-black-core/[0.87]"
               >
                 {{ blog.title }}
               </h2>
diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
new file mode 100644
index 000000000..3fad4404e
--- /dev/null
+++ b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -0,0 +1,375 @@
+<template>
+  <div
+    class="tw-my-16 xs:tw-my-24 md:tw-mt-24 xl:!tw-mt-60 md:!tw-mb-0 tw-flex tw-flex-col 3xl:tw-container"
+  >
+    <div
+      class="tw-container tw-mb-2.5 tw-flex tw-flex-col tw-text-center md:tw-mb-20"
+    >
+      <h2
+        class="tw-tracking-[-0.04rem] tw-mb-2.5 tw-font-opensans-bold tw-text-2xl tw-leading-9 tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[2.46875rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.359375rem] lg:tw-leading-[4.46875rem] xs:tw-mx-auto xs:tw-w-[71%]"
+      >
+        Case studies
+      </h2>
+      <span
+        class="tw-font-inter-regular tw-text-lg md:tw-text-xl tw-leading-[1.6875rem] md:tw-leading-[1.875rem] tw-text-black-core/[0.60] md:tw-font-inter-medium lg:tw-text-2xl lg:tw-leading-9 tw-w-11/12 2xl:tw-w-9/12 tw-mx-auto"
+        >Explore our case studies to witness how we've transformed our client's
+        ideas into successful iOS apps.</span
+      >
+    </div>
+    <!-- Mobile UI -->
+    <div class="md:tw-hidden tw-flex tw-flex-col">
+      <div
+        v-for="(portfolio, index) in portfolios"
+        :key="index"
+        class="tw-flex tw-flex-row tw-mt-14"
+        :class="portfolio.background"
+      >
+        <div
+          class="tw-basis-[50%] tw-flex"
+          :class="
+            index == 0 || index == 2
+              ? 'tw-items-end tw-justify-end xs:-tw-mr-6'
+              : ''
+          "
+        >
+          <img
+            :src="portfolio.image[0]"
+            :srcset="`${portfolio.image[0]} 400w`"
+            :alt="portfolio.title"
+            class="tw-w-[137px] xs:tw-w-[200px] xs:tw-h-[350px] tw-h-[297px] tw-object-cover"
+            loading="lazy"
+            :class="index == 1 ? 'tw-mt-32 xs:-tw-ml-6' : ''"
+          />
+        </div>
+        <div
+          class="tw-flex tw-flex-col tw-basis-[50%]"
+          :class="index == 1 ? 'tw-items-end' : ''"
+        >
+          <img
+            :src="portfolio.image[1]"
+            :srcset="`${portfolio.image[1]} 400w`"
+            :alt="portfolio.title"
+            class="tw-w-[137px] xs:tw-w-[200px] xs:tw-h-[350px] tw-h-[297px] tw-object-cover"
+            loading="lazy"
+          />
+          <div
+            class="tw-w-11/12 sm:tw-w-9/12 tw-flex tw-flex-col tw-ml-[10%] tw-pr-3.5 xs:tw-p-3"
+            :class="index == 1 ? 'tw-pl-3.5 tw-w-full' : ''"
+          >
+            <h2
+              class="tw-tracking-[0.04rem] tw-mb-2.5 tw-font-opensans-bold tw-text-2xl tw-leading-9 tw-text-black-core/[0.87]"
+            >
+              {{ portfolio.title }}
+            </h2>
+            <span
+              class="tw-font-inter-regular tw-text-lg tw-leading-[1.6875rem] tw-text-black-core/[0.60]"
+              >{{ portfolio.description }}</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Mobile UI END-->
+    <!-- Desktop UI -->
+
+    <div
+      id="stickyParent"
+      class="sticky-parent tw-h-[300vh] xll:tw-h-[250vh] 3xl:!tw-h-[220vh] tw-hidden md:tw-block"
+    >
+      <div
+        class="sticky tw-sticky tw-top-0 tw-max-h-full main tw-overflow-hidden"
+        :class="{ '!tw-top-[75px] xl:!tw-top-[40px]': isScrollingUp }"
+      >
+        <swiper
+          :direction="'vertical'"
+          :slidesPerView="1"
+          :centeredSlides="true"
+          :spaceBetween="0"
+          :speed="500"
+          :mousewheel="{
+            enabled: false,
+            releaseOnEdges: true,
+            sensitivity: 1,
+            thresholdDelta: 1,
+          }"
+          :touchReleaseOnEdges="true"
+          :modules="modules"
+          :allowTouchMove="false"
+          class="swiper-container tw-h-screen"
+          @swiper="setSwiperRef"
+          @slideChange="onSlideChange"
+        >
+          <swiper-slide v-for="(portfolio, index) in portfolios" :key="index">
+            <div
+              class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-screen"
+            >
+              <div
+                :class="portfolio.row1Background"
+                class="tw-flex tw-flex-col tw-justify-center !tw-basis-[40%] tw-justify-around tw-px-8"
+              >
+                <div class="tw-flex tw-justify-end tw-relative">
+                  <div
+                    :class="portfolio.row1Background"
+                    class="tw-absolute tw-top-8 lg:tw-top-4 xl:tw-top-8 tw-right-[-30%] lg:tw-right-[-25%] xl:tw-right-[-17%] 2xll:tw-right-[-18%] xll:tw-right-[-12%] 3xl:tw-right-[-18%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
+                  >
+                    <h2 class="title">
+                      {{ portfolio.title }}
+                    </h2>
+                  </div>
+                </div>
+                <div
+                  class="tw-w-[17rem] lg:tw-w-[19rem] xl:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-44 xl:tw-mt-72 description"
+                  :class="{ '!tw-mt-12 xl:!tw-mt-72': isScrollingUp }"
+                >
+                  <h2
+                    class="tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem]"
+                  >
+                    {{ portfolio.desktopDescription }}
+                  </h2>
+                  <div class="tw-mt-6">
+                    <span
+                      class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem]"
+                      >{{ portfolio.subDescription }}</span
+                    >
+                  </div>
+                </div>
+                <div
+                  class="tw-flex tw-justify-end tw-pr-[8%] 2xll:tw-pr-[14%] tw-cursor-pointer"
+                  :class="{ 'tw-mt-[-45%] xl:tw-mt-0': isScrollingUp }"
+                >
+                  <span
+                    @click="scrollToNext()"
+                    class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
+                    >SKIP</span
+                  >
+                </div>
+              </div>
+
+              <div
+                class="tw-flex tw-flex-row !tw-basis-[60%] tw-items-center tw-p-8 lg:tw-p-12 2xll:tw-p-20 tw-bg-white"
+                :class="portfolio.row2Background"
+              >
+                <div
+                  class="tw-basis-[50%] tw-mt-48 tw-flex tw-items-end tw-justify-end"
+                >
+                  <img
+                    :src="portfolio.image[2]"
+                    :srcset="`${portfolio.image[2]} 800w`"
+                    :alt="portfolio.title"
+                    class="image tw-w-[175px] tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
+                    loading="lazy"
+                  />
+                </div>
+                <div class="tw-hidden md:tw-block tw-relative">
+                  <div class="tw-flex tw-flex-col tw--mt-32 tw-basis-[50%]">
+                    <img
+                      :src="portfolio.image[3]"
+                      :srcset="`${portfolio.image[3]} 800w`"
+                      :alt="portfolio.title"
+                      class="image tw-w-[175px]main tw-h-[350px] lg:tw-w-[284px] lg:tw-h-[490px] xl:tw-h-[590px] tw-object-cover"
+                      loading="lazy"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="module">
+import { Pagination, Autoplay, Mousewheel } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import mobile_justly1 from "@/assets/images/ios-app-development/casestudy/mobile/justly1.webp";
+import mobile_justly2 from "@/assets/images/ios-app-development/casestudy/mobile/justly2.webp";
+import mobile_luxeradio1 from "@/assets/images/ios-app-development/casestudy/mobile/luxeradio1.webp";
+import mobile_luxeradio2 from "@/assets/images/ios-app-development/casestudy/mobile/luxeradio2.webp";
+import mobile_togness1 from "@/assets/images/ios-app-development/casestudy/mobile/togness1.webp";
+import mobile_togness2 from "@/assets/images/ios-app-development/casestudy/mobile/togness2.webp";
+
+import desktop_justly1 from "@/assets/images/ios-app-development/casestudy/justly1-800w.webp";
+import desktop_justly2 from "@/assets/images/ios-app-development/casestudy/justly2-800w.webp";
+import desktop_luxeradio1 from "@/assets/images/ios-app-development/casestudy/luxe1-800w.webp";
+import desktop_luxeradio2 from "@/assets/images/ios-app-development/casestudy/luxe2-800w.webp";
+import desktop_togness1 from "@/assets/images/ios-app-development/casestudy/togness1-800w.webp";
+import desktop_togness2 from "@/assets/images/ios-app-development/casestudy/togness2-800w.webp";
+export default {
+  data() {
+    return {
+      modules: [Pagination, Autoplay, Mousewheel],
+      swiper: null,
+      swiperRef: 0,
+      activeIndex: 0,
+      skipNext: true,
+      lastTouchY: null,
+      lastScrollY: 0,
+      isScrollingUp: false,
+      scrollPosition: 0,
+      lastSlideReached: false,
+      portfolios: [
+        {
+          title: "Justly",
+          image: [
+            mobile_justly1,
+            mobile_justly2,
+            desktop_justly1,
+            desktop_justly2,
+          ],
+          description: "Create systems to build your dream life",
+          background: "tw-bg-justly-pink-gradient-background",
+          row1Background: "tw-bg-[#ED722D]",
+          row2Background: "tw-bg-justly-radical-gradient",
+          desktopDescription: "Overcome depression by building habits",
+          subDescription:
+            "Justly aims to tackle loneliness, depression, and mental health through innovative solutions.",
+        },
+        {
+          title: "Luxeradio",
+          image: [
+            mobile_luxeradio1,
+            mobile_luxeradio2,
+            desktop_luxeradio1,
+            desktop_luxeradio2,
+          ],
+          description: "New personalized radio and modern art gallery.",
+          background:
+            "tw-flex-row-reverse tw-items-center tw-bg-luxeradio-yellow-gradient-background",
+          row1Background: "tw-bg-[#101010]",
+          row2Background: "tw-bg-luxeradio-radical-gradient",
+          desktopDescription: "A radio, music and podcast platform",
+          subDescription:
+            "Luxe Radio displays the best of Moroccan and international creation emphasizing taste , elegance.",
+        },
+        {
+          title: "Togness",
+          image: [
+            mobile_togness1,
+            mobile_togness2,
+            desktop_togness1,
+            desktop_togness2,
+          ],
+          description: "Easiest video editor & slideshow maker",
+          background: "tw-bg-togness-blue-gradient-background",
+          row1Background: "tw-bg-[#125EE3]",
+          row2Background: "tw-bg-togness-radical-gradient",
+          desktopDescription: "Photo editor and video maker app",
+          subDescription:
+            "Togness are create slideshows and add quotes and your own music for every special occassion of your life!",
+        },
+      ],
+    };
+  },
+  mounted() {
+    document.addEventListener("scroll", this.handleScroll);
+    document.addEventListener("wheel", this.handleWheel);
+    window.addEventListener("touchstart", this.handleTouchStart);
+    window.addEventListener("touchmove", this.handleTouchMove);
+    window.addEventListener("touchend", this.handleTouchEnd);
+    window.addEventListener("scroll", this.handleScrollTop);
+  },
+  unmounted() {
+    document.removeEventListener("wheel", this.handleWheel);
+    window.removeEventListener("touchstart", this.handleTouchStart);
+    window.removeEventListener("touchmove", this.handleTouchMove);
+    window.removeEventListener("touchend", this.handleTouchEnd);
+    window.removeEventListener("scroll", this.handleScrollTop);
+    document.removeEventListener("scroll", this.handleScroll);
+  },
+  methods: {
+    setSwiperRef(swiper) {
+      this.swiperRef = swiper;
+    },
+    // handle mouseScroll event
+    scrollDirectionIsUp(event) {
+      if (event.wheelDelta) {
+        return event.wheelDelta > 0;
+      }
+      return event.deltaY < 0;
+    },
+
+    handleWheel(event) {
+      if (this.scrollDirectionIsUp(event)) {
+        this.skipNext = false;
+      } else {
+        this.skipNext = true;
+      }
+    },
+    //handleTouch event
+    handleTouchStart(event) {
+      this.lastTouchY = event.touches[0].clientY;
+    },
+    handleTouchMove(event) {
+      if (this.lastTouchY !== null) {
+        const currentTouchY = event.touches[0].clientY;
+        if (currentTouchY > this.lastTouchY) {
+          this.skipNext = false;
+        } else if (currentTouchY < this.lastTouchY) {
+          this.skipNext = true;
+        }
+        this.lastTouchY = currentTouchY;
+      }
+    },
+    handleTouchEnd() {
+      this.lastTouchY = null;
+    },
+
+    scrollToNext() {
+      if (this.skipNext) {
+        this.$emit("scroll-to-next");
+      } else {
+        this.$emit("scroll-to-previous");
+      }
+    },
+    handleScrollTop() {
+      const stickyParent = document.getElementById("stickyParent");
+      const stickyTop = stickyParent.offsetTop;
+      let scrollTop = window.scrollY;
+      var position = stickyParent.getBoundingClientRect();
+
+      if (
+        window.pageYOffset >= stickyTop &&
+        position.bottom >=
+          (window.innerHeight || document.documentElement.clientHeight)
+      ) {
+        this.swiperRef.mousewheel.enable();
+        this.swiperRef.allowTouchMove = true;
+      } else {
+        this.swiperRef.mousewheel.disable();
+        this.swiperRef.allowTouchMove = false;
+      }
+      this.lastScrollY = scrollTop;
+    },
+    handleScroll() {
+      const windowHeight = window.innerHeight;
+      const lastSlide = document.querySelector(".main");
+      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,
+    SwiperSlide,
+  },
+};
+</script>
+<style lang="postcss">
+@import "swiper/css";
+@import "swiper/css/pagination";
+.swiper-container {
+  @apply tw-mx-0;
+}
+.swiper-slide-active .image,
+.swiper-slide-active .title,
+.swiper-slide-active .description {
+  @apply tw-animate-moveUp;
+}
+</style>
diff --git a/vue-frontend/src/components/ios-app-development/CtaSection.vue b/vue-frontend/src/components/ios-app-development/CtaSection.vue
index 4586c3c18..9231c2c67 100644
--- a/vue-frontend/src/components/ios-app-development/CtaSection.vue
+++ b/vue-frontend/src/components/ios-app-development/CtaSection.vue
@@ -16,7 +16,7 @@
         <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.0625rem] tw-tracking-[-4%] tw-text-black-core/[0.87]"
+              class="tw-font-inter-semibold tw-text-[1.375rem] tw-leading-[2.0625rem] tw-tracking-[-0.04rem] tw-text-black-core/[0.87]"
             >
               Let's Start a New Project Together
             </p>
diff --git a/vue-frontend/src/components/ios-app-development/FaqSection.vue b/vue-frontend/src/components/ios-app-development/FaqSection.vue
index e7aba020e..96fa189c9 100644
--- a/vue-frontend/src/components/ios-app-development/FaqSection.vue
+++ b/vue-frontend/src/components/ios-app-development/FaqSection.vue
@@ -26,7 +26,7 @@
                   >
                     <div class="faq-header tw-flex tw-flex-row tw-items-center">
                       <div
-                        class="faq-question tw-w-[90%] tw-p-[10px] tw-font-inter-semibold tw-tracking-[-4%] tw-text-lg tw-leading-[1.6875rem] md:tw-text-2xl lg:tw-text-[1.75rem] md:tw-leading-8 lg:tw-leading-[2.625rem]"
+                        class="faq-question tw-w-[90%] tw-p-[10px] tw-font-inter-semibold tw-tracking-[-0.04rem] tw-text-lg tw-leading-[1.6875rem] md:tw-text-2xl lg:tw-text-[1.75rem] md:tw-leading-8 lg:tw-leading-[2.625rem]"
                         :class="
                           openList && faq.id == currentIndex
                             ? 'v2-canopas-gradient-text footer-icon'
diff --git a/vue-frontend/src/components/ios-app-development/SuccessStory.vue b/vue-frontend/src/components/ios-app-development/SuccessStory.vue
index 48686f7bf..9f6db21ef 100644
--- a/vue-frontend/src/components/ios-app-development/SuccessStory.vue
+++ b/vue-frontend/src/components/ios-app-development/SuccessStory.vue
@@ -4,7 +4,7 @@
       class="tw-container md:tw-mt-36 lg:tw-mb-8 tw-mb-7 tw-mx-auto tw-text-center"
     >
       <span
-        class="tw-tracking-[-4%] tw-mb-2.5 tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] md:tw-hidden tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[2.65625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.796875rem] lg:tw-leading-[5.15625rem] xs:tw-mx-auto xs:tw-w-[71%]"
+        class="tw-tracking-[-0.04rem] tw-mb-2.5 tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] md:tw-hidden tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[2.65625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.796875rem] lg:tw-leading-[5.15625rem] xs:tw-mx-auto xs:tw-w-[71%]"
       >
         Success Stories</span
       >
@@ -44,7 +44,7 @@
               class="tw-mx-auto sm:tw-px-10 md:tw-px-6 lg:tw-px-4 xl:tw-px-24 tw-text-white tw-flex tw-flex-col tw-justify-between tw-items-center tw-object-center"
             >
               <div
-                class="tw-font-inter-semibold tw-text-lg tw-leading-[1.6875rem] tw-transition-all tw-ease tw-duration-500 tw-tracking-[-2%]"
+                class="tw-font-inter-semibold tw-text-lg tw-leading-[1.6875rem] tw-transition-all tw-ease tw-duration-500 tw-tracking-[-0.02rem]"
               >
                 {{ client.review }}
               </div>
@@ -80,10 +80,11 @@
       <div
         class="tw-w-2/5 tw-flex tw-justify-center tw-items-center tw-bg-[#F4F4F4] tw-rounded-tl-xl tw-rounded-bl-xl"
       >
-        <span
-          class="tw-text-[2.4375rem] tw-font-opensans-bold tw-w-3/4 2xl:tw-w-[65%] tw-mx-auto lg:tw-text-5xl tw-leading-[2.79375rem] lg:tw-leading-[3.9rem] !tw-tracking-[-4%] tw-text-black-core/[0.87]"
-          >What our clients says?</span
+        <h2
+          class="tw-text-[2.4375rem] tw-font-opensans-bold tw-w-3/4 2xl:tw-w-[65%] tw-mx-auto lg:tw-text-5xl tw-leading-[2.79375rem] lg:tw-leading-[3.9rem] !tw-tracking-[-0.04rem] tw-text-black-core/[0.87]"
         >
+          What our clients say!
+        </h2>
       </div>
 
       <div
diff --git a/vue-frontend/src/pages/ios-app-development.vue b/vue-frontend/src/pages/ios-app-development.vue
index 4fe8fadeb..e9915adf1 100644
--- a/vue-frontend/src/pages/ios-app-development.vue
+++ b/vue-frontend/src/pages/ios-app-development.vue
@@ -7,8 +7,13 @@
     </metainfo>
     <Header />
     <LandingSection ref="iosLanding" />
-    <DevelopmentSection ref="iosDevelopment" />
-    <CtaSection ref="iosCta1" />
+    <DevelopmentSection id="developmentSection" ref="iosDevelopment" />
+    <CaseStudySection
+      ref="iosCaseStudy"
+      v-on:scroll-to-next="scrollToCta"
+      v-on:scroll-to-previous="scrollToDevelopment"
+    />
+    <CtaSection id="ctasection" ref="iosCta1" />
     <SuccessStorySection ref="iosSuccessstory" />
     <BlogSection ref="iosblog" />
     <CtaSection2 ref="iosCta2" />
@@ -34,6 +39,9 @@ const BlogSection = defineAsyncComponent(() =>
 const FaqSection = defineAsyncComponent(() =>
   import("@/components/ios-app-development/FaqSection.vue"),
 );
+const CaseStudySection = defineAsyncComponent(() =>
+  import("@/components/ios-app-development/CaseStudySection.vue"),
+);
 const CtaSection = defineAsyncComponent(() =>
   import("@/components/ios-app-development/CtaSection.vue"),
 );
@@ -53,6 +61,7 @@ export default {
         iosDevelopment: "view_ios_app_development_section",
         iosSuccessstory: "view_ios_app_development_section",
         iosFaq: "view_ios_development_faq_section",
+        iosCaseStudy: "view_ios_CaseStudy_section",
         iosCta1: "view_cta_1_ios_app_development_section",
         iosblog: "view_ios_app_blog_section",
         iosCta2: "view_cta_2_ios_app_development_section",
@@ -86,6 +95,7 @@ export default {
     SuccessStorySection,
     BlogSection,
     FaqSection,
+    CaseStudySection,
     CtaSection,
     CtaSection2,
     NewFooter,
@@ -98,6 +108,16 @@ export default {
         this.mixpanel.track(event);
       }
     },
+    scrollToCta() {
+      var ctaDiv = document.getElementById("ctasection");
+      var top = ctaDiv.offsetTop;
+      window.scrollTo({ top: top, behavior: "smooth" });
+    },
+    scrollToDevelopment() {
+      var developmentDiv = document.getElementById("developmentSection");
+      var top = developmentDiv.offsetTop;
+      window.scrollTo({ top: top, behavior: "smooth" });
+    },
   },
   beforeRouteEnter(to, from, next) {
     if (!config.SHOW_IOS_APP_DEVELOPMENT_PAGE) {
diff --git a/vue-frontend/tailwind.config.cjs b/vue-frontend/tailwind.config.cjs
index 60f35c60b..2c72ff2dc 100755
--- a/vue-frontend/tailwind.config.cjs
+++ b/vue-frontend/tailwind.config.cjs
@@ -121,6 +121,14 @@ module.exports = {
             opacity: 0,
           },
         },
+        moveUp: {
+          "0%": {
+            transform: "translateY(3rem)",
+          },
+          "100%": {
+            transform: " translateY(0)",
+          },
+        },
         underlineOut: {
           "0%": { transform: "scaleX(0)" },
           "100%": { transform: "scaleX(1)" },
@@ -160,6 +168,7 @@ module.exports = {
         fadeSlide: "fadeIn 4s ease-in-out",
         fadeSlideOut: "fadeOut 2.5s ease-in-out",
         zoomEffect: "zoomEffect 0.5s ease forwards",
+        moveUp: "moveUp 1s ease-in-out",
       },
       zIndex: {
         "-1": "-1",
@@ -200,6 +209,18 @@ module.exports = {
           "linear-gradient(transparent calc(100% - 5px), #f77783 1px)",
         "light-pink-gradient-background":
           "linear-gradient(180deg, #FFFEFE 3.13%, #FFF6F0 47.54%, #FFF 95.59%)",
+        "togness-blue-gradient-background":
+          "linear-gradient(180deg, #FFFFFF 2.84%, #E7F2FF 40.99%, #E7F2FF 48.58%, #FFFFFF 97.07%)",
+        "justly-pink-gradient-background":
+          "linear-gradient(180deg, #FFFFFF 2.84%, #FFE1E4 35.92%, #FFE1E4 48.58%, #FFFFFF 97.07%)",
+        "luxeradio-yellow-gradient-background":
+          "linear-gradient(180deg, #FFFFFF 2.84%, #FEF1DE 40.99%, #FEF1DE 52.9%, #FFFFFF 97.07%)",
+        "justly-radical-gradient":
+          "radial-gradient(84% 76.48% at 50% 50%, #E4949C 0%, rgba(255, 191, 171, 0) 100%)",
+        "luxeradio-radical-gradient":
+          "radial-gradient(84% 76.48% at 50% 50%, #FEF1DE 0%, rgba(255, 191, 171, 0) 100%)",
+        "togness-radical-gradient":
+          "radial-gradient(84% 76.48% at 50% 50%, #E7F2FF 0%, rgba(255, 191, 171, 0) 100%)",
       },
     },
   },