diff --git a/.github/workflows/deploy-backend-dev.yml b/.github/workflows/deploy-backend-dev.yml
index e49b04cb7..01e096b4c 100644
--- a/.github/workflows/deploy-backend-dev.yml
+++ b/.github/workflows/deploy-backend-dev.yml
@@ -2,8 +2,7 @@ name: DeployBackendDev
 
 on:
   push:
-    branches:
-      - "master"
+   
 
 jobs:
   deploy-backend-dev:
diff --git a/.github/workflows/deploy-frontend-dev.yml b/.github/workflows/deploy-frontend-dev.yml
index ea851975a..ef93bce41 100644
--- a/.github/workflows/deploy-frontend-dev.yml
+++ b/.github/workflows/deploy-frontend-dev.yml
@@ -2,8 +2,7 @@ name: DeployFrontendDev
 
 on:
   push:
-    branches:
-      - "master"
+    
 
 jobs:
   deploy-frontend-dev:
diff --git a/blogs/blog.go b/blogs/blog.go
index ad110a247..eb1d141d6 100644
--- a/blogs/blog.go
+++ b/blogs/blog.go
@@ -11,6 +11,7 @@ import (
 	"strings"
 	"time"
 	"utils"
+	"fmt"
 
 	"github.com/aws/aws-sdk-go/aws/session"
 	"github.com/gin-gonic/gin"
@@ -71,17 +72,18 @@ 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{}
-
+         fmt.Println(blogs)
 	// 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 +152,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..c0dfeb23f 100644
--- a/nuxt-frontend/assets/css/global.css
+++ b/nuxt-frontend/assets/css/global.css
@@ -188,53 +188,73 @@
     @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-[1.5rem] leading-[2.25rem];
   }
-
-  .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-[1.5rem] leading-[2.25rem];
+  }
+  .mobile-header-2-semibold {
+    @apply font-inter-semibold  tracking-[-0.08rem] xl:tracking-normal text-[1.5rem] leading-[2.25rem];
+  }
+  .mobile-header-3 {
+    @apply font-opensans-semibold tracking-[-0.08rem] xl:tracking-normal text-[1.25rem] leading-[1.875rem];
+  }
+  .mobile-header-3-regular {
+    @apply font-inter-regular tracking-[-0.08rem] xl:tracking-normal text-[1.25rem] leading-[1.875rem];
+  }
+  .mobile-header-3-medium {
+    @apply font-inter-medium tracking-[-0.08rem] xl:tracking-normal text-[1.25rem] leading-[1.875rem];
+  }
+  .mobile-header-3-semibold {
+    @apply font-inter-semibold tracking-[-0.08rem] xl:tracking-normal text-[1.25rem] leading-[1.875rem];
+  }
+  .desk-header-1 {
+    @apply font-opensans-bold tracking-[-0.15rem] text-[3.75rem] leading-[4.875rem];
+  }
+  .desk-header-2 {
+    @apply font-opensans-bold tracking-[-0.15rem] text-[3rem] leading-[3.9rem];
+  }
+  .desk-header-3 {
+    @apply font-opensans-semibold tracking-[-0.15rem] 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-[1.125rem] 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-[1.125rem] leading-[1.688rem];
   }
-
   .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-[0.75rem] leading-[1.125rem];
