diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index ac215bb..dd1b127 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -31,10 +31,13 @@ export default function BlogPage() {
                     <NavbarLayoutFloatingInline
                         navItems={[
                             { name: "Home", id: "/" },
-                            { name: "About", id: "about" },
-                            { name: "Features", id: "features" },
-                            { name: "Events", id: "events" },
-                            { name: "Contact", id: "contact" },
+                            { name: "About", id: "#about" },
+                            { name: "Features", id: "#features" },
+                            { name: "Events", id: "#events" },
+                            { name: "Shop", id: "/shop" },
+                            { name: "Products", id: "/products" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Contact", id: "#contact" }
                         ]}
                         brandName="Balero Chess Club"
                         button={{ text: "Join Now", href: "#contact" }}
@@ -66,10 +69,13 @@ export default function BlogPage() {
                         columns={[
                             {
                                 title: "Quick Links",                                items: [
-                                    { label: "Home", href: "#" },
+                                    { label: "Home", href: "/" },
                                     { label: "About", href: "#about" },
                                     { label: "Features", href: "#features" },
                                     { label: "Events", href: "#events" },
+                                    { label: "Shop", href: "/shop" },
+                                    { label: "Products", href: "/products" },
+                                    { label: "Blog", href: "/blog" }
                                 ],
                             },
                             {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index acdecc1..de5276b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -186,7 +186,7 @@ export default function RootLayout({
 
     const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
     const hasButtonClass = buttonClasses.some(cls =>
-      element.classList.contains(cls) || element.classList.contains(\`btn-\${cls}\`)
+      element.classList.contains(cls) || element.classList.contains(`btn-${cls}`)
     );
 
     if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
@@ -678,17 +678,17 @@ export default function RootLayout({
     const rect = element.getBoundingClientRect();
     const overlay = document.createElement('div');
     overlay.className = 'webild-hover-overlay';
-    overlay.style.cssText = \`
+    overlay.style.cssText = `
       position: fixed !important;
-      top: \${rect.top - 2}px !important;
-      left: \${rect.left - 2}px !important;
-      width: \${rect.width + 4}px !important;
-      height: \${rect.height + 4}px !important;
+      top: ${rect.top - 2}px !important;
+      left: ${rect.left - 2}px !important;
+      width: ${rect.width + 4}px !important;
+      height: ${rect.height + 4}px !important;
       background-color: rgba(90, 113, 230, 0.15) !important;
       pointer-events: none !important;
       z-index: 999998 !important;
       transition: all 0.15s ease !important;
-    \`;
+    `;
     document.body.appendChild(overlay);
     return overlay;
   };
@@ -751,11 +751,11 @@ export default function RootLayout({
       elementTypeLabel.classList.add('label-bottom');
     }
 
-    elementTypeLabel.style.cssText = \`
-      left: \${labelLeft}px !important;
-      top: \${labelTop}px !important;
+    elementTypeLabel.style.cssText = `
+      left: ${labelLeft}px !important;
+      top: ${labelTop}px !important;
       transform: none !important;
-    \`;
+    `;
   };
   
   const removeElementTypeLabel = () => {
@@ -1009,7 +1009,7 @@ export default function RootLayout({
   const getStorageKey = () => {
     const url = new URL(window.location.href);
     const pathParts = url.pathname.split('/').filter(Boolean);
-    return \`webild-changes-\${pathParts.join('-')}\`;
+    return `webild-changes-${pathParts.join('-')}`;
   };
 
   const saveChangeToStorage = (change) => {
@@ -1173,7 +1173,7 @@ export default function RootLayout({
           
           window.parent.postMessage({
             type: 'webild-text-update-success',
-            data: {
+            data: { 
               selector: finalSelector,
               newValue: newValue
             }
@@ -1245,7 +1245,7 @@ export default function RootLayout({
 
         if (isBackground) {
           oldValue = window.getComputedStyle(element).backgroundImage;
-          element.style.backgroundImage = \`url('\${newSrc}')\`;
+          element.style.backgroundImage = `url('${newSrc}')`;
           replaced = true;
         } else if (element.tagName.toLowerCase() === 'img') {
           oldValue = element.src;
@@ -1280,7 +1280,7 @@ export default function RootLayout({
           const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
           if (hasBackgroundImage) {
             oldValue = window.getComputedStyle(element).backgroundImage;
-            element.style.backgroundImage = \`url('\${newSrc}')\`;
+            element.style.backgroundImage = `url('${newSrc}')`;
             replaced = true;
           }
         }
@@ -1396,9 +1396,6 @@ export default function RootLayout({
       el.classList.remove(selectedClass);
     });
     
-    const styleEl = document.getElementById('webild-inspector-styles');
-    if (styleEl) styleEl.remove();
-    
     hoveredElement = null;
     selectedElement = null;
   };
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 76b1a0e..fafd676 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,10 +29,14 @@ export default function LandingPage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
           navItems={[
-            { name: "About", id: "about" },
-            { name: "Features", id: "features" },
-            { name: "Events", id: "events" },
-            { name: "Contact", id: "contact" },
+            { name: "Home", id: "/" },
+            { name: "About", id: "#about" },
+            { name: "Features", id: "#features" },
+            { name: "Events", id: "#events" },
+            { name: "Shop", id: "/shop" },
+            { name: "Products", id: "/products" },
+            { name: "Blog", id: "/blog" },
+            { name: "Contact", id: "#contact" }
           ]}
           brandName="Balero Chess Club"
           button={{ text: "Join Now", href: "#contact" }}
@@ -210,10 +214,13 @@ export default function LandingPage() {
           columns={[
             {
               title: "Quick Links",              items: [
-                { label: "Home", href: "#" },
+                { label: "Home", href: "/" },
                 { label: "About", href: "#about" },
                 { label: "Features", href: "#features" },
                 { label: "Events", href: "#events" },
+                { label: "Shop", href: "/shop" },
+                { label: "Products", href: "/products" },
+                { label: "Blog", href: "/blog" }
               ],
             },
             {
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
new file mode 100644
index 0000000..e786239
--- /dev/null
+++ b/src/app/products/page.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import React from 'react';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+
+// Component Imports
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function ProductsPage() {
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="rounded"
+            contentWidth="mediumSmall"
+            sizing="mediumLargeSizeMediumTitles"
+            background="noiseDiagonalGradient"
+            cardStyle="solid"
+            primaryButtonStyle="double-inset"
+            secondaryButtonStyle="radial-glow"
+            headingFontWeight="normal"
+        >
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "About", id: "#about" },
+                            { name: "Features", id: "#features" },
+                            { name: "Events", id: "#events" },
+                            { name: "Shop", id: "/shop" },
+                            { name: "Products", id: "/products" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Contact", id: "#contact" }
+                        ]}
+                        brandName="Balero Chess Club"
+                        button={{ text: "Join Now", href: "#contact" }}
+                        buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
+                        navItemClassName="text-[var(--foreground)] hover:text-[var(--primary-cta)]"
+                    />
+                </div>
+
+                <div id="product-showcase" data-section="product-showcase">
+                    <ProductCardThree
+                        title="Our Products"
+                        description="Explore our range of high-quality chess products and accessories."
+                        tag="Shop Now"
+                        textboxLayout="default"
+                        products={[
+                            {
+                                id: "1",                                name: "Premium Chess Set (Wood)",                                price: "$149.99",                                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770650117849-5g9y9h7u.jpg",                                imageAlt: "Premium wooden chess set"
+                            },
+                            {
+                                id: "2",                                name: "Electronic Chess Clock",                                price: "$49.99",                                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770650170139-p2l3m8n7.jpg",                                imageAlt: "Electronic chess clock"
+                            },
+                            {
+                                id: "3",                                name: "Beginner's Chess Book",                                price: "$19.99",                                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770650220267-q0w1e2r3.jpg",                                imageAlt: "Beginner's chess book"
+                            }
+                        ]}
+                        gridVariant="three-columns-all-equal-width"
+                        animationType="slide-up"
+                        useInvertedBackground={false}
+                    />
+                </div>
+
+                <div id="footer" data-section="footer">
+                    <FooterSimple
+                        columns={[
+                            {
+                                title: "Quick Links",                                items: [
+                                    { label: "Home", href: "/" },
+                                    { label: "About", href: "#about" },
+                                    { label: "Features", href: "#features" },
+                                    { label: "Events", href: "#events" },
+                                    { label: "Shop", href: "/shop" },
+                                    { label: "Products", href: "/products" },
+                                    { label: "Blog", href: "/blog" }
+                                ],
+                            },
+                            {
+                                title: "Resources",                                items: [
+                                    { label: "FAQ", href: "#faq" },
+                                    { label: "Contact", href: "#contact" },
+                                ],
+                            },
+                            {
+                                title: "Connect",                                items: [
+                                    { label: "Facebook", href: "https://www.facebook.com/balerochessclub" },
+                                    { label: "Instagram", href: "https://www.instagram.com/balerochessclub" },
+                                ],
+                            },
+                        ]}
+                        bottomLeftText="© 2024 Balero Chess Club. All rights reserved."
+                        bottomRightText="Built with passion for chess."
+                        className="bg-[var(--background)] text-[var(--foreground)]"
+                        columnTitleClassName="font-semibold text-[var(--foreground)]"
+                        columnItemClassName="text-[var(--foreground)] opacity-80 hover:text-[var(--primary-cta)]"
+                        bottomLeftTextClassName="text-[var(--foreground)] opacity-70"
+                        bottomRightTextClassName="text-[var(--foreground)] opacity-70"
+                    />
+                </div>
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 0084f90..d5f463e 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -91,7 +91,16 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
-                           navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                           navItems={[
+                                { name: "Home", id: "/" },
+                                { name: "Shop", id: "/shop" },
+                                { name: "Products", id: "/products" },
+                                { name: "About", id: "#about" },
+                                { name: "Features", id: "#features" },
+                                { name: "Events", id: "#events" },
+                                { name: "Blog", id: "/blog" },
+                                { name: "Contact", id: "#contact" }
+                            ]}
                            brandName="Balero Chess Club"
                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                            buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
@@ -123,7 +132,16 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
-                           navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                           navItems={[
+                                { name: "Home", id: "/" },
+                                { name: "Shop", id: "/shop" },
+                                { name: "Products", id: "/products" },
+                                { name: "About", id: "#about" },
+                                { name: "Features", id: "#features" },
+                                { name: "Events", id: "#events" },
+                                { name: "Blog", id: "/blog" },
+                                { name: "Contact", id: "#contact" }
+                            ]}
                            brandName="Balero Chess Club"
                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                            buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
@@ -162,7 +180,16 @@ function ProductPageContent({ params }: ProductPageProps) {
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingInline
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Shop", id: "/shop" },
+                            { name: "Products", id: "/products" },
+                            { name: "About", id: "#about" },
+                            { name: "Features", id: "#features" },
+                            { name: "Events", id: "#events" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Contact", id: "#contact" }
+                        ]}
                         brandName="Balero Chess Club"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
@@ -208,9 +235,29 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <div id="footer" data-section="footer">
                      <FooterSimple 
                         columns={[
-                            { title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "#about" }, { label: "Features", href: "#features" }, { label: "Events", href: "#events" }] },
-                            { title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
-                            { title: "Connect", items: [{ label: "Facebook", href: "https://www.facebook.com/balerochessclub" }, { label: "Instagram", href: "https://www.instagram.com/balerochessclub" }] }
+                            {
+                                title: "Quick Links",                                items: [
+                                    { label: "Home", href: "/" },
+                                    { label: "About", href: "#about" },
+                                    { label: "Features", href: "#features" },
+                                    { label: "Events", href: "#events" },
+                                    { label: "Shop", href: "/shop" },
+                                    { label: "Products", href: "/products" },
+                                    { label: "Blog", href: "/blog" }
+                                ],
+                            },
+                            {
+                                title: "Resources",                                items: [
+                                    { label: "FAQ", href: "#faq" },
+                                    { label: "Contact", href: "#contact" },
+                                ],
+                            },
+                            {
+                                title: "Connect",                                items: [
+                                    { label: "Facebook", href: "https://www.facebook.com/balerochessclub" },
+                                    { label: "Instagram", href: "https://www.instagram.com/balerochessclub" },
+                                ],
+                            },
                         ]}
                         bottomLeftText="© 2024 Balero Chess Club. All rights reserved."
                         bottomRightText="Built with passion for chess."
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index edb582e..131ef1a 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -31,7 +31,10 @@ function ShopPageContent() {
         getCheckoutItems,
     } = useCart();
 
-    const { checkout, isLoading: isCheckoutLoading } = useCheckout();
+    const {
+        checkout,
+        isLoading: isCheckoutLoading
+    } = useCheckout();
 
     const handleCheckout = useCallback(async () => {
         if (cartItems.length === 0) return;
@@ -59,7 +62,16 @@ function ShopPageContent() {
                 <ReactLenis root>
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingInline
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={[
+                                { name: "Home", id: "/" },
+                                { name: "Shop", id: "/shop" },
+                                { name: "Products", id: "/products" },
+                                { name: "About", id: "#about" },
+                                { name: "Features", id: "#features" },
+                                { name: "Events", id: "#events" },
+                                { name: "Blog", id: "/blog" },
+                                { name: "Contact", id: "#contact" }
+                            ]}
                             brandName="Balero Chess Club"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
@@ -90,7 +102,16 @@ function ShopPageContent() {
             <ReactLenis root>
                 <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingInline
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={[
+                            { name: "Home", id: "/" },
+                            { name: "Shop", id: "/shop" },
+                            { name: "Products", id: "/products" },
+                            { name: "About", id: "#about" },
+                            { name: "Features", id: "#features" },
+                            { name: "Events", id: "#events" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Contact", id: "#contact" }
+                        ]}
                         brandName="Balero Chess Club"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
@@ -126,9 +147,29 @@ function ShopPageContent() {
                 <div id="footer" data-section="footer">
                     <FooterSimple 
                         columns={[
-                            { title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "#about" }, { label: "Features", href: "#features" }, { label: "Events", href: "#events" }] },
-                            { title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
-                            { title: "Connect", items: [{ label: "Facebook", href: "https://www.facebook.com/balerochessclub" }, { label: "Instagram", href: "https://www.instagram.com/balerochessclub" }] }
+                            {
+                                title: "Quick Links",                                items: [
+                                    { label: "Home", href: "/" },
+                                    { label: "About", href: "#about" },
+                                    { label: "Features", href: "#features" },
+                                    { label: "Events", href: "#events" },
+                                    { label: "Shop", href: "/shop" },
+                                    { label: "Products", href: "/products" },
+                                    { label: "Blog", href: "/blog" }
+                                ],
+                            },
+                            {
+                                title: "Resources",                                items: [
+                                    { label: "FAQ", href: "#faq" },
+                                    { label: "Contact", href: "#contact" },
+                                ],
+                            },
+                            {
+                                title: "Connect",                                items: [
+                                    { label: "Facebook", href: "https://www.facebook.com/balerochessclub" },
+                                    { label: "Instagram", href: "https://www.instagram.com/balerochessclub" },
+                                ],
+                            },
                         ]}
                         bottomLeftText="© 2024 Balero Chess Club. All rights reserved."
                         bottomRightText="Built with passion for chess."