diff --git a/content/page/grid/brandPanel4/index.md b/content/page/grid/brandPanel4/index.md
index f34975c66..0e2792a88 100644
--- a/content/page/grid/brandPanel4/index.md
+++ b/content/page/grid/brandPanel4/index.md
@@ -5,6 +5,6 @@ btnTxt: Learn more about TFT
 sourceUrl: /token
 btnTxt2: ''
 sourceUrl2: ''
-image: stake_token_big.jpg # src/assets/brandPanel/..
+image: utility.jpg # src/assets/brandPanel/..
 ---
 TFT is a utility token that was designed to ensure anyone can participate in the ThreeFold ecosystem without intermediaries. It incentivises node operators with monthly income and is used by developers to build and run workloads.
diff --git a/src/assets/images/brandPanel/utility.jpg b/src/assets/images/brandPanel/utility.jpg
new file mode 100644
index 000000000..70b131f2a
Binary files /dev/null and b/src/assets/images/brandPanel/utility.jpg differ
diff --git a/src/components/custom/HorizontalScroll.vue b/src/components/custom/HorizontalScroll.vue
index 59cfb4c50..9e86f2d7d 100644
--- a/src/components/custom/HorizontalScroll.vue
+++ b/src/components/custom/HorizontalScroll.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="lg:my-20 flex flex-col mt-5 p-auto">
+  <div class="lg:my-20 flex flex-col mt-5 p-auto lg:px-40">
     <h2 class="flex py-2 mx-auto uppercase font-bold lg:text-6xl">
       {{ team.title }}
     </h2>
     <div
-      class="lg:max-w-6xl text-2xl text-center mb-8 mx-auto leading-relaxed"
+      class="lg:max-w-6xl text-xl text-center mb-8 mx-auto leading-relaxed"
       v-html="team.content"
     ></div>
     <div class="flex overflow-x-scroll pb-10 scrollable">
diff --git a/src/components/custom/MarketInfo.vue b/src/components/custom/MarketInfo.vue
index 102ebdd7b..465150e8a 100644
--- a/src/components/custom/MarketInfo.vue
+++ b/src/components/custom/MarketInfo.vue
@@ -7,18 +7,18 @@
           lg:text-6xl
           font-bold
           leading-tight
-          lg:max-w-3xl
+          lg:max-w-5xl
         "
       >
         {{ main.title }}
       </h2>
       <div
-        class="my-5 max-w-2xl text-lg lg:text-2xl mx-auto text-gray-900 sm:mt-4"
+        class="my-5 max-w-xl text-lg lg:text-xl mx-auto text-gray-900 sm:mt-4"
         v-html="main.content"
       ></div>
     </div>
     <div class="flex flex-col my-1 lg:w-1/2 overflow-hidden">
-      <g-image :src="mainItem.image" class="w-1/2 mx-auto" />
+      <g-image :src="mainItem.image" class="w-80 mx-auto" />
       <div class="flex-1 bg-white p-6 flex flex-col justify-between">
         <div class="flex-1">
           <div
diff --git a/src/components/custom/Roadmap.vue b/src/components/custom/Roadmap.vue
index a399c3a25..2b5e2f105 100644
--- a/src/components/custom/Roadmap.vue
+++ b/src/components/custom/Roadmap.vue
@@ -4,7 +4,7 @@
       <g-image class="lg:w-3/4 mx-auto" :src="roadmap.image" />
       <div
         v-html="roadmap.content"
-        class="mt-10 mb-8 lg:text-2xl text-gray-900"
+        class="mt-10 mb-8 lg:text-xl text-gray-900"
       ></div>
     </div>
   </section>
diff --git a/src/components/custom/SplitWithForm.vue b/src/components/custom/SplitWithForm.vue
index 5083e176f..00ce337c7 100644
--- a/src/components/custom/SplitWithForm.vue
+++ b/src/components/custom/SplitWithForm.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="body-font">
-    <div class="mx-auto flex py-24 md:flex-row flex-col items-center">
+    <div class="mx-auto flex py-20 md:flex-row flex-col items-center lg:px-10">
       <div
         class="
           lg:pl-24
@@ -23,7 +23,7 @@
           {{ subscribe.title }}
         </h2>
         <div
-          class="my-8 lg:text-2xl"
+          class="my-8 lg:text-xl"
           v-html="subscribe.content"
         ></div>
         <div class="flex w-full md:justify-start justify-center items-end">
@@ -147,7 +147,7 @@
       </div>
       <div class="md:w-1/2 hidden md:flex">
         <g-image
