diff --git a/nuxt-frontend/components/home-new/ContributionSection.vue b/nuxt-frontend/components/home-new/ContributionSection.vue
index ff752c11f..a627a2737 100644
--- a/nuxt-frontend/components/home-new/ContributionSection.vue
+++ b/nuxt-frontend/components/home-new/ContributionSection.vue
@@ -16,7 +16,7 @@
       >
     </div>
     <div
-      class="flex flex-col border mt-2 lg:mt-0"
+      class="flex flex-col border mt-2 lg:mt-0 p-4 lg:p-6"
       v-for="(contribution, index) in contributions"
       :key="index"
     >
@@ -24,82 +24,79 @@
         :to="contribution.link"
         target="_blank"
         @click.native="$mixpanel.track('tap_home_github_contribution_section')"
-        class="flex-col p-4 lg:p-6"
+        class="flex-col"
       >
-        <div class="mobile-header-3-semibold lg:desk-header-3 text-black-87">
+        <span
+          class="mobile-header-3-semibold lg:desk-header-3 text-black-87 bg-black-underline-out box-decoration-clone bg-no-repeat pb-[5px] bg-[length:100%] hover:animate-mulitpleUnderlineOut"
+        >
           {{ contribution.title }}
-        </div>
+        </span></nuxt-link
+      >
+      <div class="mt-4 sub-h3-regular lg:mobile-header-2-regular text-black-60">
+        {{ contribution.description }}
+      </div>
+      <div class="mt-6" v-if="width > 991">
         <div
-          class="mt-2 sub-h3-regular lg:mobile-header-2-regular text-black-60"
+          class="mt-1 inline-flex pr-1"
+          v-for="(tag, index) in contribution.tags"
+          :key="index"
         >
-          {{ contribution.description }}
+          <div
+            class="bg-white-smoke rounded-[1.875rem] py-1 px-4 lg:sub-h1-regular text-black-4"
+            v-html="tag"
+          ></div>
         </div>
-        <div class="mt-6" v-if="width > 991">
+      </div>
+      <swiper
+        v-else
+        :slidesPerView="2"
+        :grid="{
+          rows: 2,
+          fill: 'row',
+        }"
+        :modules="modules"
+        :breakpoints="{
+          '768': {
+            slidesPerView: 4,
+          },
+        }"
+        class="swiper-container mt-4 pl-0"
+      >
+        <swiper-slide
+          v-for="(tag, index) in contribution.tags"
+          :key="index"
+          class="cursor-pointer !mr-1 !w-auto pb-1"
+        >
           <div
-            class="mt-1 inline-flex pr-1"
-            v-for="(tag, index) in contribution.tags"
-            :key="index"
+            class="bg-white-smoke inline-flex rounded-[1.875rem] py-1 px-4 sub-h3-regular text-black-4 whitespace-nowrap"
+            v-html="tag"
+          ></div></swiper-slide
+      ></swiper>
+      <div class="flex gap-4 mt-4 lg:mt-6">
+        <div class="flex items-center">
+          <Icon
+            class="fab footer-icon h-[1.625rem] w-[1.625rem] pr-[0.313rem]"
+            name="fa6-solid:star"
+          />
+          <span
+            class="v2-canopas-gradient-text mt-0.5 sub-h3-semibold lg:mobile-header-3-semibold"
+            >{{ contribution.stars }}</span
           >
-            <div
-              class="bg-white-smoke rounded-[1.875rem] py-1 px-4 lg:sub-h1-regular text-black-4"
-              v-html="tag"
-            ></div>
-          </div>
         </div>
-        <swiper
-          v-else
-          :slidesPerView="2"
-          :grid="{
-            rows: 2,
-            fill: 'row',
-          }"
-          :modules="modules"
-          :breakpoints="{
-            '768': {
-              slidesPerView: 4,
-            },
-          }"
-          class="swiper-container mt-4 pl-0"
-        >
-          <swiper-slide
-            v-for="(tag, index) in contribution.tags"
-            :key="index"
-            class="cursor-pointer !mr-1 !w-auto pb-1"
+        <div class="flex items-center gap-0.5 text-black-87">
+          <span> <Icon class="fa h-5 w-5" name="fa6-solid:code-fork" /></span
+          ><span class="sub-h3-semibold lg:mobile-header-3-semibold">{{
+            contribution.forks
+          }}</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="h-4 w-4 rounded-full" :class="contribution.color"></span
+          ><span
+            class="sub-h3-semibold lg:mobile-header-3-semibold text-black-87"
+            >{{ contribution.language }}</span
           >
