diff --git a/templates/index.html b/templates/index.html
index 2c716ba..f647381 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,6 +6,6 @@
 {% include "partials/hero/aihero4.html" %}
 {% include "partials/hero/aihero5.html" %}
 {% include "partials/hero/aihero6.html" %}
-{% include "partials/hero/aihero7.html" %}
+{% include "partials/hero/aihero9.html" %}
 {% include "partials/hero/aihero10.html" %}
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
index 939a5d7..152660b 100644
--- a/templates/partials/footer.html
+++ b/templates/partials/footer.html
@@ -4,9 +4,9 @@
 <html>
     <head />
     <body>
-        <div class="mt-18 border-t border-gray-700"></div>
+        <div class=" border-t border-gray-700"></div>
         <footer class="bg-transparent">
-            <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
+            <div class="max-w-screen-2xl bg-transparent mx-auto py-12  px-4 sm:px-6">
                 <div class="xl:flex xl:gap-4">
                     <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
                         <img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
diff --git a/templates/partials/hero/aihero1.html b/templates/partials/hero/aihero1.html
index b8c67af..8617fac 100644
--- a/templates/partials/hero/aihero1.html
+++ b/templates/partials/hero/aihero1.html
@@ -5,7 +5,7 @@
           Your 
           <span id="slides" class="slides"></span>
         </h1>
-        <div id="learn-more" class="mt-10 flex items-center gap-x-6 hidden"> 
+        <div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6 hidden"> 
           <a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
             Learn more <span aria-hidden="true">→</span>
           </a>
diff --git a/templates/partials/hero/aihero10.html b/templates/partials/hero/aihero10.html
index 78fe055..db2984e 100644
--- a/templates/partials/hero/aihero10.html
+++ b/templates/partials/hero/aihero10.html
@@ -1,10 +1,10 @@
-<div class="bg-transparent  mt-12">
+<div class="bg-transparent py-24 mb-10 mt-10">
     <div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
-      <h2 class="lg:text-balance text-left items-start lg:text-[6rem] text-[2.5rem] font-normal tracking-tight text-black fade-in">
+      <h2 id="blinking4" class="lg:text-balance text-left items-start lg:text-[6rem] text-[2.5rem] font-normal tracking-tight text-black fade-in">
         Own Your AI.  <br>Pre-Order<br>Now.
       </h2>
-      <div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
-        <a href="https://docs.threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+      <div  class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
+        <a  href="https://docs.threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
           Pre-order Now
         </a>
         <a href="/action" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
@@ -13,3 +13,48 @@
     </div>
 </div>
 
+
+
+<style>
+  /* Initial state: elements are invisible */
+.fade-in {
+opacity: 0;
+transition: opacity 1s ease-out;
+}
+
+/* State when element is in view */
+.fade-in.visible {
+opacity: 1;
+}
+
+</style>
+
+<script>
+  // Get all the elements that need to be faded in
+  document.addEventListener('DOMContentLoaded', function() {
+      const h2 = document.getElementById("blinking4");
+
+      setInterval(() => {
+          h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
+      }, 1000); // Blinks every 2 seconds
+// Target all elements with the 'fade-in' class
+const fadeInElements = document.querySelectorAll('.fade-in');
+
+const observer = new IntersectionObserver((entries, observer) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      // Add 'visible' class to the element when it's in view
+      entry.target.classList.add('visible');
+      observer.unobserve(entry.target); // Stop observing after it fades in
+    }
+  });
+}, {
+  threshold: 0.1 // Trigger when 10% of the element is in view
+});
+
+fadeInElements.forEach(element => {
+  observer.observe(element);
+});
+});
+
+</script>
diff --git a/templates/partials/hero/aihero2.html b/templates/partials/hero/aihero2.html
index 2e418c6..7572127 100644
--- a/templates/partials/hero/aihero2.html
+++ b/templates/partials/hero/aihero2.html
@@ -5,7 +5,7 @@
             <h2 id="typing-text" class="mx-auto fade-in text-left lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black">
             </h2>
         </div>        
-        <h3 class="mx-auto mt-8 fade-in text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">Meet <span class="font-medium">AIBox</span> – a powerful and personalized AI experience, without limitations.
+        <h3 class="mx-auto lg:mt-8 mt-6 fade-in text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">Meet <span class="font-medium">AIBox</span> – a powerful and personalized AI experience, without limitations.
         </h2>
       </div>
     </div>
