diff --git a/src/app/order-confirmation/page.tsx b/src/app/order-confirmation/page.tsx
index 8d9c771..3012078 100644
--- a/src/app/order-confirmation/page.tsx
+++ b/src/app/order-confirmation/page.tsx
@@ -1,7 +1,7 @@
 'use client';
-import { ThemeProvider } from 'next-themes';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function OrderConfirmationPage() {
@@ -9,12 +9,13 @@ export default function OrderConfirmationPage() {
     { name: "Home", id: "/" },
     { name: "Cart", id: "/cart" },
     { name: "Checkout", id: "/checkout" },
-    { name: "Order Conf", id: "/order-confirmation" }
+    { name: "Order Conf", id: "/order-confirmation" },
+    { name: "Products", id: "/products/1" },
+    { name: "Collections", id: "/collections/all" }
   ];
 
   return (
     <ThemeProvider
-      attribute="class"
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
@@ -26,23 +27,23 @@ export default function OrderConfirmationPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleCentered
-        navItems={navItems}
-        brandName="Webild"
-        logoSrc="https://via.placeholder.com/40"
-        button={{ text: "Continue Shopping", href: "/" }}
-      />
-      <main className="flex min-h-screen flex-col items-center justify-between">
-        <HeroCentered
-          id="order-confirmation"
-          title="Order Confirmed!"
-          description="Thank you for your purchase. Your order #ABC123DEF has been placed and is now being processed. A confirmation email with details has been sent to your inbox."
-          background={{ variant: 'downward-rays-static' }}
-          avatars={[{ src: 'https://via.placeholder.com/150', alt: 'Confirmed 1' }, { src: 'https://via.placeholder.com/150', alt: 'Confirmed 2' }]} 
-          avatarText="You're all set!"
-          buttons={[{ text: 'View Order Details', href: '/' }]} 
-          buttonAnimation='slide-up'
-        />
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
+      </div>
+      <main className="flex min-h-screen flex-col items-center justify-between p-24">
+        <div id="order-confirmation-hero-section" data-section="order-confirmation-hero-section">
+          <HeroSplitDoubleCarousel
+            title="Thank You for Your Order!"
+            description="Your order has been successfully placed and will be processed shortly. A confirmation email has been sent."
+            background={{ variant: "downward-rays-static" }}
+            avatars={[{ src: "https://via.placeholder.com/150", alt: "Happy Customer 1" }, { src: "https://via.placeholder.com/150", alt: "Happy Customer 2" }]}
+            avatarText="Join our community of satisfied customers!"
+            buttons={[{ text: "Continue Shopping", href: "/collections/all" }]}
+            buttonAnimation="slide-up"
+            leftCarouselItems={[{ imageSrc: "https://via.placeholder.com/400x300?text=Product+A", imageAlt: "Product A" }]}
+            rightCarouselItems={[{ imageSrc: "https://via.placeholder.com/400x300?text=Product+B", imageAlt: "Product B" }]}
+          />
+        </div>
       </main>
       <FooterBaseReveal
         logoText="Webild"
@@ -50,15 +51,15 @@ export default function OrderConfirmationPage() {
           {
             title: "Company",            items: [
               { label: "About Us", href: "/" },
-              { label: "Contact", href: "/" },
-            ],
+              { label: "Contact", href: "/" }
+            ]
           },
           {
             title: "Legal",            items: [
               { label: "Privacy Policy", href: "/" },
-              { label: "Terms of Service", href: "/" },
-            ],
-          },
+              { label: "Terms of Service", href: "/" }
+            ]
+          }
         ]}
         copyrightText="© 2023 Webild. All rights reserved."
       />