diff --git a/content/page/how-it-works/how-it-works.md b/content/page/how-it-works/how-it-works.md
new file mode 100644
index 000000000..79e71de12
--- /dev/null
+++ b/content/page/how-it-works/how-it-works.md
@@ -0,0 +1,8 @@
+---
+id: how-it-works
+metaTitle: ThreeFold | How It Works
+metaDesc: Be part of a better tomorrow by expanding the peer-to-peer Internet and set yourself free from the centralized applications and services that exploit your data today.
+metaImg: ./universe_header.png
+productsMain: product_page
+productData: [zero_os, zdb, zstor, zdbfs, zflist, smart_contract, tf_chain, planetary_network, web_gateway, peer_to_peer ]
+---
diff --git a/content/page/how-it-works/productData/main/main.md b/content/page/how-it-works/productData/main/main.md
new file mode 100644
index 000000000..d0a47f48d
--- /dev/null
+++ b/content/page/how-it-works/productData/main/main.md
@@ -0,0 +1,5 @@
+---
+id: product_page
+title: DIVE INTO OUR TECH
+subtitle: 
+---
diff --git a/content/page/how-it-works/productData/product1/index.md b/content/page/how-it-works/productData/product1/index.md
new file mode 100644
index 000000000..1b64f5717
--- /dev/null
+++ b/content/page/how-it-works/productData/product1/index.md
@@ -0,0 +1,6 @@
+---
+id: zero_os
+title: Zero-OS
+image: ./zero_os.jpg
+link: '#'
+---
diff --git a/content/page/how-it-works/productData/product1/zero_os.jpg b/content/page/how-it-works/productData/product1/zero_os.jpg
new file mode 100644
index 000000000..8d8c6cefa
Binary files /dev/null and b/content/page/how-it-works/productData/product1/zero_os.jpg differ
diff --git a/content/page/how-it-works/productData/product10/index.md b/content/page/how-it-works/productData/product10/index.md
new file mode 100644
index 000000000..4b5cf2da5
--- /dev/null
+++ b/content/page/how-it-works/productData/product10/index.md
@@ -0,0 +1,6 @@
+---
+id: peer_to_peer
+title: Peer-to-Peer
+image: ./peer_to_peer.jpg
+link: '#'
+---
diff --git a/content/page/how-it-works/productData/product10/peer_to_peer.jpg b/content/page/how-it-works/productData/product10/peer_to_peer.jpg
new file mode 100644
index 000000000..e313f6841
Binary files /dev/null and b/content/page/how-it-works/productData/product10/peer_to_peer.jpg differ
diff --git a/content/page/how-it-works/productData/product2/index.md b/content/page/how-it-works/productData/product2/index.md
new file mode 100644
index 000000000..063ad0bf7
--- /dev/null
+++ b/content/page/how-it-works/productData/product2/index.md
@@ -0,0 +1,6 @@
+---
+id: zdb
+title: ZDB
+image: ./zdb.jpg
+link: '#'
+---
\ No newline at end of file
diff --git a/content/page/how-it-works/productData/product2/zdb.jpg b/content/page/how-it-works/productData/product2/zdb.jpg
new file mode 100644
index 000000000..11d9fa1ac
Binary files /dev/null and b/content/page/how-it-works/productData/product2/zdb.jpg differ
diff --git a/content/page/how-it-works/productData/product3/index.md b/content/page/how-it-works/productData/product3/index.md
new file mode 100644
index 000000000..b170ec70f
--- /dev/null
+++ b/content/page/how-it-works/productData/product3/index.md
@@ -0,0 +1,6 @@
+---
+id: zstor
+title: Zstor
+image: ./zstor.jpg
+link: '#'
+---
diff --git a/content/page/how-it-works/productData/product3/zstor.jpg b/content/page/how-it-works/productData/product3/zstor.jpg
new file mode 100644
index 000000000..58a65c61a
Binary files /dev/null and b/content/page/how-it-works/productData/product3/zstor.jpg differ
diff --git a/content/page/how-it-works/productData/product4/index.md b/content/page/how-it-works/productData/product4/index.md
new file mode 100644
index 000000000..6a30dcb6a
--- /dev/null
+++ b/content/page/how-it-works/productData/product4/index.md
@@ -0,0 +1,6 @@
+---
+id: zdbfs
+title: Zdbfs
+image: ./zdbfs.jpg
+link: '#'
+---
diff --git a/content/page/how-it-works/productData/product4/zdbfs.jpg b/content/page/how-it-works/productData/product4/zdbfs.jpg
new file mode 100644
index 000000000..bd9b27064
Binary files /dev/null and b/content/page/how-it-works/productData/product4/zdbfs.jpg differ
diff --git a/content/page/how-it-works/productData/product5/index.md b/content/page/how-it-works/productData/product5/index.md
new file mode 100644
index 000000000..5edc73de1
--- /dev/null
+++ b/content/page/how-it-works/productData/product5/index.md
@@ -0,0 +1,6 @@
+---
+id: zflist
+title: ZFlist
+image: ./zflist.jpg
+link: '#'
+---
\ No newline at end of file
diff --git a/content/page/how-it-works/productData/product5/zflist.jpg b/content/page/how-it-works/productData/product5/zflist.jpg
new file mode 100644
index 000000000..0994eb6ef
Binary files /dev/null and b/content/page/how-it-works/productData/product5/zflist.jpg differ
diff --git a/content/page/how-it-works/productData/product6/index.md b/content/page/how-it-works/productData/product6/index.md
new file mode 100644
index 000000000..50d0970fc
--- /dev/null
+++ b/content/page/how-it-works/productData/product6/index.md
@@ -0,0 +1,6 @@
+---
+id: smart_contract
+title: Smart Contract for IT
+image: ./smart_contract.jpg
+link: '#'
+---
diff --git a/content/page/how-it-works/productData/product6/smart_contract.jpg b/content/page/how-it-works/productData/product6/smart_contract.jpg
new file mode 100644
index 000000000..efad40c3f
Binary files /dev/null and b/content/page/how-it-works/productData/product6/smart_contract.jpg differ
diff --git a/content/page/how-it-works/productData/product7/index.md b/content/page/how-it-works/productData/product7/index.md
new file mode 100644
index 000000000..3e1f9d7b5
--- /dev/null
+++ b/content/page/how-it-works/productData/product7/index.md
@@ -0,0 +1,6 @@
+---
+id: tf_chain
+title: TF Chain
+image: ./tf_chain.jpg
+link: '#'
+---
diff --git a/content/page/how-it-works/productData/product7/tf_chain.jpg b/content/page/how-it-works/productData/product7/tf_chain.jpg
new file mode 100644
index 000000000..bf2493b66
Binary files /dev/null and b/content/page/how-it-works/productData/product7/tf_chain.jpg differ
diff --git a/content/page/how-it-works/productData/product8/index.md b/content/page/how-it-works/productData/product8/index.md
new file mode 100644
index 000000000..115bce148
--- /dev/null
+++ b/content/page/how-it-works/productData/product8/index.md
@@ -0,0 +1,6 @@
+---
+id: planetary_network
+title: Planetary Network
+image: ./planetary_network.jpg
+link: '#'
+---
diff --git a/content/page/how-it-works/productData/product8/planetary_network.jpg b/content/page/how-it-works/productData/product8/planetary_network.jpg
new file mode 100644
index 000000000..57e49da8e
Binary files /dev/null and b/content/page/how-it-works/productData/product8/planetary_network.jpg differ
diff --git a/content/page/how-it-works/productData/product9/index.md b/content/page/how-it-works/productData/product9/index.md
new file mode 100644
index 000000000..9d3944b92
--- /dev/null
+++ b/content/page/how-it-works/productData/product9/index.md
@@ -0,0 +1,6 @@
+---
+id: web_gateway
+title: Web Gateway
+image: ./web_gateway.jpg
+link: '#'
+---
\ No newline at end of file
diff --git a/content/page/how-it-works/productData/product9/web_gateway.jpg b/content/page/how-it-works/productData/product9/web_gateway.jpg
new file mode 100644
index 000000000..eda241ae5
Binary files /dev/null and b/content/page/how-it-works/productData/product9/web_gateway.jpg differ
diff --git a/content/page/universe/productData/main/main.md b/content/page/universe/productData/main/main.md
index c554a2b98..ce2e996dd 100644
--- a/content/page/universe/productData/main/main.md
+++ b/content/page/universe/productData/main/main.md
@@ -1,5 +1,5 @@
 ---