-            <div
-              class="bg-white-smoke inline-flex rounded-[1.875rem] py-1 px-4 sub-h3-regular text-black-4 whitespace-nowrap"
-              v-html="tag"
-            ></div></swiper-slide
-        ></swiper>
-        <div class="flex gap-4 mt-4 lg:mt-6">
-          <div class="flex items-center">
-            <Icon
-              class="fab footer-icon h-[1.625rem] w-[1.625rem] pr-[0.313rem]"
-              name="fa6-solid:star"
-            />
-            <span
-              class="v2-canopas-gradient-text mt-0.5 sub-h3-semibold lg:mobile-header-3-semibold"
-              >{{ contribution.stars }}</span
-            >
-          </div>
-          <div class="flex items-center gap-0.5 text-black-87">
-            <span> <Icon class="fa h-5 w-5" name="fa6-solid:code-fork" /></span
-            ><span class="sub-h3-semibold lg:mobile-header-3-semibold">{{
-              contribution.forks
-            }}</span>
-          </div>
-          <div class="flex items-center gap-2">
-            <span
-              class="h-4 w-4 rounded-full"
-              :class="contribution.color"
-            ></span
-            ><span
-              class="sub-h3-semibold lg:mobile-header-3-semibold text-black-87"
-              >{{ contribution.language }}</span
-            >
-          </div>
         </div>
-      </nuxt-link>
+      </div>
     </div>
   </section>
 </template>
diff --git a/nuxt-frontend/components/jobs/CareerView.vue b/nuxt-frontend/components/jobs/CareerView.vue
index 93df2acb2..2ae7d3b05 100644
--- a/nuxt-frontend/components/jobs/CareerView.vue
+++ b/nuxt-frontend/components/jobs/CareerView.vue
@@ -1,20 +1,22 @@
 <template>
-  <div class="container my-[14.063rem] mx-auto">
+  <div class="container mt-16 lg:my-60 mx-auto">
     <div class="text-center">
-      <p class="header-text canopas-gradient-text">
-        <span class="underline-text">Find t</span>he career of your dreams
-      </p>
-      <div class="my-[30px] mx-[2%] md:my-[50px] md:mx-20 normal-text">
-        <div class="font-bold">
-          When was the last time you did something for the first time?
-        </div>
-        <div class="mt-12">
-          At Canopas, we frequently do new things that help you leave your
-          comfort zone. And when you leave your comfort zone, you will know what
-          you are capable of and you will never be the same again. If you
-          believe your work should have meaning and want to make an impact in
-          the world with your work, come join us.
-        </div>
+      <div class="mobile-header-2 lg:desk-header-2 text-primary-1">
+        Find the career of your dreams
+      </div>
+      <div
+        class="mt-4 lg:mt-6 sub-h1-semibold lg:mobile-header-2-semibold text-black-60"
+      >
+        When was the last time you did something for the first time?
+      </div>
+      <div
+        class="mt-4 lg:mt-6 sub-h1-regular lg:mobile-header-2-regular text-black-60"
+      >
+        At Canopas, we frequently do new things that help you leave your comfort
+        zone. And when you leave your comfort zone, you will know what you are
+        capable of and you will never be the same again. If you believe your
+        work should have meaning and want to make an impact in the world with
+        your work, come join us.
       </div>
     </div>
 
@@ -23,7 +25,7 @@
     </div>
     <div
       v-else
-      class="rounded-[14px] border border-solid border-[#e2e2e2] overflow-hidden my-0 mx-[2%] mt-12 md:mx-[6%] normal-text"
+      class="rounded-2xl border overflow-hidden my-0 mx-[2%] mt-8 lg:mt-[4.5rem] md:mx-[6%]"
     >
       <div
         v-if="careers.length == 0"
@@ -38,20 +40,17 @@
           class="flex flex-col"
         >
           <div
