diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..3ca8ce9
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+
+export default function AboutPage() {
+  const navItems = [
+    { name: "Home", id: "home", href: "/" },
+    { name: "About", href: "/about" },
+    { name: "Menu", id: "menu", href: "/menu" },
+    { name: "Products", href: "/products" },
+    { name: "Book Table", id: "book-table", href: "/book-table" },
+    { name: "Gallery", id: "gallery", href: "/gallery" },
+    { name: "Contact", id: "contact", href: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="grid"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="La Bella Italia"
+          button={{ text: "Book Now", href: "/book-table" }}
+          animateOnLoad={true}
+        />
+      </div>
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
+          title="Our Story"
+          description="Dedicated to bringing authentic Italian flavors to your table since 1999. Our passion for tradition and fresh ingredients defines every dish."
+          metrics={[
+            { value: "25+", title: "Years in Business" },
+            { value: "1000+", title: "Happy Customers" },
+            { value: "50+", title: "Authentic Recipes" }
+          ]}
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          metricsAnimation="slide-up"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/book-table/page.tsx b/src/app/book-table/page.tsx
new file mode 100644
index 0000000..a870edd
--- /dev/null
+++ b/src/app/book-table/page.tsx
@@ -0,0 +1,41 @@
+"use client";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function BookTablePage() {
+  const navItems = [
+    { name: "Home", id: "home", href: "/" },
+    { name: "Menu", id: "menu", href: "/menu" },
+    { name: "Book Table", id: "book-table", href: "/book-table" },
+    { name: "Gallery", id: "gallery", href: "/gallery" },
+    { name: "Contact", id: "contact", href: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="grid"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="La Bella Italia"
+          button={{ text: "Book Now", href: "/book-table" }}
+          animateOnLoad={true}
+        />
+      </div>
+      <main className="flex min-h-screen flex-col items-center justify-center p-8 md:p-24">
+        <h1 className="text-4xl font-semibold mb-4">Book Your Table</h1>
+        <p className="text-lg text-center max-w-2xl">Reserve a spot for an unforgettable dining experience at La Bella Italia.</p>
+      </main>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..24fcf3e
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,41 @@
+"use client";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function ContactPage() {
+  const navItems = [
+    { name: "Home", id: "home", href: "/" },
+    { name: "Menu", id: "menu", href: "/menu" },
+    { name: "Book Table", id: "book-table", href: "/book-table" },
+    { name: "Gallery", id: "gallery", href: "/gallery" },
+    { name: "Contact", id: "contact", href: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="grid"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="La Bella Italia"
+          button={{ text: "Book Now", href: "/book-table" }}
+          animateOnLoad={true}
+        />
+      </div>
+      <main className="flex min-h-screen flex-col items-center justify-center p-8 md:p-24">
+        <h1 className="text-4xl font-semibold mb-4">Contact Us</h1>
+        <p className="text-lg text-center max-w-2xl">We'd love to hear from you! Reach out for reservations, inquiries, or feedback.</p>
+      </main>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
new file mode 100644
index 0000000..bbd630b
--- /dev/null
+++ b/src/app/gallery/page.tsx
@@ -0,0 +1,41 @@
+"use client";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function GalleryPage() {
+  const navItems = [
+    { name: "Home", id: "home", href: "/" },
+    { name: "Menu", id: "menu", href: "/menu" },
+    { name: "Book Table", id: "book-table", href: "/book-table" },
+    { name: "Gallery", id: "gallery", href: "/gallery" },
+    { name: "Contact", id: "contact", href: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="grid"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="La Bella Italia"
+          button={{ text: "Book Now", href: "/book-table" }}
+          animateOnLoad={true}
+        />
+      </div>
+      <main className="flex min-h-screen flex-col items-center justify-center p-8 md:p-24">
+        <h1 className="text-4xl font-semibold mb-4">Our Gallery</h1>
+        <p className="text-lg text-center max-w-2xl">Take a visual tour of our restaurant and some of our exquisite dishes.</p>
+      </main>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 13094a8..9a30569 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -32,6 +32,10 @@ export default function MenuPage() {
           animateOnLoad={true}
         />
       </div>
+      <main className="flex min-h-screen flex-col items-center justify-center p-8 md:p-24">
+        <h1 className="text-4xl font-semibold mb-4">Our Delicious Menu</h1>
+        <p className="text-lg text-center max-w-2xl">Explore a wide array of authentic Italian dishes, crafted with the freshest ingredients.</p>
+      </main>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2e068c3..9c93ebb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,16 +13,16 @@ export default function HomePage() {
 
   return (
     <ThemeProvider
-      defaultButtonVariant="expand-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="pill"
-      contentWidth="smallMedium"
-      sizing="mediumLargeSizeMediumTitles"
-      background="grid"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="radial-glow"
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="aurora"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
       secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
new file mode 100644
index 0000000..29476b0
--- /dev/null
+++ b/src/app/products/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+
+export default function ProductsPage() {
+  const navItems = [
+    { name: "Home", id: "home", href: "/" },
+    { name: "About", href: "/about" },
+    { name: "Menu", id: "menu", href: "/menu" },
+    { name: "Products", href: "/products" },
+    { name: "Book Table", id: "book-table", href: "/book-table" },
+    { name: "Gallery", id: "gallery", href: "/gallery" },
+    { name: "Contact", id: "contact", href: "/contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="grid"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="La Bella Italia"
+          button={{ text: "Book Now", href: "/book-table" }}
+          animateOnLoad={true}
+        />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Our Signature Dishes"
+          description="Explore a selection of our most loved Italian delicacies, prepared with authentic recipes and the finest ingredients."
+          products={[
+            { id: "1", name: "Classic Pizza Margherita", price: "$18.00", variant: "Pizza", imageSrc: "https://images.unsplash.com/photo-1628840042765-364c3e800d1d?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" },
+            { id: "2", name: "Spaghetti Carbonara", price: "$22.00", variant: "Pasta", imageSrc: "https://images.unsplash.com/photo-1611270629511-b75d4013054e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" },
+            { id: "3", name: "Tiramisu", price: "$10.00", variant: "Dessert", imageSrc: "https://images.unsplash.com/photo-1571408713023-e18e8f2371b6?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index d171274..018e8e2 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcfaf5;
-  --card: #f5f0e6;
-  --foreground: #3d0f0d;
-  --primary-cta: #b70a04;
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #2e7d32;
-  --secondary-cta-text: #3d0f0d;
-  --accent: #8dc268;
-  --background-accent: #f7f1e6;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #535353;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);