diff --git a/vue-frontend/src/assets/css/tailwind.css b/vue-frontend/src/assets/css/tailwind.css
index fdbde3465..4cac11da5 100644
--- a/vue-frontend/src/assets/css/tailwind.css
+++ b/vue-frontend/src/assets/css/tailwind.css
@@ -176,7 +176,7 @@
     @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;
+    @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-to-[#ff835b] tw-from-[#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;
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/activeconsultation.webp b/vue-frontend/src/assets/images/ios-app-development/development/activeconsultation.webp
index 9ad76a4ce..ee70a3062 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/activeconsultation.webp and b/vue-frontend/src/assets/images/ios-app-development/development/activeconsultation.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/activedeployment.webp b/vue-frontend/src/assets/images/ios-app-development/development/activedeployment.webp
index 8afaad52d..a6033becb 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/activedeployment.webp and b/vue-frontend/src/assets/images/ios-app-development/development/activedeployment.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/activedesign.webp b/vue-frontend/src/assets/images/ios-app-development/development/activedesign.webp
index db9bc8a2d..b3930fcfb 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/activedesign.webp and b/vue-frontend/src/assets/images/ios-app-development/development/activedesign.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/activedevelopment.webp b/vue-frontend/src/assets/images/ios-app-development/development/activedevelopment.webp
index 6490a1577..cd5920f01 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/activedevelopment.webp and b/vue-frontend/src/assets/images/ios-app-development/development/activedevelopment.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/activemaintenance.webp b/vue-frontend/src/assets/images/ios-app-development/development/activemaintenance.webp
index 6ebd79c82..08da0fc02 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/activemaintenance.webp and b/vue-frontend/src/assets/images/ios-app-development/development/activemaintenance.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/consultation.webp b/vue-frontend/src/assets/images/ios-app-development/development/consultation.webp
index 966efd3c5..e07977ff0 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/consultation.webp and b/vue-frontend/src/assets/images/ios-app-development/development/consultation.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/deployment.webp b/vue-frontend/src/assets/images/ios-app-development/development/deployment.webp
index c1b62e52c..fda1ca6e3 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/deployment.webp and b/vue-frontend/src/assets/images/ios-app-development/development/deployment.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/design.webp b/vue-frontend/src/assets/images/ios-app-development/development/design.webp
index 0cbdd7f90..835d92049 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/design.webp and b/vue-frontend/src/assets/images/ios-app-development/development/design.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/development.webp b/vue-frontend/src/assets/images/ios-app-development/development/development.webp
index 5fc9413ed..4af957b3a 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/development.webp and b/vue-frontend/src/assets/images/ios-app-development/development/development.webp differ
diff --git a/vue-frontend/src/assets/images/ios-app-development/development/maintenance.webp b/vue-frontend/src/assets/images/ios-app-development/development/maintenance.webp
index 7c993067f..c0f68efb4 100644
Binary files a/vue-frontend/src/assets/images/ios-app-development/development/maintenance.webp and b/vue-frontend/src/assets/images/ios-app-development/development/maintenance.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 eb82f8caf..ea4c18603 100644
--- a/vue-frontend/src/components/ios-app-development/BlogSection.vue
+++ b/vue-frontend/src/components/ios-app-development/BlogSection.vue
@@ -1,9 +1,11 @@
 <template>
-  <section class="tw-my-20 md:tw-mb-32 lg:tw-my-32 xll:tw-container">
+  <section
+    class="tw-my-16 md:tw-mb-32 lg:tw-my-32 xll:tw-container 3xl:tw-outer-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-[-0.04rem] xll:tw-py-24 tw-text-black-core/[0.87]"
+      class="tw-pb-4 md:tw-pb-12 tw-text-center header-2 xll:tw-py-24 tw-text-black-core/[0.87]"
     >
-      <span>Our Blogs</span>
+      <span>Our blogs</span>
     </div>
     <!-- Mobile UI start -->
     <div class="tw-mt-8 tw-block md:tw-hidden">
@@ -45,17 +47,13 @@
             />
             <div
               @click="openBlog(blog.link, 'tap_ios_blog_section')"
-              class="=tw-w-80 tw-h-28 tw-bg-white tw-flex tw-flex-col tw-justify-center tw-px-8"
+              class="=tw-w-80 tw-h-28 tw-bg-white tw-flex tw-flex-col tw-justify-center tw-p-8"
             >
-              <h2
-                class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-0.04rem] tw-text-black-core/[0.87]"
-              >
+              <h2 class="sub-h1-semibold">
                 {{ blog.title }}
               </h2>
 
-              <span
-                class="tw-mt-2 tw-font-inter-regular tw-text-sm tw-tracking-[-0.72px] lg:tw-leading-[1.3125rem] v2-canopas-gradient-text"
-              >
+              <span class="tw-mt-2 tw-text-black-core/[0.60] sub-h4-semibold">
                 {{ blog.readTime }}
               </span>
             </div>
@@ -114,13 +112,11 @@
           <div>
             <p
               @click="openBlog(blog.link, 'tap_ios_blog_section')"
-              class="tw-mt-2 tw-font-inter-semibold tw-text-2xl lg:tw-text-[2.125rem] tw-w-full lg:tw-leading-[3.1875rem] !tw-tracking-[-4%] tw-text-black-core/[0.87]"
+              class="tw-mt-6 header-3 tw-w-full !tw-tracking-[-4%] tw-text-black-core/[0.87]"
             >
               {{ blog.title }}
             </p>
