diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index b667d55..0b61def 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -11,6 +11,7 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { useProductDetail } from "@/hooks/useProductDetail";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
+import Link from "next/link";
 
 interface ProductPageProps {
     params: Promise<{ id: string }>;
@@ -74,25 +75,26 @@ export default function ProductPage({ params }: ProductPageProps) {
                 borderRadius="soft"
                 contentWidth="compact"
                 sizing="mediumLargeSizeMediumTitles"
-                background="aurora"
+                background="circleGradient"
                 cardStyle="elevated"
                 primaryButtonStyle="double-inset"
                 secondaryButtonStyle="glass"
                 headingFontWeight="normal"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered
                             navItems={[
-                                {"name":"Home","id":"/"},
-                                {"name":"Features","id":"features"},
-                                {"name":"How It Works","id":"about"},
-                                {"name":"Pricing","id":"pricing"},
-                                {"name":"Resources","id":"faq"},
-                                {"name":"Contact","id":"contact"},
-                                {"name":"Shop","id":"/shop"}
+                                { name: "Home", id: "/" },
+                                { name: "Features", id: "features" },
+                                { name: "How It Works", id: "about" },
+                                { name: "Pricing", id: "pricing" },
+                                { name: "Resources", id: "faq" },
+                                { name: "Contact", id: "contact" },
+                                { name: "Blog", id: "/blog" },
+                                { name: "Shop", id: "/shop" }
                             ]}
-                            button={{"text":"Cart","onClick":() => setCartOpen(true)}}
+                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             brandName="SecureAutomate"
                         />
                     </div>
@@ -104,9 +106,9 @@ export default function ProductPage({ params }: ProductPageProps) {
                             imageSrc="https://img.b2bpic.net/free-photo/close-up-shot-notebook-displaying-ai-machine-learning-algorithms_482257-122159.jpg"
                             imageAlt="Network security infrastructure"
                             columns={[
-                                {"title":"Product","items":[{"label":"Features","href":"#features"},{"label":"Pricing","href":"#pricing"},{"label":"Security","href":"https://example.com/security"},{"label":"Roadmap","href":"https://example.com/roadmap"}]},
-                                {"title":"Company","items":[{"label":"About Us","href":"https://example.com/about"},{"label":"Blog","href":"https://example.com/blog"},{"label":"Careers","href":"https://example.com/careers"},{"label":"Contact","href":"#contact"}]},
-                                {"title":"Resources","items":[{"label":"Documentation","href":"https://example.com/docs"},{"label":"API Reference","href":"https://example.com/api"},{"label":"Community","href":"https://example.com/community"},{"label":"Support","href":"https://example.com/support"}]}
+                                { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Security", href: "https://example.com/security" }, { label: "Roadmap", href: "https://example.com/roadmap" }] },
+                                { title: "Company", items: [{ label: "About Us", href: "https://example.com/about" }, { label: "Blog", href: "https://example.com/blog" }, { label: "Careers", href: "https://example.com/careers" }, { label: "Contact", href: "#contact" }] },
+                                { title: "Resources", items: [{ label: "Documentation", href: "https://example.com/docs" }, { label: "API Reference", href: "https://example.com/api" }, { label: "Community", href: "https://example.com/community" }, { label: "Support", href: "https://example.com/support" }] }
                             ]}
                             logoText="SecureAutomate"
                             copyrightText="© 2025 SecureAutomate. All rights reserved."
@@ -125,25 +127,26 @@ export default function ProductPage({ params }: ProductPageProps) {
                 borderRadius="soft"
                 contentWidth="compact"
                 sizing="mediumLargeSizeMediumTitles"
-                background="aurora"
+                background="circleGradient"
                 cardStyle="elevated"
                 primaryButtonStyle="double-inset"
                 secondaryButtonStyle="glass"
                 headingFontWeight="normal"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleCentered
                             navItems={[
-                                {"name":"Home","id":"/"},
-                                {"name":"Features","id":"features"},
-                                {"name":"How It Works","id":"about"},
-                                {"name":"Pricing","id":"pricing"},
-                                {"name":"Resources","id":"faq"},
-                                {"name":"Contact","id":"contact"},
-                                {"name":"Shop","id":"/shop"}
+                                { name: "Home", id: "/" },
+                                { name: "Features", id: "features" },
+                                { name: "How It Works", id: "about" },
+                                { name: "Pricing", id: "pricing" },
+                                { name: "Resources", id: "faq" },
+                                { name: "Contact", id: "contact" },
+                                { name: "Blog", id: "/blog" },
+                                { name: "Shop", id: "/shop" }
                             ]}
-                            button={{"text":"Cart","onClick":() => setCartOpen(true)}}
+                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             brandName="SecureAutomate"
                         />
                     </div>
@@ -163,9 +166,9 @@ export default function ProductPage({ params }: ProductPageProps) {
                             imageSrc="https://img.b2bpic.net/free-photo/close-up-shot-notebook-displaying-ai-machine-learning-algorithms_482257-122159.jpg"
                             imageAlt="Network security infrastructure"
                             columns={[
-                                {"title":"Product","items":[{"label":"Features","href":"#features"},{"label":"Pricing","href":"#pricing"},{"label":"Security","href":"https://example.com/security"},{"label":"Roadmap","href":"https://example.com/roadmap"}]},
-                                {"title":"Company","items":[{"label":"About Us","href":"https://example.com/about"},{"label":"Blog","href":"https://example.com/blog"},{"label":"Careers","href":"https://example.com/careers"},{"label":"Contact","href":"#contact"}]},
-                                {"title":"Resources","items":[{"label":"Documentation","href":"https://example.com/docs"},{"label":"API Reference","href":"https://example.com/api"},{"label":"Community","href":"https://example.com/community"},{"label":"Support","href":"https://example.com/support"}]}
+                                { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Security", href: "https://example.com/security" }, { label: "Roadmap", href: "https://example.com/roadmap" }] },
+                                { title: "Company", items: [{ label: "About Us", href: "https://example.com/about" }, { label: "Blog", href: "https://example.com/blog" }, { label: "Careers", href: "https://example.com/careers" }, { label: "Contact", href: "#contact" }] },
+                                { title: "Resources", items: [{ label: "Documentation", href: "https://example.com/docs" }, { label: "API Reference", href: "https://example.com/api" }, { label: "Community", href: "https://example.com/community" }, { label: "Support", href: "https://example.com/support" }] }
                             ]}
                             logoText="SecureAutomate"
                             copyrightText="© 2025 SecureAutomate. All rights reserved."
@@ -183,25 +186,26 @@ export default function ProductPage({ params }: ProductPageProps) {
             borderRadius="soft"
             contentWidth="compact"
             sizing="mediumLargeSizeMediumTitles"
-            background="aurora"
+            background="circleGradient"
             cardStyle="elevated"
             primaryButtonStyle="double-inset"
             secondaryButtonStyle="glass"
             headingFontWeight="normal"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleCentered
                         navItems={[
-                            {"name":"Home","id":"/"},
-                            {"name":"Features","id":"features"},
-                            {"name":"How It Works","id":"about"},
-                            {"name":"Pricing","id":"pricing"},
-                            {"name":"Resources","id":"faq"},
-                            {"name":"Contact","id":"contact"},
-                            {"name":"Shop","id":"/shop"}
+                            { name: "Home", id: "/" },
+                            { name: "Features", id: "features" },
+                            { name: "How It Works", id: "about" },
+                            { name: "Pricing", id: "pricing" },
+                            { name: "Resources", id: "faq" },
+                            { name: "Contact", id: "contact" },
+                            { name: "Blog", id: "/blog" },
+                            { name: "Shop", id: "/shop" }
                         ]}
-                        button={{"text":"Cart","onClick":() => setCartOpen(true)}}
+                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         brandName="SecureAutomate"
                     />
                 </div>
@@ -246,9 +250,9 @@ export default function ProductPage({ params }: ProductPageProps) {
                         imageSrc="https://img.b2bpic.net/free-photo/close-up-shot-notebook-displaying-ai-machine-learning-algorithms_482257-122159.jpg"
                         imageAlt="Network security infrastructure"
                         columns={[
-                            {"title":"Product","items":[{"label":"Features","href":"#features"},{"label":"Pricing","href":"#pricing"},{"label":"Security","href":"https://example.com/security"},{"label":"Roadmap","href":"https://example.com/roadmap"}]},
-                            {"title":"Company","items":[{"label":"About Us","href":"https://example.com/about"},{"label":"Blog","href":"https://example.com/blog"},{"label":"Careers","href":"https://example.com/careers"},{"label":"Contact","href":"#contact"}]},
-                            {"title":"Resources","items":[{"label":"Documentation","href":"https://example.com/docs"},{"label":"API Reference","href":"https://example.com/api"},{"label":"Community","href":"https://example.com/community"},{"label":"Support","href":"https://example.com/support"}]}
+                            { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Security", href: "https://example.com/security" }, { label: "Roadmap", href: "https://example.com/roadmap" }] },
+                            { title: "Company", items: [{ label: "About Us", href: "https://example.com/about" }, { label: "Blog", href: "https://example.com/blog" }, { label: "Careers", href: "https://example.com/careers" }, { label: "Contact", href: "#contact" }] },
+                            { title: "Resources", items: [{ label: "Documentation", href: "https://example.com/docs" }, { label: "API Reference", href: "https://example.com/api" }, { label: "Community", href: "https://example.com/community" }, { label: "Support", href: "https://example.com/support" }] }
                         ]}
                         logoText="SecureAutomate"
                         copyrightText="© 2025 SecureAutomate. All rights reserved."