-          class="object-cover object-center rounded"
+          class="object-cover w-3/4 mx-auto object-center rounded"
           :alt="subscribe.title"
           :src="subscribe.image"
         />
diff --git a/src/components/custom/SplitWithImage.vue b/src/components/custom/SplitWithImage.vue
index b7f597ed7..97c1919d0 100644
--- a/src/components/custom/SplitWithImage.vue
+++ b/src/components/custom/SplitWithImage.vue
@@ -38,10 +38,8 @@
           <div
             class="
               mt-3
-              max-w-md
-              text-2xl text-gray-900
+              text-xl 
               md:mt-5
-              md:max-w-xl
             "
             v-html="tft.content"
           ></div>
diff --git a/src/components/custom/sections/CallToAction.vue b/src/components/custom/sections/CallToAction.vue
index fdc3591e0..d6a24f1e1 100644
--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -26,7 +26,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>
       <g-image :src="cta.image" class="my-10 mx-auto" />
 
@@ -99,7 +99,7 @@
       <h2
         v-if="cta.title"
         class="
-          lg:text-6xl
+          lg:text-5xl
           text-center
           uppercase
           mb-2
@@ -111,7 +111,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>
     </div>
 
@@ -122,7 +122,7 @@
       <h2
         v-if="cta.title"
         class="
-          lg:text-6xl
+          lg:text-5xl
           text-center
           uppercase
           mb-2
@@ -135,7 +135,7 @@
       <h2
         v-if="cta.subtitle"
         class="
-          lg:text-6xl
+          lg:text-5xl
           text-center
           uppercase
           mb-2
@@ -147,7 +147,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="
@@ -486,7 +486,7 @@
     </div>
 
     <div
-      class="w-full max-w-7xl mx-auto mt-10 px-2"
+      class="w-full max-w-7xl mx-auto mt-10 px-2 py-16"
       v-else-if="id == 'home' && lastCta"
     >
       <g-image class="mx-auto" :src="cta.image" />
@@ -496,7 +496,7 @@
       >
         {{ cta.title }}
       </h2>
-      <div v-html="cta.content" class="mt-6 mb-8 mx-auto text-2xl text-gray-800"></div>
+      <div v-html="cta.content" class="mt-6 mb-8 mx-auto text-xl text-gray-800"></div>
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
@@ -685,7 +685,7 @@
     </div>
 
     <!-- grid -->
-    <div id="zero_os" class="w-full max-w-3xl mx-auto py-12" v-else-if="id == 'grid'">
+    <div id="zero_os" class="w-full max-w-3xl mx-auto lg:py-20" v-else-if="id == 'grid'">
       <g-image :src="cta.image" class="mx-auto lg:w-1/3 my-10" />
       <h2
         v-if="cta.title"
@@ -702,7 +702,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="
@@ -807,7 +807,7 @@
       </h2>
       <div
         v-html="cta.content"
-        class="mt-6 mb-8 max-w-3xl mx-auto lg:text-2xl text-gray-800"
+        class="mt-6 mb-8 max-w-3xl mx-auto lg:text-xl text-gray-800"
       ></div>
       <g-image :src="cta.image" class="mx-auto w-full my-10" />
       <a
@@ -855,7 +855,7 @@
       <h2
         v-if="cta.title"
         class="
-          max-w-2xl
+          lg:max-w-3xl
           mx-auto
           lg:text-6xl
           text-center
@@ -869,7 +869,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
diff --git a/src/components/marketing/sections/cta-sections/BrandPanel.vue b/src/components/marketing/sections/cta-sections/BrandPanel.vue
index 0231012c9..96155770c 100644
--- a/src/components/marketing/sections/cta-sections/BrandPanel.vue
+++ b/src/components/marketing/sections/cta-sections/BrandPanel.vue
@@ -166,10 +166,10 @@
       <!-- home -->
       <div
         v-else-if="id == 'home'"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
+        class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
       >
         <div class="lg:w-1/2 lg:px-6 self-center">
-          <g-image :src="image" :alt="brand.title" />
+          <g-image class="w-1/2 mx-auto" :src="image" :alt="brand.title" />
         </div>
         <div class="lg:w-1/2 lg:px-10 order-1 lg:order-none lg:self-center">
           <div class="">
@@ -180,7 +180,7 @@
               }}</span> -->
             </h2>
             <div
-              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
+              class="pb-6 text-xl leading-tight tracking-wide"
               v-html="brand.content"
             ></div>
             <a
@@ -254,7 +254,7 @@
       <!-- About us -->
       <div
         v-else-if="id == 'about-us' && !brandPanel2 && !brandPanel3"