-            class="flex flex-row w-full items-center p-[30px] cursor-pointer md:py-8 md:px-12 lg:py-10 lg:px-12 normal-text"
+            class="flex flex-row gap-4 items-center justify-center w-full items-center px-4 lg:px-10 py-6 lg:py-8 cursor-pointer"
             @click="expandListItem(career.id, index)"
           >
-            <div class="career-icon w-[50px] sm:w-[60px]">
-              <Icon
-                class="text-pink-300 icon text-[1.575rem] sm:text-[1.875rem]"
-                :name="career.icon_name"
-              />
-            </div>
-            <div class="not-italic font-bold text-black-900">
+            <Icon class="text-pink-300 icon w-6 h-6" :name="career.icon_name" />
+            <div
+              class="sub-h1-semibold lg:mobile-header-2-semibold text-black-87"
+            >
               {{ career.title }}
             </div>
             <Icon
-              class="career-plus-icon ml-auto order-2 text-[#3d3d3dcc]"
+              class="career-plus-icon ml-auto order-2 text-gray-40"
               :name="
                 openList && career.id == currentIndex
                   ? 'fa6-solid:minus'
@@ -75,34 +74,33 @@
               ]"
             >
               <div
-                class="p-[30px] text-[#3d3d3dcc] md:py-8 md:px-12 lg:py-10 lg:px-12 lg:leading-8"
+                class="sub-h3-regular lg:mobile-header-3-regular text-black-60 px-4 lg:px-10 pb-6 lg:pb-8"
               >
                 {{ career.summary }}
               </div>
 
               <div
-                class="flex flex-row justify-center pt-0 pr-0 pb-[30px] pl-0 sm:justify-end sm:pt-0 sm:pr-5 sm:pb-[30px] sm:pl-5"
+                class="flex flex-row justify-center pb-6 px-4 sm:justify-end sm:pt-0 sm:pr-5 sm:pb-[30px] sm:pl-5"
               >
                 <nuxt-link
                   @click.native="$mixpanel.track('tap_read_more_job')"
-                  class="flex items-center gradient-border-btn p-3"
+                  class="flex items-center gradient-border-btn primary-btn mx-0"
                   :to="'/jobs/' + career.unique_id"
                   :aria-label="'Get more details about ' + career.title"
                 >
                   <Icon
-                    class="fa text-pink-300 mr-[5px]"
+                    class="fa text-black-60 mr-[5px]"
                     name="fa6-solid:align-left"
                     flip="vertical"
                   />
-                  <span
-                    class="text-[.9rem] leading-[1.364rem] font-bold tracking-[0.06rem] md:text-[1rem] lg:text-[1.125rem]"
+                  <span class="sub-h3-semibold lg:sub-h1-semibold text-black-60"
                     >Read More</span
                   >
                 </nuxt-link>
 
                 <nuxt-link
                   @click.native="$mixpanel.track('tap_apply_job')"
-                  class="flex items-center m-[5px] gradient-btn p-3"
+                  class="flex items-center m-[5px] gradient-btn primary-btn"
                   :to="'/jobs/apply/' + career.unique_id"
                 >
                   <Icon
@@ -110,8 +108,7 @@
                     name="fa6-solid:circle-check"
                     aria-hidden="true"
                   />
-                  <span
-                    class="text-[.9rem] leading-[1.364rem] font-bold tracking-[0.06rem] md:text-[1rem] lg:text-[1.125rem]"
+                  <span class="sub-h3-semibold lg:sub-h1-semibold"
                     >Apply Now</span
                   >
                 </nuxt-link>
diff --git a/nuxt-frontend/components/jobs/FaqSection.vue b/nuxt-frontend/components/jobs/FaqSection.vue
index 0fc3f4cf6..980b093db 100644
--- a/nuxt-frontend/components/jobs/FaqSection.vue
+++ b/nuxt-frontend/components/jobs/FaqSection.vue
@@ -1,15 +1,12 @@
 <template>
-  <div class="container mb-40">
+  <div class="container mt-16 lg:mt-60 mb-40">
     <div
       class="row flex flex-col md:flex-row gap-4 my-0 mx-[2%] md:my-0 md:mx-[6%] md:-ml-8"
     >
       <div