diff --git a/templates/partials/hero/aihero3.html b/templates/partials/hero/aihero3.html
index 3a03b6f..fc6bda9 100644
--- a/templates/partials/hero/aihero3.html
+++ b/templates/partials/hero/aihero3.html
@@ -1,5 +1,5 @@
-<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 lg:pt-24 pb-0">
-    <div class="mx-auto max-w-7xl px-6 lg:px-8 pb-10">
+<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 pb-0">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8 lg:pb-10 pb-0">
         <div class="mx-auto max-w-2xl lg:max-w-4xl">
             <div class="text-center">
                 <h2 id="blinking" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
@@ -8,7 +8,7 @@
     </div>
 </div>
 
-<div class="space-y-8 pt-12 pb-24 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
+<div class="space-y-8 lg:py-12 py-6 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
 
     <!-- Item #1 -->
     <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
diff --git a/templates/partials/hero/aihero4.html b/templates/partials/hero/aihero4.html
index 4c34cd7..eff4590 100644
--- a/templates/partials/hero/aihero4.html
+++ b/templates/partials/hero/aihero4.html
@@ -1,4 +1,4 @@
-<div class="bg-white pt-12 lg:pt-24 pb-12">
+<div class="bg-white pt-12 lg:pt-24 pb-6">
     <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
         <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
             <div class="max-w-3xl">
diff --git a/templates/partials/hero/aihero5.html b/templates/partials/hero/aihero5.html
index 2902453..aeff593 100644
--- a/templates/partials/hero/aihero5.html
+++ b/templates/partials/hero/aihero5.html
@@ -1,4 +1,4 @@
-<div class="bg-white px-12 pb-12 mx-auto">
+<div class="bg-white px-12 pb-24 lg:pb-16 mx-auto">
     <div class="mx-auto max-w-3xl items-start pb-12">
             <p id="1" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black px-10">
                 Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing...
diff --git a/templates/partials/hero/aihero6.html b/templates/partials/hero/aihero6.html
index 0cb5491..c803242 100644
--- a/templates/partials/hero/aihero6.html
+++ b/templates/partials/hero/aihero6.html
@@ -1,12 +1,12 @@
 <div class="fade-in">
     <div class="relative isolate">
-        <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
+        <div class="mx-auto max-w-7xl px-6  lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
             <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
                 <!-- Typing Text -->
                 <h1 id="typing-text2" class="mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]"></h1>
                 
                 <!-- Specification List -->
-                <dl class="mt-10 px-10 max-w-xl space-y-6 text-gray-900 lg:max-w-xl">
+                <dl class="mt-10 px-10 max-w-xl lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl">
                     <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div>
                     <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div>
                     <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Powefull AMD CPU</dt></div>
@@ -18,7 +18,7 @@
                 </dl>
             </div>
             <!-- Image Section -->
-            <div class="fade-in-image mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
+            <div class="fade-in-image mt-8 lg:mt-24 lg:flex lg:justify-center lg:w-1/2">
                 <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="Mobile App Screenshot">
             </div>
         </div>
diff --git a/templates/partials/hero/aihero9.html b/templates/partials/hero/aihero9.html
index f98e3d7..cbe8b85 100644
--- a/templates/partials/hero/aihero9.html
+++ b/templates/partials/hero/aihero9.html
@@ -1,10 +1,124 @@
-<div class="fade-in">
-    <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:justify-between lg:px-8">
-      <h2 class="max-w-2xl text-4xl font-normal tracking-tight text-black sm:text-5xl">this part is cta4.html<br>this part is cta4.html</h2>
-      <div class="mt-10 flex items-center gap-x-6 lg:mt-0 lg:shrink-0">
-        <a href="#" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-black ring-1  ring-black shadow-xs hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
-        <a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
-      </div>
-    </div>
+<div class="bg-white">
+  <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
+      <h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
+      <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
+      <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
   </div>
