diff --git a/src/app/globals.css b/src/app/globals.css
index eb6de65..e13a194 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -34,11 +34,8 @@ html {
   scroll-behavior: smooth;
 }
 
-/* Header background - uses the original cadCAD background image */
+/* Header background */
 .header-background {
-  background-image: url('/images/cadcad-bg.png');
-  background-size: cover;
-  background-position: center;
   background-color: #161645;
 }
 
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 98dbc77..e94d6c7 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,11 +1,23 @@
-import CadCADLogo from "./CadCADLogo";
+import Image from "next/image";
 
 export default function Hero() {
   return (
-    <section className="header-background relative flex min-h-screen items-center justify-center px-6 pt-20 text-center text-white">
-      <div className="container mx-auto flex flex-col items-center px-3 md:w-3/5">
-        <CadCADLogo className="mb-4 h-16 md:h-20" variant="color" />
-        <h1 className="my-4 text-5xl font-bold leading-tight">cadCAD</h1>
+    <section className="header-background relative min-h-screen pb-12 text-center text-white">
+      {/* Background image - full width, hexagon shifted upward */}
+      <div className="absolute inset-0 overflow-hidden">
+        <Image
+          src="/images/cadcad-bg.png"
+          alt=""
+          fill
+          className="object-cover object-[center_90%]"
+          priority
+        />
+      </div>
+
+      {/* Text content anchored to lower third */}
+      <div className="relative flex min-h-screen flex-col justify-end px-6">
+        <div className="container mx-auto flex flex-col items-center px-3 md:w-3/5">
+        <h1 className="mt-19 mb-4 text-5xl font-bold leading-tight">cadCAD</h1>
         <p className="mb-2 text-lg italic text-white/80">
           Complex Adaptive Dynamics Computer-Aided Design
         </p>
@@ -32,10 +44,11 @@ export default function Hero() {
             Join our community
           </a>
         </div>
+        </div>
       </div>
 
       {/* Scroll indicator */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
+      <div className="absolute bottom-2 left-1/2 -translate-x-1/2 animate-bounce">
         <svg
           className="h-6 w-6 text-white"
           fill="none"