diff --git a/nuxt-frontend/app.vue b/nuxt-frontend/app.vue
index 0c4b0ba87..2b1be0907 100644
--- a/nuxt-frontend/app.vue
+++ b/nuxt-frontend/app.vue
@@ -1,9 +1,5 @@
-
 <template>
   <div>
     <NuxtPage />
   </div>
 </template>
-
-<script>
-</script>
diff --git a/nuxt-frontend/assets/css/app.css b/nuxt-frontend/assets/css/app.css
index 169530bda..25a5bab9e 100644
--- a/nuxt-frontend/assets/css/app.css
+++ b/nuxt-frontend/assets/css/app.css
@@ -69,3 +69,11 @@
   font-weight: 500;
   src: url(../fonts/Roboto-Medium-Subset.woff2);
 }
+
+@font-face {
+  font-display: swap;
+  font-family: Opensans-Bold;
+  font-style: normal;
+  font-weight: 700;
+  src: url(../fonts/Open-Sans-Bold.woff2) format("woff2");
+}
diff --git a/nuxt-frontend/components/about/HowItAllStartedSection.vue b/nuxt-frontend/components/about/HowItAllStartedSection.vue
index eb9878659..a01e5874a 100644
--- a/nuxt-frontend/components/about/HowItAllStartedSection.vue
+++ b/nuxt-frontend/components/about/HowItAllStartedSection.vue
@@ -139,7 +139,7 @@ export default {
       // space between list elements
       let space = Math.ceil(
         (totalWidth - listWidth * this.stories.length) /
-          (this.stories.length - 1)
+          (this.stories.length - 1),
       );
 
       // move left with total of li width and space
diff --git a/nuxt-frontend/components/contact/NewContactForm.vue b/nuxt-frontend/components/contact/NewContactForm.vue
index 52194b530..e49640826 100755
--- a/nuxt-frontend/components/contact/NewContactForm.vue
+++ b/nuxt-frontend/components/contact/NewContactForm.vue
@@ -80,7 +80,9 @@
                   showProjectInfoValidationError =
                     $event.target.value.trim().length === 0
                 "
-                @click.native="$mixpanel.track('tap_contact_project_info_input')"
+                @click.native="
+                  $mixpanel.track('tap_contact_project_info_input')
+                "
               ></textarea>
               <label
                 for="project"
@@ -323,7 +325,7 @@ export default {
                   });
                   localStorage.setItem(
                     "client-name",
-                    JSON.stringify(formData.name)
+                    JSON.stringify(formData.name),
                   );
                   this.resetForm();
                 })
diff --git a/nuxt-frontend/components/contributions/DesignExplore.vue b/nuxt-frontend/components/contributions/DesignExplore.vue
index 1c0754708..b1b2452d9 100644
--- a/nuxt-frontend/components/contributions/DesignExplore.vue
+++ b/nuxt-frontend/components/contributions/DesignExplore.vue
@@ -283,7 +283,7 @@ export default {
           found = true;
           styles[i].innerText = styles[i].innerText.replaceAll(
             this.lastWidth,
-            width
+            width,
           );
         }
       }
diff --git a/nuxt-frontend/components/contributions/WhatsTrending.vue b/nuxt-frontend/components/contributions/WhatsTrending.vue
index 4b50bbc8e..e70be57f2 100644
--- a/nuxt-frontend/components/contributions/WhatsTrending.vue
+++ b/nuxt-frontend/components/contributions/WhatsTrending.vue
@@ -366,7 +366,7 @@ export default {
           found = true;
           styles[i].innerText = styles[i].innerText.replaceAll(
             this.lastWidth,
-            width
+            width,
           );
         }
       }
