diff --git a/templates/partials/products/portfolio.html b/templates/partials/products/portfolio.html
index 228e12a97..a0072714b 100644
--- a/templates/partials/products/portfolio.html
+++ b/templates/partials/products/portfolio.html
@@ -1,198 +1,150 @@
-
 <div class="bg-transparent pt-24 pb-10">
   <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
     <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
       <h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
-       <p class="text-left mt-6 max-w-3xl  text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
-        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. Explore how our creations are shaping a more open and connected future.
-        </p>
+      <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
+        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. Explore how our creations are shaping a more open and connected future.
+      </p>
     </div>
   </div>
 </div>
-
-
-<section  class="pb-24 pt-12 bg-transparent">
+<section class="pb-24 bg-transparent">
   <div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
+    <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
+      <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            ZERO-OS V3
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">A stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            MYCELIUM NETWORK
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized communication layer of TF Grid that connects and coordinates nodes on the ThreeFold Grid, enabling secure and efficient peer-to-peer interactions.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            QUANTUM SAFE STORAGE
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only, and immutable.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
 
+        <!-- 2ND ROW--> 
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            TF CHAIN
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">An application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage, and network capacity.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            3NODES
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">Decentralized, user-owned hardware devices that provides computing, storage, and networking resources to power the TF Grid.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/developers/tfchain/tfchain.html?highlight=nodes#nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            GATEWAY NODES
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">Specialized nodes that provide secure access points to the ThreeFold Grid, enabling decentralized networking, private data communication, and seamless interaction between users and applications.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/dashboard/deploy/node_finder.html?highlight=gateway%20nodes#gateway-nodes" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
 
