diff --git a/nuxt-frontend/assets/images/backend-development/development/DatabaseDesign.webp b/nuxt-frontend/assets/images/backend-development/development/DatabaseDesign.webp
deleted file mode 100644
index ed85e89c6..000000000
Binary files a/nuxt-frontend/assets/images/backend-development/development/DatabaseDesign.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/backend-development/development/Development.webp b/nuxt-frontend/assets/images/backend-development/development/Development.webp
deleted file mode 100644
index 36a244540..000000000
Binary files a/nuxt-frontend/assets/images/backend-development/development/Development.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/backend-development/development/Migration.webp b/nuxt-frontend/assets/images/backend-development/development/Migration.webp
deleted file mode 100644
index daeeed808..000000000
Binary files a/nuxt-frontend/assets/images/backend-development/development/Migration.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/backend-development/development/PerformanceOptimization.webp b/nuxt-frontend/assets/images/backend-development/development/PerformanceOptimization.webp
deleted file mode 100644
index 6c8a0b311..000000000
Binary files a/nuxt-frontend/assets/images/backend-development/development/PerformanceOptimization.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/backend-development/development/Security.webp b/nuxt-frontend/assets/images/backend-development/development/Security.webp
deleted file mode 100644
index ba3016d1c..000000000
Binary files a/nuxt-frontend/assets/images/backend-development/development/Security.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/backend-development/development/customarchitecture.webp b/nuxt-frontend/assets/images/backend-development/development/customarchitecture.webp
deleted file mode 100644
index a29034243..000000000
Binary files a/nuxt-frontend/assets/images/backend-development/development/customarchitecture.webp and /dev/null differ
diff --git a/nuxt-frontend/assets/images/backend-development/quote-left.webp b/nuxt-frontend/assets/images/backend-development/quote-left.webp
new file mode 100644
index 000000000..41b5e87d1
Binary files /dev/null and b/nuxt-frontend/assets/images/backend-development/quote-left.webp differ
diff --git a/nuxt-frontend/components/backend-development/CaseStudySection.vue b/nuxt-frontend/components/backend-development/CaseStudySection.vue
index 115e2652b..008c5b408 100644
--- a/nuxt-frontend/components/backend-development/CaseStudySection.vue
+++ b/nuxt-frontend/components/backend-development/CaseStudySection.vue
@@ -38,7 +38,7 @@
             <h2 class="mobile-header-2 text-black-87">
               {{ item.title }}
             </h2>
-            <p class="sub-h3-regular text-black-87" v-html="item.content"></p>
+            <p class="sub-h3-regular text-black-60" v-html="item.content"></p>
           </div>
         </a>
       </div>
@@ -85,7 +85,7 @@
                   ></h3
                 ></a>
                 <p
-                  class="text-black-87 mobile-header-3-medium"
+                  class="text-black-60 mobile-header-3-medium"
                   v-html="item.description"
                 ></p>
               </div>