-id: product_page
+id: oldproduct_page
 title: JOIN THE P2P UNIVERSE
 subtitle: Be part of a better tomorrow, and set yourself free from the centralized applications and services that exploit your data today. 
 ---
\ No newline at end of file
diff --git a/content/page/universe/universe.md b/content/page/universe/universe.md
index 517fdbc6b..6bea353aa 100644
--- a/content/page/universe/universe.md
+++ b/content/page/universe/universe.md
@@ -3,6 +3,4 @@ id: universe
 metaTitle: ThreeFold | Universe
 metaDesc: Be part of a better tomorrow by expanding the peer-to-peer Internet and set yourself free from the centralized applications and services that exploit your data today.
 metaImg: ./universe_header.png
-productsMain: product_page
-productData: [farming, cloud, marketplace, twin, tech, aci]
 ---
diff --git a/content/page/why/productData/peer_to_peer/peer_to_peer.md b/content/page/why/productData/peer_to_peer/peer_to_peer.md
index e6f4e8bb5..a3a01661f 100644
--- a/content/page/why/productData/peer_to_peer/peer_to_peer.md
+++ b/content/page/why/productData/peer_to_peer/peer_to_peer.md
@@ -1,5 +1,5 @@
 ---
-id: peer_to_peer
+id: oldpeer_to_peer
 title: Peer-to-Peer puts people back in control
 image: ./peer_to_peer.png
 button: Learn More
diff --git a/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue b/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
index 3df8dddac..6880cb307 100644
--- a/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
+++ b/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
@@ -109,6 +109,35 @@
       </div>
     </div>
 
+    <!-- How it works -->
+    <div
+      class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center"
+      v-else-if="id == 'how-it-works'"
+    >
+      <div
+        v-for="(product, idx) in products"
+        target="_blank"
+        :key="idx"
+        :href="product.link"
+        class="
+          mx-auto
+          my-3
+          rounded
+          overflow-hidden
+          transition
+          duration-500
+          bg-gray-100
+        "
+      >
+        <a :href="product.link">
+          <g-image :src="img(product.image)" />
+          <div class="font-bold text-xl py-5 mx-4">
+            {{ product.title }}
+          </div>
+        </a>
+      </div>
+    </div>
+
     <!-- why -->
     <div
       class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
index cb853f931..375d38895 100644
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -174,7 +174,7 @@
         :products="$page.markdownPage.appData"
         :main="$page.markdownPage.appsMain"
       /> -->
-      <!-- <ShowcaseProducts
+      <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
           $page.markdownPage.productData.length > 0
@@ -182,7 +182,7 @@
         :id="$page.markdownPage.id"
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
-      /> -->
+      />
 
       <!-- <Partenerships
         v-if="