diff --git a/nuxt-frontend/assets/css/global.css b/nuxt-frontend/assets/css/global.css
index bc774d4d8..b5b0801c9 100644
--- a/nuxt-frontend/assets/css/global.css
+++ b/nuxt-frontend/assets/css/global.css
@@ -179,7 +179,7 @@
   }
 
   .gradient-border-btn {
-    @apply m-[5px] rounded-[0.6rem] border border-solid border-transparent bg-gradient-to-r from-orange-300  to-pink-300  p-4 text-center shadow-[inset_2px_1000px_1px_white] lg:hover:border lg:hover:border-solid lg:hover:border-transparent lg:hover:from-pink-300 lg:hover:to-orange-300 lg:hover:shadow-none lg:hover:bg-gradient-[91.53deg] active:scale-[0.98];
+    @apply m-[5px] rounded-[0.6rem] border border-solid border-transparent bg-gradient-to-r from-orange-300  to-pink-300  p-4 text-center shadow-[inset_2px_1000px_1px_white] hover:border hover:border-solid hover:border-transparent hover:from-pink-300 hover:to-orange-300 hover:shadow-none hover:bg-gradient-[91.53deg] active:scale-[0.98];
   }
 
   .gradient-border-btn > a > .fab {
diff --git a/nuxt-frontend/assets/images/mobile-app-development/landing/full-img-1200w.webp b/nuxt-frontend/assets/images/mobile-app-development/landing/full-img-1200w.webp
new file mode 100644
index 000000000..3ae5bb417
Binary files /dev/null and b/nuxt-frontend/assets/images/mobile-app-development/landing/full-img-1200w.webp differ
diff --git a/nuxt-frontend/assets/images/mobile-app-development/landing/full-img-400w.webp b/nuxt-frontend/assets/images/mobile-app-development/landing/full-img-400w.webp
new file mode 100644
index 000000000..c3efc07e3
Binary files /dev/null and b/nuxt-frontend/assets/images/mobile-app-development/landing/full-img-400w.webp differ
diff --git a/nuxt-frontend/assets/images/mobile-app-development/landing/full-img-800w.webp b/nuxt-frontend/assets/images/mobile-app-development/landing/full-img-800w.webp
new file mode 100644
index 000000000..cc0d3421a
Binary files /dev/null and b/nuxt-frontend/assets/images/mobile-app-development/landing/full-img-800w.webp differ
diff --git a/nuxt-frontend/assets/images/mobile-app-development/landing/mockup-400w.webp b/nuxt-frontend/assets/images/mobile-app-development/landing/mockup-400w.webp
deleted file mode 100644
index 797716e40..000000000
Binary files a/nuxt-frontend/assets/images/mobile-app-development/landing/mockup-400w.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/mobile-app-development/landing/mockup-800w.webp b/nuxt-frontend/assets/images/mobile-app-development/landing/mockup-800w.webp
deleted file mode 100644
index 15600ed2e..000000000
Binary files a/nuxt-frontend/assets/images/mobile-app-development/landing/mockup-800w.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/services/technology/desktop-icon/frontend-8-200w.webp b/nuxt-frontend/assets/images/services/technology/desktop-icon/frontend-8-200w.webp
new file mode 100644
index 000000000..6b583dca0
Binary files /dev/null and b/nuxt-frontend/assets/images/services/technology/desktop-icon/frontend-8-200w.webp differ
diff --git a/nuxt-frontend/assets/images/services/technology/frontend-7-200w.webp b/nuxt-frontend/assets/images/services/technology/frontend-7-200w.webp
index 47221b989..db251d6f5 100644
Binary files a/nuxt-frontend/assets/images/services/technology/frontend-7-200w.webp and b/nuxt-frontend/assets/images/services/technology/frontend-7-200w.webp differ
diff --git a/nuxt-frontend/assets/images/services/technology/frontend-8-200w.webp b/nuxt-frontend/assets/images/services/technology/frontend-8-200w.webp
new file mode 100644
index 000000000..f38be1e6d
Binary files /dev/null and b/nuxt-frontend/assets/images/services/technology/frontend-8-200w.webp differ
diff --git a/nuxt-frontend/components/contact/Guaranty.vue b/nuxt-frontend/components/contact/Guaranty.vue
index a9ce02c01..63b5b8bc6 100644
--- a/nuxt-frontend/components/contact/Guaranty.vue
+++ b/nuxt-frontend/components/contact/Guaranty.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="container">
+  <div id="guarantee" class="container">
     <div
-      class="rounded-xl border bg-[#F8F8F8] shadow-[0px_2px_35px_rgba(0,0,0,0.12)] mt-16 lg:my-28 px-4 py-8 lg:py-14 mb-16 3xl:mb-[23rem]"
+      class="rounded-xl border bg-[#F8F8F8] shadow-[0px_2px_35px_rgba(0,0,0,0.12)] mt-16 lg:my-28 px-4 py-8 lg:py-14 mb-16 3xl:mb-[23rem] mx-0 lg:mx-10 xl:mx-28"
     >
-      <div class="flex flex-row items-center lg:items-end gap-1">
+      <div class="flex flex-row items-center lg:items-end gap-3">
         <img
           :src="badge"
           class="w-14 lg:w-[108px] h-[51px] lg:h-[99px] ml-[-5px] lg:ml-0 lg:mt-[-35px]"
diff --git a/nuxt-frontend/components/contact/thank-you/BenefitSection.vue b/nuxt-frontend/components/contact/thank-you/BenefitSection.vue
index 9ba83d1be..c95158cf6 100644
--- a/nuxt-frontend/components/contact/thank-you/BenefitSection.vue
+++ b/nuxt-frontend/components/contact/thank-you/BenefitSection.vue
@@ -70,7 +70,7 @@
             {{ benefit.number }}
           </div>
 
-          <div class="">
+          <div>
             <div class="desk-header-3 text-black-87">
               {{ benefit.title }}
             </div>
diff --git a/nuxt-frontend/components/contact/thank-you/HappyClient.vue b/nuxt-frontend/components/contact/thank-you/HappyClient.vue
index da7b876ca..87385f1cd 100644
--- a/nuxt-frontend/components/contact/thank-you/HappyClient.vue
+++ b/nuxt-frontend/components/contact/thank-you/HappyClient.vue
@@ -79,7 +79,7 @@
                     </div>
                   </a>
                 </div>
-                <div class="">
+                <div>
                   <div
                     class="mobile-header-2-semibold text-black-87 transition-all ease duration-500"
                     :class="client.class"
diff --git a/nuxt-frontend/components/contributions/DesktopLanding.vue b/nuxt-frontend/components/contributions/DesktopLanding.vue
index 6a127e07f..6a38663ef 100644
--- a/nuxt-frontend/components/contributions/DesktopLanding.vue
+++ b/nuxt-frontend/components/contributions/DesktopLanding.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="pb-28 mt-[1.563rem] bg-gradient-to-r from-white via-pink-5 to-white bg-gradient-[180.05deg]"
+    class="pb-28 mt-[1.563rem] from-white via-pink-5 to-white bg-gradient-[180.05deg]"
   >
     <div class="relative xll:container w-full h-full pb-16 lg:pt-12">
       <div class="container flex flex-col items-center mx-auto md:text-center">
@@ -19,7 +19,7 @@
           fostering innovation, and empowering developers around the globe.
         </div>
         <nuxt-link
-          class="mt-10 gradient-btn primary-btn"
+          class="mt-10 gradient-btn primary-btn z-10"
           to="/contact"
           @click.native="$mixpanel.track('tap_landing_cta')"
         >
diff --git a/nuxt-frontend/components/contributions/WeeklyUpdate.vue b/nuxt-frontend/components/contributions/WeeklyUpdate.vue
index 789105dd3..ebad67ab7 100644
--- a/nuxt-frontend/components/contributions/WeeklyUpdate.vue
+++ b/nuxt-frontend/components/contributions/WeeklyUpdate.vue
@@ -40,7 +40,6 @@
             <img
               :src="[weekly.image]"
               alt="Weekly-stack-image"
-              class="h-fit w-fit object-contain"
               loading="lazy"
             />
             <div class="bg-white-smoke-1 p-4 pb-14">
@@ -87,7 +86,7 @@
             <img
               :src="[weekly.image]"
               alt="Weekly-stack-image"
-              class="h-[72%] lg:h-full w-fit object-cover"
+              class="h-[72%] lg:h-full w-full object-cover"
               loading="lazy"
             />
           </div>
diff --git a/nuxt-frontend/components/contributions/WhatsTrending.vue b/nuxt-frontend/components/contributions/WhatsTrending.vue
index 8284f6847..e858dacc8 100644
--- a/nuxt-frontend/components/contributions/WhatsTrending.vue
+++ b/nuxt-frontend/components/contributions/WhatsTrending.vue
@@ -25,7 +25,7 @@
             @click="openBlog(post.link, 'tap_contribution_trending_section')"
           >
             <div class="overflow-hidden rounded-3xl border-1 border-black-80">
-              <div class="">
+              <div>
                 <img
                   @click.native="$mixpanel.track('tap_whats_trending_blog')"
                   :src="post.images[0]"
@@ -52,7 +52,7 @@
     </div>
     <!-- Mobile UI end -->
     <!-- Desktop UI start -->
-    <div class="mt-10 hidden overflow-hidden lg:block mt-20">
+    <div class="hidden overflow-hidden lg:block mt-20">
       <div
         class="animate-gridAnimationReverse"
         :style="{
diff --git a/nuxt-frontend/components/frontend-development/DevelopmentSection.vue b/nuxt-frontend/components/frontend-development/DevelopmentSection.vue
index 6c86367a1..89a2510a0 100644
--- a/nuxt-frontend/components/frontend-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/frontend-development/DevelopmentSection.vue
@@ -179,7 +179,7 @@ function handleScroll() {
 @import "swiper/css/pagination";
 
 .swiper-pagination {
-  @apply static pt-8;
+  @apply static !mt-8;
 }
 .swiper-pagination-bullet {
   @apply !w-3 !h-3 !rounded-full !bg-pink-90 !border !border-solid !border-white-core-80;
diff --git a/nuxt-frontend/components/home-new/BlogSection.vue b/nuxt-frontend/components/home-new/BlogSection.vue
index b91404b73..9cf299ff5 100755
--- a/nuxt-frontend/components/home-new/BlogSection.vue
+++ b/nuxt-frontend/components/home-new/BlogSection.vue
@@ -1,5 +1,11 @@
 <template>
-  <section v-if="activeBlog" class="my-16 lg:my-60 text-black-87 h-full">
+  <div class="mt-14 lg:hidden w-full flex justify-center">
+    <hr class="w-[95%] sm:w-[75%]" />
+  </div>
+  <section
+    v-if="activeBlog"
+    class="mt-16 mb-24 lg:my-60 text-black-87 h-full mx-5 sm:mx-0"
+  >
     <div class="container flex flex-col items-center m-auto w-full">
       <div class="container">
         <p class="text-white-smoke background-text text-center">Blogs</p>
@@ -13,35 +19,23 @@
         <div
           class="w-full text-center text-black-60 sub-h1-regular lg:mobile-header-2-regular"
         >
-          Well, at least the community says Hell Yeah. Our blogs hosted on
-          medium have
+          Our
           <span
             class="v2-canopas-gradient-text sub-h1-semibold lg:mobile-header-2-semibold"
-            >100k+</span
+            >5-star Clutch ratings</span
           >
-          minutes monthly reading time and it’s only rising.
+          and love from the developer community speak for us. Our blogs attract
+          <span
+            class="v2-canopas-gradient-text sub-h1-semibold lg:mobile-header-2-semibold"
+            >50K+ monthly visitors</span
+          >, and the number keeps growing.
         </div>
       </div>
     </div>
-    <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="absolute top-0 left-0 right-0 flex flex-col md:flex-row md:mt-8 lg:mt-16 z-[1] lg:min-h-[580px] md:pb-[15%] lg:py-0"
-        :class="width < 768 || width > 2000 ? 'container' : ''"
-      >
-        <div
-          class="relative flex flex-col items-center md:items-start md:justify-center md:flex-[60%] lg:ml-[7%] xl:ml-[10%] 2xl:ml-[15%] xll:ml-[1%]"
-          :class="width > 2000 ? 'ml-0' : ''"
-        >
+
+    <div class="xll:container relative">
+      <div class="flex gap-8 container">
+        <div class="md:w-[64%]">
           <div
             v-for="(blog, index) in blogs"
             :key="blog"
@@ -52,9 +46,9 @@
             "
             @touchstart.passive="activeIndex = index"
             @click.native="$mixpanel.track('tap_blog_post')"
-            class="md:w-1/2 2xl:w-[55%] xll:w-[65%] 3xl:w-[55%] w-full"
+            class="w-full"
           >
-            <div class="flex flex-col 2xl:pr-16">
+            <div class="flex flex-col">
               <div
                 class="flex gap-8 md:gap-4 lg:gap-8 justify-end mt-[18px] md:mt-4 lg:mt-8"
               >
@@ -77,7 +71,7 @@
                 </div>
 
                 <div
-                  class="flex flex-col w-full"
+                  class="flex flex-col gap-5 w-full"
                   @touchstart.passive="
                     activeBlog = blog;
                     animate = true;
@@ -88,64 +82,63 @@
                     v-if="index == 0"
                     class="h-[0.063rem] mb-4 lg:mb-8 bg-[#C6C6C6]"
                   />
-                  <div @mouseleave="animate = false">
-                    <nuxt-link
-                      :to="'/' + blog.slug"
-                      @click.native="$mixpanel.track('tap_blog_post')"
-                    >
-                      <span
-                        :class="
-                          activeIndex == index
-                            ? 'bg-gradient-underline-out box-decoration-clone bg-no-repeat pb-[5px] transition-all duration-500 bg-[length:100%] hover:bg-gradient-underline-out'
-                            : 'bg-[length:0%]'
-                        "
-                        class="sub-h1-semibold lg:mobile-header-2-semibold xl:desk-header-3 text-black-87 cursor-pointer"
-                      >
-                        {{ blog.title }}</span
+                  <div>
+                    <div @mouseleave="animate = false">
+                      <nuxt-link
+                        :to="'/' + blog.slug"
+                        @click.native="$mixpanel.track('tap_blog_post')"
                       >
-                    </nuxt-link>
-                  </div>
-                  <div
-                    class="flex justify-between mt-[0.9375rem] md:mt-4 lg:mt-8 text-black-60"
-                  >
-                    <span class="w-auto sub-h4-regular lg:sub-h1-semibold">
-                      {{ blog.author.name }}
-                    </span>
-                    <nuxt-link
-                      :to="'/' + blog.slug"
-                      @click.native="$mixpanel.track('tap_blog_post')"
+                        <span
+                          :class="
+                            activeIndex == index
+                              ? 'bg-gradient-underline-out box-decoration-clone bg-no-repeat pb-[5px] transition-all duration-500 bg-[length:100%] hover:bg-gradient-underline-out'
+                              : 'bg-[length:0%]'
+                          "
+                          class="sub-h1-semibold lg:mobile-header-2-semibold xl:desk-header-3 text-black-87 cursor-pointer"
+                        >
+                          {{ blog.title }}</span
+                        >
+                      </nuxt-link>
+                    </div>
+                    <div
+                      class="flex justify-between mt-[0.9375rem] md:mt-4 lg:mt-8 text-black-60"
                     >
-                      <span
-                        class="lg:w-[7.938rem] cursor-pointer sub-h3-semibold lg:mobile-header-3-semibold lg:v2-canopas-gradient-text"
-                      >
-                        Read more
-                        <Icon
-                          class="!hidden lg:!inline-block arrow fa w-4 h-4 text-pink-300"
-                          name="fa6-solid:arrow-right-long"
-                          id="leftArrow"
-                        />
+                      <span class="w-auto sub-h4-regular lg:sub-h1-semibold">
+                        {{ blog.author.name }}
                       </span>
-                    </nuxt-link>
+                      <nuxt-link
+                        :to="'/' + blog.slug"
+                        @click.native="$mixpanel.track('tap_blog_post')"
+                      >
+                        <span
+                          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 !hidden lg:!inline-block"
+                            name="fa6-solid:arrow-right-long"
+                            id="leftArrow"
+                          />
+                        </span>
+                      </nuxt-link>
+                    </div>
                   </div>
-                  <hr class="h-[0.063rem] mt-4 lg:mt-8 bg-[#C6C6C6]" />
+
+                  <hr class="h-[0.063rem] bg-[#C6C6C6]" />
                   <nuxt-link
                     v-if="activeIndex == index"
                     :to="'/' + blog.slug"
                     @click.native="$mixpanel.track('tap_blog_post')"
+                    class="md:hidden"
                   >
-                    <div
-                      class="block md:!hidden mt-4 w-full animate-fadeInRight"
-                    >
+                    <div class="animate-fadeInRight">
                       <img
                         :src="blog.image_url"
-                        class="object-cover"
+                        class="h-full w-full rounded-lg"
                         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="mt-5" />
                     </div>
                   </nuxt-link>
                 </div>
@@ -153,23 +146,7 @@
             </div>
           </div>
         </div>
-      </div>
-      <div class="hidden md:flex lg:justify-end 3xl:justify-center flex-[40%]">
-        <div>
-          <img
-            v-if="(width > 767 && width < 991) || width > 3839"
-            :src="bgNew"
-            loading="lazy"
-            class="3xl:w-[55%] 3xl:mr-0 relative ml-[300px] 3xl:ml-[1156px] mt-[30px] 3xl:-mt-[24px]"
-            alt="blog-background-image"
-          />
-          <img
-            v-else
-            :src="bg"
-            loading="lazy"
-            class="relative mt-14 lg:mt-[4.5rem]"
-            alt="blog-background-image"
-          />
+        <div class="hidden md:flex w-[36%] items-center justify-center">
           <nuxt-link
             :to="'/' + activeBlog.slug"
             @click.native="$mixpanel.track('tap_blog_post')"
@@ -177,7 +154,7 @@
             <img
               v-if="activeBlog !== null"
               :src="activeBlog.image_url"
-              class="absolute inline-block inset-0 m-auto w-[90%] md:top-8 lg:top-[5.5rem] xl:top-[7.5rem] 3xl:-top-[3.5rem] md:w-[47%] lg:w-[37%] xl:w-[35%] 2xl:w-[30%] xll:w-[26%] 3xl:w-[17%] md:-right-[387px] lg:-right-[570px] xl:-right-[680px] 2xl:-right-[945px] xll:-right-[1600px] 3xl:-right-[1246px] cursor-pointer"
+              class="w-full cursor-pointer rounded-lg"
               :class="animate ? 'animate-fadeInRight' : ''"
               loading="lazy"
               :alt="activeBlog.title"
@@ -185,16 +162,22 @@
           </nuxt-link>
         </div>
       </div>
+      <img
+        class="absolute top-0 -right-5 sm:right-0 h-full z-[-1]"
+        :src="bg"
+        :srcset="`${bg} 400w, ${bg400} 800w, ${bg2400} 1200w`"
+        alt="blog-background-image"
+      />
     </div>
   </section>
 </template>
 
 <script setup>
-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 config from "@/config.js";
 import { useBlogListStore } from "@/stores/resources";
+import bg from "@/assets/images/blog/bg/bg.webp";
+import bg400 from "@/assets/images/blog/bg/bg400.svg";
+import bg2400 from "@/assets/images/blog/bg/bg2400.svg";
 
 const { $mixpanel } = useNuxtApp();
 
diff --git a/nuxt-frontend/components/home-new/CaseStudy.vue b/nuxt-frontend/components/home-new/CaseStudy.vue
index 91649ee0b..cc65f13c6 100644
--- a/nuxt-frontend/components/home-new/CaseStudy.vue
+++ b/nuxt-frontend/components/home-new/CaseStudy.vue
@@ -1,7 +1,7 @@
 <template>
   <section
     :class="
-      currentRoutePath == '/portfolio' ? 'mt-6 lg:mt-28' : 'mt-16 lg:mt-60'
+      currentRoutePath == '/portfolio' ? 'mt-16 lg:mt-28' : 'mt-16 lg:mt-60'
     "
   >
     <div>
diff --git a/nuxt-frontend/components/home-new/ContributionSection.vue b/nuxt-frontend/components/home-new/ContributionSection.vue
index ff752c11f..07429f871 100644
--- a/nuxt-frontend/components/home-new/ContributionSection.vue
+++ b/nuxt-frontend/components/home-new/ContributionSection.vue
@@ -6,9 +6,9 @@
     <div
       class="mt-4 mb-8 lg:mb-[4.5rem] text-center sub-h1-regular lg:mobile-header-2-regular text-black-60"
     >
-      and that starts with the site itself,
+      and that starts with this site itself,
       <nuxt-link
-        class="sub-h3-semibold lg:mobile-header-2-semibold v2-canopas-gradient-text"
+        class="sub-h3-semibold lg:mobile-header-2-semibold v2-canopas-gradient-text border-b border-[#ff835b]"
         :to="websiteOpenSourceUrl"
         target="_blank"
         @click.native="$mixpanel.track('tap_canopas_website_github')"
@@ -34,43 +34,23 @@
         >
           {{ contribution.description }}
         </div>
-        <div class="mt-6" v-if="width > 991">
-          <div
-            class="mt-1 inline-flex pr-1"
-            v-for="(tag, index) in contribution.tags"
-            :key="index"
-          >
+        <div
+          v-if="contribution.tags.length > 0"
+          class="my-6 overflow-hidden overflow-x-scroll scrollbar-hidden"
+        >
+          <div class="w-full min-w-[1000px]">
             <div
-              class="bg-white-smoke rounded-[1.875rem] py-1 px-4 lg:sub-h1-regular text-black-4"
-              v-html="tag"
-            ></div>
+              class="mt-1 inline-flex pr-1"
+              v-for="(tag, index) in contribution.tags"
+              :key="index"
+            >
+              <div
+                class="bg-white-smoke rounded-[1.875rem] py-1 px-4 lg:sub-h1-regular text-black-4"
+                v-html="tag"
+              ></div>
+            </div>
           </div>
         </div>
-        <swiper
-          v-else
-          :slidesPerView="2"
-          :grid="{
-            rows: 2,
-            fill: 'row',
-          }"
-          :modules="modules"
-          :breakpoints="{
-            '768': {
-              slidesPerView: 4,
-            },
-          }"
-          class="swiper-container mt-4 pl-0"
-        >
-          <swiper-slide
-            v-for="(tag, index) in contribution.tags"
-            :key="index"
-            class="cursor-pointer !mr-1 !w-auto pb-1"
-          >
-            <div
-              class="bg-white-smoke inline-flex rounded-[1.875rem] py-1 px-4 sub-h3-regular text-black-4 whitespace-nowrap"
-              v-html="tag"
-            ></div></swiper-slide
-        ></swiper>
         <div class="flex gap-4 mt-4 lg:mt-6">
           <div class="flex items-center">
             <Icon
@@ -82,7 +62,10 @@
               >{{ contribution.stars }}</span
             >
           </div>
-          <div class="flex items-center gap-0.5 text-black-87">
+          <div
+            v-if="contribution.forks > 0"
+            class="flex items-center gap-0.5 text-black-87"
+          >
             <span> <Icon class="fa h-5 w-5" name="fa6-solid:code-fork" /></span
             ><span class="sub-h3-semibold lg:mobile-header-3-semibold">{{
               contribution.forks
@@ -105,14 +88,11 @@
 </template>
 <script type="module">
 import config from "@/config.js";
-import { Swiper, SwiperSlide } from "swiper/vue";
-import { Grid } from "swiper/modules";
 
 export default {
   data() {
     return {
       width: 0,
-      modules: [Grid],
       websiteOpenSourceUrl: "https://github.com/canopas/canopas-website",
       contributions: [
         {
@@ -137,7 +117,7 @@ export default {
           ],
           link: "https://github.com/canopas/compose-intro-showcase",
           stars: config.INTRO_SHOWCASE_STARS,
-          forks: "29",
+          forks: "32",
           color: "bg-royal-purple",
           language: "Kotlin",
         },
@@ -159,7 +139,7 @@ export default {
           ],
           link: "https://github.com/canopas/UIPilot",
           stars: config.UIPILOT_STARS,
-          forks: "22",
+          forks: "25",
           color: "bg-flamingo",
           language: "Swift",
         },
@@ -169,7 +149,7 @@ export default {
           tags: [],
           link: "https://github.com/canopas/compose-animations-examples",
           stars: config.JETPACK_COMPOSE_ANIMATION_STARS,
-          forks: "29",
+          forks: "34",
           color: "bg-royal-purple",
           language: "Kotlin",
         },
@@ -179,7 +159,7 @@ export default {
           tags: [],
           link: "https://github.com/canopas/swiftui-animations-examples",
           stars: config.SWIFT_UI_ANIMATION_STARS,
-          forks: "2",
+          forks: "3",
           color: "bg-flamingo",
           language: "Swift",
         },
@@ -227,7 +207,7 @@ export default {
           ],
           link: "https://github.com/canopas/compose-recyclerview",
           stars: config.COMPOSE_RECYCLEVIEW_STARS,
-          forks: "6",
+          forks: "7",
           color: "bg-royal-purple",
           language: "Kotlin",
         },
@@ -246,7 +226,7 @@ export default {
           ],
           link: "https://github.com/canopas/canopas-blog",
           stars: config.CANOPAS_BLOG_WEBSITE_STARS,
-          forks: "5",
+          forks: "7",
           color: "bg-soft-yellow",
           language: "JavaScript",
         },
@@ -294,7 +274,7 @@ export default {
           tags: [],
           link: "https://github.com/canopas/rich-editor-compose",
           stars: config.RICHEDITOR_STARS,
-          forks: "1",
+          forks: "0",
           color: "bg-royal-purple",
           language: "Kotlin",
         },
@@ -304,14 +284,18 @@ export default {
   mounted() {
     this.width = window.innerWidth;
   },
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
   inject: ["mixpanel"],
 };
 </script>
-<style lang="postcss">
-@import "swiper/css";
-@import "swiper/css/grid";
+
+<style scoped>
+.scrollbar-hidden {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
 </style>
diff --git a/nuxt-frontend/components/home-new/LandingSection.vue b/nuxt-frontend/components/home-new/LandingSection.vue
index d3ac52b3a..0fdc446a7 100644
--- a/nuxt-frontend/components/home-new/LandingSection.vue
+++ b/nuxt-frontend/components/home-new/LandingSection.vue
@@ -3,15 +3,14 @@
     class="relative bg-gradient-to-t from-pink-5 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"
+      :src="background400"
       :srcset="`${background400} 400w, ${background800} 800w, ${background1200} 1200w, ${background2100} 2100w`"
       class="absolute top-0 left-0 w-full h-full -z-[1] object-contain"
       alt="canopas-landing"
       loading="eager"
     />
-
     <div
-      class="container flex flex-col items-center lg:flex-row-reverse lg:items-start pb-[1.563rem] lg:pb-[3.125rem]"
+      class="relative 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 2xl:mt-6"
@@ -19,7 +18,7 @@
       >
         <img
           class="w-full h-full object-contain"
-          :src="landing800"
+          :src="landing400"
           :srcset="`${landing400} 400w, ${landing800} 800w`"
           alt="landing-view-image"
         />
@@ -30,8 +29,9 @@
         <h1
           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="text-primary-1"> Is Yours Next?</span></div>
+          For over a decade we have helped businesses grow exponentially. <br />
+          -
+          <span class="text-primary-1"> Is Yours Next?</span>
         </h1>
         <div
           class="sub-h1-regular lg:mobile-header-2-regular text-black-60 w-full md:w-[75%] lg:w-full 2xl:w-[89%] pt-4 lg:pt-6 text-center lg:text-left"
@@ -57,10 +57,13 @@
             >
               <span class="sub-h3-semibold lg:sub-h1-semibold"
                 >Get Free Consultation
-              </span> </nuxt-link
-            ><small class="lg:hidden sub-h4-regular text-black-60"
+              </span>
+            </nuxt-link>
+            <nuxt-link
+              to="/contact#guarantee"
+              class="lg:hidden sub-h4-regular text-black-60"
               >100% MONEY BACK GUARANTEE FOR <br />
-              TWO WEEKS</small
+              TWO WEEKS</nuxt-link
             >
           </div>
 
@@ -80,11 +83,7 @@
                   alt="client-image"
                 />
               </div>
-              <nuxt-link
-                v-if="client.plusIcon"
-                href="/contact"
-                aria-label="contact"
-              >
+              <div v-if="client.plusIcon">
                 <div
                   class="w-10 h-10 border-[2px] border-[#EBEBEB] rounded-full bg-white"
                   :class="client.className"
@@ -94,7 +93,7 @@
                     name="fa6-solid:plus"
                   />
                 </div>
-              </nuxt-link>
+              </div>
             </div>
             <div class="pl-2.5 md:pl-1.5">
               <div class="flex mt-[3px]">
@@ -105,11 +104,11 @@
                   name="fa6-solid:star"
                 />
               </div>
-              <div class="">
+              <div>
                 <span
                   class="sub-h4-regular lg:sub-h4-medium uppercase text-black-60"
                 >
-                  40+ Reviews
+                  89+ Reviews
                 </span>
               </div>
             </div>
@@ -119,9 +118,11 @@
           class="hidden lg:block w-[74%] xl:w-[72%] pt-3 lg:pt-4 sub-h4-medium text-black-60"
         >
           We offer a
-          <span class="secondary-color"
+          <nuxt-link
+            to="/contact#guarantee"
+            class="secondary-color border-b border-[#F2709C]"
             >100% MONEY BACK GUARANTEE FOR TWO WEEKS
-          </span>
+          </nuxt-link>
           if you don't like our work. No questions asked.
         </small>
       </div>
diff --git a/nuxt-frontend/components/home-new/ServiceSection.vue b/nuxt-frontend/components/home-new/ServiceSection.vue
index 0d19e45ec..091f2b694 100644
--- a/nuxt-frontend/components/home-new/ServiceSection.vue
+++ b/nuxt-frontend/components/home-new/ServiceSection.vue
@@ -38,9 +38,7 @@
         <div
           class="flex basis-[55%] flex-col items-start justify-center px-4 xll:pr-[29rem] sub-h3-regular xl:mobile-header-3-regular text-black-87 lg:basis-[50%]"
         >
-          <p>
-            {{ service.content }}
-          </p>
+          <p v-html="service.content"></p>
         </div>
       </div>
       <div
@@ -65,28 +63,28 @@ export default {
         {
           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.",
+            "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. <span class='font-bold'>From native to hybrid, we've got you covered.</span>",
           url: "/mobile-app-development",
         },
         {
           title: "Web Development",
           content:
-            "Whether you need help with websites, web apps, an admin panel, an analytical dashboard, or desktop apps, our engineers will develop scalable backend and front-end solutions.",
+            "Whether you need help with websites, web apps, an admin panel, an analytical dashboard, or desktop apps, our engineers will develop <span class='font-bold'>scalable backend and front-end solutions.</span>",
         },
         {
           title: "Custom Software Development",
           content:
-            "Unlock your business growth with tailored solutions for unique business needs, enabling scalability, seamless integration, competitive edge, long-term cost efficiency, and enhanced security.",
+            "<span class='font-bold'>Unlock your business growth with tailored solutions</span> for unique business needs, enabling scalability, seamless integration, competitive edge, long-term cost efficiency, and enhanced security.",
         },
         {
           title: "UI/UX Design",
           content:
-            "We design user-centered UI/UX followed by user testing. We make design decisions based on only one thing: Data. Because it ensures our clients get value from our work.",
+            "We design user-centered UI/UX followed by user testing. <span class='font-bold'>We make design decisions based on only one thing: Data.</span> Because it ensures our clients get value from our work.",
         },
         {
-          title: "DevOps and Maintenance",
+          title: "Bug Fixing and Maintenance",
           content:
-            "Our team values prevention over cure, writes unit tests from an early stage of the project for future maintainability, extendibility, and quick development, and uses auto-deployment to save time.",
+            "Looking to fix bugs in your app? We've helped multiple clients fix bugs and later added new features to match their vision. Plus, <span class='font-bold'>We offer 6 months of FREE maintenance on our work.</span>",
         },
       ],
     };
diff --git a/nuxt-frontend/components/home-new/ServiceSectionMobile.vue b/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
index ad2d7d587..15b3e8eaa 100644
--- a/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
+++ b/nuxt-frontend/components/home-new/ServiceSectionMobile.vue
@@ -8,12 +8,7 @@
         How we can help you
       </p>
     </div>
-    <img
-      :src="ServiceBackgroundImage"
-      alt="service-background-image"
-      loading="lazy"
-      class="absolute left-0 top-0 h-full w-full object-contain sm:object-cover"
-    />
+    <div></div>
     <div
       v-for="(service, index) in services"
       :key="index"
@@ -30,6 +25,8 @@
           alt="service-bullet"
           loading="lazy"
           class="-mr-5 h-[50px] w-[50px]"
+          height="50"
+          width="50"
         />
         <nuxt-link
           :href="service.url"
@@ -37,25 +34,36 @@
         >
           {{ service.title }}
         </nuxt-link>
-        <div class="pt-4 sub-h3-regular text-black-60 sm:w-[70%] md:w-[65%]">
-          {{ service.content }}
-        </div>
+        <div
+          class="pt-4 sub-h3-regular text-black-60 sm:w-[70%] md:w-[65%]"
+          v-html="service.content"
+        ></div>
+        <div
+          class="absolute bottom-10 h-3 w-3 bg-[#F98386] rounded-full"
+          :class="index % 2 == 0 ? 'left-5' : 'right-5'"
+        ></div>
+        <div
+          class="absolute top-10 h-1.5 w-1.5 bg-[#F37299] rounded-full"
+          :class="index % 2 == 0 ? 'left-40' : 'right-40'"
+        ></div>
       </div>
       <img
         :src="service.image"
         alt="service-background-image"
         loading="lazy"
         class="h-full w-[126px] flex-[30%] sm:flex-[10%] md:flex-[6%]"
+        height="180"
+        width="130"
       />
     </div>
   </div>
 </template>
 
 <script>
-import ServiceBackgroundImage from "@/assets/images/why/why-canopas-mobile-bg.svg";
 import bullet1 from "@/assets/images/why/why-canopas-dot-1.svg";
 import bullet2 from "@/assets/images/why/why-canopas-dot-2.svg";
 import bullet3 from "@/assets/images/why/why-canopas-dot-3.svg";
+
 import circle1 from "@/assets/images/why/why-canopas-mobile-1.webp";
 import circle2 from "@/assets/images/why/why-canopas-mobile-2.webp";
 import circle3 from "@/assets/images/why/why-canopas-mobile-3.webp";
@@ -65,12 +73,11 @@ import circle5 from "@/assets/images/why/why-canopas-mobile-5.webp";
 export default {
   data() {
     return {
-      ServiceBackgroundImage,
       services: [
         {
           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.",
+            "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. <span class='font-bold'>From native to hybrid, we've got you covered.</span>",
           image: circle1,
           bullet: bullet1,
           url: "/mobile-app-development",
@@ -78,28 +85,28 @@ export default {
         {
           title: "Web Development",
           content:
-            "Whether you need help with websites, web apps, an admin panel, an analytical dashboard, or desktop apps, our engineers will develop scalable backend and front-end solutions.",
+            "Whether you need help with websites, web apps, an admin panel, an analytical dashboard, or desktop apps, our engineers will develop <span class='font-bold'>scalable backend and front-end solutions.</span>",
           image: circle2,
           bullet: bullet2,
         },
         {
           title: "Custom Software Development",
           content:
-            "Unlock your business growth with tailored solutions for unique business needs, enabling scalability, seamless integration, competitive edge, long-term cost efficiency, and enhanced security.",
+            "<span class='font-bold'>Unlock your business growth with tailored solutions</span> for unique business needs, enabling scalability, seamless integration, competitive edge, long-term cost efficiency, and enhanced security.",
           image: circle3,
           bullet: bullet3,
         },
         {
           title: "UI/UX Design",
           content:
-            "We design user-centered UI/UX followed by user testing. We make design decisions based on only one thing: Data. Because it ensures our clients get value from our work.",
+            "We design user-centered UI/UX followed by user testing. <span class='font-bold'>We make design decisions based on only one thing: Data.</span> Because it ensures our clients get value from our work.",
           image: circle4,
           bullet: bullet1,
         },
         {
-          title: "DevOps and Maintenance",
+          title: "Bug Fixing and Maintenance",
           content:
-            "Our team values prevention over cure, writes unit tests from an early stage of the project for future maintainability, extendibility, and quick development, and uses auto-deployment to save time.",
+            "Looking to fix bugs in your app? We've helped multiple clients fix bugs and later added new features to match their vision. Plus, <span class='font-bold'>We offer 6 months of FREE maintenance on our work.</span>",
           image: circle5,
           bullet: bullet1,
         },
diff --git a/nuxt-frontend/components/ios-app-development/BlogSection.vue b/nuxt-frontend/components/ios-app-development/BlogSection.vue
index 15cab9492..821159ee8 100644
--- a/nuxt-frontend/components/ios-app-development/BlogSection.vue
+++ b/nuxt-frontend/components/ios-app-development/BlogSection.vue
@@ -82,7 +82,6 @@
           '1400': {
             slidesPerView: 3.5,
           },
-
           '2400': {
             slidesPerView: 2.5,
           },
diff --git a/nuxt-frontend/components/ios-app-development/CaseStudySection.vue b/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
index 5a3072e7e..bed778a8e 100644
--- a/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/ios-app-development/CaseStudySection.vue
@@ -76,13 +76,13 @@
           :modules="modules"
           :allowTouchMove="false"
           class="swiper-container h-screen"
-          @swiper="setSwiperRef"
+          @swiper="setCaseStudySwiperRef"
         >
           <swiper-slide v-for="(portfolio, index) in portfolios" :key="index">
             <div class="flex flex-row justify-center h-screen">
               <div
                 :class="portfolio.row1Background"
-                class="flex flex-col justify-center !basis-[40%] justify-around px-8 text-white"
+                class="flex flex-col !basis-[40%] justify-around px-8 text-white"
               >
                 <div class="flex justify-end relative">
                   <div
@@ -116,7 +116,7 @@
                     :src="portfolio.image[2]"
                     :srcset="`${portfolio.image[2]} 800w`"
                     :alt="portfolio.title"
-                    class="image w-[284px] h-[490px] xl:h-[590px] object-cover"
+                    class="w-[284px] h-[490px] xl:h-[590px] object-cover"
                     loading="lazy"
                   />
                 </div>
@@ -126,7 +126,7 @@
                       :src="portfolio.image[3]"
                       :srcset="`${portfolio.image[3]} 800w`"
                       :alt="portfolio.title"
-                      class="image main w-[284px] h-[490px] xl:h-[590px] object-cover"
+                      class="main w-[284px] h-[490px] xl:h-[590px] object-cover"
                       loading="lazy"
                     />
                   </div>
@@ -141,8 +141,8 @@
 </template>
 
 <script type="module">
-import { Pagination, Autoplay, Mousewheel } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
+import { Mousewheel } from "swiper/modules";
 import mobile_justly1 from "@/assets/images/ios-app-development/casestudy/mobile/justly1.webp";
 import mobile_justly2 from "@/assets/images/ios-app-development/casestudy/mobile/justly2.webp";
 import mobile_luxeradio1 from "@/assets/images/ios-app-development/casestudy/mobile/luxeradio1.webp";
@@ -159,9 +159,9 @@ import desktop_togness2 from "@/assets/images/ios-app-development/casestudy/togn
 export default {
   data() {
     return {
-      modules: [Pagination, Autoplay, Mousewheel],
+      modules: [Mousewheel],
       swiper: null,
-      swiperRef: 0,
+      caseStudySwiperRef: 0,
       activeIndex: 0,
       skipNext: true,
       lastScrollY: 0,
@@ -225,8 +225,8 @@ export default {
     document.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
-    setSwiperRef(swiper) {
-      this.swiperRef = swiper;
+    setCaseStudySwiperRef(swiper) {
+      this.caseStudySwiperRef = swiper;
     },
 
     handleScroll() {
@@ -239,10 +239,10 @@ export default {
         position.bottom >=
           (window.innerHeight || document.documentElement.clientHeight)
       ) {
-        this.swiperRef.mousewheel.enable();
+        this.caseStudySwiperRef.mousewheel.enable();
         this.$emit("sectionFullscreen", false);
       } else {
-        this.swiperRef.mousewheel.disable();
+        this.caseStudySwiperRef.mousewheel.disable();
         this.$emit("sectionFullscreen", true);
       }
     },
diff --git a/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue b/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
index f7c5fdc60..8d60b4686 100644
--- a/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
@@ -107,7 +107,7 @@
           :loop="true"
           :modules="modules"
           class="swiper-container lg:h-[463px] xl:h-[495px] flex"
-          @swiper="setSwiperRef"
+          @swiper="setIosDevelopmentSwiperRef"
           @slideChange="onSlideChange"
         >
           <swiper-slide
@@ -155,7 +155,7 @@ export default {
     return {
       modules: [Autoplay],
       activeIndex: 0,
-      swiperRef: 0,
+      iosDevelopmentSwiperRef: 0,
       items: [
         {
           title: `iOS App Development <br/>Consultation`,
@@ -231,15 +231,15 @@ export default {
   },
   methods: {
     onSlideChange() {
-      this.activeIndex = this.swiperRef.realIndex;
+      this.activeIndex = this.iosDevelopmentSwiperRef.realIndex;
     },
-    setSwiperRef(swiper) {
-      this.swiperRef = swiper;
-      this.activeIndex = this.swiperRef.realIndex;
+    setIosDevelopmentSwiperRef(swiper) {
+      this.iosDevelopmentSwiperRef = swiper;
+      this.activeIndex = this.iosDevelopmentSwiperRef.realIndex;
     },
     slideTo(index) {
       this.activeIndex = index;
-      this.swiperRef.slideToLoop(index);
+      this.iosDevelopmentSwiperRef.slideToLoop(index);
     },
   },
   components: {
diff --git a/nuxt-frontend/components/jobs/LifeAtCanopas.vue b/nuxt-frontend/components/jobs/LifeAtCanopas.vue
index 39fe423de..0140aeb81 100755
--- a/nuxt-frontend/components/jobs/LifeAtCanopas.vue
+++ b/nuxt-frontend/components/jobs/LifeAtCanopas.vue
@@ -108,6 +108,10 @@ export default {
 @import "swiper/css";
 @import "swiper/css/pagination";
 
+.swiper-pagination {
+  @apply !mt-0 !bottom-10 !bg-transparent lg:block;
+}
+
 .swiper-pagination-bullet {
   @apply !w-[15px] !h-[15px] !rounded-[3px] !bg-transparent !border !border-solid !border-[#3d3d3d];
 }
diff --git a/nuxt-frontend/components/jobs/VirtuesView.vue b/nuxt-frontend/components/jobs/VirtuesView.vue
index 7d06c6e93..c0ba98c61 100644
--- a/nuxt-frontend/components/jobs/VirtuesView.vue
+++ b/nuxt-frontend/components/jobs/VirtuesView.vue
@@ -61,7 +61,7 @@
             class="flex flex-col items-center my-5 mx-auto py-0 px-10 sm:my-2 sm:px-0 lg:my-10"
           >
             <div
-              class="image rounded-full bg-white relative h-0 w-1/2 pb-[50%] mb-5 sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
+              class="rounded-full bg-white relative h-0 w-1/2 pb-[50%] mb-5 sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -84,7 +84,7 @@
               {{ virtue.title }}
             </div>
             <div
-              class="sub-h3-regular lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-3 w-full lg:mb-0 2xl:mb-2"
+              class="sub-h3-regular lg:sub-h1-regular text-black-60 mt-4 mb-3 w-full lg:mb-0 2xl:mb-2"
             >
               {{ virtue.description }}
             </div>
@@ -103,7 +103,7 @@
             class="flex flex-col items-center my-5 mx-auto py-0 px-10 sm:my-2 sm:px-0 lg:my-10"
           >
             <div
-              class="image rounded-full bg-white relative h-0 w-1/2 pb-[50%] mb-5 sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
+              class="rounded-full bg-white relative h-0 w-1/2 pb-[50%] mb-5 sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -145,7 +145,7 @@
             class="flex flex-col items-center my-5 mx-auto py-0 px-10 sm:my-2 sm:px-0 lg:my-10"
           >
             <div
-              class="image rounded-full bg-white relative h-0 w-1/2 pb-[50%] mb-5 sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
+              class="rounded-full bg-white relative h-0 w-1/2 pb-[50%] mb-5 sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
diff --git a/nuxt-frontend/components/jobs/WhyCanopasMobile.vue b/nuxt-frontend/components/jobs/WhyCanopasMobile.vue
index 4c914d810..a04a6ed71 100644
--- a/nuxt-frontend/components/jobs/WhyCanopasMobile.vue
+++ b/nuxt-frontend/components/jobs/WhyCanopasMobile.vue
@@ -3,16 +3,11 @@
     <div class="header-text main-text text-[2.5625rem] leading-[2.125rem]">
       <span class="underline-text">Why Ca</span>nopas?
     </div>
-    <img
-      :src="WhyCanopasImage"
-      alt="why-canopas-image"
-      loading="lazy"
-      class="image w-full h-full top-0 left-0 absolute object-contain sm:object-cover"
-    />
+    <div></div>
     <div class="reasons-container my-[50px] mx-auto w-full">
       <div
-        v-for="reason in reasons"
-        :key="reason"
+        v-for="(reason, index) in reasons"
+        :key="index"
         class="reason flex justify-end relative py-5 px-0 even:flex-row-reverse animate__animated"
         ref="whyCanopasMobile"
       >
@@ -37,14 +32,20 @@
           loading="lazy"
           class="reason-image w-[126px] h-full"
         />
+        <div
+          class="absolute bottom-10 h-3 w-3 bg-[#F98386] rounded-full"
+          :class="index % 2 == 0 ? 'left-5' : 'right-5'"
+        ></div>
+        <div
+          class="absolute top-10 h-1.5 w-1.5 bg-[#F37299] rounded-full"
+          :class="index % 2 == 0 ? 'left-40' : 'right-40'"
+        ></div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import WhyCanopasImage from "@/assets/images/why/why-canopas-mobile-bg.svg";
-
 import bullet1 from "@/assets/images/why/why-canopas-dot-1.svg";
 import bullet2 from "@/assets/images/why/why-canopas-dot-2.svg";
 import bullet3 from "@/assets/images/why/why-canopas-dot-3.svg";
@@ -56,7 +57,6 @@ import circle3 from "@/assets/images/why/why-canopas-mobile-3.webp";
 export default {
   data() {
     return {
-      WhyCanopasImage,
       reasons: [
         {
           title: "Our Vision",
diff --git a/nuxt-frontend/components/mobile-app-development/LandingSection.vue b/nuxt-frontend/components/mobile-app-development/LandingSection.vue
index 30dd3dc2a..c0f02a453 100644
--- a/nuxt-frontend/components/mobile-app-development/LandingSection.vue
+++ b/nuxt-frontend/components/mobile-app-development/LandingSection.vue
@@ -71,26 +71,13 @@
                 >Get Free Consultation
               </span>
             </nuxt-link>
-            <div
-              class="mt-0 flex justify-end xll:mr-[-9.5rem] 3xl:mr-[-5.5rem]"
-            >
-              <img
-                :src="card_400w"
-                :srcset="`${card_400w} 400w, ${card_800w} 800w`"
-                alt="landing"
-                class="h-2/5 w-2/5 object-contain xl:w-[33%] 2xl:w-[26%] xll:w-[37%]"
-              />
-            </div>
           </div>
         </div>
-        <aspect-ratio
-          class="basis-[45%] lg:!pt-[62] xl:!pt-[61%] 2xl:!pt-[51%] xll:max-w-[49%]"
-          height="67%"
-        >
+        <aspect-ratio class="basis-[45%]" height="67%">
           <img
-            class="absolute top-[-55px] h-full object-contain lg:top-[-95px] xl:top-[-66px] 2xl:top-[-105px] xll:h-[90%] xll:w-full 3xl:top-[-132px] 3xl:h-[77%] 3xl:w-[72%]"
-            :src="mockup_400w"
-            :srcset="`${mockup_400w} 400w, ${mockup_800w} 800w`"
+            class="absolute top-[-55px] right-[7rem] xl:right-10 2xl:right-60 h-full object-contain lg:top-[-95px] xl:top-[-66px] 2xl:top-[-105px] 2xll:h-[90%] 2xll:w-[90%] xll:h-[95%] xll:w-[95%] xll:right-[5rem] 3xl:top-[0px] 3xl:h-[85%] 3xl:w-[85%] 3xl:right-[10rem]"
+            :src="full_img_400w"
+            :srcset="`${full_img_400w} 400w, ${full_img_800w} 800w, ${full_img_1200w} 1200w`"
             alt="landing-view-image"
             loading="lazy"
           />
@@ -105,8 +92,9 @@ import card_400w from "@/assets/images/mobile-app-development/landing/card-400w.
 import card_800w from "@/assets/images/mobile-app-development/landing/card-800w.webp";
 import mobile_mockup_400w from "@/assets/images/mobile-app-development/landing/mobile-mockup-400w.webp";
 import mobile_mockup_800w from "@/assets/images/mobile-app-development/landing/mobile-mockup-800w.webp";
-import mockup_400w from "@/assets/images/mobile-app-development/landing/mockup-400w.webp";
-import mockup_800w from "@/assets/images/mobile-app-development/landing/mockup-800w.webp";
+import full_img_400w from "@/assets/images/mobile-app-development/landing/full-img-400w.webp";
+import full_img_800w from "@/assets/images/mobile-app-development/landing/full-img-800w.webp";
+import full_img_1200w from "@/assets/images/mobile-app-development/landing/full-img-1200w.webp";
 import AspectRatio from "../utils/AspectRatio.vue";
 
 export default {
@@ -117,8 +105,9 @@ export default {
       card_800w,
       mobile_mockup_400w,
       mobile_mockup_800w,
-      mockup_400w,
-      mockup_800w,
+      full_img_400w,
+      full_img_800w,
+      full_img_1200w,
     };
   },
 };
diff --git a/nuxt-frontend/components/mobile-app-development/Portfolio.vue b/nuxt-frontend/components/mobile-app-development/Portfolio.vue
index ac7fedf2f..55c72df52 100755
--- a/nuxt-frontend/components/mobile-app-development/Portfolio.vue
+++ b/nuxt-frontend/components/mobile-app-development/Portfolio.vue
@@ -42,9 +42,9 @@
         </div>
         <img
           :src="portfolio.image[0]"
-          :srcset="`${portfolio.image[0]} 400w, ${portfolio.image[1]} 600w,  ${portfolio.image[2]} 800w}`"
+          :srcset="`${portfolio.image[0]} 400w, ${portfolio.image[1]} 600w,  ${portfolio.image[2]} 800w`"
           alt="app-image"
-          class="mx-auto mt-4 h-full max-w-[95%] md:max-w-[75%]"
+          class="mt-4 h-full w-full px-8 sm:px-12"
           @click="openPortfolio(portfolio)"
           loading="lazy"
         />
diff --git a/nuxt-frontend/components/partials/NewHeader.vue b/nuxt-frontend/components/partials/NewHeader.vue
index 03b126c55..4ab063768 100755
--- a/nuxt-frontend/components/partials/NewHeader.vue
+++ b/nuxt-frontend/components/partials/NewHeader.vue
@@ -1,8 +1,8 @@
 <template>
-  <header class="relative z-10 font-inter-medium">
+  <header class="relative z-[100] font-inter-medium">
     <div class="sticky top-0" :style="{ height: navContainerHeight + 'px' }">
       <nav
-        class="ease z-[1] w-full bg-white py-5 tracking-[0] text-black-core/[.87] transition-all duration-500 md:px-0 md:py-4"
+        class="ease w-full bg-white py-5 tracking-[0] text-black-core/[.87] transition-all duration-500 md:px-0 md:py-4"
         :class="[
           showNavbar
             ? 'fixed shadow-[0_13px_35px_-12px_rgba(35,35,35,0.15)]'
@@ -41,10 +41,12 @@
                   @click.native="$mixpanel.track(navbar.event)"
                   class="group relative mr-5 inline-block sm:mr-[30px] lg:mr-2 xl:mr-[30px]"
                   :class="[
+                    isActiveRoute(navbar.name)
+                      ? 'router-link-exact-active'
+                      : '',
                     navbar.className
                       ? navbar.className
-                      : navbar.class +
-                        ' after:absolute after:bottom-0 after:left-0 after:top-[27px] after:h-[3px] after:w-full  after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100 ',
+                      : ' main-menu after:absolute after:bottom-0 after:left-0 after:top-[27px] after:h-[3px] after:w-full  after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100 ',
                   ]"
                 >
                   <span
@@ -56,13 +58,13 @@
                 </nuxt-link>
 
                 <ul
-                  v-show="showContributionMenu"
+                  v-show="showContributionMenu && navbar.subMenus"
                   @mouseleave="showContributionMenu = false"
                   class="absolute w-max flex-col space-y-6 rounded-[5px] border bg-white !px-6 py-[1.5rem] shadow-md lg:top-[4.5rem] lg:left-[169px] xl:left-[296px] 2xl:left-[475px]"
                 >
-                  <li v-for="navbar in subMenus" :key="navbar">
+                  <li v-for="navbar in navbar.subMenus" :key="navbar">
                     <nuxt-link
-                      class="relative py-4 font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[42px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
+                      class="sub-menu relative py-4 font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[42px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
                       :href="navbar.url"
                       target="_self"
                       >{{ navbar.name }}
@@ -72,7 +74,7 @@
               </li>
             </ul>
           </div>
-          <div class="flex h-6 w-6 items-end lg:hidden">
+          <div class="flex h-6 w-6 items-end lg:hidden cursor-pointer">
             <Icon
               name="fa6-solid:bars"
               class="ml-0 mt-[0.20rem] h-full w-full"
@@ -102,7 +104,7 @@
                 </div>
               </nuxt-link>
             </div>
-            <div class="mt-[-3px] h-6 w-6">
+            <div class="mt-[-3px] h-6 w-6 cursor-pointer">
               <Icon
                 name="fa6-solid:xmark"
                 class="h-full w-full"
@@ -112,7 +114,7 @@
           </div>
         </div>
         <ul
-          class="mt-8 flex h-[50%] flex-col justify-start overflow-y-scroll text-[1rem] leading-[1.125rem] sm:h-[45%] md:text-[1.09375rem] md:leading-[1.28125rem] lg:ml-auto lg:items-center lg:text-[1.1875rem] lg:leading-[1.4375rem]"
+          class="mt-8 flex h-[50%] flex-col justify-start overflow-y-scroll scrollbar-hidden text-[1rem] leading-[1.125rem] sm:h-[45%] md:text-[1.09375rem] md:leading-[1.28125rem] lg:ml-auto lg:items-center lg:text-[1.1875rem] lg:leading-[1.4375rem]"
         >
           <li
             v-for="navbar in navbars.slice(0, navbars.length - 1)"
@@ -124,10 +126,10 @@
               @click.native="$mixpanel.track(navbar.event)"
               class="group relative mr-5 inline-block sm:mr-[30px] lg:mr-5"
               :class="[
+                isActiveRoute(navbar.name) ? 'router-link-exact-active' : '',
                 navbar.className
                   ? navbar.className
-                  : navbar.class +
-                    ' after:absolute after:bottom-0 after:left-0 after:top-[27px] after:h-[3px] after:w-full  after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100',
+                  : ' main-menu after:absolute after:bottom-0 after:left-0 after:top-[27px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100',
               ]"
               @click="
                 navbar.name == 'Contribution'
@@ -145,9 +147,9 @@
               "
               class="flex-col space-y-6"
             >
-              <li v-for="navbar in subMenus" :key="navbar">
+              <li v-for="navbar in navbar.subMenus" :key="navbar">
                 <nuxt-link
-                  class="relative py-2 font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] group-hover:z-[1] group-hover:text-white md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[30px] md:after:top-[35px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
+                  class="sub-menu relative py-2 font-inter-medium text-[1rem] leading-[1.125rem] text-black-core/[0.6] group-hover:z-[1] group-hover:text-white md:text-[1.09375rem] md:leading-[1.28125rem] lg:text-[1.188rem] lg:leading-[1.437rem] after:absolute after:bottom-0 after:left-0 after:top-[30px] md:after:top-[35px] after:h-[3px] after:w-full after:origin-bottom-left after:scale-x-0 after:from-[#f2709c] after:to-[#ff9472] after:duration-300 after:bg-gradient-[90deg] hover:from-[#ff9472] hover:to-[#f2709c] hover:bg-clip-text hover:text-transparent hover:bg-gradient-[270.11deg] hover:after:origin-bottom-left hover:after:scale-x-100"
                   :href="navbar.url"
                   target="_self"
                   >{{ navbar.name }}
@@ -203,6 +205,23 @@ export default {
           name: "Contribution",
           url: "/contributions",
           event: "tap_header_contribution",
+          subMenus: [
+            {
+              name: "Open Source",
+              url: "/contributions",
+              event: "tap_header_contributions",
+            },
+            {
+              name: "Blog",
+              url: "/blog",
+              event: "tap_header_blog",
+            },
+            {
+              name: "Resources",
+              url: "/resources",
+              event: "tap_header_resources",
+            },
+          ],
         },
         {
           name: "Career",
@@ -224,26 +243,10 @@ export default {
           event: "tap_header_cta",
         },
       ],
-      subMenus: [
-        {
-          name: "Open Source",
-          url: "/contributions",
-          event: "tap_header_contributions",
-        },
-        {
-          name: "Blog",
-          url: "/blog",
-          event: "tap_header_blog",
-        },
-        {
-          name: "Resources",
-          url: "/resources",
-          event: "tap_header_resources",
-        },
-      ],
     };
   },
   mounted() {
+    this.navContainerHeight = this.$refs.mainHeader.clientHeight;
     if (
       this.currentRoutePath.includes("portfolio/") &&
       window.innerWidth > 992 &&
@@ -254,7 +257,6 @@ export default {
       this.podcastRef.addEventListener("scroll", this.handleScroll);
     }
     window.addEventListener("scroll", this.handleScroll);
-    this.navContainerHeight = this.$refs.mainHeader.clientHeight;
     this.width = window.innerWidth;
   },
   unmounted() {
@@ -275,6 +277,41 @@ export default {
       this.animateNavbar = scrollUp || pageYOffset < 100;
       this.lastScrollY = scrollY;
     },
+    isActiveRoute(name) {
+      const navbar = this.navbars.find((item) => item.name === name);
+      if (!navbar) {
+        return false;
+      }
+
+      // Check if any child URL matches
+      if (navbar.subMenus) {
+        return navbar.subMenus.some(
+          (subMenu) => this.$route.path === subMenu.url,
+        );
+      }
+
+      return false;
+    },
   },
 };
 </script>
+
+<style lang="postcss" scoped>
+.main-menu.router-link-exact-active {
+  @apply from-[#ff9472] to-[#f2709c] bg-clip-text text-transparent bg-gradient-[270.11deg];
+}
+
+.sub-menu.router-link-exact-active {
+  @apply from-[#ff9472] to-[#f2709c] bg-clip-text text-transparent bg-gradient-[270.11deg];
+}
+
+.scrollbar-hidden {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/nuxt-frontend/components/portfolio/LandingSection.vue b/nuxt-frontend/components/portfolio/LandingSection.vue
index 62b4e192f..b444b3f04 100644
--- a/nuxt-frontend/components/portfolio/LandingSection.vue
+++ b/nuxt-frontend/components/portfolio/LandingSection.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="bg-white" :ref="response.landingref1">
-    <div class="container pt-6 lg:pt-[7.5rem] pb-16 lg:pb-60">
+    <div class="container z pb-16 lg:pb-60">
       <h1
         class="sub-h1-semibold lg:sub-h2-medium text-black-60 animate__animated animate__fadeInUp"
       >
diff --git a/nuxt-frontend/components/services/SuccessStories.vue b/nuxt-frontend/components/services/SuccessStories.vue
index 717b5e0e9..9437d4421 100644
--- a/nuxt-frontend/components/services/SuccessStories.vue
+++ b/nuxt-frontend/components/services/SuccessStories.vue
@@ -49,7 +49,7 @@
           },
         }"
         @swiper="onSwiper"
-        class="swiper-container"
+        class="swiper-container !flex flex-col gap-2"
       >
         <swiper-slide
           v-for="(story, index) in stories"
@@ -146,15 +146,22 @@ export default {
 <style lang="postcss">
 @import "swiper/css";
 @import "swiper/css/pagination";
+
 .swiper-wrapper {
   @apply !items-center;
 }
+
+.swiper-pagination {
+  @apply !w-full !h-2 !rounded-full;
+}
+
 .swiper-horizontal > .swiper-pagination-progressbar,
 .swiper-pagination-horizontal,
 .swiper-pagination-progressbar-fill {
-  @apply lg:hidden !bottom-0 !top-auto !left-auto md:!left-[0.2rem] !right-4 w-[99%] !h-1.5 !rounded-[18px] !bg-neutral-100;
+  @apply lg:hidden !bottom-0 !top-auto !left-0 w-full !bg-neutral-100;
 }
+
 .swiper-pagination-progressbar-fill {
-  @apply !right-0  md:!left-[0.2rem]  !h-1.5 !rounded-[18px]  !bg-gradient-to-r !from-[#FF835B] !to-[#F2709C];
+  @apply !h-2 !bg-gradient-to-r !from-[#FF835B] !to-[#F2709C] !rounded-full;
 }
 </style>
diff --git a/nuxt-frontend/components/services/TechnologyStack.vue b/nuxt-frontend/components/services/TechnologyStack.vue
index e26fea343..1dbb30030 100644
--- a/nuxt-frontend/components/services/TechnologyStack.vue
+++ b/nuxt-frontend/components/services/TechnologyStack.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="mt-16 lg:mt-60 flex flex-col items-center mt-16 md:mx-auto">
+  <section class="mt-16 lg:mt-60 flex flex-col items-center md:mx-auto">
     <div class="container text-center">
       <span class="mobile-header-2 lg:desk-header-2 text-black-87"
         >Technology Stack</span
@@ -152,6 +152,7 @@ import frontend4 from "@/assets/images/services/technology/frontend-4-200w.webp"
 import frontend5 from "@/assets/images/services/technology/frontend-5-200w.webp";
 import frontend6 from "@/assets/images/services/technology/frontend-6-200w.webp";
 import frontend7 from "@/assets/images/services/technology/frontend-7-200w.webp";
+import frontend8 from "@/assets/images/services/technology/frontend-8-200w.webp";
 
 import desktopfrontend1 from "@/assets/images/services/technology/desktop-icon/frontend-1-200w.webp";
 import desktopfrontend2 from "@/assets/images/services/technology/desktop-icon/frontend-2-200w.webp";
@@ -160,6 +161,7 @@ import desktopfrontend4 from "@/assets/images/services/technology/desktop-icon/f
 import desktopfrontend5 from "@/assets/images/services/technology/desktop-icon/frontend-5-200w.webp";
 import desktopfrontend6 from "@/assets/images/services/technology/desktop-icon/frontend-6-200w.webp";
 import desktopfrontend7 from "@/assets/images/services/technology/desktop-icon/frontend-7-200w.webp";
+import desktopfrontend8 from "@/assets/images/services/technology/desktop-icon/frontend-8-200w.webp";
 
 import backend1 from "@/assets/images/services/technology/backend-1-200w.webp";
 import backend2 from "@/assets/images/services/technology/backend-2-200w.webp";
@@ -223,6 +225,7 @@ export default {
             frontend5,
             frontend6,
             frontend7,
+            frontend8,
           ],
         },
         {
@@ -266,6 +269,7 @@ export default {
             { image: desktopfrontend5, content: "WordPress" },
             { image: desktopfrontend6, content: "Next.js" },
             { image: desktopfrontend7, content: "Nuxt.js" },
+            { image: desktopfrontend8, content: "Angular" },
           ],
         },
         {
diff --git a/nuxt-frontend/config.js b/nuxt-frontend/config.js
index 506e3022b..fc8a42638 100644
--- a/nuxt-frontend/config.js
+++ b/nuxt-frontend/config.js
@@ -32,19 +32,19 @@ export default Object.freeze({
   SHOW_DRAFT_POSTS: true,
 
   // github repo stars
-  INTRO_SHOWCASE_STARS: 378,
-  UIPILOT_STARS: 292,
-  JETPACK_COMPOSE_ANIMATION_STARS: 312,
+  INTRO_SHOWCASE_STARS: 429,
+  UIPILOT_STARS: 301,
+  JETPACK_COMPOSE_ANIMATION_STARS: 350,
   COMPOSE_COUNTRY_PICKER_STARS: 52,
-  SWIFT_UI_ANIMATION_STARS: 55,
+  SWIFT_UI_ANIMATION_STARS: 62,
   IOS_DEVELOPER_ROADMAP_STARS: 79,
-  TAILWIND_ANIMATIONS_STARS: 109,
-  CANOPAS_WEBSITE_STARS: 26,
-  CANOPAS_BLOG_WEBSITE_STARS: 32,
+  TAILWIND_ANIMATIONS_STARS: 114,
+  CANOPAS_WEBSITE_STARS: 27,
+  CANOPAS_BLOG_WEBSITE_STARS: 38,
   WEB_DEVELOPMENT_ROADMAP_STARS: 97,
-  COMPOSE_RECYCLEVIEW_STARS: 106,
-  RICHEDITOR_SWIFTUI_STARS: 41,
-  RICHEDITOR_STARS: 56,
+  COMPOSE_RECYCLEVIEW_STARS: 144,
+  RICHEDITOR_SWIFTUI_STARS: 54,
+  RICHEDITOR_STARS: 62,
 
   // Social media
   FACEBOOK_URL: "https://www.facebook.com/canopassoftware",
diff --git a/nuxt-frontend/pages/jobs/apply/[id].vue b/nuxt-frontend/pages/jobs/apply/[id].vue
index 0f2a2ae88..2cf6a94cb 100644
--- a/nuxt-frontend/pages/jobs/apply/[id].vue
+++ b/nuxt-frontend/pages/jobs/apply/[id].vue
@@ -117,7 +117,7 @@
               </div>
 
               <div class="mb-2">
-                <label class="">How did you find Canopas?</label>
+                <label>How did you find Canopas?</label>
                 <div
                   class="relative mt-[5px] w-full h-[50px] outline-hidden outline-0 before:content-[''] before:absolute before:top-5 before:right-5 before:z-[1] before:w-2 before:h-2 before:border-2 before:border-solid before:border-[#00000080] before:border-t-2 before:border-t-[#fff] before:border-r-2 before:border-r-[#fff] before:rotate-[-45deg] before:duration-[0.5s] before:pointer-events-none"
                   v-on:click.stop="
@@ -156,7 +156,7 @@
               </div>
 
               <div v-if="isShowingReferenceInput" class="mb-8 reference-input">
-                <label class="">Reference</label>
+                <label>Reference</label>
                 <input
                   class="block w-full border border-solid border-[#e2e2e2] rounded-[10px] text-[#3d3d3d] text-[1.125rem] mt-[5px] py-2.5 px-4 focus:border focus:border-solid focus:border-[#e2e2e2] focus:outline-hidden focus:outline-0 disabled:opacity-80 disabled:cursor-not-allowed reference-by-input"
                   type="text"
@@ -182,7 +182,7 @@
                 </label>
               </div>
 
-              <div class="">
+              <div>
                 <label class="after:content-['*'] after:text-[#ff0000]"
                   >Resume
                 </label>
diff --git a/nuxt-frontend/portfolio-json/luxeradio-data.js b/nuxt-frontend/portfolio-json/luxeradio-data.js
index 17f1c4d97..a38dedc8f 100644
--- a/nuxt-frontend/portfolio-json/luxeradio-data.js
+++ b/nuxt-frontend/portfolio-json/luxeradio-data.js
@@ -8,8 +8,8 @@ import videoBackgroundImage800w from "@/assets/images/portfolio/luxeradio/video/
 import videoBackgroundImage1200w from "@/assets/images/portfolio/luxeradio/video/background-1200w.webp";
 import videoBackgroundImage1600w from "@/assets/images/portfolio/luxeradio/video/background-1600w.webp";
 
-import videoSectionVideo from "./../../public/videos/luxeradio_video.mp4";
-import videoThumb from "./../../public/videos/luxeradio_video_thumbnail.webp";
+import videoSectionVideo from "/videos/luxeradio_video.mp4";
+import videoThumb from "/videos/luxeradio_video_thumbnail.webp";
 
 import brandingBackgroundImage400w from "@/assets/images/portfolio/luxeradio/branding/background-400w.webp";
 import brandingBackgroundImage800w from "@/assets/images/portfolio/luxeradio/branding/background-800w.webp";
diff --git a/nuxt-frontend/public/images/abstract.webp b/nuxt-frontend/public/images/abstract.webp
new file mode 100644
index 000000000..9fef08f0b
Binary files /dev/null and b/nuxt-frontend/public/images/abstract.webp differ
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index 0e977498a..0e7c901e6 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -226,6 +226,10 @@ module.exports = {
             backgroundSize: "100%",
           },
         },
+        scroll: {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-100%)" },
+        },
       },
       animation: {
         zoomIn: "zoomIn 4s ease-in infinite",
diff --git a/post/author.go b/post/author.go
index 60b166082..bb8119fae 100644
--- a/post/author.go
+++ b/post/author.go
@@ -42,7 +42,7 @@ func (repository *Repository) GetPostsByAuthor(c *gin.Context) {
 
 	query := ""
 	if isPublished {
-		query = " WHERE p.is_published = true "
+		query = " WHERE p.is_published = true AND published_at IS NOT NULL "
 	}
 
 	posts := []Post{}
@@ -85,7 +85,7 @@ func (repository *Repository) GetPostsByAuthor(c *gin.Context) {
 	if skip == 0 {
 		publishQuery := ""
 		if isPublished {
-			publishQuery = "WHERE p.is_published = true"
+			publishQuery = "WHERE p.is_published = true AND published_at IS NOT NULL"
 		}
 
 		err = repository.Db.Get(&new_post.Count, `SELECT COUNT(p.id) 
diff --git a/post/index.go b/post/index.go
index f117cb8b5..86dee2da1 100644
--- a/post/index.go
+++ b/post/index.go
@@ -76,7 +76,7 @@ func (repository *Repository) Get(c *gin.Context) {
 
 		publishQuery := ""
 		if isPublished {
-			publishQuery = "AND is_published = true"
+			publishQuery = "AND is_published = true AND published_at IS NOT NULL"
 		}
 
 		err = repository.Db.Get(&new_post.Count, `SELECT COUNT(id) FROM posts WHERE `+resourceQuery+` is_featured = false `+publishQuery)
@@ -94,7 +94,7 @@ func (repository *Repository) GetPosts(isFeatured, isResource, isPublished bool,
 
 	publishQuery := ""
 	if isPublished {
-		publishQuery = " AND is_published = true"
+		publishQuery = " AND is_published = true AND published_at IS NOT NULL "
 	}
 
 	posts := []Post{}
diff --git a/post/models.go b/post/models.go
index 14a8c0aa0..94b46b32a 100644
--- a/post/models.go
+++ b/post/models.go
@@ -21,7 +21,7 @@ type Post struct {
 	PublishedAt      null.String       `json:"published_at"`
 	Summary          null.String       `json:"summary,omitempty"`
 	BlogContent      string            `json:"blog_content,omitempty"`
-	MetaDescription  string            `json:"meta_description,omitempty"`
+	MetaDescription  null.String       `json:"meta_description,omitempty"`
 	Toc              null.String       `json:"toc,omitempty"`
 	Tag              string            `json:"tag,omitempty"`
 	Tags             []Tag             `json:"tags,omitempty"`
@@ -120,7 +120,7 @@ type RecommendedPost struct {
 	PublishedAt     null.String `json:"published_at"`
 	Summary         null.String `json:"summary"`
 	BlogContent     string      `json:"blog_content"`
-	MetaDescription string      `json:"meta_description"`
+	MetaDescription null.String `json:"meta_description"`
 	Toc             null.String `json:"toc"`
 	Tag             string      `json:"tag,omitempty"`
 	Tags            []Tag       `json:"tags"`
diff --git a/post/tag.go b/post/tag.go
index e25facc98..ef9f9caf9 100644
--- a/post/tag.go
+++ b/post/tag.go
@@ -26,7 +26,7 @@ func (repository *Repository) GetPostsByTag(c *gin.Context) {
 
 	query := ""
 	if isPublished {
-		query = "is_published = true AND"
+		query = "is_published = true AND published_at IS NOT NULL AND"
 	}
 
 	posts := []Post{}