diff --git a/nuxt-frontend/components/backend-development/DevelopmentSection.vue b/nuxt-frontend/components/backend-development/DevelopmentSection.vue
deleted file mode 100644
index 2a4b5f7fd..000000000
--- a/nuxt-frontend/components/backend-development/DevelopmentSection.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <section class="pt-16 lg:pt-[7.5rem] 3xl:outer-container lg:bg-gray-10">
-    <div
-      class="container text-center flex flex-col gap-4 lg:gap-6 mb-6 lg:mb-10"
-    >
-      <h2 class="mobile-header-2 lg:desk-header-2 text-black-87">
-        Backend development services
-      </h2>
-      <p class="sub-h1-regular text-black-60 xs:px-2">
-        Our backend development services ensure that your software runs
-        flawlessly, scales effortlessly, and remains bulletproof. We craft
-        unique solutions that cater to your distinct business challenges and
-        aspirations.
-      </p>
-    </div>
-    <swiper
-      :slidesPerView="1"
-      :loop="false"
-      :autoplay="{
-        delay: 2000,
-        disableOnInteraction: false,
-      }"      
-      :speed="100"
-      :spaceBetween="16"
-      class="bg-gray-10 h-screen"
-      :modules="modules"      
-    >
-      <swiper-slide
-        v-for="(item, index) in items"
-        :key="index"
-        class="flex-1 min-w-full h-screen"
-      >
-        <div class="flex flex-col container">
-          <div class="relative h-[50vh]">
-            
-            <div
-              class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-            >
-              <img
-                :src="item.image"
-                class="w-10 h-10 lg:w-16 lg:h-16 mx-auto"
-                :alt="item.title"
-              />
-            </div>
-          </div>
-          <div class="flex-1 flex flex-col gap-4 my-auto item">
-            <h3
-              class="mobile-header-3 lg:desk-header-3"
-              :class="item.className"
-            >
-              {{ item.title }}
-            </h3>
-            <span
-              v-html="item.description"
-              class="sub-h3-regular lg:mobile-header-3-medium flex flex-col gap-4 text-black-60"
-            ></span>
-          </div>
-        </div>
-      </swiper-slide>
-    </swiper>
-  </section>
-</template>
-<script setup>
-import { Swiper, SwiperSlide } from "swiper/vue";
-import { Autoplay } from "swiper/modules";
-
-import custom from "@/assets/images/backend-development/development/customarchitecture.webp";
-import development from "@/assets/images/backend-development/development/Development.webp";
-import database from "@/assets/images/backend-development/development/DatabaseDesign.webp";
-import performance from "@/assets/images/backend-development/development/PerformanceOptimization.webp";
-import migration from "@/assets/images/backend-development/development/Migration.webp";
-import security from "@/assets/images/backend-development/development/Security.webp";
-const modules = [Autoplay];
-const items = [
-  {
-    title: "Custom Backend Architecture",
-    image: custom,
-    className: "text-[#FF9472]",
-    description: `<span>In today's dynamic digital landscape, a one-size-fits-all approach often falls short. Recognizing the unique challenges and objectives of each business,we offer tailored backend solutions built from the ground up.</span>
-    <span>Our expertise ensures that your application functions with precision, aligning seamlessly with your front-end while meeting specific business logic and operational needs.</span>
-    <span>At Canopas, we craft unique solutions that cater to your distinct business challenges and aspirations.</span>`,
-  },
-  {
-    title: "Seamless API Development & Integration",
-    image: development,
-    className: "text-[#F2709C]",
-    description: `<span>As businesses increasingly rely on a myriad of software applications, the need for efficient communication between these platforms becomes paramount.</span>
-    <span>Our team crafts seamless and efficient APIs, ensuring that your various applications connect and relay information without hitches. This focus on integration fosters smooth data flow, ultimately enhancing operational efficiency.</span>
-    <span>From monolithic to serverless microservices, we've got you covered with skills that help you scale your business. We put a great emphasis on API documentation for future integrations and updates.</span>`,
-  },
-  {
-    title: "Database Design & Management",
-    image: database,
-    className: "text-[#FF9472]",
-    description: `<span>In the digital era, data is gold. Our approach to database design prioritizes structure, optimization, and scalability.</span>
-    <span>We ensure that you have a robust system in place to securely store, manage, and retrieve vast amounts of data. By choosing us, you're not only ensuring immediate data efficiency but also preparing your business for future growth.</span>
-    <span>For database selection, we analyze project requirements first and then make a decision based on the feature requirements. Sometimes, we use relational and non-relational databases in a single project..</span>`,
-  },
-  {
-    title: "Performance Optimization",
-    image: performance,
-    className: "text-[#F2709C]",
-    description: `<span>A slow server response can be the chink in your digital armor, deterring potential users and impacting user experience.</span>
-    <span>We go beyond mere backend development by enhancing server responses and actively working on reducing load times. This ensures that your users enjoy an uninterrupted and swift experience, increasing satisfaction and engagement.</span>
-    <span>We use techniques like data sharding, caching, and database optimization. It helps you bring more repeat customers and happy customers who advocate your brand to others.</span>`,
-  },
-  {
-    title: "Migration & Upgrades",
-    image: migration,
-    className: "text-[#FF9472]",
-    description: `<span>Legacy systems, while familiar, often hinder growth and efficiency. Our team specializes in transitioning your old systems to contemporary, more efficient platforms.</span>
-    <span>Through meticulous planning and execution, we ensure no data loss ordowntime, making the migration process seamless and painless.</span>
-    <span>We also utilize CI/CD platforms and automate deployment pipelines to push changes efficiently. We always make sure that new updates don't break the experience for users on older versions or systems.</span>`,
-  },
-  {
-    title: "Security & Compliance",
-    image: security,
-    className: "text-[#F2709C]",
-    description: `<span>In an age where cyber threats are prevalent, the security of your backend is non-negotiable.</span>
-    <span>We embed robust security measures from the ground up, ensuring databreaches remain a concern of the past.</span>
-    <span>Additionally, with evolving industry standards, we ensure that your backend is not only secure but also compliant, giving you peace of mind and earning the trust of your users.</span>
-    <span>We promote regular training sessions and workshops on the latest developments in the industry and encourage the team to stay updated with all the security and regulatory compliances.</span>`,
-  },
-];
-</script>
-<style lang="postcss" scoped>
-.swiper-slide-active > div > .item {
-  @apply animate-moveIn duration-1000
-}
-</style>
\ No newline at end of file
diff --git a/nuxt-frontend/components/backend-development/SuccessStorySection.vue b/nuxt-frontend/components/backend-development/SuccessStorySection.vue
new file mode 100644
index 000000000..fd5496d68
--- /dev/null
+++ b/nuxt-frontend/components/backend-development/SuccessStorySection.vue
@@ -0,0 +1,177 @@
+<template>
+  <section class="my-16 lg:my-60 3xl:outer-container">
+    <!-- Mobile UI start -->
+    <div class="lg:hidden">
+      <div class="mobile-header-2 text-center text-black-87 mb-6">
+        Our success stories
+      </div>
+      <swiper
+        :slidesPerView="1.1"
+        :autoplay="{
+          delay: 3000,
+          disableOnInteraction: false,
+        }"
+        :spaceBetween="0"
+        :centeredSlides="true"
+        :speed="1500"
+        :loop="true"
+        :modules="modules"
+        class="swiper-container"
+        :breakpoints="{
+          '420': {
+            slidesPerView: 1.2,
+          },
+          '520': {
+            slidesPerView: 1.5,
+          },
+          '630': {
+            slidesPerView: 1.8,
+          },
+          '768': {
+            slidesPerView: 2,
+          },
+        }"
+      >
+        <swiper-slide
+          v-for="client in clients"
+          :key="client"
+          class="bg-deep-charcoal !scale-90 transition-all duration-200 rounded-xl text-left ease-out"
+        >
+          <div class="container py-6 xs:px-6">
+            <img
+              :src="imageleft"
+              class="w-6 h-6 object-contain"
+              loading="lazy"
+              alt="left-quote"
+            />
+            <div class="mt-6">
+              <div
+                class="flex flex-col justify-between h-[25.25rem] xs:h-[22.25rem] sm:h-[19.25rem]"
+              >
+                <p
+                  class="sub-h1-semibold text-white"
+                  v-html="client.review"
+                ></p>
+                <div class="flex flex-col">
+                  <p class="sub-h3-semibold text-white-core-80">
+                    {{ client.name }}
+                  </p>
+                  <p class="sub-h3-regular text-white-core-60">
+                    {{ client.designation }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <!-- Mobile UI END -->
+    <!-- Desktop UI -->
+    <div class="hidden lg:block xll:container">
+      <div class="desk-header-2 text-center text-black-87 mb-[4.5rem]">
+        Success Stories
+      </div>
+      <swiper
+        :slidesPerView="1.5"
+        :autoplay="{
+          delay: 3000,
+          disableOnInteraction: false,
+        }"
+        :centeredSlides="true"
+        :speed="1500"
+        :loop="true"
+        :modules="modules"
+        class="!p-8"
+        :breakpoints="{
+          '992': {
+            slidesPerView: 1.5,
+          },
+          '1200': {
+            slidesPerView: 1.7,
+          },
+          '1400': {
+            slidesPerView: 2,
+          },
+          '2400': {
+            slidesPerView: 2,
+          },
+        }"
+      >
+        <swiper-slide
+          v-for="client in clients"
+          :key="client"
+          class="slide text-white bg-deep-charcoal !scale-75 transition-all duration-200 rounded-xl text-left ease-in"
+          ><div class="container py-14 mx-14">
+            <img
+              :src="imageleft"
+              class="w-6 h-6 object-contain"
+              loading="lazy"
+              alt="quote-left"
+            />
+            <div
+              class="flex flex-col !justify-between mt-6 h-[25.26rem] 2xll:h-[20.25rem] xll:h-[25.26rem]"
+            >
+              <div class="mobile-header-2-semibold">{{ client.review }}</div>
+              <div class="flex flex-col">
+                <p class="sub-h2-medium text-white-core-80">
+                  {{ client.name }}
+                </p>
+                <p class="mobile-header-3-regular text-white-core-60">
+                  {{ client.designation }}
+                </p>
+              </div>
+            </div>
+          </div></swiper-slide
+        >
+      </swiper>
+    </div>
+    <!-- Desktop UI END-->
+  </section>
+</template>
+<script setup>
+import { Autoplay } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import imageleft from "@/assets/images/backend-development/quote-left.webp";
+const modules = [Autoplay];
+const clients = [
+  {
+    id: 1,
+    name: "Rebecca Kimura",
+    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 understood the first time."`,
+  },
+  {
+    id: 2,
+    name: "Elyass Bouchater",
+    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 thanks to Canopas' work."`,
+  },
+  {
+    id: 3,
+    name: "Rob Eberhard",
+    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  high performing iOS app."`,
+  },
+  {
+    id: 4,
+    name: "Lisa Weinstein",
+    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 iOS and Android stores."`,
+  },
+  {
+    id: 5,
+    name: "Cyril Trosset",
+    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  high quality apps."`,
+  },
+];
+</script>
+<style lang="postcss" scoped>
+.swiper-slide-active {
+  @apply !scale-100;
+}
+.slide {
+  box-shadow: 1.5rem 1.5rem #ff9472 !important;
+}
+</style>
diff --git a/nuxt-frontend/pages/backend-development.vue b/nuxt-frontend/pages/backend-development.vue
index e1ec73e10..c3a33eb0c 100644
--- a/nuxt-frontend/pages/backend-development.vue
+++ b/nuxt-frontend/pages/backend-development.vue
@@ -5,6 +5,7 @@
     <DevelopmentSection />
     <CaseStudySection />
     <PartnerWithUsSection />
