diff --git a/templates/layouts/action.html b/templates/layouts/action.html
index f29af2313..4f0df04d1 100644
--- a/templates/layouts/action.html
+++ b/templates/layouts/action.html
@@ -2,6 +2,8 @@
 {% block content %}
 
 {% include "partials/action/banner.html" %}
-{% include "partials/action/hero.html" %}
+{% include "partials/action/announcements.html" %}
+{% include "partials/action/action.html" %}
+{% include "partials/action/cta.html" %}
 
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/action/action.html b/templates/partials/action/action.html
new file mode 100644
index 000000000..afb31ed77
--- /dev/null
+++ b/templates/partials/action/action.html
@@ -0,0 +1,95 @@
+<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="relative grid lg:grid-cols-12 lg:gap-8">
+            <!-- Left Content -->
+            <div class="lg:col-span-7">
+                <div class="mx-auto max-w-2xl lg:mx-0">
+                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">When 3 Becomes 4</h1>
+                    <p class="fade-in mt-6 text-lg font-light text-white">
+                    The Internet is a Trillion USD business and we want to make sure this Internet is built and owned by all of us—An Internet created by Everyone for Everyone. <br><br>
+                    Web4 is the logical evolution of the Internet and opens the door for Machines & Humans to create together a new form of Intelligence with respect for the Planet & People.<br><br>
+                    ThreeFold has been working on this vision for more than 10 years <br><br>
+                    and is now ready to announce our next steps on December 12, 2024. 
+                    </p>
+                </div>
+            </div>
+
+           <!-- Right Blockquote -->
+           <div class="lg:col-span-5">
+            <figure class=" mt-6   pl-8">
+                <blockquote class=" text-2xl text-white fade-in font-semibold">
+                    <p class="text-2xl text-white font-semibold">We believe actions are more important than words. <br><br>
+                        This page is in black & white, to let YOU be the color of the future of the internet.
+                    </p>
+                </blockquote>
+                <br>
+                <div class="inline-flex blinking-effect items-center gap-2 fade-in ">
+                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0,0,256,256" style="cursor: pointer;">
+                        <g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+                            <g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
+                                <path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
+                            </g>
+                        </g>
+                    </svg>
+                    <a href="action.html" class="text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl">12.12.2024</a>
+                </div>                                   
+            </figure>
+        </div>
+    </div>
+</div>
+</div>
+
+
+
+
+
+<style>
+ /* Apply the blinking animation to the link */
+ .blinking-effect {
+  animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes blink {
+0% {
+  opacity: 1;
+}
+50% {
+  opacity: 0.4;
+}
+100% {
+  opacity: 1;
+}
+}
+
+.blockquote::before {
+    content: open-quote;
+    font-size: 4rem;
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    color: #ffffff;
+}
+
+.inline-flex {
+display: flex;
+align-items: center;
+}
+
+.items-center {
+justify-content: center;
+}
+
+.gap-2 {
+gap: 0.5rem; /* Adjust the gap size as needed */
+}
+
+</style>
diff --git a/templates/partials/action/announcements.html b/templates/partials/action/announcements.html
new file mode 100644
index 000000000..1ba87be17
--- /dev/null
+++ b/templates/partials/action/announcements.html
@@ -0,0 +1,59 @@
+<div class="bg-transparent fade-in pb-24 flex items-center justify-center min-h-screen">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
+            <p class="fade-in mx-auto mb-12 text-pretty lg:text-4xl text-3xl font-medium text-gray-200">All Things Web 4</p>
+        </div>
+        <div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-3">
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Infrastructure</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Phone & Routers</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Human + Machine Agents</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Sovereign Digital Economic Zone</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Dev Tools</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Digital Currency</h2>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // JavaScript to control the blinking effect
+    const items = document.querySelectorAll('.grid-item');
+    let currentIndex = 0;
+
+    function blinkItem() {
+        // Remove the 'blink' class from all items
+        items.forEach(item => item.classList.remove('blink'));
+
+        // Add the 'blink' class to the current item
+        items[currentIndex].classList.add('blink');
+
+        // Move to the next item in a clockwise manner
+        currentIndex = (currentIndex + 1) % items.length;
+    }
+
+    // Start the blinking effect
+    setInterval(blinkItem, 1000); // Change every second
+</script>
+
+<style>
+    /* CSS for the blinking effect */
+    .blink {
+        animation: blink-animation 1s infinite;
+    }
+
+    @keyframes blink-animation {
+        0%, 100% { background-color: rgba(255, 255, 255, 0.1); }
+        50% { background-color: rgba(255, 255, 255, 0.5); }
+    }
+</style>
diff --git a/templates/partials/action/banner.html b/templates/partials/action/banner.html
index c4c02e02c..2457551c2 100644
--- a/templates/partials/action/banner.html
+++ b/templates/partials/action/banner.html
@@ -6,7 +6,7 @@
         alt="TF">
     </div>
     <div class="text-center">
-        <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Save the Date</h2>
-        <p class="mx-auto mt-4 max-w-3xl text-pretty lg:text-3xl text-2xl font-medium text-gray-200 fade-in">12.12.24</p>
+        <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">Save the Date</h2>
+        <p class="fade-in mx-auto mt-4 max-w-3xl text-pretty lg:text-4xl text-3xl font-medium text-gray-200 fade-in">12.12.24</p>
     </div>
 </div>
diff --git a/templates/partials/action/cta.html b/templates/partials/action/cta.html
new file mode 100644
index 000000000..777585b1a
--- /dev/null
+++ b/templates/partials/action/cta.html
@@ -0,0 +1,54 @@
+<div class="bg-transparent">
+    <div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
+      <h2 class="lg:text-balance leading-tight text-left items-start  font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
+        Become the Color<br/>
+        of the Future of Internet <br/>on 12.12.2024.
+      </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://t.me/threefoldnews" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          Telegram
+        </a>
+        <a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" 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 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          Newsletter
+        </a>
+      </div>
+    </div>
+</div>
+
+<style>
+  .bg-black {
+    background-color: #000;
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 4s ease-in-out forwards;
+  }
+
+  h2 {
+    animation-delay: 0.5s;
+  }
+
+  p {
+    animation-delay: 1s;
+  }
+
+  .blockquote::before {
+    content: open-quote;
+    font-size: 4rem;
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    color: #ffffff;
+  }
+
+
+</style>
\ No newline at end of file
diff --git a/templates/partials/cta.html b/templates/partials/cta.html
new file mode 100644
index 000000000..c27744acc
--- /dev/null
+++ b/templates/partials/cta.html
@@ -0,0 +1,14 @@
+<div class="bg-transparent">
+    <div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
+      <h2 class="lg:text-balance text-left items-start  font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
+        Build the <br>Internet of Tomorrow, <br>Today.
+      </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-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          Dive Deeper
+        </a>
+        
+      </div>
+    </div>
+</div>
+