-        class="text-center header-text canopas-gradient-text title-mobile block md:hidden mb-12"
+        class="text-center mobile-header-2 text-black-87 md:hidden mb-12"
       >
-        <span
-          class="underline-text underline-offset-[0.5rem] sm:underline-offset-[1rem]"
-          >Freq</span
-        >uently Asked Questions
+        Frequently Asked Questions
       </div>
       <div
         class="flex-[33%] image py-0 px-[20%] md:py-0 md:px-0 md:translate-y-60 lg:translate-y-80 xl:translate-y-40 animate__animated"
diff --git a/nuxt-frontend/components/jobs/LandingView.vue b/nuxt-frontend/components/jobs/LandingView.vue
index fef687571..5092ca33c 100644
--- a/nuxt-frontend/components/jobs/LandingView.vue
+++ b/nuxt-frontend/components/jobs/LandingView.vue
@@ -1,8 +1,8 @@
 <template>
-  <div
-    class="text-center container max-w-[687px] mt-[1.875rem] mb-[14.063rem] mx-auto py-0 px-5 sm:px-[6.25rem] lg:px-0"
-  >
-    <div class="header-2-text mt-12 animate__animated animate__fadeInDown">
+  <div class="text-center container mt-8 lg:mt-[7.5rem] mb-16 lg:mb-60 mx-auto">
+    <div
+      class="xl:w-[89%] 2xl:w-4/5 xl:mx-auto mobile-header-1 lg:desk-header-2 text-black-87 animate__animated animate__fadeInDown"
+    >
       <h1>
         Are you looking for a job where you can leverage your knowledge and
         experience to build digital products that will be used by millions of
@@ -10,17 +10,17 @@
       </h1>
     </div>
     <div
-      class="normal-text my-8 lg:my-12 animate__animated animate__fadeInLeft"
+      class="xl:w-[71%] 2xl:w-[65%] xl:mx-auto sub-h1-regular lg:mobile-header-2-regular text-black-60 mt-4 lg:mt-6 animate__animated animate__fadeInLeft"
     >
       You've come to the right place. We're looking for an AVENGER who can join
       our existing team of AVENGERS.
     </div>
     <button
-      class="gradient-btn rounded-[15px] sm:m-auto p-3 normal-text animate__animated animate__fadeInUp"
+      class="mt-6 lg:mt-10 gradient-btn primary-btn"
       @click="$emit('scroll-to-career')"
       @click.native="$mixpanel.track('tap_see_all_positions')"
     >
-      <span>SEE ALL POSITIONS</span>
+      <span class="sub-h3-semibold lg:sub-h1-semibold">SEE ALL POSITIONS</span>
     </button>
   </div>
 </template>
diff --git a/nuxt-frontend/components/jobs/LifeAtCanopas.vue b/nuxt-frontend/components/jobs/LifeAtCanopas.vue
index 39fe423de..88b6e7b1f 100755
--- a/nuxt-frontend/components/jobs/LifeAtCanopas.vue
+++ b/nuxt-frontend/components/jobs/LifeAtCanopas.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <div
-      class="container normal-text px-5 pt-[3.125rem] pb-[1.875rem] md:px-[3.125rem] md:pt-[6.25rem] md:pb-[3.125rem] lg:pt-[14.063rem] text-center"
-    >
-      <div class="header-text canopas-gradient-text">
-        <span class="underline-text">Life a</span>t Canopas
+    <div class="container mt-16 lg:mt-60 text-center">
+      <div class="mobile-header-2 lg:desk-header-2 text-primary-1">
+        Life at Canopas
       </div>
-      <div class="description mx-auto my-[30px] md:my-[50px]">
+      <div
+        class="xl:w-[90%] 2xl:w-[77%] xl:mx-auto sub-h1-regular lg:mobile-header-2-regular text-black-60 mt-4 lg:mt-6 mb-8 lg:mb-[4.5rem]"
+      >
         We wanted to create an environment that helps you get out of bed in the
         morning and an office that creates excellent work and encourages fun. As
         we play the infinite game, it is not about winning or losing, it's about
@@ -43,7 +43,7 @@
         <swiper-slide v-for="(slider, index) in slides" :key="index">
           <aspect-ratio
             height="66%"
