diff --git a/content/home/index.md b/content/home/index.md
index 8ad82bc77..70e1d1905 100644
--- a/content/home/index.md
+++ b/content/home/index.md
@@ -150,6 +150,8 @@ extra:
 
 {{ header_section() }}
 
+<div class="lg:mt-8 border-t border-gray-700"></div>
+
 <div class="mt-12 flex items-center justify-center gap-x-6">
           <a href="/deploy" class="mr-2 fade-in rounded-2xl bg-white px-8 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Start Deploing</a>
           <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" class="mr-2 fade-in rounded-2xl bg-white px-8 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Explore Dashboard</a>
diff --git a/templates/shortcodes/header_section.html b/templates/shortcodes/header_section.html
index 38aaaa14f..b575c9de5 100644
--- a/templates/shortcodes/header_section.html
+++ b/templates/shortcodes/header_section.html
@@ -1,7 +1,7 @@
 <!-- component -->
 <div class="">
   <div class="mx-auto max-w-7xl px-4  lg:px-0">
-    <div class="relative isolate overflow-hidden bg-red-700 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+    <div class="bg-white/5 relative isolate overflow-hidden bg-red-700 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
       {# <svg viewBox="0 0 1024 1024" class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0" aria-hidden="true">
         <circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
         <defs>
@@ -11,18 +11,18 @@
           </radialGradient>
         </defs>
       </svg> #}
-      <div class="mx-auto max-w-md lg:mx-0 lg:flex-auto lg:py-6 text-left">
+      <div class="mx-auto max-w-md lg:mx-0 lg:flex-auto lg:py-10 text-left">
         <img class="fade-in" width="30%" src="/images/tft_logo.png" alt="TF logo">
-        <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">ThreeFold Cloud</h2>
+        <h2 class="text-3xl font-bold tracking-tight text-white">ThreeFold Cloud</h2>
         <dt class="text-lg font-normal text-white">Open-Source Cloud</dt>
-        <p class="mt-6">ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.</p>
-        <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
+        <p class="mt-2 text-base">ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.</p>
+        <div class="mt-6 flex items-center justify-center gap-x-6 lg:justify-start">
           <a href="https://manual.grid.tf/" class="mr-2 fade-in rounded-2xl bg-white px-8 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">Manual</a>
           
         </div>
       </div>
       <div class="relative mt-16 h-80 lg:mt-8">
-        <img class="absolute left-0 top-0 w-[40rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10" src="/images/app.png" alt="App screenshot" width="800" height="800">
+        <img class="absolute left-0 top-0 w-[48rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10" src="/images/app.png" alt="App screenshot" width="800" height="800">
       </div>
     </div>
   </div>