diff --git a/content/farmer/index.md b/content/farmer/index.md
index a2e24ca..70ceda8 100644
--- a/content/farmer/index.md
+++ b/content/farmer/index.md
@@ -2,22 +2,42 @@
 title: "Become Farmer"
 description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
 insert_anchor_links: "left"
-template: "layouts/farmer.html"
+template: "page.html"
 extra:
  author: AIBOX
  imgPath: tf.png
 
 ---
+<!-- section 1 (Hero) -->
+
+<div class="fade-in lg:h-screen px-6 flex flex-col text-center pt-10 justify-center items-center">
+<div class="fade-in-image mx-auto text-center lg:flex lg:justify-center">
 
 
-<!--
-  This page is made by combining different 'section' (partial html pages) together. 
-  To edit the page content, please go to specific 'section' that you would like to edit (stored inside templates/partials folders).
-  To see the list of the section blocks in this page, add or remove some of the partial pages, 
-  go to: static/templates/layouts/index.html.
+![AIBox Specifications](/images/aibox_farming.png)
 
-HOMEPAGE (static/templates/layouts/about.html) contains:
 
-  1. Hero section: "templates/partials/about/about1.html
-  2. Hero section: "templates/partials/about/about2.html
+</div>
+
+# Own Your AI GPU <br>& Share Capacity
+
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- section 8 Cta -->
+
+{{ cta(
+    title_1="Own",
+    title_2="Your AI",
+    title_3="",  
+    button_text_1="Register Now",
+    button_link_1="/signup",
+    button_text_2="",
+    button_link_2="",
+    button_text_3="Learn More",
+    button_link_3="https://threefold.info/aibox/docs/"
+) }}
 
diff --git a/css/index.css b/css/index.css
index 2b0ecd1..18d1c73 100644
--- a/css/index.css
+++ b/css/index.css
@@ -252,18 +252,18 @@ background-color:#5596f5 !important;
 
 @layer components {
   h1 {
-    @apply text-4xl font-semibold tracking-tight lg:text-6xl;
+    @apply  lg:text-[7.37rem] text-[3rem] font-medium tracking-tight leading-tight ;
     font-family: "Inter", sans-serif !important;
   }
   h2 {
-    @apply  lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black;
+    @apply  lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight;
     font-family: "Inter", sans-serif !important;
   }
   h2 strong {
     @apply font-semibold;
   }
   h3 {
-    @apply lg:text-3xl text-xl leading-snug font-light tracking-tight text-black;
+    @apply lg:text-3xl text-xl leading-snug font-light tracking-tight;
     font-family: "Inter", sans-serif !important;
   }
   h3 strong {
diff --git a/tailwind.config.js b/tailwind.config.js
index 1c659e7..20782f3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,9 +20,6 @@ module.exports = {
         'first', 'first:sm', 'first:md', 'first:lg', 
         'last', 'last:sm', 'last:md', 'last:lg'
       ],
-    },
-    {
-      pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/,  // Added teal color safelist
     }
   ],
  
diff --git a/templates/shortcodes/hero_animation.html b/templates/shortcodes/hero_animation.html
index aeadb9a..2f00406 100644
--- a/templates/shortcodes/hero_animation.html
+++ b/templates/shortcodes/hero_animation.html
@@ -12,7 +12,7 @@
 <div class="fade-in relative isolate overflow-hidden py-12 lg:py-24 lg:h-screen">
     <div class="mx-auto max-w-7xl lg:col-span-2 px-4 lg:flex lg:gap-x-2 lg:px-8">
       <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
-        <h1 class="mt-10 font-medium tracking-tight text-pretty text-black leading-tight lg:text-[7.37rem] text-[3.5rem]">
+        <h1 class="mt-10">
           {{ title }} 
           <span id="slides" class="slides"></span>
         </h1>