diff --git a/src/app/order-confirmation/page.tsx b/src/app/order-confirmation/page.tsx
index eaf5823..563d7bb 100644
--- a/src/app/order-confirmation/page.tsx
+++ b/src/app/order-confirmation/page.tsx
@@ -8,22 +8,21 @@ import MediaAbout from '@/components/sections/about/MediaAbout';
 
 export default function OrderConfirmationPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Products", id: "/#products" },
-            { name: "About", id: "/#about" },
-            { name: "Contact", id: "/#contact" },
+            { name: "Products", id: "/products" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
             { name: "Checkout", id: "/checkout" },
             { name: "Profile", id: "/profile" },
             { name: "Confirmation", id: "/order-confirmation" }
           ]}
-          brandName="ELEGANT SKIN"
         />
         <div className="min-h-screen pt-32">
-           <MediaAbout title="Order Confirmed" description="Thank you for your purchase! Your order summary is below." />
+           <MediaAbout title="Order Confirmed" description="Thank you for your purchase! Your order summary is below." useInvertedBackground={false} />
         </div>
         <FooterCard logoText="ELEGANT SKIN" copyrightText="© 2025 Elegant Skin. All rights reserved." />
       </ReactLenis>