diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
index e2065c1..9bf24c9 100644
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -1,66 +1,31 @@
 "use client";
 
 import { Suspense } from "react";
-import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 
-// Define common navigation items for sub-pages to maintain consistency
-const ALL_NAV_ITEMS_SUB_PAGES = [
+const navItemsForSubPages = [
     { name: "Home", id: "/" },
     { name: "Products", id: "/products" },
-    { name: "Shop", id: "/shop" },
-    { name: "Blog", id: "/blog" },
     { name: "About", id: "/#about" },
     { name: "Testimonials", id: "/#testimonials" },
-    { name: "FAQs", id: "/#faqs" }
+    { name: "FAQs", id: "/#faqs" },
+    { name: "Contact", id: "/#contact" },
 ];
 
 function ProductsPageContent() {
-    const {
-        products,
-        isLoading,
-        search,
-        setSearch,
-        filters,
-    } = useProductCatalog({ basePath: "/products" });
+    const { products, isLoading } = useProductCatalog({ basePath: "/products" });
 
-    if (isLoading) {
-        return (
-            <ThemeProvider
-                defaultButtonVariant="hover-bubble"
-                defaultTextAnimation="background-highlight"
-                borderRadius="pill"
-                contentWidth="mediumSmall"
-                sizing="largeSmallSizeMediumTitles"
-                background="circleGradient"
-                cardStyle="solid"
-                primaryButtonStyle="diagonal-gradient"
-                secondaryButtonStyle="solid"
-                headingFontWeight="light"
-            >
-                <ReactLenis root>
-                    <div id="nav" data-section="nav">
-                        <NavbarLayoutFloatingInline
-                            brandName="Nano Mango"
-                            navItems={ALL_NAV_ITEMS_SUB_PAGES}
-                            button={{ text: "Shop Now", href: "/products" }}
-                            buttonClassName="shadow-lg"
-                            navItemClassName="text-foreground/80 hover:text-foreground"
-                            className="backdrop-blur-sm bg-card/70"
-                        />
-                    </div>
-                    <div id="loading-section" data-section="loading-section">
-                        <main className="min-h-screen flex items-center justify-center pt-20">
-                            <p className="text-foreground">Loading products...</p>
-                        </main>
-                    </div>
-                </ReactLenis>
-            </ThemeProvider>
-        );
-    }
+    const mappedProducts = products.map(p => ({
+      id: p.id,
+      name: p.name,
+      price: p.price,
+      imageSrc: p.imageSrc,
+      imageAlt: p.imageAlt || p.name,
+      variant: p.category || 'Standard',
+    }));
 
     return (
         <ThemeProvider
@@ -75,29 +40,33 @@ function ProductsPageContent() {
             secondaryButtonStyle="solid"
             headingFontWeight="light"
         >
-            <ReactLenis root>
-                <div id="nav" data-section="nav">
-                    <NavbarLayoutFloatingInline
-                        brandName="Nano Mango"
-                        navItems={ALL_NAV_ITEMS_SUB_PAGES}
-                        button={{ text: "Shop Now", href: "/products" }}
-                        buttonClassName="shadow-lg"
-                        navItemClassName="text-foreground/80 hover:text-foreground"
-                        className="backdrop-blur-sm bg-card/70"
-                    />
+            <div id="nav" data-section="nav">
+                <NavbarLayoutFloatingInline
+                    brandName="Nano Mango"
+                    navItems={navItemsForSubPages}
+                    button={{ text: "Go to Shop", href: "/shop" }}
+                    buttonClassName="shadow-lg"
+                    navItemClassName="text-foreground/80 hover:text-foreground"
+                    className="backdrop-blur-sm bg-card/70"
+                />
+            </div>
+            {isLoading ? (
+                <div className="w-full mx-auto py-40 text-center">
+                    <p className="text-foreground">Loading products...</p>
                 </div>
+            ) : (
                 <div id="product-catalog" data-section="product-catalog">
-                    <ProductCatalog
-                        layout="page"
-                        products={products}
-                        searchValue={search}
-                        onSearchChange={setSearch}
-                        searchPlaceholder="Search products..."
-                        filters={filters}
-                        emptyMessage="No products found"
+                     <ProductCardFour
+                        title="Our Products"
+                        description="Browse our hand-picked selection of high-quality cups."
+                        products={mappedProducts}
+                        gridVariant="four-items-2x2-equal-grid"
+                        animationType="slide-up"
+                        textboxLayout="default"
+                        useInvertedBackground={false}
                     />
                 </div>
-            </ReactLenis>
+            )}
         </ThemeProvider>
     );
 }