diff --git a/content/what/index.md b/content/what/index.md
index 86f5b0b1b..99c5d1244 100644
--- a/content/what/index.md
+++ b/content/what/index.md
@@ -1,58 +1,171 @@
 ---
 title: "What"
 description: "TF offers a secure, sovereign infrastructure layer for Web4, delivering unparalleled scalability, incorruptible and permanent data storage, AI and Web2/Web3/Edge compatibility, and 100% uptime for a resilient digital future." # quotation marks to allow colons where used
-template: "layouts/what.html"
+template: "page.html"
 insert_anchor_links: "left"
 extra:
  author: ThreeFold
  imgPath: tf.png
 ---
 
+<!-- section 1 (header) -->
 
-
-
-
-
-
-
-
-
-<style>
-
-
-.rounded_img img {
- border-radius: 8px;
-}
-
-
-.person img{
- border-radius: 100%;
- max-width:100px;
- }
-
-
-.myscale{
- transition: transform .5s;
-}
-
-
-.myscale:hover{
- transform: scale(1.2);
- background-color: whitesmoke;
-}
-
-
-.road_border{
+{{ hero_text_center(
+    image_src="/images/become_farmer.png",
+    image_alt="Become a Farmer",
+    title="Decentralized Internet Infrastructure",
+    subtitle="",
+    description="Our unique technology enables anyone to become a provider of network, storage and compute capacity.",
+    button1_text="Dive Deeper",
+    button1_link="https://docs.threefold.io/docs/introduction"
   
-     border-left: 1px solid rgb(156, 156, 156);
+
+) }}
+
+
+ <!--section 2 (horizontal_features)-->
+
+<div class="lg:py-24 py-12 mx-auto max-w-7xl lg:px-8">
+
+
+
+  ## What We Do
+
+  ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
+
+  <br>
+
+  We are currently running V3.16.0, a large-scale Proof-of-Concept Network, while simultaneously preparing for V4.0.0, our upcoming production-ready release. This will deliver a fully operational infrastructure built around three core pillars:
+
+
+{{ horizontal_features(
+
+  title_1="Data",
+  point_1_1="Private, scalable, and autonomous—designed for AI-native environments.",
+  point_1_2="Distributed and decentralized, offering 10x efficiency and unprecedented security over existing cloud solutions.",
+  point_1_3="User-centric, unbreakable storage system ensuring redundancy & privacy.",
+  point_1_4="Geo-aware for compliance & data localization.",
+
+
+  title_2="Network",
+  point_2_1="End-to-end encrypted, peer-to-peer communication—no intermediaries.",
+  point_2_2="Shortest-path routing—intelligent traffic optimization for latency reduction and cost efficiency.",
+  point_2_3="Self-sustaining and censorship-resistant network.",
+ 
+
+
+  title_3="Compute",
+  point_3_1="Self-healing compute fabric—automatically redistributes workloads to healthy nodes. Fault tolerance is achieved via live migration of workloads, maintaining service availability. The Grid supports a peer-to-peer (P2P) AI compute and storage marketplace, allowing individuals and enterprises to monetize excess compute and GPU resources.",
+  point_3_2="No reliance on hyperscalers—agents dynamically manage resources, ensuring uptime and resilience.",
+  point_3_3="Optimized for AI & Web3—ideal for running autonomous applications, LLMs, and metaverse infrastructure. The Grid is designed to support AI inference and training at the edge.",
+  point_3_4="ThreeFold Grid V3 uses ZOS (Zero-OS), a highly optimized, minimalistic OS designed specifically for stateless, immutable, and self-healing workloads. ZOS runs on bare metal and supports:",
+  point_3_5="MicroVMs & Containerized Workloads (Kubernetes, Docker, Firecracker).",
+  point_3_6="AI & Machine Learning Workloads (LLM inference, federated learning).",
+  point_3_7="Web3 & Blockchain Nodes."
+
+) }}
+
+</div>
+
+
+<!--section 3 (Portfolio)-->
+
+
+<div class="lg:py-24 py-12 mx-auto max-w-7xl lg:px-8">
+
+  ## What We’ve Built
+
+  At ThreeFold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
+
+
+
+<dl class="pt-12 grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
+
+{{ portfolio(
+  title="ZERO-OS V3",
+  description="A stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.",
+  button_text="Learn More",
+  button_link="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os"
+)}}
+
+{{ portfolio(
+  title="MYCELIUM NETWORK",
+  description="Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.",
+  button_text="Learn More",
+  button_link="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html"
+)}}
+
+{{ portfolio(
+  title="QUANTUM SAFE STORAGE",
+  description="QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only, and immutable.",
+  button_text="Learn More",
+  button_link="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html"
+)}}
+
+{{ portfolio(
+  title="TF CHAIN",
+  description="n application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage, and network capacity.",
+  button_text="Learn More",
+  button_link="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html"
+)}}
+
+{{ portfolio(
+  title="3NODES",
+  description="ecentralized, user-owned hardware devices that provides computing, storage, and networking resources to power the TF Grid.",
+  button_text="Learn More",
+  button_link="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes"
+)}}
+
+{{ portfolio(
+  title="GATEWAY NODES",
+  description="Specialized nodes that provide secure access points to the ThreeFold Grid, enabling decentralized networking, private data communication, and seamless interaction between users and applications.",
+  button_text="Learn More",
+  button_link="https://manual.grid.tf/documentation/dashboard/deploy/node_finder.html?highlight=gateway%20nodes#gateway-nodes"
+)}}
+
+{{ portfolio(
+  title="TF DASHBOARD",
+  description="A user-friendly interface for monitoring, managing, and deploying resources on the ThreeFold Grid.",
+  button_text="Learn More",
+  button_link="https://manual.grid.tf/documentation/dashboard/dashboard.html"
+)}}
+
+{{ portfolio(
+  title="TF DAO",
+  description="A community-driven governance model that allows token holders to participate in decision-making processes related to the development and direction of the ThreeFold ecosystem.",
+  button_text="Learn More",
+  button_link="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html"
+)}}
+
+{{ portfolio(
+  title="TF CONNECT APP",
+  description="A mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.",
+  button_text="Learn More",
+  button_link="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html"
+)}}
+
+</dl>
+
+
+
+</div>
+
+
+<!-- section 8 Cta -->
+
+{{ cta(
+    title_1="Build the",
+    title_2="Internet of Tomorrow,",
+    title_3="Today",  
+    button_text_1="Take the Next Step",
+    button_link_1="/signup",
+    button_text_2="Learn More",
+    button_link_2="/action"
+) }}
+
 
 
-   }
 
 
- .white-gray{
-  color: #9f9f9f;
-}
 
 
- </style>
\ No newline at end of file
diff --git a/content/why/about_hero.png b/content/why/about_hero.png
deleted file mode 100644
index ad28e13b8..000000000
Binary files a/content/why/about_hero.png and /dev/null differ
diff --git a/templates/shortcodes/hero_text_center.html b/templates/shortcodes/hero_text_center.html
index e4dde7bce..8f2ff748e 100644
--- a/templates/shortcodes/hero_text_center.html
+++ b/templates/shortcodes/hero_text_center.html
@@ -1,4 +1,6 @@
 {% set title = title | default(value="Built") %}
