diff --git a/src/components/FloatingContributors/README.md b/src/components/FloatingContributors/README.md
index 60961684..4b7c6345 100644
--- a/src/components/FloatingContributors/README.md
+++ b/src/components/FloatingContributors/README.md
@@ -79,7 +79,7 @@ The `FloatingContributors` component is a dynamic React component that displays
 
 2. Use it in your application:
    ```tsx
-   <FloatingContributors headerEmbedded={false} />
+   <FloatingContributors heroEmbedded={false} />
    ```
 
 ---
diff --git a/src/components/FloatingContributors/index.tsx b/src/components/FloatingContributors/index.tsx
index 171af61f..a08d3182 100644
--- a/src/components/FloatingContributors/index.tsx
+++ b/src/components/FloatingContributors/index.tsx
@@ -100,11 +100,11 @@ interface ContributorActivity {
 }
 
 interface FloatingContributorsProps {
-  headerEmbedded?: boolean;
+  heroEmbedded?: boolean;
 }
 
 const FloatingContributors: React.FC<FloatingContributorsProps> = ({
-  headerEmbedded = false,
+  heroEmbedded = false,
 }) => {
   const [contributors, setContributors] = useState<Contributor[]>([]);
   const [activities, setActivities] = useState<ContributorActivity[]>([]);
@@ -491,11 +491,11 @@ const FloatingContributors: React.FC<FloatingContributorsProps> = ({
     <AnimatePresence>
       {isVisible && (
         <motion.div
-          className={`floating-contributors-container ${headerEmbedded ? "header-embedded" : ""}`}
+          className={`floating-contributors-container ${heroEmbedded ? "header-embedded" : ""}`}
           initial={{
             opacity: 0,
-            y: headerEmbedded ? 0 : 50,
-            scale: headerEmbedded ? 1 : 0.9,
+            y: heroEmbedded ? 0 : 50,
+            scale: heroEmbedded ? 1 : 0.9,
           }}
           animate={{
             opacity: 1,
@@ -504,11 +504,11 @@ const FloatingContributors: React.FC<FloatingContributorsProps> = ({
           }}
           exit={{
             opacity: 0,
-            y: headerEmbedded ? 0 : 50,
-            scale: headerEmbedded ? 1 : 0.9,
+            y: heroEmbedded ? 0 : 50,
+            scale: heroEmbedded ? 1 : 0.9,
           }}
           transition={{
-            duration: headerEmbedded ? 0.8 : 0.6,
+            duration: heroEmbedded ? 0.8 : 0.6,
             ease: [0.4, 0, 0.2, 1],
           }}
         >
@@ -516,14 +516,14 @@ const FloatingContributors: React.FC<FloatingContributorsProps> = ({
           <motion.div
             className="floating-contributors-card"
             animate={
-              headerEmbedded
+              heroEmbedded
                 ? {}
                 : {
                     y: [0, -8, 0],
                   }
             }
             transition={
-              headerEmbedded
+              heroEmbedded
                 ? {}
                 : {
                     duration: 4,
diff --git a/src/components/header.tsx b/src/components/header.tsx
deleted file mode 100644
index 3ba7ca67..00000000
--- a/src/components/header.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import "./header.css"; // Importing styles from external CSS file
-import Link from "@docusaurus/Link"; // Importing Link component from Docusaurus
-import VanillaTilt from "vanilla-tilt"; // Importing VanillaTilt for image tilt effect
-import { motion } from "framer-motion"; // Importing motion components from Framer Motion
-import ParticlesComponent from "./particle"; // Importing custom ParticlesComponent
-
-declare global {
-  interface HTMLImageElement {
-    vanillaTilt?: {
-      destroy: () => void;
-    };
-  }
-}
-
-/**
- * Renders the header content section of the application.
- * Includes a title, description, and buttons for navigation.
- * @returns JSX element representing the header content.
- */
-const HeaderContent = () => {
-  return (
-    <div className="chh__header-content">
-      {/* Title with animated text gradient and particles effect */}
-      <motion.h1
-        initial={{ opacity: 0, x: -10 }} // Initial animation properties
-        whileInView={{ opacity: 1, x: 0 }} // Animation while in view
-        viewport={{ once: true }} // Animation triggers once
-        transition={{
-          // Animation transition settings
-          duration: 1,
-          type: "spring",
-          stiffness: 100,
-          delay: 0.1,
-        }}
-        className="gradient__text" // CSS class for gradient text
-      >
-        <ParticlesComponent /> {/* Render ParticlesComponent */}
-        Level Up Skills with recode hive{/* Text content */}
-      </motion.h1>
-
-      {/* Description paragraph with animated entrance */}
-      <motion.p
-        initial={{ opacity: 0, x: -10 }} // Initial animation properties
-        whileInView={{ opacity: 1, x: 0 }} // Animation while in view
-        viewport={{ once: true }} // Animation triggers once
-        transition={{
-          // Animation transition settings
-          duration: 1,
-          type: "spring",
-          stiffness: 100,
-          delay: 0.2,
-        }}
-      >
-        recode hive helps you get started with open-source contributions. We
-        have built an inclusive community from people from all around the world.
-        We ain't doing any magic, we make the learning much more simplified and
-        practical, which traditional education couldn't provide to you. Join our
-        community to earn while learning.
-      </motion.p>
-
-      {/* Buttons for navigation */}
-      <div className="chh__header-content__input">
-        {/* Button with animated entrance */}
-        <motion.button
-          initial={{ opacity: 0, x: -10 }} // Initial animation properties
-          whileInView={{ opacity: 1, x: 0 }} // Animation while in view
-          viewport={{ once: true }} // Animation triggers once
-          transition={{
-            // Animation transition settings
-            duration: 1,
-            type: "spring",
-            stiffness: 100,
-            delay: 0.3,
-          }}
-          type="button" // Button type
-        >
-          {/* Link to documentation page */}
-          <Link to="/docs" className="chh__header-content__input--link">
-            Get Started
-          </Link>
-        </motion.button>
-
-        {/* Button with animated entrance */}
-        <motion.button
-          initial={{ opacity: 0, x: 10 }} // Initial animation properties
-          whileInView={{ opacity: 1, x: 0 }} // Animation while in view
-          viewport={{ once: true }} // Animation triggers once
-          transition={{
-            // Animation transition settings
-            duration: 1,
-            type: "spring",
-            stiffness: 100,
-            delay: 0.2,
-          }}
-          type="button" // Button type
-        >
-          {/* Link to courses page */}
-          <Link to="/courses" className="chh__header-content__input--link">
-            Courses
-          </Link>
-        </motion.button>
-      </div>
-    </div>
-  );
-};
-
-/**
- * Renders the header image section with tilt effect.
- * @returns JSX element representing the header image.
- */
-const HeaderImage = () => {
-  const imgRef = useRef<HTMLImageElement>(null); // Ref for the header image element
-
-  useEffect(() => {
-    // Initialize VanillaTilt effect on image ref
-    if (imgRef.current) {
-      VanillaTilt.init(imgRef.current, {
-        max: 25,
-        speed: 50,
-        glare: true,
-        "max-glare": 0.5,
-      });
-    }
-
-    // Cleanup function to destroy VanillaTilt instance
-    return () => {
-      if (imgRef.current?.vanillaTilt) {
-        imgRef.current.vanillaTilt.destroy();
-      }
-    };
-  }, []); // Run effect only once on component mount
-
-  return (
-    // Animated wrapper for the header image
-    <motion.div
-      initial={{ scale: 0, x: 10 }} // Initial animation properties
-      whileInView={{ scale: 0.8, x: 0 }} // Animation while in view
-      viewport={{ once: true }} // Animation triggers once
-      transition={{
-        // Animation transition settings
-        duration: 1,
-        type: "spring",
-        stiffness: 100,
-        delay: 0.3,
-      }}
-      className="chh__header-image" // CSS class for header image container
-    >
-      {/* Actual header image element */}
-      <img
-        src="/img/hero-img-01.gif" // Image source
-        alt="hero-img" // Alt attribute
-        className="" // Additional CSS class
-        data-tilt // Activate VanillaTilt effect
-        ref={imgRef} // Reference for image element
-      />
-    </motion.div>
-  );
-};
-
-/**
- * Renders the complete header component of the application.
- * @returns JSX element representing the complete header.
- */
-const Header: React.FC = () => {
-  return (
-    <div className="chh__header--body">
-      {" "}
-      {/* Container for header */}
-      <div className="chh__header">
-        {" "}
-        {/* Main header container */}
-        <HeaderContent /> {/* Render header content section */}
-        <HeaderImage /> {/* Render header image section */}
-      </div>
-    </div>
-  );
-};
-
-export default Header;
diff --git a/src/components/header/header.css b/src/components/hero/hero.css
similarity index 75%
rename from src/components/header/header.css
rename to src/components/hero/hero.css
index ed35b535..81ce3539 100644
--- a/src/components/header/header.css
+++ b/src/components/hero/hero.css
@@ -1,4 +1,4 @@
-.chh__header--body {
+.chh__hero--body {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -12,12 +12,12 @@
     color 0.4s ease;
 }
 
-[data-theme="dark"] .chh__header--body {
+[data-theme="dark"] .chh__hero--body {
   background: linear-gradient(to right, #222121, #1d1b1b);
   color: #fff;
 }
 
-.chh__header {
+.chh__hero {
   display: flex;
   flex-direction: row;
   position: relative;
@@ -25,7 +25,7 @@
   margin-left: 1rem;
 }
 
-.chh__header-content {
+.chh__hero-content {
   width: 100%;
   flex: 1;
   display: flex;
@@ -36,7 +36,7 @@
 }
 
 /* Updated heading styles to center the text and add spacing */
-[data-theme="light"] .chh__header-content h1 {
+[data-theme="light"] .chh__hero-content h1 {
   font-weight: 700;
   font-size: 56px;
   line-height: 65px;
@@ -57,7 +57,7 @@
   margin-top: 2rem; /* Push heading down for better spacing */
 }
 
-[data-theme="dark"] .chh__header-content h1 {
+[data-theme="dark"] .chh__hero-content h1 {
   font-weight: 700;
   font-size: 56px;
   line-height: 65px;
@@ -78,7 +78,7 @@
   margin-top: 2rem; /* Push heading down for better spacing */
 }
 
-.chh__header-content p {
+.chh__hero-content p {
   font-family: var(--font-family);
   font-weight: 400;
   font-size: 20px;
@@ -90,15 +90,15 @@
 }
 
 /* Override paragraph color in dark mode */
-[data-theme="dark"] .chh__header-content p {
+[data-theme="dark"] .chh__hero-content p {
   color: #ccc; /* Softer white for dark mode */
 }
 
-html.theme-dark .chh__header-content p {
+html.theme-dark .chh__hero-content p {
   color: #ccc;
 }
 
-.chh__header-content__input {
+.chh__hero-content__input {
   width: 100%;
   margin: 2rem 0 1rem;
   display: flex;
@@ -106,7 +106,7 @@ html.theme-dark .chh__header-content p {
   gap: 1rem;
 }
 
-.chh__header-content__input--button {
+.chh__hero-content__input--button {
   text-decoration: none;
   font-size: 20px;
   line-height: 28px;
@@ -128,7 +128,7 @@ html.theme-dark .chh__header-content p {
   justify-content: center;
 }
 
-.chh__header-content__input--button::after {
+.chh__hero-content__input--button::after {
   content: "";
   position: absolute;
   top: 0;
@@ -146,24 +146,24 @@ html.theme-dark .chh__header-content p {
   pointer-events: none;
 }
 
-.chh__header-content__input--button:hover::after {
+.chh__hero-content__input--button:hover::after {
   left: 100%;
 }
 
-.chh__header-content__input--button:hover {
+.chh__hero-content__input--button:hover {
   transform: scale(1.03); /* very subtle lift */
   text-decoration: none;
 }
 
-.chh__header-content__input
+.chh__hero-content__input
   div:first-child
-  .chh__header-content__input--button {
+  .chh__hero-content__input--button {
   background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
 }
 
-.chh__header-content__input
+.chh__hero-content__input
   div:first-child
-  .chh__header-content__input--button:hover {
+  .chh__hero-content__input--button:hover {
   background: linear-gradient(135deg, #f76b1c 0%, #fca65f 100%);
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
@@ -172,16 +172,16 @@ html.theme-dark .chh__header-content p {
 }
 
 [data-theme="dark"]
-  .chh__header-content__input
+  .chh__hero-content__input
   div:first-child
-  .chh__header-content__input--button {
+  .chh__hero-content__input--button {
   background: linear-gradient(135deg, #9b4d89 0%, #6b3a9c 100%);
 }
 
 [data-theme="dark"]
-  .chh__header-content__input
+  .chh__hero-content__input
   div:first-child
-  .chh__header-content__input--button:hover {
+  .chh__hero-content__input--button:hover {
   background: linear-gradient(135deg, #b45ea5 0%, #8050c4 100%);
   transform: translateY(-2px) scale(1.02);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
@@ -189,13 +189,13 @@ html.theme-dark .chh__header-content p {
   color: white;
 }
 
-.chh__header-content__input div:last-child .chh__header-content__input--button {
+.chh__hero-content__input div:last-child .chh__hero-content__input--button {
   background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
 }
 
-.chh__header-content__input
+.chh__hero-content__input
   div:last-child
-  .chh__header-content__input--button:hover {
+  .chh__hero-content__input--button:hover {
   background: linear-gradient(135deg, #ae8dca 0%, #b3a7cb 100%);
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
@@ -204,17 +204,17 @@ html.theme-dark .chh__header-content p {
 }
 
 [data-theme="dark"]
-  .chh__header-content__input
+  .chh__hero-content__input
   div:last-child
-  .chh__header-content__input--button {
+  .chh__hero-content__input--button {
   background: linear-gradient(135deg, #2c2c36 0%, #3d3d4f 100%);
   color: #e0e0e0;
 }
 
 [data-theme="dark"]
-  .chh__header-content__input
+  .chh__hero-content__input
   div:last-child
-  .chh__header-content__input--button:hover {
+  .chh__hero-content__input--button:hover {
   background: linear-gradient(135deg, #3d3d4f 0%, #50506b 100%);
   transform: translateY(-2px) scale(1.02);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
@@ -222,7 +222,7 @@ html.theme-dark .chh__header-content p {
   color: #e0e0e0;
 }
 
-.chh__header-image {
+.chh__hero-image {
   width: auto;
   height: auto;
   flex: 1 0 0%;
@@ -234,12 +234,12 @@ html.theme-dark .chh__header-content p {
   min-height: 400px;
 }
 
-.chh__header-image img {
+.chh__hero-image img {
   transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
   filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.6));
 }
 
-.chh__header-image img:hover {
+.chh__hero-image img:hover {
   transform: scale(1.03);
   filter: drop-shadow(10px 10px 20px rgba(169, 158, 158, 0.6));
 }
@@ -262,15 +262,15 @@ html.theme-dark .chh__header-content p {
 
 /* ===== Responsive ===== */
 @media screen and (max-width: 1050px) {
-  .chh__header {
+  .chh__hero {
     flex-direction: column;
   }
 
-  .chh__header-content {
+  .chh__hero-content {
     margin: 0 0 3rem;
   }
 
-  .chh__header-image {
+  .chh__hero-image {
     min-height: 350px;
   }
 }
@@ -280,47 +280,60 @@ html.theme-dark .chh__header-content p {
     text-align: center;
   }
 
-  .chh__header-image {
+  [data-theme="light"] .chh__hero-content h1,
+  [data-theme="dark"] .chh__hero-content h1,
+  .chh__hero-content h1 {
+    margin-top: 0;
+    font-size: 42px;
+    line-height: 52px;
+  }
+
+  .chh__hero-content p {
+    font-size: 17px;
+    line-height: 28px;
+  }
+
+  .chh__hero-image {
     min-height: 300px;
   }
 }
 
 @media screen and (max-width: 650px) {
-  .chh__header-content h1 {
-    font-size: 48px;
-    line-height: 60px;
+  .chh__hero-content h1 {
+    font-size: 38px;
+    line-height: 48px;
   }
 
-  .chh__header-content p {
-    font-size: 16px;
+  .chh__hero-content p {
+    font-size: 15px;
     line-height: 24px;
   }
 
-  .chh__header-content__input input,
-  .chh__header-content__input button {
+  .chh__hero-content__input input,
+  .chh__hero-content__input button {
     font-size: 16px;
     line-height: 24px;
   }
 }
 
 @media screen and (max-width: 490px) {
-  .chh__header-content h1 {
-    font-size: 36px;
-    line-height: 48px;
+  .chh__hero-content h1 {
+    font-size: 32px;
+    line-height: 42px;
   }
 
-  .chh__header-content p {
+  .chh__hero-content p {
     font-size: 14px;
-    line-height: 24px;
+    line-height: 22px;
   }
 
-  .chh__header-content__input input,
-  .chh__header-content__input button {
+  .chh__hero-content__input input,
+  .chh__hero-content__input button {
     font-size: 12px;
     line-height: 16px;
   }
 
-  .chh__header-image {
+  .chh__hero-image {
     min-height: 280px;
   }
 }
diff --git a/src/components/header/header.tsx b/src/components/hero/hero.tsx
similarity index 74%
rename from src/components/header/header.tsx
rename to src/components/hero/hero.tsx
index e7ff216b..3cc027bb 100644
--- a/src/components/header/header.tsx
+++ b/src/components/hero/hero.tsx
@@ -1,13 +1,24 @@
 import React from "react";
-import "./header.css";
 import Link from "@docusaurus/Link";
-import { motion } from "framer-motion";
+import * as FramerMotion from "framer-motion";
 import ParticlesComponent from "../particle";
 import FloatingContributors from "../FloatingContributors";
+import "./hero.css";
 
-const HeaderContent = () => {
+type MotionPrimitive = React.ComponentType<Record<string, unknown>>;
+type MotionProxy = {
+  h1: MotionPrimitive;
+  p: MotionPrimitive;
+  div: MotionPrimitive;
+};
+
+const motion = (FramerMotion as unknown as Record<string, unknown>)[
+  "motion"
+] as MotionProxy;
+
+const HeroContent = () => {
   return (
-    <div className="chh__header-content">
+    <div className="chh__hero-content">
       <motion.h1
         initial={{ opacity: 0, x: -10 }}
         whileInView={{ opacity: 1, x: 0 }}
@@ -45,7 +56,7 @@ const HeaderContent = () => {
         <br></br>
       </motion.p>
 
-      <div className="chh__header-content__input">
+      <div className="chh__hero-content__input">
         <motion.div
           initial={{ opacity: 0, x: -10 }}
           whileInView={{ opacity: 1, x: 0 }}
@@ -60,7 +71,7 @@ const HeaderContent = () => {
         >
           <Link
             to="/get-started/"
-            className="chh__header-content__input--button"
+            className="chh__hero-content__input--button"
           >
             Get Started
           </Link>
@@ -78,7 +89,7 @@ const HeaderContent = () => {
           }}
           style={{ flex: 1 }}
         >
-          <Link to="/courses" className="chh__header-content__input--button">
+          <Link to="/courses" className="chh__hero-content__input--button">
             Courses
           </Link>
         </motion.div>
@@ -87,7 +98,7 @@ const HeaderContent = () => {
   );
 };
 
-const HeaderToaster = () => {
+const HeroToaster = () => {
   return (
     <motion.div
       initial={{ scale: 0, x: 10 }}
@@ -99,7 +110,7 @@ const HeaderToaster = () => {
         stiffness: 100,
         delay: 0.3,
       }}
-      className="chh__header-image"
+      className="chh__hero-image"
       style={{
         position: "relative",
         display: "flex",
@@ -109,28 +120,28 @@ const HeaderToaster = () => {
         width: "100%",
       }}
     >
-      {/* Render the FloatingContributors component as the header toaster */}
+      {/* Render the FloatingContributors component as the hero toaster */}
       <div
         style={{
           position: "relative",
           zIndex: 1,
         }}
       >
-        <FloatingContributors headerEmbedded={true} />
+        <FloatingContributors heroEmbedded={true} />
       </div>
     </motion.div>
   );
 };
 
-const Header: React.FC = () => {
+const Hero: React.FC = () => {
   return (
-    <div className="chh__header--body">
-      <div className="chh__header">
-        <HeaderContent />
-        <HeaderToaster />
+    <div className="chh__hero--body">
+      <div className="chh__hero">
+        <HeroContent />
+        <HeroToaster />
       </div>
     </div>
   );
 };
 
-export default Header;
+export default Hero;
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index be920687..aacc5308 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -473,6 +473,29 @@ body {
 
 /* ===== SECTION 11: CRITICAL FIX: TABLET/IPAD NAVBAR BEHAVIOR ===== */
 @media screen and (max-width: 996px) {
+  :root {
+    --ifm-navbar-top-offset: 0px;
+  }
+
+  .theme-announcement-bar,
+  [class*="announcementBar"] {
+    display: none !important;
+    height: 0 !important;
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .navbar--fixed-top {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    margin-top: 0 !important;
+    transform: none !important;
+  }
+
   /* Hide TOP navbar items on mobile (not sidebar) */
 
   /*
@@ -495,6 +518,7 @@ body {
 
   /* Clean mobile navbar layout - prevent overflow */
   .navbar {
+
     padding: 0.5rem 0.5rem !important;
     height: 56px !important;
   }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e3368cbf..5b4cce33 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,9 +2,7 @@ import React, { useEffect, useState } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import type { ReactNode } from "react";
-
-import Head from "@docusaurus/Head";
-import Header from "../components/header/header";
+import Hero from "../components/hero/hero";
 import ScrollBottomToTop from "../components/scroll/bottom-to-top";
 
 import { BlogCarousel } from "../components/blogCarousel/blogCarousel";
@@ -41,14 +39,6 @@ export default function Home(): ReactNode {
       title={`${siteConfig.title}`}
       description="Welcome to recode hive. Learn the basics to advanced concepts of web development. sql, python, Cloud, GitHub and more."
     >
-      <Head>
-        <script
-          async
-          custom-element="amp-auto-ads"
-          src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
-        />
-      </Head>
-
       {/* ✅ Wrap in solid background to fix light mode */}
       <div
         className="transition-colors duration-300"
@@ -64,8 +54,8 @@ export default function Home(): ReactNode {
             color: "var(--ifm-font-color-base)",
           }}
         >
-          <div className="m-4">
-            <Header />
+          <div className="mx-4 mb-4 mt-0 md:m-4">
+            <Hero />
           </div>
 
           <div className="blog-carousel-section">