-        class="flex flex-wrap text-left lg:my-10 lg:px-20"
+        class="flex flex-wrap text-left lg:my-10 lg:px-16"
       >
         <div class="lg:w-1/2 px-2 self-center">
           <g-image class="lg:w-2/3 mx-auto" :src="image" :alt="brand.title" />
@@ -268,7 +268,7 @@
               }}</span>
             </h2>
             <div
-              class="py-6 mt-4 text-2xl leading-tight tracking-wide"
+              class="py-6 mt-4 text-xl leading-tight tracking-wide"
               v-html="brand.content"
             ></div>
             <a
@@ -295,7 +295,7 @@
 
       <div
         v-else-if="id == 'about-us' && brandPanel2"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-4 lg:mb-20 lg:px-20"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-4 lg:mb-20 lg:px-16"
       >
         <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
           <div class="lg:self-center">
@@ -306,7 +306,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
@@ -353,7 +353,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
@@ -385,9 +385,9 @@
       
       <div
         v-else-if="id == 'grid' && !brandPanel2 && !brandPanel3"
-        class="flex flex-wrap text-left"
+        class="flex flex-wrap text-left lg:px-16"
       >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-left lg:self-center lg:px-32">
+        <div class="lg:w-1/2 lg:mt-10 order-1 lg:order-none text-left lg:self-center">
           <div class="px-2">
             <h2 class="lg:text-6xl mb-6 uppercase leading-none font-heading">
               <span class="block">{{ brand.title }}</span>
@@ -399,7 +399,7 @@
               class="
                 py-6
                 mt-4
-                text-gray-900 text-2xl
+                text-gray-900 text-xl
                 leading-tight
                 tracking-wide
               "
@@ -449,24 +449,24 @@
           </div>
         </div>
         <div class="lg:w-1/2">
-          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+          <g-image class="mx-auto w-3/4" :src="image" :alt="brand.title" />
         </div>
       </div>
 
       <div
         v-else-if="id == 'grid' && brandPanel2"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-2"
+        class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
       >
         <div class="lg:w-1/2 self-center">
-          <g-image class="" :src="image" :alt="brand.title" />
+          <g-image class="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 lg:px-32 lg:self-center">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center  ">
           <div class="px-2">
             <h2 class="lg:text-6xl 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
@@ -495,15 +495,15 @@
 
       <div
         v-else-if="id == 'grid' && brandPanel3"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-2"
+        class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
       >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
           <div class="">
             <h2 class="lg:text-6xl 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
@@ -548,22 +548,22 @@
             >
           </div>
         </div>
-        <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+        <div class="lg:w-1/2">
+          <g-image class="w-3/4 mx-auto" :src="image" :alt="brand.title" />
         </div>
       </div>
 
        <div
         v-else-if="id == 'grid' && brandPanel4"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-2"
+        class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
       >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
           <div class="">
-            <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
@@ -607,16 +607,16 @@
           </div>
         </div>
         <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+          <g-image class="w-3/4 mx-auto" :src="image" :alt="brand.title" />
         </div>
       </div>
 
       <!-- token -->
       <div
         v-else-if="id == 'token' && !brandPanel2 && !brandPanel3"
-        class="flex flex-wrap text-left mt-24"
+        class="flex flex-wrap text-left mt-24 lg:px-16"
       >
-        <div class="lg:w-1/2 lg:px-32 lg:mt-5 order-1 lg:order-none text-left lg:self-center">
+        <div class="lg:w-1/2 lg:mt-5 order-1 lg:order-none text-left lg:self-center">
           <div class="px-2">
             <h2 class="lg:text-6xl mb-6 uppercase leading-none font-heading">
               <span class="block">{{ brand.title }}</span>
@@ -628,8 +628,7 @@
               class="
                 py-6
                 mt-4
-                max-w-md
-                text-gray-900 text-2xl
+                text-xl
                 leading-tight
                 tracking-wide
               "
@@ -638,24 +637,24 @@
           </div>
         </div>
         <div class="lg:w-1/2">
-          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+          <g-image class="mx-auto w-3/4" :src="image" :alt="brand.title" />
         </div>
       </div>
 
       <div
         v-else-if="id == 'token' && brandPanel2"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-4 lg:px-16"
       >
         <div class="lg:w-1/2 self-center">
-          <g-image class="" :src="image" :alt="brand.title" />
+          <g-image class="mx-auto 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 lg:px-32 lg:self-center">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
           <div class="px-2">
             <h2 class="lg:text-6xl 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
@@ -684,15 +683,15 @@
 
       <div
         v-else-if="id == 'token' && brandPanel3"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-2"
