diff --git a/nuxt-frontend/components/home-new/HomeIndex.vue b/nuxt-frontend/components/home-new/HomeIndex.vue
index 8010cec9f..0524a4b99 100644
--- a/nuxt-frontend/components/home-new/HomeIndex.vue
+++ b/nuxt-frontend/components/home-new/HomeIndex.vue
@@ -19,7 +19,7 @@
     />
     <CTASection ref="cta" class="pt-10 bg-[#121212]" />
     <NewFooter
-      class="bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"
+      class="bg-gradient-to-b from-pink-0 to-pink-16"
     />
   </div>
 </template>
diff --git a/nuxt-frontend/components/jobs/VirtuesView.vue b/nuxt-frontend/components/jobs/VirtuesView.vue
index 4d4103a0d..c771ed31d 100644
--- a/nuxt-frontend/components/jobs/VirtuesView.vue
+++ b/nuxt-frontend/components/jobs/VirtuesView.vue
@@ -5,20 +5,20 @@
     <div class="pt-10 mobile-header-3-semibold lg:desk-header-3 text-black-87">
       Canopas is built on the 10 virtues
     </div>
-    <div class="text-center container mt-8 mb-14 sm:p-0">
-      <div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
+    <div class="text-center container mt-8 sm:p-0">
+      <div class="flex-div flex flex-wrap m-auto lg:w-[85%] gap-10">
         <div
-          class="relative flex-[100%] lg:flex-[33%]"
+          class="relative flex-[100%] md:flex-[33%]"
           v-for="virtue in virtues.slice(0, 3)"
           :key="virtue.id"
           @touchstart.passive="activeIndex = virtue.id"
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
+            class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0 "
           >
             <div
-              class="image rounded-[50%] 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="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-3 sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -27,42 +27,41 @@
               />
             </div>
             <div
-              class="w-3/5  sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
+              class="w-[69%]  sub-h1-semibold secondary-color"
             >
               {{ virtue.title }}
             </div>
           </div>
           <div
-            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-xl flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
+            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="w-full secondary-color mobile-header-3-medium "
+              class="secondary-color mobile-header-3-medium "
             >
               {{ 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-h1-regular text-black-60 mt-4"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto lg:w-[60%]">
+      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%] gap-10">
         <div
-          class="relative flex-[100%] lg:flex-[33%] "
+          class="relative flex-[100%] md:flex-[33%] "
           v-for="virtue in virtues.slice(3, 5)"
           :key="virtue.id"
           @touchstart.passive="activeIndex = virtue.id"
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
+            class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0"
           >
             <div
-              class="image rounded-[50%] 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="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-3 sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -72,41 +71,41 @@
               />
             </div>
             <div
-              class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
+              class="w-[69%] sub-h1-semibold secondary-color"
             >
               {{ virtue.title }}
             </div>
           </div>
           <div
-            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
+            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="w-full secondary-color mobile-header-3-medium "
+              class="secondary-color mobile-header-3-medium "
             >
               {{ 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-h1-regular text-black-60 mt-4"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
+      <div class="flex-div flex flex-wrap m-auto lg:w-[85%] gap-10">
         <div
-          class="relative flex-[100%] lg:flex-[33%]"
+          class="relative flex-[100%] md:flex-[33%]"
           v-for="virtue in virtues.slice(5, 8)"
           :key="virtue.id"
           @touchstart.passive="activeIndex = virtue.id"
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
+            class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0 "
           >
             <div
-              class="image rounded-[50%] 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="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-3 sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -116,41 +115,41 @@
               />
             </div>
             <div
-              class="w-3/5  sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
+              class="w-[69%]  sub-h1-semibold secondary-color"
             >
               {{ virtue.title }}
             </div>
           </div>
           <div
-            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
+            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="w-full secondary-color mobile-header-3-medium "
+              class="secondary-color mobile-header-3-medium "
             >
               {{ 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-h1-regular text-black-60 mt-4"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto lg:w-[60%]">
+      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%] gap-10">
         <div
-          class="relative flex-[100%] lg:flex-[33%] "
+          class="relative flex-[100%] md:flex-[33%] "
           v-for="virtue in virtues.slice(8, 10)"
           :key="virtue.id"
           @touchstart.passive="activeIndex = virtue.id"
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 lg:my-[10%]"
+            class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0"
           >
             <div
-              class="image rounded-[50%] 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="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-3 sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -160,22 +159,22 @@
               />
             </div>
             <div
-              class="w-3/5 sub-h1-semibold secondary-color lg:mobile-header-3-medium lg:text-black-87"
+              class="w-[69%] sub-h1-semibold secondary-color"
             >
               {{ virtue.title }}
             </div>
           </div>
           <div
-            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-[60%] lg:w-[90%] 2xl:p-[3%]"
+            class="hover:opacity-100 absolute translate-x-[-50%] transition duration-[0.4s] ease-in-out h-auto w-[290px] left-[50%] top-0 bottom-0 opacity-0 bg-white p-[2%] m-auto rounded-[15px] flex flex-col justify-center sm:w-1/2 md:w-[90%] 2xl:p-[3%]"
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="w-full secondary-color mobile-header-3-medium "
+              class="secondary-color mobile-header-3-medium "
             >
               {{ virtue.title }}
             </div>
             <div
-              class="sub-h3-regular  lg:sub-h1-regular text-black-60 mt-4 mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
+              class="sub-h1-regular text-black-60 mt-4"
             >
               {{ virtue.description }}
             </div>
diff --git a/nuxt-frontend/pages/flutter-app-development.vue b/nuxt-frontend/pages/flutter-app-development.vue
index be0ffd1e5..dedeea934 100644
--- a/nuxt-frontend/pages/flutter-app-development.vue
+++ b/nuxt-frontend/pages/flutter-app-development.vue
@@ -10,7 +10,7 @@
     <CtaSection2 />
     <FaqSection />
     <NewFooter
-      class="-mt-4 md:mt-auto bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"
+      class="-mt-4 md:mt-auto bg-gradient-to-b from-pink-0 to-pink-16"
       ref="flutterFooter"
     />
   </div>
diff --git a/nuxt-frontend/pages/mobile-app-development.vue b/nuxt-frontend/pages/mobile-app-development.vue
index 1b9f78c81..030e36e71 100755
--- a/nuxt-frontend/pages/mobile-app-development.vue
+++ b/nuxt-frontend/pages/mobile-app-development.vue
@@ -15,7 +15,7 @@
       </div>
     </div>
     <NewFooter
-      class="bg-gradient-to-b from-[#F2709C]/[0] to-[#F2709C]/[0.16]"
+      class="bg-gradient-to-b from-pink-0 to-pink-16"
     />
   </div>
 </template>
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index 05f7040b8..75b0c9d7e 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -38,16 +38,18 @@ module.exports = {
           60: "#00000099",
         },
         white: "#ffffff",
-        'white-core': {
+        "white-core": {
           80: "#FFFFFFCC",
           60: "#FFFFFF99",
-          90: "#FFFFFF14"
+          90: "#FFFFFF14",
         },
         pink: {
+          0: "rgba(242, 112, 156, 0)",
           300: "#f2709c",
           40: "rgba(242, 112, 156, .04)",
           80: "rgba(242, 112, 156, .08)",
-          90: "rgba(242, 112, 156, .8)"
+          90: "rgba(242, 112, 156, .8)",
+          16: "rgba(242, 112, 156, .16)",
         },
         orange: {
           300: "#ff835b",