-            <p
-              class="tw-mt-2 tw-font-inter-medium tw-text-base lg:tw-text-lg tw-tracking-[-0.72px] lg:tw-leading-[1.125rem] tw-text-black-core/[0.60]"
-            >
+            <p class="tw-mt-6 sub-h4-regular tw-text-black-core/[0.60]">
               {{ blog.readTime }}
             </p>
           </div>
diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
index 3fad4404e..a734f3af1 100644
--- a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
+++ b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -1,23 +1,23 @@
 <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"
+    class="tw-mt-16 xs:tw-mt-24 md:tw-mt-24 xl:!tw-mt-60 md:!tw-mb-0 tw-flex tw-flex-col 3xl:tw-outer-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%]"
+        class="header-2 tw-mb-2.5 tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full 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"
+        class="sub-h1-regular tw-text-black-core/[0.60] 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 class="lg:tw-hidden tw-flex tw-flex-col tw-mb-24 md:tw-mb-36">
       <div
         v-for="(portfolio, index) in portfolios"
         :key="index"
@@ -56,15 +56,12 @@
             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]"
-            >
+            <h2 class="tw-mb-2.5 header-2">
               {{ 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
-            >
+            <span class="sub-h1-regular tw-text-black-core/[0.60]">{{
+              portfolio.description
+            }}</span>
           </div>
         </div>
       </div>
@@ -74,7 +71,7 @@
 
     <div
       id="stickyParent"
-      class="sticky-parent tw-h-[300vh] xll:tw-h-[250vh] 3xl:!tw-h-[220vh] tw-hidden md:tw-block"
+      class="sticky-parent tw-h-[300vh] xll:tw-h-[240vh] 3xl:!tw-h-[220vh] tw-hidden lg:tw-block"
     >
       <div
         class="sticky tw-sticky tw-top-0 tw-max-h-full main tw-overflow-hidden"
@@ -110,9 +107,9 @@
                 <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"
+                    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-[-13%] 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">
+                    <h2 class="header-1 title">
                       {{ portfolio.title }}
                     </h2>
                   </div>
@@ -121,16 +118,13 @@
                   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]"
-                  >
+                  <h2 class="header-2 tw-text-[#FFFFFF]">
                     {{ 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
-                    >
+                    <span class="sub-h3-semibold tw-text-[#FFFFFF]/[0.80]">{{
+                      portfolio.subDescription
+                    }}</span>
                   </div>
                 </div>
                 <div
@@ -139,7 +133,7 @@
                 >
                   <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"
+                    class="tw-text-[#FFFFFF]/[0.80] tw-mt-6 sub-h3-semibold"
                     >SKIP</span
                   >
                 </div>
diff --git a/vue-frontend/src/components/ios-app-development/CtaSection.vue b/vue-frontend/src/components/ios-app-development/CtaSection.vue
index 9231c2c67..26d85eef4 100644
--- a/vue-frontend/src/components/ios-app-development/CtaSection.vue
+++ b/vue-frontend/src/components/ios-app-development/CtaSection.vue
@@ -1,8 +1,6 @@
 <template>
   <section>
-    <div
-      class="tw-relative tw-mb-16 tw-h-48 md:tw-h-72 xll:tw-h-[30rem] md:tw-hidden"
-    >
+    <div class="tw-relative tw-mb-16 tw-h-[217px] md:tw-h-[376px] lg:tw-hidden">
       <img
         :src="BackgroundImage[0]"
         :srcset="`${BackgroundImage[0]} 400w`"
@@ -11,25 +9,23 @@
         loading="lazy"
       />
       <div
-        class="tw-container tw-absolute tw-top-4 tw-w-full tw-p-4 tw-left-[2%] sm:tw-left-[13%] xs:tw-p-8 tw-text-center sm:tw-w-[79%]"
+        class="tw-container tw-absolute tw-top-0 md:tw-top-[17%] tw-w-full tw-p-4 tw-left-[2%] sm:tw-left-[13%] xs:tw-p-8 tw-text-center sm:tw-w-[79%]"
       >
         <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-[-0.04rem] tw-text-black-core/[0.87]"
-            >
+            <p class="header-1 tw-text-black-core/[0.87]">
               Let's Start a New Project Together
             </p>
           </div>
         </div>
         <div class="tw-mx-auto tw-mt-4">
           <router-link
-            class="gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-text-[#FFF] tw-w-max tw-items-center tw-rounded-full tw-p-3 tw-px-7 tw-text-center"
+            class="gradient-btn primary-btn tw-m-0 tw-mx-auto tw-flex tw-text-[#FFF] tw-w-max tw-items-center tw-p-3 tw-px-7 tw-text-center"
             to="/contact"
             @click.native="mixpanel.track('tap_ios_development_cta')"
           >
             <span
-              class="tw-mr-2.5 tw-font-inter-semibold tw-text-base tw-leading-[1.21rem] md:tw-block"
+              class="tw-mr-2.5 sub-h3-semibold xl:sub-h4-semibold lg:tw-block"
               >Contact Us
             </span>
           </router-link>
@@ -38,7 +34,7 @@
     </div>
     <!-- Desktop view start -->
     <div
-      class="tw-relative tw-mb-16 tw-h-80 lg:tw-h-[476px] tw-hidden md:tw-block"
+      class="tw-relative tw-mb-16 tw-h-80 lg:tw-h-[476px] 3xl:tw-outer-container tw-hidden lg:tw-block"
     >
       <img
         :src="BackgroundImage[1]"
@@ -54,23 +50,18 @@
           <div
             class="tw-w-[95%] tw-py-5 tw-text-white xl:tw-m-auto 2xl:tw-w-4/5"
           >
-            <p
-              class="tw-font-inter-bold tw-text-[2.188rem] tw-leading-[2.625rem] lg:tw-text-[3.4375rem] lg:tw-leading-[5.15625rem]"
-            >
+            <p class="header-1">
               Are you ready to take your business app to the next level?
             </p>
           </div>
         </div>
         <div class="tw-mx-auto tw-mt-4">
           <router-link
-            class="gradient-btn consultation-btn tw-m-0 tw-mx-auto tw-flex tw-text-[#FFF] tw-w-max tw-items-center tw-rounded-full tw-p-3 tw-px-7 tw-text-center"
+            class="gradient-btn primary-btn tw-m-0 tw-mx-auto tw-flex tw-text-[#FFF] tw-w-max tw-items-center tw-p-3 tw-px-7"
             to="/contact"
             @click.native="mixpanel.track('tap_ios_development_cta')"
           >
-            <span
-              class="tw-mr-2.5 tw-font-inter-medium tw-text-base tw-leading-[1.21rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.436875rem]"
-              >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/ios-app-development/CtaSection2.vue b/vue-frontend/src/components/ios-app-development/CtaSection2.vue
index 104f9fc53..66a63595c 100644
--- a/vue-frontend/src/components/ios-app-development/CtaSection2.vue
+++ b/vue-frontend/src/components/ios-app-development/CtaSection2.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw-relative tw-mb-16 tw-h-48 md:tw-h-72 xll:tw-h-[30rem] tw-bg-gradient-to-l tw-from-[#FF835B]/[10%] tw-to-[#F2709C]/[10%]"
+    class="3xl:tw-outer-container tw-relative tw-mb-16 tw-h-[217px] md:tw-h-[275px] lg:tw-mt-60 lg:tw-h-[476px] tw-bg-gradient-to-l tw-from-[#FF835B]/[10%] tw-to-[#F2709C]/[10%]"
   >
     <img
       :src="BackgroundImage[0]"
@@ -12,29 +12,24 @@
     <div
       class="tw-container tw-absolute tw-top-[1.2rem] tw-w-full tw-p-4 tw-text-center tw-text-black-core/[0.87] md:tw-left-0 md:tw-top-1/2 md:tw-top-16 md:tw--mt-6 md:tw-text-center lg:!tw-left-[50%] lg:!tw-top-[57%] 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%]"
     >
-      <div class="tw-flex tw-w-full">
+      <div class="tw-flex tw-w-full lg:tw-mb-10">
         <div class="tw-m-auto">
-          <p
-            class="tw-font-inter-semibold tw-text-[1.375rem] tw-leading-[2.0625rem] md:tw-font-inter-bold md:tw-text-[2.40625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.11125rem] lg:tw-leading-[4.16rem]"
-          >
+          <p class="header-1 tw-text-black-core/[0.87] tw-mb-4 lg:tw-mb-6">
             Have an app idea?
           </p>
 
-          <div
-            class="tw-font-inter-regular tw-text-base tw-leading-6 md:tw-my-4 md:tw-font-inter-medium md:tw-text-xl md:tw-leading-[1.875rem] lg:tw-text-2xl lg:tw-leading-9"
-          >
+          <div class="sub-h1-regular tw-text-black-core/[0.60]">
             See if we can make it a reality.
           </div>
         </div>
       </div>
       <div class="tw-mx-auto tw-mt-4">
         <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 tw-m-0 tw-mx-auto tw-flex tw-w-max tw-items-center tw-p-3 tw-px-7 tw-text-center"
           to="/contact"
           @click.native="mixpanel.track('tap_ios_development_cta')"
         >
-          <span
-            class="tw-mr-2.5 tw-font-inter-medium tw-text-base tw-leading-[1.21rem] md:tw-block md:tw-text-[1.09375rem] md:tw-leading-[1.3125rem] lg:tw-text-[1.1875rem] lg:tw-leading-[1.4375rem]"
+          <span class="tw-mr-2.5 sub-h3-semibold xl:sub-h4-semibold"
             >Let's Chat
           </span>
         </router-link>
diff --git a/vue-frontend/src/components/ios-app-development/DevelopmentSection.vue b/vue-frontend/src/components/ios-app-development/DevelopmentSection.vue
index dbba4e16c..9f16da5dc 100644
--- a/vue-frontend/src/components/ios-app-development/DevelopmentSection.vue
+++ b/vue-frontend/src/components/ios-app-development/DevelopmentSection.vue
@@ -1,20 +1,25 @@
 <template>
-  <div class="tw-my-16 md:tw-my-24 tw-flex tw-flex-col xll:tw-container">
-    <div class="tw-container tw-mb-2.5 tw-flex tw-flex-col tw-text-center">
+  <div
+    class="tw-my-16 md:tw-my-24 lg:tw-my-60 3xl:tw-my-[264px] tw-flex tw-flex-col xll:tw-container 3xl:tw-outer-container"
+  >
+    <div
+      class="tw-container tw-mb-2.5 md:tw-mb-7 tw-flex tw-flex-col tw-text-center"
+    >
       <span
-        class="tw-tracking-[-1.2px] tw-mb-2.5 tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] 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-mb-2.5 lg:tw-mb-6 tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full xs:tw-mx-auto header-2"
       >
-        iOS App Development Services</span
+        iOS app <br class="lg:tw-hidden" />
+        development services</span
       >
       <span
-        class="tw-font-inter-regular tw-text-base md:tw-text-xl tw-leading-6 md:tw-leading-[1.875rem] tw-text-black-core/[0.87] 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"
+        class="sub-h1-regular tw-text-black-core/[0.60] tw-w-11/12 2xl:tw-w-9/12 tw-mx-auto"
         >With a blend of robust technology, intuitive designs, and innovative
         strategies, our team can help you craft high-quality, standout
         user-friendly apps that drive business growth and customer
         engagement.</span
       >
     </div>
-    <div class="swiper-content tw-mt-4 md:tw-hidden">
+    <div class="swiper-content tw-mt-4 lg:tw-hidden">
       <swiper
         :slidesPerView="1"
         :centeredSlides="true"
@@ -44,27 +49,18 @@
           :key="index"
           class="tw-cursor-pointer tw-px-4 tw-pb-4"
         >
-          <div class="tw-text-center">
-            <span
-              class="tw-text-center tw-font-inter-bold tw-text-6xl tw-leading-[5.625rem] border-text"
-            >
-              0{{ index + 1 }}</span
-            >
-          </div>
           <div
-            class="tw-text-center tw-border tw-rounded-tr-[50px] tw-h-[700px] xs:tw-h-[600px] tw-p-4 tw-rounded-bl-[50px] tw-border-solid tw-border-black-core/[0.87] tw-bg-[#F8F8F8]"
+            class="tw-text-center tw-rounded-tr-[50px] tw-h-[700px] xs:tw-h-[600px] tw-p-4 tw-rounded-bl-[50px] tw-bg-[#F8F8F8]"
           >
             <div
               class="tw-justify-center tw-px-5 tw-h-16 tw-mb-5 tw-flex tw-flex-row tw-items-center"
             >
               <span
-                class="tw-tracking-[-0.96px] tw-font-inter-semibold tw-text-2xl tw-leading-[1.95rem] v2-canopas-gradient-text"
+                class="header-3 tw-text-[#FF9472]"
                 v-html="item.title"
               ></span>
             </div>
-            <div
-              class="tw-font-inter-regular tw-text-base tw-leading-6 tw-text-black-core/[0.87]"
-            >
+            <div class="sub-h3-regular tw-text-black-core/[0.87]">
               <p v-for="list in item.description" :key="list" class="tw-mb-4">
                 {{ list }}
               </p>
@@ -75,17 +71,17 @@
     </div>
 
     <div
-      class="tw-rounded-[20px] tw-hidden md:tw-flex tw-flex-row tw-container tw-mt-16 tw-bg-[#FFF] tw-drop-shadow-[0px_20px_20px_rgba(0,0,0,0.10)]"
+      class="tw-rounded-[20px] tw-hidden lg:tw-flex tw-flex-row tw-container tw-mt-16 tw-bg-[#FFF] tw-drop-shadow-[0px_20px_20px_rgba(0,0,0,0.10)]"
     >
       <div class="tw--ml-4">
         <div
           v-for="(item, index) in item"
           :key="index"
           :class="[
-            activeIndex == index ? 'tw-border-r-[#ff835b] tw-bg-[#FFF]' : '',
+            activeIndex == index ? 'tw-border-r-[#FF9472] tw-bg-[#FFF]' : '',
             index == 4 || index == 0 ? item.className : '',
           ]"
-          class="tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[7.5rem] lg:tw-h-[6.8rem] tw-w-40 xl:tw-w-60 xl:tw-h-[6.2rem] tw-bg-[#F5F5F5] tw-border-b tw-border-[#E3E3E3] tw-border-r-[5px]"
+          class="tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[7.5rem] tw-h-[5.8rem] xl:tw-h-[6.8rem] tw-w-40 xl:tw-w-60 xl:tw-h-[6.2rem] tw-bg-[#F5F5F5] tw-border-b tw-border-[#E3E3E3] tw-border-r-[5px]"
           @mouseover="slideTo(index), (activeIndex = index)"
           @touchstart.passive="slideTo(index), (activeIndex = index)"
           @touchmove.passive="slideTo(index), (activeIndex = index)"
@@ -116,7 +112,7 @@
           }"
           :loop="true"
           :modules="modules"
-          class="swiper-container tw-h-[600px] lg:tw-h-[540px] xl:tw-h-[495px] tw-flex"
+          class="swiper-container lg:tw-h-[463px] xl:tw-h-[495px] tw-flex"
           @swiper="setSwiperRef"
           @slideChange="onSlideChange"
         >
@@ -128,19 +124,15 @@
             <div
               class="tw-justify-start tw-px-5 tw-mt-3 lg:tw-my-3 tw-flex tw-flex-row"
             >
-              <span
-                class="tw-font-inter-semibold tw-text-[1.5625rem] tw-leading-[4.03125rem] lg:tw-text-[1.625rem] lg:tw-leading-[2.4375rem] v2-canopas-gradient-text tw-mr-1.5"
+              <span class="header-3 tw-text-[#FF9472] tw-mr-1.5"
                 >{{ index + 1 }}.
               </span>
-              <span
-                class="tw-font-inter-semibold tw-text-[1.5625rem] tw-leading-[4.03125rem] lg:tw-text-[1.625rem] lg:tw-leading-[2.4375rem] v2-canopas-gradient-text"
-                >{{ item.desktoptitle }}</span
-              >
+              <span class="header-3 tw-text-[#FF9472] tw-mr-1.5">{{
+                item.desktoptitle
+              }}</span>
             </div>
-            <div
-              class="tw-px-5 tw-font-inter-regular tw-text-lg lg:tw-text-xl tw-leading-[1.6875rem] lg:tw-leading-[1.875rem] tw-text-black-core/[0.87]"
-            >
-              <p v-for="list in item.description" :key="list" class="tw-mb-8">
+            <div class="tw-px-5 sub-h3-medium tw-text-black-core/[0.60]">
+              <p v-for="list in item.description" :key="list" class="tw-mb-6">
                 {{ list }}
               </p>
             </div>
diff --git a/vue-frontend/src/components/ios-app-development/FaqSection.vue b/vue-frontend/src/components/ios-app-development/FaqSection.vue
index 96fa189c9..ea0957ad4 100644
--- a/vue-frontend/src/components/ios-app-development/FaqSection.vue
+++ b/vue-frontend/src/components/ios-app-development/FaqSection.vue
@@ -1,16 +1,15 @@
 <template>
-  <section class="tw-my-8 md:tw-mb-20 md:tw-mt-32">
-    <div class="tw-mb-4 md:tw-container">
-      <div class="tw-mx-[2%] tw-my-0 tw-flex tw-flex-col tw-gap-4 md:tw-my-0">
+  <section class="tw-my-8 sm:tw-mt-16 md:tw-mb-20 lg:tw-my-60">
+    <div class="tw-mb-4 lg:tw-container">
+      <div class="tw-mx-[2%] tw-my-0 tw-flex tw-flex-col tw-gap-4 lg:tw-my-0">
         <div class="tw-text-center">
-          <span
-            class="tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] tw-text-black-core/[0.87] md:tw-text-[2.65625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.453125rem] lg:tw-leading-[4.46875rem]"
-            >FAQs on iOS App Development</span
+          <span class="header-2 tw-text-black-core/[0.87]"
+            >FAQs on iOS app development</span
           >
         </div>
 
         <div
-          class="tw-container tw-mt-6 tw-flex-[67%] tw-pb-8 md:tw-pb-16 md:tw-w-[65rem] md:tw--ml-6 xl:tw-mx-auto"
+          class="tw-container tw-mt-6 tw-flex-[67%] tw-pb-8 lg:tw-pb-16 lg:tw-w-[65rem] lg:tw--ml-6 xl:tw-mx-auto"
         >
           <div>
             <transition-group tag="div" :name="'faq-' + faqTransitionName">
@@ -21,16 +20,16 @@
                   :key="faq"
                 >
                   <div
-                    class="faq-container tw-cursor-pointer tw-overflow-hidden tw-rounded-[5px] tw-bg-white md:tw-p-[15px] md:tw-shadow-md"
+                    class="faq-container tw-cursor-pointer tw-overflow-hidden tw-rounded-[5px] tw-bg-white lg:tw-p-[15px] lg:tw-shadow-md"
                     @click="expandListItem(faq.id)"
                   >
                     <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-[-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="faq-question tw-w-[90%] tw-p-[10px] sub-h1-semibold"
                         :class="
                           openList && faq.id == currentIndex
                             ? 'v2-canopas-gradient-text footer-icon'
-                            : 'tw-text-black-core/[0.60] md:tw-text-black-core/[0.80]'
+                            : 'tw-text-black-core/[0.60] lg:tw-text-black-core/[0.80]'
                         "
                       >
                         {{ faq.question }}
@@ -56,7 +55,6 @@
                         />
                       </div>
                     </div>
-
                     <collapse-transition>
                       <div
                         class="faq-header tw-mt-1.5 tw-flex tw-flex-row tw-animate-fadeIn tw-items-center gradient-border tw-h-auto tw-border-l md:tw-border-l-4 tw-ml-3"
@@ -64,7 +62,7 @@
                         :key="faq.answer"
                       >
                         <div
-                          class="faq-answer tw-w-[90%] tw-px-3 tw-font-inter-regular tw-text-base tw-leading-normal tw-text-black-core/[0.87] md:tw-text-xl md:tw-leading-[1.875rem]"
+                          class="faq-answer tw-w-[90%] tw-px-3 sub-h3-regular"
                           v-html="faq.answer"
                         ></div>
                       </div>
@@ -74,51 +72,135 @@
                 </div>
               </div>
             </transition-group>
+            <collapse-transition>
+              <transition-group
+                tag="div"
+                :name="'faq-' + faqTransitionName"
+                v-if="showAdditionalFAQs"
+              >
+                <div class="faq-section tw-h-auto lg:tw-hidden">
+                  <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 lg:tw-p-[15px] lg:tw-shadow-md"
+                      @click="expandListItem(faq.id)"
+                    >
+                      <div
+                        class="faq-header tw-flex tw-flex-row tw-items-center"
+                      >
+                        <div
+                          class="faq-question tw-w-[90%] tw-p-[10px] sub-h1-semibold"
+                          :class="
+                            openList && faq.id == currentIndex
+                              ? 'v2-canopas-gradient-text footer-icon'
+                              : 'tw-text-black-core/[0.60] lg:tw-text-black-core/[0.80]'
+                          "
+                        >
+                          {{ faq.question }}
+                        </div>
+                        <div
+                          class="faq-icon tw-w-[10%] tw-text-end"
+                          @click.native="
+                            mixpanel.track('tap_ios_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
+                                ? 'angle-up'
+                                : 'angle-down'
+                            "
+                          />
+                        </div>
+                      </div>
+                      <collapse-transition>
+                        <div
+                          class="faq-header tw-mt-1.5 tw-flex tw-flex-row tw-animate-fadeIn tw-items-center gradient-border tw-h-auto tw-border-l md:tw-border-l-4 tw-ml-3"
+                          v-if="openList && faq.id == currentIndex"
+                          :key="faq.answer"
+                        >
+                          <div
+                            class="faq-answer tw-w-[90%] tw-px-3 sub-h3-regular"
+                            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-w-full tw-my-8 lg:tw-hidden tw-mt-8 tw-flex tw-justify-center tw-items-center"
+            >
+              <div
+                class="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] active:tw-scale-[0.98] tw-border tw-border-black tw-w-[155px] tw-cursor-pointer tw-h-[57px]"
+                @click="showAdditionalFAQs = !showAdditionalFAQs"
+              >
+                <span class="sub-h3-semibold v2-canopas-gradient-text"
+                  >{{ showAdditionalFAQs ? "View Less" : "View More" }}
+                </span>
+                <font-awesome-icon
+                  class="fa tw-ml-2 tw-mt-1 footer-icon"
+                  :icon="showAdditionalFAQs ? faAngleUp : faAngleDown"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div
-        class="tw-container tw-py-4 tw-flex tw-justify-center tw-items-center md:tw-justify-end tw-pr-4 tw-text-center md:tw-text-right md:tw-pr-6 md:tw-pt-4 xl:tw-pr-20 2xl:tw-pr-44 md:tw--mr-8 lg:tw--mr-10"
+    </div>
+    <div
+      class="tw-hidden lg:tw-block tw-container tw--mt-8 tw-text-right lg:tw-pt-4 xl:tw-pr-16 2xl:tw-pr-40"
+    >
+      <button
+        v-if="isActivePrev"
+        type="button"
+        :disabled="!isActivePrev"
+        class="tw-h-12 tw-flex tw-ml-auto tw-items-center tw-text-center"
+        @click="slide(-1)"
+        @click.native="mixpanel.track('tap_ios_app_faq_previous_arrow')"
+        aria-label="leftArrow"
       >
-        <button
-          v-if="isActivePrev"
-          type="button"
-          :disabled="!isActivePrev"
-          class="clients-indicators tw-mx-1 tw-my-0 tw-cursor-pointer sm:tw-mx-2"
-          @click="slide(-1)"
-          @click.native="mixpanel.track('tap_ios_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"
-            icon="fa-angle-left"
-            id="leftArrow"
-          />
-        </button>
-        <button
-          v-else
-          type="button"
-          :disabled="!isActiveNext"
-          class="clients-indicators tw-flex tw-items-center tw-justify-center tw-my-0 tw-cursor-pointer"
-          @click="slide(1)"
-          @click.native="mixpanel.track('tap_ios_app_faq_next_arrow')"
-          aria-label="rightArrow"
+        <font-awesome-icon
+          :class="isActivePrev ? 'footer-icon' : ''"
+          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"
+        @click="slide(1)"
+        @click.native="mixpanel.track('tap_ios_app_faq_next_arrow')"
+        aria-label="rightArrow"
+      >
+        <span class="v2-canopas-gradient-text sub-h4-semibold"
+          >View More Questions</span
         >
-          <div
-            :disabled="!isActiveNext"
-            class="faq-question v2-canopas-gradient-text tw-w-full tw-font-inter-semibold tw-text-base tw-leading-[1.21rem] md:tw-text-2xl lg:tw-text-3xl md:tw-leading-[1.3234375rem] lg:tw-leading-[1.436875rem]"
-          >
-            Load More Questions
-          </div>
-          <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 md:tw-h-5 md:tw-w-5"
-            icon="fa-angle-right"
-            id="rightArrow"
-          />
-        </button>
-      </div>
+        <font-awesome-icon
+          :class="isActiveNext ? 'footer-icon' : ''"
+          class="tw-ml-2 tw-h-5 tw-w-5"
+          icon="arrow-right"
+          id="rightArrow"
+        />
+      </button>
     </div>
   </section>
 </template>
@@ -126,12 +208,16 @@
 <script type="module">
 import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faAngleUp, faAngleDown } from "@fortawesome/free-solid-svg-icons";
 
 const TOTAL_FAQ_IN_SLIDE = 5;
 
 export default {
   data() {
     return {
+      faAngleUp,
+      faAngleDown,
+      showAdditionalFAQs: false,
       faqs: [
         {
           id: 1,
@@ -256,7 +342,7 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style lang="postcss">
 .gradient-border {
   border-image: linear-gradient(180deg, #f2709c 50%, #ff835b 50%) 1;
 }
diff --git a/vue-frontend/src/components/ios-app-development/LandingSection.vue b/vue-frontend/src/components/ios-app-development/LandingSection.vue
index dc56fec37..35bd7022d 100644
--- a/vue-frontend/src/components/ios-app-development/LandingSection.vue
+++ b/vue-frontend/src/components/ios-app-development/LandingSection.vue
@@ -1,68 +1,65 @@
 <template>
   <div
-    class="tw-bg-gradient-to-t tw-from-[#F77D8D]/[31.07%] md:tw-from-[#F77D8D]/[27.59%] tw-to-[#FFFFFF] tw-pb-12"
+    class="tw-bg-ios-landing-background tw-bg-opacity-10 tw-py-10 3xl:tw-outer-container lg:tw-mt-28"
   >
-    <div class="tw-container tw-p-4 tw-text-left md:tw-flex xl:tw-my-8">
-      <div class="md:tw-flex-1 lg:tw-mt-16">
+    <div
+      class="tw-container tw-px-4 tw-pb-4 3xl:tw-pb-28 tw-text-left lg:tw-flex tw-mb-4 md:tw-mb-7 lg:tw-mb-14"
+    >
+      <div class="lg:tw-flex-1 tw-mb-6">
         <h1
-          class="md:!tw--tracking-[2.4px] tw-pr-2 tw-mb-2 lg:tw-w-2/4 sm:tw-mb-0 tw-font-inter-semibold md:tw-font-inter-bold md:tw-text-[2.75rem] xl:tw-text-[3.75rem] tw-text-[2rem] md:tw-leading-[3.625rem] xl:tw-leading-[5.625rem] tw-leading-[2.6rem] tw-text-black-core/[0.87] md:tw-font-inter-bold"
+          class="header-1 tw-mb-4 tw-pr-2 lg:tw-w-2/4 tw-text-black-core/[0.87]"
         >
           iOS App Development Company
         </h1>
-        <p
-          class="tw-font-inter-medium md:tw-font-inter-regular tw-pt-2 xl:tw-text-[1.25rem] tw-text tw-text-[1rem] xl:tw-leading-[1.875rem] 2xl:tw-w-4/5 tw-leading-normal tw-text-black-core/[0.87]"
-        >
+        <p class="sub-h1-regular 2xl:tw-w-4/5 tw-text-black-core/[0.60]">
           We craft tailor-made iOS apps that redefine user experience and put
           you ahead of the game. Our team work with passion and precision to
           transform your business vision into reality, giving your brand the
           edge it needs in today's competitive marketplace.
         </p>
-
         <router-link
-          class="tw-relative tw-z-9 tw-ml-0 xl:tw-w-[290px] tw-hidden md:tw-block tw-my-8 lg:tw-mt-8 lg:tw-mb-4 xl:tw-my-8 gradient-btn consultation-btn tw-h-[3.3rem] tw-w-max tw-items-left tw-rounded-full"
+          class="tw-relative tw-z-9 tw-ml-0 lg:tw-mt-8 tw-hidden tw-h-[3.6rem] tw-w-[51%] lg:tw-block gradient-btn primary-btn"
           to="/contact"
           @click.native="mixpanel.track('tap_ios_development_cta')"
         >
           <span
-            class="tw-font-inter-semibold tw-text-center tw-text-[1.1875rem] tw-leading-[0.425rem]"
+            class="tw-px-[5px] tw-text-center sub-h3-semibold xl:sub-h4-semibold"
             >Consult Our iOS Team</span
           >
         </router-link>
       </div>
       <div
-        class="tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-justify-center md:tw-flex-1"
+        class="tw-flex tw-flex-col lg:tw-flex-row tw-items-center tw-justify-center lg:tw-flex-1 tw-mt-8 xs:tw-mt-0"
       >
         <img
           :src="landing400"
           :srcset="`${landing400} 400w,${landing800} 800w`"
-          class="tw-mt-7 tw-overflow-visible md:tw-mt-0 tw-h-[21.49113rem] xs:tw-h-[24.49113rem] md:tw-hidden tw-w-[23.77063rem] tw-object-cover"
+          class="tw-overflow-visible md:tw-mt-0 tw-h-[21.49113rem] xs:tw-h-[24.49113rem] lg:tw-hidden tw-w-[23.77063rem] tw-object-cover"
           alt="ios-landing"
         />
         <img
           v-if="width < 1400"
           :src="landingmd800"
           :srcset="`${landingmd800} 800w`"
-          class="tw-overflow-visible tw-hidden md:tw-block tw-h-full xl:!tw-h-full lg:!tw-mt-[10%] lg:!tw-h-[98%] tw--ml-[82%] lg:tw--ml-[52%] xl:tw--ml-[70%] tw-w-[55%] tw-object-cover"
+          class="tw-overflow-visible tw-hidden lg:tw-block tw-h-full lg:!tw--mt-[0.5%] xl:!tw-mt-[0.5%] xl:tw- lg:!tw-h-[31rem] xl:!tw-h-[38rem] tw--ml-[82%] lg:tw--ml-[61%] xl:tw--ml-[59%] tw-w-[55%] tw-object-cover"
           alt="ios-landing"
         />
         <img
           v-else
           :src="landing1200"
           :srcset="`${landing1200} 1200w`"
-          class="tw-overflow-visible tw-hidden md:tw-block tw-h-[37.5rem] tw-mt-8 xl:tw--ml-[70%] tw-w-[55%] tw-object-cover"
+          class="tw-overflow-visible tw-hidden lg:tw-block lg:tw-h-[40rem] tw--mt-[4%] xl:tw--ml-[80%] tw-object-cover"
           alt="ios-landing"
         />
 
-        <div
-          class="tw--mt-[2.7rem] tw-mr-28 xs:tw--mt-14 xs:tw-mr-40 md:tw-hidden"
-        >
+        <div class="tw--mt-[5.3rem] tw-mr-28 xs:tw-mr-40 lg:tw-hidden">
           <router-link
-            class="gradient-btn consultation-btn tw-w-max tw-items-left tw-rounded-full"
+            class="gradient-btn primary-btn"
             to="/contact"
             @click.native="mixpanel.track('tap_ios_development_cta')"
           >
             <span
-              class="tw-font-inter-medium tw-px-[5px] tw-text-center tw-text-[1rem] tw-leading-[1.21rem]"
+              class="tw-px-[5px] tw-text-center sub-h3-semibold xl:sub-h4-semibold"
               >Consult Our iOS Team</span
             >
           </router-link>
diff --git a/vue-frontend/src/components/ios-app-development/SuccessStory.vue b/vue-frontend/src/components/ios-app-development/SuccessStory.vue
index 9f6db21ef..3237ec357 100644
--- a/vue-frontend/src/components/ios-app-development/SuccessStory.vue
+++ b/vue-frontend/src/components/ios-app-development/SuccessStory.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="tw-mb-20">
+  <section class="tw-my-20 lg:tw-my-60 3xl:tw-mt-[315px]">
     <div
       class="tw-container md:tw-mt-36 lg:tw-mb-8 tw-mb-7 tw-mx-auto tw-text-center"
     >
@@ -11,7 +11,7 @@
     </div>
     <!-- Mobile UI start -->
     <div
-      class="tw-ml-auto md:tw-hidden tw-mx-auto tw-h-[30rem] tw-relative xll:tw-container tw-overflow-hidden tw-bg-[#1E1E1D]"
+      class="tw-ml-auto lg:tw-hidden tw-mx-auto tw-h-[32.188rem] tw-relative xll:tw-container tw-overflow-hidden tw-bg-[#1E1E1D]"
     >
       <img
         :src="reviewBackgroundImage"
@@ -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-[-0.02rem]"
+                class="tw-transition-all tw-ease tw-duration-500 sub-h1-semibold"
               >
                 {{ client.review }}
               </div>
@@ -58,12 +58,11 @@
                 /></span>
               </div>
               <div class="tw-flex tw-flex-col">
+                <span class="sub-h2-medium tw-text-[#FFFFFF]/[0.80]">{{
+                  client.name
+                }}</span>
                 <span
-                  class="tw-font-inter-semibold tw-text-base tw-leading-[1.2rem]"
-                  >{{ client.name }}</span
-                >
-                <span
-                  class="tw-font-inter-regular tw-text-xs tw-leading-[0.9rem] tw-mt-[0.3rem]"
+                  class="sub-h3-regular tw-text-[#FFFFFF]/[0.60] tw-mt-[0.3rem]"
                   >{{ client.designation }}</span
                 >
               </div>
@@ -75,13 +74,13 @@
     <!-- Mobile UI END -->
     <!-- Desktop UI -->
     <div
-      class="tw-hidden md:tw-flex tw-item-center tw-rounded-[20px] tw-w-[95%] lg:tw-w-11/12 xl:tw-w-5/6 2xl:tw-w-[75%] tw-h-[660px] tw-mx-auto tw-drop-shadow-md xll:tw-container"
+      class="tw-hidden lg:tw-flex tw-item-center tw-rounded-[20px] tw-w-[95%] lg:tw-w-11/12 xl:tw-w-5/6 2xl:tw-w-[75%] tw-h-[660px] tw-mx-auto tw-drop-shadow-md xll:tw-container"
     >
       <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"
       >
         <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]"
+          class="header-2 tw-w-3/4 2xl:tw-w-[65%] tw-mx-auto tw-text-black-core/[0.87]"
         >
           What our clients say!
         </h2>
diff --git a/vue-frontend/tailwind.config.cjs b/vue-frontend/tailwind.config.cjs
index 2c72ff2dc..87a3f189a 100755
--- a/vue-frontend/tailwind.config.cjs
+++ b/vue-frontend/tailwind.config.cjs
@@ -126,7 +126,7 @@ module.exports = {
             transform: "translateY(3rem)",
           },
           "100%": {
-            transform: " translateY(0)",
+            transform: "translateY(0)",
           },
         },
         underlineOut: {
@@ -221,6 +221,8 @@ module.exports = {
           "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%)",
+        "ios-landing-background":
+          "linear-gradient(188deg, #FFF 18.82%, rgba(249, 133, 132, 0.10) 52.46%, rgba(244, 118, 149, 0.10)67.02%)",
       },
     },
   },