diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 40d16d1..1e6849b 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,3 +1,4 @@
+import React, { useState, useEffect } from 'react';
 import FooterBrand from '@/components/sections/footer/FooterBrand';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
@@ -6,6 +7,16 @@ import { StyleProvider } from "@/components/ui/StyleProvider";
 import Button from "@/components/ui/Button";
 
 export default function Layout() {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const navItems = [
   {
     "name": "Home",    "href": "#hero"
@@ -37,7 +48,7 @@ export default function Layout() {
     <StyleProvider buttonVariant="stagger" siteBackground="noise" heroBackground="gradientBars">
       <SiteBackgroundSlot />
       <SectionErrorBoundary name="navbar">
-        <nav className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur-sm border-b border-foreground/10 py-4">
+        <nav className={`fixed top-0 z-50 w-full transition-colors duration-300 ${isScrolled ? 'bg-background/95 backdrop-blur-sm border-b border-foreground/10' : 'bg-transparent'} py-4`}>
           <div className="mx-auto flex w-content-width items-center justify-between">
             <a href="#" className="text-xl md:text-2xl font-bold text-foreground tracking-tight">
               The Grand Hotel