diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2fdf78e..645b887 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -21,7 +21,7 @@ export default function Home() {
       <main>
         <HomeStickyHeader />
         <section className="relative min-h-screen">
-          <Hero className="-mt-20" />
+          <Hero className="md:-mt-18 -mt-20" />
         </section>
 
         <FadeInOnView delayMs={100}>
diff --git a/src/components/UI/Texts.tsx b/src/components/UI/Texts.tsx
index 7951e54..bdad61a 100644
--- a/src/components/UI/Texts.tsx
+++ b/src/components/UI/Texts.tsx
@@ -77,12 +77,12 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 // Headings default to Quicking font
 export const H1 = createTextComponent(
   'h1',
-  'text-5xl lg:text-7xl font-medium lg:leading-tight leading-normal tracking-tight',
+  'text-5xl lg:text-7xl font-medium leading-[0.9] lg:leading-tight  tracking-tight',
   { font: 'quicking' }
 )
 export const H2 = createTextComponent(
   'h2',
-  'text-4xl lg:text-5xl font-medium leading-tight tracking-tight',
+  'text-3xl lg:text-5xl font-medium leading-tight tracking-tight',
   { font: 'quicking' }
 )
 export const H3 = createTextComponent(
diff --git a/src/components/home/About.tsx b/src/components/home/About.tsx
index 04ed511..7a4b658 100644
--- a/src/components/home/About.tsx
+++ b/src/components/home/About.tsx
@@ -32,7 +32,7 @@ export function About() {
          
         </div>
         <div className="mx-auto mt-12 max-w-2xl  lg:max-w-none">
-          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 lg:gap-y-16 gap-y-8 lg:max-w-none lg:grid-cols-3">
             {features.map((feature) => (
               <div key={feature.name} className="flex flex-col">
                 <div className="my-8 h-[2px] w-3/4 bg-gray-300 overflow-hidden">
diff --git a/src/components/home/Foundation.tsx b/src/components/home/Foundation.tsx
index 3b32858..045dfd9 100644
--- a/src/components/home/Foundation.tsx
+++ b/src/components/home/Foundation.tsx
@@ -36,7 +36,7 @@ export function Foundation() {
   return (
     <div className="bg-transparent py-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 lg:gap-y-20 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-5">
           <div className="col-span-2">
             <H2>
               The Foundation of Every Venture
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index 96d682a..0e5c252 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -14,7 +14,12 @@ type HeroProps = {
 
 export function Hero({ className }: HeroProps) {
   return (
-    <div className={clsx('relative overflow-hidden min-h-screen', className)}>
+    <div
+      className={clsx(
+        'relative min-h-screen overflow-hidden flex flex-col justify-center md:block -z-20',
+        className,
+      )}
+    >
       {/* Video Background */}
       <video
         autoPlay
@@ -44,12 +49,12 @@ export function Hero({ className }: HeroProps) {
 
         <FadeInOnView
           delayMs={300}
-          className="mx-auto md:mx-0 md:ml-auto md:w-[60%] space-y-6 flex flex-col items-center md:items-start"
+          className="mx-auto md:mx-0 md:ml-auto md:w-[60%] space-y-6 flex flex-col items-start"
         >
-          <P className="max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
+          <P className="mt-6 max-w-2xl text-lg lg:text-xl tracking-tight text-white/90">
             At OurWorld, we are building the required infrastructures and tools to enable an Augmented Collective Intelligence ;  creating a sovereign, sustainable, and autonomous future for all.
           </P>
-          <Button href="/about" variant="outline" color="white" className="w-full md:w-auto mt-4">
+          <Button href="/about" variant="outline" color="white" className="mt-4 md:w-auto">
             Learn More
           </Button>
         </FadeInOnView>
diff --git a/src/components/home/Team.tsx b/src/components/home/Team.tsx
index 77c8f66..c339d5b 100644
--- a/src/components/home/Team.tsx
+++ b/src/components/home/Team.tsx
@@ -53,19 +53,23 @@ export function Team() {
           </Button>
         </div>
         <div className="mx-auto mt-16 max-w-6xl px-4 sm:px-6 lg:px-0">
-          <dl className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-4">
+          <dl className="grid grid-cols-1 gap-x-8 gap-y-8 lg:gap-y-16 lg:grid-cols-4">
             {members.map((member) => (
               <div key={member.src} className="flex flex-col">
                 <dd className="flex flex-auto flex-col">
-                  <div className="group relative mx-auto max-w-xs overflow-hidden rounded-lg">
+                  <div
+                    className="group relative mx-auto max-w-xs overflow-hidden rounded-lg cursor-pointer"
+                    tabIndex={0}
+                    role="button"
+                  >
                     <Image
                       src={member.src}
                       alt={member.alt}
                       width={480}
                       height={320}
-                      className="h-auto w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                      className="h-auto w-full object-cover transition-transform duration-300 lg:group-hover:scale-105"
                     />
-                    <div className="pointer-events-none absolute inset-0 flex flex-col justify-between bg-black/70 opacity-0 transition-opacity duration-200 group-hover:opacity-100 p-5 text-left text-white">
+                    <div className="pointer-events-none absolute inset-0 flex flex-col justify-between bg-black/70 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-active:opacity-100 group-focus-visible:opacity-100 p-5 text-left text-white">
                       <div>
                         <p className="text-lg font-semibold leading-snug">{member.name}</p>
                         <p className="text-sm mt-1 opacity-80">{member.role}</p>
diff --git a/src/components/home/Ventures.tsx b/src/components/home/Ventures.tsx
index 65c9837..79ac0fa 100644
--- a/src/components/home/Ventures.tsx
+++ b/src/components/home/Ventures.tsx
@@ -43,7 +43,7 @@ export function Ventures() {
           </div>
         </div>
         <div className="mx-auto mt-24 max-w-2xl lg:max-w-none">
-          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:gap-y-16 lg:max-w-none lg:grid-cols-3">
             {ventures.map((venture) => (
               <div key={venture.src} className="flex flex-col">
                 <dd className="flex flex-auto flex-col">