diff --git a/src/app/page.tsx b/src/app/page.tsx
index 74f2b3c..ee4ea85 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -32,6 +32,12 @@ export default function XenkoPage() {
       secondaryButtonStyle="radial-glow"
       headingFontWeight="semibold"
     >
+      <style>{`
+        html {
+          scroll-behavior: smooth;
+        }
+      `}</style>
+
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
           brandName="Xenko"
@@ -48,7 +54,10 @@ export default function XenkoPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="hero" data-section="hero" style={{
+        backdropFilter: 'blur(10px)',
+        background: 'rgba(255, 255, 255, 0.05)'
+      }}>
         <HeroLogoBillboard
           logoText="Xenko"
           description="We Build Websites, Software, and Brands That Elevate Your Business"
@@ -60,10 +69,14 @@ export default function XenkoPage() {
           buttonAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
           mediaAnimation="none"
+          containerClassName="backdrop-blur-md bg-white/5"
         />
       </div>
 
-      <div id="socialProof" data-section="socialProof">
+      <div id="socialProof" data-section="socialProof" style={{
+        backdropFilter: 'blur(8px)',
+        background: 'rgba(26, 26, 26, 0.4)'
+      }}>
         <SocialProofOne
           title="Chosen by Businesses That Take Growth Seriously"
           description="Trusted by leading companies across multiple industries"
@@ -74,10 +87,14 @@ export default function XenkoPage() {
           ]}
           speed={40}
           showCard={true}
+          containerClassName="backdrop-blur-md bg-black/20"
         />
       </div>
 
-      <div id="services" data-section="services">
+      <div id="services" data-section="services" style={{
+        backdropFilter: 'blur(10px)',
+        background: 'rgba(255, 255, 255, 0.05)'
+      }}>
         <FeatureCardTwentyThree
           features={[
             {
@@ -98,10 +115,15 @@ export default function XenkoPage() {
           description="Comprehensive solutions designed to elevate every aspect of your business presence online"
           textboxLayout="default"
           useInvertedBackground={false}
+          containerClassName="backdrop-blur-md bg-white/5"
+          cardClassName="backdrop-blur-md bg-white/10 border border-white/20"
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
+      <div id="testimonials" data-section="testimonials" style={{
+        backdropFilter: 'blur(10px)',
+        background: 'rgba(255, 255, 255, 0.05)'
+      }}>
         <TestimonialCardTen
           testimonials={[
             {
@@ -121,10 +143,15 @@ export default function XenkoPage() {
           description="Fast delivery, honest pricing, and support that continues after launch"
           textboxLayout="default"
           useInvertedBackground={false}
+          containerClassName="backdrop-blur-md bg-white/5"
+          quoteCardClassName="backdrop-blur-md bg-white/10 border border-white/20"
         />
       </div>
 
-      <div id="pricing" data-section="pricing">
+      <div id="pricing" data-section="pricing" style={{
+        backdropFilter: 'blur(10px)',
+        background: 'rgba(255, 255, 255, 0.05)'
+      }}>
         <PricingCardOne
           plans={[
             {
@@ -155,10 +182,15 @@ export default function XenkoPage() {
               text: "Get Your Quote on WhatsApp",              href: "https://wa.me/?text=Hi%20Xenko%2C%20I%27d%20like%20a%20quote%20for%20your%20services"
             },
           ]}
+          containerClassName="backdrop-blur-md bg-white/5"
+          cardClassName="backdrop-blur-md bg-white/10 border border-white/20"
         />
       </div>
 
-      <div id="howItWorks" data-section="howItWorks">
+      <div id="howItWorks" data-section="howItWorks" style={{
+        backdropFilter: 'blur(10px)',
+        background: 'rgba(255, 255, 255, 0.05)'
+      }}>
         <ContactFaq
           faqs={[
             {
@@ -179,10 +211,17 @@ export default function XenkoPage() {
           ctaIcon={Rocket}
           useInvertedBackground={false}
           animationType="slide-up"
+          containerClassName="backdrop-blur-md bg-white/5"
+          ctaPanelClassName="backdrop-blur-md bg-white/10 border border-white/20"
+          faqsPanelClassName="backdrop-blur-md bg-white/10 border border-white/20"
+          accordionClassName="backdrop-blur-md bg-white/5"
         />
       </div>
 
-      <div id="faq" data-section="faq">
+      <div id="faq" data-section="faq" style={{
+        backdropFilter: 'blur(10px)',
+        background: 'rgba(255, 255, 255, 0.05)'
+      }}>
         <FaqDouble
           faqs={[
             {
@@ -209,10 +248,15 @@ export default function XenkoPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           faqsAnimation="slide-up"
+          containerClassName="backdrop-blur-md bg-white/5"
+          accordionClassName="backdrop-blur-md bg-white/10 border border-white/20"
         />
       </div>
 
-      <div id="finalCta" data-section="finalCta">
+      <div id="finalCta" data-section="finalCta" style={{
+        backdropFilter: 'blur(10px)',
+        background: 'rgba(255, 255, 255, 0.05)'
+      }}>
         <HeroLogoBillboard
           logoText="Stop Losing Customers Online"
           description="Let's build something that brings visibility, trust, and efficiency to your business."
@@ -224,6 +268,7 @@ export default function XenkoPage() {
           buttonAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
           mediaAnimation="none"
+          containerClassName="backdrop-blur-md bg-white/5"
         />
       </div>
 
@@ -241,8 +286,10 @@ export default function XenkoPage() {
               href: "https://wa.me/?text=Hi%20Xenko",              ariaLabel: "WhatsApp Xenko"
             },
           ]}
+          containerClassName="backdrop-blur-md bg-white/5 border-t border-white/20"
+          cardClassName="backdrop-blur-md bg-white/10"
         />
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}