diff --git a/nuxt-frontend/components/jobs/VirtuesView.vue b/nuxt-frontend/components/jobs/VirtuesView.vue
index c771ed31d..5878ba04c 100644
--- a/nuxt-frontend/components/jobs/VirtuesView.vue
+++ b/nuxt-frontend/components/jobs/VirtuesView.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="from-[#ffad9326] to-[#f2709c26] bg-gradient-247 px-0 overflow-hidden text-center rounded-tr-none rounded-bl-none rounded-tl-[100px] rounded-br-[100px] sm:rounded-tl-[150px] sm:rounded-br-[150px] md:rounded-tl-[200px] md:rounded-br-[200px] lg:rounded-tl-[300px] lg:rounded-br-[300px]"
+    class="from-[#ffad9326] to-[#f2709c26] bg-gradient-247 px-0 py-[100px] overflow-hidden text-center rounded-tr-none rounded-bl-none rounded-tl-[100px] rounded-br-[100px] sm:rounded-tl-[150px] sm:rounded-br-[150px] md:rounded-tl-[200px] md:rounded-br-[200px] lg:rounded-tl-[300px] lg:rounded-br-[300px]"
   >
-    <div class="pt-10 mobile-header-3-semibold lg:desk-header-3 text-black-87">
+    <div class="normal-text text-black-900 font-bold">
       Canopas is built on the 10 virtues
     </div>
-    <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="text-center container mt-20 sm:p-0">
+      <div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
         <div
           class="relative flex-[100%] md:flex-[33%]"
           v-for="virtue in virtues.slice(0, 3)"
@@ -15,10 +15,10 @@
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0 "
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 md:my-[10%]"
           >
             <div
-              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%]"
+              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -27,7 +27,7 @@
               />
             </div>
             <div
-              class="w-[69%]  sub-h1-semibold secondary-color"
+              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
             >
               {{ virtue.title }}
             </div>
@@ -37,31 +37,31 @@
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="secondary-color mobile-header-3-medium "
+              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
             >
               {{ virtue.title }}
             </div>
             <div
-              class="sub-h1-regular text-black-60 mt-4"
+              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%] gap-10">
+      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%]">
         <div
-          class="relative flex-[100%] md: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 mx-auto py-0 px-[10%] sm:px-0"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 md:my-[10%]"
           >
             <div
-              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%]"
+              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -71,7 +71,7 @@
               />
             </div>
             <div
-              class="w-[69%] sub-h1-semibold secondary-color"
+              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
             >
               {{ virtue.title }}
             </div>
@@ -81,19 +81,19 @@
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="secondary-color mobile-header-3-medium "
+              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
             >
               {{ virtue.title }}
             </div>
             <div
-              class="sub-h1-regular text-black-60 mt-4"
+              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto lg:w-[85%] gap-10">
+      <div class="flex-div flex flex-wrap m-auto lg:w-[85%]">
         <div
           class="relative flex-[100%] md:flex-[33%]"
           v-for="virtue in virtues.slice(5, 8)"
@@ -102,10 +102,10 @@
           @hover.native="$mixpanel.track('hover_virtue')"
         >
           <div
-            class="flex flex-col items-center mx-auto py-0 px-[10%] sm:px-0 "
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 md:my-[10%]"
           >
             <div
-              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%]"
+              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -115,7 +115,7 @@
               />
             </div>
             <div
-              class="w-[69%]  sub-h1-semibold secondary-color"
+              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
             >
               {{ virtue.title }}
             </div>
@@ -125,31 +125,31 @@
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="secondary-color mobile-header-3-medium "
+              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
             >
               {{ virtue.title }}
             </div>
             <div
-              class="sub-h1-regular text-black-60 mt-4"
+              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
             >
               {{ virtue.description }}
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%] gap-10">
+      <div class="flex-div flex flex-wrap m-auto md:w-[70%] lg:w-[60%]">
         <div
-          class="relative flex-[100%] md: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 mx-auto py-0 px-[10%] sm:px-0"
+            class="flex flex-col items-center my-[5%] mx-auto py-0 px-[10%] sm:my-[2%] sm:px-0 md:my-[10%]"
           >
             <div
-              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%]"
+              class="image rounded-[50%] bg-white relative h-0 w-1/2 pb-[50%] mb-[5%] sm:w-[30%] sm:pb-[30%] md:w-1/2 md:pb-[50%]"
             >
               <img
                 class="absolute w-[95%] h-[95%] left-0"
@@ -159,7 +159,7 @@
               />
             </div>
             <div
-              class="w-[69%] sub-h1-semibold secondary-color"
+              class="w-3/5 mb-[5%] text-[#e8505b] normal-text lg:text-[1.3125rem] lg:leading-[1.5918rem]"
             >
               {{ virtue.title }}
             </div>
@@ -169,12 +169,12 @@
             :class="activeIndex == virtue.id ? 'opacity-100' : ''"
           >
             <div
-              class="secondary-color mobile-header-3-medium "
+              class="text-[#e8505b] mb-[3%] w-full normal-text md:mb-0 lg:text-[1.3125rem] lg:leading-[1.5918rem] 2xl:mb-[2%]"
             >
               {{ virtue.title }}
             </div>
             <div
-              class="sub-h1-regular text-black-60 mt-4"
+              class="normal-2-text mt-2.5 mb-[3%] w-full md:mb-0 2xl:mb-[2%]"
             >
               {{ virtue.description }}
             </div>
@@ -276,4 +276,4 @@ export default {
   },
   inject: ["mixpanel"],
 };
-</script>
+</script>
\ No newline at end of file