diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 6a27ba6..3d27110 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -13,108 +13,58 @@ function ShopPageContent() {
         isLoading,
         search,
         setSearch,
+        category,
+        setCategory,
+        sort,
+        setSort,
         filters,
-        cartOpen,
-        setCartOpen,
-    } = useProductCatalog({ basePath: "/shop" });
+        categories,
+    } = useProductCatalog();
 
-    if (isLoading) {
-        return (
-            <ThemeProvider
-                defaultButtonVariant="text-shift"
-                defaultTextAnimation="background-highlight"
-                borderRadius="pill"
-                contentWidth="mediumSmall"
-                sizing="medium"
-                background="grid"
-                cardStyle="inset"
-                primaryButtonStyle="inset-glow"
-                secondaryButtonStyle="solid"
-                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="Bakery Haven"
-                            bottomLeftText="Global Community"
-                            bottomRightText="hello@bakeryhaven.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>
-        );
-    }
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Blog", id: "/blog" },
+        { name: "Shop", id: "/shop" },
+    ];
 
     return (
         <ThemeProvider
-            defaultButtonVariant="text-shift"
-            defaultTextAnimation="background-highlight"
-            borderRadius="pill"
-            contentWidth="mediumSmall"
+            defaultButtonVariant="text-stagger"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
             sizing="medium"
-            background="grid"
-            cardStyle="inset"
-            primaryButtonStyle="inset-glow"
-            secondaryButtonStyle="solid"
+            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="Bakery Haven"
-                        bottomLeftText="Global Community"
-                        bottomRightText="hello@bakeryhaven.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>
+            <div id="nav" data-section="nav">
+                <NavbarStyleFullscreen navItems={navItems} />
+            </div>
+            <Suspense fallback={<div className="p-8 text-center">Loading products...</div>}>
+                <ProductCatalog
+                    products={products}
+                    isLoading={isLoading}
+                    search={search}
+                    setSearch={setSearch}
+                    category={category}
+                    setCategory={setCategory}
+                    sort={sort}
+                    setSort={setSort}
+                    filters={filters}
+                    categories={categories}
+                />
+            </Suspense>
         </ThemeProvider>
     );
 }
 
 export default function ShopPage() {
     return (
-        <Suspense>
+        <ReactLenis root>
             <ShopPageContent />
-        </Suspense>
+        </ReactLenis>
     );
-}
\ No newline at end of file
+}