diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index e004a09..c8737a9 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -33,7 +33,8 @@ export default function BlogPage() {
                             { name: "Attractions", id: "attractions" },
                             { name: "History", id: "history" },
                             { name: "Events", id: "events" },
-                            { name: "Plan Your Visit", id: "faq" }
+                            { name: "Plan Your Visit", id: "faq" },
+                            { name: "Products", id: "/products" }
                         ]}
                         button={{ text: "Get Started", href: "contact" }}
                     />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d90ff30..261961f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -31,11 +31,13 @@ export default function TallinnOldTownPage() {
         <NavbarStyleCentered
           brandName="Tallinn Old Town"
           navItems={[
+            { name: "Home", id: "/" },
             { name: "About", id: "about" },
             { name: "Attractions", id: "attractions" },
             { name: "History", id: "history" },
             { name: "Events", id: "events" },
-            { name: "Plan Your Visit", id: "faq" }
+            { name: "Plan Your Visit", id: "faq" },
+            { name: "Products", id: "/products" }
           ]}
           button={{ text: "Get Started", href: "contact" }}
         />
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
new file mode 100644
index 0000000..c97acd2
--- /dev/null
+++ b/src/app/products/page.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { useProductCatalog } from "@/hooks/useProductCatalog";
+
+export default function ProductsPage() {
+    const {
+        products,
+        isLoading,
+        search,
+        setSearch,
+        filters,
+    } = useProductCatalog({ basePath: "/products" });
+
+    if (isLoading) {
+        return (
+            <ThemeProvider
+                defaultButtonVariant="hover-bubble"
+                defaultTextAnimation="entrance-slide"
+                borderRadius="soft"
+                contentWidth="mediumLarge"
+                sizing="medium"
+                background="circleGradient"
+                cardStyle="elevated"
+                primaryButtonStyle="gradient"
+                secondaryButtonStyle="layered"
+                headingFontWeight="bold"
+            >
+                <ReactLenis root>
+                    <div id="navbar" data-section="navbar">
+                        <NavbarStyleCentered
+                            brandName="Tallinn Old Town"
+                            navItems={[
+                                { name: "Home", id: "/" },
+                                { name: "About", id: "about" },
+                                { name: "Attractions", id: "attractions" },
+                                { name: "History", id: "history" },
+                                { name: "Events", id: "events" },
+                                { name: "Plan Your Visit", id: "faq" },
+                                { name: "Products", id: "/products" }
+                            ]}
+                            button={{ text: "Cart", onClick: () => console.log("cart") }}
+                        />
+                    </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">
+                        <FooterMedia
+                            imageSrc="https://img.b2bpic.net/free-photo/aerial-view-historical-center-lviv-ukraine_231208-68.jpg"
+                            imageAlt="Tallinn Old Town sunset"
+                            logoText="Tallinn Old Town"
+                            copyrightText="© 2025 Tallinn Old Town | Preserving Medieval Heritage"
+                            columns={[
+                                {
+                                    title: "Explore",                                    items: [
+                                        { label: "Attractions", href: "attractions" },
+                                        { label: "History", href: "history" },
+                                        { label: "Events", href: "events" },
+                                        { label: "Plan Visit", href: "faq" }
+                                    ]
+                                },
+                                {
+                                    title: "Information",                                    items: [
+                                        { label: "About", href: "about" },
+                                        { label: "Cultural Guide", href: "events" },
+                                        { label: "Travel Tips", href: "events" },
+                                        { label: "Testimonials", href: "testimonials" }
+                                    ]
+                                },
+                                {
+                                    title: "Connect",                                    items: [
+                                        { label: "Contact Us", href: "contact" },
+                                        { label: "Newsletter", href: "contact" },
+                                        { label: "Visit Website", href: "https://www.visittallinn.ee" },
+                                        { label: "Social Media", href: "https://www.instagram.com/visittallinn" }
+                                    ]
+                                }
+                            ]}
+                        />
+                    </div>
+                </ReactLenis>
+            </ThemeProvider>
+        );
+    }
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="hover-bubble"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="soft"
+            contentWidth="mediumLarge"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="bold"
+        >
+            <ReactLenis root>
+                <div id="navbar" data-section="navbar">
+                    <NavbarStyleCentered
+                        brandName="Tallinn Old Town"
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "About", id: "about" },
+                            { name: "Attractions", id: "attractions" },
+                            { name: "History", id: "history" },
+                            { name: "Events", id: "events" },
+                            { name: "Plan Your Visit", id: "faq" },
+                            { name: "Products", id: "/products" }
+                        ]}
+                        button={{ text: "Cart", onClick: () => console.log("cart") }}
+                    />
+                </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>
+                <div id="footer" data-section="footer">
+                    <FooterMedia
+                        imageSrc="https://img.b2bpic.net/free-photo/aerial-view-historical-center-lviv-ukraine_231208-68.jpg"
+                        imageAlt="Tallinn Old Town sunset"
+                        logoText="Tallinn Old Town"
+                        copyrightText="© 2025 Tallinn Old Town | Preserving Medieval Heritage"
+                        columns={[
+                            {
+                                title: "Explore",                                items: [
+                                    { label: "Attractions", href: "attractions" },
+                                    { label: "History", href: "history" },
+                                    { label: "Events", href: "events" },
+                                    { label: "Plan Visit", href: "faq" }
+                                ]
+                            },
+                            {
+                                title: "Information",                                items: [
+                                    { label: "About", href: "about" },
+                                    { label: "Cultural Guide", href: "events" },
+                                    { label: "Travel Tips", href: "events" },
+                                    { label: "Testimonials", href: "testimonials" }
+                                ]
+                            },
+                            {
+                                title: "Connect",                                items: [
+                                    { label: "Contact Us", href: "contact" },
+                                    { label: "Newsletter", href: "contact" },
+                                    { label: "Visit Website", href: "https://www.visittallinn.ee" },
+                                    { label: "Social Media", href: "https://www.instagram.com/visittallinn" }
+                                ]
+                            }
+                        ]}
+                    />
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
\ No newline at end of file
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index bb38b84..d40eca2 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -91,7 +91,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                                 { name: "History", id: "history" },
                                 { name: "Events", id: "events" },
                                 { name: "Plan Your Visit", id: "faq" },
