diff --git a/src/app/cpus/page.tsx b/src/app/cpus/page.tsx
index 2e755b9..ff31038 100644
--- a/src/app/cpus/page.tsx
+++ b/src/app/cpus/page.tsx
@@ -5,11 +5,13 @@ import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog
 
 export default function CategoryPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
-        brandName="Vertex Systems"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
       <main className="pt-32 pb-20">
         <ProductCatalog 
             layout="page" 
diff --git a/src/app/gpus/page.tsx b/src/app/gpus/page.tsx
index d345c65..c2b8520 100644
--- a/src/app/gpus/page.tsx
+++ b/src/app/gpus/page.tsx
@@ -5,11 +5,13 @@ import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog
 
 export default function CategoryPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
-        brandName="Vertex Systems"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
       <main className="pt-32 pb-20">
         <ProductCatalog 
             layout="page" 
diff --git a/src/app/peripherals/page.tsx b/src/app/peripherals/page.tsx
index cc46891..1dff0d9 100644
--- a/src/app/peripherals/page.tsx
+++ b/src/app/peripherals/page.tsx
@@ -5,11 +5,13 @@ import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog
 
 export default function CategoryPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
-        brandName="Vertex Systems"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
       <main className="pt-32 pb-20">
         <ProductCatalog 
             layout="page" 
diff --git a/src/app/ram/page.tsx b/src/app/ram/page.tsx
index c125280..30111bb 100644
--- a/src/app/ram/page.tsx
+++ b/src/app/ram/page.tsx
@@ -5,11 +5,13 @@ import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog
 
 export default function CategoryPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
-        brandName="Vertex Systems"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
       <main className="pt-32 pb-20">
         <ProductCatalog 
             layout="page" 
diff --git a/src/app/storage/page.tsx b/src/app/storage/page.tsx
index f081149..0cb260b 100644
--- a/src/app/storage/page.tsx
+++ b/src/app/storage/page.tsx
@@ -5,11 +5,13 @@ import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog
 
 export default function CategoryPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
-        brandName="Vertex Systems"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
       <main className="pt-32 pb-20">
         <ProductCatalog 
             layout="page"