diff --git a/.github/workflows/deploy-frontend-dev.yml b/.github/workflows/deploy-frontend-dev.yml
index ef93bce41..3a428279d 100644
--- a/.github/workflows/deploy-frontend-dev.yml
+++ b/.github/workflows/deploy-frontend-dev.yml
@@ -2,7 +2,8 @@ name: DeployFrontendDev
 
 on:
   push:
-    
+    # branches:
+    #   - "master"
 
 jobs:
   deploy-frontend-dev:
diff --git a/nuxt-frontend/assets/images/flutter-app-development/casestudy/p1-1200w.webp b/nuxt-frontend/assets/images/flutter-app-development/casestudy/p1-1200w.webp
new file mode 100644
index 000000000..b3b371579
Binary files /dev/null and b/nuxt-frontend/assets/images/flutter-app-development/casestudy/p1-1200w.webp differ
diff --git a/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue b/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
index 4d3ee7938..01d3ddbe9 100644
--- a/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
@@ -39,34 +39,36 @@
     </div>
     <!-- Mobile UI ends -->
     <!-- Desktop UI -->
-    <div class="hidden lg:block">
-      <div id="stickyParent" class="h-[300vh]">
-        <div
-          v-for="(portfolio, index) in portfolios"
-          :key="index"
-          class="main sticky flex bg-[#F8F8F8]"
-        >
-          <div class="flex-1">
-            <img
-              :src="portfolio.image[2]"
-              :srcset="`${portfolio.image[2]} 800w`"
-              :alt="portfolio.title"
-              class="w-full h-full object-contain"
-              loading="lazy"
-            />
-          </div>
-          <div
-            class="flex-1 relative text-left text-white"
-            :class="(portfolio.background, { 'animate-moveIn': isAnimated })"
-          >
-            <div
-              class="absolute -left-4 top-1/2 -translate-y-1/2 w-0 h-0 border-transparent border-t-[18px] border-b-[18px] border-r-[18px] border-r-[#EF223C] border-l-solid"
-            ></div>
+    <div id="stickyParent" class="hidden lg:block h-[150vh]">
+      <div class="sticky top-0 max-h-full main">
+        <div v-for="(portfolio, index) in portfolios" :key="index">
+          <div class="flex bg-[#F8F8F8] h-screen">
+            <div class="flex-1">
+              <img
+                :src="portfolio.image[2]"
+                :srcset="`${portfolio.image[2]} 800w,${portfolio.image[3]} 1200w`"
+                :alt="portfolio.title"
+                class="w-full h-full object-contain opacity-0"
+                loading="lazy"
+                :class="{ 'animate-fadeInLeft opacity-100': isAnimated }"
+              />
+            </div>
             <div
-              class="absolute flex flex-col gap-6 w-[27.25rem] top-1/2 left-14 -translate-y-1/2"
+              class="flex-1 relative text-left text-white opacity-0"
+              :class="
+                ({ 'animate-moveIn opacity-100': isAnimated },
+                portfolio.background)
+              "
             >
-              <h3 class="header-3">{{ portfolio.title }}</h3>
-              <span class="sub-h1-regular">{{ portfolio.description }}</span>
+              <div
+                class="absolute -left-4 top-1/2 -translate-y-1/2 w-0 h-0 border-transparent border-t-[18px] border-b-[18px] border-r-[18px] border-r-[#EF223C] border-l-solid"
+              ></div>
+              <div
+                class="absolute flex flex-col gap-6 w-[27.25rem] top-1/2 left-14 -translate-y-1/2"
+              >
+                <h3 class="header-3">{{ portfolio.title }}</h3>
+                <span class="sub-h1-regular">{{ portfolio.description }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -75,16 +77,22 @@
     <!-- Desktop UI ends -->
   </div>
 </template>
-<script setup>
+<script setup type="module">
 import mobile_reelnews1 from "@/assets/images/flutter-app-development/casestudy/mobile/p1-400w.webp";
 import mobile_reelnews2 from "@/assets/images/flutter-app-development/casestudy/mobile/p1-800w.webp";
 import desktop_reelnews1 from "@/assets/images/flutter-app-development/casestudy/p1-800w.webp";
+import desktop_reelnews2 from "@/assets/images/flutter-app-development/casestudy/p1-1200w.webp";
 
 const isAnimated = ref(false);
 const portfolios = [
   {
     title: "Reelnews",
-    image: [mobile_reelnews1, mobile_reelnews2, desktop_reelnews1],
+    image: [
+      mobile_reelnews1,
+      mobile_reelnews2,
+      desktop_reelnews1,
+      desktop_reelnews2,
+    ],
     background: "bg-[#EF233C]",
     description:
       "Ditch Old News, Get reelnews: The News App for the Upcoming Wave of News Creators and Consumers.",
@@ -102,14 +110,42 @@ const handleScroll = () => {
   const sections = document.querySelectorAll(".main");
   const windowHeight = window.innerHeight;
 
-  sections.forEach((section, index) => {
+  sections.forEach((section) => {
     const react = section.getBoundingClientRect();
-    if (react.top < windowHeight / 2 && react.bottom >= 0) {
+    if (react.top <= windowHeight / 4 && react.bottom >= 0) {
       isAnimated.value = true;
-    } else {
-      isAnimated.value = false;
     }
   });
 };
 </script>
-<style lang="postcss" scoped></style>
+<!-- <style lang="postcss" scoped>
+@keyframes fadeInLeft {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes moveIn {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.animate-fadeInLeft {
+  animation: fadeInLeft 2s ease-in-out;
+  opacity: 1;
+}
+.animate-moveIn {
+  animation: moveIn 1s ease-in-out;
+  opacity: 1;
+}
+</style> -->
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index c05bf9649..d17a799f9 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -101,6 +101,11 @@ module.exports = {
           "0%": { top: "-120px", opacity: "0" },
           "100%": { top: " 0", opacity: "1" },
         },
+        fadeInLeft: {
+          "0%": { transform: "translateX(100%)", opacity: "0" },
+          "50%": { transform: "translateX(50%)", opacity: "0" },
+          "100%": { transform: "translateX(0)", opacity: "1" },
+        },
         fadeInRight: {
           "0%": { transform: "translateX(200px);" },
           "100%": { transform: "translateX(0px);" },
@@ -127,6 +132,16 @@ module.exports = {
             opacity: 0,
           },
         },
+        moveIn: {
+          "0%": {
+            transform: "translateY(100%);",
+            opacity: 0,
+          },
+          "100%": {
+            transform: "translateY(0);",
+            opacity: 1,
+          },
+        },
         moveUp: {
           "0%": {
             transform: "translateY(3rem)",
@@ -175,6 +190,8 @@ module.exports = {
         fadeSlideOut: "fadeOut 2.5s ease-in-out",
         zoomEffect: "zoomEffect 0.5s ease forwards",
         moveUp: "moveUp 1s ease-in-out",
+        fadeInLeft: "fadeInLeft 1s ease-in-out",
+        moveIn: "moveIn 0.5s ease-in-out",
       },
       zIndex: {
         "-1": "-1",