diff --git a/content/host/index.md b/content/host/index.md
index 025ed5823..d5977c8d3 100644
--- a/content/host/index.md
+++ b/content/host/index.md
@@ -38,6 +38,7 @@ ThreeFold Farming is a unique concept in the ThreeFold ecosystem where individua
 - Earn rewards whenever your nodes provide capacity and are actively utilized on the grid.
 - Support a peer-to-peer cloud infrastructure alternative to centralized providers
 
+</div>
 </div>
 
 <!-- ------------------------------------------------------------------------------------- -->
@@ -86,26 +87,21 @@ Mycelium can look for the shortest path, has a built-in naming & CDN (Content De
 </blockquote>
 </div>
 </div>
-<div class="container max-w-5xl">
+</div>
 
-<br>
-<br>
-<br>
+
+<!-- ------------------------------------------------------------------------------------- -->
+
+<!-- section 3 (The Power of 3Node ) -->
+
+<div class="lg:py-24 py-12 px-4 lg:px-8">
+<div class="container max-w-7xl mx-auto">
 
 ## Build your own: DIY 3Node
 
 ThreeFold makes it easy to become part of the network by setting up your own node. With compatible hardware, a stable internet connection, and a few simple steps, you can get started quickly and start contributing to the network and earning utilization rewards.
 
-<br>
-<br>
-
-
-### HOW IT WORKS
-
-
- <br>
-
-<ol class="relative text-gray-500 border-s border-gray-200 dark:border-gray-700 dark:text-gray-400">                  
+<!-- <ol class="relative text-gray-500 border-s border-gray-200 dark:border-gray-700 dark:text-gray-400">                  
     <li class="mb-10 ms-6">            
         <h3 class="font-medium leading-tight">Create a Farm</h3>
         <p class="text-sm lg:text-base">Simply download the <a href="https://docs.threefold.io/docs/become-a-farmer/create_a_farm#download-the-app" class="text-white font-semibold">ThreeFold Connect App</a>, create an account and then create a farm.</p>
@@ -131,9 +127,10 @@ ThreeFold makes it easy to become part of the network by setting up your own nod
 
 <div class="mt-6 lg:mt-16 flex items-lefy justify-left">
         <a href="https://manual.grid.tf/farmers/category/build-a-3node" target="_black" class="fade-in rounded-2xl bg-white px-4 py-2 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Step-by-Step Guide</a>
-  </div>
+  </div> -->
+
+{{ vertical_timeline() }}
 
-</div>
 </div>
 </div>
 
diff --git a/templates/shortcodes/image_card.html b/templates/shortcodes/image_card.html
index b6069f390..20317badb 100644
--- a/templates/shortcodes/image_card.html
+++ b/templates/shortcodes/image_card.html
@@ -19,7 +19,7 @@
          
         <div class="fade-in-box flex flex-col p-6 rounded-2xl  bg-white/5">
           {% if header %}
-          <h2 class="lg:text-3xl text-2xl text-center flex justify-center items-center text-white">{{ header }}</h2>
+          <h2 class="text-2xl text-center flex justify-center items-center text-white">{{ header }}</h2>
           {% endif %}
 
           {% if image_src %}
diff --git a/templates/shortcodes/vertical_timeline.html b/templates/shortcodes/vertical_timeline.html
new file mode 100644
index 000000000..3520ea74d
--- /dev/null
+++ b/templates/shortcodes/vertical_timeline.html
@@ -0,0 +1,44 @@
+<section>
+	<div class="container max-w-7xl py-10 mx-auto">
+		<div class="grid gap-4 mx-4 sm:grid-cols-12">
+			<div class="col-span-12 sm:col-span-3">
+				<div class="mb-6">
+					<h3 class="text-4xl font-semibold">How It Works</h3>
+				</div>
+			</div>
+			<div class="relative col-span-12 space-y-6 sm:col-span-9">
+				<div class="col-span-12 space-y-6 relative px-4 sm:col-span-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:bg-gray-600">
+					<div class="flex flex-col before:content-[''] sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-gray-400">
+
+						<h3 class="text-xl font-medium">Create a Farm </h3>
+						<p class="text-md">Simply download the <a href="https://docs.threefold.io/docs/become-a-farmer/create_a_farm#download-the-app" target="_blank" class="text-white hover:text-gray-300 font-semibold">ThreeFold Connect App</a>, create an account and then create a farm.</p>
+					</div>
+					<div class="flex flex-col before:content-[''] sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-gray-400">
+
+						<h3 class="text-xl font-medium">Create a Zero-OS bootstrap image </h3>
+						<p class="text-md">Download the Zero-OS bootstrap image and flash it to a USB drive using a tool like balenaEtcher.</p>
+					</div>
+					<div class="flex flex-col before:content-[''] sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-gray-400">
+
+						<h3 class="text-xl font-medium">Choose Your Hardware </h3>
+						<p class="text-md">Plug in the USB, power on your device, and follow the setup instructions.</p>
+					</div>
+					<div class="flex flex-col before:content-[''] sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-gray-400">
+
+						<h3 class="text-xl font-medium">Register Your Node </h3>
+						<p class="text-md">Once it’s running, register your node and assign it to your farm via the ThreeFold Connect App.</p>
+					</div>
+					<div class="flex flex-col before:content-[''] sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-gray-400">
+
+						<h3 class="text-xl font-medium">Go Live </h3>
+						<p class="text-md">After it’s connected, list your node on the Marketplace and start sharing your capacity.</p>
+					</div>
+					<div class="mt-6 lg:mt-16 flex items-left justify-left">
+						<a href="https://manual.grid.tf/farmers/category/build-a-3node" target="_black" class="fade-in rounded-2xl bg-white px-4 py-2 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Step-by-Step Guide</a>
+				  </div>
+				</div>
+			</div>
+		</div>
+		
+	</div>
+</section>
\ No newline at end of file