diff --git a/content/header/index.md b/content/header/index.md
index f668206e1..9ff21b443 100644
--- a/content/header/index.md
+++ b/content/header/index.md
@@ -8,7 +8,7 @@ extra:
 ---
 
 - [Why]("/about")
-- [Product]("/product")
+- [Products]("/products")
 - Info
 
 
diff --git a/content/products/index.md b/content/products/index.md
new file mode 100644
index 000000000..abd4b80c2
--- /dev/null
+++ b/content/products/index.md
@@ -0,0 +1,58 @@
+---
+title: "Products"
+description: "ThreeFold's products." # quotation marks to allow colons where used
+template: "layouts/products.html"
+insert_anchor_links: "left"
+extra:
+ author: Your name here
+ imgPath: about/about_hero.png
+---
+
+
+
+
+
+
+
+
+
+
+<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{
+  
+     border-left: 1px solid rgb(156, 156, 156);
+
+
+   }
+
+
+ .white-gray{
+  color: #9f9f9f;
+}
+
+
+ </style>
\ No newline at end of file
diff --git a/templates/layouts/products.html b/templates/layouts/products.html
new file mode 100644
index 000000000..b1eda5c83
--- /dev/null
+++ b/templates/layouts/products.html
@@ -0,0 +1,5 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/products/hero.html" %}
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/layouts/why.html b/templates/layouts/why.html
index 4ecffa1a9..08bd29838 100644
--- a/templates/layouts/why.html
+++ b/templates/layouts/why.html
@@ -3,6 +3,7 @@
 
 {% include "partials/why/hero.html" %}
 {% include "partials/why/timeline.html" %}
+{% include "partials/why/values.html" %}
 
 {% include "partials/home/cta.html" %}
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/products/hero.html b/templates/partials/products/hero.html
new file mode 100644
index 000000000..501f893ba
--- /dev/null
+++ b/templates/partials/products/hero.html
@@ -0,0 +1,40 @@
+<div class="relative isolate overflow-hidden bg-transparent">
+    <div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-4xl text-center">
+        <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">A Secure & Sovereign Infrastructure Layer for the Internet</h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime.             .</p>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
+        </p>
+        <div class="mt-12 flex items-center justify-center gap-x-6">
+          <a href="#" 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">Dive Deeper</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <style>
+    /* Define the fade-in animation */
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/templates/partials/why/timeline.html b/templates/partials/why/timeline.html
index 702e94e1b..8b3a8fc4f 100644
--- a/templates/partials/why/timeline.html
+++ b/templates/partials/why/timeline.html
@@ -23,9 +23,9 @@
         </div>
         <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
             <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-medium text-white">Phase I</div>
+                <div class="font-medium text-gray-200">Phase I</div>
             </div>
-            <div class="font-semibold text-lg text-white mb-2">Creation of Core Technology</div>
+            <div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div>
             <div class="text-gray-200 font-light">
                 10+ years of Development
                 <br>Built decentralized, autonomous, edge internet technology
@@ -43,9 +43,9 @@
         </div>
         <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
             <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-medium text-white">Phase II</div>
+                <div class="font-medium text-gray-200">Phase II</div>
             </div>
-            <div class="font-semibold text-lg text-white mb-2">Traction & Expansion</div>
+            <div class="font-semibold text-lg text-gray-200 mb-2">Traction & Expansion</div>
             <div class="text-gray-200 font-light">
                 Open Source Development
                 <br>60+ Countries
@@ -69,7 +69,7 @@
                 <div class="font-medium text-white">Current Phase</div>
             </div>
             <div class="font-semibold text-lg text-white mb-2">ThreeFold Commercialization</div>
-            <div class="text-gray-200 font-light">
+            <div class="text-white font-light">
                 +1 Million Nodes
                 <br>Open Source Mode & Commercial Mode
                 <br>Version 3 (TFT) & Version 4 (INCA) 12.12.24
diff --git a/templates/partials/why/values.html b/templates/partials/why/values.html
new file mode 100644
index 000000000..22ecbc121
--- /dev/null
+++ b/templates/partials/why/values.html
@@ -0,0 +1,45 @@
+<div class="bg-transparent pb-24 pt-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
+        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
+          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+            Open Source
+          </dd>
+        </div>
+        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
+          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+            Authenticity
+          </dd>
+        </div>
+        <div class="mx-auto flex max-w-xs flex-col gap-y-4">
+          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+            Simplicity
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </div>
+  
+  <script>
+    // JavaScript to handle Intersection Observer
+    document.addEventListener("DOMContentLoaded", () => {
+      const elementsToObserve = document.querySelectorAll("[data-observer]");
+      const observerOptions = {
+        root: null, // Observes relative to the viewport
+        threshold: 0.1, // Trigger when 10% of the element is visible
+      };
+  
+      const observerCallback = (entries, observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("opacity-100"); // Make element fully visible
+            observer.unobserve(entry.target); // Stop observing once it's visible
+          }
+        });
+      };
+  
+      const observer = new IntersectionObserver(observerCallback, observerOptions);
+      elementsToObserve.forEach((el) => observer.observe(el));
+    });
+  </script>
+  
\ No newline at end of file