diff --git a/content/about/index.md b/content/about/index.md
index bcfb74904..5cc964199 100644
--- a/content/about/index.md
+++ b/content/about/index.md
@@ -31,40 +31,22 @@ About a decade ago, a group of passionate Internet & cloud veterans came togethe
 
 
 <!-- section 2 our Story  -->
+
 <div style="background-color:#F6F6F6">
 
 <div class="container mx-auto">
 
-
 {% row( style="center narrow mtop") %}
 
 ## **Our <span class="blue">Story</span>**
 
 ### **Enabling True <span class="green_text">Decentralization</span>**
 
-<hr>
-
 {% end %}
 
-{% row( style="center narrow mbottom") %}
+{% storymap() %}
 
-#### **<span class="blue uppercase">Our journey began**</span>
-
-with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.
-
-<br>
-<br>
-
-#### **<span class="blue uppercase">In response,**</span>
-
-we came together with a shared mission—to design a revolutionary decentralized, open-source, inclusive, and sustainable Cloud solution for all. 
-
-<br>
-<br>
-
-#### **<span class="blue uppercase">Today**</span>
-
-as we embark on the commercialization phase, the ThreeFold Grid is live in 61+ countries, a significant milestone in our ongoing commitment to redefine the future of the digital landscape.
+## **storymap**
 
 {% end %}
 
@@ -74,6 +56,9 @@ as we embark on the commercialization phase, the ThreeFold Grid is live in 61+ c
 
 
 
+
+
+
 <!-- section 3  -->
 <div class="container mx-auto">
 
@@ -98,7 +83,7 @@ as we embark on the commercialization phase, the ThreeFold Grid is live in 61+ c
 <br>
 
 Market Cap
-<p class="text-3xl blue font-bold">8 Billion $</p>
+<p class="text-2xl blue font-bold">8 Billion $</p>
 
 </div>
 
@@ -113,7 +98,7 @@ Market Cap
 <br>
 
 Market Cap
-<p class="text-3xl blue font-bold">34 Billion $</p>
+<p class="text-2xl blue font-bold">34 Billion $</p>
 
 </div>
 
@@ -128,7 +113,7 @@ Market Cap
 <br>
 
 Market Cap
-<p class="text-3xl blue font-bold">8 Billion $</p>
+<p class="text-2xl blue font-bold">8 Billion $</p>
 
 </div>
 
@@ -143,7 +128,7 @@ Market Cap
 <br>
 
 Market Cap
-<p class="text-3xl blue font-bold">205 Billion $</p>
+<p class="text-2xl blue font-bold">205 Billion $</p>
 
 </div>
 
@@ -158,7 +143,7 @@ Market Cap
 <br>
 
 Market Cap
-<p class="text-3xl blue font-bold">25 Billion $</p>
+<p class="text-2xl blue font-bold">25 Billion $</p>
 
 </div>
 
@@ -174,7 +159,7 @@ Market Cap
 
 <div class="container mx-auto">
 
-{% row( style="center narrow mtop") %}
+{% row( style="mtop") %}
 
 ## **Roadmap**
 
diff --git a/content/deploy/index.md b/content/deploy/index.md
index d08ced6bf..72227842b 100644
--- a/content/deploy/index.md
+++ b/content/deploy/index.md
@@ -27,6 +27,8 @@ ThreeFold has developed extensive technology and tools for <span class="blue">de
 
 From decentralized cloud computing and blockchain integration to overseeing infrastructures and optimizing performance, there is a breadth of options for smooth and efficient operations.
 
