diff --git a/templates/shortcodes/header_section.html b/templates/shortcodes/header_section.html
index b575c9de5..ef36e4ac8 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="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">
+  <div class="mx-auto max-w-7xl px-4 mt-8 lg:px-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 lg:items-center">
       {# <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,19 +11,19 @@
           </radialGradient>
         </defs>
       </svg> #}
-      <div class="mx-auto max-w-md lg:mx-0 lg:flex-auto lg:py-10 text-left">
+      <div class="mx-auto max-w-md lg:mx-0 lg:flex-auto  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">ThreeFold Cloud</h2>
         <dt class="text-lg font-normal text-white">Open-Source Cloud</dt>
         <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>
+          <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" rel="noopener">Manual</a>
           
         </div>
       </div>
-      <div class="relative mt-16 h-80 lg:mt-8">
-        <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 class="relative py-16 lg:py-24 lg:flex-1">
+        <img class="w-full h-auto max-w-2xl rounded-md bg-white/5 ring-1 ring-white/10 object-contain" src="/images/app.png" alt="App screenshot">
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>