diff --git a/blogs/blog.go b/blogs/blog.go
index ad110a247..8bac26055 100644
--- a/blogs/blog.go
+++ b/blogs/blog.go
@@ -71,17 +71,17 @@ func Get(c *gin.Context) {
 		c.AbortWithStatus(http.StatusInternalServerError)
 		return
 	}
-
 	// bind data to struct
 	var blogs Blog
 	json.Unmarshal(responseData, &blogs)
 
 	filteredItems := []Item{}
 	existingBlogs := []Item{}
-
 	// filter weekly and newletteres
 	for _, item := range blogs.Items {
+		
 		if !strings.Contains(strings.ToLower(item.Title), "weekly") && !strings.Contains(strings.ToLower(item.Title), "newsletter") {
+			item.Thumbnail = extractFirstImgSrc(item.Description)
 			item.Description = truncateTo20Words(item.Description)
 			filteredItems = append(filteredItems, item)
 		}
@@ -150,6 +150,18 @@ func truncateTo20Words(description string) string {
 	}
 	return strings.Join(words, " ") + "..."
 }
+func extractFirstImgSrc(description string) string {
+	imgRegex := regexp.MustCompile(`<img[^>]+\bsrc="([^"]+)"[^>]*>`)
+
+	match := imgRegex.FindStringSubmatch(description)
+
+	if len(match) > 1 {
+		return match[1]
+	}
+
+	return "" 
+}
+
 
 // make array or slice unique
 func Unique(arr []Item) []Item {
diff --git a/nuxt-frontend/assets/css/global.css b/nuxt-frontend/assets/css/global.css
index 05195632c..4a9b1cc46 100644
--- a/nuxt-frontend/assets/css/global.css
+++ b/nuxt-frontend/assets/css/global.css
@@ -86,14 +86,6 @@
     @apply text-[1.25rem] font-bold leading-[1.6rem] tracking-[0.5px] text-[#3d3d3d] md:text-[1.75rem] md:leading-8 lg:text-[2.25rem] lg:leading-[2.729rem];
   }
 
-  .grecaptcha-badge {
-    @apply invisible;
-  }
-
-  .v2-header-text {
-    @apply text-[4.0625rem] font-bold leading-[5.875rem] tracking-[1px] text-[#3d3d3d] md:text-[5.625rem] md:leading-[6.6875rem] lg:text-[7.5rem] lg:leading-[7.4375rem];
-  }
-
   .v2-header-2-text {
     @apply text-[3.125rem] font-semibold leading-[5rem] tracking-[1px] text-[#3d3d3d] md:text-[4.0625rem] md:leading-[5.875rem] lg:text-[5.625rem] lg:leading-[6.6875rem];
   }
@@ -135,17 +127,8 @@
     @apply underline decoration-[#3d3d3dcc] decoration-solid decoration-2 underline-offset-[1rem] md:decoration-[3px];
   }
 
-  .v2-button {
-    @apply rounded-[3rem] border-[1px] border-solid border-[#3d3d3d] bg-white px-[1.5rem] py-[0.7rem] text-center text-[#3d3d3d] hover:bg-[#3d3d3d] hover:text-[#fff] active:scale-[0.98];
-  }
-
-  .v2-button > span {
-    @apply mr-2.5;
-  }
-
   .cta-button:hover > span,
-  .portfolio-nav:hover > span,
-  .v2-button:hover > .fa {
+  .portfolio-nav:hover > span {
     @apply text-[#fff];
   }
 
@@ -188,53 +171,76 @@
     @apply text-white;
   }
 
-  .header-1 {
-    @apply font-opensans-bold tracking-[-0.08rem] xl:tracking-[-0.15rem]  text-[2rem] leading-[2.6rem] lg:text-6xl lg:leading-[4.875rem];
+  .mobile-header-1 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-[2rem] leading-[2.6rem];
   }
-
-  .header-2 {
-    @apply font-opensans-bold tracking-[-0.08rem] xl:tracking-[-0.12rem] text-2xl leading-[2.25rem] lg:text-5xl lg:leading-[3.9rem];
+  .mobile-header-2 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-2xl leading-9;
   }
-
-  .header-3 {
-    @apply font-opensans-semibold tracking-[-0.08rem] text-xl leading-[1.875rem] lg:text-[2rem] lg:leading-[3rem];
+  .mobile-header-2-regular {
+    @apply font-inter-regular tracking-[-0.08rem] xl:tracking-normal text-2xl leading-9;
+  }
+  .mobile-header-2-semibold {
+    @apply font-inter-semibold  tracking-[-0.08rem] xl:tracking-normal text-2xl leading-9;
+  }
+  .mobile-header-3 {
+    @apply font-opensans-semibold tracking-[-0.08rem] xl:tracking-normal text-xl leading-[1.875rem];
+  }
+  .mobile-header-3-regular {
+    @apply font-inter-regular tracking-[-0.08rem] xl:tracking-normal text-xl leading-[1.875rem];
+  }
+  .mobile-header-3-medium {
+    @apply font-inter-medium tracking-[-0.08rem] xl:tracking-normal text-xl leading-[1.875rem];
+  }
+  .mobile-header-3-semibold {
+    @apply font-inter-semibold tracking-[-0.08rem] xl:tracking-normal text-xl leading-[1.875rem];
+  }
+  .desk-header-1 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-6xl leading-[4.875rem];
+  }
+  .desk-header-2 {
+    @apply font-opensans-bold tracking-[-0.08rem] text-5xl leading-[3.9rem];
+  }
+  .desk-header-3 {
+    @apply font-opensans-semibold tracking-[-0.08rem] text-[2rem] leading-[3rem];
   }
-
   .sub-h1-regular {
-    @apply text-lg leading-[1.688rem] lg:text-2xl lg:leading-[2.25rem] font-inter-regular;
+    @apply font-inter-regular text-lg leading-[1.688rem];
   }
-
   .sub-h1-semibold {
-    @apply text-lg leading-[1.688rem]  lg:text-2xl lg:leading-[2.25rem]  font-inter-semibold;
+    @apply font-inter-semibold text-lg leading-[1.688rem];
+  }
+  .sub-h2-regular {
+    @apply font-inter-regular text-[1.375rem] leading-[2.063rem];
   }
-
   .sub-h2-medium {
-    @apply lg:text-[1.375rem] lg:leading-[2.063rem] font-inter-medium;
+    @apply font-inter-medium text-[1.375rem] leading-[2.063rem];
   }
-
   .sub-h3-regular {
-    @apply text-base lg:text-xl lg:leading-[1.875rem] font-inter-regular;
+    @apply font-inter-regular text-base;
   }
-
   .sub-h3-medium {
-    @apply text-base lg:text-xl lg:leading-[1.875rem] font-inter-medium;
+    @apply font-inter-medium text-base;
   }
-
   .sub-h3-semibold {
-    @apply text-base lg:text-xl lg:leading-[1.875rem] font-inter-semibold;
+    @apply font-inter-semibold text-base;
   }
-
   .sub-h4-regular {
-    @apply font-inter-regular text-xs leading-[1.125rem] lg:text-lg lg:leading-[1.688rem];
+    @apply font-inter-regular text-xs leading-[1.125rem];
+  }
+  .sub-h4-medium {
+    @apply font-inter-medium text-xs leading-[1.125rem];
   }
-
   .sub-h4-semibold {
-    @apply font-inter-semibold text-xs leading-[1.125rem] lg:text-lg lg:leading-[1.688rem];
+    @apply font-inter-semibold text-xs leading-[1.125rem];
+  }
+  .background-text {
+    @apply font-inter-regular text-[2.5rem] leading-[1.875rem] lg:text-7xl lg:leading-[4.5rem];
   }
-
   .primary-btn {
     @apply h-12  mx-auto flex w-max items-center rounded-xl py-3 px-6 text-center;
   }
+
   .primary-color {
     @apply text-[#FF9472];
   }
diff --git a/nuxt-frontend/assets/images/blog/bg/bg.webp b/nuxt-frontend/assets/images/blog/bg/bg.webp
new file mode 100644
index 000000000..e54dd963b
Binary files /dev/null and b/nuxt-frontend/assets/images/blog/bg/bg.webp differ
diff --git a/nuxt-frontend/assets/images/contribution/animations/JetpackComposeAnimations.mp4 b/nuxt-frontend/assets/images/contribution/animations/JetpackComposeAnimations.mp4
index ccfddd707..eabf5605b 100644
Binary files a/nuxt-frontend/assets/images/contribution/animations/JetpackComposeAnimations.mp4 and b/nuxt-frontend/assets/images/contribution/animations/JetpackComposeAnimations.mp4 differ
diff --git a/nuxt-frontend/assets/images/contribution/animations/JetpackComposeAnimations.webm b/nuxt-frontend/assets/images/contribution/animations/JetpackComposeAnimations.webm
index b1344d259..536c02f04 100644
Binary files a/nuxt-frontend/assets/images/contribution/animations/JetpackComposeAnimations.webm and b/nuxt-frontend/assets/images/contribution/animations/JetpackComposeAnimations.webm differ
diff --git a/nuxt-frontend/assets/images/contribution/animations/UIPilot.mp4 b/nuxt-frontend/assets/images/contribution/animations/UIPilot.mp4
index 298c71075..909395643 100644
Binary files a/nuxt-frontend/assets/images/contribution/animations/UIPilot.mp4 and b/nuxt-frontend/assets/images/contribution/animations/UIPilot.mp4 differ
diff --git a/nuxt-frontend/assets/images/contribution/animations/UIPilot.webm b/nuxt-frontend/assets/images/contribution/animations/UIPilot.webm
index ddd921d97..cc78b0988 100644
Binary files a/nuxt-frontend/assets/images/contribution/animations/UIPilot.webm and b/nuxt-frontend/assets/images/contribution/animations/UIPilot.webm differ
diff --git a/nuxt-frontend/assets/images/contribution/animations/introShowCase.mp4 b/nuxt-frontend/assets/images/contribution/animations/introShowCase.mp4
index 65d6ab1e9..a8f5ed21d 100644
Binary files a/nuxt-frontend/assets/images/contribution/animations/introShowCase.mp4 and b/nuxt-frontend/assets/images/contribution/animations/introShowCase.mp4 differ
diff --git a/nuxt-frontend/assets/images/contribution/animations/introShowCase.webm b/nuxt-frontend/assets/images/contribution/animations/introShowCase.webm
index b15c836e7..139f2e851 100644
Binary files a/nuxt-frontend/assets/images/contribution/animations/introShowCase.webm and b/nuxt-frontend/assets/images/contribution/animations/introShowCase.webm differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-1600w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-1600w.webp
index 92e3b49bc..991a31dca 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-1600w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-1600w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-2400w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-2400w.webp
index 33f409ac7..4348e6d37 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-2400w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-2400w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-400w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-400w.webp
index a2f3b5da7..f2f4af784 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-400w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-400w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-800w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-800w.webp
index 37ee48be6..14ddcc915 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-800w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/cta-800w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-1600w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-1600w.webp
index 5bb2b1f0c..b83c6d89f 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-1600w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-1600w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-400w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-400w.webp
index 1c7893a9a..e4e62049b 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-400w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-400w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-800w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-800w.webp
index 8427a990b..ec686d673 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-800w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-1-800w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-1600w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-1600w.webp
index 3a10a884f..a8098cd53 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-1600w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-1600w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-400w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-400w.webp
index 651261eb4..d6cdbbcb3 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-400w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-400w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-800w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-800w.webp
index 10fba518a..d14d5a44f 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-800w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-2-800w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-1600w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-1600w.webp
deleted file mode 100644
index c267e73e7..000000000
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-1600w.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-400w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-400w.webp
index 87b75b039..ed69b6ce5 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-400w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-400w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-800w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-800w.webp
index 0cb9d4f83..0a28d584f 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-800w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/justly-3-800w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-1600w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-1600w.webp
deleted file mode 100644
index a5a87b9e1..000000000
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-1600w.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-400w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-400w.webp
index ec3494b60..8a73946df 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-400w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-400w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-800w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-800w.webp
index 35a87a452..84b9339eb 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-800w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/luxeradio-2-800w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/smile.mp4 b/nuxt-frontend/assets/images/portfolio/new-portfolio/smile.mp4
index d50c7a024..1e706a329 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/smile.mp4 and b/nuxt-frontend/assets/images/portfolio/new-portfolio/smile.mp4 differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/smile.webm b/nuxt-frontend/assets/images/portfolio/new-portfolio/smile.webm
index 734f0c3a2..5a93d9821 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/smile.webm and b/nuxt-frontend/assets/images/portfolio/new-portfolio/smile.webm differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-1600w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-1600w.webp
deleted file mode 100644
index 36b5b8744..000000000
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-1600w.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-400w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-400w.webp
index 77933941b..f4b8d70a9 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-400w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-400w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-800w.webp b/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-800w.webp
index f2b77fec9..4134a7d22 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-800w.webp and b/nuxt-frontend/assets/images/portfolio/new-portfolio/togness-1-800w.webp differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness.mp4 b/nuxt-frontend/assets/images/portfolio/new-portfolio/togness.mp4
index b6a621004..84418f5a0 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness.mp4 and b/nuxt-frontend/assets/images/portfolio/new-portfolio/togness.mp4 differ
diff --git a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness.webm b/nuxt-frontend/assets/images/portfolio/new-portfolio/togness.webm
index e4b9e140a..5230f86ed 100644
Binary files a/nuxt-frontend/assets/images/portfolio/new-portfolio/togness.webm and b/nuxt-frontend/assets/images/portfolio/new-portfolio/togness.webm differ
diff --git a/nuxt-frontend/components/android-app-development/BlackCtaSection.vue b/nuxt-frontend/components/android-app-development/BlackCtaSection.vue
index f137d8f1c..89e24f6de 100644
--- a/nuxt-frontend/components/android-app-development/BlackCtaSection.vue
+++ b/nuxt-frontend/components/android-app-development/BlackCtaSection.vue
@@ -13,9 +13,13 @@
       class="container absolute top-4 md:top-20 xl:top-32 w-full p-4 text-center text-[#FFF] xs:left-[13%] xll:left-[24%] xs:w-[75%]"
     >
       <div class="m-auto">
-        <p class="text-white header-1">Have an app idea?</p>
+        <p class="text-white mobile-header-1 lg:desk-header-1">
+          Have an app idea?
+        </p>
 
-        <div class="mt-2 text-white/[0.8] sub-h1-regular md:my-4">
+        <div
+          class="mt-2 text-white-core-80 sub-h1-regular lg:mobile-header-2-regular md:my-4"
+        >
           See if we can make it a reality.
         </div>
       </div>
@@ -25,7 +29,7 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_android_development_cta')"
         >
-          <span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
+          <span class="sub-h3-semibold xl:sub-h1-semibold">Let's Chat </span>
         </router-link>
       </div>
     </div>
diff --git a/nuxt-frontend/components/android-app-development/BlogSection.vue b/nuxt-frontend/components/android-app-development/BlogSection.vue
index 7f9dc76d0..869951dea 100644
--- a/nuxt-frontend/components/android-app-development/BlogSection.vue
+++ b/nuxt-frontend/components/android-app-development/BlogSection.vue
@@ -4,7 +4,7 @@
     <div
       class="relative z-[1] h-[27rem] sm:h-[30rem] overflow-hidden lg:hidden"
     >
-      <p class="text-center header-2 text-black-core/[0.87]">Our blogs</p>
+      <p class="text-center mobile-header-2 text-black-87">Our blogs</p>
       <div class="blog mt-6 block lg:hidden">
         <swiper
           :slidesPerView="1.425"
@@ -29,7 +29,7 @@
                 />
               </div>
               <div class="title hidden">
-                <p class="mt-3 text-black-core/[0.60]">
+                <p class="mt-3 text-black-60">
                   {{ blog.publishDate }}
                 </p>
                 <a
@@ -37,9 +37,7 @@
                   :href="blog.link"
                   target="_blank"
                 >
-                  <p
-                    class="mt-2 cursor-pointer sub-h1-semibold text-black-core/[0.87]"
-                  >
+                  <p class="mt-2 cursor-pointer sub-h1-semibold text-black-87">
                     {{ blog.title }}
                   </p>
                 </a>
@@ -55,7 +53,7 @@
     <div
       class="container flex hidden flex-col lg:block lg:min-h-[580px] lg:py-0"
     >
-      <p class="mb-8 text-center header-2 text-black-core/[0.87]">Our blogs</p>
+      <p class="mb-8 text-center desk-header-2 text-black-87">Our blogs</p>
       <div class="flex flex-row space-x-5 space-y-1">
         <div
           @click="openBlog(blog.link, 'tap_android_app_blog_section')"
@@ -111,7 +109,7 @@
               >
                 <span
                   @click="openBlog(blog.link, 'tap_android_app_blog_section')"
-                  class="font-inter-regular text-black-core/[0.87] text-base lg:text-[1.5rem] lg:leading-9 text-white"
+                  class="text-black-87 sub-h3-regular lg:mobile-header-2-regular text-white"
                   v-html="blog.hovertitle"
                 ></span>
               </div>
@@ -143,7 +141,7 @@
             >
               <span
                 @click="openBlog(blog.link, 'tap_android_app_blog_section')"
-                class="font-inter-regular text-black-core/[0.87] text-[1rem] lg:text-[1.5rem] leading-6 lg:leading-9 text-black-core/[0.87]"
+                class="sub-h3-regular lg:mobile-header-2-regular text-black-87"
                 v-html="blog.hovertitle"
               ></span>
             </div>
@@ -181,7 +179,7 @@ export default {
           image: [jacoco_400w, jacoco_800w, jacoco_desktop_400w],
           publishDate: "Sep 27, 2021",
           title: "Android code coverage using JaCoCo",
-          hovertitle: `<span class="header-3 text-black-core/[0.87]">Android<span><br><span class="sub-h1-regular text-black-core/[0.87]">Code coverage using JaCoCo</span>`,
+          hovertitle: `<span class="desk-header-3 text-black-87">Android<span><br><span class="mobile-header-2-regular text-black-87">Code coverage using JaCoCo</span>`,
           link: "https://blog.canopas.com/android-code-coverage-using-jacoco-6639a1fc4293",
           bgColor: "bg-gradient-to-b from-[#E7E7E7] to-[#DADADA]",
         },
@@ -190,7 +188,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="header-3 text-white">Jetpack Compose</span><br><span class="text-white sub-h1-regular">MVVM State management in a simple way</span>`,
+          hovertitle: `<span class="desk-header-3 text-white">Jetpack Compose</span><br><span class="text-white mobile-header-2-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: "bg-gradient-to-b from-[#282828] to-[#282828]",
         },
@@ -199,7 +197,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 class="text-white sub-h1-regular">Keyboard Handling In<br> <span class="header-3 text-white">Jetpack Compose</span><br><span class="text-white sub-h1-regular">All You Need To Know</span></span>`,
+          hovertitle: `<span class="text-white mobile-header-2-regular">Keyboard Handling In<br> <span class="desk-header-3 text-white">Jetpack Compose</span><br><span class="text-white mobile-header-2-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: "bg-gradient-to-b from-[#070710] to-[#222241]",
         },
@@ -209,7 +207,7 @@ export default {
           publishDate: "Feb 17, 2022",
           title:
             "Retrofit — Effective error handling with Kotlin Coroutine and Result API",
-          hovertitle: `<span class="header-3 text-white">Retrofit</span> <br><span class="text-white sub-h1-regular">Effective error handling with Kotlin Coroutine and Result API</span>`,
+          hovertitle: `<span class="desk-header-3 text-white">Retrofit</span> <br><span class="text-white mobile-header-2-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: "basis-[54%]",
           bgColor: "bg-gradient-to-b from-[#282828] to-[#282828]",
@@ -220,7 +218,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="header-3 text-black-core/[0.87]">Android</span><br><span class=" text-black-core/[0.87] sub-h1-regular">Send live audio stream from client to server using WebSocket and OkHttp client</span>`,
+          hovertitle: `<span class="desk-header-3 text-black-87">Android</span><br><span class=" text-black-87 mobile-header-2-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: "basis-[60%] ",
           bgColor: "bg-gradient-to-b from-[#FEE4DF] to-[#FDCCBC]",
diff --git a/nuxt-frontend/components/android-app-development/CaseStudySection.vue b/nuxt-frontend/components/android-app-development/CaseStudySection.vue
index 59a0d7bc3..ca5223aba 100644
--- a/nuxt-frontend/components/android-app-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/android-app-development/CaseStudySection.vue
@@ -4,9 +4,11 @@
   >
     <div class="container">
       <div class="flex flex-col text-center">
-        <span class="header-2 text-black-core-[0.87]">Case studies</span>
+        <span class="mobile-header-2 lg:desk-header-2 text-black-87"
+          >Case studies</span
+        >
         <span
-          class="mt-4 md:mt-6 sub-h1-regular mx-auto xl:text-[1.5rem] xl:leading-9 text-black-core/[0.60] lg:w-[80%] xl:w-[61%]"
+          class="mt-4 md:mt-6 sub-h1-regular lg:mobile-header-2-regular mx-auto text-black-60 lg:w-[80%] xl:w-[61%]"
           >Explore our case studies to witness how we've transformed our
           client's ideas into successful Android apps.</span
         >
@@ -33,11 +35,9 @@
           />
 
           <div :class="item.textalign" class="absolute bottom-4 flex flex-col">
-            <span class="header-2 text-black-core/[0.87]">{{
-              item.title
-            }}</span>
+            <span class="mobile-header-2 text-black-87">{{ item.title }}</span>
             <span
-              class="mt-2 sub-h3-regular text-black-core/[0.6]"
+              class="mt-2 sub-h3-regular text-black-60"
               v-html="item.content"
             ></span>
           </div>
@@ -58,7 +58,7 @@
         />
         <div
           :class="item.textalign"
-          class="absolute -mt-2 xs:mt-0 bottom-[1.53rem] flex flex-col text-black-core/[0.87]"
+          class="absolute -mt-2 xs:mt-0 bottom-[1.53rem] flex flex-col text-black-87"
         >
           <span class="sub-h3-regular" v-html="item.content"></span>
           <div class="mt-2 flex flex-wrap justify-center">
@@ -100,7 +100,7 @@
               class="flex flex-col w-[77%] xl:w-[48%] 2xll:w-[50%] lg:mr-auto xll:ml-auto"
             >
               <div>
-                <span class="text-[#FF9472] text-left sub-h3-semibold">
+                <span class="primary-color text-left mobile-header-3-semibold">
                   {{ item.title }}
                 </span>
               </div>
@@ -111,12 +111,12 @@
                 :target="item.target"
               >
                 <h2
-                  class="mt-4 font-opensans-semibold header-3 text-black-core/[0.87]"
+                  class="mt-4 font-opensans-semibold desk-header-3 text-black-87"
                   v-html="item.deskcontent"
                 ></h2
               ></a>
               <span
-                class="mt-4 text-black-core/[0.6] sub-h3-medium"
+                class="mt-4 text-black-60 sub-h3-medium md:mobile-header-3-medium"
                 v-html="item.description"
               ></span>
 
@@ -130,28 +130,28 @@
                 <div class="inline-flex p-2 lg:p-4">
                   <div class="p-[0.8rem]">
                     <span
-                      class="font-opensans-semibold header-3 text-[#FF9472]"
+                      class="font-opensans-semibold desk-header-3 text-[#FF9472]"
                       >{{ item.resultcount[0] }}</span
                     >
-                    <div class="flex-1 text-black-core-[0.87] sub-h3-regular">
+                    <div class="flex-1 text-black-87 mobile-header-3-regular">
                       <span>Downloads</span>
                     </div>
                   </div>
                   <div class="border-l-[0.5px] p-[0.8rem]">
                     <span
-                      class="font-opensans-semibold header-3 text-[#FF9472]"
+                      class="font-opensans-semibold desk-header-3 text-[#FF9472]"
                       >{{ item.resultcount[1] }}</span
                     >
-                    <div class="flex-1 text-black-core-[0.87] sub-h3-regular">
+                    <div class="flex-1 text-black-87 mobile-header-3-regular">
                       <span>App Rating</span>
                     </div>
                   </div>
                   <div class="border-l-[0.5px] p-[0.8rem]">
                     <span
-                      class="font-opensans-semibold header-3 text-[#FF9472]"
+                      class="font-opensans-semibold desk-header-3 text-[#FF9472]"
                       >{{ item.resultcount[2] }}</span
                     >
-                    <div class="flex-1 text-black-core-[0.87] sub-h3-regular">
+                    <div class="flex-1 text-black-87 mobile-header-3-regular">
                       <span>Monthly Users</span>
                     </div>
                   </div>
@@ -296,7 +296,7 @@ export default {
       cta: [
         {
           title: "",
-          content: `Let’s Start a <span class="header-2">New Project</span> Together`,
+          content: `Let’s Start a <span class="mobile-header-2">New Project</span> Together`,
           images: [cta_400w, cta_800w],
           className: "text-center ",
           textalign:
diff --git a/nuxt-frontend/components/android-app-development/CtaSection.vue b/nuxt-frontend/components/android-app-development/CtaSection.vue
index 356d106c1..9b6de181c 100644
--- a/nuxt-frontend/components/android-app-development/CtaSection.vue
+++ b/nuxt-frontend/components/android-app-development/CtaSection.vue
@@ -9,7 +9,7 @@
         loading="lazy"
       />
       <div
-        class="w-[80%] mx-auto sm:w-full text-center mt-8 text-black-core/[0.87] header-1"
+        class="w-[80%] mx-auto sm:w-full text-center mt-8 text-black-87 mobile-header-1 lg:desk-header-1"
       >
         Let’s talk about what we can build and scale together.
       </div>
@@ -42,7 +42,7 @@
         class="h-[82%] lg:h-[80%] xl:h-[75%] border-[#00000]/[0.6] absolute left-[10%] z-0 mr-[0.2rem] mt-8 flex flex-col items-center justify-center rounded-lg border-2 py-2 lg:!mt-[5.7rem] lg:!py-12 xl:!mt-[7.8rem] xl:!py-4 2xl:!pb-16 2xl:!pt-12 2xl:pr-8 xs:mt-[2.8rem] xs:py-4"
       >
         <div
-          class="ml-[27rem] xl:ml-[27.5rem] text-black-core/[0.87] header-1 lg:!w-[47%] 2xl:!w-[60%]"
+          class="ml-[27rem] xl:ml-[27.5rem] text-black-87 mobile-header-1 lg:desk-header-1 lg:!w-[47%] 2xl:!w-[60%]"
         >
           <span>Let’s talk about what we can build and scale together.</span>
         </div>
@@ -52,7 +52,7 @@
             to="/contact"
             @click.native="$mixpanel.track('tap_android_development_cta')"
           >
-            <span class="sub-h4-semibold">Contact Us </span>
+            <span class="sub-h1-semibold">Contact Us </span>
           </router-link>
         </div>
       </div>
diff --git a/nuxt-frontend/components/android-app-development/DevelopmentSection.vue b/nuxt-frontend/components/android-app-development/DevelopmentSection.vue
index bf0aa165a..f8f833293 100644
--- a/nuxt-frontend/components/android-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/android-app-development/DevelopmentSection.vue
@@ -4,11 +4,12 @@
       <div class="lg:sticky lg:!top-[128px] 3xl:!top-[500px]">
         <div class="container flex flex-col text-center xll:-mb-72">
           <span
-            class="header-2 text-black-core/[0.87] lg:!mx-0 lg:!w-full xs:mx-auto xs:w-[71%]"
+            class="mobile-header-2 lg:desk-header-2 text-black-87 lg:!mx-0 lg:!w-full xs:mx-auto xs:w-[71%]"
           >
             Android app development services</span
           >
-          <span class="mt-4 md:mt-6 sub-h1-regular text-black-core/[0.60]"
+          <span
+            class="mt-4 md:mt-6 sub-h1-regular lg:mobile-header-2-regular text-black-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
@@ -77,11 +78,11 @@
                     class="h-10 w-10 object-contain lg:hidden"
                     loading="lazy"
                   />
-                  <span class="header-3 text-black-core/[0.87]">{{
+                  <span class="mobile-header-3 text-black-87">{{
                     item.title
                   }}</span>
                 </div>
-                <div class="sub-h3-regular text-black-core/[0.60] lg:p-4">
+                <div class="sub-h3-regular text-black-60 lg:p-4">
                   <ul class="pl-8 pr-4 lg:hidden">
                     <li
                       v-for="list in item.description"
@@ -117,7 +118,9 @@
               <div
                 class="absolute top-[2%] xl:top-[15px] xll:top-[37.5%] ml-[45%] xll:ml-[47%] hidden h-20 !bg-white text-center lg:block 2xll:ml-[47%] xll:ml-[48%]"
               >
-                <span class="text-center header-1 text-black-core/[0.87]">
+                <span
+                  class="text-center mobile-header-1 lg:desk-header-1 text-black-87"
+                >
                   0{{ index + 1 }}</span
                 >
               </div>
@@ -133,11 +136,13 @@
                     loading="lazy"
                   />
                   <span
-                    class="font-opensans-semibold text-black-core/[0.87] header-3"
+                    class="font-opensans-semibold text-black-87 desk-header-3"
                     >{{ item.title }}</span
                   >
                 </div>
-                <div class="text-black-core/[0.6] sub-h3-medium">
+                <div
+                  class="text-black-60 sub-h3-medium lg:mobile-header-3-medium"
+                >
                   <ul class="pl-8 pr-4 lg:hidden">
                     <li
                       v-for="list in item.description"
diff --git a/nuxt-frontend/components/android-app-development/FaqSection.vue b/nuxt-frontend/components/android-app-development/FaqSection.vue
index 81bfcef10..f870a1536 100644
--- a/nuxt-frontend/components/android-app-development/FaqSection.vue
+++ b/nuxt-frontend/components/android-app-development/FaqSection.vue
@@ -3,7 +3,7 @@
     <div class="mb-4 bg-pink-gradient-background lg:container lg:bg-none">
       <div class="mx-[2%] my-0 flex flex-col gap-4 lg:my-0 lg:-ml-8">
         <div class="text-center">
-          <span class="header-2 text-black-core/[0.87]"
+          <span class="mobile-header-2 lg:desk-header-2 text-black-87"
             >FAQs on android app development</span
           >
         </div>
@@ -30,11 +30,11 @@
                   >
                     <div class="faq-header flex flex-row items-center">
                       <div
-                        class="faq-question w-[90%] sub-h1-semibold"
+                        class="faq-question w-[90%] sub-h1-semibold lg:mobile-header-2-semibold"
                         :class="
                           openList && faq.id == currentIndex
                             ? 'v2-canopas-gradient-text footer-icon'
-                            : 'text-black-core/[0.87]'
+                            : 'text-black-87'
                         "
                       >
                         {{ faq.question }}
@@ -46,11 +46,11 @@
                         "
                       >
                         <Icon
-                          class="xmark text-black-core/[0.87]"
+                          class="xmark text-black-87"
                           :class="
                             openList && faq.id == currentIndex
                               ? 'footer-icon'
-                              : 'text-black-core/[0.87]'
+                              : 'text-black-87'
                           "
                           :name="
                             openList && faq.id == currentIndex
@@ -67,7 +67,7 @@
                         :key="faq.answer"
                       >
                         <div
-                          class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular text-black-core/[0.87]"
+                          class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular lg:mobile-header-3-regular text-black-87"
                           v-html="faq.answer"
                         ></div>
                       </div>
@@ -91,11 +91,11 @@
                     >
                       <div class="faq-header flex flex-row items-center">
                         <div
-                          class="faq-question w-[90%] sub-h1-semibold"
+                          class="faq-question w-[90%] sub-h1-semibold lg:mobile-header-2-semibold"
                           :class="
                             openList && faq.id == currentIndex
                               ? 'v2-canopas-gradient-text footer-icon'
-                              : 'text-black-core/[0.87]'
+                              : 'text-black-87'
                           "
                         >
                           {{ faq.question }}
@@ -107,11 +107,11 @@
                           "
                         >
                           <Icon
-                            class="xmark text-black-core/[0.87]"
+                            class="xmark text-black-87"
                             :class="
                               openList && faq.id == currentIndex
                                 ? 'footer-icon'
-                                : 'text-black-core/[0.87]'
+                                : 'text-black-87'
                             "
                             :name="
                               openList && faq.id == currentIndex
@@ -128,7 +128,7 @@
                           :key="faq.answer"
                         >
                           <div
-                            class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular text-black-core/[0.87]"
+                            class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular lg:mobile-header-3-regular text-black-87"
                             v-html="faq.answer"
                           ></div>
                         </div>
@@ -181,7 +181,7 @@
           class="mr-2 h-5 w-5"
           icon="arrow-left"
           id="leftArrow"
-        /><span class="v2-canopas-gradient-text sub-h4-semibold">Back</span>
+        /><span class="v2-canopas-gradient-text sub-h1-semibold">Back</span>
       </button>
       <button
         v-else
@@ -192,7 +192,7 @@
         @click.native="$mixpanel.track('tap_android_app_faq_next_arrow')"
         aria-label="rightArrow"
       >
-        <span class="v2-canopas-gradient-text sub-h4-semibold"
+        <span class="v2-canopas-gradient-text sub-h1-semibold"
           >View More Questions</span
         >
         <Icon
diff --git a/nuxt-frontend/components/android-app-development/LandingSection.vue b/nuxt-frontend/components/android-app-development/LandingSection.vue
index 7438d30ab..e00781d2c 100644
--- a/nuxt-frontend/components/android-app-development/LandingSection.vue
+++ b/nuxt-frontend/components/android-app-development/LandingSection.vue
@@ -17,11 +17,13 @@
     <div
       class="container absolute p-4 w-full text-center text-[#FFF] transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 xl:w-[84%] md:top-[49%] lg:top-[48%] 2xl:w-[69%] xll:w-[65%]"
     >
-      <h1 class="header-1 text-white">
+      <h1 class="mobile-header-1 lg:desk-header-1 text-white">
         Android app <br />
         development company
       </h1>
-      <p class="mt-4 md:mt-6 sub-h1-regular text-white/[0.80]">
+      <p
+        class="mt-4 md:mt-6 sub-h1-regular lg:mobile-header-2-regular text-white-core-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
@@ -36,7 +38,7 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_android_development_cta')"
         >
-          <span class="sub-h3-semibold xl:sub-h4-semibold"
+          <span class="sub-h3-semibold lg:sub-h1-semibold"
             >Consult Our Android Team</span
           >
         </nuxt-link>
diff --git a/nuxt-frontend/components/android-app-development/PinkCtaSection.vue b/nuxt-frontend/components/android-app-development/PinkCtaSection.vue
index bf7ed796d..638bec3cd 100644
--- a/nuxt-frontend/components/android-app-development/PinkCtaSection.vue
+++ b/nuxt-frontend/components/android-app-development/PinkCtaSection.vue
@@ -11,14 +11,16 @@
     >
       <div class="flex w-[66%]">
         <div class="w-[80%] py-5 text-white lg:w-[90%] xl:m-auto 2xl:w-9/12">
-          <p class="header-2">Whether you need...</p>
-          <ul class="pt-6 sub-h1-semibold">
+          <p class="mobile-header-2 lg:desk-header-2">Whether you need...</p>
+          <ul class="pt-6 sub-h1-semibold lg:mobile-header-2-semibold">
             <li v-for="reason in reasons" :key="reason" class="flex">
               <span class="pr-1">*</span>
               <div class="sm:w-[90%]">{{ reason }}</div>
             </li>
           </ul>
-          <div class="text-white/[0.8] pb-8 pt-4 sub-h3-regular xl:w-[85%]">
+          <div
+            class="text-white-core-80 pb-8 pt-4 sub-h3-regular lg:mobile-header-3-regular xl:w-[85%]"
+          >
             Bring us your toughest challenge and we'll show you the path to a
             sleek solution.
           </div>
@@ -30,7 +32,7 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_android_development_cta')"
         >
-          <span class="sub-h4-semibold v2-canopas-gradient-text"
+          <span class="sub-h1-semibold v2-canopas-gradient-text"
             >Let's Chat</span
           >
         </router-link>
diff --git a/nuxt-frontend/components/android-app-development/SuccessStorySection.vue b/nuxt-frontend/components/android-app-development/SuccessStorySection.vue
index cc8571c9a..83d7e5895 100644
--- a/nuxt-frontend/components/android-app-development/SuccessStorySection.vue
+++ b/nuxt-frontend/components/android-app-development/SuccessStorySection.vue
@@ -1,7 +1,9 @@
 <template>
   <section>
     <div class="div relative mt-16 md:mt-40 xl:mt-60">
-      <h2 class="sm:pb-10 text-center header-2 text-black-core/[0.87]">
+      <h2
+        class="sm:pb-10 text-center mobile-header-2 lg:desk-header-2 text-black-87"
+      >
         Success stories
       </h2>
       <!-- ---------------------MOBILE UI START------------------ -->
@@ -35,7 +37,7 @@
                 class="mb-8 mx-auto rounded-[5px] sm:px-10 md:px-6 lg:px-4 xl:px-24 p-5 bg-[#F2709C]/[0.08]"
               >
                 <div
-                  class="text-black-core/[0.87] sub-h1-semibold transition-all ease duration-500"
+                  class="text-black-87 sub-h1-semibold lg:mobile-header-2-semibold transition-all ease duration-500"
                   v-html="client.review"
                 ></div>
                 <div class="flex flex-row justify-between mt-6">
@@ -48,10 +50,10 @@
                         name="fa6-solid:star"
                       />
                     </span>
-                    <span class="mt-2 text-black-core/[0.87] sub-h3-regular">{{
+                    <span class="mt-2 text-black-87 sub-h3-regular">{{
                       client.name
                     }}</span>
-                    <span class="sub-h4-regular text-black-core/[0.6]">{{
+                    <span class="sub-h4-regular text-black-60">{{
                       client.designation
                     }}</span>
                   </div>
@@ -105,22 +107,19 @@
                     name="fa6-solid:star"
                   />
                 </span>
-                <span
-                  class="font-inter-regular text-[1.125rem] leading-[1.688rem] text-black-core/[0.87]"
-                  >(5.0)</span
-                >
+                <span class="sub-h1-regular text-black-87">(5.0)</span>
               </div>
               <div
-                class="font-opensans-semibold header-3 text-black-core/[0.87]"
+                class="font-opensans-semibold desk-header-3 text-black-87"
                 v-html="client.review"
               ></div>
               <div class="flex flex-row justify-between my-5">
                 <div class="flex flex-col">
-                  <span class="mt-3 text-black-core/[0.6] sub-h2-medium">{{
+                  <span class="mt-3 text-black-60 sub-h2-medium">{{
                     client.name
                   }}</span>
                   <span
-                    class="mt-1 sub-h4-regular text-black-core/[0.40]"
+                    class="mt-1 sub-h1-regular text-black-60"
                     v-html="client.desktop_designation"
                   ></span>
                 </div>
diff --git a/nuxt-frontend/components/backend-development/CaseStudySection.vue b/nuxt-frontend/components/backend-development/CaseStudySection.vue
index 5f76ec210..115e2652b 100644
--- a/nuxt-frontend/components/backend-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/backend-development/CaseStudySection.vue
@@ -2,8 +2,10 @@
   <section class="mt-16 mb-16 lg:mt-60 lg:mb-0 3xl:outer-container">
     <div class="container">
       <div class="flex flex-col gap-4 lg:gap-6 text-center">
-        <h2 class="header-2 text-black-core/[0.87]">Case studies</h2>
-        <p class="sub-h1-regular px-4 text-black-core/[0.6]">
+        <h2 class="mobile-header-2 lg:desk-header-2 text-black-87">
+          Case studies
+        </h2>
+        <p class="sub-h1-regular lg:mobile-header-2-regular px-4 text-black-87">
           Explore our case studies to witness how we've transformed
           <br class="hidden lg:flex" />our client's ideas into successful apps.
         </p>
@@ -33,13 +35,10 @@
             :class="item.textalign"
             class="absolute bottom-4 flex flex-col gap-2"
           >
-            <h2 class="header-2 text-black-core/[0.87]">
+            <h2 class="mobile-header-2 text-black-87">
               {{ item.title }}
             </h2>
-            <p
-              class="sub-h3-regular text-black-core/[0.6]"
-              v-html="item.content"
-            ></p>
+            <p class="sub-h3-regular text-black-87" v-html="item.content"></p>
           </div>
         </a>
       </div>
@@ -69,7 +68,7 @@
           >
             <div class="flex flex-col gap-8 my-auto text-left flex-1">
               <div class="white-btn">
-                <span class="header-3">
+                <span class="desk-header-3">
                   {{ item.title }}
                 </span>
               </div>
@@ -81,12 +80,12 @@
                   :target="item.target"
                 >
                   <h3
-                    class="header-3 text-black-core/[0.87]"
+                    class="desk-header-3 text-black-87"
                     v-html="item.deskcontent"
                   ></h3
                 ></a>
                 <p
-                  class="text-black-core/[0.6] sub-h3-medium"
+                  class="text-black-87 mobile-header-3-medium"
                   v-html="item.description"
                 ></p>
               </div>
diff --git a/nuxt-frontend/components/backend-development/LandingSection.vue b/nuxt-frontend/components/backend-development/LandingSection.vue
index 36738e569..786598e21 100644
--- a/nuxt-frontend/components/backend-development/LandingSection.vue
+++ b/nuxt-frontend/components/backend-development/LandingSection.vue
@@ -4,10 +4,12 @@
       class="container flex flex-col lg:flex-row pt-6 lg:py-[7.5rem] gap-4 text-center lg:text-left"
     >
       <div class="flex flex-col gap-4 lg:gap-6 lg:flex-1">
-        <h1 class="header-1 text-black-core/[0.87] lg:w-1/2">
+        <h1 class="mobile-header-1 lg:desk-header-1 text-black-87 lg:w-1/2">
           Backend development company
         </h1>
-        <p class="sub-h1-regular xs:px-4 lg:!px-0 text-black-core/[0.6]">
+        <p
+          class="sub-h1-regular lg:mobile-header-2-regular xs:px-4 lg:!px-0 text-black-60"
+        >
           Our backend development team isn’t just about writing code; it's about
           crafting powerful, efficient, scalable, and secure foundations that
           drive innovative applications. We shape, optimize, and elevate digital
@@ -18,7 +20,7 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_backend_landing_cta')"
         >
-          <span class="sub-h3-semibold xl:sub-h4-semibold"
+          <span class="sub-h3-semibold lg:sub-h1-semibold"
             >Be Future-Ready With Us</span
           ></nuxt-link
         >
diff --git a/nuxt-frontend/components/contact/Guaranty.vue b/nuxt-frontend/components/contact/Guaranty.vue
index ddf89a102..a9ce02c01 100644
--- a/nuxt-frontend/components/contact/Guaranty.vue
+++ b/nuxt-frontend/components/contact/Guaranty.vue
@@ -10,14 +10,14 @@
           alt="badge-image"
         />
         <p
-          class="sub-h3-semibold lg:sub-h1-semibold w-full lg:text-center lg:w-[82%] lg:mb-[-0.5rem] lg:ml-6"
+          class="sub-h3-semibold lg:mobile-header-2-semibold w-full lg:text-center lg:w-[82%] lg:mb-[-0.5rem] lg:ml-6"
         >
           In two weeks — at any time, if you feel you won't get the results you
           want, you don't have to pay a penny.
         </p>
       </div>
       <div
-        class="flex flex-col sub-h3-medium text-black-core/[0.60] lg:px-14 mt-6"
+        class="flex flex-col sub-h3-medium lg:mobile-header-3-medium text-black-60 lg:px-14 mt-6"
       >
         <div v-for="benefit in benefits" class="mt-4" :key="benefit">
           <span v-html="benefit.title"></span>
@@ -36,7 +36,7 @@ export default {
         {
           title: ` We don't want you to decide yes or no today... We want you to make a
           fully informed decision, that is all.
-          <span class="sub-h3-semibold text-black-core/[0.87]"
+          <span class="sub-h3-semibold lg:mobile-header-3-semibold text-black-87"
             >The only way you can make a fully informed decision is on the
             inside, not the outside.</span
           >
@@ -52,7 +52,7 @@ export default {
         },
         {
           title: `And remember,
-          <span class="sub-h3-semibold text-black-core/[0.87]"
+          <span class="sub-h3-semibold lg:mobile-header-3-semibold text-black-87"
             >whether it's 79 minutes or 79 hours from now, if you ain't happy,
             we ain't happy.</span
           >
@@ -61,7 +61,7 @@ export default {
         },
         {
           title: `All you have to do is
-          <span class="sub-h3-semibold text-black-core/[0.87]"
+          <span class="sub-h3-semibold lg:mobile-header-3-semibold text-black-87"
             >just tell us "This isn't for me" and you got it, No Questions
             Asked.</span
           >
@@ -72,7 +72,7 @@ export default {
           title: `You can only make such a guarantee when you're confident that what you
           have is the real deal and we are damn confident that when you sign up
           with us you're getting exactly what you need to
-          <span class="sub-h3-semibold text-black-core/[0.87]"
+          <span class="sub-h3-semibold lg:mobile-header-3-semibold text-black-87"
             >GROW YOUR BUSINESS.</span
           >`,
         },
diff --git a/nuxt-frontend/components/contact/NewContactForm.vue b/nuxt-frontend/components/contact/NewContactForm.vue
index b4f074fb8..ca16b29c8 100755
--- a/nuxt-frontend/components/contact/NewContactForm.vue
+++ b/nuxt-frontend/components/contact/NewContactForm.vue
@@ -5,12 +5,12 @@
         class="rounded-2xl border bg-white shadow-[0px_0px_45px_rgba(0,0,0,0.1)]"
       >
         <div class="pt-5 pb-12 px-8">
-          <div class="flex flex-col gap-5">
+          <div class="flex flex-col gap-5 text-black-87">
             <div class="relative pt-8 text-left">
               <input
                 type="text"
                 id="username"
-                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium text-black-core/[0.87] focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 name="username"
                 required
                 autocomplete="given-username"
@@ -24,7 +24,7 @@
               />
               <label
                 for="username"
-                class="absolute top-4 left-0 mb-5 text-black-core/[.6] sub-h3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
+                class="absolute top-4 left-0 mb-5 text-black-60 sub-h3-regular lg:mobile-header-3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
                 >Your name</label
               >
               <span v-if="showNameValidationError" class="error text-red-600"
@@ -33,7 +33,7 @@
             </div>
             <div class="relative pt-8 text-left">
               <input
-                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium text-black-core/[0.87] focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 type="text"
                 name="email"
                 id="email"
@@ -50,7 +50,7 @@
               />
               <label
                 for="email"
-                class="absolute top-4 left-0 mb-5 text-black-core/[.6] sub-h3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
+                class="absolute top-4 left-0 mb-5 text-black-60 sub-h3-regular lg:mobile-header-3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
                 >Your email</label
               >
               <span v-if="showEmailValidationError" class="error text-red-600"
@@ -64,7 +64,7 @@
             </div>
             <div class="relative pt-8 text-left">
               <textarea
-                class="block peer mx-0 w-full pb-1 min-h-[50px] md:min-h-[90px] rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium text-black-core/[0.87] placeholder-black-core/[.6] focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 min-h-[50px] md:min-h-[90px] rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium placeholder-black-core/[.6] focus:outline-none active:outline-none"
                 id="project"
                 name="project"
                 rows="3"
@@ -82,7 +82,7 @@
               ></textarea>
               <label
                 for="project"
-                class="absolute top-4 left-0 mb-5 text-black-core/[.6] sub-h3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
+                class="absolute top-4 left-0 mb-5 text-black-60 sub-h3-regular lg:mobile-header-3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
                 >Tell us about your project</label
               >
               <span
@@ -93,7 +93,7 @@
             </div>
             <div class="relative pt-6 md:pt-8 text-left">
               <input
-                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium text-black-core/[0.87] focus:outline-none active:outline-none"
+                class="block peer mx-0 w-full pb-1 rounded-none border-b border-black/[0.08] bg-transparent px-0 transition ease-in-out appearance-none sub-h3-medium lg:mobile-header-3-medium focus:outline-none active:outline-none"
                 type="text"
                 name="reference"
                 id="reference"
@@ -109,7 +109,7 @@
               />
               <label
                 for="reference"
-                class="absolute top-4 left-0 mb-5 text-black-core/[.6] sub-h3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
+                class="absolute top-4 left-0 mb-5 text-black-60 sub-h3-regular lg:mobile-header-3-regular transform -translate-y-4 origin-[0] scale-75 duration-300 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4"
                 >How did you find us?</label
               >
               <span
@@ -121,7 +121,7 @@
             <div class="relative pt-8">
               <div ref="invest-list" class="flex">
                 <button
-                  class="flex items-center justify-between mt-2.5 md:mt-3 mx-0 w-full border-b border-black/[0.08] bg-none px-0 sub-h3-regular whitespace-nowrap transition duration-150 ease-in-out focus:outline-0 active:outline-0 focus:shadow-none active:shadow-none focus:ring-0 active:ring-0 focus:bg-transparent active:bg-transparent active:text-black-core/[0.6]"
+                  class="flex items-center justify-between mt-2.5 md:mt-3 mx-0 w-full border-b border-black/[0.08] bg-none px-0 sub-h3-regular lg:mobile-header-3-regular whitespace-nowrap transition duration-150 ease-in-out focus:outline-0 active:outline-0 focus:shadow-none active:shadow-none focus:ring-0 active:ring-0 focus:bg-transparent active:bg-transparent active:text-black-60"
                   type="button"
                   id="invest"
                   name="invest"
@@ -130,24 +130,21 @@
                 >
                   <label
                     for="invest"
-                    class="absolute top-8 left-0 text-black-core/[0.6] transform duration-300 placeholder:!text-black-core/[0.6]"
+                    class="absolute top-8 left-0 text-black-60 transform duration-300 placeholder:!text-black-60"
                     :class="[
                       floatable
                         ? '-translate-y-4 xl:-translate-y-[0.5rem] origin-[0] scale-75'
                         : 'translate-y-0 scale-100',
-                      floatable && showList
-                        ? 'text-black-core'
-                        : 'text-black-core/[0.6]',
+                      floatable && showList ? 'text-black' : 'text-black-60',
                     ]"
                     @click="floatable = !floatable"
                     >I'll invest</label
                   >
-                  <span
-                    class="font-inter-regular text-[1rem] md:text-[1.375rem] leading-[1.21rem] md:leading-[2.0625rem]"
-                    >{{ invest }}</span
-                  >
+                  <span class="sub-h1-regular lg:sub-h2-regular">{{
+                    invest
+                  }}</span>
                   <Icon
-                    class="fab mb-3 w-[15px] md:w-[25px] h-[15px] md:h-[25px] text-black-core/[0.6]"
+                    class="fab mb-3 w-[15px] md:w-[25px] h-[15px] md:h-[25px] text-black-60"
                     :name="
                       showList ? 'fa6-solid:caret-up' : 'fa6-solid:caret-down'
                     "
@@ -163,7 +160,7 @@
                     @click="setOption(option)"
                   >
                     <span
-                      class="block w-full py-2 px-4 whitespace-nowrap text-black-core/[.6] hover:bg-[#000]/[.2] hover:text-[#000] font-inter-regular text-lg md:text-xl lg:text-2xl leading-[1.21rem] md:leading-[2.0625rem]"
+                      class="block w-full py-2 px-4 whitespace-nowrap text-black-60 hover:bg-black-core hover:bg-opacity-[.2] hover:text-black-core sub-h1-regular lg:mobile-header-2-regular"
                       >{{ option }}</span
                     >
                   </li>
@@ -173,7 +170,7 @@
                 >This field is required</span
               >
             </div>
-            <div class="mt-8 sub-h4-regular text-black-core/[0.87]">
+            <div class="mt-8 sub-h4-regular lg:sub-h3-regular">
               We sign NDA for all of our projects.
             </div>
           </div>
@@ -185,9 +182,7 @@
               alt="loader-image"
             />
             <div v-else>
-              <div
-                class="relative font-inter-semibold text-[1.1875rem] leading-[1.436875rem] md:leading-[1.386875rem] text-center"
-              >
+              <div class="relative mobile-header-3-semibold text-center">
                 <div
                   class="absolute -top-10 sm:-top-8 xl:-top-[1.875rem] 2xl:-top-[1.875rem] text-center -right-32 sm:-right-[10.5rem] md:-right-44 lg:-right-40 2xl:-right-[10.5rem] w-[250px] sm:w-max"
                 >
@@ -208,7 +203,7 @@
                   class="absolute top-[-13px] sm:-top-5 right-[-110px] md:right-[-70px] w-max py-2.5 px-20 md:px-8 text-center gradient-btn consultation-btn"
                   @click.prevent="submitForm()"
                 >
-                  <span class="sub-h3-semibold lg:sub-h5-semibold">Submit</span>
+                  <span class="sub-h3-semibold lg:sub-h1-semibold">Submit</span>
                 </button>
               </div>
             </div>
diff --git a/nuxt-frontend/components/contact/NewContactLanding.vue b/nuxt-frontend/components/contact/NewContactLanding.vue
index 0fdd1d6f8..9aa662d02 100644
--- a/nuxt-frontend/components/contact/NewContactLanding.vue
+++ b/nuxt-frontend/components/contact/NewContactLanding.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="flex items-center lg:pt-0">
-      <h1 class="header-2 primary-color pr-2">Hey Smarty</h1>
+      <h1 class="mobile-header-2 lg:desk-header-2 primary-color pr-2">
+        Hey Smarty
+      </h1>
       <img
         :src="HandWing"
         alt="HandWing"
@@ -9,12 +11,14 @@
       />
     </div>
 
-    <div class="my-6 sub-h1-regular text-black-core/[0.87]">
+    <div class="my-6 sub-h1-regular lg:mobile-header-2-regular text-black-87">
       Thanks for reaching out to us. This form requires
-      <span class="sub-h1-semibold primary-color">less than 60 seconds</span>
+      <span class="sub-h1-semibold lg:mobile-header-2-semibold primary-color"
+        >less than 60 seconds</span
+      >
       to fill up.
     </div>
-    <div class="sub-h3-semibold lg:sub-h2-medium text-black-core/[0.60]">
+    <div class="sub-h3-semibold lg:sub-h2-medium text-black-60">
       Here's what you will get by filling out this form.
     </div>
     <div>
@@ -27,7 +31,9 @@
           <span
             class="mt-2 md:mt-3 mr-[15px] w-2 md:w-[8.81px] h-2 md:h-[9px] rounded-full bg-[#F2709C]"
           ></span>
-          <div class="w-11/12 lg:w-[90%] sub-h3-regular text-black-core/[0.87]">
+          <div
+            class="w-11/12 lg:w-[90%] sub-h3-regular lg:mobile-header-3-regular text-black-87"
+          >
             <span v-html="reason.title"></span>
           </div>
         </li>
@@ -47,12 +53,12 @@ export default {
           title: `Free consultation and QA session to know more about each other.`,
         },
         {
-          title: `  The call is <span class='sub-h3-semibold'>only 15 minutes</span> and we promise not to give you a hard\
+          title: `  The call is <span class='sub-h3-semibold lg:mobile-header-3-semibold'>only 15 minutes</span> and we promise not to give you a hard\
               sell. We will talk more ONLY if you find the conversation\
               interesting.`,
         },
         {
-          title: ` To prove our <span class='sub-h3-semibold'>Skin In the Game,</span> we offer 6 Months of Free Post Deployment Maintenance for all the work we do on your project.`,
+          title: ` To prove our <span class='sub-h3-semibold lg:mobile-header-3-semibold'>Skin In the Game,</span> we offer 6 Months of Free Post Deployment Maintenance for all the work we do on your project.`,
         },
       ],
     };
diff --git a/nuxt-frontend/components/contributions/GithubContribution.vue b/nuxt-frontend/components/contributions/GithubContribution.vue
index 5dc56814b..8493243c9 100644
--- a/nuxt-frontend/components/contributions/GithubContribution.vue
+++ b/nuxt-frontend/components/contributions/GithubContribution.vue
@@ -200,6 +200,7 @@
 import { Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { openBlog } from "@/utils.js";
+import config from "@/config.js";
 
 import android1_400w from "@/assets/images/contributions/github/mobile/android-1-400w.webp";
 import android1_800w from "@/assets/images/contributions/github/mobile/android-1-800w.webp";
@@ -285,7 +286,7 @@ export default {
           title: "Compose Intro Showcase",
           description:
             "Intro showcase view in Jetpack compose. An implementation of Intro Showcase from ...",
-          stars: "318",
+          stars: config.INTRO_SHOWCASE_STARS,
           contributors: [contributor1, contributor2, contributor3],
           event: "tap_contribution_intro_showcase",
         },
@@ -300,7 +301,7 @@ export default {
           forks: "26",
           title: "Compose Animation Examples",
           description: "Cool animations implemented with Jetpack compose....",
-          stars: "265",
+          stars: config.JETPACK_COMPOSE_ANIMATION_STARS,
           contributors: [contributor1, contributor2, contributor4],
           event: "tap_contribution_jetpack_compose_animation",
         },
@@ -316,7 +317,7 @@ export default {
           title: "Compose CountryPicker",
           description:
             "Country code bottomsheet picker in Jetpack Compose with Search functionality...",
-          stars: "50",
+          stars: config.COMPOSE_COUNTRY_PICKER_STARS,
           contributors: [contributor1, contributor2, contributor4],
           event: "tap_contribution_jetcountry_picker",
         },
@@ -331,7 +332,7 @@ export default {
           forks: "21",
           title: "UIPilot ",
           description: "The missing typesafe SwiftUI navigation library.",
-          stars: "263",
+          stars: config.UIPILOT_STARS,
           contributors: [contributor1, contributor6, contributor2],
           event: "tap_contribution_jetpack_compose_animation",
         },
@@ -346,7 +347,7 @@ export default {
           forks: "02",
           title: "Swiftui Animations",
           description: "Cool animations implemented with SwiftUI",
-          stars: "53",
+          stars: config.SWIFT_UI_ANIMATION_STARS,
           contributors: [contributor1, contributor6],
           event: "tab_contribution_swiftui_animation",
         },
@@ -362,7 +363,7 @@ export default {
           title: "iOS Developer Roadmap 2022",
           description:
             "iOS Developer Roadmap 2022 is a learning path to understand iOS development...",
-          stars: "73",
+          stars: config.IOS_DEVELOPER_ROADMAP_STARS,
           contributors: [contributor1, contributor6],
           event: "tab_contribution_ios_roadmap",
         },
@@ -378,7 +379,7 @@ export default {
           title: "Tailwind Animations Examples",
           description:
             "This repository contains different animations implemented using tailwind css...",
-          stars: "101",
+          stars: config.TAILWIND_ANIMATIONS_STARS,
           contributors: [contributor8, contributor9],
           event: "tab_contribution_tailwind_animation",
         },
@@ -394,7 +395,7 @@ export default {
           title: "Web Development Roadmap",
           description:
             "Web Developer Roadmap is a path to understand web development including...",
-          stars: "95",
+          stars: config.WEB_DEVELOPMENT_ROADMAP_STARS,
           contributors: [contributor8, contributor10],
           event: "tab_contribution_webdevelopment_roadmap",
         },
@@ -410,7 +411,7 @@ export default {
           title: "Canopas Blog website",
           description:
             "Source code of canopas resources by following best practices...",
-          stars: "26",
+          stars: config.CANOPAS_BLOG_WEBSITE_STARS,
           contributors: [contributor8, contributor11, contributor12],
           event: "tab_contribution_canopas_blog",
         },
@@ -426,7 +427,7 @@ export default {
           title: "Canopas Website",
           description:
             "Source code of canopas website by following best practices...",
-          stars: "22",
+          stars: config.CANOPAS_WEBSITE_STARS,
           contributors: [contributor8, contributor14, contributor12],
           event: "tap_contribution_canopas_website",
         },
diff --git a/nuxt-frontend/components/flutter-app-development/BlogSection.vue b/nuxt-frontend/components/flutter-app-development/BlogSection.vue
index 8cce78042..db4b7fb64 100644
--- a/nuxt-frontend/components/flutter-app-development/BlogSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/BlogSection.vue
@@ -2,7 +2,7 @@
   <section class="mt-16 lg:mt-[15rem]">
     <!-- --------------------Mobile UI Start----------------------- -->
     <div class="text-center h-[30rem] sm:!h-[36rem] md:!h-[42rem] lg:hidden">
-      <p class="header-2 opacity-[0.87]">Our blogs</p>
+      <p class="mobile-header-2 opacity-[0.87]">Our blogs</p>
       <div class="mt-2">
         <swiper
           :slidesPerView="1.425"
@@ -23,8 +23,12 @@
                 loading="lazy"
               />
               <div class="p-4 flex flex-col gap-3">
-                <p class="sub-h1-semibold opacity-[0.87]">{{ blog.title }}</p>
-                <p class="sub-h4-regular text-black-core/60">
+                <p
+                  class="sub-h1-semibold lg:mobile-header-2-semibold opacity-[0.87]"
+                >
+                  {{ blog.title }}
+                </p>
+                <p class="sub-h4-regular text-black-60">
                   {{ blog.readTime }}
                 </p>
               </div>
@@ -43,7 +47,7 @@
     </div>
     <!-- --------------------Desktop UI Start----------------------- -->
     <div class="container hidden lg:block lg:min-h-[580px]">
-      <p class="mb-14 text-center header-2 text-black-core/[0.87]">Our blogs</p>
+      <p class="mb-14 text-center lg:desk-header-2 text-black-87">Our blogs</p>
       <div class="flex flex-row space-x-5">
         <div
           @click="openBlog(blog.link, 'tap_flutter_app_blog_section')"
@@ -135,7 +139,9 @@
         target="_blank"
         @click.native="$mixpanel.track('tap_flutter_blog_section')"
       >
-        <span class="sub-h3-semibold">Read More Blogs </span>
+        <span class="sub-h3-semibold lg:mobile-header-3-semibold"
+          >Read More Blogs
+        </span>
         <Icon name="fa6-solid:arrow-right" class="fa ml-2" />
       </a>
     </div>
@@ -163,7 +169,7 @@ const blogs = [
     image: [inherit_400w, inherit_800w, desk800w],
     title: "How to Use InheritedWidget in Flutter",
     readTime: "7 min",
-    hovertitle: `<span class="sub-h1-semibold text-center text-white">How to Use InheritedWidget in Flutter</span>`,
+    hovertitle: `<span class="mobile-header-2-semibold text-center text-white">How to Use InheritedWidget in Flutter</span>`,
     link: "https://blog.canopas.com/how-to-use-inheritedwidget-in-flutter-5fd64ce52b66",
   },
   {
@@ -171,7 +177,7 @@ const blogs = [
     image: [animate_400w, animate_800w],
     title: "Flutter Fun Animation A smiley that reacts to your every move",
     readTime: "8 min",
-    hovertitle: `<span class="sub-h1-semibold text-center text-white">Flutter Fun Animation A smiley that reacts to your every move</span>`,
+    hovertitle: `<span class="mobile-header-2-semibold text-center text-white">Flutter Fun Animation A smiley that reacts to your every move</span>`,
     link: "https://blog.canopas.com/flutter-animations-made-fun-a-smiley-that-reacts-to-your-every-move-9ebfb0a0657f",
   },
   {
@@ -179,7 +185,7 @@ const blogs = [
     image: [maintain_400w, maintain_800w],
     title: "Maintain the state of BottomNavigationBar across tabs",
     readTime: "9 min",
-    hovertitle: `<span class="sub-h1-semibold text-center text-white">Maintain the state of BottomNavigationBar across tabs</span>`,
+    hovertitle: `<span class="mobile-header-2-semibold text-center text-white">Maintain the state of BottomNavigationBar across tabs</span>`,
     link: "https://blog.canopas.com/how-to-maintain-the-state-of-bottomnavigationbar-across-tabs-528b3699f78b",
   },
   {
@@ -187,7 +193,7 @@ const blogs = [
     image: [custom_400w, custom_800w],
     title: "Customizing Serialization and Deserialization in Flutter",
     readTime: "10 min",
-    hovertitle: `<span class="sub-h1-semibold text-center text-white">Customizing Serialization and Deserialization in Flutter</span>`,
+    hovertitle: `<span class="mobile-header-2-semibold text-center text-white">Customizing Serialization and Deserialization in Flutter</span>`,
     link: "https://blog.canopas.com/flutter-customizing-serialization-and-deserialization-with-json-serializable-db17e3aa90b0",
   },
   {
@@ -195,7 +201,7 @@ const blogs = [
     image: [master_400w, master_800w],
     title: "Mastering Flutter Inspector DevTools for Effective Debugging",
     readTime: "11 min",
-    hovertitle: `<span class="sub-h1-semibold text-center text-white">Mastering Flutter Inspector DevTools for Effective Debugging</span>`,
+    hovertitle: `<span class="mobile-header-2-semibold text-center text-white">Mastering Flutter Inspector DevTools for Effective Debugging</span>`,
     link: "https://blog.canopas.com/optimizing-flutter-apps-mastering-flutter-inspector-devtools-for-effective-debugging-493c03f68835",
   },
 ];
diff --git a/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue b/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
index 8d880c057..2ee859e3c 100644
--- a/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
@@ -3,8 +3,10 @@
     <div
       class="container flex flex-col gap-4 lg:gap-6 pb-6 lg:pb-[4.5rem] lg:w-[51.625rem]"
     >
-      <h2 class="header-2 text-black-core/[0.87]">Case studies</h2>
-      <span class="sub-h1-regular text-black-core/[0.6]">
+      <h2 class="mobile-header-2 lg:desk-header-2 text-black-87">
+        Case studies
+      </h2>
+      <span class="sub-h1-regular lg:mobile-header-2-regular lg: text-black-60">
         Explore our case studies to witness how we've transformed our client's
         ideas into successful Flutter apps.
       </span>
@@ -24,7 +26,7 @@
             class="absolute -top-1 left-1/2 -translate-x-1/2 -translate-y-1/2 w-0 h-0 border-transparent border-t-0 border-l-[13px] border-r-[13px] border-b-[14px] border-b-[#EF233C] border-b-solid"
           ></div>
           <div class="container flex flex-col gap-4">
-            <h3 class="header-3">{{ portfolio.title }}</h3>
+            <h3 class="mobile-header-3-semibold">{{ portfolio.title }}</h3>
             <p class="sub-h1-regular">{{ portfolio.description }}</p>
           </div>
         </div>
@@ -56,8 +58,10 @@
               <div
                 class="absolute flex flex-col gap-6 w-[27.25rem] top-1/2 left-14 -translate-y-1/2"
               >
-                <h3 class="header-3">{{ portfolio.title }}</h3>
-                <span class="sub-h1-regular">{{ portfolio.description }}</span>
+                <h3 class="desk-header-3">{{ portfolio.title }}</h3>
+                <span class="mobile-header-2-regular">{{
+                  portfolio.description
+                }}</span>
               </div>
             </div>
           </div>
diff --git a/nuxt-frontend/components/flutter-app-development/CtaSection.vue b/nuxt-frontend/components/flutter-app-development/CtaSection.vue
index a02ffe86f..a2724a11d 100644
--- a/nuxt-frontend/components/flutter-app-development/CtaSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/CtaSection.vue
@@ -8,6 +8,7 @@
         :srcset="`${background400} 400w, ${background800} 800w`"
         class="h-full w-full object-cover md:object-top lg:hidden"
         alt="flutter-cta"
+        loading="lazy"
       />
       <img
         :src="background1200"
@@ -29,11 +30,13 @@
           <div
             class="flex flex-col gap-4 lg:gap-6 lg:text-left lg:flex-1 my-auto"
           >
-            <div class="text-black-core/[0.87]">
-              <p class="header-1">Let's code your success story together!</p>
+            <div class="text-black-87">
+              <p class="mobile-header-1 lg:desk-header-1">
+                Let's code your success story together!
+              </p>
             </div>
-            <div class="text-black-core/[0.6]">
-              <span class="sub-h1-regular">
+            <div class="text-black-60">
+              <span class="sub-h1-regular lg:mobile-header-2-regular">
                 Join hands with us for your next app endeavour.
               </span>
             </div>
@@ -43,7 +46,7 @@
                 to="/contact"
                 @click.native="$mixpanel.track('tap_flutter_development_cta')"
               >
-                <span class="sub-h3-semibold xl:sub-h4-semibold border-none"
+                <span class="sub-h3-semibold lg:sub-h1-semibold border-none"
                   >Connect With Us
                 </span>
                 <Icon name="fa6-solid:arrow-right" class="fa ml-3" />
diff --git a/nuxt-frontend/components/flutter-app-development/CtaSection2.vue b/nuxt-frontend/components/flutter-app-development/CtaSection2.vue
index a06c585ab..2d37598e7 100644
--- a/nuxt-frontend/components/flutter-app-development/CtaSection2.vue
+++ b/nuxt-frontend/components/flutter-app-development/CtaSection2.vue
@@ -8,11 +8,11 @@
       <div
         class="xs:mx-4 lg:!mx-0 flex flex-col gap-4 lg:gap-6 flex-[52.69%] my-auto"
       >
-        <p class="header-1 xl:header-2 text-black-core/[0.87]">
+        <p class="mobile-header-1 lg:desk-header-2 text-black-87">
           Crafting tomorrow's technology starts with one click.
           <span class="border-text"> Will you take the leap? </span>
         </p>
-        <span class="text-black-core/[0.6] sub-h1-regular"
+        <span class="text-black-60 sub-h1-regular lg:mobile-header-2-regular"
           >Discover how we can elevate your project.</span
         >
         <nuxt-link
@@ -20,7 +20,9 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_flutter_development_cta')"
         >
-          <span class="sub-h3-semibold border-none">Drop Us a Line </span>
+          <span class="sub-h3-semibold lg:mobile-header-3-semibold border-none"
+            >Drop Us a Line
+          </span>
           <Icon name="fa6-solid:arrow-right" class="fa ml-3" />
         </nuxt-link>
       </div>
@@ -37,7 +39,7 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_flutter_development_cta')"
         >
-          <span class="sub-h3-semibold xl:sub-h4-semibold border-none"
+          <span class="sub-h3-semibold lg:mobile-header-3-semibold border-none"
             >Drop Us a Line
           </span>
           <Icon name="fa6-solid:arrow-right" class="fa ml-3" />
diff --git a/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue b/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
index 1fef4c8c2..2e220a4e6 100644
--- a/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue
@@ -3,8 +3,12 @@
     class="py-14 lg:py-[7.5rem] bg-[#121212] text-white text-center 3xl:outer-container"
   >
     <div class="container flex flex-col gap-4 lg:gap-6 lg:pb-[4.5rem]">
-      <span class="header-2"> Flutter app development services </span>
-      <span class="sub-h1-regular text-white/[0.8]">
+      <span class="mobile-header-2 lg:desk-header-2">
+        Flutter app development services
+      </span>
+      <span
+        class="sub-h1-regular lg:mobile-header-2-regular text-white-core-80"
+      >
         We leverage Flutter's rich, customizable widgets and fast development
         capabilities to create beautiful and user-friendly apps that save you
         time and cost of platform-specific development.
@@ -44,13 +48,13 @@
           class="cursor-pointer px-4"
         >
           <div class="flex flex-col gap-4 py-8 px-4 bg-white/[0.08] rounded-xl">
-            <div class="header-3">
+            <div class="mobile-header-3-semibold">
               <span v-html="item.title"></span>
             </div>
-            <div class="sub-h3-medium text-white/[0.8]">
+            <div class="sub-h3-medium text-white-core-80">
               <span
                 v-html="item.description"
-                class="flex gap-4 flex-col text-white/[0.8]"
+                class="flex gap-4 flex-col text-white-core-80"
               ></span>
             </div>
           </div>
@@ -77,10 +81,10 @@
           ]"
         >
           <div class="flex flex-col flex-1 gap-6">
-            <div class="header-3">
+            <div class="desk-header-3">
               <span v-html="item.title"></span>
             </div>
-            <div class="sub-h3-regular">
+            <div class="mobile-header-3-medium">
               <span v-html="item.description"></span>
             </div>
           </div>
diff --git a/nuxt-frontend/components/flutter-app-development/FaqSection.vue b/nuxt-frontend/components/flutter-app-development/FaqSection.vue
index 17ce9a98b..bfd9836ea 100644
--- a/nuxt-frontend/components/flutter-app-development/FaqSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/FaqSection.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="bg-[#121212] text-white 3xl:outer-container">
-    <div class="container pt-14 pb-20 lg:pt-[7.5rem] lg:pb-10">
-      <p class="text-center header-2 mb-6 lg:mb-[4.5rem]">
+  <div class="bg-[#121212] text-white">
+    <div class="container pt-14 pb-20 lg:pt-[7.5rem] lg:pb-14">
+      <p
+        class="text-center mobile-header-2 lg:desk-header-2 mb-6 lg:mb-[4.5rem]"
+      >
         FAQs on Flutter app development
       </p>
       <transition-group tag="div" :name="'faq-' + faqTransitionName">
@@ -31,7 +33,9 @@
                     "
                   />
                 </div>
-                <div class="sub-h1-semibold w-[90%]">
+                <div
+                  class="sub-h1-semibold lg:mobile-header-2-semibold w-[90%]"
+                >
                   {{ faq.question }}
                 </div>
               </div>
@@ -43,7 +47,7 @@
                 >
                   <div class="w-[6%]"></div>
                   <div
-                    class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular text-white items-end"
+                    class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular lg:mobile-header-3-regular text-white items-end"
                     v-html="faq.answer"
                   ></div>
                 </div>
@@ -85,7 +89,9 @@
                       "
                     />
                   </div>
-                  <div class="sub-h1-semibold w-[90%]">
+                  <div
+                    class="sub-h1-semibold lg:mobile-header-2-semibold w-[90%]"
+                  >
                     {{ faq.question }}
                   </div>
                 </div>
@@ -97,7 +103,7 @@
                   >
                     <div class="w-[6%]"></div>
                     <div
-                      class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular text-white"
+                      class="faq-answer mt-4 w-[90%] animate-fadeIn sub-h3-regular lg:mobile-header-3-regular text-white"
                       v-html="faq.answer"
                     ></div>
                   </div>
@@ -123,7 +129,7 @@
         />
       </div>
     </div>
-    <div class="hidden lg:block container text-right pb-[8.75rem]">
+    <div class="hidden lg:block container text-right pb-[3.75rem]">
       <button
         v-if="isActivePrev"
         type="button"
@@ -136,7 +142,7 @@
           class="mr-2 h-5 w-5"
           name="fa6-solid:arrow-left"
           id="leftArrow"
-        /><span class="sub-h3-semibold xl:sub-h4-semibold">Back</span>
+        /><span class="sub-h1-semibold">Back</span>
       </button>
       <button
         v-else
@@ -146,9 +152,7 @@
         @click="slide(1)"
         @click.native="$mixpanel.track('tap_flutter_app_faq_next_arrow')"
       >
-        <span class="sub-h3-semibold xl:sub-h4-semibold"
-          >View More Questions</span
-        >
+        <span class="sub-h1-semibold">View More Questions</span>
         <Icon
           class="ml-2 h-5 w-5"
           name="fa6-solid:arrow-right"
diff --git a/nuxt-frontend/components/flutter-app-development/LandingSection.vue b/nuxt-frontend/components/flutter-app-development/LandingSection.vue
index 71419d464..94b036959 100644
--- a/nuxt-frontend/components/flutter-app-development/LandingSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/LandingSection.vue
@@ -1,11 +1,11 @@
 <template>
-  <section class="mt-6 lg:mt-28">
-    <div class="container lg:text-left text-center lg:flex pb-16 lg:pb-60">
+  <section class="mt-6 lg:mt-[6.75rem]">
+    <div class="container lg:text-left text-center lg:flex xl:my-8 pb-16">
       <div class="flex flex-col gap-4 lg:gap-6 lg:flex-1">
-        <h1 class="header-1 text-black-core/[0.87]">
-          Flutter app development company
+        <h1 class="mobile-header-1 lg:desk-header-1">
+          Flutter App Development Company
         </h1>
-        <p class="sub-h1-regular text-black-core/[0.6]">
+        <p class="sub-h1-regular lg:mobile-header-2-regular text-black-60">
           We harness the power of Flutter to create visually stunning, fast, and
           highly responsive applications that effortlessly work on both iOS and
           Android platforms. Our team turns your unique business requirements
@@ -18,7 +18,8 @@
             to="/contact"
             @click.native="$mixpanel.track('tap_flutter_development_cta')"
           >
-            <span class="sub-h3-semibold xl:sub-h4-semibold border-none"
+            <span
+              class="sub-h3-semibold lg:mobile-header-3-semibold border-none"
               >Get Free Consultation</span
             >
           </nuxt-link>
@@ -40,7 +41,9 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_flutter_development_cta')"
         >
-          <span class="sub-h3-semibold border-none">Get Free Consultation</span>
+          <span class="sub-h3-semibold lg:mobile-header-3-semibold border-none"
+            >Get Free Consultation</span
+          >
         </nuxt-link>
       </div>
     </div>
diff --git a/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue b/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue
index e995e4275..5cf076456 100644
--- a/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue
+++ b/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue
@@ -5,7 +5,7 @@
     <div
       class="container flex gap-6 lg:gap-[4.5rem] flex-col pt-12 xs:pt-14 sm:pt-[4.5rem] lg:!pt-[7.5rem] xl:!pt-24 lg:px-48"
     >
-      <div class="header-2">Our Success Stories</div>
+      <div class="mobile-header-2 lg:desk-header-2">Our Success Stories</div>
       <div class="flex flex-col gap-6 lg:gap-10">
         <img
           :src="quoteimage"
@@ -28,14 +28,18 @@
           >
             <swiper-slide v-for="(client, index) in clients" :key="index">
               <div class="flex flex-col gap-6 lg:gap-10">
-                <div class="sub-h1-semibold">"{{ client.review }}"</div>
+                <div class="sub-h1-semibold lg:mobile-header-2-semibold">
+                  "{{ client.review }}"
+                </div>
                 <div class="flex flex-col">
-                  <span class="sub-h3-semibold opacity-80">{{
-                    client.name
-                  }}</span>
-                  <span class="sub-h3-regular opacity-60">{{
-                    client.designation
-                  }}</span>
+                  <span
+                    class="sub-h3-semibold lg:mobile-header-3-semibold text-white-core-80"
+                    >{{ client.name }}</span
+                  >
+                  <span
+                    class="sub-h3-regular lg:mobile-header-3-regular text-white-core-60"
+                    >{{ client.designation }}</span
+                  >
                 </div>
               </div>
             </swiper-slide>
diff --git a/nuxt-frontend/components/home-new/BlogSection.vue b/nuxt-frontend/components/home-new/BlogSection.vue
index 833206879..d47ac3c0a 100755
--- a/nuxt-frontend/components/home-new/BlogSection.vue
+++ b/nuxt-frontend/components/home-new/BlogSection.vue
@@ -1,155 +1,163 @@
 <template>
-  <div class="my-8 lg:my-[7.813rem] text-black-core/[.87] overflow-hidden">
+  <section class="my-16 lg:my-60 text-black-87 h-full">
     <div class="container flex flex-col items-center m-auto w-full">
       <div class="container">
-        <p
-          class="text-black-core/[.03] text-[2.5rem] md:text-[3.75rem] xl:text-[5rem] leading-[1.875rem] md:leading-[4.0625rem] xl:leading-[5rem] text-center"
-        >
-          Blogs
-        </p>
+        <p class="text-[#F8F8F8] background-text text-center">Blogs</p>
         <h2
-          class="-mt-5 md:mt-[-50px] mx-auto xl:w-[65%] pb-9 md:pb-12 text-[1.875rem] leading-[2.438rem] md:text-[2.65rem] md:leading-[3.218rem] lg:text-[3.438rem] lg:leading-[4rem] text-center text-black-core/[0.87] font-roboto-bold"
+          class="-mt-5 md:mt-[-50px] mx-auto lg:w-[71%] xl:w-[65%] mobile-header-2 lg:desk-header-2 text-center"
         >
           Do we have a team with the right skills?
         </h2>
       </div>
-      <div class="mt-[1.125rem] lg:w-[65%]">
+      <div class="mt-4 lg:w-[80%]">
         <div
-          class="w-full text-center font-inter-medium text-black-core/[0.6] text-[1rem] md:text-[1.25rem] xl:text-[1.5rem] leading-[1.375rem] md:leading-8 xl:leading-[2.625rem]"
+          class="w-full text-center text-black-60 sub-h1-regular lg:mobile-header-2-regular"
         >
           Well, at least the community says Hell Yeah. Our blogs hosted on
           medium have
-          <span class="v2-canopas-gradient-text font-inter-bold">100k+</span>
+          <span class="secondary-color">100k+</span>
           minutes monthly reading time and it’s only rising.
         </div>
       </div>
     </div>
-    <div class="relative mt-12">
-      <img
-        v-if="width < 680"
-        :src="bgMobile"
-        loading="lazy"
-        class="md:hidden absolute top-0 -right-10 sm:-right-20 h-full"
-        alt="blog-background-image"
-      />
-    </div>
     <div
-      class="flex flex-col md:flex-row md:mt-16 z-[1] lg:min-h-[580px] md:pb-[15%] lg:py-0"
-      :class="width < 768 || width > 2000 ? 'container' : ''"
+      class="relative mt-8 h-full"
+      :class="width > 767 && width < 992 ? 'container' : ''"
     >
+      <div class="w-full h-full mr-0">
+        <img
+          :src="bgMobile"
+          class="md:hidden sm:ml-[153px] w-full sm:w-[80%] h-full object-cover"
+          alt="blog-background-image"
+        />
+      </div>
       <div
-        class="relative flex flex-col items-center md:items-start md:justify-center md:flex-[60%] md:ml-[5%] lg:ml-[10%] xl:ml-[15%]"
-        :class="width > 2000 ? 'ml-0' : ''"
+        class="absolute top-0 left-0 right-0 flex flex-col md:flex-row md:mt-8 lg:mt-16 z-[1] lg:min-h-[580px] md:pb-[15%] lg:py-0"
+        :class="width < 768 || width > 2000 ? 'container' : ''"
       >
         <div
-          v-for="(blog, index) in blogs"
-          :key="blog"
-          @mouseover="activeIndex = index"
-          @mouseleave="activeIndex = index"
-          @touchstart.passive="activeIndex = index"
-          @click.native="$mixpanel.track('tap_blog_post')"
-          class="w-full"
+          class="relative flex flex-col items-center md:items-start md:justify-center md:flex-[60%] lg:ml-[7%] xl:ml-[10%] 2xl:ml-[15%] xll:ml-[1%]"
+          :class="width > 2000 ? 'ml-0' : ''"
         >
-          <div class="flex flex-col 2xl:pr-16">
-            <hr
-              v-if="index == 0"
-              class="hidden md:block md:ml-[82px] 2xl:ml-[95px] h-[0.063rem]"
-            />
-            <div class="flex gap-8 mt-[18px] md:mt-[45px]">
-              <div class="flex flex-col items-center">
-                <span
-                  class="font-inter-semibold md:font-inter-regular text-[1.5rem] md:text-[2.188rem] 2xl:text-[3.125rem] leading-[1.95rem] md:leading-[2.183rem] 2xl:leading-[4.063rem]"
-                >
-                  {{ blog.pubDate[1] }}
-                </span>
-                <span
-                  class="text-center font-inter-medium md:font-inter-regular text-[0.75rem] md:text-[1rem] leading-4 2xl:leading-[1.125rem]"
-                >
-                  {{ blog.pubDate[0] }}
-                </span>
-              </div>
-
+          <div
+            v-for="(blog, index) in blogs"
+            :key="blog"
+            @mouseover="activeIndex = index"
+            @mouseleave="activeIndex = index"
+            @touchstart.passive="activeIndex = index"
+            @click.native="$mixpanel.track('tap_blog_post')"
+            class="md:w-[50%] 2xl:w-[55%] xll:w-[65%] 3xl:w-[55%] w-full"
+          >
+            <div class="flex flex-col 2xl:pr-16">
+              <hr
+                v-if="index == 0"
+                class="hidden md:block md:ml-[82px] 2xl:ml-[95px] h-[0.063rem]"
+              />
               <div
-                class="flex flex-col w-full"
-                @mouseover="
-                  activeBlog = blog;
-                  animate = true;
-                "
-                @mouseleave="animate = false"
-                @touchstart.passive="
-                  activeBlog = blog;
-                  animate = true;
-                "
-                @touchend="animate = false"
+                class="flex gap-8 md:gap-4 lg:gap-8 mt-[18px] md:mt-4 lg:mt-8"
               >
-                <div>
-                  <span
-                    @click="
-                      width > 768 ? openBlog(blog.link, 'tap_blog_post') : ''
-                    "
-                    :class="
-                      activeIndex == index
-                        ? 'bg-gradient-underline-out box-decoration-clone bg-no-repeat pb-[5px] transition-all duration-500 bg-[length:100%] hover:bg-gradient-underline-out'
-                        : 'bg-[length:0%]'
-                    "
-                    class="font-inter-semibold text-[1.125rem] md:text-[1.688rem] 2xl:text-[2.125rem] leading-[1.575rem] md:leading-[2.313rem] 2xl:leading-[3.188rem] cursor-pointer"
-                  >
-                    {{ blog.title }}</span
-                  >
-                </div>
                 <div
-                  class="flex flex-row justify-between mt-[0.9375rem] md:mt-[1.9375rem] font-inter-medium text-[0.875rem] lg:text-[1.125rem] leading-[0.8125rem] md:leading-[1.125rem] lg:leading-[1.463rem]"
+                  class="flex flex-col items-center text-black-87 lg:text-black-60"
                 >
-                  <span class="w-auto">
-                    {{ blog.author }}
+                  <span class="mobile-header-2 lg:desk-header-2">
+                    {{ blog.pubDate[1] }}
                   </span>
-                  <span
-                    @click="openBlog(blog.link, 'tap_blog_post')"
-                    class="lg:w-[7.938rem] cursor-pointer v2-canopas-gradient-text"
-                  >
-                    Read more
-                    <Icon
-                      class="arrow fa w-4 h-4 text-pink-300"
-                      name="fa6-solid:arrow-right-long"
-                      id="leftArrow"
-                    />
+                  <span class="text-center sub-h4-regular lg:sub-h4-medium">
+                    {{ blog.pubDate[0] }}
                   </span>
                 </div>
-                <hr class="h-[0.063rem] mt-[18px] md:mt-[45px] bg-[#C6C6C6]" />
+
                 <div
-                  v-if="activeIndex == index"
-                  @click="openBlog(blog.link, 'tap_blog_post')"
-                  class="block md:!hidden mt-4 w-full animate-fadeInRight"
+                  class="flex flex-col w-full"
+                  @mouseover="
+                    activeBlog = blog;
+                    animate = true;
+                  "
+                  @mouseleave="animate = false"
+                  @touchstart.passive="
+                    activeBlog = blog;
+                    animate = true;
+                  "
+                  @touchend="animate = false"
                 >
-                  <img
-                    :src="blog.thumbnail"
-                    class="object-cover"
-                    loading="lazy"
-                    :alt="blog.title"
-                  />
-                  <hr
-                    v-if="index != blogs.length - 1"
-                    class="md:hidden mt-4 h-[0.063rem] bg-[#C6C6C6]"
-                  />
+                  <div>
+                    <span
+                      @click="
+                        width > 768 ? openBlog(blog.link, 'tap_blog_post') : ''
+                      "
+                      :class="
+                        activeIndex == index
+                          ? 'bg-gradient-underline-out box-decoration-clone bg-no-repeat pb-[5px] transition-all duration-500 bg-[length:100%] hover:bg-gradient-underline-out'
+                          : 'bg-[length:0%]'
+                      "
+                      class="sub-h1-semibold lg:mobile-header-2-semibold xl:desk-header-3 text-black-87 cursor-pointer"
+                    >
+                      {{ blog.title }}</span
+                    >
+                  </div>
+                  <div
+                    class="flex flex-row justify-between mt-[0.9375rem] md:mt-4 lg:mt-8 text-black-60"
+                  >
+                    <span class="w-auto sub-h4-regular lg:sub-h1-semibold">
+                      {{ blog.author }}
+                    </span>
+                    <span
+                      @click="openBlog(blog.link, 'tap_blog_post')"
+                      class="lg:w-[7.938rem] cursor-pointer sub-h3-semibold lg:mobile-header-3-semibold lg:v2-canopas-gradient-text"
+                    >
+                      Read more
+                      <Icon
+                        class="!hidden lg:!inline-block arrow fa w-4 h-4 text-pink-300"
+                        name="fa6-solid:arrow-right-long"
+                        id="leftArrow"
+                      />
+                    </span>
+                  </div>
+                  <hr class="h-[0.063rem] mt-4 lg:mt-8 bg-[#C6C6C6]" />
+                  <div
+                    v-if="activeIndex == index"
+                    @click="openBlog(blog.link, 'tap_blog_post')"
+                    class="block md:!hidden mt-4 w-full animate-fadeInRight"
+                  >
+                    <img
+                      :src="blog.thumbnail"
+                      class="object-cover"
+                      loading="lazy"
+                      :alt="blog.title"
+                    />
+                    <hr
+                      v-if="index != blogs.length - 1"
+                      class="md:hidden mt-4 h-[0.063rem] bg-[#C6C6C6]"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="hidden md:block relative flex-[40%]">
+      <div class="hidden md:flex lg:justify-end 3xl:justify-center flex-[40%]">
         <div>
           <img
+            v-if="(width > 767 && width < 991) || width > 3839"
+            :src="bgNew"
+            loading="lazy"
+            class="3xl:w-[55%] 3xl:mr-0 relative ml-[300px] 3xl:ml-[1156px] mt-[30px] 3xl:-mt-[24px]"
+            alt="blog-background-image"
+          />
+          <img
+            v-else
             :src="bg"
             loading="lazy"
-            class="absolute top-[50%] -right-4 -translate-y-1/2"
+            class="relative mt-14 lg:mt-[4.5rem]"
             alt="blog-background-image"
           />
+
           <img
             v-if="activeBlog !== null"
             @click="openBlog(activeBlog.link, 'tap_blog_post')"
             :src="activeBlog.thumbnail"
-            class="inline-block absolute inset-0 m-auto w-[90%] cursor-pointer"
+            class="absolute inline-block inset-0 m-auto w-[90%] md:top-8 lg:top-[5.5rem] xl:top-[7.5rem] 3xl:-top-[3.5rem] md:w-[47%] lg:w-[37%] xl:w-[35%] 2xl:w-[30%] xll:w-[26%] 3xl:w-[17%] md:-right-[387px] lg:-right-[570px] xl:-right-[680px] 2xl:-right-[945px] xll:-right-[1600px] 3xl:-right-[1246px] cursor-pointer"
             :class="animate ? 'animate-fadeInRight' : ''"
             loading="lazy"
             :alt="activeBlog.title"
@@ -157,12 +165,13 @@
         </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script type="module">
 import bgMobile from "@/assets/images/blog/bg/bg400.svg";
 import bg from "@/assets/images/blog/bg/bg2400.svg";
+import bgNew from "@/assets/images/blog/bg/bg.webp";
 import axios from "axios";
 import Config from "@/config.js";
 import { openBlog } from "@/utils.js";
@@ -174,6 +183,7 @@ export default {
       width: 680,
       bgMobile,
       bg,
+      bgNew,
       blogsURL: Config.BLOG_URL,
       blogs: [],
       activeIndex: 0,
diff --git a/nuxt-frontend/components/home-new/CaseStudy.vue b/nuxt-frontend/components/home-new/CaseStudy.vue
index 7e39091db..0629c09db 100644
--- a/nuxt-frontend/components/home-new/CaseStudy.vue
+++ b/nuxt-frontend/components/home-new/CaseStudy.vue
@@ -1,50 +1,19 @@
 <template>
-  <section class="mt-[7.813rem] font-inter-regular">
-    <div
-      v-if="currentRoutePath == '/portfolio'"
-      class="text-center mt-8 lg:mt-36 pb-9 md:pb-20 text-[#3d3d3d] font-futura-bold text-[4.5rem] md:text-[5.625rem] lg:text-[7.5rem] leading-[6rem] md:leading-[7.625rem] lg:leading-[9rem]"
-    >
-      <h1>Portfolio</h1>
-    </div>
-    <div v-else>
-      <p
-        class="text-black-core/[.03] text-[2.5rem] md:text-[3.75rem] xl:text-[5rem] leading-[1.875rem] md:leading-[4.0625rem] xl:leading-[5rem] text-center"
-      >
-        Our Portfolio
-      </p>
+  <section class="mt-16 lg:mt-60 font-inter-regular">
+    <div>
+      <p class="text-[#F8F8F8] background-text text-center">Our Portfolio</p>
       <h2
-        class="container -mt-5 md:mt-[-50px] pb-9 md:pb-12 text-[1.875rem] leading-[2.438rem] md:text-[2.65rem] md:leading-[3.218rem] lg:text-[3.438rem] lg:leading-[4rem] text-center text-black-core/[0.87] font-roboto-bold"
+        class="container -mt-5 md:mt-[-50px] mobile-header-2 lg:desk-header-2 text-center text-black-87"
       >
-        Case Studies
+        Case studies
       </h2>
     </div>
-    <div
-      class="container flex justify-around m-auto w-[100%] sm:w-[95%] 2xl:w-[45%] rounded-[30px] bg-white py-[5px] drop-shadow-[0_2px_10px_rgba(61,61,61,0.1)]"
-    >
-      <a
-        v-for="(navbar, index) in navbars"
-        :key="index"
-        class="flex-[16.66%] m-0 w-full rounded-[25px] px-[5px] py-2 md:py-[13px] text-center tracking-[1px] text-[0.75rem] leading-[0.938rem] md:text-[1rem] md:leading-[1.1875rem] lg:text-[1.188rem] lg:leading-[1.438rem] font-inter-semibold active:scale-[0.98] portfolio-nav"
-        :class="[
-          currentRoutePath == navbar.url
-            ? 'gradient-btn hover:text-[#f2709c]'
-            : 'border border-solid border-transparent hover:from-[#ff835b] hover:to-[#f2709c] hover:bg-gradient-[270.11deg] text-black-core/[0.6] hover:text-white',
-
-          index == navbars.length - 1 ? '' : 'sm:mr-2.5',
-        ]"
-        :href="navbar.url"
-        @click.native="$mixpanel.track(navbar.event)"
-        :target="navbar.target ? '_blank' : '_self'"
-      >
-        {{ navbar.name }}
-      </a>
-    </div>
 
     <div
-      class="container py-12 md:py-20 lg:py-28 text-[1.375rem] leading-[1.625rem] md:text-[1.9375rem] md:leading-[1.812rem] lg:text-[2.5rem] lg:leading-[2rem] text-black-core/[0.87] text-center font-inter-medium"
+      class="container mt-4 mb-6 text-black-60 text-center sub-h1-regular lg:mobile-header-2-regular"
     >
       <span
-        class="relative after:absolute after:-bottom-0.5 after:right-0 after:content-[''] after:w-[116px] md:after:w-[152px] lg:after:w-[205px] after:h-2.5 md:after:h-3.5 after:bg-[#FFF3F7] after:-z-[1] v2-canopas-gradient-text"
+        class="sub-h1-semibold lg:mobile-header-2-semibold relative after:absolute after:-bottom-0.5 after:right-0 after:content-[''] after:w-[89px] md:after:w-[90px] lg:after:w-[108px] xl:after:w-[120px] after:h-2.5 md:after:h-3.5 after:bg-[#FFF3F7] after:-z-[1] secondary-color"
         >1M+ users</span
       >
       use our apps every day
diff --git a/nuxt-frontend/components/home-new/ClientReviewSection.vue b/nuxt-frontend/components/home-new/ClientReviewSection.vue
index fd45dea85..31a45c645 100755
--- a/nuxt-frontend/components/home-new/ClientReviewSection.vue
+++ b/nuxt-frontend/components/home-new/ClientReviewSection.vue
@@ -1,13 +1,9 @@
 <template>
-  <div class="container my-4 mt-[6.25rem] md:mt-[14.063rem] ml-auto mx-auto">
+  <div class="container mt-16 lg:mt-60 ml-auto mx-auto">
     <div class="swiper-content">
       <swiper
         :slidesPerView="1"
         :centeredSlides="true"
-        :autoplay="{
-          delay: 3000,
-          disableOnInteraction: false,
-        }"
         :loop="true"
         :spaceBetween="20"
         :pagination="pagination"
@@ -26,41 +22,71 @@
           class="cursor-pointer"
         >
           <div
-            class="mx-auto sm:px-10 md:px-6 lg:px-4 xl:px-24 sm:text-black-core/[0.87] text-black-900"
+            class="mx-auto sm:px-5 md:px-[5.8rem] lg:px-8 xl:px-24 text-black-87"
             :class="[client.className]"
           >
+            <a
+              class="md:hidden"
+              :href="clutchLink"
+              target="_blank"
+              @click.native="$mixpanel.track('tap_clutch_ratings')"
+            >
+              <div class="flex flex-row sm:justify-end w-full sm:w-fit">
+                <div class="flex flex-col sm:justify-center mt-1 sm:mt-[7px]">
+                  <span class="sm:justify-between sub-h4-regular">
+                    REVIEWED ON
+                  </span>
+
+                  <img
+                    :src="reviewImage"
+                    class="mr-2 w-[5.0625rem] h-[1.4375rem]"
+                    alt="reviewClutchImage"
+                  />
+                </div>
+                <div class="flex flex-col mt-2.5 sm:mt-5 sm:justify-end">
+                  <span class="flex flex-row">
+                    <Icon
+                      v-for="i in 5"
+                      :key="i"
+                      class="fa-star w-[12px] h-[12px] text-[#FFC700]"
+                      name="fa6-solid:star"
+                  /></span>
+
+                  <span class="sub-h4-regular"> 5.0 RATINGS </span>
+                </div>
+              </div>
+            </a>
             <div
-              class="font-roboto-medium text-[1.375rem] md:text-[2.25rem] lg:text-[3.125rem] leading-[1.875rem] md:leading-[2.75rem] lg:leading-[3.75rem] transition-all ease duration-500"
+              class="mt-8 md:mt-0 sub-h1-semibold lg:desk-header-3 transition-all ease duration-500"
               :class="reading ? 'scale-[0.98]' : ''"
               v-html="client.review"
             ></div>
-            <div class="flex flex-row justify-between mt-11 md:mt-20">
+            <div class="flex flex-row justify-between mt-8 md:mt-20">
               <div class="flex flex-col">
                 <span
-                  class="v2-canopas-gradient-text font-inter-semibold text-[1rem] md:text-[1.625rem]"
+                  class="sub-h3-regular lg:mobile-header-3-regular xl:sub-h2-medium"
                   >{{ client.name }}</span
                 >
                 <span
-                  class="text-[0.75rem] md:text-[1.25rem] leading-[1.375rem] text-black-core/[0.87]"
+                  class="sub-h4-regular lg:mobile-header-3-regular text-black-60"
                   >{{ client.designation }}</span
                 >
               </div>
               <a
+                class="hidden md:block"
                 :href="clutchLink"
                 target="_blank"
                 @click.native="$mixpanel.track('tap_clutch_ratings')"
               >
-                <div class="flex flex-row sm:justify-end w-[132px] sm:w-fit">
-                  <div class="flex flex-col sm:justify-center mt-1 sm:mt-[7px]">
-                    <span
-                      class="sm:justify-between mr-1 md:mr-2 text-[0.5rem] md:text-[0.625rem] leading-[1.375rem] text-black-core/[0.87]"
-                    >
+                <div class="flex flex-row sm:justify-end w-[166px]">
+                  <div class="flex flex-col sm:justify-center mt-1">
+                    <span class="sm:justify-between mr-2 sub-h4-medium">
                       REVIEWED ON
                     </span>
 
                     <img
                       :src="reviewImage"
-                      class="mr-2 w-[3.313rem] md:w-[4.25rem] h-[0.938rem] md:h-[1.188rem]"
+                      class="mr-2 w-[5.3125rem] h-[1.5rem]"
                       alt="reviewClutchImage"
                     />
                   </div>
@@ -69,15 +95,11 @@
                       <Icon
                         v-for="i in 5"
                         :key="i"
-                        class="fa-star w-[11px] md:w-4 h-[11px] md:h-4 text-[#FF3D2E]"
+                        class="fa-star w-[14px] h-[14px] text-[#FFC700]"
                         name="fa6-solid:star"
                     /></span>
 
-                    <span
-                      class="md:font-inter-regular text-[0.5rem] md:text-[0.75rem] leading-[1.375rem] text-black-core/[0.87]"
-                    >
-                      5.0 RATINGS
-                    </span>
+                    <span class="sub-h4-regular"> 5.0 RATINGS </span>
                   </div>
                 </div>
               </a>
@@ -108,7 +130,7 @@ export default {
           name: "Rebecca Kimura",
           className: "2xl:px-48",
           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 <span class="bg-single-color-underline
+          review: `“There was rarely ever a second explanation needed. Even if we struggled to explain technically what we wanted, they <span class="lg:bg-single-color-underline
             ">understood the first time.</span>”`,
         },
         {
@@ -116,7 +138,7 @@ export default {
           name: "Elyass Bouchater",
           className: "2xl:px-48",
           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 <span class="bg-single-color-underline
+          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 <span class="lg:bg-single-color-underline
             ">thanks to Canopas’ work.</span>”`,
         },
         {
@@ -124,7 +146,7 @@ export default {
           name: "Rob Eberhard",
           className: "2xl:px-52",
           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 <span class="bg-single-color-underline
+          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 <span class="lg:bg-single-color-underline
             ">high performing iOS app.</span>”`,
         },
         {
@@ -133,7 +155,7 @@ export default {
           className: "2xl:px-52",
           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
-            <span class="bg-single-color-underline
+            <span class="lg:bg-single-color-underline
             "> iOS and Android stores.</span>”`,
         },
         {
@@ -141,7 +163,7 @@ export default {
           name: "Cyril Trosset",
           className: "2xl:px-52",
           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 <span class="bg-single-color-underline
+          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 <span class="lg:bg-single-color-underline
             ">high quality apps.</span>”`,
         },
       ],
diff --git a/nuxt-frontend/components/home-new/ContributionSection.vue b/nuxt-frontend/components/home-new/ContributionSection.vue
index 852080e61..c1a664e18 100644
--- a/nuxt-frontend/components/home-new/ContributionSection.vue
+++ b/nuxt-frontend/components/home-new/ContributionSection.vue
@@ -1,21 +1,18 @@
 <template>
-  <div
-    class="relative xll:container my-0 mx-auto w-[90%] xll:max-w-[1500px] p-0"
-  >
+  <div class="relative container my-0 lg:mb-60 mx-auto">
     <div class="sticky top-0 w-full h-screen">
-      <div class="flex flex-col justify-center w-[30%] h-full float-right">
+      <div
+        class="flex flex-col justify-center w-[36%] xl:w-[39%] h-full float-right xl:pl-12"
+      >
         <span
-          class="font-inter-bold text-black-core/[.87] text-[1.875rem] md:text-[3.4375rem] leading-10 md:leading-[5.5625rem]"
+          class="text-black-87 mobile-header-2 lg:mobile-header-1 xl:desk-header-2"
         >
           We are here to Contribute
         </span>
-        <div
-          class="mt-2 md:mt-0 font-inter-medium text-black-core/[0.6] text-[1.5rem] leading-[2.5625rem]"
-        >
+        <div class="mt-2 md:mt-0 text-black-60 mobile-header-2-regular">
           <span>and that starts with the site itself, </span>
-          <br />
           <a
-            class="relative bg-gradient-[1deg] pb-[5px] v2-canopas-gradient-text font-inter-medium gradient-underline no-underline cursor-pointer after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-gradient-to-l after:to-pink-300 after:from-orange-300"
+            class="mobile-header-2-semibold relative bg-gradient-[1deg] pb-[5px] v2-canopas-gradient-text gradient-underline no-underline cursor-pointer after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-gradient-to-l after:to-pink-300 after:from-orange-300"
             :href="websiteOpenSourceUrl"
             target="_blank"
             @click.native="$mixpanel.track('tap_canopas_website_github')"
@@ -24,39 +21,31 @@
         </div>
       </div>
     </div>
-    <div
-      class="flex flex-col -mt-[95vh] mb-0 ml-8 xl:ml-32 xll:ml-0 w-[55%] xll:w-[65%]"
-    >
+    <div class="flex flex-col -mt-[90vh] mb-0 w-[62%] xl:w-[60%]">
       <div
         v-for="(contribution, index) in contributions"
         :key="contribution"
         class="relative flex flex-row mt-8 mb-6 cursor-pointer"
         :class="index % 2 != 0 ? 'flex-row-reverse' : ''"
       >
-        <div class="shadow-[2px_2px_10px_rgba(0,0,0,0.1)]">
-          <video
-            class="lozad"
-            autoplay
-            loop
-            muted
-            playsinline
-            style="height: 690px"
-          >
-            <source :data-src="contribution.video[1]" type="video/webm" />
-            <source :data-src="contribution.video[0]" type="video/mp4" />
-          </video>
-        </div>
+        <video
+          class="lozad rounded-xl z-[1] shadow-[2px_2px_10px_rgba(0,0,0,0.1)]"
+          autoplay
+          loop
+          muted
+          playsinline
+          style="height: 630px"
+        >
+          <source :data-src="contribution.video[1]" type="video/webm" />
+          <source :data-src="contribution.video[0]" type="video/mp4" />
+        </video>
 
         <div
           @click="
             openBlog(contribution.link, 'tap_home_github_contribution_section')
           "
-          class="absolute xl:relative lg:top-[50%] flex flex-col basis-[40%] lg:basis-[43%] xl:basis-[50%] 2xl:basis-[40%] my-auto lg:w-[60%] xl:w-[100%] lg:translate-y-[-50%] xl:translate-y-0 bg-[#FFFFFF] p-4 xl:p-8 shadow-[0_0px_10px_rgba(0,0,0,0.1)] active:scale-[0.98]"
-          :class="[
-            index % 2 == 0
-              ? 'lg:left-[40%] xl:left-[unset]'
-              : 'lg:right-[40%] xl:right-[unset]',
-          ]"
+          class="relative flex flex-col basis-[50%] xl:basis-[60%] my-auto w-[100%] translate-y-0 bg-[#FFFFFF] p-4 xl:p-8 shadow-[0_0px_10px_rgba(0,0,0,0.1)] active:scale-[0.98]"
+          :class="[index % 2 == 0 ? 'rounded-r-xl' : 'rounded-l-xl']"
         >
           <div>
             <div
@@ -64,7 +53,7 @@
               class="flex flex-row justify-between items-center"
             >
               <div
-                class="flex items-center justify-center w-[4.75rem] h-[1.875rem] rounded-full bg-gradient-[270.11deg] from-[#ff835b] to-[#f2709c] px-2.5 font-inter-semibold text-[1rem] text-white"
+                class="flex items-center xl:sub-h1-semibold sub-h4-medium justify-center w-[3.9375rem] h-[2.125rem] xl:w-[5.0625rem] xl:h-[2.25rem] rounded bg-gradient-[270.11deg] from-[#ff835b] to-[#f2709c] xl:px-2.5 text-white"
               >
                 <span>
                   <Icon
@@ -76,13 +65,13 @@
               <div>
                 <div>
                   <a
-                    class="flex items-center font-inter-bold text-[1.25rem] leading-[2.5625rem] duration-300 ease-in-out hover:scale-[1.1]"
+                    class="flex items-center lg:sub-h4-medium xl:mobile-header-3-semibold duration-300 ease-in-out hover:scale-[1.1]"
                     :href="contribution.link"
                     target="_blank"
                     @click.native="$mixpanel.track('tap_library')"
                   >
                     <Icon
-                      class="mr-2.5 w-[1.75rem] h-[1.75rem] text-pink-300"
+                      class="mr-2.5 w-4 h-4 xl:w-7 xl:h-7 footer-icon"
                       name="fa6-brands:github"
                     />
                     <div class="v2-canopas-gradient-text">GitHub</div>
@@ -91,20 +80,18 @@
               </div>
             </div>
             <div>
-              <p
-                class="mt-[41px] font-inter-semibold text-black-core/[0.87] text-[1.875rem] leading-8"
-              >
+              <p class="mt-[41px] text-black-87 mobile-header-2-semibold">
                 {{ contribution.title }}
               </p>
             </div>
             <div class="mt-5">
               <span
-                class="font-inter-light text-black-core/[0.6] text-[1.25rem] leading-[1.578rem]"
+                class="text-black-60 sub-h3-regular xl:mobile-header-3-regular"
                 >{{ contribution.description }}</span
               >
             </div>
             <div
-              class="flex flex-row justify-between mt-[30px] font-inter-regular text-black-core/[0.87] text-base"
+              class="flex flex-row justify-between mt-[30px] text-black-87 sub-h4-regular xl:sub-h1-regular"
             >
               <span>by {{ contribution.author }}</span>
               <a
@@ -115,7 +102,7 @@
                 @click.native="$mixpanel.track('tap_library')"
               >
                 <Icon
-                  class="arrow fa w-4 h-4 box-content"
+                  class="arrow fa w-5 h-5 box-content"
                   name="fa6-solid:arrow-right-long"
                   id="leftArrow"
                 />
@@ -153,7 +140,7 @@ export default {
       contributions: [
         {
           title: "Intro Showcase view in jetpack compose",
-          stars: "275",
+          stars: config.INTRO_SHOWCASE_STARS,
           description:
             "Highlight different features of the app using Jetpack Compose",
           author: "Radhika S.",
@@ -162,7 +149,7 @@ export default {
         },
         {
           title: "UIPilot",
-          stars: "228",
+          stars: config.UIPILOT_STARS,
           description: "The missing typesafe SwiftUI navigation library",
           author: "Jimmy S.",
           video: [uIPilotMp4, uIPilotWebm],
@@ -170,7 +157,7 @@ export default {
         },
         {
           title: "Jetpack Compose animations",
-          stars: "203",
+          stars: config.JETPACK_COMPOSE_ANIMATION_STARS,
           description: "Cool animations implemented with Jetpack compose",
           author: "Radhika S.",
           video: [jcAnimationsMp4, jcAnimationsWebm],
diff --git a/nuxt-frontend/components/home-new/ContributionSectionMobile.vue b/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
index a86c7c3fc..f4a3cac6a 100644
--- a/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
+++ b/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
@@ -1,19 +1,16 @@
 <template>
-  <div class="container justify-center mt-20 text-center">
-    <div class="m-auto w-[290px] sm:w-full pb-14 md:pb-20">
-      <span
-        class="font-inter-bold text-black-core/[.87] text-[1.875rem] md:text-[3.4375rem] leading-10 md:leading-[5.5625rem]"
-      >
+  <div
+    class="container justify-center mt-36 sm:mt-20 md:mt-24 mb-16 text-center"
+  >
+    <div class="m-auto w-[290px] sm:w-full pb-14 md:pb-8">
+      <span class="mobile-header-2 lg:desk-header-2 text-black-87">
         We are here to Contribute
       </span>
-      <div
-        class="mt-2 md:mt-0 font-inter-medium text-black-core/[0.6] text-[1rem] leading-[1.375rem] md:text-[1.5rem] md:leading-[2.5625rem]"
-      >
+      <div class="mt-4 sub-h1-regular w-full mx-auto text-black-60">
         <span>and that starts with the site itself, </span>
-        <br />
         <span>
           <a
-            class="relative bg-gradient-[1deg] pb-[5px] v2-canopas-gradient-text font-inter-medium gradient-underline no-underline after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-gradient-to-l after:to-pink-300 after:from-orange-300"
+            class="relative bg-gradient-[1deg] pb-[5px] v2-canopas-gradient-text sub-h3-semibold gradient-underline no-underline after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-gradient-to-l after:to-pink-300 after:from-orange-300"
             :href="websiteOpenSourceUrl"
             target="_blank"
             @click.native="$mixpanel.track('tap_canopas_website_github')"
@@ -22,90 +19,82 @@
         >
       </div>
     </div>
-    <div class="text-left">
+    <div
+      v-for="(contribution, index) in contributions"
+      :key="contribution"
+      class="relative flex mt-8 w-full text-left"
+      :class="index % 2 != 0 ? 'flex-row-reverse' : 'flex-row'"
+    >
+      <div class="w-[45%] shadow-[2px_2px_10px_rgba(0,0,0,0.1)] rounded-xl">
+        <video class="lozad rounded-xl" autoplay loop muted playsinline>
+          <source :data-src="contribution.video[1]" type="video/webm" />
+          <source :data-src="contribution.video[0]" type="video/mp4" />
+        </video>
+      </div>
+
       <div
-        v-for="(contribution, index) in contributions"
-        :key="contribution"
-        class="relative flex justify-center mt-8 w-full"
-        :class="index % 2 != 0 ? 'flex-row-reverse' : 'flex-row'"
+        @click="
+          openBlog(contribution.link, 'tap_home_github_contribution_section')
+        "
+        class="absolute top-[50%] flex flex-col w-[67%] md:w-[52%] translate-y-[-50%] bg-[#FFFFFF] p-2.5 sm:p-4 shadow-[0_0px_10px_rgba(0,0,0,0.1)] active:scale-[0.98] rounded-xl md:rounded"
+        :class="[
+          index % 2 == 0
+            ? 'left-[32%] md:left-[48%]'
+            : 'right-[32%] md:right-[48%]',
+        ]"
       >
-        <div class="w-[45%] shadow-[2px_2px_10px_rgba(0,0,0,0.1)]">
-          <video class="lozad" autoplay loop muted playsinline>
-            <source :data-src="contribution.video[1]" type="video/webm" />
-            <source :data-src="contribution.video[0]" type="video/mp4" />
-          </video>
-        </div>
-
-        <div
-          @click="
-            openBlog(contribution.link, 'tap_home_github_contribution_section')
-          "
-          class="absolute top-[50%] flex flex-col w-[50%] translate-y-[-50%] bg-[#FFFFFF] p-2.5 sm:p-4 shadow-[0_0px_10px_rgba(0,0,0,0.1)] active:scale-[0.98]"
-          :class="[index % 2 == 0 ? 'left-[50%]' : 'right-[50%]']"
-        >
-          <div>
+        <div>
+          <div
+            :class="index % 2 != 0 ? 'flex-row-reverse' : ''"
+            class="flex flex-row justify-between items-center"
+          >
             <div
-              :class="index % 2 != 0 ? 'flex-row-reverse' : ''"
-              class="flex flex-row justify-between items-center"
+              class="flex items-center justify-center w-[2.938rem] h-[1.375rem] md:w-[3.9375rem] md:h-[2.125rem] from-[#f2709c] to-[#ff835b] px-[3px] py-[2px] bg-gradient-[270.11deg] rounded sub-h4-semibold text-white"
             >
-              <div
-                class="flex items-center justify-center w-[2.625rem] md:w-[4.75rem] h-[1.125rem] md:h-[1.875rem] from-[#ff835b] to-[#f2709c] bg-gradient-[270.11deg] rounded-full md:px-2.5 font-inter-bold md:font-inter-semibold text-[0.625rem] md:text-[1rem] text-white"
-              >
-                <span>
-                  <Icon
-                    class="fa w-2.5 md:w-[18px] h-[10px] md:h-2.5 pr-[5px] text-white box-content mb-[0.225em]"
-                    name="fa6-solid:star"
-                  />{{ contribution.stars }}</span
-                >
-              </div>
-              <div>
-                <div>
-                  <a
-                    class="flex items-center font-inter-bold text-[0.75rem] md:text-[1.25rem] leading-[2.5625rem] duration-300 ease-in-out hover:scale-[1.1]"
-                    :href="contribution.link"
-                    target="_blank"
-                    @click.native="$mixpanel.track('tap_library')"
-                  >
-                    <Icon
-                      class="mr-1 md:mr-2.5 w-4 md:w-[1.75rem] h-4 md:h-7 text-pink-300"
-                      name="fa6-brands:github"
-                    />
-                    <div class="v2-canopas-gradient-text">GitHub</div>
-                  </a>
-                </div>
-              </div>
-            </div>
-            <div>
-              <p
-                class="md:mt-[41px] font-inter-semibold text-black-core/[0.87] text-[1rem] md:text-[1.875rem] leading-[1.3rem] md:leading-8"
-              >
-                {{ contribution.title }}
-              </p>
-            </div>
-            <div class="mt-5">
-              <span
-                class="hidden md:block font-inter-light text-[1.25rem] leading-[1.578rem] text-black-core/[0.6]"
-                >{{ contribution.description }}</span
+              <span>
+                <Icon
+                  class="fa w-3 h-3 pr-[5px] box-content mb-[0.225em]"
+                  name="fa6-solid:star"
+                />{{ contribution.stars }}</span
               >
             </div>
-            <div
-              class="flex flex-row justify-between mt-2.5 md:mt-[30px] font-inter-regular text-black-core/[0.87] text-[0.625rem] md:text-[1rem] leading-[0.9375rem] md:leading-[1.5rem]"
+            <a
+              class="flex items-center sub-h4-semibold"
+              :href="contribution.link"
+              target="_blank"
+              @click.native="$mixpanel.track('tap_library')"
             >
-              <span>by {{ contribution.author }}</span>
-              <a
-                class="duration-300 ease-in-out hover:scale-[1.1]"
-                :href="contribution.link"
-                :aria-label="contribution.title"
-                target="_blank"
-                @click.native="$mixpanel.track('tap_library')"
-              >
-                <Icon
-                  class="arrow fa w-4 h-4 box-content"
-                  name="fa6-solid:arrow-right-long"
-                  id="leftArrow"
-                />
-              </a>
-            </div>
+              <Icon
+                class="mr-1 md:mr-2.5 w-4 md:w-[1.75rem] h-4 md:h-7 footer-icon"
+                name="fa6-brands:github"
+              />
+              <div class="v2-canopas-gradient-text">GitHub</div>
+            </a>
+          </div>
+          <p class="mt-4 sub-h3-semibold text-black-87 w-[73%] md:w-full">
+            {{ contribution.title }}
+          </p>
+          <div class="mt-3 hidden md:block">
+            <span class="sub-h3-regular text-black-60">{{
+              contribution.description
+            }}</span>
+          </div>
+          <div
+            class="flex flex-row justify-between mt-3 md:mt-6 sub-h4-regular text-black-60"
+          >
+            <span>by {{ contribution.author }}</span>
+            <a
+              :href="contribution.link"
+              :aria-label="contribution.title"
+              target="_blank"
+              @click.native="$mixpanel.track('tap_library')"
+            >
+              <Icon
+                class="arrow fa w-4 h-4 box-content text-black-87"
+                name="fa6-solid:arrow-right-long"
+                id="leftArrow"
+              />
+            </a>
           </div>
         </div>
       </div>
@@ -138,24 +127,28 @@ export default {
       contributions: [
         {
           title: "Intro Showcase view in jetpack compose",
-          stars: "275",
+          stars: config.INTRO_SHOWCASE_STARS,
+          description:
+            "Highlight different features of the app using Jetpack Compose",
           author: "Radhika S.",
           video: [introShowCaseMp4, introShowCaseWebm],
           link: "https://github.com/canopas/Intro-showcase-view",
         },
         {
           title: "UIPilot",
-          stars: "228",
+          stars: config.UIPILOT_STARS,
+          description: "The missing typesafe SwiftUI navigation library",
           author: "Jimmy S.",
           video: [uIPilotMp4, uIPilotWebm],
           link: "https://github.com/canopas/UIPilot",
         },
         {
           title: "Jetpack Compose animations",
-          stars: "203",
+          stars: config.JETPACK_COMPOSE_ANIMATION_STARS,
+          description: "Cool animations implemented with Jetpack compose",
           author: "Radhika S.",
           video: [jcAnimationsMp4, jcAnimationsWebm],
-          link: "https://github.com/canopas/Jetpack-compose-animations-examples",
+          link: "https://github.com/canopas/compose-animations-examples",
         },
       ],
     };
diff --git a/nuxt-frontend/components/home-new/HomeIndex.vue b/nuxt-frontend/components/home-new/HomeIndex.vue
index 43c7b1f6b..8010cec9f 100644
--- a/nuxt-frontend/components/home-new/HomeIndex.vue
+++ b/nuxt-frontend/components/home-new/HomeIndex.vue
@@ -2,12 +2,8 @@
   <div>
     <ScreenHeader />
     <LandingSection ref="landing" />
-    <ServiceSection class="hidden md:block" ref="service" v-if="width > 768" />
-    <ServiceSectionMobile
-      class="block md:hidden"
-      ref="service"
-      v-if="width <= 768"
-    />
+    <ServiceSection class="hidden lg:block" ref="service" />
+    <ServiceSectionMobile class="block lg:hidden" ref="service" />
     <CaseStudy ref="casestudies" />
     <ClientReview ref="clientReview" />
     <BlogSection ref="blogs" />
@@ -21,11 +17,10 @@
       class="block lg:hidden"
       ref="contributions"
     />
-    <CTASection
-      ref="cta"
-      class="!mt-[100px] md:!mt-[220px] pt-10 bg-black-core/[0.85] mb-[-15px]"
+    <CTASection ref="cta" class="pt-10 bg-[#121212]" />
+    <NewFooter
+      class="bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"
     />
-    <NewFooter />
   </div>
 </template>
 
diff --git a/nuxt-frontend/components/home-new/LandingSection.vue b/nuxt-frontend/components/home-new/LandingSection.vue
index de0c0ae67..7de709217 100644
--- a/nuxt-frontend/components/home-new/LandingSection.vue
+++ b/nuxt-frontend/components/home-new/LandingSection.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative bg-gradient-to-t from-pink-300/[0.05] to-white landing-bg-mobile-clip-path md:landing-bg-clip-path overflow-hidden px-0 pb-[3.125rem] md:pb-[6.25rem] font-inter-regular"
+    class="relative bg-gradient-to-t from-pink-300/[0.05] to-white landing-bg-mobile-clip-path md:landing-bg-clip-path overflow-hidden px-0 pb-[3.125rem] md:pb-[6.25rem] 3xl:outer-container"
   >
     <img
       :src="background2100"
@@ -11,9 +11,12 @@
     />
 
     <div
-      class="container flex flex-col items-center lg:flex-row-reverse lg:items-start pb-[1.563rem] md:pb-[3.125rem]"
+      class="container flex flex-col items-center lg:flex-row-reverse lg:items-start pb-[1.563rem] lg:pb-[3.125rem]"
     >
-      <aspect-ratio class="flex-[45%] lg:block hidden mt-10" height="66%">
+      <aspect-ratio
+        class="flex-[45%] lg:block hidden mt-10 2xl:mt-6"
+        height="66%"
+      >
         <img
           class="w-full h-full object-contain"
           :src="landing800"
@@ -21,90 +24,86 @@
           alt="landing-view-image"
         />
       </aspect-ratio>
-      <div class="flex-[55%] flex flex-col mt-10 md:mt-5 lg:mt-[6.25rem]">
+      <div
+        class="flex-[55%] flex flex-col items-center lg:items-start mt-6 lg:mt-[6.25rem]"
+      >
         <h1
-          class="w-[100%] sm:w-[85%] pb-5 lg:pb-8 xl:pb-10 tracking-[0] text-[2.1875rem] leading-[2.8125rem] md:text-[2.65625rem] md:leading-[3.28125rem] lg:text-[3.28125rem] lg:leading-[3.70625rem] 2xl:text-[4.0625rem] 2xl:leading-[4.6875rem] text-black-core/[.87] font-roboto-bold v2-header-3-text"
+          class="text-center lg:text-left w-full md:w-[95%] lg:w-[90%] xl:w-[94%] 2xl:w-[81%] mobile-header-1 lg:desk-header-2 xl:desk-header-1"
         >
-          For Over A Decade We Have Helped Businesses Grow Exponentially.
-          <div>
-            — <span class="canopas-gradient-text"> Is Yours Next?</span>
-          </div>
+          For over a decade we have helped businesses grow exponentially.
+          <div>- <span class="primary-color"> Is Yours Next?</span></div>
         </h1>
         <div
-          class="w-[85%] md:w-[65%] pb-[29.5px] md:pb-[47px] v2-normal-text tracking-[0] text-[1rem] leading-[1.375rem] md:text-[1.09375rem] md:leading-[1.53125rem] lg:text-[1.1875rem] lg:leading-7 text-black-core/[0.6] font-inter-regular"
+          class="sub-h1-regular lg:mobile-header-2-regular text-black-60 w-full md:w-[75%] lg:w-full 2xl:w-[89%] pt-4 lg:pt-6 text-center lg:text-left"
         >
           We develop Mobile and Web apps that help you
-          <span
-            class="bg-no-repeat bg-bottom bg-[length:100%_2.5px] bg-gradient-underline pb-[3px] font-inter-bold"
-            >generate more revenue,</span
-          >&nbsp;
-          <span
-            class="bg-no-repeat bg-bottom bg-[length:100%_2.5px] bg-gradient-underline pb-[3px] font-inter-bold"
-            >acquire new users,</span
+          <span class="sub-h1-semibold lg:mobile-header-2-semibold"
+            >generate more revenue, acquire new users,</span
           >
           and
-          <span
-            class="bg-no-repeat bg-bottom bg-[length:100%_2.5px] bg-gradient-underline pb-[3px] font-inter-bold"
+          <span class="sub-h1-semibold lg:mobile-header-2-semibold"
             >deliver an exceptional user experience.</span
           >
         </div>
 
-        <div class="flex items-center flex-col-reverse lg:flex-row">
+        <div
+          class="flex items-center flex-col-reverse lg:flex-row xl:pt-[1.5rem]"
+        >
           <div class="text-center">
             <nuxt-link
-              class="flex items-center w-max !m-0 rounded-full p-3 text-center gradient-btn consultation-btn"
+              class="gradient-btn primary-btn"
               to="/contact"
               @click.native="$mixpanel.track('tap_landing_cta')"
             >
-              <span
-                class="mr-2.5 font-normal text-[1rem] leading-[1.1875rem] md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem] font-inter-medium !tracking-[0]"
+              <span class="sub-h3-semibold lg:sub-h1-semibold"
                 >Get Free Consultation
               </span> </nuxt-link
-            ><small
-              class="lg:hidden font-inter-regular text-black-core/[0.6] text-[0.75rem] leading-[1.125rem]"
-              >100% MONEY BACK GUARANTEE <br />
-              FOR 14 DAYS</small
+            ><small class="lg:hidden sub-h4-regular text-black-60"
+              >100% MONEY BACK GUARANTEE FOR <br />
+              TWO WEEKS</small
             >
           </div>
 
-          <div class="flex items-center pb-3.5 md:pl-7 lg:pl-3 xl:pl-7 lg:pb-0">
+          <div
+            class="flex items-center pt-4 md:pl-7 lg:pl-3 xl:pl-[4.62rem] lg:pb-0"
+          >
             <div v-for="client in clients" :key="client">
               <div
                 v-if="client.image"
-                class="rounded-full"
+                class="rounded-full border-[2px] border-[#EBEBEB]"
                 :class="client.className"
               >
                 <img
                   :src="client.image"
-                  class="w-10 md:w-[50px] h-10 md:h-[50px] object-cover"
+                  class="w-10 h-10 object-cover"
                   loading="lazy"
                   alt="client-image"
                 />
               </div>
               <a v-if="client.plusIcon" href="/contact" aria-label="contact">
                 <div
-                  class="w-10 md:w-[50px] h-10 md:h-[50px] border-[3px] border-white rounded-full bg-[#ffc4c0]"
+                  class="w-10 h-10 border-[2px] border-[#EBEBEB] rounded-full bg-white"
                   :class="client.className"
                 >
                   <Icon
-                    class="fa w-[35px] md:w-[45px] h-[23px] pt-[5px] md:pt-2.5 text-white box-content"
+                    class="fa w-[18px] lg:w-[20px] h-[18px] lg:h-[20px] pt-[7px] lg:pt-[0.525rem] text-[#999999] box-content pl-2"
                     name="fa6-solid:plus"
                   />
                 </div>
               </a>
             </div>
             <div class="pl-2.5 md:pl-1.5">
-              <div class="flex justify-between mt-[3px]">
+              <div class="flex mt-[3px]">
                 <Icon
                   v-for="i in 5"
                   :key="i"
-                  class="fas w-3.5 h-3.5 p-px text-[#FF3D2E] box-content"
+                  class="fas w-3.5 h-3.5 p-px text-[#FFC700] box-content"
                   name="fa6-solid:star"
                 />
               </div>
               <div class="">
                 <span
-                  class="font-medium text-[12px] leading-[22px] uppercase text-black-core/[0.6] tracking-[0]"
+                  class="sub-h4-regular lg:sub-h4-medium uppercase text-black-60"
                 >
                   40+ Reviews
                 </span>
@@ -113,11 +112,11 @@
           </div>
         </div>
         <small
-          class="hidden lg:block w-[74%] xl:w-[56%] pt-3 lg:pt-4 text-[0.875rem] leading-[1.125rem] text-black-core/[0.6]"
+          class="hidden lg:block w-[74%] xl:w-[72%] pt-3 lg:pt-4 sub-h4-medium text-black-60"
         >
           We offer a
-          <span class="font-inter-bold"
-            >100% MONEY BACK GUARANTEE FOR 14 DAYS
+          <span class="secondary-color"
+            >100% MONEY BACK GUARANTEE FOR TWO WEEKS
           </span>
           if you don't like our work. No questions asked.
         </small>
@@ -140,7 +139,6 @@ import AspectRatio from "../utils/AspectRatio.vue";
 export default {
   data() {
     return {
-      width: 680,
       landing400,
       landing800,
       background400,
@@ -175,8 +173,5 @@ export default {
     AspectRatio,
   },
   inject: ["mixpanel"],
-  mounted() {
-    this.width = window.innerWidth;
-  },
 };
 </script>
diff --git a/nuxt-frontend/components/home-new/PortfolioCTASection.vue b/nuxt-frontend/components/home-new/PortfolioCTASection.vue
index b32752b53..8f399bde3 100644
--- a/nuxt-frontend/components/home-new/PortfolioCTASection.vue
+++ b/nuxt-frontend/components/home-new/PortfolioCTASection.vue
@@ -1,29 +1,25 @@
 <template>
   <div
-    class="from-[#F98584] to-[#F47695] bg-gradient-[180deg] font-inter-regular mt-[2.813rem] lg:mt-[7.813rem]"
+    class="h-[352px] lg:h-[420px] xl:h-[476px] from-[#FF835B] to-[#F2709C] bg-gradient-[174deg] lg:bg-gradient-[180deg] 3xl:outer-container"
   >
-    <div class="container flex flex-col lg:flex-row">
-      <div class="hidden lg:block lg:w-[45%] xl:w-[50%]">
+    <div class="container flex flex-col lg:flex-row py-4 lg:py-0">
+      <div class="hidden lg:block lg:w-full">
         <img
           :src="CTAImage[3]"
           :srcset="`${CTAImage[0]} 400w, ${CTAImage[1]} 800w, ${CTAImage[2]} 1600w, ${CTAImage[3]} 2400w`"
           alt="portfolio-cta-image"
-          class="w-full h-full object-fill xl:object-contain"
+          class="w-full object-fill 2xl:object-contain h-[420px] xl:h-[476px]"
           loading="lazy"
         />
       </div>
 
-      <div class="flex lg:w-[55%] xl:w-[50%]">
-        <div
-          class="m-auto lg:ml-auto xl:m-auto w-[80%] sm:w-[85%] md:w-[69%] lg:w-[100%] xl:w-[90%] 2xl:w-[92%] py-5 text-white"
-        >
-          <p
-            class="text-[1.5rem] leading-[1.813rem] md:text-[2.188rem] md:leading-[2.625rem] lg:text-[3.125rem] lg:leading-[3.813rem] font-inter-bold"
-          >
-            Whether you need...
-          </p>
+      <div
+        class="flex flex-col md:flex-row lg:flex-col m-auto lg:ml-[25px] xl:m-auto w-[88%] sm:w-[85%] md:w-[94%] lg:w-[90%] 2xl:w-[92%] py-5 md:py-12"
+      >
+        <div class="text-white">
+          <p class="mobile-header-1 xl:desk-header-2">Whether you need...</p>
           <ul
-            class="pt-6 text-[1rem] leading-5 md:text-[1.188rem] md:leading-6 lg:text-[1.375rem] lg:leading-[1.8125rem] font-inter-semibold"
+            class="pt-6 sub-h3-semibold lg:sub-h1-semibold xl:mobile-header-2-semibold pl-0"
           >
             <li v-for="reason in reasons" :key="reason" class="flex">
               <span class="pr-1">*</span>
@@ -31,22 +27,21 @@
             </li>
           </ul>
           <div
-            class="xl:w-[100%] pt-6 pb-8 text-[0.875rem] leading-[1.125rem] md:text-[1.125rem] md:leading-[1.375rem] lg:text-[1.375rem] lg:leading-[1.813rem]"
+            class="md:w-[76%] lg:w-full xl:w-[77%] pt-6 pb-8 sub-h4-regular text-white-core-80 lg:sub-h3-regular xl:mobile-header-3-regular"
           >
             Bring us your toughest challenge and we'll show you the path to a
             sleek solution.
           </div>
-          <nuxt-link
-            class="flex items-center mx-auto lg:mx-0 w-max rounded-full p-3 text-center font-normal text-[1rem] leading-[1.1875rem] md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem] font-inter-medium !tracking-[0] border border-solid border-white bg-white hover:bg-transparent hover:text-white active:scale-[0.98] cta-button"
-            to="/contact"
-            @click.native="$mixpanel.track('tap_home_portfolio_cta')"
-          >
-            <span
-              class="bg-gradient-[270.11deg] bg-clip-text text-transparent from-[#ff9472] to-[#f2709c] font-inter-semibold"
-              >Talk to our experts</span
-            >
-          </nuxt-link>
         </div>
+        <nuxt-link
+          class="ml-0 my-auto white-btn gradient-border-btn primary-btn border-none"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_home_portfolio_cta')"
+        >
+          <span class="sub-h3-semibold lg:sub-h1-semibold"
+            >Talk to our experts</span
+          >
+        </nuxt-link>
       </div>
     </div>
   </div>
diff --git a/nuxt-frontend/components/home-new/PortfolioSection.vue b/nuxt-frontend/components/home-new/PortfolioSection.vue
index 3b8037a8f..85c9dd16e 100755
--- a/nuxt-frontend/components/home-new/PortfolioSection.vue
+++ b/nuxt-frontend/components/home-new/PortfolioSection.vue
@@ -1,8 +1,6 @@
 <template>
-  <div
-    class="container flex md:items-center m-auto sm:w-[70%] md:w-full pb-16 md:pb-32"
-  >
-    <div class="flex flex-col md:flex-wrap md:flex-row">
+  <div class="container flex lg:items-center m-auto lg:w-full pb-16 lg:pb-60">
+    <div class="flex flex-col lg:flex-wrap lg:flex-row">
       <div
         v-for="portfolio in portfolios"
         :key="portfolio"
@@ -10,32 +8,40 @@
           portfolio.classes,
           portfolio.id != 8 ? 'p-4 sm:p-8' : '',
           portfolio.id == 4 ? 'sm:!pb-12' : '',
-          activeIndex == portfolio.id ? 'scale-105 md:scale-[1.2] z-[2] ' : '',
+          activeIndex == portfolio.id
+            ? 'lg:scale-105 lg::scale-[1.2] lg:z-[2] '
+            : '',
+          portfolio.video ? 'sm:!p-0' : '',
         ]"
-        class="relative transition-all duration-500 ease-in-out transform cursor-pointer"
+        class="relative lg:transition-all lg:duration-500 lg:ease-in-out lg:transform cursor-pointer rounded-xl mt-4 lg:mt-0 md:w-[80%] md:mx-auto"
         @mouseover="activeIndex = portfolio.id"
         @mouseleave="activeIndex = null"
         @touchstart.passive="activeIndex = portfolio.id"
         @click="openPortfolio(portfolio)"
       >
         <div
-          class="absolute top-[18px] sm:top-[13px] md:top-5 xl:top-[30px] inset-x-0 z-[2] text-[1.375rem] leading-8 lg:text-[2rem] lg:leading-8 xl:text-[2.5rem] xl:leading-8 text-center font-inter-bold"
+          class="text-black-87 absolute top-[18px] sm:top-[13px] lg:top-[8px] xl:top-[10px] 2xl:top-[19px] inset-x-0 z-[2] text-center mobile-header-3-semibold lg:desk-header-3"
           :class="[
             activeIndex == portfolio.id
-              ? 'text-black-core/[0.87] scale-[0.7] sm:scale-[0.8]'
-              : 'text-transparent',
+              ? ' lg:scale-[0.8]'
+              : 'lg:text-transparent',
+            portfolio.video ? 'xl:!mt-[8px]' : '',
+            portfolio.id == 7 ? 'lg:!top-[-6px] 2xl:!top-0' : '',
           ]"
         >
           {{ portfolio.title }}
         </div>
-        <div class="flex items-center h-full py-8 sm:p-0">
+        <div
+          class="flex items-center h-full"
+          :class="portfolio.video ? 'p-0' : 'py-8 sm:p-0 lg:pt-0 lg:pb-2'"
+        >
           <video
             v-if="portfolio.video"
             autoplay
             loop
             muted
             playsinline
-            class="lozad p-1 md:p-8"
+            class="lozad mx-auto sm:h-[400px] 2xl:h-[509px]"
           >
             <source :data-src="portfolio.video[1]" type="video/webm" />
             <source :data-src="portfolio.video[0]" type="video/mp4" />
@@ -44,11 +50,12 @@
             v-else
             :src="portfolio.images[0]"
             :srcset="`${portfolio.images[0]} 400w, ${portfolio.images[1]} 800w`"
-            class="h-full w-full object-cover z-[1]"
+            class="h-full w-full object-contain z-[1]"
             :class="[
               portfolio.id == 4
-                ? 'mt-0 sm:mt-4 md:mt-0 sm:w-full sm:h-[90%]'
+                ? 'mt-0 sm:mt-4 lg:mt-0 sm:w-full sm:h-[90%]'
                 : '',
+              portfolio.id == 8 ? 'object-cover' : '',
             ]"
             :alt="portfolio.title + `-image`"
             loading="eager"
@@ -56,14 +63,17 @@
         </div>
         <div
           v-if="portfolio.description"
-          class="absolute inset-x-0 -mt-[50px] sm:-mt-5 z-[2] text-[1rem] leading-5 md:text-[0.875rem] lg:text-[1rem] md:leading-4 lg:leading-5 text-center font-inter-medium"
+          class="text-black-60 absolute inset-x-0 -mt-[35px] sm:-mt-[10px] xl:-mt-[25px] z-[2] w-[92%] sm:w-[90%] md:w-[75%] lg:w-full mx-auto text-center sub-h4-semibold lg:sub-h1-regular"
           :class="[
             activeIndex == portfolio.id
-              ? 'text-black-core/[0.87] scale-[0.7] sm:scale-[0.8]'
-              : 'text-transparent',
-            portfolio.id == 7 ? 'lg:px-2.5' : '',
-            portfolio.id == 5 ? '!-mt-[50px]' : '',
-            portfolio.video ? '-mt-10 sm:!-mt-5 lg:!-mt-[30px]' : '',
+              ? 'lg:scale-[0.8]'
+              : 'lg:text-transparent',
+            portfolio.id == 7
+              ? 'lg:px-2.5 lg:-mt-[20px] 2xl:-mt-[23px]'
+              : 'lg:-mt-[46px] 2xl:-mt-[41px]',
+            portfolio.video
+              ? 'sm:-mt-[50px] lg:-mt-[74px] xl:-mt-[70px] 2xl:-mt-[75px]'
+              : '',
           ]"
         >
           {{ portfolio.description }}
@@ -108,7 +118,7 @@ export default {
         {
           id: 1,
           images: [justly_1_400w, justly_1_800w],
-          classes: "flex-[40%] bg-[#F5E1B6]",
+          classes: "flex-[40%] bg-[#F6EAD0] lg:rounded-none lg:rounded-tl-xl",
           title: "Justly",
           description:
             "Justly aims to tackle loneliness, depression, and mental health through innovative solutions.",
@@ -118,7 +128,7 @@ export default {
         {
           id: 2,
           video: [tognessMp4, tognessWebm],
-          classes: "flex-[40%] bg-[#B3D8FE]",
+          classes: "flex-[40%] bg-[#E1F1FF] lg:rounded-none",
           title: "Togness",
           description:
             "Togness is a photo editor and slideshow maker app for your life’s most memorable events.",
@@ -128,7 +138,8 @@ export default {
         {
           id: 3,
           images: [luxeradio_1_400w, luxeradio_1_800w],
-          classes: "flex-[20%] hidden md:block bg-[#EBB7DB]",
+          classes:
+            "flex-[20%] hidden lg:block bg-[#EBB7DB] lg:rounded-none lg:rounded-tr-xl",
           title: "Luxeradio",
           url: "/portfolio/luxeradio",
           event: "tap_luxeradio_portfolio_card",
@@ -136,7 +147,7 @@ export default {
         {
           id: 4,
           images: [luxeradio_2_400w, luxeradio_2_800w],
-          classes: "flex-[50%] bg-[#E9CFED]",
+          classes: "flex-[50%] bg-[#F1E8F2] lg:rounded-none",
           title: "Luxeradio",
           description:
             "Luxe Radio displays the best of Moroccan and international creation, emphasizing taste, elegance, and refinement.",
@@ -146,7 +157,7 @@ export default {
         {
           id: 5,
           video: [smileMp4, smileWebm],
-          classes: "flex-[50%] bg-[#FED7CC]",
+          classes: "flex-[50%] bg-[#FFE9E5] lg:rounded-none",
           title: "Smile+",
           description:
             "Smile+ app is designed for dentists to create a perfect smile for their patients automated with AI.",
@@ -157,7 +168,8 @@ export default {
         {
           id: 6,
           images: [justly_2_400w, justly_2_800w],
-          classes: "flex-[25%] hidden md:block bg-[#CDE3F7]",
+          classes:
+            "flex-[25%] hidden lg:block bg-[#CDE3F7] lg:rounded-none lg:rounded-bl-xl",
           title: "Justly",
           url: "/portfolio/justly",
           event: "tap_justly_portfolio_card",
@@ -165,7 +177,7 @@ export default {
         {
           id: 7,
           images: [togness_1_400w, togness_1_800w],
-          classes: "flex-[50%] hidden md:block bg-[#D6E1BF]",
+          classes: "flex-[50%] hidden lg:block bg-[#E6F0D0] lg:rounded-none",
           title: "Togness",
           description:
             "Togness is a photo editor and slideshow maker app for your life’s most memorable events.",
@@ -175,7 +187,8 @@ export default {
         {
           id: 8,
           images: [justly_3_400w, justly_3_800w],
-          classes: "flex-[25%] hidden md:block bg-[#AED2F6]",
+          classes:
+            "flex-[25%] hidden lg:block bg-[#AED2F6] lg:rounded-none lg:rounded-br-xl",
           title: "Justly",
           url: "/portfolio/justly",
           event: "tap_justly_portfolio_card",
diff --git a/nuxt-frontend/components/home-new/ServiceSection.vue b/nuxt-frontend/components/home-new/ServiceSection.vue
index 49957c1aa..0244b946e 100644
--- a/nuxt-frontend/components/home-new/ServiceSection.vue
+++ b/nuxt-frontend/components/home-new/ServiceSection.vue
@@ -1,14 +1,10 @@
 <template>
-  <div class="font-inter-regular md:mt-[7.813rem]">
+  <div class="mt-60">
+    <p class="text-center background-text text-[#F8F8F8]">Services</p>
     <p
-      class="text-center text-[3.75rem] leading-[4.0625rem] text-black-core/[.03] xl:text-[5rem] xl:leading-[5rem]"
+      class="-mt-10 pb-16 text-center mobile-header-2 lg:desk-header-2 text-black-87 md:pb-24 xl:mt-[-50px]"
     >
-      Services
-    </p>
-    <p
-      class="-mt-10 pb-16 text-center font-roboto-bold text-[3.438rem] leading-[4.4375rem] text-black-core/[.87] md:pb-24 xl:mt-[-50px]"
-    >
-      How We Can Help You
+      How we can help you
     </p>
 
     <a
@@ -19,17 +15,17 @@
       :href="service.url"
       :class="[
         activeIndex === index
-          ? 'transform transition-all duration-500  ease-in-out hover:text-transparent'
+          ? 'transform transition-all duration-500  ease-in-out hover:text-transparent '
           : '',
       ]"
-      class="cursor-pointer relative flex h-36 items-center pl-16 xl:pl-48 xll:pl-[39rem] 3xl:pl-[84rem]"
+      class="cursor-pointer relative flex h-36 items-center pl-16 2xl:pl-48 xll:pl-[39rem] 3xl:outer-container"
     >
       <div
         v-if="activeIndex === index || (activeIndex == null && index == 0)"
         class="absolute left-0 top-0 z-[2] ml-0 flex h-full w-full items-center justify-center pr-8 shadow-[0px_2px_50px_4px_rgba(61,61,61,0.1)] xl:pr-12"
       >
         <div
-          class="flex h-36 basis-[44%] items-center bg-gradient-to-r from-[#F2709C] to-[#FF835B] pl-16 font-inter-semibold text-2xl text-white lg:basis-[49%] xl:pl-48 xl:text-[1.875rem] xl:leading-[2.4375rem] xll:pl-[39rem] 3xl:pl-[84rem]"
+          class="flex sub-h1-regular lg:mobile-header-2-regular xl:desk-header-3 h-36 basis-[44%] items-center bg-gradient-to-r from-[#F2709C] to-[#FF835B] pl-16 text-white lg:basis-[49%] 2xl:pl-48 xll:pl-[39rem]"
         >
           0{{ index + 1 }}
           <span class="pl-5 xl:pl-[62px]">
@@ -40,14 +36,17 @@
           class="-ml-px basis-[1%] border-r-[70px] border-t-[144px] border-transparent border-t-[#ff835b]"
         ></div>
         <div
-          class="flex basis-[55%] flex-col items-start justify-center px-4 xll:pr-[29rem] 3xl:pr-[78rem] font-inter-regular text-base text-black-core/[.8] lg:basis-[50%] xl:text-[1.25rem] xl:leading-[1.775rem]"
+          class="flex basis-[55%] flex-col items-start justify-center px-4 xll:pr-[29rem] sub-h3-regular xl:mobile-header-3-regular text-black-87 lg:basis-[50%]"
         >
           <p>
             {{ service.content }}
           </p>
         </div>
       </div>
-      <div v-else class="ml-0 text-xl xl:text-[1.5625rem] xl:leading-8">
+      <div
+        v-else
+        class="ml-0 sub-h1-regular lg:mobile-header-2-regular text-black-87"
+      >
         0{{ index + 1 }}
         <span class="pl-[25px] xl:pl-[70px]">
           {{ service.title }}
@@ -64,7 +63,7 @@ export default {
       activeIndex: null,
       services: [
         {
-          title: "Mobile app Development",
+          title: "Mobile Development",
           content:
             "Whether your goal is to acquire new users, improve your retention rate, or increase in-app sales, our team will guide you based on our decade-long experience. From native to hybrid, we've got you covered.",
           url: "/mobile-app-development",
diff --git a/nuxt-frontend/components/home-new/ServiceSectionMobile.vue b/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
index 4b615c56c..735d19246 100644
--- a/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
+++ b/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
@@ -1,15 +1,11 @@
 <template>
-  <div class="container relative m-0 mt-10 max-w-full p-0 text-center">
+  <div class="container relative m-0 mt-16 max-w-full p-0 text-center">
     <div>
+      <p class="text-center background-text text-[#F8F8F8]">Services</p>
       <p
-        class="text-center text-[2.5rem] leading-[1.875rem] text-black-core/[.03]"
+        class="-mt-5 pb-8 text-center mobile-header-2 lg:desk-header-2 text-black-87"
       >
-        Services
-      </p>
-      <p
-        class="-mt-5 pb-8 text-center font-roboto-bold text-[1.875rem] leading-[2.198rem]"
-      >
-        How We Can Help You
+        How we can help you
       </p>
     </div>
     <img
@@ -27,7 +23,7 @@
         :class="
           index % 2 == 0 ? 'items-end text-right' : 'items-start text-left'
         "
-        class="mx-5 flex flex-[70%] flex-col text-black-900"
+        class="mx-4 flex flex-[70%] flex-col"
       >
         <img
           :src="service.bullet"
@@ -35,15 +31,10 @@
           loading="lazy"
           class="-mr-5 h-[50px] w-[50px]"
         />
-        <a
-          :href="service.url"
-          class="py-[15px] font-inter-bold text-[1.5rem] leading-[1.816rem]"
-        >
+        <a :href="service.url" class="mobile-header-3 v2-canopas-gradient-text">
           {{ service.title }}
         </a>
-        <div
-          class="py-[15px] font-inter-regular text-[1rem] leading-5 sm:w-[70%]"
-        >
+        <div class="pt-4 sub-h3-regular text-black-60 sm:w-[70%] md:w-[65%]">
           {{ service.content }}
         </div>
       </div>
@@ -51,7 +42,7 @@
         :src="service.image"
         alt="service-background-image"
         loading="lazy"
-        class="h-full w-[126px] flex-[30%]"
+        class="h-full w-[126px] flex-[30%] sm:flex-[10%] md:flex-[6%]"
       />
     </div>
   </div>
@@ -74,7 +65,7 @@ export default {
       ServiceBackgroundImage,
       services: [
         {
-          title: "Mobile App Development",
+          title: "Mobile Development",
           content:
             "Whether your goal is to acquire new users, improve your retention rate, or increase in-app sales, our team will guide you based on our decade-long experience. From native to hybrid, we've got you covered.",
           image: circle1,
diff --git a/nuxt-frontend/components/ios-app-development/BlogSection.vue b/nuxt-frontend/components/ios-app-development/BlogSection.vue
index 69c955d52..15cab9492 100644
--- a/nuxt-frontend/components/ios-app-development/BlogSection.vue
+++ b/nuxt-frontend/components/ios-app-development/BlogSection.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="my-16 md:mb-32 lg:my-32 xll:container 3xl:outer-container">
     <div
-      class="pb-4 md:pb-12 text-center header-2 xll:py-24 text-black-core/[0.87]"
+      class="pb-4 md:pb-12 text-center mobile-header-2 xl:desk-header-2 xll:py-24 text-black-87"
     >
       <span>Our blogs</span>
     </div>
@@ -47,7 +47,7 @@
                 {{ blog.title }}
               </h2>
 
-              <span class="mt-2 text-black-core/[0.60] sub-h4-semibold">
+              <span class="mt-2 text-black-60 sub-h4-semibold">
                 {{ blog.readTime }}
               </span>
             </div>
@@ -106,11 +106,11 @@
           <div>
             <p
               @click="openBlog(blog.link, 'tap_ios_blog_section')"
-              class="mt-6 header-3 w-full !tracking-[-4%] text-black-core/[0.87]"
+              class="mt-6 desk-header-3 w-full !tracking-[-4%] text-black-87"
             >
               {{ blog.title }}
             </p>
-            <p class="mt-6 sub-h4-regular text-black-core/[0.60]">
+            <p class="mt-6 sub-h1-regular text-black-60">
               {{ blog.readTime }}
             </p>
           </div>
diff --git a/nuxt-frontend/components/ios-app-development/CaseStudySection.vue b/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
index 425beb035..5a3072e7e 100644
--- a/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
@@ -2,12 +2,12 @@
   <div class="md:!mb-0 flex flex-col 3xl:outer-container">
     <div class="container mb-2.5 flex flex-col text-center md:mb-20">
       <h2
-        class="header-2 mb-2.5 text-black-core/[0.87] md:!mx-0 md:!w-full xs:mx-auto xs:w-[71%]"
+        class="mobile-header-2 lg:desk-header-2 mb-2.5 text-black-87 md:!mx-0 md:!w-full xs:mx-auto xs:w-[71%]"
       >
         Case studies
       </h2>
       <span
-        class="sub-h1-regular text-black-core/[0.60] w-11/12 2xl:w-9/12 mx-auto"
+        class="sub-h1-regular lg:mobile-header-2-regular text-black-60 w-11/12 2xl:w-9/12 mx-auto"
         >Explore our case studies to witness how we've transformed our client's
         ideas into successful iOS apps.</span
       >
@@ -48,10 +48,10 @@
             class="w-[94%] sm:w-9/12 flex flex-col ml-[10%] pr-3.5 xs:p-3"
             :class="index == 1 ? 'pl-3.5 !w-[91%] sm:!w-[66%]' : ''"
           >
-            <h2 class="mb-2.5 header-2">
+            <h2 class="mb-2.5 mobile-header-2">
               {{ portfolio.title }}
             </h2>
-            <span class="sub-h1-regular text-black-core/[0.60]">{{
+            <span class="sub-h1-regular text-black-60">{{
               portfolio.description
             }}</span>
           </div>
@@ -89,18 +89,18 @@
                     :class="portfolio.row1Background"
                     class="absolute top-4 xl:top-8 right-[-25%] xl:right-[-17%] 2xll:right-[-18%] xll:right-[-12%] 3xl:right-[-13%] w-[250px] h-[250px] p-8 xl:w-[300px] xl:h-[300px] rounded-full flex items-center"
                   ></div>
-                  <h2 class="absolute top-32 header-1 title right-[-30px]">
+                  <h2 class="absolute top-32 desk-header-1 title right-[-30px]">
                     {{ portfolio.title }}
                   </h2>
                 </div>
                 <div
                   class="w-[19rem] xl:w-[33rem] mx-auto mt-44 xl:mt-72 description"
                 >
-                  <h2 class="header-2">
+                  <h2 class="desk-header-2">
                     {{ portfolio.desktopDescription }}
                   </h2>
                   <div class="mt-6">
-                    <span class="sub-h3-semibold opacity-80">{{
+                    <span class="mobile-header-3-medium text-white-core-80">{{
                       portfolio.subDescription
                     }}</span>
                   </div>
diff --git a/nuxt-frontend/components/ios-app-development/CtaSection.vue b/nuxt-frontend/components/ios-app-development/CtaSection.vue
index 09a5cbefb..c152477ad 100644
--- a/nuxt-frontend/components/ios-app-development/CtaSection.vue
+++ b/nuxt-frontend/components/ios-app-development/CtaSection.vue
@@ -13,7 +13,7 @@
       >
         <div class="flex w-full">
           <div class="m-auto text-white">
-            <p class="header-1 text-black-core/[0.87]">
+            <p class="mobile-header-1 text-black-87">
               Let's Start a New Project Together
             </p>
           </div>
@@ -24,9 +24,7 @@
             to="/contact"
             @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
-            <span class="mr-2.5 sub-h3-semibold xl:sub-h4-semibold lg:block"
-              >Contact Us
-            </span>
+            <span class="mr-2.5 sub-h3-semibold lg:block">Contact Us </span>
           </router-link>
         </div>
       </div>
@@ -47,7 +45,7 @@
       >
         <div class="flex w-[66%]">
           <div class="w-[95%] py-5 text-white xl:m-auto 2xl:w-4/5">
-            <p class="header-1">
+            <p class="desk-header-1">
               Are you ready to take your business app to the next level?
             </p>
           </div>
@@ -58,7 +56,7 @@
             to="/contact"
             @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
-            <span class="sub-h3-semibold xl:sub-h4-semibold">Let's Chat </span>
+            <span class="sub-h4-semibold">Let's Chat </span>
           </router-link>
         </div>
       </div>
diff --git a/nuxt-frontend/components/ios-app-development/CtaSection2.vue b/nuxt-frontend/components/ios-app-development/CtaSection2.vue
index 3643a61f8..2715ddaa9 100644
--- a/nuxt-frontend/components/ios-app-development/CtaSection2.vue
+++ b/nuxt-frontend/components/ios-app-development/CtaSection2.vue
@@ -10,15 +10,17 @@
       loading="lazy"
     />
     <div
-      class="container absolute top-[1.2rem] w-full p-4 text-center text-black-core/[0.87] md:left-0 md:top-1/2 md:top-16 md:-mt-6 md:text-center lg:!left-[50%] lg:!top-[57%] xll:!top-[60%] lg:-translate-x-1/2 lg:-translate-y-1/2 lg:transform xl:w-[60%] 2xl:w-[49%] xs:left-[13%] xs:w-[75%] xl2:w-[55%] 2xll:w-[45%] xll:w-[61%]"
+      class="container absolute top-[1.2rem] w-full p-4 text-center md:left-0 md:top-1/2 md:top-16 md:-mt-6 md:text-center lg:!left-[50%] lg:!top-[57%] xll:!top-[60%] lg:-translate-x-1/2 lg:-translate-y-1/2 lg:transform xl:w-[60%] 2xl:w-[49%] xs:left-[13%] xs:w-[75%] xl2:w-[55%] 2xll:w-[45%] xll:w-[61%]"
     >
       <div class="flex w-full lg:mb-10">
         <div class="m-auto">
-          <p class="header-1 text-black-core/[0.87] mb-4 lg:mb-6">
+          <p
+            class="mobile-header-1 lg:desk-header-1 mb-4 lg:mb-6 text-black-87"
+          >
             Have an app idea?
           </p>
 
-          <div class="sub-h1-regular text-black-core/[0.60]">
+          <div class="sub-h1-regular lg:mobile-header-2-regular text-black-60">
             See if we can make it a reality.
           </div>
         </div>
@@ -29,7 +31,7 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_ios_development_cta')"
         >
-          <span class="mr-2.5 sub-h3-semibold xl:sub-h4-semibold"
+          <span class="mr-2.5 sub-h3-semibold xl:sub-h1-semibold"
             >Let's Chat
           </span>
         </nuxt-link>
diff --git a/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue b/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
index 56e11c528..a2b0198bd 100644
--- a/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
@@ -4,13 +4,13 @@
   >
     <div class="container mb-2.5 md:mb-7 flex flex-col text-center">
       <span
-        class="mb-2.5 lg:mb-6 text-black-core/[0.87] md:!mx-0 md:!w-full xs:mx-auto header-2"
+        class="mb-2.5 lg:mb-6 text-black-87 md:!mx-0 md:!w-full xs:mx-auto mobile-header-2 lg:desk-header-2"
       >
         iOS app <br class="lg:hidden" />
         development services</span
       >
       <span
-        class="sub-h1-regular text-black-core/[0.60] w-[93%] 2xl:w-9/12 mx-auto"
+        class="sub-h1-regular lg:mobile-header-2-regular text-black-60 w-[93%] 2xl:w-9/12 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
@@ -49,9 +49,12 @@
             <div
               class="justify-center px-5 h-16 mb-5 flex flex-row items-center"
             >
-              <span class="header-3 text-[#FF9472]" v-html="item.title"></span>
+              <span
+                class="mobile-header-3-semibold text-[#FF9472]"
+                v-html="item.title"
+              ></span>
             </div>
-            <div class="sub-h3-regular text-black-core/[0.87]">
+            <div class="sub-h3-regular text-black-87">
               <p v-for="list in item.description" :key="list" class="mb-4">
                 {{ list }}
               </p>
@@ -112,16 +115,18 @@
             :key="index"
             class="lg:px-8 lg:pt-2 2xl:px-11"
           >
-            <div class="justify-start px-5 mt-3 lg:my-3 flex flex-row">
-              <span class="header-3 text-[#FF9472] mr-1.5"
-                >{{ index + 1 }}.
-              </span>
-              <span class="header-3 text-[#FF9472] mr-1.5">{{
-                item.desktoptitle
-              }}</span>
+            <div
+              class="justify-start px-5 mt-3 lg:my-3 flex flex-row desk-header-3 primary-color"
+            >
+              <span class="mr-1.5">{{ index + 1 }}. </span>
+              <span class="mr-1.5">{{ item.desktoptitle }}</span>
             </div>
-            <div class="px-5 sub-h3-medium text-black-core/[0.60]">
-              <p v-for="list in item.description" :key="list" class="mb-6">
+            <div class="px-5 mobile-header-3-semibold">
+              <p
+                v-for="list in item.description"
+                :key="list"
+                class="mb-6 text-black-60"
+              >
                 {{ list }}
               </p>
             </div>
diff --git a/nuxt-frontend/components/ios-app-development/FaqSection.vue b/nuxt-frontend/components/ios-app-development/FaqSection.vue
index f0af1e0b6..c9e9a7a2e 100644
--- a/nuxt-frontend/components/ios-app-development/FaqSection.vue
+++ b/nuxt-frontend/components/ios-app-development/FaqSection.vue
@@ -3,7 +3,7 @@
     <div class="lg:container">
       <div class="mx-[2%] my-0 flex flex-col gap-4 lg:my-0">
         <div class="text-center">
-          <span class="header-2 text-black-core/[0.87]"
+          <span class="mobile-header-2 lg:desk-header-2 text-black-core/[0.87]"
             >FAQs on iOS app development</span
           >
         </div>
@@ -25,11 +25,11 @@
                   >
                     <div class="faq-header flex flex-row items-center">
                       <div
-                        class="faq-question w-[90%] p-[10px] sub-h1-semibold"
+                        class="faq-question w-[90%] p-[10px] sub-h1-semibold lg:mobile-header-2-semibold"
                         :class="
                           openList && faq.id == currentIndex
                             ? 'v2-canopas-gradient-text footer-icon'
-                            : 'text-black-core/[0.60] lg:text-black-core/[0.80]'
+                            : 'text-black-60 lg:text-black-87'
                         "
                       >
                         {{ faq.question }}
@@ -41,11 +41,11 @@
                         "
                       >
                         <Icon
-                          class="angle-up text-black-core/[0.87]"
+                          class="angle-up text-black-87"
                           :class="
                             openList && faq.id == currentIndex
                               ? 'footer-icon'
-                              : 'text-black-core/[0.87]'
+                              : 'text-black-87'
                           "
                           :name="
                             openList && faq.id == currentIndex
@@ -63,7 +63,7 @@
                         :key="faq.answer"
                       >
                         <div
-                          class="faq-answer w-[90%] px-3 sub-h3-regular"
+                          class="faq-answer w-[90%] px-3 sub-h3-regular lg:mobile-header-3-regular"
                           v-html="faq.answer"
                         ></div>
                       </div>
@@ -87,11 +87,11 @@
                     >
                       <div class="faq-header flex flex-row items-center">
                         <div
-                          class="faq-question w-[90%] p-[10px] sub-h1-semibold"
+                          class="faq-question w-[90%] p-[10px] sub-h1-semibold lg:mobile-header-2-semibold"
                           :class="
                             openList && faq.id == currentIndex
                               ? 'v2-canopas-gradient-text footer-icon'
-                              : 'text-black-core/[0.60] lg:text-black-core/[0.80]'
+                              : 'text-black-60 lg:text-black-87'
                           "
                         >
                           {{ faq.question }}
@@ -103,11 +103,11 @@
                           "
                         >
                           <Icon
-                            class="angle-up text-black-core/[0.87]"
+                            class="angle-up text-black-87"
                             :class="
                               openList && faq.id == currentIndex
                                 ? 'footer-icon'
-                                : 'text-black-core/[0.87]'
+                                : 'text-black-87'
                             "
                             :name="
                               openList && faq.id == currentIndex
@@ -124,7 +124,7 @@
                           :key="faq.answer"
                         >
                           <div
-                            class="faq-answer w-[90%] px-3 sub-h3-regular"
+                            class="faq-answer w-[90%] px-3 sub-h3-regular lg:mobile-header-3-regular"
                             v-html="faq.answer"
                           ></div>
                         </div>
@@ -179,7 +179,7 @@
           class="mr-2 h-5 w-5"
           icon="arrow-left"
           id="leftArrow"
-        /><span class="v2-canopas-gradient-text sub-h4-semibold">Back</span>
+        /><span class="v2-canopas-gradient-text sub-h1-semibold">Back</span>
       </button>
       <button
         v-else
@@ -190,7 +190,7 @@
         @click.native="mixpanel.track('tap_ios_app_faq_next_arrow')"
         aria-label="rightArrow"
       >
-        <span class="v2-canopas-gradient-text sub-h4-semibold"
+        <span class="v2-canopas-gradient-text sub-h1-semibold"
           >View More Questions</span
         >
         <Icon
diff --git a/nuxt-frontend/components/ios-app-development/LandingSection.vue b/nuxt-frontend/components/ios-app-development/LandingSection.vue
index 940b7c973..d4e3902af 100644
--- a/nuxt-frontend/components/ios-app-development/LandingSection.vue
+++ b/nuxt-frontend/components/ios-app-development/LandingSection.vue
@@ -6,10 +6,14 @@
       class="container px-4 pb-4 3xl:pb-28 text-left lg:flex mb-4 md:mb-7 lg:mb-14"
     >
       <div class="lg:flex-1 mb-6">
-        <h1 class="header-1 mb-4 pr-2 lg:w-2/4 text-black-core/[0.87]">
+        <h1
+          class="mobile-header-1 lg:desk-header-1 mb-4 pr-2 lg:w-2/4 text-black-87"
+        >
           iOS app development company
         </h1>
-        <p class="sub-h1-regular 2xl:w-4/5 text-black-core/[0.60]">
+        <p
+          class="sub-h1-regular lg:mobile-header-2-regular 2xl:w-4/5 text-black-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
@@ -23,7 +27,7 @@
             to="/contact"
             @click.native="$mixpanel.track('tap_ios_development_cta')"
           >
-            <span class="sub-h3-semibold xl:sub-h4-semibold"
+            <span class="sub-h3-semibold lg:sub-h1-semibold"
               >Consult Our iOS Team</span
             >
           </nuxt-link>
@@ -42,7 +46,7 @@
           v-if="width < 1400"
           :src="landingmd800"
           :srcset="`${landingmd800} 800w`"
-          class="overflow-visible hidden lg:block h-full lg:!-mt-[0.5%] xl:!mt-[0.5%] lg:!h-[31rem] xl:!h-[38rem] -ml-[82%] lg:-ml-[61%] xl:-ml-[59%] w-[55%] object-cover"
+          class="overflow-visible hidden lg:block h-full lg:!mt-[14.5%] xl:!mt-[0.5%] lg:!h-[33rem] xl:!h-[38rem] -ml-[82%] lg:-ml-[61%] xl:-ml-[59%] 2xl:-ml-[83%] w-[55%] object-cover"
           alt="ios-landing"
         />
         <img
diff --git a/nuxt-frontend/components/ios-app-development/SuccessStory.vue b/nuxt-frontend/components/ios-app-development/SuccessStory.vue
index ecf609ad3..8ecb879b9 100644
--- a/nuxt-frontend/components/ios-app-development/SuccessStory.vue
+++ b/nuxt-frontend/components/ios-app-development/SuccessStory.vue
@@ -2,7 +2,7 @@
   <section class="my-20 lg:my-60 3xl:mt-[315px]">
     <div class="container md:mt-36 lg:mb-8 mb-7 mx-auto text-center">
       <span
-        class="tracking-[-0.04rem] mb-2.5 font-inter-bold text-3xl leading-[2.4375rem] md:hidden text-black-core/[0.87] md:!mx-0 md:!w-full md:text-[2.65625rem] lg:text-[3.4375rem] md:leading-[3.796875rem] lg:leading-[5.15625rem] xs:mx-auto xs:w-[71%]"
+        class="mb-2.5 mobile-header-2 md:hidden text-black-87 md:!mx-0 md:!w-full xs:mx-auto xs:w-[71%]"
       >
         Success Stories</span
       >
@@ -54,13 +54,12 @@
                 /></span>
               </div>
               <div class="flex flex-col">
-                <span class="sub-h2-medium text-[#FFFFFF]/[0.80]">{{
+                <span class="sub-h3-medium text-white-core-80">{{
                   client.name
                 }}</span>
-                <span
-                  class="sub-h3-regular text-[#FFFFFF]/[0.60] mt-[0.3rem]"
-                  >{{ client.designation }}</span
-                >
+                <span class="sub-h4-regular text-white-core-60 mt-[0.3rem]">{{
+                  client.designation
+                }}</span>
               </div>
             </div>
           </swiper-slide>
@@ -75,7 +74,7 @@
       <div
         class="w-2/5 flex justify-center items-center bg-[#F4F4F4] rounded-tl-xl rounded-bl-xl"
       >
-        <h2 class="header-2 w-3/4 2xl:w-[65%] mx-auto text-black-core/[0.87]">
+        <h2 class="desk-header-2 w-3/4 2xl:w-[65%] mx-auto text-black-87">
           What our clients says!
         </h2>
       </div>
@@ -88,7 +87,7 @@
             :src="imageleft"
             alt="quote-left-image"
             loading="lazy"
-            class="w-[1.1rem] h-4 lg:w-8 lg:h-7 text-[#FFFFFF]/[0.60]"
+            class="w-[1.1rem] h-4 lg:w-8 lg:h-7 text-white-core-60"
           />
         </div>
         <div class="flex items-center">
@@ -106,7 +105,7 @@
             class="swiper-container cursor-pointer"
           >
             <swiper-slide v-for="(client, index) in clients" :key="index">
-              <div class="my-auto px-7 lg:px-12 py-7 lg:py-12">
+              <div class="my-auto px-7 lg:px-12 py-7 lg:py-12 text-white">
                 <span class="flex mb-2.5">
                   <Icon
                     v-for="i in 5"
@@ -114,20 +113,16 @@
                     class="fa-star w-[1.375rem] h-[1.375rem] lg:w-6 lg:h-6 text-[#FFC700]"
                     name="fa6-solid:star"
                 /></span>
-                <div
-                  class="font-inter-semibold text-[#FFFFFF] text-[1.3125rem] lg:text-2xl leading-[2.203125rem] lg:leading-9"
-                >
+                <div class="mobile-header-2-semibold">
                   {{ client.review }}
                 </div>
                 <div class="flex flex-col text-left mt-6">
-                  <span
-                    class="font-inter-medium text-[#FFFFFF]/[0.80] text-text-3xl lg:text-[1.375rem] leading-[1.63125rem] lg:leading-[2.0625rem]"
-                    >{{ client.name }}</span
-                  >
-                  <span
-                    class="font-inter-regular text-[#FFFFFF]/[0.60] text-[0.9375rem] lg:text-lg leading-[2.5875rem] lg:leading-[1.6875rem]"
-                    >{{ client.designation }}</span
-                  >
+                  <span class="text-white-core-80 sub-h2-medium">{{
+                    client.name
+                  }}</span>
+                  <span class="text-white-core-60 sub-h1-regular">{{
+                    client.designation
+                  }}</span>
                 </div>
               </div>
             </swiper-slide>
@@ -138,7 +133,7 @@
                   :src="imageright"
                   alt="quote-image-right"
                   loading="lazy"
-                  class="w-[1.1rem] h-4 lg:w-8 lg:h-7 text-[#FFFFFF]/[0.60]"
+                  class="w-[1.1rem] h-4 lg:w-8 lg:h-7 text-white-core-60"
                 />
               </div>
             </div>
diff --git a/nuxt-frontend/components/mobile-app-development/CTASection2.vue b/nuxt-frontend/components/mobile-app-development/CTASection2.vue
index 1f22bb118..1447efc1a 100644
--- a/nuxt-frontend/components/mobile-app-development/CTASection2.vue
+++ b/nuxt-frontend/components/mobile-app-development/CTASection2.vue
@@ -1,18 +1,20 @@
 <template>
-  <section class="relative pb-[50px] md:pt-[50px] 2xl:-mt-px">
+  <section class="relative pb-[46px] md:pt-[50px]">
     <div
-      class="absolute right-0 top-1 hidden h-[140px] border-l-[20px] border-[#F2709C] md:block lg:top-9 xl:h-[185px] 2xl:top-[4.25rem]"
+      class="absolute right-0 top-1 hidden h-[140px] border-l-[20px] border-[#F2709C] lg:block lg:top-9 xl:h-[185px] 2xl:top-[4.25rem]"
     ></div>
     <div
-      class="absolute bottom-[6.25rem] left-0 hidden h-[115px] border-l-[20px] border-[#FF9472] md:block"
+      class="absolute bottom-[6.25rem] left-0 hidden h-[115px] border-l-[20px] border-[#FF9472] lg:block"
     ></div>
 
     <div
-      class="container xll:max-w-[1640px] flex flex-col items-center md:flex-row md:flex-row-reverse"
+      class="container xll:max-w-[1640px] flex flex-col items-center lg:flex-row lg:flex-row-reverse"
     >
-      <div class="flex flex-col md:relative md:items-end lg:flex-[55%]">
+      <div
+        class="flex flex-col lg:relative items-center lg:items-end lg:flex-[55%]"
+      >
         <p
-          class="text-center font-inter-bold text-[2.625rem] leading-[3.125rem] text-white md:text-right md:text-[3.275rem] md:leading-[3.875rem] xl:text-[5.625rem] xl:leading-[6.125rem]"
+          class="text-center mobile-header-1 lg:desk-header-1 text-white lg:text-right xl:w-[89%] 2xl:w-[77%] xll:w-[61%]"
         >
           <span class="bg-gradient-L bg-clip-text text-transparent">L</span>et's
           <span class="mr-[-0.2rem] bg-gradient-W bg-clip-text text-transparent"
@@ -23,42 +25,30 @@
           >ogether
         </p>
         <p
-          class="mt-6 w-[385px] text-center font-inter-regular text-base text-white md:text-right md:text-[1.4rem] md:leading-8 md:text-white/[0.75] xl:w-[82%] xl:text-[1.75rem] xl:leading-[2.625rem] 2xl:w-[68%] xll:w-[55%]"
+          class="mt-4 lg:mt-[2.5rem] w-[98%] md:w-[70%] lg:w-[80%] xl:w-[75%] 2xl:w-[65%] xll:w-[52%] text-center sub-h1-regular lg:mobile-header-2-regular text-white-core-80 lg:text-right"
         >
           Not sure where to start? We also offer code and architecture reviews,
           strategic planning, and more.
         </p>
         <nuxt-link
-          class="gradient-btn consultation-btn mr-0 mt-10 hidden w-max items-end rounded-full py-5 text-right md:flex"
+          class="gradient-btn primary-btn mr-0 hidden lg:flex lg:mt-10"
           to="/contact"
         >
-          <span
-            class="mr-2.5 font-inter-semibold text-[1.09375rem] leading-[1.3125rem] xl:text-[1.188rem] xl:leading-[1.188rem]"
-            >Get Free Consultation
-          </span>
+          <span class="sub-h1-semibold">Get Free Consultation </span>
         </nuxt-link>
       </div>
       <div class="relative lg:flex-[45%]">
         <img
           :src="ctaImage400w"
           :srcset="`${ctaImage400w} 400w, ${ctaImage800w} 800w`"
-          class="mt-8 h-full w-full md:mt-0"
+          class="mt-8 h-full w-full md:w-[50%] md:h-[50%] lg:h-full lg:w-full lg:mt-0 md:mx-auto"
           alt="cta-image"
           loading="lazy"
         />
-        <div
-          class="gradient-border absolute bottom-4 left-[0.5rem] h-[55px] border-l-[13px] md:hidden"
-        ></div>
       </div>
 
-      <nuxt-link
-        class="gradient-btn consultation-btn mt-10 flex w-max items-center rounded-full py-5 text-center md:hidden"
-        to="/contact"
-      >
-        <span
-          class="mr-2.5 font-inter-semibold text-[1.125rem] leading-[1.125rem]"
-          >Get Free Consultation
-        </span>
+      <nuxt-link class="gradient-btn primary-btn lg:hidden" to="/contact">
+        <span class="sub-h3-semibold">Get Free Consultation </span>
       </nuxt-link>
     </div>
   </section>
diff --git a/nuxt-frontend/components/mobile-app-development/ClientReview.vue b/nuxt-frontend/components/mobile-app-development/ClientReview.vue
index a71fd00a1..0e4277a41 100755
--- a/nuxt-frontend/components/mobile-app-development/ClientReview.vue
+++ b/nuxt-frontend/components/mobile-app-development/ClientReview.vue
@@ -1,5 +1,7 @@
 <template>
-  <section class="pb-[50px] pt-[100px] md:pb-[150px] md:pt-[200px]">
+  <section
+    class="pb-[50px] pt-[100px] md:pb-[141px] 3xl:pb-[146px] md:pt-[200px]"
+  >
     <div class="container">
       <div class="hidden md:block">
         <span
diff --git a/nuxt-frontend/components/partials/NewFooter.vue b/nuxt-frontend/components/partials/NewFooter.vue
index d5cab20a1..49acacbc0 100644
--- a/nuxt-frontend/components/partials/NewFooter.vue
+++ b/nuxt-frontend/components/partials/NewFooter.vue
@@ -1,14 +1,9 @@
 <template>
-  <div class="relative overflow-hidden px-0 font-inter-medium z-[1]">
-    <img
-      :src="bg"
-      class="absolute top-[15px] sm:top-0 left-0 w-full h-full xl2:h-[unset] -z-[1] object-cover xl2:object-fill"
-      alt="canopas-contact-footer"
-    />
+  <div class="pt-14 px-0 font-inter-medium z-[1] bg-[#121212]">
     <div class="container text-center">
-      <div class="mt-11 mb-8 md:mb-[60px]">
+      <div class="mb-8 md:mb-[60px]">
         <div
-          class="mt-5 text-[1.375rem] leading-[1.6875rem] md:text-[1.5rem] md:leading-[1.8125rem] lg:text-[1.625rem] lg:leading-[1.9375rem] text-white/[.87] font-bold"
+          class="text-[1.375rem] leading-[1.6875rem] md:text-2xl md:leading-[1.8125rem] lg:text-[1.625rem] lg:leading-[1.9375rem] text-white/[.87] font-bold"
         >
           Follow us on
         </div>
diff --git a/nuxt-frontend/components/partials/NewHeader.vue b/nuxt-frontend/components/partials/NewHeader.vue
index 08d9e464a..4c4486ee9 100755
--- a/nuxt-frontend/components/partials/NewHeader.vue
+++ b/nuxt-frontend/components/partials/NewHeader.vue
@@ -175,16 +175,15 @@
         </ul>
         <div v-if="showMenu" class="h-auto w-full bg-white p-4">
           <div className="grid p-3 pb-5">
-            <a
-              href="/contact"
-              className="relative justify-self-center rounded-full border-[1px] border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] hover:shadow-[inset_2px_1000px_1px_#fff] font-bold text-white "
+            <nuxt-link
+              class="gradient-btn primary-btn"
+              to="/contact"
+              @click.native="$mixpanel.track('tap_landing_cta')"
             >
-              <div
-                className="py-[0.8rem] px-10 text-lg hover:bg-clip-text hover:bg-gradient-to-r hover:from-[#f2709c] hover:via-[#ff909c] hover:to-[#ff9472] hover:text-transparent inline-block"
-              >
-                Get Free Consultation
-              </div>
-            </a>
+              <span class="sub-h3-semibold lg:sub-h1-semibold"
+                >Get Free Consultation
+              </span>
+            </nuxt-link>
           </div>
         </div>
       </div>
@@ -238,7 +237,7 @@ export default {
           name: "Get Free Consultation",
           url: "/contact",
           className:
-            "m-0 rounded-full py-3 px-3 font-normal text-[1rem] leading-[1.1875rem] md:text-[1.09375rem] md:leading-[1.3125rem] lg:text-[1.1875rem] lg:leading-[1.4375rem] font-inter-medium !tracking-[0] gradient-btn consultation-btn",
+            "m-0 px-3 pt-2.5  gradient-btn primary-btn sub-h3-semibold lg:sub-h1-semibold",
           showContactBtn: true,
           event: "tap_header_cta",
         },
diff --git a/nuxt-frontend/config.js b/nuxt-frontend/config.js
index 14953dddb..ecf4bf04c 100644
--- a/nuxt-frontend/config.js
+++ b/nuxt-frontend/config.js
@@ -139,4 +139,14 @@ export default Object.freeze({
   SHOW_DRAFT_POSTS: true,
   VITE_IFRAMELY_KEY: "VITE_IFRAMELY_KEY_VALUE",
   VITE_RECAPTCHA_SITE_KEY: "VITE_RECAPTCHA_SITE_KEY_VALUE",
+  INTRO_SHOWCASE_STARS: 337,
+  UIPILOT_STARS: 274,
+  JETPACK_COMPOSE_ANIMATION_STARS: 277,
+  COMPOSE_COUNTRY_PICKER_STARS: 50,
+  SWIFT_UI_ANIMATION_STARS: 53,
+  IOS_DEVELOPER_ROADMAP_STARS: 79,
+  TAILWIND_ANIMATIONS_STARS: 103,
+  CANOPAS_WEBSITE_STARS: 25,
+  CANOPAS_BLOG_WEBSITE_STARS: 29,
+  WEB_DEVELOPMENT_ROADMAP_STARS: 95,
 });
diff --git a/nuxt-frontend/pages/flutter-app-development.vue b/nuxt-frontend/pages/flutter-app-development.vue
index 7253d76bc..be0ffd1e5 100644
--- a/nuxt-frontend/pages/flutter-app-development.vue
+++ b/nuxt-frontend/pages/flutter-app-development.vue
@@ -9,7 +9,10 @@
     <BlogSection />
     <CtaSection2 />
     <FaqSection />
-    <NewFooter class="-mt-4 md:mt-auto" ref="flutterFooter" />
+    <NewFooter
+      class="-mt-4 md:mt-auto bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"
+      ref="flutterFooter"
+    />
   </div>
 </template>
 <script>
diff --git a/nuxt-frontend/pages/mobile-app-development.vue b/nuxt-frontend/pages/mobile-app-development.vue
index 6f5dfa46c..1b9f78c81 100755
--- a/nuxt-frontend/pages/mobile-app-development.vue
+++ b/nuxt-frontend/pages/mobile-app-development.vue
@@ -9,12 +9,14 @@
       <Portfolio />
       <CTASection />
       <DevelopmentProcess ref="developmentprocess" />
-      <div class="bg-black-core/[0.85]">
+      <div class="bg-[#121212]">
         <ClientReview />
         <CTASection2 ref="cta" />
       </div>
     </div>
-    <NewFooter class="mt-[-15px] md:mt-auto" />
+    <NewFooter
+      class="bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"
+    />
   </div>
 </template>
 
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index d17a799f9..9fc5e08b6 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -34,8 +34,14 @@ module.exports = {
         black: {
           core: "#000000",
           900: "#3d3d3d",
+          87: "#000000DE",
+          60: "#00000099",
         },
         white: "#ffffff",
+        "white-core": {
+          80: "#FFFFFFCC",
+          60: "#FFFFFF99",
+        },
         pink: {
           300: "#f2709c",
         },
@@ -225,7 +231,7 @@ module.exports = {
           "linear-gradient(to bottom, #FFFFFF , #FDE0E2 23%, #FDE0E2 88%, #FFFFFF 100%);",
         "gradient-L": "linear-gradient(178deg, #FFFFFF  68%, #f77783 40%);",
         "gradient-W": "linear-gradient(257deg, #FFFFFF  65%, #f77783 68%);",
-        "gradient-T": "linear-gradient(540deg, #FFFFFF  30%, #f77783 10%);",
+        "gradient-T": "linear-gradient(540deg, #FFFFFF  33%, #f77783 10%);",
         "multiple-underline-out":
           "linear-gradient(transparent calc(100% - 5px), white 1px)",
         "gradient-underline-out":