+        class="flex flex-wrap lg:text-left lg:pt-16 lg:px-16"
       >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center lg:px-32">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center">
           <div class="">
             <h2 class="lg:text-6xl 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
@@ -718,7 +717,7 @@
           </div>
         </div>
         <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+          <g-image class="mx-auto 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 b0a955994..95f3011fa 100644
--- a/src/components/marketing/sections/cta-sections/Header.vue
+++ b/src/components/marketing/sections/cta-sections/Header.vue
@@ -93,7 +93,15 @@
     </div>
 
     <div
-      class="flex flex-wrap text-center items-center lg:text-left lg:mb-10 lg:mt-4 -mx-2"
+      class="
+        flex flex-wrap
+        text-center
+        items-center
+        lg:text-left
+        lg:mb-10
+        lg:mt-4
+        -mx-2
+      "
       v-else-if="id == 'about-us'"
     >
       <div class="lg:w-1/2 px-2 lg:pr-10 lg:mt-10 order-1 lg:order-none">
@@ -115,9 +123,7 @@
           class="
             mb-8
             px-10
-            text-center
-            text-2xl
-            text-extrabold
+            text-center text-2xl text-extrabold
             leading-tight
             lg:max-w-2xl
             mx-auto
@@ -259,16 +265,16 @@
       <div
         class="px-2 lg:py-40 lg:mt-10 order-1 lg:order-none mx-auto text-center"
       >
-      <div class="px-2 mt-20">
-        <g-image :src="img2" :alt="altImg" />
-      </div>
+        <div class="px-2 mt-20">
+          <g-image :src="img2" :alt="altImg" />
+        </div>
         <!-- <h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
           <span class="">{{ slogan }}</span
           ><br />
           {{ title }}
         </h2> -->
 
-        <div class="mb-8 text-2xl leading-relaxed" v-html="excerpt"></div>
+        <div class="mb-8 text-xl leading-relaxed" v-html="excerpt"></div>
 
         <a
           v-if="link.includes('http')"
@@ -367,7 +373,7 @@
         <h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
           {{ title }}
         </h2>
-        <div class="mb-8 text-2xl leading-relaxed" v-html="excerpt"></div>
+        <div class="mb-8 text-xl leading-relaxed" v-html="excerpt"></div>
       </div>
     </div>
 
@@ -379,10 +385,7 @@
         <h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
           {{ title }}
         </h2>
-        <div
-          class="mb-8 mx-auto text-2xl max-w-xl"
-          v-html="excerpt"
-        ></div>
+        <div class="mb-8 mx-auto text-xl max-w-xl" v-html="excerpt"></div>
 
         <a
           v-if="link.includes('http')"
@@ -427,11 +430,11 @@
       <g-image class="order-2 lg:order-none" :src="img" :alt="altImg" />
     </div>
     <div
-      class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
+      class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 lg:mx-40"
       v-else
     >
-      <div class="lg:w-2/5 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
-        <h2 class="text-6xl mb-6 mt-20 uppercase leading-none font-heading">
+      <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none ">
+        <h2 class="text-8xl mb-6 mt-20 uppercase leading-none font-heading lg:max-w-xl">
           <span class="text-blue-600">{{ slogan }}</span> {{ title }}
         </h2>
         <div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
@@ -480,7 +483,7 @@
           <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
         </div>
       </div>
-      <div class="lg:w-3/5 px-2 self-center">
+      <div class="lg:w-1/2 px-2 self-center">
         <g-image :src="img" :alt="altImg" />
       </div>
     </div>
diff --git a/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue b/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
index b5acf08f5..9bf58ba32 100644
--- a/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
+++ b/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
@@ -18,7 +18,7 @@
       </h2>
       <p
         v-if="main !== null && main.subtitle"
-        class="mb-6 text-2xl max-w-2xl mx-auto"
+        class="mb-6 text-xl max-w-2xl mx-auto"
       >
         {{ main.subtitle }}
       </p>
@@ -203,7 +203,7 @@
     <!-- Support -->
 
     <div
-      class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center"
+      class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center lg:px-20"
       v-else-if="id == 'support'"
     >
       <a
@@ -214,8 +214,8 @@
         class="m-auto rounded overflow-hidden transition duration-500"
       >
         <div class="px-2 py-2">
-          <g-image class="py-4" :src="img(product.image)" />
-          <div class="font-bold text-xl mb-2">{{ product.title }}</div>
+          <g-image class="py-4 w-2/3 mx-auto" :src="img(product.image)" />
+          <div class="font-bold text-2xl mb-2">{{ product.title }}</div>
           <div v-html="product.content" class="text-gray-700 text-base"></div>
           <div v-if="product.button" class="my-5 text-center">
             <a
