diff --git a/content/about/index.md b/content/about/index.md
index a0726f8..92c3924 100644
--- a/content/about/index.md
+++ b/content/about/index.md
@@ -83,7 +83,7 @@ extra:
 
 <!-- section 6 -->
 
-{{ header_center(
+{{ text_center(
     title="A Part of ThreeFold Ecosystem",
     subheader="BENEFITS",
     subtitle="An Integral Component of Sustainable Decentralization",
diff --git a/content/home/index.md b/content/home/index.md
index 09c2447..8ed1243 100644
--- a/content/home/index.md
+++ b/content/home/index.md
@@ -10,7 +10,7 @@ extra:
 
 <!-- Hero section 1 -->
 
-{{ hero_right_img(
+{{ hero(
     image_src="/images/mycel_1.png",
     image_alt="Mycelium Network Graphic",
     title="MYCELIUM",
diff --git a/templates/layouts/hero.html b/templates/layouts/hero.html
deleted file mode 100644
index 21c6c35..0000000
--- a/templates/layouts/hero.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<div class="bg-white">
-    <header class="absolute inset-x-0 top-0 z-50">
-      <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
-        <div class="flex lg:hidden">
-          <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
-            <span class="sr-only">Open main menu</span>
-            <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-            </svg>
-          </button>
-        </div>
-        <div class="hidden lg:flex lg:gap-x-12">
-          <a href="#" class="text-sm/6 font-semibold text-gray-900">Product</a>
-          <a href="#" class="text-sm/6 font-semibold text-gray-900">Features</a>
-          <a href="#" class="text-sm/6 font-semibold text-gray-900">Marketplace</a>
-          <a href="#" class="text-sm/6 font-semibold text-gray-900">Company</a>
-        </div>
-        <div class="hidden lg:flex lg:flex-1 lg:justify-end">
-          <a href="#" class="text-sm/6 font-semibold text-gray-900">Log in <span aria-hidden="true">&rarr;</span></a>
-        </div>
-      </nav>
-      <!-- Mobile menu, show/hide based on menu open state. -->
-      <div class="lg:hidden" role="dialog" aria-modal="true">
-        <!-- Background backdrop, show/hide based on slide-over state. -->
-        <div class="fixed inset-0 z-50"></div>
-        <div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
-          <div class="flex items-center justify-between">
-            <a href="#" class="-m-1.5 p-1.5">
-              <span class="sr-only">Your Company</span>
-              <img class="h-8 w-auto" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600" alt="">
-            </a>
-            <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
-              <span class="sr-only">Close menu</span>
-              <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-          <div class="mt-6 flow-root">
-            <div class="-my-6 divide-y divide-gray-500/10">
-              <div class="space-y-2 py-6">
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Product</a>
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Features</a>
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Marketplace</a>
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Company</a>
-              </div>
-              <div class="py-6">
-                <a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Log in</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-  
-    <div class="relative isolate px-6 pt-14 lg:px-8">
-      <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
-        <div class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
-      </div>
-      <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
-        <div class="hidden sm:mb-8 sm:flex sm:justify-center">
-          <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
-            Announcing our next round of funding. <a href="#" class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
-          </div>
-        </div>
-        <div class="text-center">
-          <h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">Data to enrich your online business</h1>
-          <p class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
-          <div class="mt-10 flex items-center justify-center gap-x-6">
-            <a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
-            <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
-          </div>
-        </div>
-      </div>
-      <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
-        <div class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
-      </div>
-    </div>
-  </div>
-  
\ No newline at end of file
diff --git a/templates/shortcodes/header_new.html b/templates/shortcodes/header_new.html
deleted file mode 100644
index da2fea5..0000000
--- a/templates/shortcodes/header_new.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="text-gray-900 bg-cover bg-no-repeat mybg" style="background-image:url(expand/BG_wide.png)">
-    <div class="h-full">
-      <div class="flex flex-col items-center md:flex-row">
-       <div class="w-full md:w-1/2">
-          <div class="block">
-            <img
-                src="expand/togethericon.png" class="w-full h-full"/>
-          </div>
-        </div>
-        <div class="flex flex-col items-start justify-center w-full py-24 md:w-1/2">
-          <div class="flex flex-col items-start justify-center p-6">
-            <h1>Be the <strong>Internet</strong></h1>
-            <h3 class="my-0">Host a node, support a decentralized future</h3>
-            <p>By connecting a modern computer at your home or office to the ThreeFold Grid, you can provide Internet capacity to communities and builders, and be rewarded for doing this. Take part in shaping a new Internet era governed by all of us.</p>
-            <button class="mx-0"><a target="_blank" href="https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html">Get Started</a></button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
\ No newline at end of file
diff --git a/templates/shortcodes/hero.html b/templates/shortcodes/hero.html
new file mode 100644
index 0000000..08dc6a3
--- /dev/null
+++ b/templates/shortcodes/hero.html
@@ -0,0 +1,35 @@
+{% set image_src = image_src | default(value="") %}
+{% set image_alt = image_alt | default(value="") %}
+{% set title = title | default(value="MYCELIUM") %}
+{% set subtitle = subtitle | default(value="") %}
+{% set description = description | default(value="") %}
+{% set highlight = highlight | default(value="") %}
+{% set button_text = button_text | default(value="") %}
+{% set button_link = button_link | default(value="") %}
+
+
+
+<div class="relative fade-in pt-10 mt-4 lg:mt-24 lg:pt-24 lg:h-screen">
+  <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
+    <div class="px-6 lg:col-span-7 lg:px-0 xl:col-span-6">
+      <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
+        <h1 class="text-4xl font-semibold tracking-tight text-black lg:text-6xl">
+          {{ title }}
+        </h1>
+        <h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight text-black">{{ subtitle }}
+                  </h2>
+        <p class="mt-8 text-pretty lg:text-xl text-lg  font-light text-black lgl:text-xl">
+          {{ description }} <br><br> <b>{{ highlight }}</b>
+        </p>
+        <div class="mt-10 flex items-center gap-x-6">
+            <a href="{{ button_link }}" class="rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
+              {{ button_text }}
+            </a>
+        </div>
+    </div>
+    </div>
+    <div class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0 ">
+      <img class="lg:mt-10 aspect-1/1 mx-auto w-full sm:w-2/3 md:w-1/2 lg:w-full object-cover lg:absolute lg:inset-0 lg:aspect-auto" src="{{ image_src }}" alt="{{ image_alt }}">
+    </div>
+  </div>
+</div>
diff --git a/templates/shortcodes/header_center.html b/templates/shortcodes/text_center.html
similarity index 100%
rename from templates/shortcodes/header_center.html
rename to templates/shortcodes/text_center.html