+  }
+  .sub-h4-medium {
+    @apply font-inter-medium text-[0.75rem] 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-[0.75rem] leading-[1.125rem];
+  }
+  .background-text {
+    @apply font-inter-regular text-[2.5rem] leading-[1.875rem] lg:text-[4.5rem] 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..5cc7bb089
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..0c6aca7ab 100644
--- a/nuxt-frontend/components/android-app-development/BlackCtaSection.vue
+++ b/nuxt-frontend/components/android-app-development/BlackCtaSection.vue
@@ -13,9 +13,9 @@
       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/[0.8] sub-h1-regular lg:mobile-header-2-regular md:my-4">
           See if we can make it a reality.
         </div>
       </div>
@@ -25,7 +25,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..b20028270 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-core/[0.87]">Our blogs</p>
       <div class="blog mt-6 block lg:hidden">
         <swiper
           :slidesPerView="1.425"
@@ -55,7 +55,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-core/[0.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')"
@@ -181,7 +181,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-core/[0.87]">Android<span><br><span class="mobile-header-2-regular text-black-core/[0.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 +190,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 +199,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 +209,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 +220,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-core/[0.87]">Android</span><br><span class=" text-black-core/[0.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..a5af29ea2 100644
--- a/nuxt-frontend/components/android-app-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/android-app-development/CaseStudySection.vue
@@ -4,9 +4,9 @@
   >
     <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-core-[0.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 xl:text-[1.5rem] xl:leading-9 text-black-core/[0.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,7 +33,7 @@
           />
 
           <div :class="item.textalign" class="absolute bottom-4 flex flex-col">
-            <span class="header-2 text-black-core/[0.87]">{{
+            <span class="mobile-header-2 text-black-core/[0.87]">{{
               item.title
             }}</span>
             <span
@@ -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="text-[#FF9472] 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-core/[0.87]"
                   v-html="item.deskcontent"
                 ></h2
               ></a>
               <span
-                class="mt-4 text-black-core/[0.6] sub-h3-medium"
+                class="mt-4 text-black-core/[0.6] 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-core-[0.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-core-[0.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-core-[0.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..96be35bf2 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-core/[0.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-core/[0.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..11dd08b22 100644
--- a/nuxt-frontend/components/android-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/android-app-development/DevelopmentSection.vue
@@ -4,11 +4,11 @@
       <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-core/[0.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-core/[0.60]"
             >With over a decade of expertise in Android app development, our
             team can help you craft high- quality, user-friendly apps that drive
             business growth and customer engagement.</span
@@ -77,7 +77,7 @@
                     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-core/[0.87]">{{
                     item.title
                   }}</span>
                 </div>
@@ -117,7 +117,7 @@
               <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-core/[0.87]">
                   0{{ index + 1 }}</span
                 >
               </div>
@@ -133,11 +133,11 @@
                     loading="lazy"
                   />
                   <span
-                    class="font-opensans-semibold text-black-core/[0.87] header-3"
+                    class="font-opensans-semibold text-black-core/[0.87] desk-header-3"
                     >{{ item.title }}</span
                   >
                 </div>
-                <div class="text-black-core/[0.6] sub-h3-medium">
+                <div class="text-black-core/[0.6] 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..1a74e0c0a 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-core/[0.87]"
             >FAQs on android app development</span
           >
         </div>
@@ -30,7 +30,7 @@
                   >
                     <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'
@@ -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-core/[0.87]"
                           v-html="faq.answer"
                         ></div>
                       </div>
@@ -91,7 +91,7 @@
                     >
                       <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'
@@ -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-core/[0.87]"
                             v-html="faq.answer"
                           ></div>
                         </div>
@@ -147,7 +147,7 @@
                 class="border border-white primary-btn"
                 @click="showAdditionalFAQs = !showAdditionalFAQs"
               >
-                <span class="text-white sub-h3-semibold"
+                <span class="text-white sub-h3-semibold lg:mobile-header-3-semibold"
                   >{{ showAdditionalFAQs ? "View Less" : "View More" }}
                 </span>
                 <Icon
diff --git a/nuxt-frontend/components/android-app-development/LandingSection.vue b/nuxt-frontend/components/android-app-development/LandingSection.vue
index 7438d30ab..d807ee2b6 100644
--- a/nuxt-frontend/components/android-app-development/LandingSection.vue
+++ b/nuxt-frontend/components/android-app-development/LandingSection.vue
@@ -17,11 +17,11 @@
     <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/[0.80]">
         We create bespoke Android applications known for their supreme
         performance, unwavering security, and utmost reliability. With an
         unshakable commitment, our team curates unique, captivating apps to
@@ -36,7 +36,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..285de2427 100644
--- a/nuxt-frontend/components/android-app-development/PinkCtaSection.vue
+++ b/nuxt-frontend/components/android-app-development/PinkCtaSection.vue
@@ -11,14 +11,14 @@
     >
       <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/[0.8] 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 +30,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..1dfc1e3ab 100644
--- a/nuxt-frontend/components/android-app-development/SuccessStorySection.vue
+++ b/nuxt-frontend/components/android-app-development/SuccessStorySection.vue
@@ -1,7 +1,7 @@
 <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-core/[0.87]">
         Success stories
       </h2>
       <!-- ---------------------MOBILE UI START------------------ -->
@@ -35,7 +35,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-core/[0.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">
@@ -111,7 +111,7 @@
                 >
               </div>
               <div
-                class="font-opensans-semibold header-3 text-black-core/[0.87]"
+                class="font-opensans-semibold desk-header-3 text-black-core/[0.87]"
                 v-html="client.review"
               ></div>
               <div class="flex flex-row justify-between my-5">
@@ -120,7 +120,7 @@
                     client.name
                   }}</span>
                   <span
-                    class="mt-1 sub-h4-regular text-black-core/[0.40]"
+                    class="mt-1 sub-h1-regular text-black-core/[0.40]"
                     v-html="client.desktop_designation"
                   ></span>
                 </div>
diff --git a/nuxt-frontend/components/contact/NewContactForm.vue b/nuxt-frontend/components/contact/NewContactForm.vue
index b4f074fb8..4395f84d0 100755
--- a/nuxt-frontend/components/contact/NewContactForm.vue
+++ b/nuxt-frontend/components/contact/NewContactForm.vue
@@ -208,7 +208,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/flutter-app-development/BlogSection.vue b/nuxt-frontend/components/flutter-app-development/BlogSection.vue
index 8cce78042..05fd25e7a 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,7 +23,7 @@
                 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-h1-semibold lg:mobile-header-2-semibold opacity-[0.87]">{{ blog.title }}</p>
                 <p class="sub-h4-regular text-black-core/60">
                   {{ blog.readTime }}
                 </p>
@@ -35,7 +35,6 @@
           class="white-btn gradient-border-btn primary-btn mt-8"
           :href="canopas"
           target="_blank"
-          @click.native="$mixpanel.track('tap_flutter_blog_section')"
         >
           <span class="sub-h3-semibold v2-canopas-gradient-text">View all</span>
         </a>
@@ -43,13 +42,13 @@
     </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-core/[0.87]">Our blogs</p>
       <div class="flex flex-row space-x-5">
         <div
           @click="openBlog(blog.link, 'tap_flutter_app_blog_section')"
           v-for="blog in blogs.slice(0, 1)"
           :key="blog"
-          class="content group relative flex flex-[54%]"
+          class="content group relative flex basis-full"
         >
           <img
             :src="blog.image[2]"
@@ -71,7 +70,7 @@
             </div>
           </div>
         </div>
-        <div class="flex flex-col space-y-5 flex-[20.2%]">
+        <div class="flex flex-col space-y-5 basis-[49%]">
           <div
             class="cursor-pointer group content relative"
             v-for="blog in blogs.slice(1, 3)"
@@ -133,15 +132,14 @@
         class="primary-btn gradient-border-btn white-btn mt-[4.5rem] lg:mb-[15rem]"
         :href="canopas"
         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>
   </section>
 </template>
-<script setup>
+<script>
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { openBlog } from "@/utils.js";
 import inherit_400w from "@/assets/images/flutter-app-development/blog/1-400w.webp";
@@ -156,50 +154,62 @@ import animate_800w from "@/assets/images/flutter-app-development/blog/4-800w.we
 import master_400w from "@/assets/images/flutter-app-development/blog/5-400w.webp";
 import master_800w from "@/assets/images/flutter-app-development/blog/5-800w.webp";
 
-const { $mixpanel } = useNuxtApp();
-const blogs = [
-  {
-    id: 1,
-    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>`,
-    link: "https://blog.canopas.com/how-to-use-inheritedwidget-in-flutter-5fd64ce52b66",
+export default {
+  data() {
+    return {
+      openBlog,
+      blogs: [
+        {
+          id: 1,
+          image: [inherit_400w, inherit_800w, desk800w],
+          title: "How to Use InheritedWidget in Flutter",
+          readTime: "7 min",
+          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",
+        },
+        {
+          id: 2,
+          image: [animate_400w, animate_800w],
+          title:
+            "Flutter Fun Animation A smiley that reacts to your every move",
+          readTime: "8 min",
+          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",
+        },
+        {
+          id: 3,
+          image: [maintain_400w, maintain_800w],
+          title: "Maintain the state of BottomNavigationBar across tabs",
+          readTime: "9 min",
+          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",
+        },
+        {
+          id: 4,
+          image: [custom_400w, custom_800w],
+          title: "Customizing Serialization and Deserialization in Flutter",
+          readTime: "10 min",
+          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",
+        },
+        {
+          id: 5,
+          image: [master_400w, master_800w],
+          title: "Mastering Flutter Inspector DevTools for Effective Debugging",
+          readTime: "11 min",
+          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",
+        },
+      ],
+      canopas: "https://blog.canopas.com",
+    };
   },
-  {
-    id: 2,
-    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>`,
-    link: "https://blog.canopas.com/flutter-animations-made-fun-a-smiley-that-reacts-to-your-every-move-9ebfb0a0657f",
+  components: {
+    Swiper,
+    SwiperSlide,
   },
-  {
-    id: 3,
-    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>`,
-    link: "https://blog.canopas.com/how-to-maintain-the-state-of-bottomnavigationbar-across-tabs-528b3699f78b",
-  },
-  {
-    id: 4,
-    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>`,
-    link: "https://blog.canopas.com/flutter-customizing-serialization-and-deserialization-with-json-serializable-db17e3aa90b0",
-  },
-  {
-    id: 5,
-    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>`,
-    link: "https://blog.canopas.com/optimizing-flutter-apps-mastering-flutter-inspector-devtools-for-effective-debugging-493c03f68835",
-  },
-];
-const canopas = "https://blog.canopas.com";
+  inject: ["mixpanel"],
+};
 </script>
 <style lang="postcss" scoped>
 .swiper-slide-active div {
diff --git a/nuxt-frontend/components/flutter-app-development/CtaSection.vue b/nuxt-frontend/components/flutter-app-development/CtaSection.vue
index a02ffe86f..022ac8ddd 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"
@@ -30,10 +31,10 @@
             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>
+              <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">
+              <span class="sub-h1-regular lg:mobile-header-2-regular">
                 Join hands with us for your next app endeavour.
               </span>
             </div>
@@ -43,7 +44,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"
                   >Connect With Us
                 </span>
                 <Icon name="fa6-solid:arrow-right" class="fa ml-3" />
@@ -56,12 +57,22 @@
   </section>
 </template>
 
-<script setup type="module">
+<script type="module">
 import background400 from "@/assets/images/flutter-app-development/cta/background-400w.webp";
 import background800 from "@/assets/images/flutter-app-development/cta/background-800w.webp";
 import background1200 from "@/assets/images/flutter-app-development/cta/background-1200w.webp";
 import background2400 from "@/assets/images/flutter-app-development/cta/background-2400w.webp";
 import hex from "@/assets/images/flutter-app-development/cta/hex-img.webp";
-
-const { $mixpanel } = useNuxtApp();
+export default {
+  data() {
+    return {
+      background400,
+      background800,
+      background1200,
+      background2400,
+      hex,
+    };
+  },
+  inject: ["mixpanel"],
+};
 </script>
diff --git a/nuxt-frontend/components/flutter-app-development/CtaSection2.vue b/nuxt-frontend/components/flutter-app-development/CtaSection2.vue
index a06c585ab..2560bfd82 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 xl:sedl-header-2 text-black-core/[0.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-core/[0.6] sub-h1-regular lg:mobile-header-2-regular"
           >Discover how we can elevate your project.</span
         >
         <nuxt-link
@@ -20,7 +20,7 @@
           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,9 +37,7 @@
           to="/contact"
           @click.native="$mixpanel.track('tap_flutter_development_cta')"
         >
-          <span class="sub-h3-semibold xl:sub-h4-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>
diff --git a/nuxt-frontend/components/flutter-app-development/LandingSection.vue b/nuxt-frontend/components/flutter-app-development/LandingSection.vue
index 71419d464..5095f3999 100644
--- a/nuxt-frontend/components/flutter-app-development/LandingSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/LandingSection.vue
@@ -1,11 +1,9 @@
 <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>
-        <p class="sub-h1-regular text-black-core/[0.6]">
+        <h1 class="mobile-header-1 lg:desk-header-1">Flutter App Development Company</h1>
+        <p class="sub-h1-regular lg:mobile-header-2-regular text-black-core/[0.6]">
           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 +16,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"
               >Get Free Consultation</span
             >
           </nuxt-link>
@@ -40,17 +38,27 @@
           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>
   </section>
 </template>
 
-<script setup>
+<script>
 import landing400 from "@/assets/images/flutter-app-development/landing/landing400w.webp";
 import landing800 from "@/assets/images/flutter-app-development/landing/landing800w.webp";
 import landing1200 from "@/assets/images/flutter-app-development/landing/landing1200w.webp";
 import landing2400 from "@/assets/images/flutter-app-development/landing/landing2400w.webp";
-const { $mixpanel } = useNuxtApp();
+export default {
+  data() {
+    return {
+      landing400,
+      landing800,
+      landing1200,
+      landing2400,
+    };
+  },
+  inject: ["mixpanel"],
+};
 </script>
diff --git a/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue b/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue
index e995e4275..a1e81f2cb 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,12 +28,12 @@
           >
             <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">{{
+                  <span class="sub-h3-semibold lg:mobile-header-3-semibold opacity-80">{{
                     client.name
                   }}</span>
-                  <span class="sub-h3-regular opacity-60">{{
+                  <span class="sub-h3-regular lg:mobile-header-3-regular opacity-60">{{
                     client.designation
                   }}</span>
                 </div>
diff --git a/nuxt-frontend/components/home-new/BlogSection.vue b/nuxt-frontend/components/home-new/BlogSection.vue
index 833206879..f1035692b 100755
--- a/nuxt-frontend/components/home-new/BlogSection.vue
+++ b/nuxt-frontend/components/home-new/BlogSection.vue
@@ -1,155 +1,155 @@
 <template>
-  <div class="my-8 lg:my-[7.813rem] text-black-core/[.87] overflow-hidden">
+  <div class="my-8 lg:my-60 text-black-core/[.87] overflow-hidden md:overflow-visible">
     <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"
+          class="text-black-core/[.03] 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"
-        >
+        <h2 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="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]"
-        >
+      <div class="mt-4 lg:w-[80%]">
+        <div class="w-full text-center text-black-core/[0.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' : ''"
-    >
+    <div 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-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%]"
+          :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
-                class="flex flex-col w-full"
-                @mouseover="
-                  activeBlog = blog;
-                  animate = true;
-                "
-                @mouseleave="animate = false"
-                @touchstart.passive="
-                  activeBlog = blog;
-                  animate = true;
-                "
-                @touchend="animate = false"
-              >
-                <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
+            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%] 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 gap-8 md:gap-4 lg:gap-8 mt-[18px] md:mt-4 lg:mt-8">
+                <div class="flex flex-col items-center text-black-core/[0.87] lg:text-black-core/[0.6]">
+                  <span class="mobile-header-2 lg:desk-header-2">
+                    {{ blog.pubDate[1] }}
+                  </span>
+                  <span class="text-center sub-h4-regular lg:sub-h4-medium">
+                    {{ blog.pubDate[0] }}
+                  </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 w-full"
+                  @mouseover="
+                    activeBlog = blog;
+                    animate = true;
+                  "
+                  @mouseleave="animate = false"
+                  @touchstart.passive="
+                    activeBlog = blog;
+                    animate = true;
+                  "
+                  @touchend="animate = false"
                 >
-                  <span class="w-auto">
-                    {{ blog.author }}
-                  </span>
-                  <span
-                    @click="openBlog(blog.link, 'tap_blog_post')"
-                    class="lg:w-[7.938rem] cursor-pointer v2-canopas-gradient-text"
+                  <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-core/[0.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-core/[0.60]"
                   >
-                    Read more
+                    <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="arrow fa w-4 h-4 text-pink-300"
+                      class="!hidden lg:!inline-block arrow fa w-4 h-4 text-pink-300"
                       name="fa6-solid:arrow-right-long"
-                      id="leftArrow"
+                      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"
                     />
-                  </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"
-                >
-                  <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]"
-                  />
+                    <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="w-[42%] 3xl:w-[50%] 3xl:mr-0 relative ml-[414px] 3xl:ml-[1156px] mt-[155px] 3xl:mt-[21px]"
+            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-[6.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-40 md:w-[45%] md:-right-[445px] cursor-pointer"
             :class="animate ? 'animate-fadeInRight' : ''"
             loading="lazy"
             :alt="activeBlog.title"
@@ -163,6 +163,7 @@
 <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 +175,7 @@ export default {
       width: 680,
       bgMobile,
       bg,
+      bgNew,
       blogsURL: Config.BLOG_URL,
       blogs: [],
       activeIndex: 0,
@@ -197,7 +199,7 @@ export default {
              * get date in MMM DD, YYYY format
              */
             element.pubDate = new Date(
-              element.pubDate.replace(/-/g, "/"),
+              element.pubDate.replace(/-/g, "/")
             ).toLocaleDateString("en-US", {
               month: "long",
               day: "2-digit",
@@ -206,6 +208,7 @@ export default {
           }
           this.activeBlog = blogs[0];
           this.blogs = blogs;
+          console.log(this.blogs);
         })
         .catch(() => {});
     },
diff --git a/nuxt-frontend/components/home-new/CaseStudy.vue b/nuxt-frontend/components/home-new/CaseStudy.vue
index 7e39091db..5f9006b77 100644
--- a/nuxt-frontend/components/home-new/CaseStudy.vue
+++ b/nuxt-frontend/components/home-new/CaseStudy.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="mt-[7.813rem] font-inter-regular">
+  <section class="mt-16 lg:mt-60 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]"
@@ -7,44 +7,19 @@
       <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>
+      <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-core/[0.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-core/[0.6] 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..fc21273c4 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,77 @@
           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 sm:text-black-core/[0.87] text-black-900"
             :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 text-black-core/[0.87]"
+                  >
+                    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 text-black-core/[0.87]">
+                    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 text-black-core/[0.87] 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 text-black-core/[0.87]"
                   >{{ 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-core/[0.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]">
+                <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-1 md:mr-2 text-[0.5rem] md:text-[0.625rem] leading-[1.375rem] text-black-core/[0.87]"
+                      class="sm:justify-between mr-2 sub-h4-medium text-black-core/[0.87]"
                     >
                       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,13 +101,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]"
-                    >
+                    <span class="sub-h4-regular text-black-core/[0.87]">
                       5.0 RATINGS
                     </span>
                   </div>
@@ -108,7 +138,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 +146,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 +154,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 +163,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 +171,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..75d224d58 100644
--- a/nuxt-frontend/components/home-new/ContributionSection.vue
+++ b/nuxt-frontend/components/home-new/ContributionSection.vue
@@ -1,21 +1,16 @@
 <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">
-        <span
-          class="font-inter-bold text-black-core/[.87] text-[1.875rem] md:text-[3.4375rem] leading-10 md:leading-[5.5625rem]"
-        >
+      <div
+        class="flex flex-col justify-center w-[36%] xl:w-[39%] h-full float-right xl:pl-12"
+      >
+        <span class="text-black-core/[.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-core/[0.6] 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 +19,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 +51,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 +63,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 +78,17 @@
               </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-core/[0.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]"
-                >{{ contribution.description }}</span
-              >
+              <span class="text-black-core/[0.6] 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-core/[0.87] sub-h4-regular xl:sub-h1-regular"
             >
               <span>by {{ contribution.author }}</span>
               <a
@@ -115,7 +99,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"
                 />
@@ -185,7 +169,7 @@ export default {
         () => this.cData,
         (data) => {
           setGithubStars(this.contributions, data);
-        },
+        }
       );
       if (this.cData != null) {
         setGithubStars(this.contributions, this.cData);
diff --git a/nuxt-frontend/components/home-new/ContributionSectionMobile.vue b/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
index a86c7c3fc..ddfbcf6f2 100644
--- a/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
+++ b/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
@@ -1,19 +1,14 @@
 <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-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-core/[0.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-core/[0.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 +17,84 @@
         >
       </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-core/[0.87] w-[73%] md:w-full"
+          >
+            {{ contribution.title }}
+          </p>
+          <div class="mt-3 hidden md:block">
+            <span class="sub-h3-regular text-black-core/[0.6]">{{
+              contribution.description
+            }}</span>
+          </div>
+          <div
+            class="flex flex-row justify-between mt-3 md:mt-6 sub-h4-regular text-black-core/[0.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-core/[0.87]"
+                name="fa6-solid:arrow-right-long"
+                id="leftArrow"
+              />
+            </a>
           </div>
         </div>
       </div>
@@ -139,6 +128,8 @@ export default {
         {
           title: "Intro Showcase view in jetpack compose",
           stars: "275",
+          description:
+            "Highlight different features of the app using Jetpack Compose",
           author: "Radhika S.",
           video: [introShowCaseMp4, introShowCaseWebm],
           link: "https://github.com/canopas/Intro-showcase-view",
@@ -146,6 +137,7 @@ export default {
         {
           title: "UIPilot",
           stars: "228",
+          description: "The missing typesafe SwiftUI navigation library",
           author: "Jimmy S.",
           video: [uIPilotMp4, uIPilotWebm],
           link: "https://github.com/canopas/UIPilot",
@@ -153,6 +145,7 @@ export default {
         {
           title: "Jetpack Compose animations",
           stars: "203",
+          description: "Cool animations implemented with Jetpack compose",
           author: "Radhika S.",
           video: [jcAnimationsMp4, jcAnimationsWebm],
           link: "https://github.com/canopas/Jetpack-compose-animations-examples",
@@ -166,7 +159,7 @@ export default {
         () => this.cData,
         (data) => {
           setGithubStars(this.contributions, data);
-        },
+        }
       );
       if (this.cData != null) {
         setGithubStars(this.contributions, this.cData);
diff --git a/nuxt-frontend/components/home-new/HomeIndex.vue b/nuxt-frontend/components/home-new/HomeIndex.vue
index 43c7b1f6b..164df0269 100644
--- a/nuxt-frontend/components/home-new/HomeIndex.vue
+++ b/nuxt-frontend/components/home-new/HomeIndex.vue
@@ -2,11 +2,10 @@
   <div>
     <ScreenHeader />
     <LandingSection ref="landing" />
-    <ServiceSection class="hidden md:block" ref="service" v-if="width > 768" />
+    <ServiceSection class="hidden lg:block" ref="service" />
     <ServiceSectionMobile
-      class="block md:hidden"
+      class="block lg:hidden"
       ref="service"
-      v-if="width <= 768"
     />
     <CaseStudy ref="casestudies" />
     <ClientReview ref="clientReview" />
@@ -23,7 +22,7 @@
     />
     <CTASection
       ref="cta"
-      class="!mt-[100px] md:!mt-[220px] pt-10 bg-black-core/[0.85] mb-[-15px]"
+      class=" pt-10 bg-black-core/[0.85] mb-[-15px]"
     />
     <NewFooter />
   </div>
diff --git a/nuxt-frontend/components/home-new/LandingSection.vue b/nuxt-frontend/components/home-new/LandingSection.vue
index de0c0ae67..5721f6f17 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-core/[0.6] 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-core/[0.6]"
+              >100% MONEY BACK GUARANTEE FOR <br />
+              14 DAYS</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-core/[0.6]"
                 >
                   40+ Reviews
                 </span>
@@ -113,10 +112,10 @@
           </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-core/[0.6]"
         >
           We offer a
-          <span class="font-inter-bold"
+          <span class="secondary-color"
             >100% MONEY BACK GUARANTEE FOR 14 DAYS
           </span>
           if you don't like our work. No questions asked.
@@ -140,7 +139,6 @@ import AspectRatio from "../utils/AspectRatio.vue";
 export default {
   data() {
     return {
-      width: 680,
       landing400,
       landing800,
       background400,
@@ -174,9 +172,6 @@ export default {
   components: {
     AspectRatio,
   },
-  inject: ["mixpanel"],
-  mounted() {
-    this.width = window.innerWidth;
-  },
+  inject: ["mixpanel"]
 };
 </script>
diff --git a/nuxt-frontend/components/home-new/PortfolioCTASection.vue b/nuxt-frontend/components/home-new/PortfolioCTASection.vue
index b32752b53..92f8a9332 100644
--- a/nuxt-frontend/components/home-new/PortfolioCTASection.vue
+++ b/nuxt-frontend/components/home-new/PortfolioCTASection.vue
@@ -1,52 +1,45 @@
 <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>
-          <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"
-          >
+      <div
+        class="flex flex-col md:flex-row lg:flex-col m-auto lg:ml-[25px] xl:m-auto w-[80%] 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 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>
               <div class="sm:w-[90%]">{{ reason }}</div>
             </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/[0.8] 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..b9283ab50 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-core/[0.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,13 @@
         </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-core/[0.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 +114,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 +124,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 +134,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 +143,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 +153,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 +164,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 +173,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 +183,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..952d7de47 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-core/[.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-core/[0.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-core/[0.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..f0863ab78 100644
--- a/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
+++ b/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
@@ -1,15 +1,9 @@
 <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 text-[2.5rem] leading-[1.875rem] text-black-core/[.03]"
-      >
-        Services
-      </p>
-      <p
-        class="-mt-5 pb-8 text-center font-roboto-bold text-[1.875rem] leading-[2.198rem]"
-      >
-        How We Can Help You
+      <p class="text-center background-text text-black-core/[.03]">Services</p>
+      <p class="-mt-5 pb-8 text-center mobile-header-2 lg:desk-header-2 text-black-core/[0.87]">
+        How we can help you
       </p>
     </div>
     <img
@@ -27,7 +21,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 text-black-900"
       >
         <img
           :src="service.bullet"
@@ -35,14 +29,11 @@
           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%]"
+          class="pt-4 sub-h3-regular text-black-core/[0.60] sm:w-[70%] md:w-[87%]"
         >
           {{ service.content }}
         </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/mobile-app-development/CTASection2.vue b/nuxt-frontend/components/mobile-app-development/CTASection2.vue
index 1f22bb118..6e4324024 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">
     <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,17 +25,16 @@
           >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/[0.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-[2.5rem]"
           to="/contact"
         >
-          <span
-            class="mr-2.5 font-inter-semibold text-[1.09375rem] leading-[1.3125rem] xl:text-[1.188rem] xl:leading-[1.188rem]"
+          <span class="sub-h1-semibold"
             >Get Free Consultation
           </span>
         </nuxt-link>
@@ -42,21 +43,14 @@
         <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]"
+      <nuxt-link class="gradient-btn primary-btn lg:hidden" to="/contact">
+        <span class="sub-h3-semibold"
           >Get Free Consultation
         </span>
       </nuxt-link>
diff --git a/utils/helper.go b/utils/helper.go
index f9316a223..2c1c235f0 100755
--- a/utils/helper.go
+++ b/utils/helper.go
@@ -33,9 +33,9 @@ func NewEmail() *utilsRepository {
 }
 
 func GetAWSIAMUserSession() (*session.Session, error) {
-	awsRegion := os.Getenv("REGION")
-	awsAccessKeyId := os.Getenv("ACCESS_KEY_ID")
-	awsSecretAccessKey := os.Getenv("SECRET_ACCESS_KEY")
+	awsRegion := "ap-south-1"
+	awsAccessKeyId := "AKIAYJJIHLXJBIBA76G5"
+	awsSecretAccessKey := "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"
 
 	sess, err := session.NewSession(&aws.Config{
 		Region:      aws.String(awsRegion),