+<br>
+
 <button class="green">[Developer Documentation](https://www.manual.grid.tf/documentation/developers/developers.html)</button> 
 <button class="blue_b">[Sysadmin Documentation](https://www.manual.grid.tf/documentation/system_administrators/system_administrators.html)</button>
 
@@ -45,25 +47,23 @@ From decentralized cloud computing and blockchain integration to overseeing infr
 <div class="container mx-auto">
 
 
-{% row( style="center mtop semiNarrow") %}
+{% row( style="mtop semiNarrow") %}
 
-#### <span class="green_text">Deploy With ThreeFold</span>
-
-<br>
+### **<span class="">Deploy With ThreeFold**
 
 ## **Key Features**
 
 {% end %}
 
-{% row( style="center semiNarrow") %}
+{% row( style="semiNarrow") %}
 
 <div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
 
 
-**<span class="blue mb-2">Anything LINUX can run on the Grid</span>**
+**Anything LINUX can run on the Grid**
 
 
-<p class="text-base">Anything that runs on Linux can run on ThreeFold's innovative operating system, guaranteeing compatibility and flexibility.</p>
+<p class="text-base mt-2">Anything that runs on Linux can run on ThreeFold's innovative operating system, guaranteeing compatibility and flexibility.</p>
 
 
 </div>
@@ -73,10 +73,10 @@ From decentralized cloud computing and blockchain integration to overseeing infr
 <div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
 
 
-**<span class="blue mb-2">VIRTUAL MACHINES & GATEWAY TECHNOLOGY</span>**
+**VIRTUAL MACHINES & GATEWAY TECHNOLOGY**
 
 
-<p class="text-base">ThreeFold’s gateway tech allows any node on the grid to obtain a FQDN, secure mesh network traffic, and synced configurations. Coupled with our VMs, the possibilities are endless.</p>
+<p class="text-base mt-1 leading-snug">ThreeFold’s gateway tech allows any node on the grid to obtain a FQDN, secure mesh network traffic, and synced configurations. Coupled with our VMs, the possibilities are endless.</p>
 
 
 </div>
@@ -86,25 +86,25 @@ From decentralized cloud computing and blockchain integration to overseeing infr
 <div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
 
 
-**<span class="blue mb-2">ONE-CLICK SOLUTION FOR WORKLOADS</span>**
+**ONE-CLICK SOLUTION FOR WORKLOADS**
 
 
-<p class="text-base">The Grid offers ready-community solutions to deploy industry-grade workloads in one click. You can also build your own solutions thanks to the open-source nature of the grid.</p>
+<p class="text-base mt-2">The Grid offers ready-community solutions to deploy industry-grade workloads in one click. You can also build your own solutions thanks to the open-source nature of the grid.</p>
 
 </div>
 
 {% end %}
 
 
-{% row( style="center semiNarrow") %}
+{% row( style="semiNarrow") %}
 
 <div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
 
 
-**<span class="blue mb-2">OPEN SOURCE LOW LEVEL OPERATING SYSTEM</span>**
+**OPEN SOURCE LOW LEVEL OPERATING SYSTEM**
 
 
-<p class="text-base">Enables anyone to become a cloud provider. This operating system supports all required Web2 and Web3 workloads.</p>
+<p class="text-base mt-2">Enables anyone to become a cloud provider. This operating system supports all required Web2 and Web3 workloads.</p>
 
 
 </div>
@@ -114,10 +114,10 @@ From decentralized cloud computing and blockchain integration to overseeing infr
 <div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
 
 
-**<span class="blue mb-2">PEER TO PEER MESH NETWORK</span>**
+**PEER TO PEER MESH NETWORK**
 
 
-<p class="text-base">The only overlay network which considers locality: routing decisions are based on peer proximity. Offers privacy and redundancy that are currently not possible elsewhere.</p>
+<p class="text-base mt-2">The only overlay network which considers locality: routing decisions are based on peer proximity. Offers privacy and redundancy that are currently not possible elsewhere.</p>
 
 
 </div>
@@ -127,10 +127,10 @@ From decentralized cloud computing and blockchain integration to overseeing infr
 <div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
 
 
-**<span class="blue mb-2">QUANTUM SAFE STORAGE SYSTEM</span>**
+**QUANTUM SAFE STORAGE SYSTEM**
 
 
-<p class="text-base">QSSS is capable of storing data in ways that are indestructible, efficient, and ultra-scalable. Storage algorithms fragment and disperse files over multiple nodes.</p>
+<p class="text-base mt-2">QSSS is capable of storing data in ways that are indestructible, efficient, and ultra-scalable. Storage algorithms fragment and disperse files over multiple nodes.</p>
 
 
 </div>
@@ -139,15 +139,15 @@ From decentralized cloud computing and blockchain integration to overseeing infr
 {% end %}
 
 
-{% row( style="center semiNarrow") %}
+{% row( style="semiNarrow") %}
 
 <div class="key_card rounded_img border-2 rounded-lg p-4 bg-white">
 
 
-**<span class="blue mb-2">TOOLS AVAILABLE  FOR SYSADMINS</span>**
+**TOOLS AVAILABLE  FOR SYSADMINS**
 
 
-<p class="text-base">Deploy your own workload architectures with tools such as Terraform, Pulumi and Kubernetes.</p>
+<p class="text-base mt-2">Deploy your own workload architectures with tools such as Terraform, Pulumi and Kubernetes.</p>
 
 
 </div>
@@ -155,21 +155,22 @@ From decentralized cloud computing and blockchain integration to overseeing infr
 |||
 
 
-
-
-|||
-
 <div class="key_card rounded_img border-2 rounded-lg p-4 text-base bg-white">
 
 
-**<span class="blue mb-2">AI AND MACHINE LEARNING WORKLOADS WITH GPU</span>**
+**AI AND MACHINE LEARNING WORKLOADS WITH GPU**
 
 
-<p class="text-base">The grid supports GPU nodes enabling artificial intelligence and machine learning workloads within minutes.</p>
+
+<p class="text-base mt-2">The grid supports GPU nodes enabling artificial intelligence and machine learning workloads within minutes.</p>
 
 
 </div>
 
+
+|||
+
+
 {% end %}
 
 <br>
diff --git a/content/home/index.md b/content/home/index.md
index 1e80e5b7b..00f944b48 100644
--- a/content/home/index.md
+++ b/content/home/index.md
@@ -156,7 +156,7 @@ TFT powers ThreeFold and the expansion of a truly decentralized infrastructure t
 <div class="flex justify-center items-center card_h rounded_img border-2 rounded-lg px-3 py-2 bg-gray-100">
 
 
-Anything that runs on Linux can run on the **ThreeFold grid**
+Anything that runs on Linux can run on the ThreeFold grid
 
 </div>
 
@@ -196,11 +196,15 @@ Flexible advanced deployment options for experienced users
 
 {% end %}
 
+</div>
+
 
 
 
 <!-- section 6 (ecentralized) -->
+
 <div style="background-color:#F6F6F6">
+<div class="container mx-auto">
 
 {% row( style="mtop center between ") %}
 
@@ -244,7 +248,7 @@ Empowers emerging markets with local data storage, granting digital sovereignty
 
 {% end %}
 
-{% row( style="center semiNarrow") %}
+{% row( style="mbottom center semiNarrow") %}
 
 ![Image](performance.png#tft_img#mx-auto)
 
@@ -283,6 +287,8 @@ As devices multiply, central data centers face data overload. Edge cloud distrib
 
 <!-- section 7 (Ecosystem) -->
 
+<div class="container mx-auto">
+
 {% row( style="center mtop narrow") %}
 
 ## **Ecosystem**
@@ -297,7 +303,7 @@ ThreeFold’s decentralized autonomous cloud will empower many projects and digi
 
 <div class="rounded_img border-2 rounded-lg shadow-lg">
 
-[![Image](partner_social.png)](/partners/veverse)
+[![Image](partner_social.png)](/partners/social-network)
 
 
 <div class="p-6 lg:p-3 mycard">
diff --git a/css/index.css b/css/index.css
index b4d08ebc5..82941a050 100644
--- a/css/index.css
+++ b/css/index.css
@@ -194,7 +194,8 @@ h1 {
   button {
     @apply 
     inline-block
-    lg:text-lg
+    md:text-md
+    text-sm
     lg:mr-3
     py-1
     my-4
@@ -272,7 +273,7 @@ button a {
   line-height: 1.3;
   @apply
   text-black
-  px-12
+  px-8
 }
 
 .long-text a{
diff --git a/templates/shortcodes/hovevision.html b/templates/shortcodes/hovevision.html
index d66550a53..c8b77a14a 100644
--- a/templates/shortcodes/hovevision.html
+++ b/templates/shortcodes/hovevision.html
@@ -1,6 +1,6 @@
 
 <div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:py-20 py-8">
-    <div class="w-full md:w-1/3">
+    <div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
      <h1 class="font-medium">The Vision</h1>
      <h3 class="blue font-normal">Pioneering. Empowering.</h3>
     </div>
diff --git a/templates/shortcodes/roadmap.html b/templates/shortcodes/roadmap.html
index 0d56027b5..7d2008c5f 100644
--- a/templates/shortcodes/roadmap.html
+++ b/templates/shortcodes/roadmap.html
@@ -1,128 +1,88 @@
-<div class="space-y-8 lg:pb-24 pb-4 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
-
-    <!-- Item #1 -->
-    <div class="relative hidden flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
-        <!-- Icon -->
-        {# <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg>
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-bold text-slate-900">Order Placed</div>
-                <time class="font-caveat font-medium text-indigo-500">08/06/2023</time>
-            </div>
-            <div class="text-slate-500">Our journey began, with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</div>
-        </div> #}
+<!-- Timeline section -->
+<div class="mx-auto -mt-8 px-6 lg:py-24 py-4 ">
+    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
+      <div>
+        <time datetime="2021-08" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
+          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
+            <circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
+          </svg>
+          Phase 1
+          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
+        </time>
+        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">CREATION OF CORE TECH</p>
+        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
+            <li>
+                +30 years of development.
+            </li>
+            <li>
+            Built decentralized, autonomous, edge internet technology.
+            </li>
+        </ul>
+      </div>
+      <div>
+        <time datetime="2021-12" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
+          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
+            <circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
+          </svg>
+          Phase 2
+          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
+        </time>
+        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">PROOF OF CONCEPT</p>
+        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
+            <li>
+                Largest and most advanced decentralized autonomous cloud network in the world.
+            </li>
+            <li>
+                Contract with Government of ZNZ. 
+            </li>
+        </ul>
+      </div>
+      <div>
+        <time datetime="2022-02" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
+          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
+            <circle class="blue" cx="2" cy="2" r="2" fill="currentColor" />
+          </svg>
+          Phase 3 
+          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
+        </time>
+        
+        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight blue">COMMERCIALIZATION</p>
+        <p class="blue text-base"> (CURRENT POSITION)</p>
+        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
+            <li>
+                Drive utilization of TFGrid 4.0.
+            </li>
+            <li>
+                Underlying layer for DePIN projects.
+            </li>
+            <li>
+                Solidify partnerships. 
+            </li>
+            <li>
+                TF Cooperative established. 
+            </li>
+        </ul>
+      </div>
+      <div>
+        <time datetime="2022-12" class="flex items-center text-lg font-semibold leading-6 text-indigo-600">
+          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
+            <circle class="text-gray-500" cx="2" cy="2" r="2" fill="currentColor" />
+          </svg>
+          Phase 4
+          <div class=""></div>
+        </time>
+        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-600">FULLY FLEDGED ECOSYSTEM</p>
+        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
+            <li>
+                Digital Free Zone set up & running.
+            </li>
+            <li>
+                TF Chapters established globally e.g. Dunia Yetu.
+            </li>
+            <li>
+                Widespread and extensive decentralized and sovereign internet . 
+            </li>
+        </ul>
+      </div>
     </div>
-    
-    <!-- Item #2 -->
-    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white green group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg>
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center space-x-2 mb-1">
-                <div class="font-bold text-slate-900">Phase 1:</div>
-                <div class="font-caveat font-semibold green_text">CREATION OF CORE TECH</div>
-            </div>
-            <p class="text-gray-800 text-md">+30 years of development <br>
-
-                Built decentralized, autonomous, edge internet technology</p>
-           
-        </div>
-    </div>
-    
-    <!-- Item #3 -->
-    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white green group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg>
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center space-x-2 mb-1">
-                <div class="font-bold text-slate-900">Phase 2:</div>
-                <time class="font-caveat font-semibold green_text">PROOF OF CONCEPT</time>
-            </div>
-            <p class="text-gray-800 text-md">Largest and most advanced decentralized autonomous cloud network in the world<br>
-                Contract with Government of ZNZ </p>
-           
-        </div>
-    </div>
-    
-    <!-- Item #4 -->
-    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white blue_b group-[.is-active]:bg-emerald-500 text-white-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg>
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center space-x-2 mb-1">
-                <div class="font-bold text-slate-900">Phase 3:</div>
-                <div class="font-caveat font-semibold blue">COMMERCIALIZATION (Now) </div>
-            </div>
-            <ul class="text-gray-800 text-md">
-                <li>Drive utilization of TFGrid 4.0</li>
-                <li>Underlying layer for DePIN projects</li>
-                <li>Solidify partnerships</li>
-                <li>TF Cooperative established</li>
-            </ul>
-           
-        </div>
-    </div>
-
-     <!-- Item #5 -->
-     <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg>
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center space-x-2 mb-1">
-                <div class="font-bold text-slate-900">Phase 4:</div>
-                <div class="font-caveat font-semibold text-slate-500">FULLY FLEDGED ECOSYSTEM (Soon) </div>
-            </div>
-            <ul class="text-gray-800 text-md">
-                <li>Digital Free Zone set up & running</li>
-                <li>TF Chapters established globally e.g. Dunia Yetu</li>
-                <li>Widespread and extensive decentralized and sovereign internet </li>
-            </ul>
-           
-        </div>
-    </div>
-    
-    <!-- Item #6 -->
-    {# <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
-                <path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" />
-            </svg>
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-bold text-slate-900">Delivered</div>
-                <time class="font-caveat font-medium text-amber-500">Exp. 12/08/2023</time>
-            </div>
-            <div class="text-slate-500">Pretium lectus quam id leo. Urna et pharetra aliquam vestibulum morbi blandit cursus risus.</div>
-        </div>
-    </div> #}
-
-</div>
-
+  </div>
\ No newline at end of file
diff --git a/templates/shortcodes/storymap.html b/templates/shortcodes/storymap.html
new file mode 100644
index 000000000..b7244c599
--- /dev/null
+++ b/templates/shortcodes/storymap.html
@@ -0,0 +1,99 @@
+<div class="space-y-8 lg:pb-24 pb-4 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
+
+    <!-- Item #1 -->
+    <div class="relative hidden flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        {# <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg>
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-bold text-slate-900">Order Placed</div>
+                <time class="font-caveat font-medium text-indigo-500">08/06/2023</time>
+            </div>
+            <div class="text-slate-500">Our journey began, with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</div>
+        </div> #}
+    </div>
+    
+    <!-- Item #2 -->
+    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
+            {# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg> #}
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center space-x-2 mb-1">
+                {# <div class="font-bold text-slate-900">Phase 1:</div> #}
+                {# <div class="font-caveat font-semibold text-lg">OUR JOURNEY BEGAN</div> #}
+            </div>
+            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue">OUR JOURNEY BEGAN </span>with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</p>
+           
+        </div>
+    </div>
+    
+    <!-- Item #3 -->
+    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
+            {# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg> #}
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center space-x-2 mb-1">
+                {# <div class="font-bold text-slate-900">Phase 2:</div> #}
+                {# <time class="font-caveat font-semibold green_text">In response,</time> #}
+            </div>
+            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">In response, </span>we came together with a shared mission—to design a revolutionary decentralized, open-source, inclusive, and sustainable Cloud solution for all.  </p>
+           
+        </div>
+    </div>
+    
+    <!-- Item #4 -->
+    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
+            {# <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg> #}
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center space-x-2 mb-1">
+                {# <div class="font-bold text-slate-900">Phase 3:</div> #}
+                {# <div class="font-caveat font-semibold blue">Today</div> #}
+            </div>
+            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">Today </span>
+                as we embark on the commercialization phase, the ThreeFold Grid is live in 61+ countries, a significant milestone in our ongoing commitment to redefine the future of the digital landscape.
+            </p>
+           
+        </div>
+    </div>
+    
+    <!-- Item #6 -->
+    {# <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
+        <!-- Icon -->
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
+                <path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" />
+            </svg>
+        </div>
+        <!-- Card -->
+        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-bold text-slate-900">Delivered</div>
+                <time class="font-caveat font-medium text-amber-500">Exp. 12/08/2023</time>
+            </div>
+            <div class="text-slate-500">Pretium lectus quam id leo. Urna et pharetra aliquam vestibulum morbi blandit cursus risus.</div>
+        </div>
+    </div> #}
+
+</div>
+