-                                { name: "Shop", id: "/shop" }
+                                { name: "Products", id: "/products" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -163,7 +163,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                                 { name: "History", id: "history" },
                                 { name: "Events", id: "events" },
                                 { name: "Plan Your Visit", id: "faq" },
-                                { name: "Shop", id: "/shop" }
+                                { name: "Products", id: "/products" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
@@ -242,7 +242,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                             { name: "History", id: "history" },
                             { name: "Events", id: "events" },
                             { name: "Plan Your Visit", id: "faq" },
-                            { name: "Shop", id: "/shop" }
+                            { name: "Products", id: "/products" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index ff0fd47..730eb8f 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -41,7 +41,7 @@ export default function ShopPage() {
                                 { name: "History", id: "history" },
                                 { name: "Events", id: "events" },
                                 { name: "Plan Your Visit", id: "faq" },
-                                { name: "Shop", id: "/shop" }
+                                { name: "Products", id: "/products" }
                             ]}
                             button={{ text: "Cart", onClick: () => console.log("cart") }}
                         />
@@ -112,7 +112,7 @@ export default function ShopPage() {
                             { name: "History", id: "history" },
                             { name: "Events", id: "events" },
                             { name: "Plan Your Visit", id: "faq" },
-                            { name: "Shop", id: "/shop" }
+                            { name: "Products", id: "/products" }
                         ]}
                         button={{ text: "Cart", onClick: () => console.log("cart") }}
                     />