diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 84ff41263..62808834b 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -177,7 +177,7 @@ button:focus {
 }
 
 .text-8xl {
-  font-size: 5rem;
+  font-size: 4rem;
   line-height: 1;
   font-family: "Lato", sans-serif !important;
 }
diff --git a/src/components/custom/Navbar/Navbar.vue b/src/components/custom/Navbar/Navbar.vue
index fdbb9e1af..7b70c3fe3 100644
--- a/src/components/custom/Navbar/Navbar.vue
+++ b/src/components/custom/Navbar/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed inset-0 h-16 bg-white">
+  <div class="fixed inset-0 h-20 bg-white">
     <header
       class="
         inline-flex
@@ -8,16 +8,17 @@
         flex-wrap
         container-fluid
         mx-auto
-        px-
+        py-2
         sm:px-0
         transition-all transition-500
+        
       "
       :class="{
         'opacity-100': !disableScroll && scrollPosition > headerHeight,
         'opacity-0': !disableScroll && scrollPosition < headerHeight,
       }"
     >
-      <div class="flex items-center justify-between px-4 lg:py-3 sm:p-0">
+      <div class="flex items-center justify-between px-4 sm:p-0">
         <div class="inline-flex items-center flex-shrink-0">
           <a href="/">
             <g-image
diff --git a/src/components/custom/sections/CallToAction.vue b/src/components/custom/sections/CallToAction.vue
index 4ea4d863f..fb183655b 100644
--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -54,7 +54,7 @@
         class="
           inline-block
           bg-white
-          text-xl
+          text-lg
           learn-button
           hover:bg-gray-400
           px-12
@@ -75,7 +75,7 @@
         class="
           inline-block
           bg-white
-          text-xl
+          text-lg
           learn-button
           hover:bg-gray-400
           px-12
@@ -666,7 +666,7 @@
 
     <!-- grid -->
     <div class="w-full max-w-3xl mx-auto py-12" v-else-if="id == 'grid'">
-      <g-image :src="cta.image" class="mx-auto lg:w-80 my-10" />
+      <g-image :src="cta.image" class="mx-auto lg:w-1/3 my-10" />
       <h2
         v-if="cta.title"
         class="
@@ -682,7 +682,7 @@
       </h2>
       <div
         v-html="cta.content"
-        class="mt-6 mb-8 lg:text-2xl text-gray-800"
+        class="mt-6 mb-8 lg:text-xl text-gray-800"
       ></div>
       <a
         class="
diff --git a/src/components/marketing/sections/cta-sections/BrandPanel.vue b/src/components/marketing/sections/cta-sections/BrandPanel.vue
index 1106abd77..74df06f7e 100644
--- a/src/components/marketing/sections/cta-sections/BrandPanel.vue
+++ b/src/components/marketing/sections/cta-sections/BrandPanel.vue
@@ -283,7 +283,7 @@
               :href="brand.sourceUrl"
               class="
                 bg-blue-900
-                text-sm
+                text-lg
                 learn-button
                 hover:bg-blue-800
                 text-white
@@ -312,7 +312,7 @@
               }}</span>
             </h2>
             <div
-              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
               v-html="brand.content"
             ></div>
             <a
@@ -322,7 +322,7 @@
               class="
                 inline-block
                 bg-gray-900
-                text-2xl
+                text-xl
                 learn-button
                 hover:bg-gray-800
                 text-gray-100
@@ -393,8 +393,8 @@
         class="flex flex-wrap text-left"
       >
         <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-left">
-          <div class="lg:self-center">
-            <h2 class="text-3xl mb-6 uppercase leading-none font-heading">
+          <div class="px-2 lg:self-center">
+            <h2 class="text-5xl mb-6 uppercase leading-none font-heading">
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
                 brand.subtitle
@@ -404,7 +404,7 @@
               class="
                 py-6
                 mt-4
-                text-gray-900 text-2xl
+                text-gray-900 text-xl
                 leading-tight
                 tracking-wide
               "
@@ -433,7 +433,7 @@
           </div>
         </div>
         <div class="lg:w-1/2 px-2">
-          <g-image class="mx-auto w-3/4" :src="image" :alt="brand.title" />
+          <g-image class="mx-auto lg:w-3/4" :src="image" :alt="brand.title" />
         </div>
       </div>
 
@@ -442,15 +442,15 @@
         class="flex flex-wrap lg:text-left lg:pt-16 px-4"
       >
         <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+          <g-image class="lg:w-3/4" :src="image" :alt="brand.title" />
         </div>
         <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
-          <div class="px-10 lg:self-center">
-            <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
+          <div class="px-2 lg:self-center">
+            <h2 class="lg:text-5xl mb-8 uppercase leading-none font-heading">
               {{ brand.title }}
             </h2>
             <div
-              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
               v-html="brand.content"
             ></div>
             <a
@@ -460,7 +460,7 @@
               class="
                 inline-block
                 bg-white
-                text-lg
+                lg:text-lg
                 learn-button
                 hover:bg-gray-400
                 px-12
@@ -483,11 +483,11 @@
       >
         <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
           <div class="lg:self-center">
-            <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
+            <h2 class="lg:text-5xl mb-8 uppercase leading-none font-heading">
               {{ brand.title }}
             </h2>
             <div
-              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
               v-html="brand.content"
             ></div>
             <a
@@ -513,7 +513,7 @@
           </div>
         </div>
         <div class="lg:w-1/2 px-2 self-center">
-          <g-image :src="image" :alt="brand.title" />
+          <g-image class=" mx-auto lg:w-3/4" :src="image" :alt="brand.title" />
         </div>
       </div>
 
diff --git a/src/components/marketing/sections/cta-sections/Header.vue b/src/components/marketing/sections/cta-sections/Header.vue
index e6576a248..7ceaaf0bd 100644
--- a/src/components/marketing/sections/cta-sections/Header.vue
+++ b/src/components/marketing/sections/cta-sections/Header.vue
@@ -368,15 +368,15 @@
     </div>
 
     <div
-      class="flex flex-wrap text-center lg:text-left lg:pt-10 -mx-2"
+      class="flex flex-wrap text-center lg:text-left lg:pt-4 -mx-2"
       v-else-if="id == 'grid'"
     >
       <div class="px-3 lg:mt-5 order-1 lg:order-none mx-auto text-center">
-        <h2 class="lg:text-5xl uppercase mb-6 mt-20 leading-none font-heading">
+        <h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
           {{ title }}
         </h2>
         <div
-          class="mb-8 text-xl max-w-2xl leading-relaxed"
+          class="mb-8 text-xl max-w-xl mx-auto leading-relaxed"
           v-html="excerpt"
         ></div>