-      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
-
-
-          <ul class="space-y-8">
-              <li class="text-sm leading-6">
-                  <div class="relative group">
-                      <div
-                          class="absolute">
-                      </div><a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" class="cursor-pointer">
-                          <div
-                              class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5">
-                              <div class="flex items-center space-x-4">
-                                  <div>
-                                      <h3 class="text-lg font-semibold text-white">TF DASHBOARD</h3>
-                                       
-                                  </div>
-                              </div>
-                              <p class="leading-normal font-light text-gray-300 text-md">A Graphical user interface (GUI) provided by ThreeFold for users to access and manage their ThreeFold Grid resources</p>
-                          </div>
-                      </a>
-                  </div>
-              </li>
-              <li class="text-sm leading-6">
-                  <div class="relative group">
-                      <div
-                          class="absolute">
-                      </div><a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" class="cursor-pointer">
-                          <div
-                              class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
-                              <div class="flex items-center space-x-4">
-                                  <div>
-                                      <h3 class="text-lg font-semibold text-white">TF CONNECT APP</h3>
-                                       
-                                  </div>
-                              </div>
-                              <p class="leading-normal font-light text-gray-300 text-md">TF Connect is a mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.</p>
-                          </div>
-                      </a>
-                  </div>
-              </li>
-              <li class="text-sm leading-6">
-                  <div class="relative group">
-                      <div
-                          class=" absolute">
-                      </div><a href="" class="cursor-pointer">
-                          <div
-                              class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
-                              <div class="flex items-center space-x-4">
-                                  <div>
-                                      <h3 class="text-lg font-semibold text-white">3NODES</h3>
-                                      <p class="text-white font-light text-md"> Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
-                                  </div>
-                              </div>
-                              <p class="leading-normal text-gray-300 text-md"></p>
-                          </div>
-                      </a>
-                  </div>
-              </li>
-          </ul>
-
-
-          <ul class="hidden space-y-8 sm:block">
-              <li class="text-sm leading-6">
-                  <div class="relative group">
-                      <div
-                          class=" absolute">
-                      </div><a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" class="cursor-pointer">
-                          <div
-                              class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
-                              <div class="flex items-center space-x-4">
-                                  <div>
-                                      <h3 class="text-lg font-semibold text-white">TF DAO</h3>
-                                       
-                                  </div>
-                              </div>
-                              <p class="leading-normal font-light text-gray-300 text-md">Through the TF DAO, users can propose, vote on, and implement changes to the network protocols, policies, and operations, fostering a collaborative and inclusive environment.</p>
-                          </div>
-                      </a>
-                  </div>
-              </li>
-              <li class="text-sm leading-6">
-                  <div class="relative group">
-                      <div
-                          class=" absolute">
-                      </div><a href="https://manual.grid.tf/knowledge_base/technology/concepts/tfchain.html" class="cursor-pointer">
-                          <div
-                              class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
-                              <div class="flex items-center space-x-4">
-                                  <div>
-                                      <h3 class="text-lg font-semibold text-white">TF CHAIN</h3>
-                                      <p class="text-white font-light text-md">TF Chain is the universal smart contract layer on the ThreeFold Grid. It’s an application-specific blockchain customized for the operation of a single application – provisioning decentralized compute, storage and network capacity. </p>
-                                  </div>
-                              </div>
-                              <p class="leading-normal text-gray-300 text-md"></p>
-                          </div>
-                      </a>
-                  </div>
-              </li>
-              <li class="text-sm leading-6">
-                  <div class="relative group">
-                      <div
-                          class=" absolute">
-                      </div><a href="" class="cursor-pointer">
-                          <div
-                              class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
-                              <div class="flex items-center space-x-4">
-                                  <div>
-                                      <h3 class="text-lg font-semibold text-white">GATEWAY NODES</h3>
-                                       
-                                  </div>
-                              </div>
-                              <p class="leading-normal text-white font-light text-md">Enim neque volutpat ac tincidunt vitae
-                                  semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
-                                  pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
-                          </div>
-                      </a>
-                  </div>
-              </li>      
-          </ul>
-
-
-          <ul class="hidden space-y-8 lg:block">
-              <li class="text-sm leading-6">
-                  <div class="relative group">
-                      <div
-                          class=" absolute">
-                      </div><a href="https://manual.grid.tf/knowledge_base/technology/concepts/zos.html?highlight=zero-os#overview-of-zero-os" class="cursor-pointer">
-                          <div
-                              class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
-                              <div class="flex items-center space-x-4">
-                                  <div>
-                                      <h3 class="text-lg font-semibold text-white">ZERO-OS V3</h3>
-                                       
-                                  </div>
-                              </div>
-                              <p class="leading-normal font-light text-gray-300 text-md">Zero-OS is a stateless and lightweight operating system that allows for an improved efficiency of up to 10x for certain workloads.</p>
-                          </div>
-                      </a>
-                  </div>
-              </li>
-              <li class="text-sm leading-6">
-                  <div class="relative group">
-                      <div
-                          class=" absolute">
-                      </div><a href="https://manual.grid.tf/documentation/system_administrators/mycelium/overview.html" class="cursor-pointer">
-                          <div
-                              class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
-                              <div class="flex items-center space-x-4">
-                                  <div>
-                                      <h3 class="text-lg font-semibold text-white">MYCELIUM</h3>
-                                  </div>
-                              </div>
-                              <p class="leading-normal text-white font-light text-md">Mycelium is an end-2-end encrypted IPv6 overlay network written in Rust where each node that joins the overlay network will receive an overlay network IP in the 400::/7 range.</p>
-                          </div>
-                      </a>
-                  </div>
-              </li>
-              <li class="text-sm leading-6">
-                  <div class="relative group">
-                      <div
-                          class=" absolute">
-                      </div><a href="https://manual.grid.tf/knowledge_base/technology/qsss/qsss_home.html" class="cursor-pointer">
-                          <div
-                              class="relative p-6 space-y-6 leading-none rounded-lg bg-white/5 ring-1 ring-gray-900/5">
-                              <div class="flex items-center space-x-4">
-                                  <div>
-                                      <h3 class="text-lg font-semibold text-white">QUANTUM SAFE STORAGE</h3>
-                                       
-                                  </div>
-                              </div>
-                              <p class="leading-normal text-gray-300 text-md">QSS is a decentralized, globally distributed data storage system. It is unbreakable, self-healing, append-only and immutable.</p>
-                          </div>
-                      </a>
-                  </div>
-              </li>
-          </ul>
-
-
-      </div>
+        <!-- 3RD ROW--> 
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            TF DASHBOARD
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">A user-friendly interface for monitoring, managing, and deploying resources on the ThreeFold Grid.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/dashboard/dashboard.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            TF DAO
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">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.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/dashboard/tfchain/tf_dao.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+        
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            TF CONNECT APP
+          </dt>
+          <dd class="mt-2 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">A mobile app that serves as a gateway to the ThreeFold ecosystem and its various ThreeFold products and services.</p>
+            <p class="mt-6">
+              <a href="https://manual.grid.tf/documentation/tfconnect/tfconnect_toc.html" target="_blank" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
+            </p>
+          </dd>
+        </div>
+      </dl>
+    </div>
   </div>
-</section>
\ No newline at end of file
+</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>