diff --git a/src/app/page.tsx b/src/app/page.tsx
index 97b7a95..3067cd4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,6 +12,7 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 import Link from 'next/link';
 import { Sparkles, CheckCircle, ArrowRight, Brain, Code, BookOpen, Users, Trophy, TrendingUp, Shield } from 'lucide-react';
 import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
+import HeroLogo from '@/components/sections/hero/HeroLogo';
 
 export default function HomePage() {
   return (
@@ -45,18 +46,18 @@ export default function HomePage() {
       </div>
 
       <div id="hero-section" data-section="hero-section">
-        <HeroCarouselLogo
-          title="Computer Club"
+        <HeroLogo
+          logoText="Computer Club"
           description="Join our vibrant community of tech enthusiasts. Explore cutting-edge projects, attend workshops, and connect with fellow innovators."
-          background={{ variant: "radial-gradient" }}
-          tag="Welcome"
           buttons={[
-            { label: "Join Us", href: "/join", dataWebildId: "hero_join_btn" },
-            { label: "View Events", href: "/events", dataWebildId: "hero_events_btn" }
+            { label: "Join Us", href: "/join", dataWebildId: "hero_logo_join_btn" },
+            { label: "View Events", href: "/events", dataWebildId: "hero_logo_events_btn" }
           ]}
-          imageSrc="https://img.b2bpic.net/free-photo/group-young-people-doing-experiments-robotics-laboratory-girls-protective-glasses_1268-24389.jpg"
-          imageAlt="Computer Club members collaborating on tech projects"
-          ariaLabel="Computer Club hero section"
+          buttonAnimation="none"
+          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
+          imageAlt="Computer Club community"
+          showDimOverlay={true}
+          ariaLabel="Computer Club hero section with logo"
         />
       </div>