diff --git a/src/app/page.tsx b/src/app/page.tsx
index cdedf8e..4028b00 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 import { CallToAction } from '@/components/CallToAction'
 import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
-import { Header } from '@/components/Header'
+import { Header_darkbg } from '@/components/Header_darkbg'
 import { Hero } from '@/components/Hero'
 import { Pricing } from '@/components/Pricing'
 import { PrimaryFeatures } from '@/components/PrimaryFeatures'
@@ -11,7 +11,7 @@ import { Testimonials } from '@/components/Testimonials'
 export default function Home() {
   return (
     <>
-      <Header />
+      <Header_darkbg />
       <main>
         <Hero />
         <PrimaryFeatures />
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 5eee273..53f489e 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -29,7 +29,7 @@ export function Hero() {
       
       {/* Content */}
       
-      <Container className="relative z-20 pt-20 pb-16 text-center lg:pt-32">
+      <Container className="relative z-20 pt-24 pb-16 text-center lg:pt-32">
         <div className="hidden sm:mb-8 sm:flex sm:justify-center">
             <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-100 ring-1 ring-gray-100/20 hover:ring-gray-100/5">
               Interested to Take Part?{' '}
@@ -42,7 +42,7 @@ export function Hero() {
       <div className="mx-auto max-w-4xl flex justify-center">
         <Logo_hero className='lg:h-auto h-0.5' />
       </div>
-      <p className="mx-auto lg:mt-6 mt-2 max-w-2xl text-xl lg:text-2xl tracking-tight font-medium text-white/90">
+      <p className="mx-auto lg:mt-6 mt-4 max-w-2xl text-xl lg:text-2xl tracking-tight font-medium text-white/90">
         Shaping the future of Augmented Collective Intelligence
       </p>
       <p className="mx-auto mt-6 max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
@@ -51,7 +51,7 @@ export function Hero() {
       <div className="mt-10 flex justify-center">
         <Button href="/about" color="white">Learn More</Button>
       </div>
-      <div className="mt-24 lg:mt-24">
+      <div className="mt-16 lg:mt-24">
         <ul
           role="list"
           className="mt-8 flex items-center justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index b3918fe..70a2475 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -14,13 +14,13 @@
   --text-sm: 0.875rem;
   --text-sm--line-height: 1.5rem;
   --text-base: 1rem;
-  --text-base--line-height: 1.75rem;
+  --text-base--line-height: 1.5rem;
   --text-lg: 1.125rem;
-  --text-lg--line-height: 2rem;
+  --text-lg--line-height: 1.75rem;
   --text-xl: 1.25rem;
-  --text-xl--line-height: 2rem;
+  --text-xl--line-height: 1.75rem;
   --text-2xl: 1.5rem;
-  --text-2xl--line-height: 2rem;
+  --text-2xl--line-height: 1.75rem;
   --text-3xl: 2rem;
   --text-3xl--line-height: 2.5rem;
   --text-4xl: 2.5rem;