+    <SuccessStorySection />
     <BlogSection />
     <NewFooter class="-mt-4 md:mt-0" />
   </div>
@@ -22,6 +23,9 @@ const CaseStudySection = defineAsyncComponent(
 const PartnerWithUsSection = defineAsyncComponent(
   () => import("@/components/backend-development/PartnerWithUsSection.vue"),
 );
+const SuccessStorySection = defineAsyncComponent(
+  () => import("@/components/backend-development/SuccessStorySection.vue"),
+);
 const BlogSection = defineAsyncComponent(
   () => import("@/components/backend-development/BlogSection.vue"),
 );
@@ -46,6 +50,7 @@ export default {
     DevelopmentSection,
     CaseStudySection,
     PartnerWithUsSection,
+    SuccessStorySection,
     BlogSection,
     NewFooter,
   },
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index 129b62635..1af77ae05 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -39,6 +39,7 @@ module.exports = {
         },
         white: "#ffffff",
         "white-core": {
+          12: "#FFFFFF1F",
           80: "#FFFFFFCC",
           60: "#FFFFFF99",
           90: "#FFFFFF14",
@@ -59,6 +60,7 @@ module.exports = {
           200: "#e2e2e2",
           400: "#8d8a8a",
         },
+        "deep-charcoal": "#121212",
       },
       borderRadius: {
         "x-lg": "20px",