diff --git a/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue b/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
index a5d0b4a2a..bcf35414a 100644
--- a/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
+++ b/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
@@ -7,12 +7,12 @@
       >
         {{ main.title }}
       </h2>
-      <p v-if="main !== null" class="mb-6 text-2xl">
+      <p v-if="main !== null" class="mb-6 text-xl">
         {{ main.subtitle }}
       </p>
     </div>
 
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:px-40">
       <a
         v-for="(product, idx) in products"
         target="_blank"
diff --git a/src/components/marketing/sections/cta-sections/logoShowcase.vue b/src/components/marketing/sections/cta-sections/logoShowcase.vue
index 71799e632..3d4cb3e1c 100644
--- a/src/components/marketing/sections/cta-sections/logoShowcase.vue
+++ b/src/components/marketing/sections/cta-sections/logoShowcase.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="py-10 pb-8 px-4 text-center">
-    <div class="max-w-2xl mx-auto mb-4" v-if="main">
+    <div class="max-w-4xl mx-auto mb-4" v-if="main">
       <h2 class="lg:text-6xl uppercase leading-tight mb-6 font-bold font-heading">
         {{ main.title }}
       </h2>
@@ -9,7 +9,7 @@
     </div>
     <div
       v-if="id == 'support' || id == 'community'"
-      class="flex flex-wrap mx-2"
+      class="flex flex-wrap lg:mx-40"
     >
       <div
         v-for="(logo, idx) in logos"
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
index bd3fc6ec9..b542ed38c 100644
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -16,7 +16,8 @@
         :button="$page.markdownPage.button"
         :link="$page.markdownPage.link"
       />
-
+    </div>
+    <div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <BrandPanel
         :id="$page.markdownPage.id"
         v-if="
@@ -33,7 +34,8 @@
         "
         :brandPanel2="true"
       />
-
+    </div>
+    <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
       <BrandPanel
         :id="$page.markdownPage.id"
         :brand="$page.markdownPage.brandPanel3"
@@ -43,8 +45,6 @@
         :brandPanel3="true"
       />
 
-    
-
       <CustomCTA
         :header="true"
         v-if="$page.markdownPage.pageHeader"
@@ -52,9 +52,6 @@
         :title="$page.markdownPage.pageHeader.title"
       />
 
-    
-    </div>
-    <div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <Header
         v-if="
           $page.markdownPage.id !== 'contact' &&
@@ -129,8 +126,9 @@
         "
         :cta="$page.markdownPage.cta"
       />
-
-          <BrandPanel
+    </div>
+    <div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
+      <BrandPanel
         :id="$page.markdownPage.id"
         :brand="$page.markdownPage.brandPanel4"
         v-if="
@@ -138,11 +136,15 @@
         "
         :brandPanel4="true"
       />
+    </div>
+    <div class="container-fluid sm:pxi-0 mx-auto overflow-visible">
       <SplitWithImage
         v-if="$page.markdownPage.tft"
         :id="$page.markdownPage.id"
         :tft="$page.markdownPage.tft"
       />
+    </div>
+    <div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <Features
         :id="$page.markdownPage.id"
         v-if="$page.markdownPage.network.length > 0"
@@ -173,6 +175,13 @@
         :brandPanel3="true"
       />
 
+      <RoadMap
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.roadmap"
+        :roadmap="$page.markdownPage.roadmap"
+      />
+    </div>
+    <div class="container-fluid sm:pxi-0 mx-auto overflow-visible">
       <CallToAction
         :id="$page.markdownPage.id"
         v-if="$page.markdownPage.cta2 && $page.markdownPage.id == 'token'"
@@ -180,11 +189,6 @@
         :lastCta="true"
       />
 
-      <RoadMap
-        :id="$page.markdownPage.id"
-        v-if="$page.markdownPage.roadmap"
-        :roadmap="$page.markdownPage.roadmap"
-      />
       <CallToAction
         :id="$page.markdownPage.id"
         v-if="$page.markdownPage.cta3"
@@ -249,7 +253,7 @@
         v-if="$page.markdownPage.header"
         :header="$page.markdownPage.header"
       />
-      <g-image
+      <g-image class="w-3/4 mx-auto"
         v-if="$page.markdownPage.solution_image2"
         :src="$page.markdownPage.solution_image2.src"
       />
diff --git a/tailwind.config.js b/tailwind.config.js
index 77290bfb0..c2d5b38e3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -281,7 +281,7 @@ module.exports = {
             maxWidth: '1024px',
           },
           '@screen xl': {
-            maxWidth: '1496px',
+            maxWidth: '1800px',
           },
         }
       })