+{% set image_src = image_src | default(value="") %}
+{% set image_alt = image_alt | default(value="") %}
 {% set description = description | default(value="") %}
 {% set button1_text = button1_text | default(value="") %}
 {% set button1_link = button1_link | default(value="") %}
@@ -17,7 +19,10 @@
         {{ title }}</h1>
       <p class="mx-auto mt-8 max-w-3xl fade-in">{{ description }}</p>
       <!-- <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-6xl fade-in">Web4</h2>  -->
-      <br>
+      
+      <div class="mx-auto max-w-7xl px-4 py-8">
+        <img src="{{ image_src }}" alt="{{ image_alt }}" class="w-full fade-in">
+      </div>
   
       <div class="mt-6 flex lg:flex-row flex-col items-center justify-center gap-x-8 gap-y-8">
         {% if button1_link %}
diff --git a/templates/shortcodes/horizontal_features.html b/templates/shortcodes/horizontal_features.html
new file mode 100644
index 000000000..d6c6d8f90
--- /dev/null
+++ b/templates/shortcodes/horizontal_features.html
@@ -0,0 +1,104 @@
+{% set title_1 = title_1 | default(value="") %}
+{% set point_1_1 = point_1_1 | default(value="") %}
+{% set point_1_2 = point_1_2 | default(value="") %}
+{% set point_1_3 = point_1_3 | default(value="") %}
+{% set point_1_3 = point_1_4 | default(value="") %}
+{% set title_2 = title_2 | default(value="") %}
+{% set point_2_1 = point_2_1 | default(value="") %}
+{% set point_2_2 = point_2_2 | default(value="") %}
+{% set point_2_3 = point_2_3 | default(value="") %}
+{% set title_3 = title_3 | default(value="") %}
+{% set point_3_1 = point_3_1 | default(value="") %}
+{% set point_3_2 = point_3_2 | default(value="") %}
+{% set point_3_3 = point_3_3 | default(value="") %}
+{% set point_3_4 = point_3_4 | default(value="") %}
+{% set point_3_5 = point_3_5 | default(value="") %}
+{% set point_3_6 = point_3_6 | default(value="") %}
+{% set point_3_7 = point_3_7 | default(value="") %}
+
+
+<section class="bg-transparent">
+  <div class="max-w-6xl">
+    <div class="mx-auto max-w-2xl mt-16  lg:max-w-none">
+      <dl class="grid max-w-xl gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-2">
+        <dl class="grid max-w-xl gap-x-8 gap-y-8 lg:max-w-none">
+                <div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl  bg-white/5">
+                  <dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
+                    {{ title_1}}
+                  </dt>
+                  <dd class="mt-4 flex flex-auto flex-col">
+                    <ul class="text-white fade-in space-y-4">
+                      <li class="text-sm text-gray-200 mb-2">{{ point_1_1 }}</li>
+                      <li class="text-sm text-gray-200 mb-2">{{ point_1_2 }}</li>
+                      <li class="text-sm text-gray-200 mb-2">{{ point_1_3 }}</li>
+                      <li class="text-sm text-gray-200 mb-2">{{ point_1_4 }}</li>
+                    </ul>
+                  </dd>
+                </div>
+                <div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl  bg-white/5">
+                  <dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
+                    {{ title_2 }}
+                  </dt>
+                  <dd class="mt-4 flex flex-auto flex-col">
+                    <ul class="text-white fade-in">
+                      <li class="text-sm text-gray-200 mb-2">{{ point_2_1 }}</li>
+                      <li class="text-sm text-gray-200 mb-2">{{ point_2_2 }}</li>
+                      <li class="text-sm text-gray-200 mb-2">{{ point_2_3 }}</li>
+                    </ul>
+                  </dd>
+                </div>
+        </dl>
+          
+        <div class="fade-in-box flex flex-col p-4 lg:p-6 rounded-2xl  bg-white/5">
+          <dt class="flex gap-x-3 text-lg rounded-2xl font-semibold text-white px-6">
+            {{ title_3 }}
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <ul class="text-white fade-in">
+              <li class="text-sm text-gray-200 mb-3">{{ point_3_1 }}</li>
+              <li class="text-sm text-gray-200 mb-3">{{ point_3_2 }}</li>
+              <li class="text-sm text-gray-200 mb-3">{{ point_3_3 }}</li>
+              <li class="text-sm text-gray-200 mb-3">{{ point_3_4 }}</li>
+              
+                <ul class="text-white fade-in">
+                  <li class="text-sm">{{ point_3_5 }}</li>
+                  <li class="text-sm">{{ point_3_6 }}</li>
+                  <li class="text-sm">{{ point_3_7 }}</li>
+                </ul>
+              </li>
+            </ul>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+</section>
+
+
+<style>
+  /* Fade-in animation for the grid items */
+  .fade-in-box {
+    opacity: 0;
+    animation: fadeIn 0.6s 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; }
+  .fade-in-box:nth-child(4) { animation-delay: 0.6s; }
+  .fade-in-box:nth-child(5) { animation-delay: 0.8s; }
+  .fade-in-box:nth-child(6) { animation-delay: 1s; }
+  .fade-in-box:nth-child(7) { animation-delay: 1.2s; }
+  .fade-in-box:nth-child(8) { animation-delay: 1.4s; }
+  .fade-in-box:nth-child(9) { animation-delay: 1.6s; }
+  .fade-in-box:nth-child(10) { animation-delay: 1.8s; }
+  .fade-in-box:nth-child(11) { animation-delay: 2s; }
+  .fade-in-box:nth-child(12) { animation-delay: 2.2s; }
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/templates/shortcodes/portfolio.html b/templates/shortcodes/portfolio.html
new file mode 100644
index 000000000..b8ea8dc61
--- /dev/null
+++ b/templates/shortcodes/portfolio.html
@@ -0,0 +1,47 @@
+{% set title = title | default(value="Built") %}
+{% set description = description | default(value="") %}
+{% set button_text = button_text | default(value="") %}
+{% set button_link = button_link | default(value="") %}
+
+
+
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            {{ title }}
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">{{ description }}</p>
+            <p class="mt-6">
+              <a href="{{ button_link }}" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">{{ button_text }} <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+
+
+<style>
+  /* Fade-in animation for the grid items */
+  .fade-in-box {
+    opacity: 0;
+    animation: fadeIn 0.6s 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; }
+  .fade-in-box:nth-child(4) { animation-delay: 0.6s; }
+  .fade-in-box:nth-child(5) { animation-delay: 0.8s; }
+  .fade-in-box:nth-child(6) { animation-delay: 1s; }
+  .fade-in-box:nth-child(7) { animation-delay: 1.2s; }
+  .fade-in-box:nth-child(8) { animation-delay: 1.4s; }
+  .fade-in-box:nth-child(9) { animation-delay: 1.6s; }
+  .fade-in-box:nth-child(10) { animation-delay: 1.8s; }
+  .fade-in-box:nth-child(11) { animation-delay: 2s; }
+  .fade-in-box:nth-child(12) { animation-delay: 2.2s; }
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+</style>