diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 130883b..39d0d98 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -1,68 +1,47 @@
-use client";
+"use client";
 
 import ReactLenis from "lenis/react";
 import BlogCardThree from "@/components/sections/blog/BlogCardThree";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { useBlogPosts } from "@/hooks/useBlogPosts";
+import Link from 'next/link';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
     return (
         <ThemeProvider
-            defaultButtonVariant="icon-arrow"
+            defaultButtonVariant="text-stagger"
             defaultTextAnimation="entrance-slide"
             borderRadius="rounded"
-            contentWidth="compact"
-            sizing="mediumLargeSizeMediumTitles"
-            background="noiseDiagonalGradient"
-            cardStyle="gradient-bordered"
-            primaryButtonStyle="inset-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="medium"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
         >
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
                         navItems={[
                             { name: "Home", id: "/" },
-                            { name: "Hero", id: "hero-section" },
-                            { name: "About", id: "about-section" },
-                            { name: "Feature", id: "features-section" },
-                            { name: "Product", id: "products-section" },
-                            { name: "Testimonial", id: "testimonials-section" },
-                            { name: "Faq", id: "faq-section" },
-                            { name: "Contact", id: "contact-section" }
+                            { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" },
                         ]}
-                        brandName="WarmCrust Bakery"
+                        brandName="Sweet Crumb Bakery"
                         bottomLeftText="Global Community"
-                        bottomRightText="hello@warmcrustbakery.com"
-                        topBarClassName=""
+                        bottomRightText="hello@example.com"
                     />
                 </div>
-
-                {isLoading ? (
-                    <div className="w-content-width mx-auto py-20 text-center">
-                        <p className="text-foreground">Loading posts...</p>
-                    </div>
-                ) : (
-                    <div id="blog" data-section="blog">
-                        <BlogCardThree
-                            blogs={posts}
-                            title="Featured Articles"
-                            description="Explore our latest insights"
-                            textboxLayout="default"
-                            useInvertedBackground={false}
-                            animationType="slide-up"
-                            carouselMode="buttons"
-                            uniformGridCustomHeightClasses="min-h-[600px]"
-                        />
-                    </div>
-                )}
-
-                <div id="footer" data-section="footer" />
+                <div id="blog-section" data-section="blog-section">
+                    {!isLoading && posts && posts.length > 0 && (
+                        <BlogCardThree posts={posts} />
+                    )}
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2eb5484..59c6444 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,23 +9,20 @@ const rubik = Rubik({
 });
 
 export const metadata: Metadata = {
-  title: "Artisan Baked Goods | Homemade Treats Made with Love",  description: "Discover our warm, inviting bakery offering fresh, artisanal baked goods made with love. Experience the perfect blend of traditional techniques and quality ingredients.",  keywords: ["artisan bakery", "homemade treats", "fresh baked goods", "local bakery", "cozy bakery experience"],
+  title: "Artisan Baked Goods | Homemade Treats Made with Love",  description: "Discover our warm, inviting bakery offering fresh, artisanal baked goods made with love. Experience the perfect blend of tradition and quality.",  keywords: "bakery, artisan bread, fresh pastries, homemade, baked goods",  openGraph: {
+    title: "Artisan Baked Goods | Homemade Treats Made with Love",    description: "Discover our warm, inviting bakery offering fresh, artisanal baked goods made with love.",    type: "website"},
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${rubik.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en" className={`${rubik.variable}`}>
+      <body>
+        <ServiceWrapper>{children}</ServiceWrapper>
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1393,7 +1390,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ccf52ef..820fd81 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,43 +11,38 @@ import FaqBase from '@/components/sections/faq/FaqBase';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Sparkles, Star } from 'lucide-react';
+import Link from 'next/link';
 
-const assetMap: Record<string, string> = {
-  "hero-section-backgroundImage": "https://img.b2bpic.net/free-photo/front-view-delicious-thanksgiving-meal_23-2148629567.jpg",  "about-section-imageSrc": "https://img.b2bpic.net/free-photo/baker-forming-dough-sphere-wooden-board_74855-5658.jpg",  "features-section-localIngredients": "https://img.b2bpic.net/free-photo/flat-lay-composition-vegetables-with-copyspace_23-2148190200.jpg",  "features-section-traditionalTechniques": "https://img.b2bpic.net/free-photo/ordered-composition-baking-tools-view_23-2150096486.jpg",  "features-section-dailyFreshness": "https://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379551.jpg",  "products-section-croissant": "https://img.b2bpic.net/free-photo/croissant-with-raspberries-wooden-platter_114579-18545.jpg",  "products-section-chocolateChipCookie": "https://img.b2bpic.net/free-photo/closeup-shot-freshly-baked-chocolate-chip-cookies-white-plate-yellow-textile_181624-21376.jpg",  "products-section-blueberryMuffin": "https://img.b2bpic.net/free-photo/muffins-with-black-currant_661915-152.jpg",  "products-section-cinnamonRoll": "https://img.b2bpic.net/free-photo/flat-lay-cinnamon-roll-assortment_23-2148904728.jpg",  "testimonials-section-testimonial1-image": "https://img.b2bpic.net/free-photo/man-baker-kitchen-by-pastry-cart_1303-32295.jpg",  "testimonials-section-testimonial2-image": "https://img.b2bpic.net/free-photo/crop-daughter-giving-gift-mom-breakfast_23-2147788218.jpg",  "testimonials-section-testimonial3-image": "https://img.b2bpic.net/free-photo/portrait-family-having-fun-kitchen_329181-5378.jpg",  "testimonials-section-testimonial4-image": "https://img.b2bpic.net/free-photo/bread-baking-industry-tasty-pastry_1303-19776.jpg",  "contact-section-backgroundImage": "https://img.b2bpic.net/free-photo/crumbles-chocholate-tasty-dessert-with-biscuit-top-wooden-table-near-delicious-coffee-mini-cake-baked-after-traditional-recipe_482257-19880.jpg",  "footer-section-backgroundImage": "https://img.b2bpic.net/free-photo/bakery-atmospheric-photo_1321-4640.jpg"
-};
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Blog", id: "/blog" },
+  { name: "Shop", id: "/shop" },
+];
 
-function getAssetUrl(id: string): string {
-  return assetMap[id] || "/placeholders/placeholder1.webp";
-}
-
-export default function LandingPage() {
+export default function HomePage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="icon-arrow"
+      defaultButtonVariant="text-stagger"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="compact"
-      sizing="mediumLargeSizeMediumTitles"
-      background="noiseDiagonalGradient"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="inset-glow"
-      secondaryButtonStyle="radial-glow"
-      headingFontWeight="medium"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleFullscreen
           navItems={[
-            { name: "Hero", id: "hero-section" },
-            { name: "About", id: "about-section" },
-            { name: "Feature", id: "features-section" },
-            { name: "Product", id: "products-section" },
-            { name: "Testimonial", id: "testimonials-section" },
-            { name: "Faq", id: "faq-section" },
-            { name: "Contact", id: "contact-section" }
+            { name: "Home", id: "/" },
+            { name: "Blog", id: "/blog" },
+            { name: "Shop", id: "/shop" },
           ]}
-          brandName="WarmCrust Bakery"
+          brandName="Sweet Crumb Bakery"
           bottomLeftText="Global Community"
-          bottomRightText="hello@warmcrustbakery.com"
+          bottomRightText="hello@example.com"
         />
       </div>
 
@@ -63,7 +58,7 @@ export default function LandingPage() {
             { text: "Visit Us", href: "#contact-section" }
           ]}
           buttonAnimation="slide-up"
-          imageSrc={getAssetUrl("hero-section-backgroundImage")}
+          imageSrc="https://img.b2bpic.net/free-photo/front-view-delicious-thanksgiving-meal_23-2148629567.jpg"
           imageAlt="Cozy bakery interior with warm lighting and fresh baked goods on display"
           textPosition="bottom-left"
           showDimOverlay={true}
@@ -84,7 +79,7 @@ export default function LandingPage() {
             { text: "Visit Our Bakery", href: "#contact-section" }
           ]}
           buttonAnimation="slide-up"
-          imageSrc={getAssetUrl("about-section-imageSrc")}
+          imageSrc="https://img.b2bpic.net/free-photo/baker-forming-dough-sphere-wooden-board_74855-5658.jpg"
           imageAlt="Baker preparing fresh bread in a cozy bakery setting"
           useInvertedBackground={false}
           ariaLabel="About our bakery and baking philosophy"
@@ -100,16 +95,13 @@ export default function LandingPage() {
           animationType="slide-up"
           features={[
             {
-              id: "feature-1",              title: "Locally Sourced Ingredients",              description: "We partner with local farms and suppliers to bring you the freshest, highest-quality ingredients for our baked goods.",              tag: "Fresh & Local",              imageSrc: getAssetUrl("features-section-localIngredients"),
-              imageAlt: "Farmers market produce and fresh ingredients"
+              id: "feature-1",              title: "Locally Sourced Ingredients",              description: "We partner with local farms and suppliers to bring you the freshest, highest-quality ingredients for our baked goods.",              tag: "Fresh & Local",              imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-composition-vegetables-with-copyspace_23-2148190200.jpg",              imageAlt: "Farmers market produce and fresh ingredients"
             },
             {
-              id: "feature-2",              title: "Traditional Techniques",              description: "Each item is crafted using time-tested methods passed down through generations, ensuring authentic flavors and textures.",              tag: "Time-Honored",              imageSrc: getAssetUrl("features-section-traditionalTechniques"),
-              imageAlt: "Baker working with traditional tools and dough"
+              id: "feature-2",              title: "Traditional Techniques",              description: "Each item is crafted using time-tested methods passed down through generations, ensuring authentic flavors and textures.",              tag: "Time-Honored",              imageSrc: "https://img.b2bpic.net/free-photo/ordered-composition-baking-tools-view_23-2150096486.jpg",              imageAlt: "Baker working with traditional tools and dough"
             },
             {
-              id: "feature-3",              title: "Daily Freshness",              description: "Our baked goods are made fresh each morning, guaranteeing peak flavor and quality with every bite.",              tag: "Made Daily",              imageSrc: getAssetUrl("features-section-dailyFreshness"),
-              imageAlt: "Freshly baked bread and pastries arranged on wooden tray"
+              id: "feature-3",              title: "Daily Freshness",              description: "Our baked goods are made fresh each morning, guaranteeing peak flavor and quality with every bite.",              tag: "Made Daily",              imageSrc: "https://img.b2bpic.net/free-photo/view-delicious-baked-bread-pastry-shop_23-2150379551.jpg",              imageAlt: "Freshly baked bread and pastries arranged on wooden tray"
             }
           ]}
         />
@@ -119,20 +111,16 @@ export default function LandingPage() {
         <ProductCardOne
           products={[
             {
-              id: "croissant",              name: "Butter Croissant",              price: "$3.50",              imageSrc: getAssetUrl("products-section-croissant"),
-              imageAlt: "A golden, flaky butter croissant with a crispy exterior and tender interior"
+              id: "croissant",              name: "Butter Croissant",              price: "$3.50",              imageSrc: "https://img.b2bpic.net/free-photo/croissant-with-raspberries-wooden-platter_114579-18545.jpg",              imageAlt: "A golden, flaky butter croissant with a crispy exterior and tender interior"
             },
             {
-              id: "chocolate-chip-cookie",              name: "Chocolate Chip Cookie",              price: "$2.25",              imageSrc: getAssetUrl("products-section-chocolateChipCookie"),
-              imageAlt: "A warm, chewy chocolate chip cookie with melted chocolate chips"
+              id: "chocolate-chip-cookie",              name: "Chocolate Chip Cookie",              price: "$2.25",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-freshly-baked-chocolate-chip-cookies-white-plate-yellow-textile_181624-21376.jpg",              imageAlt: "A warm, chewy chocolate chip cookie with melted chocolate chips"
             },
             {
-              id: "blueberry-muffin",              name: "Blueberry Muffin",              price: "$3.00",              imageSrc: getAssetUrl("products-section-blueberryMuffin"),
-              imageAlt: "A moist blueberry muffin with fresh blueberries nestled inside"
+              id: "blueberry-muffin",              name: "Blueberry Muffin",              price: "$3.00",              imageSrc: "https://img.b2bpic.net/free-photo/muffins-with-black-currant_661915-152.jpg",              imageAlt: "A moist blueberry muffin with fresh blueberries nestled inside"
             },
             {
-              id: "cinnamon-roll",              name: "Cinnamon Roll",              price: "$4.00",              imageSrc: getAssetUrl("products-section-cinnamonRoll"),
-              imageAlt: "A warm cinnamon roll with a sweet glaze and cinnamon sugar coating"
+              id: "cinnamon-roll",              name: "Cinnamon Roll",              price: "$4.00",              imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-cinnamon-roll-assortment_23-2148904728.jpg",              imageAlt: "A warm cinnamon roll with a sweet glaze and cinnamon sugar coating"
             }
           ]}
           gridVariant="three-columns-all-equal-width"
@@ -149,7 +137,6 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           ariaLabel="Our artisanal baked goods selection"
-          gridClassName="gap-8"
         />
       </div>
 
@@ -158,23 +145,19 @@ export default function LandingPage() {
           testimonials={[
             {
               id: "testimonial-1",              name: "Sarah Johnson",              role: "Local Food Blogger",              company: "Bite & Sip",              rating: 5,
-              imageSrc: getAssetUrl("testimonials-section-testimonial1-image"),
-              imageAlt: "Sarah Johnson, local food blogger, enjoying a fresh croissant"
+              imageSrc: "https://img.b2bpic.net/free-photo/man-baker-kitchen-by-pastry-cart_1303-32295.jpg",              imageAlt: "Sarah Johnson, local food blogger, enjoying a fresh croissant"
             },
             {
               id: "testimonial-2",              name: "Michael Torres",              role: "Regular Customer",              company: "Tech Innovators Inc.",              rating: 5,
-              imageSrc: getAssetUrl("testimonials-section-testimonial2-image"),
-              imageAlt: "Michael Torres, satisfied customer with a warm smile holding a pastry"
+              imageSrc: "https://img.b2bpic.net/free-photo/crop-daughter-giving-gift-mom-breakfast_23-2147788218.jpg",              imageAlt: "Michael Torres, satisfied customer with a warm smile holding a pastry"
             },
             {
               id: "testimonial-3",              name: "Emma Richardson",              role: "Café Owner",              company: "Urban Grind Café",              rating: 5,
-              imageSrc: getAssetUrl("testimonials-section-testimonial3-image"),
-              imageAlt: "Emma Richardson, café owner, praising the quality of baked goods"
+              imageSrc: "https://img.b2bpic.net/free-photo/portrait-family-having-fun-kitchen_329181-5378.jpg",              imageAlt: "Emma Richardson, café owner, praising the quality of baked goods"
             },
             {
               id: "testimonial-4",              name: "David Chen",              role: "Event Planner",              company: "Celebration Events",              rating: 5,
-              imageSrc: getAssetUrl("testimonials-section-testimonial4-image"),
-              imageAlt: "David Chen, event planner, with a box of artisanal pastries"
+              imageSrc: "https://img.b2bpic.net/free-photo/bread-baking-industry-tasty-pastry_1303-19776.jpg",              imageAlt: "David Chen, event planner, with a box of artisanal pastries"
             }
           ]}
           carouselMode="buttons"
@@ -193,12 +176,6 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           ariaLabel="Testimonials section featuring customer reviews"
-          gridClassName="gap-6 md:gap-8"
-          textBoxClassName="bg-white/80 backdrop-blur-sm p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300"
-          ratingClassName="text-amber-500 mb-2"
-          nameClassName="font-semibold text-gray-800"
-          roleClassName="text-sm text-gray-600"
-          companyClassName="text-xs text-gray-500 mt-1"
         />
       </div>
 
@@ -243,30 +220,23 @@ export default function LandingPage() {
             { name: "email", type: "email", placeholder: "Your Email", required: true },
             { name: "phone", type: "tel", placeholder: "Your Phone Number" }
           ]}
-          textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
+          textarea={{
+            name: "message",            placeholder: "Your Message",            rows: 5,
+            required: true
+          }}
           useInvertedBackground={false}
-          imageSrc={getAssetUrl("contact-section-backgroundImage")}
+          imageSrc="https://img.b2bpic.net/free-photo/crumbles-chocholate-tasty-dessert-with-biscuit-top-wooden-table-near-delicious-coffee-mini-cake-baked-after-traditional-recipe_482257-19880.jpg"
           imageAlt="Cozy bakery interior with warm lighting and fresh pastries"
           mediaAnimation="slide-up"
           mediaPosition="right"
           buttonText="Send Message"
           ariaLabel="Contact section"
-          className="py-16"
-          containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
-          contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
-          formCardClassName="bg-white rounded-xl shadow-lg p-8"
-          titleClassName="text-3xl font-bold text-gray-900 mb-4"
-          descriptionClassName="text-lg text-gray-600 mb-6"
-          buttonClassName="bg-amber-600 hover:bg-amber-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105"
-          buttonTextClassName="text-base"
-          mediaWrapperClassName="relative rounded-xl overflow-hidden"
-          mediaClassName="w-full h-full object-cover"
         />
       </div>
 
       <div id="footer-section" data-section="footer-section">
         <FooterMedia
-          imageSrc={getAssetUrl("footer-section-backgroundImage")}
+          imageSrc="https://img.b2bpic.net/free-photo/bakery-atmospheric-photo_1321-4640.jpg"
           imageAlt="Cozy bakery interior with wooden shelves and warm lighting"
           columns={[
             {
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 3e2678a..7126220 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -8,206 +8,72 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
 import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductDetail } from "@/hooks/useProductDetail";
-import { useCart } from "@/hooks/useCart";
-import { useCheckout } from "@/hooks/useCheckout";
+import Link from 'next/link';
 
-interface ProductPageProps {
+function ProductDetailContent({
+    params,
+}: {
     params: Promise<{ id: string }>;
-}
-
-export default function ProductPage({ params }: ProductPageProps) {
-    return (
-        <Suspense fallback={null}>
-            <ProductPageContent params={params} />
-        </Suspense>
-    );
-}
-
-function ProductPageContent({ params }: ProductPageProps) {
-    const { id } = use(params);
+}) {
+    const resolvedParams = use(params);
+    const { product, isLoading } = useProductDetail(resolvedParams.id);
     const router = useRouter();
 
-    const {
-        product,
-        isLoading,
-        images,
-        meta,
-        variants,
-        quantityVariant,
-        selectedQuantity,
-        createCartItem,
-    } = useProductDetail(id);
-
-    const {
-        items: cartItems,
-        isOpen: cartOpen,
-        setIsOpen: setCartOpen,
-        addItem,
-        updateQuantity,
-        removeItem,
-        total: cartTotal,
-        getCheckoutItems,
-    } = useCart();
-
-    const { buyNow, checkout, isLoading: isCheckoutLoading } = useCheckout();
-
     const handleAddToCart = useCallback(() => {
-        const item = createCartItem();
-        if (item) {
-            addItem(item);
-        }
-    }, [createCartItem, addItem]);
-
-    const handleBuyNow = useCallback(() => {
-        if (product) {
-            buyNow(product, selectedQuantity);
-        }
-    }, [product, selectedQuantity, buyNow]);
-
-    const handleCheckout = useCallback(async () => {
-        if (cartItems.length === 0) return;
-
-        const currentUrl = new URL(window.location.href);
-        currentUrl.searchParams.set("success", "true");
-
-        await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
-    }, [cartItems, checkout, getCheckoutItems]);
+        // Handle add to cart logic
+    }, []);
 
     if (isLoading) {
-        return (
-            <ThemeProvider
-                defaultButtonVariant="icon-arrow"
-                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
-                contentWidth="compact"
-                sizing="mediumLargeSizeMediumTitles"
-                background="noiseDiagonalGradient"
-                cardStyle="gradient-bordered"
-                primaryButtonStyle="inset-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="medium"
-            >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                    <NavbarStyleFullscreen
-                        navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
-                        brandName="WarmCrust Bakery"
-                        bottomLeftText="Global Community"
-                        bottomRightText="hello@warmcrustbakery.com"
-                        topBarClassName=""
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                    />
-                    </div>
-                    <main className="min-h-screen flex items-center justify-center pt-20">
-                        <p className="text-foreground">Loading product...</p>
-                    </main>
-                </ReactLenis>
-            </ThemeProvider>
-        );
+        return <div>Loading product...</div>;
     }
 
     if (!product) {
-        return (
-            <ThemeProvider
-                defaultButtonVariant="icon-arrow"
-                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
-                contentWidth="compact"
-                sizing="mediumLargeSizeMediumTitles"
-                background="noiseDiagonalGradient"
-                cardStyle="gradient-bordered"
-                primaryButtonStyle="inset-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="medium"
-            >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleFullscreen
-                            navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
-                            brandName="WarmCrust Bakery"
-                            bottomLeftText="Global Community"
-                            bottomRightText="hello@warmcrustbakery.com"
-                            topBarClassName=""
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                        />
-                    </div>
-                    <main className="min-h-screen flex items-center justify-center pt-20">
-                        <div className="text-center">
-                            <p className="text-foreground mb-4">Product not found</p>
-                            <button
-                                onClick={() => router.push("/shop")}
-                                className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
-                            >
-                                Back to Shop
-                            </button>
-                        </div>
-                    </main>
-                </ReactLenis>
-            </ThemeProvider>
-        );
+        return <div>Product not found</div>;
     }
 
+    return (
+        <>
+            <ProductDetailCard product={product} onAddToCart={handleAddToCart} />
+            <ProductCart />
+        </>
+    );
+}
+
+export default function ProductDetailPage({
+    params,
+}: {
+    params: Promise<{ id: string }>;
+}) {
     return (
         <ThemeProvider
-            defaultButtonVariant="icon-arrow"
+            defaultButtonVariant="text-stagger"
             defaultTextAnimation="entrance-slide"
             borderRadius="rounded"
-            contentWidth="compact"
-            sizing="mediumLargeSizeMediumTitles"
-            background="noiseDiagonalGradient"
-            cardStyle="gradient-bordered"
-            primaryButtonStyle="inset-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="medium"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
-                <NavbarStyleFullscreen
-                    navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
-                    brandName="WarmCrust Bakery"
-                    bottomLeftText="Global Community"
-                    bottomRightText="hello@warmcrustbakery.com"
-                    topBarClassName=""
-                    button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                />
-                </div>
-                <div id="productDetailCard" data-section="productDetailCard">
-                <ProductDetailCard
-                    layout="page"
-                    name={product.name}
-                    price={product.price}
-                    salePrice={meta.salePrice}
-                    rating={product.rating || 0}
-                    description={product.description}
-                    images={images}
-                    variants={variants.length > 0 ? variants : undefined}
-                    quantity={quantityVariant}
-                    ribbon={meta.ribbon}
-                    inventoryStatus={meta.inventoryStatus}
-                    inventoryQuantity={meta.inventoryQuantity}
-                    sku={meta.sku}
-                    buttons={[
-                        { text: "Add To Cart", onClick: handleAddToCart },
-                        { text: "Buy Now", onClick: handleBuyNow },
-                    ]}
-                />
-                </div>
-                <div id="productCart" data-section="productCart">
-                <ProductCart
-                    isOpen={cartOpen}
-                    onClose={() => setCartOpen(false)}
-                    items={cartItems}
-                    onQuantityChange={updateQuantity}
-                    onRemove={removeItem}
-                    total={`$${cartTotal}`}
-                    buttons={[
-                        {
-                            text: isCheckoutLoading ? "Processing..." : "Check Out",                            onClick: handleCheckout,
-                        },
-                    ]}
-                />
+                <div id="nav" data-section="nav">
+                    <NavbarStyleFullscreen
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" },
+                        ]}
+                        brandName="Sweet Crumb Bakery"
+                        bottomLeftText="Global Community"
+                        bottomRightText="hello@example.com"
+                    />
                 </div>
+                <Suspense fallback={<div>Loading...</div>}>
+                    <ProductDetailContent params={params} />
+                </Suspense>
             </ReactLenis>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index cfd43a6..36ccc85 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -6,93 +6,61 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
+import Link from 'next/link';
 
 function ShopPageContent() {
     const {
         products,
         isLoading,
-        search,
-        setSearch,
-        filters,
-    } = useProductCatalog({ basePath: "/shop" });
-
-    if (isLoading) {
-        return (
-            <ThemeProvider
-                defaultButtonVariant="icon-arrow"
-                defaultTextAnimation="entrance-slide"
-                borderRadius="rounded"
-                contentWidth="compact"
-                sizing="mediumLargeSizeMediumTitles"
-                background="noiseDiagonalGradient"
-                cardStyle="gradient-bordered"
-                primaryButtonStyle="inset-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="medium"
-            >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                    <NavbarStyleFullscreen
-                        navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
-                        brandName="WarmCrust Bakery"
-                        bottomLeftText="Global Community"
-                        bottomRightText="hello@warmcrustbakery.com"
-                        topBarClassName=""
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                    />
-                    </div>
-                    <main className="min-h-screen flex items-center justify-center pt-20">
-                        <p className="text-foreground">Loading products...</p>
-                    </main>
-                </ReactLenis>
-            </ThemeProvider>
-        );
-    }
+        searchQuery,
+        setSearchQuery,
+        categoryFilter,
+        setCategoryFilter,
+    } = useProductCatalog();
 
     return (
-        <ThemeProvider
-            defaultButtonVariant="icon-arrow"
-            defaultTextAnimation="entrance-slide"
-            borderRadius="rounded"
-            contentWidth="compact"
-            sizing="mediumLargeSizeMediumTitles"
-            background="noiseDiagonalGradient"
-            cardStyle="gradient-bordered"
-            primaryButtonStyle="inset-glow"
-            secondaryButtonStyle="radial-glow"
-            headingFontWeight="medium"
-        >
-            <ReactLenis root>
-                <div id="navbar" data-section="navbar">
-                <NavbarStyleFullscreen
-                    navItems={[{"name":"Home","id":"/"},{"name":"Hero","id":"hero-section"},{"name":"About","id":"about-section"},{"name":"Feature","id":"features-section"},{"name":"Product","id":"products-section"},{"name":"Testimonial","id":"testimonials-section"},{"name":"Faq","id":"faq-section"},{"name":"Contact","id":"contact-section"},{"name":"Shop","id":"/shop"}]}
-                    brandName="WarmCrust Bakery"
-                    bottomLeftText="Global Community"
-                    bottomRightText="hello@warmcrustbakery.com"
-                    topBarClassName=""
-                    button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                />
-                </div>
-                <div id="productCatalog" data-section="productCatalog">
-                <ProductCatalog
-                    layout="page"
-                    products={products}
-                    searchValue={search}
-                    onSearchChange={setSearch}
-                    searchPlaceholder="Search products..."
-                    filters={filters}
-                    emptyMessage="No products found"
-                />
-                </div>
-            </ReactLenis>
-        </ThemeProvider>
+        <ProductCatalog
+            products={products}
+            isLoading={isLoading}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+            categoryFilter={categoryFilter}
+            onCategoryChange={setCategoryFilter}
+        />
     );
 }
 
 export default function ShopPage() {
     return (
-        <Suspense>
-            <ShopPageContent />
-        </Suspense>
+        <ThemeProvider
+            defaultButtonVariant="text-stagger"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
+        >
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                    <NavbarStyleFullscreen
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" },
+                        ]}
+                        brandName="Sweet Crumb Bakery"
+                        bottomLeftText="Global Community"
+                        bottomRightText="hello@example.com"
+                    />
+                </div>
+                <Suspense fallback={<div>Loading...</div>}>
+                    <ShopPageContent />
+                </Suspense>
+            </ReactLenis>
+        </ThemeProvider>
     );
-}
\ No newline at end of file
+}