-            class="mb-[80px] border-solid border-transparent border"
+            class="mb-20 border-solid border-transparent border"
           >
             <img
               @click.native="$mixpanel.track('click_life_photo')"
@@ -109,10 +109,10 @@ export default {
 @import "swiper/css/pagination";
 
 .swiper-pagination-bullet {
-  @apply !w-[15px] !h-[15px] !rounded-[3px] !bg-transparent !border !border-solid !border-[#3d3d3d];
+  @apply !w-[0.938rem] !h-[0.938rem] !rounded-[3px] !bg-transparent !border !border-solid !border-black-80;
 }
 
 .swiper-pagination-bullet-active {
-  @apply !border-none !from-[#F69259] !to-[#F16975] !bg-gradient-[45deg];
+  @apply !border-none !from-orange-300 !to-pink-300 !bg-gradient-[45deg];
 }
 </style>
diff --git a/nuxt-frontend/components/jobs/WhyCanopas.vue b/nuxt-frontend/components/jobs/WhyCanopas.vue
index 25f01f7c8..81937a2e8 100644
--- a/nuxt-frontend/components/jobs/WhyCanopas.vue
+++ b/nuxt-frontend/components/jobs/WhyCanopas.vue
@@ -1,49 +1,41 @@
 <template>
-  <div>
-    <div class="text-center m-0 p-0 relative">
-      <div class="header-text">
-        <span class="underline-text">Why </span>Canopas?
-      </div>
-      <img
-        :src="WhyCanopasImage"
-        alt="why-canopas-image"
-        loading="lazy"
-        class="w-full h-full left-0 absolute object-contain -z-[5]"
-      />
-      <div class="container flex my-[150px] mx-auto m-0 p-0 relative">
+  <div class="text-center m-0 p-0 relative">
+    <div class="desk-header-2 text-black-87">Why Canopas?</div>
+    <img
+      :src="WhyCanopasImage"
+      alt="why-canopas-image"
+      loading="lazy"
+      class="w-full h-full left-0 absolute object-contain -z-[5]"
+    />
+    <div class="container flex my-[150px] mx-auto m-0 p-0 relative">
+      <div
+        v-for="reason in reasons"
+        :key="reason"
+        class="reason flex flex-col basis-[33%] even:mt-[-4.375rem]"
+      >
+        <img
+          :src="reason.image"
+          alt="why-canopas-image "
+          loading="lazy"
+          v-if="reason.image"
+          class="w-full h-full object-contain"
+        />
         <div
-          v-for="reason in reasons"
-          :key="reason"
-          class="reason flex flex-col flex-[33%] even:mt-[-70px]"
+          :class="reason.class"
+          class="content flex flex-col even:mt-[5%] xl:even:mt-[10%] animate__animated"
+          ref="whyCanopas"
         >
           <img
-            :src="reason.image"
-            alt="why-canopas-image "
+            :src="reason.bullet"
+            alt="why-canopas-image"
             loading="lazy"
-            v-if="reason.image"
-            class="w-full h-full object-contain"
+            class="bullets w-[3.125rem] h-[3.125rem] -mr-5"
           />
-          <div
-            :class="reason.class"
-            class="content flex flex-col even:mt-[5%] xl:even:mt-[10%] first-of-type:w-full last-of-type:w-full animate__animated"
-            ref="whyCanopas"
-          >
-            <img
-              :src="reason.bullet"
-              alt="why-canopas-image"
-              loading="lazy"
-              class="bullets w-[50px] h-[50px] -mr-5"
-            />
-            <div
-              class="normal-text even:w-[70%] py-[15px] px-0 w-full text-black-900 font-bold 2xl:w-[65%]"
-            >
-              {{ reason.title }}
-            </div>
-            <div
-              class="normal-2-text even:w-[70%] description py-[15px] px-0 w-full 2xl:w-[65%]"
-            >
-              {{ reason.description }}
-            </div>
+          <div class="py-4 px-0 w-full mobile-header-2-semibold text-black-87">
+            {{ reason.title }}
+          </div>
+          <div class="sub-h1-regular text-black-60 px-0 w-full 2xl:w-[67%]">
+            {{ reason.description }}
           </div>
         </div>
       </div>
diff --git a/nuxt-frontend/components/jobs/WhyCanopasMobile.vue b/nuxt-frontend/components/jobs/WhyCanopasMobile.vue
index 4c914d810..875edab04 100644
--- a/nuxt-frontend/components/jobs/WhyCanopasMobile.vue
+++ b/nuxt-frontend/components/jobs/WhyCanopasMobile.vue
@@ -1,15 +1,13 @@
 <template>
-  <div class="text-center container m-0 p-0 max-w-full relative">
-    <div class="header-text main-text text-[2.5625rem] leading-[2.125rem]">
-      <span class="underline-text">Why Ca</span>nopas?
-    </div>
+  <div class="text-center container max-w-full mt-16 relative">
+    <div class="mobile-header-2 text-black-87">Why Canopas?</div>
     <img
       :src="WhyCanopasImage"
       alt="why-canopas-image"
       loading="lazy"
       class="image w-full h-full top-0 left-0 absolute object-contain sm:object-cover"
     />
-    <div class="reasons-container my-[50px] mx-auto w-full">
+    <div class="my-12 mx-auto w-full">
       <div
         v-for="reason in reasons"
         :key="reason"
@@ -18,16 +16,18 @@
       >
         <div
           :class="reason.class"
-          class="content my-auto mx-5 flex-[70%] flex flex-col"
+          class="content my-auto mx-5 basis-[70%] flex flex-col"
         >
           <img
             :src="reason.bullet"
             alt="why-canopas-image"
             loading="lazy"
-            class="bullets w-[50px] h-[50px] -mr-5"
+            class="bullets w-[3.125rem] h-[3.125rem] -mr-5"
           />
-          <div class="header-text py-[15px] px-0">{{ reason.title }}</div>
-          <div class="normal-text description py-[15px] px-0 sm:w-[70%]">
+          <div class="mobile-header-3-semibold text-black-87">
+            {{ reason.title }}
+          </div>
+          <div class="sub-h3-regular text-black-60 py-4 px-0 sm:w-[70%]">
             {{ reason.description }}
           </div>
         </div>
@@ -35,7 +35,7 @@
           :src="reason.image"
           alt="why-canopas-image"
           loading="lazy"
-          class="reason-image w-[126px] h-full"
+          class="reason-image w-[7.875rem] h-full"
         />
       </div>
     </div>
diff --git a/nuxt-frontend/pages/jobs/index.vue b/nuxt-frontend/pages/jobs/index.vue
index 21559ad08..99b409ddc 100644
--- a/nuxt-frontend/pages/jobs/index.vue
+++ b/nuxt-frontend/pages/jobs/index.vue
@@ -6,11 +6,11 @@
     <LifeAtCanopas />
     <PerksAndBenefits v-on:scroll-to-career="scrollToCareer" ref="perks" />
     <WhyCanopas
-      class="hidden md:block"
+      class="hidden lg:block"
       v-on:add-animation="handleAnimationOnScroll"
     />
     <WhyCanopasMobile
-      class="block md:hidden"
+      class="block lg:hidden"
       v-on:add-animation="handleAnimationOnScroll"
     />
     <Career id="career" />
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index 74db05133..5e41eca21 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -85,10 +85,7 @@ module.exports = {
         yellow: "#FFC700",
         "orange-peel": "#f985840d",
         "light-crimson": "#f476950d",
-        "royal-purple": "#A97BFF",
-        flamingo: "#F05138",
-        "soft-yellow": "#F1E05A",
-        "sea-green": "#41B883",
+        "gray-40": "#666666"
       },
       borderRadius: {
         "x-lg": "20px",
@@ -120,14 +117,6 @@ module.exports = {
         "inter-regular": ["Inter-Regular"],
         "opensans-bold": ["Opensans-Bold"],
         "opensans-semibold": ["Opensans-SemiBold"],
-        "source-codepro": ["Source CodePro"],
-        "poppins-regular": ["Poppins Regular"],
-        "poppins-medium": ["Poppins Medium"],
-        "inter-extralight": ["Inter-ExtraLight"],
-        "comme-light": ["Comme-Light"],
-        "comme-regular": ["Comme-Regular"],
-        "comme-medium": ["Comme-Medium"],
-        "comme-semibold": ["Comme-SemiBold"],
       },
       letterSpacing: {
         "extra-wider": "0.0625em",