diff --git a/src/app/page.tsx b/src/app/page.tsx
index 86dd655..f7e7240 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
+import HeroOverlay from "@/components/sections/hero/HeroOverlay";
 import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
 import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
 import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
@@ -41,19 +41,18 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard
-          logoText="United States of America"
+        <HeroOverlay
+          title="United States of America"
           description="Celebrating the spirit of liberty, democracy, and unity that define our nation. Explore the history, values, and achievements that make America exceptional."
           buttons={[
             { text: "Discover Heritage", href: "#about" },
             { text: "Learn Our Story", href: "#features" }
           ]}
-          background={{ variant: "sparkles-gradient" }}
           imageSrc="http://img.b2bpic.net/free-photo/front-view-usa-flag-drawer_23-2148513069.jpg"
           imageAlt="American flag waving proudly"
-          frameStyle="card"
           mediaAnimation="slide-up"
           buttonAnimation="slide-up"
+          overlayOpacity={0.4}
         />
       </div>