-  
\ No newline at end of file
+  <div class="relative pt-16 sm:pt-24">
+      <div class="absolute inset-x-0 top-48 bottom-0"></div>
+      <div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+          <div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
+              {% for plan in section.extra.plans %}
+              <div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
+                  <div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
+                      <div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
+                          <h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
+                          <p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
+                          <div class="mt-4 flex items-center gap-4">
+                              <div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
+                              <div class="text-sm text-gray-600">
+                              </div>
+                          </div>
+                          <div class="mt-6">
+                              <h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
+                              <ul class="mt-3 space-y-2">
+                                  {% for feature in plan.features %}
+                                  <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                                      <span class="inline-flex h-6 items-center">
+                                          <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                                              <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                                          </svg>
+                                      </span>
+                                      {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
+                                      {{ feature.name }}
+                                  </li>
+                                  {% endfor %}
+                              </ul>
+                          </div>
+                          <div class="mt-6">
+                              <h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
+                              <ul class="mt-3 space-y-2">
+                                  {% for feature in plan.rewards %}
+                                  <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
+                                      <span class="inline-flex h-6 items-center">
+                                          <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+                                              <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
+                                          </svg>
+                                      </span>
+                                      {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
+                                      {{ feature.name }}
+                                  </li>
+                                  {% endfor %}
+                              </ul>
+                          </div>
+
+                      </div>
+                  </div>
+              </div>
+              {% endfor %}
+          </div>
+      </div>
+  </div>
+</div>
+
+<style>
+  /* Fade-in animation for the grid items */
+  .fade-in-box {
+      opacity: 0;
+      animation: fadeIn 2.2s ease-in-out forwards;
+  }
+
+  /* Fading in each grid item with a slight delay */
+  .fade-in-box:nth-child(1) { animation-delay: 0s; }
+  .fade-in-box:nth-child(2) { animation-delay: 0.2s; }
+  .fade-in-box:nth-child(3) { animation-delay: 0.4s; }
+
+  @keyframes fadeIn {
+      to {
+          opacity: 1;
+      }
+  }
+</style>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+      const text = "";
+      const textElement = document.getElementById("typing-text2");
+      let loopCount = 0;
+      const maxLoops = 5;
+
+      function typeText(i, callback) {
+          if (i < text.length) {
+              textElement.textContent += text.charAt(i);
+              setTimeout(() => typeText(i + 1, callback), 100);
+          } else {
+              setTimeout(callback, 1000);
+          }
+      }
+
+      function deleteText(callback) {
+          let currentText = textElement.textContent;
+          if (currentText.length > 0) {
+              textElement.textContent = currentText.substring(0, currentText.length - 1);
+              setTimeout(() => deleteText(callback), 50);
+          } else {
+              setTimeout(callback, 100);
+          }
+      }
+
+      function loopTyping() {
+          if (loopCount < maxLoops) {
+              typeText(0, () => {
+                  deleteText(() => {
+                      loopCount++;
+                      loopTyping();
+                  });
+              });
+          } else {
+              typeText(0, () => {}); // Final typing with no delete
+          }
+      }
+
+      loopTyping();
+  });
+</script>
diff --git a/templates/partials/hero/pricing-hero.html b/templates/partials/hero/pricing-hero.html
index a931db8..a9f75ad 100644
--- a/templates/partials/hero/pricing-hero.html
+++ b/templates/partials/hero/pricing-hero.html
@@ -1,10 +1,10 @@
-<div class="bg-white py-12">
-    <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
+<div class="bg-white py-12 fade-in-box">
+    <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8  fade-in-box">
         <h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
-        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
-        <p class="mt-12 max-w-2xl text-lg font-light text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
+        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
+        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
     </div>
-    <div class="relative pt-16 sm:pt-24">
+    <div class="relative pt-16 sm:pt-24  fade-in-box">
         <div class="absolute inset-x-0 top-48 bottom-0"></div>
         <div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
             <div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
@@ -12,16 +12,16 @@
                 <div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
                     <div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
                         <div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
-                            <h2 class="text-sm font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
-                            <p class="mt-2 text-sm/6 text-pretty text-gray-600">{{ plan.description }}</p>
-                            <div class="mt-8 flex items-center gap-4">
-                                <div class="text-5xl font-semibold text-gray-950">${{ plan.price }}</div>
+                            <h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
+                            <p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
+                            <div class="mt-4 flex items-center gap-4">
+                                <div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
                                 <div class="text-sm text-gray-600">
                                 </div>
                             </div>
-                            <div class="mt-8">
+                            <div class="mt-6">
                                 <h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
-                                <ul class="mt-3 space-y-3">
+                                <ul class="mt-3 space-y-2">
                                     {% for feature in plan.features %}
                                     <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
                                         <span class="inline-flex h-6 items-center">
@@ -35,9 +35,9 @@
                                     {% endfor %}
                                 </ul>
                             </div>
-                            <div class="mt-8">
+                            <div class="mt-6">
                                 <h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
-                                <ul class="mt-3 space-y-3">
+                                <ul class="mt-3 space-y-2">
                                     {% for feature in plan.rewards %}
                                     <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
                                         <span class="inline-flex h-6 items-center">
