diff --git a/src/app/page.tsx b/src/app/page.tsx
index bb129e5..c410ea7 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,7 +16,7 @@ export default function HomePage() {
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
-      defaultTextAnimation="entrance-slide"
+      defaultTextAnimation="reveal-blur"
       borderRadius="pill"
       contentWidth="smallMedium"
       sizing="mediumLargeSizeMediumTitles"
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 9854fac..7fcfc07 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,99 +1,25 @@
 "use client";
 
-import { Suspense } from "react";
 import ReactLenis from "lenis/react";
+import ProductCatalogOne from "@/components/sections/productCatalog/ProductCatalogOne";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 
-function ShopPageContent() {
+export default function ShopPage() {
     const {
         products,
         isLoading,
         search,
         setSearch,
+        category,
+        setCategory,
+        sort,
+        setSort,
         filters,
-        cartOpen,
-        setCartOpen,
-    } = useProductCatalog({ basePath: "/shop" });
-
-    if (isLoading) {
-        return (
-            <ThemeProvider
-                defaultButtonVariant="icon-arrow"
-                defaultTextAnimation="entrance-slide"
-                borderRadius="pill"
-                contentWidth="smallMedium"
-                sizing="mediumLargeSizeMediumTitles"
-                background="aurora"
-                cardStyle="gradient-radial"
-                primaryButtonStyle="inset-glow"
-                secondaryButtonStyle="radial-glow"
-                headingFontWeight="medium"
-            >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleCentered
-                            brandName="Northstar Roofing"
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Residential", id: "residential" },
-                                { name: "Commercial", id: "commercial" },
-                                { name: "Storm Damage", id: "storm-damage" },
-                                { name: "Gallery", id: "gallery" },
-                                { name: "Shop", id: "/shop" }
-                            ]}
-                            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>
-                    <div id="footer" data-section="footer">
-                        <FooterLogoEmphasis
-                            logoText="Northstar Roofing"
-                            columns={[
-                                {
-                                    items: [
-                                        { label: "Home", href: "#home" },
-                                        { label: "Residential Roofing", href: "#residential" },
-                                        { label: "Commercial Roofing", href: "#commercial" },
-                                        { label: "Storm Damage", href: "#storm-damage" }
-                                    ]
-                                },
-                                {
-                                    items: [
-                                        { label: "About Us", href: "#about" },
-                                        { label: "Project Gallery", href: "#gallery" },
-                                        { label: "Customer Reviews", href: "#reviews" },
-                                        { label: "Contact Us", href: "#contact" }
-                                    ]
-                                },
-                                {
-                                    items: [
-                                        { label: "Licensed & Insured", href: "#" },
-                                        { label: "Warranty Information", href: "#" },
-                                        { label: "Privacy Policy", href: "#" },
-                                        { label: "Terms of Service", href: "#" }
-                                    ]
-                                },
-                                {
-                                    items: [
-                                        { label: "Emergency Service", href: "tel:+1-701-555-0100" },
-                                        { label: "701-555-0100", href: "tel:+1-701-555-0100" },
-                                        { label: "Monday - Friday: 8AM - 6PM", href: "#" },
-                                        { label: "24/7 Emergency Hotline", href: "tel:+1-701-555-0101" }
-                                    ]
-                                }
-                            ]}
-                        />
-                    </div>
-                </ReactLenis>
-            </ThemeProvider>
-        );
-    }
+        categories
+    } = useProductCatalog();
 
     return (
         <ThemeProvider
@@ -109,7 +35,7 @@ function ShopPageContent() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleCentered
                         brandName="Northstar Roofing"
                         navItems={[
@@ -117,23 +43,40 @@ function ShopPageContent() {
                             { name: "Residential", id: "residential" },
                             { name: "Commercial", id: "commercial" },
                             { name: "Storm Damage", id: "storm-damage" },
-                            { name: "Gallery", id: "gallery" },
-                            { name: "Shop", id: "/shop" }
+                            { name: "Gallery", id: "gallery" }
                         ]}
-                        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"
+                        button={{
+                            text: "Get Free Estimate",                            href: "contact"
+                        }}
                     />
                 </div>
+
+                {isLoading ? (
+                    <div className="w-content-width mx-auto py-20 text-center">
+                        <p className="text-foreground">Loading products...</p>
+                    </div>
+                ) : (
+                    <div id="shop" data-section="shop">
+                        <ProductCatalogOne
+                            products={products}
+                            search={search}
+                            setSearch={setSearch}
+                            category={category}
+                            setCategory={setCategory}
+                            sort={sort}
+                            setSort={setSort}
+                            filters={filters}
+                            categories={categories}
+                            title="Roofing Materials & Supplies"
+                            description="Quality materials from trusted manufacturers for all your roofing needs"
+                            textboxLayout="default"
+                            useInvertedBackground={false}
+                            carouselMode="buttons"
+                            animationType="slide-up"
+                        />
+                    </div>
+                )}
+
                 <div id="footer" data-section="footer">
                     <FooterLogoEmphasis
                         logoText="Northstar Roofing"
@@ -176,12 +119,4 @@ function ShopPageContent() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
-
-export default function ShopPage() {
-    return (
-        <Suspense>
-            <ShopPageContent />
-        </Suspense>
-    );
 }
\ No newline at end of file