diff --git a/nuxt-frontend/components/home-new/BlogSection.vue b/nuxt-frontend/components/home-new/BlogSection.vue
index 6163b5548..564d59855 100755
--- a/nuxt-frontend/components/home-new/BlogSection.vue
+++ b/nuxt-frontend/components/home-new/BlogSection.vue
@@ -203,7 +203,7 @@ export default {
              * get date in MMM DD, YYYY format
              */
             element.pubDate = new Date(
-              element.pubDate.replace(/-/g, "/")
+              element.pubDate.replace(/-/g, "/"),
             ).toLocaleDateString("en-US", {
               month: "long",
               day: "2-digit",
diff --git a/nuxt-frontend/components/home-new/ContributionSection.vue b/nuxt-frontend/components/home-new/ContributionSection.vue
index 6f164ad5a..9bde87286 100644
--- a/nuxt-frontend/components/home-new/ContributionSection.vue
+++ b/nuxt-frontend/components/home-new/ContributionSection.vue
@@ -190,7 +190,7 @@ export default {
         () => this.cData,
         (data) => {
           setGithubStars(this.contributions, data);
-        }
+        },
       );
       if (this.cData != null) {
         setGithubStars(this.contributions, this.cData);
diff --git a/nuxt-frontend/components/home-new/ContributionSectionMobile.vue b/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
index a3ae5e23b..334299a3e 100644
--- a/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
+++ b/nuxt-frontend/components/home-new/ContributionSectionMobile.vue
@@ -174,7 +174,7 @@ export default {
         () => this.cData,
         (data) => {
           setGithubStars(this.contributions, data);
-        }
+        },
       );
       if (this.cData != null) {
         setGithubStars(this.contributions, this.cData);
diff --git a/nuxt-frontend/components/home-new/HomeIndex.vue b/nuxt-frontend/components/home-new/HomeIndex.vue
index 5d885ac8b..9460c8e64 100644
--- a/nuxt-frontend/components/home-new/HomeIndex.vue
+++ b/nuxt-frontend/components/home-new/HomeIndex.vue
@@ -27,31 +27,31 @@ import { elementInViewPort } from "@/utils.js";
 import { defineAsyncComponent } from "vue";
 
 const CaseStudy = defineAsyncComponent(() =>
-  import("@/components/home-new/CaseStudy.vue")
+  import("@/components/home-new/CaseStudy.vue"),
 );
 const ServiceSection = defineAsyncComponent(() =>
-  import("@/components/home-new/ServiceSection.vue")
+  import("@/components/home-new/ServiceSection.vue"),
 );
 const ServiceSectionMobile = defineAsyncComponent(() =>
-  import("@/components/home-new/ServiceSectionMobile.vue")
+  import("@/components/home-new/ServiceSectionMobile.vue"),
 );
 const ContributionSection = defineAsyncComponent(() =>
-  import("@/components/home-new/ContributionSection.vue")
+  import("@/components/home-new/ContributionSection.vue"),
 );
 const ContributionSectionMobile = defineAsyncComponent(() =>
-  import("@/components/home-new/ContributionSectionMobile.vue")
+  import("@/components/home-new/ContributionSectionMobile.vue"),
 );
 const ClientReview = defineAsyncComponent(() =>
-  import("@/components/home-new/ClientReviewSection.vue")
+  import("@/components/home-new/ClientReviewSection.vue"),
 );
 const CTASection = defineAsyncComponent(() =>
-  import("@/components/mobile-app-development/CTASection2.vue")
+  import("@/components/mobile-app-development/CTASection2.vue"),
 );
 const BlogSection = defineAsyncComponent(() =>
-  import("@/components/home-new/BlogSection.vue")
+  import("@/components/home-new/BlogSection.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 export default {
diff --git a/nuxt-frontend/components/home-new/UserReview.vue b/nuxt-frontend/components/home-new/UserReview.vue
index f8c6d17b1..546cec7f9 100644
--- a/nuxt-frontend/components/home-new/UserReview.vue
+++ b/nuxt-frontend/components/home-new/UserReview.vue
@@ -194,7 +194,7 @@ export default {
   },
   components: {
     LottieAnimation: defineAsyncComponent(() =>
-      import("@/components/utils/LottieAnimation.vue")
+      import("@/components/utils/LottieAnimation.vue"),
     ),
   },
   mounted() {
diff --git a/nuxt-frontend/components/ios-app-development/BlogSection.vue b/nuxt-frontend/components/ios-app-development/BlogSection.vue
new file mode 100644
index 000000000..63adb62f6
--- /dev/null
+++ b/nuxt-frontend/components/ios-app-development/BlogSection.vue
@@ -0,0 +1,228 @@
+<template>
+  <section class="tw-my-20 md:tw-mb-32 lg:tw-my-32 xll:tw-container">
+    <div
+      class="tw-pb-4 md:tw-py-12 tw-text-center tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] md:tw-text-[2.65625rem] md:tw-leading-[3.796875rem] lg:tw-text-[3.4375rem] lg:tw-leading-[5.15625rem] tw-tracking-[-4%] xll:tw-py-24 tw-text-black-core/[0.87]"
+    >
+      <span>Our Blogs</span>
+    </div>
+    <!-- Mobile UI start -->
+    <div class="tw-mt-8 tw-block md:tw-hidden">
+      <swiper
+        :grabCursor="true"
+        :effect="'creative'"
+        :centeredSlides="true"
+        :loop="false"
+        :creativeEffect="{
+          limitProgress: 5,
+          loop: false,
+          next: {
+            translate: [400, 0, 0],
+          },
+          prev: {
+            translate: [0, 0, -10],
+          },
+        }"
+        :slidesPerView="1"
+        :spaceBetween="10"
+        :modules="modules"
+      >
+        <swiper-slide
+          v-for="(blog, index) in blogs"
+          :key="index"
+          class="tw-mt-8"
+        >
+          <div
+            :class="blog.className"
+            class="tw-w-80 tw-h-[350px] tw-drop-shadow-md tw-text-left tw-cursor-pointer tw-mx-auto"
+          >
+            <img
+              @click="openBlog(blog.link, 'tap_ios_blog_section')"
+              :src="blog.image"
+              :srcset="`${blog.image} 400w`"
+              :alt="blog.title"
+              class="tw-h-44 tw-w-80 tw-object-cover"
+              loading="lazy"
+            />
+            <div
+              @click="openBlog(blog.link, 'tap_ios_blog_section')"
+              class="=tw-w-80 tw-h-28 tw-bg-white tw-flex tw-flex-col tw-justify-center tw-px-8"
+            >
+              <h2
+                class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-4%] tw-text-black-core/[0.87]"
+              >
+                {{ blog.title }}
+              </h2>
+
+              <span
+                class="tw-mt-2 tw-font-inter-regular tw-text-sm tw-tracking-[-0.72px] lg:tw-leading-[1.3125rem] v2-canopas-gradient-text"
+              >
+                {{ blog.readTime }}
+              </span>
+            </div>
+          </div>
+        </swiper-slide></swiper
+      >
+    </div>
+
+    <!-- Mobile UI End -->
+    <!-- Desktop UI start -->
+    <div class="tw-mt-8 md:tw-block tw-hidden">
+      <swiper
+        :slidesPerView="4"
+        :centeredSlides="true"
+        :loop="true"
+        :autoplay="{
+          delay: 2000,
+          disableOnInteraction: false,
+        }"
+        :speed="2000"
+        :spaceBetween="10"
+        :modules="modules"
+        :navigation="true"
+        class="swiper-container"
+        :breakpoints="{
+          '768': {
+            slidesPerView: 2,
+          },
+          '1200': {
+            slidesPerView: 2.5,
+          },
+          '1400': {
+            slidesPerView: 3.5,
+          },
+
+          '2400': {
+            slidesPerView: 2.5,
+          },
+        }"
+      >
+        <swiper-slide
+          v-for="(blog, index) in iosblog"
+          :key="index"
+          class="tw-cursor-pointer tw-relative tw-flex tw-flex-col tw-pl-4 sm:tw-pl-8"
+        >
+          <div class="tw-h-full tw-w-full">
+            <img
+              @click="openBlog(blog.link, 'tap_ios_blog_section')"
+              :src="blog.deskImage[0]"
+              :srcset="`${blog.deskImage[0]} 800w,${blog.deskImage[1]} 1200w`"
+              :alt="blog.title"
+              class="tw-h-full tw-w-full tw-object-cover tw-rounded-[12px]"
+              loading="lazy"
+            />
+          </div>
+          <div>
+            <p
+              @click="openBlog(blog.link, 'tap_ios_blog_section')"
+              class="tw-mt-2 tw-font-inter-semibold tw-text-2xl lg:tw-text-[2.125rem] tw-w-full lg:tw-leading-[3.1875rem] !tw-tracking-[-4%] tw-text-black-core/[0.87]"
+            >
+              {{ blog.title }}
+            </p>
+            <p
+              class="tw-mt-2 tw-font-inter-medium tw-text-base lg:tw-text-lg tw-tracking-[-0.72px] lg:tw-leading-[1.125rem] tw-text-black-core/[0.60]"
+            >
+              {{ blog.readTime }}
+            </p>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <!-- Desktop UI end -->
+  </section>
+</template>
+
+<script>
+import { EffectCreative, Autoplay } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+import { openBlog } from "@/utils.js";
+
+import mobile_blog1_400w from "@/assets/images/ios-app-development/blog/blog1-400w.webp";
+import mobile_blog2_400w from "@/assets/images/ios-app-development/blog/blog2-400w.webp";
+import mobile_blog3_400w from "@/assets/images/ios-app-development/blog/blog3-400w.webp";
+import mobile_blog4_400w from "@/assets/images/ios-app-development/blog/blog4-400w.webp";
+import mobile_blog5_400w from "@/assets/images/ios-app-development/blog/blog5-400w.webp";
+
+import dektop_blog1_800w from "@/assets/images/ios-app-development/blog/desk-blog1-800w.webp";
+import dektop_blog1_1200w from "@/assets/images/ios-app-development/blog/desk-blog1-1200w.webp";
+import dektop_blog2_800w from "@/assets/images/ios-app-development/blog/desk-blog2-800w.webp";
+import dektop_blog2_1200w from "@/assets/images/ios-app-development/blog/desk-blog2-1200w.webp";
+import dektop_blog3_800w from "@/assets/images/ios-app-development/blog/desk-blog3-800w.webp";
+import dektop_blog3_1200w from "@/assets/images/ios-app-development/blog/desk-blog3-1200w.webp";
+import dektop_blog4_800w from "@/assets/images/ios-app-development/blog/desk-blog4-800w.webp";
+import dektop_blog4_1200w from "@/assets/images/ios-app-development/blog/desk-blog4-1200w.webp";
+import dektop_blog5_800w from "@/assets/images/ios-app-development/blog/desk-blog5-800w.webp";
+import dektop_blog5_1200w from "@/assets/images/ios-app-development/blog/desk-blog5-1200w.webp";
+
+export default {
+  data() {
+    return {
+      openBlog,
+      modules: [EffectCreative, Autoplay],
+
+      blogs: [
+        {
+          title: "The Ultimate Guide to iOS unit testing with best practices",
+          image: mobile_blog1_400w,
+          readTime: "5 min read",
+          deskImage: [dektop_blog1_800w, dektop_blog1_1200w],
+          link: "https://blog.canopas.com/the-ultimate-guide-to-ios-unit-testing-with-best-practices-part-2-f2eacbf3d8d4",
+        },
+        {
+          title: "SwiftUI Performance Tuning: Tips and Tricks",
+          image: mobile_blog2_400w,
+          readTime: "8 min read",
+          deskImage: [dektop_blog2_800w, dektop_blog2_1200w],
+          link: "https://blog.canopas.com/swiftui-performance-tuning-tips-and-tricks-a8f9eeb23ec4",
+          className: "-tw-rotate-6",
+        },
+        {
+          title: "Designing Data Layer For Offline-first Apps",
+          image: mobile_blog3_400w,
+          readTime: "7 min read",
+          deskImage: [dektop_blog3_800w, dektop_blog3_1200w],
+          link: "https://blog.canopas.com/ios-designing-data-layer-for-offline-first-apps-f929c83bb195",
+          className: "tw-rotate-6",
+        },
+        {
+          title: "SwiftUI — Complex navigation made easier with UIPilot",
+          image: mobile_blog4_400w,
+          readTime: "5 min read",
+          deskImage: [dektop_blog4_800w, dektop_blog4_1200w],
+          link: "https://blog.canopas.com/swiftui-complex-navigation-made-easier-with-uipilot-5b33279f3476",
+          className: "-tw-rotate-6",
+        },
+        {
+          title: "A Complete Guide to iOS App Auto Deployment with CI-CD",
+          image: mobile_blog5_400w,
+          readTime: "7 min read",
+          deskImage: [dektop_blog5_800w, dektop_blog5_1200w],
+          link: "https://blog.canopas.com/a-complete-guide-to-ios-app-auto-deployment-with-ci-cd-b5dc516ba41d",
+          className: "tw-rotate-6",
+        },
+      ],
+    };
+  },
+
+  computed: {
+    iosblog() {
+      return Array(50).fill(this.blogs).flat();
+    },
+  },
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  inject: ["mixpanel"],
+};
+</script>
+<style lang="postcss">
+@import "swiper/css";
+@import "swiper/css/effect-creative";
+.swiper-slide {
+  @apply !tw-overflow-visible;
+}
+.swiper-wrapper {
+  @apply !tw-items-start;
+}
+</style>
diff --git a/nuxt-frontend/components/ios-app-development/CtaSection.vue b/nuxt-frontend/components/ios-app-development/CtaSection.vue
index 9dad227a7..784674c3d 100644
--- a/nuxt-frontend/components/ios-app-development/CtaSection.vue
+++ b/nuxt-frontend/components/ios-app-development/CtaSection.vue
@@ -38,17 +38,17 @@
     </div>
     <!-- Desktop view start -->
     <div
-      class="tw-relative tw-mb-16 tw-h-80 xll:tw-h-[30rem] tw-hidden md:tw-block"
+      class="tw-relative tw-mb-16 tw-h-80 lg:tw-h-[476px] tw-hidden md:tw-block"
     >
       <img
         :src="BackgroundImage[1]"
         :srcset="`${BackgroundImage[1]} 800w,${BackgroundImage[2]} 1200w,${BackgroundImage[3]} 2400w`"
         alt="Background-Image"
-        class="tw-h-full lg:tw-h-[22.5rem] xll:tw-h-full tw-w-full tw-object-cover"
+        class="tw-h-full tw-w-full tw-object-cover"
         loading="lazy"
       />
       <div
-        class="tw-container tw-absolute tw-left-1/2 tw-flex tw-w-full tw--translate-x-1/2 tw--translate-y-[150%] lg:tw--translate-y-[114%] xll:tw--translate-y-[134%] tw-transform tw-flex-row tw-items-center"
+        class="tw-container tw-absolute tw-left-1/2 tw-flex tw-w-full tw--translate-x-1/2 tw--translate-y-[15.55rem] lg:tw--translate-y-[24rem] tw-transform tw-flex-row tw-items-center"
       >
         <div class="tw-flex tw-w-[66%]">
           <div
diff --git a/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue b/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
index 2df66e53f..dbba4e16c 100644
--- a/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/ios-app-development/DevelopmentSection.vue
@@ -114,6 +114,7 @@
             delay: 3000,
             disableOnInteraction: false,
           }"
+          :loop="true"
           :modules="modules"
           class="swiper-container tw-h-[600px] lg:tw-h-[540px] xl:tw-h-[495px] tw-flex"
           @swiper="setSwiperRef"
@@ -150,7 +151,7 @@
   </div>
 </template>
 
-<script type="module" scoped>
+<script type="module">
 import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import consultation from "@/assets/images/ios-app-development/development/consultation.webp";
diff --git a/nuxt-frontend/components/ios-app-development/SuccessStory.vue b/nuxt-frontend/components/ios-app-development/SuccessStory.vue
new file mode 100644
index 000000000..48686f7bf
--- /dev/null
+++ b/nuxt-frontend/components/ios-app-development/SuccessStory.vue
@@ -0,0 +1,246 @@
+<template>
+  <section class="tw-mb-20">
+    <div
+      class="tw-container md:tw-mt-36 lg:tw-mb-8 tw-mb-7 tw-mx-auto tw-text-center"
+    >
+      <span
+        class="tw-tracking-[-4%] tw-mb-2.5 tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] md:tw-hidden tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[2.65625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.796875rem] lg:tw-leading-[5.15625rem] xs:tw-mx-auto xs:tw-w-[71%]"
+      >
+        Success Stories</span
+      >
+    </div>
+    <!-- Mobile UI start -->
+    <div
+      class="tw-ml-auto md:tw-hidden tw-mx-auto tw-h-[30rem] tw-relative xll:tw-container tw-overflow-hidden tw-bg-[#1E1E1D]"
+    >
+      <img
+        :src="reviewBackgroundImage"
+        :srcset="`${reviewBackgroundImage} 400w`"
+        class="tw-h-full tw-w-full tw-object-scale-down tw-ease-in-out tw-duration-1000"
+        alt="ios-review-image"
+      />
+      <div
+        class="tw-container swiper-content tw-absolute tw-p-4 tw-w-full tw-text-center tw-text-[#FFF] tw-transform tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2 xl:tw-w-[80%] md:tw-top-[49%] lg:tw-top-[48%]"
+      >
+        <swiper
+          :slidesPerView="1"
+          :centeredSlides="true"
+          :autoplay="{
+            delay: 3000,
+            disableOnInteraction: false,
+          }"
+          :speed="3000"
+          :loop="true"
+          :spaceBetween="20"
+          :modules="modules"
+          class="swiper-container"
+        >
+          <swiper-slide
+            v-for="(client, index) in clients"
+            :key="index"
+            class="tw-cursor-pointer tw-my-auto"
+          >
+            <div
+              class="tw-mx-auto sm:tw-px-10 md:tw-px-6 lg:tw-px-4 xl:tw-px-24 tw-text-white tw-flex tw-flex-col tw-justify-between tw-items-center tw-object-center"
+            >
+              <div
+                class="tw-font-inter-semibold tw-text-lg tw-leading-[1.6875rem] tw-transition-all tw-ease tw-duration-500 tw-tracking-[-2%]"
+              >
+                {{ client.review }}
+              </div>
+              <div class="tw-flex tw-flex-col tw-mt-8 tw-mb-2.5">
+                <span class="tw-flex tw-flex-row">
+                  <font-awesome-icon
+                    v-for="i in 5"
+                    :key="i"
+                    class="fa-star tw-w-5 tw-h-5 tw-text-[#FFC700]"
+                    icon="star"
+                /></span>
+              </div>
+              <div class="tw-flex tw-flex-col">
+                <span
+                  class="tw-font-inter-semibold tw-text-base tw-leading-[1.2rem]"
+                  >{{ client.name }}</span
+                >
+                <span
+                  class="tw-font-inter-regular tw-text-xs tw-leading-[0.9rem] tw-mt-[0.3rem]"
+                  >{{ client.designation }}</span
+                >
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+    <!-- Mobile UI END -->
+    <!-- Desktop UI -->
+    <div
+      class="tw-hidden md:tw-flex tw-item-center tw-rounded-[20px] tw-w-[95%] lg:tw-w-11/12 xl:tw-w-5/6 2xl:tw-w-[75%] tw-h-[660px] tw-mx-auto tw-drop-shadow-md xll:tw-container"
+    >
+      <div
+        class="tw-w-2/5 tw-flex tw-justify-center tw-items-center tw-bg-[#F4F4F4] tw-rounded-tl-xl tw-rounded-bl-xl"
+      >
+        <span
+          class="tw-text-[2.4375rem] tw-font-opensans-bold tw-w-3/4 2xl:tw-w-[65%] tw-mx-auto lg:tw-text-5xl tw-leading-[2.79375rem] lg:tw-leading-[3.9rem] !tw-tracking-[-4%] tw-text-black-core/[0.87]"
+          >What our clients says?</span
+        >
+      </div>
+
+      <div
+        class="tw-w-3/5 tw-bg-[#3D3D3D] tw-rounded-tr-xl tw-rounded-br-xl tw-flex tw-flex-col tw-justify-center"
+      >
+        <div class="tw-pl-7 lg:tw-pl-12">
+          <img
+            :src="imageleft"
+            alt="quote-left-image"
+            loading="lazy"
+            class="tw-w-[1.1rem] tw-h-4 lg:tw-w-8 lg:tw-h-7 tw-text-[#FFFFFF]/[0.60]"
+          />
+        </div>
+        <div class="tw-flex tw-items-center">
+          <swiper
+            :slidesPerView="1"
+            :speed="1000"
+            :loop="true"
+            :spaceBetween="20"
+            :autoplay="{
+              delay: 3000,
+              disableOnInteraction: false,
+            }"
+            :pagination="pagination"
+            :modules="modules"
+            class="swiper-container tw-cursor-pointer"
+          >
+            <swiper-slide v-for="(client, index) in clients" :key="index">
+              <div class="tw-my-auto tw-px-7 lg:tw-px-12 tw-py-7 lg:tw-py-12">
+                <span class="tw-flex tw-mb-2.5">
+                  <font-awesome-icon
+                    v-for="i in 5"
+                    :key="i"
+                    class="fa-star tw-w-[1.375rem] tw-h-[1.375rem] lg:tw-w-6 lg:tw-h-6 tw-text-[#FFC700]"
+                    icon="star"
+                /></span>
+                <div
+                  class="tw-font-inter-semibold tw-text-[#FFFFFF] tw-text-[1.3125rem] lg:tw-text-2xl tw-leading-[2.203125rem] lg:tw-leading-9"
+                >
+                  {{ client.review }}
+                </div>
+                <div class="tw-flex tw-flex-col tw-text-left tw-mt-6">
+                  <span
+                    class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-text-3xl lg:tw-text-[1.375rem] tw-leading-[1.63125rem] lg:tw-leading-[2.0625rem]"
+                    >{{ client.name }}</span
+                  >
+                  <span
+                    class="tw-font-inter-regular tw-text-[#FFFFFF]/[0.60] tw-text-[0.9375rem] lg:tw-text-lg tw-leading-[2.5875rem] lg:tw-leading-[1.6875rem]"
+                    >{{ client.designation }}</span
+                  >
+                </div>
+              </div>
+            </swiper-slide>
+            <div
+              class="tw-flex tw-justify-between tw-flex-row-reverse tw-w-[90%]"
+            >
+              <div class="swiper-pagination"></div>
+              <div>
+                <img
+                  :src="imageright"
+                  alt="quote-image-right"
+                  loading="lazy"
+                  class="tw-w-[1.1rem] tw-h-4 lg:tw-w-8 lg:tw-h-7 tw-text-[#FFFFFF]/[0.60]"
+                />
+              </div>
+            </div>
+          </swiper>
+        </div>
+      </div>
+    </div>
+
+    <!-- Desktop UI END-->
+  </section>
+</template>
+
+<script>
+import { Autoplay, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import imageleft from "@/assets/images/ios-app-development/quote-left.webp";
+import imageright from "@/assets/images/ios-app-development/quote-right.webp";
+import reviewBackgroundImage from "@/assets/images/ios-app-development/review-background-400w.webp";
+export default {
+  data() {
+    return {
+      modules: [Pagination, Autoplay],
+      reviewBackgroundImage,
+      imageleft,
+      imageright,
+      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.",
+        },
+      ],
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+    };
+  },
+
+  components: {
+    Swiper,
+    SwiperSlide,
+    FontAwesomeIcon,
+  },
+  inject: ["mixpanel"],
+};
+</script>
+<style lang="postcss">
+@import "swiper/css";
+@import "swiper/css/pagination";
+.swiper-wrapper {
+  @apply tw-items-center;
+}
+
+.swiper-pagination {
+  @apply tw-pl-7 lg:tw-pl-12 tw-text-left;
+}
+
+.swiper-pagination-bullet {
+  @apply !tw-w-[10px] !tw-h-[10px] !tw-rounded-full !tw-bg-transparent !tw-border !tw-border-solid !tw-border-[#FFFFFF]/[0.80];
+}
+
+.swiper-pagination-bullet-active {
+  @apply !tw-border-none !tw-bg-white;
+}
+</style>
diff --git a/nuxt-frontend/components/jobs/LifeAtCanopas.vue b/nuxt-frontend/components/jobs/LifeAtCanopas.vue
index ae66148ff..32d92c7d2 100755
--- a/nuxt-frontend/components/jobs/LifeAtCanopas.vue
+++ b/nuxt-frontend/components/jobs/LifeAtCanopas.vue
@@ -50,12 +50,7 @@
               :src="slider.image[0]"
               :srcset="`${slider.image[0]} 400w, ${slider.image[1]} 800w, ${slider.image[2]} 1600w`"
               alt="Life at canopas"
-              :class="
-                slider.id == 7 || slider.id == 6
-                  ? 'tw-object-fill'
-                  : 'tw-object-cover'
-              "
-              class="tw-h-full tw-w-full"
+              class="tw-h-full tw-w-full tw-object-cover"
               loading="lazy"
             />
           </aspect-ratio>
diff --git a/nuxt-frontend/components/mobile-app-development/Portfolio.vue b/nuxt-frontend/components/mobile-app-development/Portfolio.vue
index 9218859f6..6d98c5d49 100755
--- a/nuxt-frontend/components/mobile-app-development/Portfolio.vue
+++ b/nuxt-frontend/components/mobile-app-development/Portfolio.vue
@@ -264,7 +264,7 @@ export default {
       setTimeout(function () {
         window.open(
           portfolio.url,
-          portfolio.target ? portfolio.target : "_self"
+          portfolio.target ? portfolio.target : "_self",
         );
       }, 200);
       this.$mixpanel.track(portfolio.event);
diff --git a/nuxt-frontend/components/portfolio/UserReviewSection.vue b/nuxt-frontend/components/portfolio/UserReviewSection.vue
index cba25d9f6..7aefe8c4d 100755
--- a/nuxt-frontend/components/portfolio/UserReviewSection.vue
+++ b/nuxt-frontend/components/portfolio/UserReviewSection.vue
@@ -157,7 +157,7 @@ export default {
           found = true;
           styles[i].innerText = styles[i].innerText.replaceAll(
             this.lastWidth,
-            width
+            width,
           );
         }
       }
diff --git a/nuxt-frontend/components/services/WhatWeOfferDesktop.vue b/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
index 9cb17a41e..cd2b1696b 100644
--- a/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
+++ b/nuxt-frontend/components/services/WhatWeOfferDesktop.vue
@@ -132,7 +132,7 @@ export default {
       // check which element is in viewport
       const elementIdx = elementInViewPort(this.$refs);
       const index = parseInt(
-        elementIdx ? elementIdx.charAt(elementIdx.length - 1) : 0
+        elementIdx ? elementIdx.charAt(elementIdx.length - 1) : 0,
       );
 
       if (this.prevIndex != index) {
diff --git a/nuxt-frontend/pages/about.vue b/nuxt-frontend/pages/about.vue
index 321682a2b..76227f3b3 100644
--- a/nuxt-frontend/pages/about.vue
+++ b/nuxt-frontend/pages/about.vue
@@ -26,22 +26,22 @@ import { elementInViewPort } from "@/utils.js";
 import { defineAsyncComponent } from "vue";
 
 const HowItAllStartedSectionMobile = defineAsyncComponent(() =>
-  import("@/components/about/HowItAllStartedSectionMobile.vue")
+  import("@/components/about/HowItAllStartedSectionMobile.vue"),
 );
 const AboutusVirtue = defineAsyncComponent(() =>
-  import("@/components/about/AboutusVirtue.vue")
+  import("@/components/about/AboutusVirtue.vue"),
 );
 const WithCanopasSection = defineAsyncComponent(() =>
-  import("@/components/about/WithCanopas.vue")
+  import("@/components/about/WithCanopas.vue"),
 );
 const ClientReviewSection = defineAsyncComponent(() =>
-  import("@/components/home-new/ClientReviewSection.vue")
+  import("@/components/home-new/ClientReviewSection.vue"),
 );
 const CTASection = defineAsyncComponent(() =>
-  import("@/components/about/CTASection.vue")
+  import("@/components/about/CTASection.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 export default {
diff --git a/nuxt-frontend/pages/android-app-development.vue b/nuxt-frontend/pages/android-app-development.vue
index bf8698ae2..65547dfc1 100644
--- a/nuxt-frontend/pages/android-app-development.vue
+++ b/nuxt-frontend/pages/android-app-development.vue
@@ -24,29 +24,29 @@ import { elementInViewPort } from "@/utils.js";
 import LandingSection from "@/components/android-app-development/LandingSection.vue";
 import DevelopmentSection from "@/components/android-app-development/DevelopmentSection.vue";
 const CaseStudy = defineAsyncComponent(() =>
-  import("@/components/android-app-development/CaseStudySection.vue")
+  import("@/components/android-app-development/CaseStudySection.vue"),
 );
 const SuccessStorySection = defineAsyncComponent(() =>
-  import("@/components/android-app-development/SuccessStorySection.vue")
+  import("@/components/android-app-development/SuccessStorySection.vue"),
 );
 const FaqSection = defineAsyncComponent(() =>
-  import("@/components/android-app-development/FaqSection.vue")
+  import("@/components/android-app-development/FaqSection.vue"),
 );
 
 const PinkCtaSection = defineAsyncComponent(() =>
-  import("@/components/android-app-development/PinkCtaSection.vue")
+  import("@/components/android-app-development/PinkCtaSection.vue"),
 );
 const CtaSection = defineAsyncComponent(() =>
-  import("@/components/android-app-development/CtaSection.vue")
+  import("@/components/android-app-development/CtaSection.vue"),
 );
 const BlackCtaSection = defineAsyncComponent(() =>
-  import("@/components/android-app-development/BlackCtaSection.vue")
+  import("@/components/android-app-development/BlackCtaSection.vue"),
 );
 const BlogSection = defineAsyncComponent(() =>
-  import("@/components/android-app-development/BlogSection.vue")
+  import("@/components/android-app-development/BlogSection.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 export default {
diff --git a/nuxt-frontend/pages/contact.vue b/nuxt-frontend/pages/contact.vue
index e2f1bb2ab..ccb11c66a 100644
--- a/nuxt-frontend/pages/contact.vue
+++ b/nuxt-frontend/pages/contact.vue
@@ -63,7 +63,7 @@ export default {
     recaptchaScript.setAttribute(
       "src",
       "https://www.google.com/recaptcha/enterprise.js?render=" +
-        import.meta.env.VITE_RECAPTCHA_SITE_KEY
+        import.meta.env.VITE_RECAPTCHA_SITE_KEY,
     );
     recaptchaScript.setAttribute("async", "true");
     recaptchaScript.setAttribute("defer", "true");
diff --git a/nuxt-frontend/pages/contributions.vue b/nuxt-frontend/pages/contributions.vue
index 87d0ba092..50b022bab 100755
--- a/nuxt-frontend/pages/contributions.vue
+++ b/nuxt-frontend/pages/contributions.vue
@@ -31,30 +31,30 @@ import DesktopLandingSection from "@/components/contributions/DesktopLanding.vue
 import GithubContribution from "@/components/contributions/GithubContribution.vue";
 import { elementInViewPort } from "@/utils.js";
 const WeeklyUpdateSection = defineAsyncComponent(() =>
-  import("@/components/contributions/WeeklyUpdate.vue")
+  import("@/components/contributions/WeeklyUpdate.vue"),
 );
 const WhatsTrending = defineAsyncComponent(() =>
-  import("@/components/contributions/WhatsTrending.vue")
+  import("@/components/contributions/WhatsTrending.vue"),
 );
 const Favourite = defineAsyncComponent(() =>
-  import("@/components/contributions/Favourite.vue")
+  import("@/components/contributions/Favourite.vue"),
 );
 const AnimatedCreation = defineAsyncComponent(() =>
-  import("@/components/contributions/AnimatedCreation.vue")
+  import("@/components/contributions/AnimatedCreation.vue"),
 );
 const UnitTest = defineAsyncComponent(() =>
-  import("@/components/contributions/UnitTest.vue")
+  import("@/components/contributions/UnitTest.vue"),
 );
 
 const DevOps = defineAsyncComponent(() =>
-  import("@/components/contributions/DevOps.vue")
+  import("@/components/contributions/DevOps.vue"),
 );
 const ExploreDesign = defineAsyncComponent(() =>
-  import("@/components/contributions/DesignExplore.vue")
+  import("@/components/contributions/DesignExplore.vue"),
 );
 
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 export default {
diff --git a/nuxt-frontend/pages/ios-app-development.vue b/nuxt-frontend/pages/ios-app-development.vue
index 7e0cd8016..4cbc705ce 100644
--- a/nuxt-frontend/pages/ios-app-development.vue
+++ b/nuxt-frontend/pages/ios-app-development.vue
@@ -1,12 +1,14 @@
 <template>
   <div>
     <Header />
-    <LandingSection ref="landing" />
-    <DevelopmentSection ref="development" />
-    <FaqSection ref="faq" />
-    <CtaSection ref="cta1" />
-    <CtaSection2 ref="cta2" />
-    <NewFooter ref="footer" />
+    <LandingSection ref="iosLanding" />
+    <DevelopmentSection ref="iosDevelopment" />
+    <CtaSection ref="iosCta1" />
+    <SuccessStorySection ref="iosSuccessstory" />
+    <BlogSection ref="iosblog" />
+    <CtaSection2 ref="iosCta2" />
+    <FaqSection ref="iosFaq" />
+    <NewFooter ref="iosFooter" />
   </div>
 </template>
 
@@ -17,17 +19,23 @@ import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 import LandingSection from "@/components/ios-app-development/LandingSection.vue";
 import DevelopmentSection from "@/components/ios-app-development/DevelopmentSection.vue";
+const SuccessStorySection = defineAsyncComponent(() =>
+  import("@/components/ios-app-development/SuccessStory.vue"),
+);
+const BlogSection = defineAsyncComponent(() =>
+  import("@/components/ios-app-development/BlogSection.vue"),
+);
 const FaqSection = defineAsyncComponent(() =>
-  import("@/components/ios-app-development/FaqSection.vue")
+  import("@/components/ios-app-development/FaqSection.vue"),
 );
 const CtaSection = defineAsyncComponent(() =>
-  import("@/components/ios-app-development/CtaSection.vue")
+  import("@/components/ios-app-development/CtaSection.vue"),
 );
 const CtaSection2 = defineAsyncComponent(() =>
-  import("@/components/ios-app-development/CtaSection2.vue")
+  import("@/components/ios-app-development/CtaSection2.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 export default {
@@ -35,11 +43,13 @@ export default {
     return {
       event: "",
       events: {
-        landing: "view_ios_development_landing_section",
-        development: "view_ios_app_development_section",
-        faq: "view_ios_development_faq_section",
-        cta1: "view_cta_1_ios_app_development_section",
-        cta2: "view_cta_2_ios_app_development_section",
+        iosLanding: "view_ios_development_landing_section",
+        iosDevelopment: "view_ios_app_development_section",
+        iosSuccessstory: "view_ios_app_development_section",
+        iosFaq: "view_ios_development_faq_section",
+        iosCta1: "view_cta_1_ios_app_development_section",
+        iosblog: "view_ios_app_blog_section",
+        iosCta2: "view_cta_2_ios_app_development_section",
       },
     };
   },
@@ -59,6 +69,8 @@ export default {
     Header,
     LandingSection,
     DevelopmentSection,
+    SuccessStorySection,
+    BlogSection,
     FaqSection,
     CtaSection,
     CtaSection2,
diff --git a/nuxt-frontend/pages/jobs/[id].vue b/nuxt-frontend/pages/jobs/[id].vue
index d392e2bf4..cb1c65e0c 100644
--- a/nuxt-frontend/pages/jobs/[id].vue
+++ b/nuxt-frontend/pages/jobs/[id].vue
@@ -147,7 +147,7 @@ function setBulletsAndIconsInDescription() {
       let title = descriptionTitles[i].replace(/<(\/*).[^>]*>/g, "");
       job.value.description = job.value.description.replace(
         descriptionTitles[i],
-        '<h2><span class="bullet"></span><strong>' + title + "</strong></h2>"
+        '<h2><span class="bullet"></span><strong>' + title + "</strong></h2>",
       );
     }
   }
@@ -159,7 +159,7 @@ function setBulletsAndIconsInDescription() {
       let list = descriptionLists[i].replace(/<(\/*).[^>]*>/g, "");
       job.value.description = job.value.description.replace(
         descriptionLists[i],
-        '<li><span class="chevron right tw-pr-2 "></span>' + list + "</li>"
+        '<li><span class="chevron right tw-pr-2 "></span>' + list + "</li>",
       );
     }
   }
@@ -250,7 +250,7 @@ function getDescriptionForGoogleSchema() {
     if (i == descContent.length - 1) {
       descContent[i] = element.replace(
         element,
-        "<ul><li>" + element + "</li></ul>"
+        "<ul><li>" + element + "</li></ul>",
       );
     }
   });
diff --git a/nuxt-frontend/pages/jobs/apply/[id].vue b/nuxt-frontend/pages/jobs/apply/[id].vue
index 29a557781..6f23b7806 100644
--- a/nuxt-frontend/pages/jobs/apply/[id].vue
+++ b/nuxt-frontend/pages/jobs/apply/[id].vue
@@ -393,7 +393,7 @@ onMounted(() => {
   recaptchaScript.setAttribute(
     "src",
     "https://www.google.com/recaptcha/enterprise.js?render=" +
-      import.meta.env.VITE_RECAPTCHA_SITE_KEY
+      import.meta.env.VITE_RECAPTCHA_SITE_KEY,
   );
   recaptchaScript.setAttribute("async", "true");
   recaptchaScript.setAttribute("defer", "true");
@@ -510,7 +510,7 @@ function submitApplication() {
         ? reference.value + " - " + referenceBy.value
         : reference.value && reference.value != ""
         ? reference.value
-        : "NA"
+        : "NA",
     );
 
     formData.append("file", file.value, fileName);
@@ -519,7 +519,7 @@ function submitApplication() {
       "message",
       message.value
         ? message.value.replace(/\n/g, "<br>\n").replace(/\./g, ".\n")
-        : "NA"
+        : "NA",
     );
     formData.append("save_record_to_spreadsheet", config.IS_PROD);
     formData.append("save_data_to_database", config.IS_PROD);
@@ -544,7 +544,7 @@ function submitApplication() {
 
               localStorage.setItem(
                 "applicant-name",
-                JSON.stringify(fullName.value)
+                JSON.stringify(fullName.value),
               );
               fullName.value = "";
               email.value = "";
diff --git a/nuxt-frontend/pages/jobs/index.vue b/nuxt-frontend/pages/jobs/index.vue
index 7592dfa97..1d0ee1142 100644
--- a/nuxt-frontend/pages/jobs/index.vue
+++ b/nuxt-frontend/pages/jobs/index.vue
@@ -29,28 +29,28 @@ import config from "@/config.js";
 import { elementInViewPort, handleAnimationOnScroll } from "@/utils.js";
 
 const VirtuesView = defineAsyncComponent(() =>
-  import("@/components/jobs/VirtuesView.vue")
+  import("@/components/jobs/VirtuesView.vue"),
 );
 const LifeAtCanopas = defineAsyncComponent(() =>
-  import("@/components/jobs/LifeAtCanopas.vue")
+  import("@/components/jobs/LifeAtCanopas.vue"),
 );
 const Career = defineAsyncComponent(() =>
-  import("@/components/jobs/CareerView.vue")
+  import("@/components/jobs/CareerView.vue"),
 );
 const PerksAndBenefits = defineAsyncComponent(() =>
-  import("@/components/jobs/PerksAndBenefits.vue")
+  import("@/components/jobs/PerksAndBenefits.vue"),
 );
 const WhyCanopas = defineAsyncComponent(() =>
-  import("@/components/jobs/WhyCanopas.vue")
+  import("@/components/jobs/WhyCanopas.vue"),
 );
 const WhyCanopasMobile = defineAsyncComponent(() =>
-  import("@/components/jobs/WhyCanopasMobile.vue")
+  import("@/components/jobs/WhyCanopasMobile.vue"),
 );
 const FaqSection = defineAsyncComponent(() =>
-  import("@/components/jobs/FaqSection.vue")
+  import("@/components/jobs/FaqSection.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 const { $mixpanel } = useNuxtApp();
diff --git a/nuxt-frontend/pages/jobs/thank-you/index.vue b/nuxt-frontend/pages/jobs/thank-you/index.vue
index 216a40020..37352f86c 100644
--- a/nuxt-frontend/pages/jobs/thank-you/index.vue
+++ b/nuxt-frontend/pages/jobs/thank-you/index.vue
@@ -18,19 +18,19 @@ import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 
 const VirtueView = defineAsyncComponent(() =>
-  import("@/components/jobs/VirtuesView.vue")
+  import("@/components/jobs/VirtuesView.vue"),
 );
 const LifeAtCanopasVue = defineAsyncComponent(() =>
-  import("@/components/jobs/PerksAndBenefits.vue")
+  import("@/components/jobs/PerksAndBenefits.vue"),
 );
 const LatestBlog = defineAsyncComponent(() =>
-  import("@/components/jobs/thank-you/LatestBlog.vue")
+  import("@/components/jobs/thank-you/LatestBlog.vue"),
 );
 const ContributionSection = defineAsyncComponent(() =>
-  import("@/components/jobs/thank-you/ContributionSection.vue")
+  import("@/components/jobs/thank-you/ContributionSection.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 import config from "@/config.js";
diff --git a/nuxt-frontend/pages/mobile-app-development.vue b/nuxt-frontend/pages/mobile-app-development.vue
index b27e118ba..1c33de868 100755
--- a/nuxt-frontend/pages/mobile-app-development.vue
+++ b/nuxt-frontend/pages/mobile-app-development.vue
@@ -27,23 +27,23 @@ import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 
 const Portfolio = defineAsyncComponent(() =>
-  import("@/components/mobile-app-development/Portfolio.vue")
+  import("@/components/mobile-app-development/Portfolio.vue"),
 );
 const CTASection = defineAsyncComponent(() =>
-  import("@/components/mobile-app-development/CTASection.vue")
+  import("@/components/mobile-app-development/CTASection.vue"),
 );
 const DevelopmentProcess = defineAsyncComponent(() =>
-  import("@/components/mobile-app-development/DevelopmentProcess.vue")
+  import("@/components/mobile-app-development/DevelopmentProcess.vue"),
 );
 
 const ClientReview = defineAsyncComponent(() =>
-  import("@/components/mobile-app-development/ClientReview.vue")
+  import("@/components/mobile-app-development/ClientReview.vue"),
 );
 const CTASection2 = defineAsyncComponent(() =>
-  import("@/components/mobile-app-development/CTASection2.vue")
+  import("@/components/mobile-app-development/CTASection2.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 export default {
diff --git a/nuxt-frontend/pages/portfolio/[id].vue b/nuxt-frontend/pages/portfolio/[id].vue
index 9b7bafbdf..8c705f14a 100644
--- a/nuxt-frontend/pages/portfolio/[id].vue
+++ b/nuxt-frontend/pages/portfolio/[id].vue
@@ -37,7 +37,7 @@ import config from "@/config.js";
 
 import { useRoute } from "vue-router";
 
-const {$mixpanel} = useNuxtApp()
+const { $mixpanel } = useNuxtApp();
 
 const route = useRoute();
 const id = route.params.id;
@@ -124,7 +124,7 @@ watch(
   (currentValue, oldValue) => {
     getData(currentValue);
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 </script>
 
diff --git a/nuxt-frontend/pages/portfolio/index.vue b/nuxt-frontend/pages/portfolio/index.vue
index 741865080..edca14830 100644
--- a/nuxt-frontend/pages/portfolio/index.vue
+++ b/nuxt-frontend/pages/portfolio/index.vue
@@ -19,13 +19,13 @@ import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 
 const UserReview = defineAsyncComponent(() =>
-  import("@/components/home-new/UserReview.vue")
+  import("@/components/home-new/UserReview.vue"),
 );
 const CTASection = defineAsyncComponent(() =>
-  import("@/components/home-new/CTASection.vue")
+  import("@/components/home-new/CTASection.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 export default {
diff --git a/nuxt-frontend/pages/services.vue b/nuxt-frontend/pages/services.vue
index 839a72440..9f5fd36b4 100644
--- a/nuxt-frontend/pages/services.vue
+++ b/nuxt-frontend/pages/services.vue
@@ -31,31 +31,31 @@ import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 
 const SuccessStories = defineAsyncComponent(() =>
-  import("@/components/services/SuccessStories.vue")
+  import("@/components/services/SuccessStories.vue"),
 );
 const BlogSection = defineAsyncComponent(() =>
-  import("@/components/home-new/BlogSection.vue")
+  import("@/components/home-new/BlogSection.vue"),
 );
 const CTASection = defineAsyncComponent(() =>
-  import("@/components/home-new/PortfolioPageCTASection.vue")
+  import("@/components/home-new/PortfolioPageCTASection.vue"),
 );
 const ContributionSection = defineAsyncComponent(() =>
-  import("@/components/home-new/ContributionSection.vue")
+  import("@/components/home-new/ContributionSection.vue"),
 );
 const ContributionSectionMobile = defineAsyncComponent(() =>
-  import("@/components/home-new/ContributionSectionMobile.vue")
+  import("@/components/home-new/ContributionSectionMobile.vue"),
 );
 const ClientReviewSection = defineAsyncComponent(() =>
-  import("@/components/home-new/ClientReviewSection.vue")
+  import("@/components/home-new/ClientReviewSection.vue"),
 );
 const CTASection2 = defineAsyncComponent(() =>
-  import("@/components/services/CTASection.vue")
+  import("@/components/services/CTASection.vue"),
 );
 const TechnologyStack = defineAsyncComponent(() =>
-  import("@/components/services/TechnologyStack.vue")
+  import("@/components/services/TechnologyStack.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 export default {
diff --git a/nuxt-frontend/pages/thank-you.vue b/nuxt-frontend/pages/thank-you.vue
index 048695831..3c648e540 100644
--- a/nuxt-frontend/pages/thank-you.vue
+++ b/nuxt-frontend/pages/thank-you.vue
@@ -21,14 +21,14 @@ import Header from "@/components/partials/NewHeader.vue";
 import LandingSection from "@/components/contact/thank-you/LandingSection.vue";
 import BenefitSection from "@/components/contact/thank-you/BenefitSection.vue";
 const HappyClientSection = defineAsyncComponent(() =>
-  import("@/components/contact/thank-you/HappyClient.vue")
+  import("@/components/contact/thank-you/HappyClient.vue"),
 );
 
 const ScheduleMeeting = defineAsyncComponent(() =>
-  import("@/components/contact/thank-you/ScheduleMeeting.vue")
+  import("@/components/contact/thank-you/ScheduleMeeting.vue"),
 );
 const NewFooter = defineAsyncComponent(() =>
-  import("@/components/partials/NewFooter.vue")
+  import("@/components/partials/NewFooter.vue"),
 );
 
 export default {
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index c1f95d07b..0fdfe9172 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -69,6 +69,7 @@ module.exports = {
         "inter-medium": ["Inter-Medium"],
         "inter-semibold": ["Inter-SemiBold"],
         "inter-regular": ["Inter-Regular"],
+        "opensans-bold": ["Opensans-Bold"],
       },
       letterSpacing: {
         "extra-wider": "0.0625em",
@@ -225,7 +226,7 @@ module.exports = {
             120: "120deg",
             135: "135deg",
           }),
-        }
+        },
       );
     }),
     function ({ addComponents }) {
diff --git a/nuxt-frontend/utils.js b/nuxt-frontend/utils.js
index 2c08877b1..c522b7001 100644
--- a/nuxt-frontend/utils.js
+++ b/nuxt-frontend/utils.js
@@ -34,7 +34,7 @@ function setGithubStars(contributions, githubRepos) {
       .filter(
         (repo) =>
           repo.name ==
-          contribution.link.slice(contribution.link.lastIndexOf("/") + 1)
+          contribution.link.slice(contribution.link.lastIndexOf("/") + 1),
       )
       .map((repo) => repo.stargazers_count.toString())[0];
   });
@@ -77,7 +77,7 @@ function getJobDates() {
     currentDay <= maxDays
       ? startDateOfMonth
       : new Date(
-          startDateOfMonth.setDate(startDateOfMonth.getDate() + maxDays)
+          startDateOfMonth.setDate(startDateOfMonth.getDate() + maxDays),
         );
 
   const datePosted = jobPosted.toISOString().split("T")[0];
diff --git a/utils/test.go b/utils/test.go
index 4d8656f32..aff9096bf 100644
--- a/utils/test.go
+++ b/utils/test.go
@@ -75,7 +75,7 @@ func TestDB() (*sqlx.DB, error) {
 
 func CreateTables(db *sqlx.DB) error {
 
-	jobs := "CREATE TABLE IF NOT EXISTS `jobs` (`id` int(10) unsigned NOT NULL AUTO_INCREMENT,`title` varchar(255) NULL DEFAULT NULL,`summary` varchar(500) NULL DEFAULT NULL,`description` text NULL DEFAULT NULL,`button_name` varchar(225) NULL DEFAULT NULL,`qualification` varchar(225) NULL DEFAULT NULL,`employment_type` varchar(225) NULL DEFAULT NULL,`base_salary` int(11) NULL DEFAULT NULL,`experience` varchar(225) NULL DEFAULT NULL,`is_active` tinyint(1) NULL DEFAULT 0,`skills` text NULL DEFAULT NULL,`total_openings` int(11) NULL DEFAULT 1,`responsibilities` text NULL DEFAULT NULL, `icon_name` varchar(255) NULL DEFAULT NULL , `unique_id` varchar(255) NULL DEFAULT NULL, `seo_title` varchar(255) NULL DEFAULT NULL, `seo_description` text NULL DEFAULT NULL, `apply_seo_title` varchar(255) NULL DEFAULT NULL, `apply_seo_description` text NULL DEFAULT NULL, `index` int(10) NULL DEFAULT 0, `created_at` timestamp NULL DEFAULT NULL,`updated_at` timestamp NULL DEFAULT NULL, PRIMARY KEY (`id`))"
+	jobs := "CREATE TABLE IF NOT EXISTS `jobs` (`id` int(10) unsigned NOT NULL AUTO_INCREMENT,`title` varchar(255) NULL DEFAULT NULL,`summary` varchar(500) NULL DEFAULT NULL,`description` text NULL DEFAULT NULL,`button_name` varchar(225) NULL DEFAULT NULL,`qualification` varchar(225) NULL DEFAULT NULL,`employment_type` varchar(225) NULL DEFAULT NULL,`base_salary` int(11) NULL DEFAULT NULL,`experience` varchar(225) NULL DEFAULT NULL,`is_active` tinyint(1) NULL DEFAULT 0,`skills` text NULL DEFAULT NULL,`total_openings` int(11) NULL DEFAULT 1,`responsibilities` text NULL DEFAULT NULL, `icon_name` int NULL DEFAULT NULL , `unique_id` varchar(255) NULL DEFAULT NULL, `seo_title` varchar(255) NULL DEFAULT NULL, `seo_description` text NULL DEFAULT NULL, `apply_seo_title` varchar(255) NULL DEFAULT NULL, `apply_seo_description` text NULL DEFAULT NULL, `index` int(10) NULL DEFAULT 0, `created_at` timestamp NULL DEFAULT NULL,`updated_at` timestamp NULL DEFAULT NULL, PRIMARY KEY (`id`))"
 
 	_, err := db.Exec(jobs)
 
@@ -97,6 +97,14 @@ func CreateTables(db *sqlx.DB) error {
 		return err
 	}
 
+	jobsIcons := "CREATE TABLE `job_icons` (`id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) DEFAULT NULL, `value` varchar(255) DEFAULT NULL, `createdAt` datetime DEFAULT NULL, `updatedAt` datetime DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1"
+
+	_, err = db.Exec(jobsIcons)
+
+	if err != nil {
+		return err
+	}
+
 	return nil
 }
 
@@ -106,14 +114,16 @@ func TruncateTables(db *sqlx.DB) {
 	db.MustExec("TRUNCATE TABLE jobs")
 	db.MustExec("TRUNCATE TABLE job_applications")
 	db.MustExec("TRUNCATE TABLE job_applicant_statuses")
+	db.MustExec("TRUNCATE TABLE job_icons")
 
 	db.MustExec("SET FOREIGN_KEY_CHECKS = 1") // Enable foreign key checks
 }
 
 func PrepareTablesData(db *sqlx.DB) {
-	db.MustExec("INSERT INTO jobs(`id`, `title`, `summary`, `description`, `button_name`,`qualification`, `employment_type`, `base_salary`, `experience`, `is_active`, `skills`, `total_openings`, `responsibilities`, `icon_name`, `unique_id`, `seo_title`, `seo_description`, `apply_seo_title`, `apply_seo_description`, `created_at`, `updated_at`) VALUES(1, 'IOS Developer', 'We have an opening for a passionate iOS developer who can develop and maintain applications for iOS devices. As an iOS developer you will be a part of a highly agile team tasked with developing new features. If you love to tackle new challenges, we would love to meet you!', '<p><span style=\"color:#16a085;\"><span style=\"font-family:Arial,Helvetica,sans-serif;\">&nbsp;Develop mobile applications (iOS: Swift)</span></span></p>\r\n', 'Apply', 'B.E/B.Tech/BCA/MCA/MSc IT degree in Computer Science, Engineering, or a related subject ', 'full_time', 15000 , '0-3 years', true, '', 1, '','fab fa-apple', 'ios-developer-a9b45f34-a1a5-419f-b536-b7c290925d6d', 'iOS developer jobs in surat at Canopas, Mobile developer jobs', 'Find iOS developer job in surat. If we hire you as an iOS developer, you will be responsible for designing and coding the base application, ensuring the quality, fixing bugs, maintaining the code, and implementing app updates.', 'Apply for iOS developer job in surat or mobile developer jobs in surat at canopas software', 'Apply for iOS developer job at Canopas and be part of a dynamic and versatile iOS app development team.',  UTC_TIMESTAMP(), UTC_TIMESTAMP())")
+	db.MustExec("INSERT INTO jobs(`id`, `title`, `summary`, `description`, `button_name`,`qualification`, `employment_type`, `base_salary`, `experience`, `is_active`, `skills`, `total_openings`, `responsibilities`, `icon_name`, `unique_id`, `seo_title`, `seo_description`, `apply_seo_title`, `apply_seo_description`, `created_at`, `updated_at`) VALUES(1, 'IOS Developer', 'We have an opening for a passionate iOS developer who can develop and maintain applications for iOS devices. As an iOS developer you will be a part of a highly agile team tasked with developing new features. If you love to tackle new challenges, we would love to meet you!', '<p><span style=\"color:#16a085;\"><span style=\"font-family:Arial,Helvetica,sans-serif;\">&nbsp;Develop mobile applications (iOS: Swift)</span></span></p>\r\n', 'Apply', 'B.E/B.Tech/BCA/MCA/MSc IT degree in Computer Science, Engineering, or a related subject ', 'full_time', 15000 , '0-3 years', true, '', 1, '',1, 'ios-developer-a9b45f34-a1a5-419f-b536-b7c290925d6d', 'iOS developer jobs in surat at Canopas, Mobile developer jobs', 'Find iOS developer job in surat. If we hire you as an iOS developer, you will be responsible for designing and coding the base application, ensuring the quality, fixing bugs, maintaining the code, and implementing app updates.', 'Apply for iOS developer job in surat or mobile developer jobs in surat at canopas software', 'Apply for iOS developer job at Canopas and be part of a dynamic and versatile iOS app development team.',  UTC_TIMESTAMP(), UTC_TIMESTAMP())")
 	db.MustExec("INSERT INTO job_applications(`id`, `name`, `email`, `phone`, `place`,`reference`, `resumeURL`, `position`, `message`, `status`, `created_at`, `updated_at`) VALUES(1, 'New Web Developer', 'developer@gmail.com', '1234567890', 'surat', 'From canopas', '', 'Web Developer from testing', 'I m a very good programer', '1',UTC_TIMESTAMP(), UTC_TIMESTAMP())")
 	db.MustExec("INSERT INTO job_applicant_statuses(`id`, `applicant_id`, `status`, `index`, `rejection_with_mail`, `created_at`, `updated_at`) VALUES(1, 1, 1, 0, 0, UTC_TIMESTAMP(), UTC_TIMESTAMP())")
+	db.MustExec("INSERT INTO `job_icons` (`id`,`name`,`value`,`createdAt`,`updatedAt`) VALUES ('1','iOS','fab fa-apple',UTC_TIMESTAMP(), UTC_TIMESTAMP())")
 }
 
 func PrepareTextFileFormData() (string, *bytes.Buffer) {