diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 47725eb..be2ae2c 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,12 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactForm from '@/components/form/ContactForm';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
-export default function LandingPage() {
+export default function ContactPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -22,93 +22,34 @@ export default function LandingPage() {
         headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Menu",
-          id: "/menu",
-        },
-        {
-          name: "Gallery",
-          id: "/gallery",
-        },
-        {
-          name: "Reservations",
-          id: "/reservations",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      button={{
-        text: "Book Now",
-        href: "/reservations",
-      }}
-      brandName="Lumière Dining"
-    />
-  </div>
-
-  <div id="contact-info" data-section="contact-info">
-      <SplitAbout
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Visit Us"
-      description="Find us in the heart of the district, open Tuesday through Sunday."
-      bulletPoints={[
-        {
-          title: "Location",
-          description: "123 Culinary Avenue, Foodie District, City Center",
-        },
-        {
-          title: "Hours",
-          description: "Tue-Sun: 5:00 PM - 11:00 PM",
-        },
-        {
-          title: "Contact",
-          description: "+1 (555) 123-4567",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/restaurant-dinner-table-with-plates-cutlery-yellow-blue-glasses_140725-8444.jpg?_wi=2"
-      imageAlt="Restaurant ambiance"
-      mediaAnimation="slide-up"
-    />
-  </div>
-
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Facebook",
-        "Instagram",
-        "TripAdvisor",
-        "Google Reviews",
-        "Yelp Top Rated",
-      ]}
-      title="Join the Community"
-      description="Connect with us on your preferred social platforms."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Lumière Dining"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Use",
-        href: "#",
-      }}
-    />
-  </div>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Reservations", id: "/reservations" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          button={{ text: "Book Now", href: "/reservations" }}
+          brandName="Lumière Dining"
+        />
+        <ContactCTA 
+            tag="Contact"
+            title="Get in Touch"
+            description="We are here to assist with any inquiries you might have."
+            buttons={[{ text: "Call Us", href: "tel:+1234567890" }]}
+        />
+        <div className="py-20">
+            <ContactForm 
+                title="Send Message"
+                description="Fill out the form below and we will get back to you shortly."
+                tag="Support"
+                buttonText="Send"
+            />
+        </div>
+        <FooterLogoReveal
+          logoText="Lumière Dining"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Use", href: "#" }}
+        />
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index 06b0523..b1ced77 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -2,12 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
 
-export default function LandingPage() {
+export default function GalleryPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -22,117 +21,44 @@ export default function LandingPage() {
         headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Menu",
-          id: "/menu",
-        },
-        {
-          name: "Gallery",
-          id: "/gallery",
-        },
-        {
-          name: "Reservations",
-          id: "/reservations",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      button={{
-        text: "Book Now",
-        href: "/reservations",
-      }}
-      brandName="Lumière Dining"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "Gallery", id: "/gallery" },
+              { name: "Reservations", id: "/reservations" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            button={{ text: "Book Now", href: "/reservations" }}
+            brandName="Lumière Dining"
+          />
+        </div>
 
-  <div id="gallery-list" data-section="gallery-list">
-      <ProductCardOne
-      animationType="scale-rotate"
-      textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "g1",
-          name: "Main Dining Room",
-          price: "",
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-friends-night-having-dinner_23-2149190934.jpg?_wi=1",
-        },
-        {
-          id: "g2",
-          name: "The Open Kitchen",
-          price: "",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-green-garlic-black-plate_23-2148425577.jpg?_wi=1",
-        },
-        {
-          id: "g3",
-          name: "Wine Selection",
-          price: "",
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-friends-night-having-dinner_23-2149190962.jpg?_wi=1",
-        },
-        {
-          id: "g4",
-          name: "The Bar Lounge",
-          price: "",
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-friends-night-having-dinner_23-2149190934.jpg?_wi=2",
-        },
-        {
-          id: "g5",
-          name: "Table Detail",
-          price: "",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-green-garlic-black-plate_23-2148425577.jpg?_wi=2",
-        },
-        {
-          id: "g6",
-          name: "Chef's Plate",
-          price: "",
-          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-friends-night-having-dinner_23-2149190962.jpg?_wi=2",
-        },
-      ]}
-      title="Visual Story"
-      description="A glimpse into the ambiance and the art of our plates."
-    />
-  </div>
+        <div id="gallery-content" className="pt-32 pb-20">
+          <div className="container mx-auto px-6 text-center mb-16">
+            <h1 className="text-5xl font-bold mb-6">Culinary Immersive Gallery</h1>
+            <p className="text-xl max-w-2xl mx-auto">Explore our collection of signature seafood dishes, fresh ingredients, and elegant dining atmosphere.</p>
+          </div>
+          <ProductCatalog 
+            layout="page" 
+            products={[
+              { id: "1", category: "Seafood", name: "Pan-Seared Scallops", price: "$34", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fresh-shrimp-soaked-fish-sauce-thai-food_1150-22764.jpg" },
+              { id: "2", category: "Seafood", name: "Grilled Salmon", price: "$38", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fresh-shrimp-soaked-fish-sauce-thai-food_1150-22764.jpg?_wi=1" },
+              { id: "3", category: "Atmosphere", name: "Lumière Interior", price: "", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/restaurant-dinner-table-with-plates-cutlery-yellow-blue-glasses_140725-8444.jpg" },
+              { id: "4", category: "Fine Dining", name: "Signature Appetizer", price: "$22", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/decorative-cake-slices-tray-orchid-flower-bouquet_23-2148028530.jpg" }
+            ]} 
+          />
+        </div>
 
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Design Monthly",
-        "Architecture Digest",
-        "Art & Living",
-        "Interior Styles",
-        "Vogue Dining",
-      ]}
-      title="Accolades & Features"
-      description="Our space has been recognized for its unique atmosphere."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Lumière Dining"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Use",
-        href: "#",
-      }}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="Lumière Dining"
+            leftLink={{ text: "Privacy Policy", href: "#" }}
+            rightLink={{ text: "Terms of Use", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 7418733..54a05cf 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -2,137 +2,53 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
-export default function LandingPage() {
+export default function MenuPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="elastic-effect"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="pill"
-        contentWidth="small"
-        sizing="largeSizeMediumTitles"
-        background="floatingGradient"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Menu",
-          id: "/menu",
-        },
-        {
-          name: "Gallery",
-          id: "/gallery",
-        },
-        {
-          name: "Reservations",
-          id: "/reservations",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      button={{
-        text: "Book Now",
-        href: "/reservations",
-      }}
-      brandName="Lumière Dining"
-    />
-  </div>
-
-  <div id="menu-body" data-section="menu-body">
-      <ProductCardOne
-      animationType="opacity"
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "m1",
-          name: "Heritage Chicken",
-          price: "$32",
-          imageSrc: "http://img.b2bpic.net/free-photo/fresh-shrimp-soaked-fish-sauce-thai-food_1150-22764.jpg?_wi=3",
-        },
-        {
-          id: "m2",
-          name: "Wild Mushroom Risotto",
-          price: "$28",
-          imageSrc: "http://img.b2bpic.net/free-photo/cook-cutting-roasted-meat-board_23-2148040153.jpg?_wi=3",
-        },
-        {
-          id: "m3",
-          name: "Catch of the Day",
-          price: "$42",
-          imageSrc: "http://img.b2bpic.net/free-photo/decorative-cake-slices-tray-orchid-flower-bouquet_23-2148028530.jpg?_wi=2",
-        },
-        {
-          id: "m4",
-          name: "Roasted Root Vegetables",
-          price: "$16",
-          imageSrc: "http://img.b2bpic.net/free-photo/fresh-shrimp-soaked-fish-sauce-thai-food_1150-22764.jpg?_wi=4",
-        },
-        {
-          id: "m5",
-          name: "Artisan Cheese Plate",
-          price: "$24",
-          imageSrc: "http://img.b2bpic.net/free-photo/cook-cutting-roasted-meat-board_23-2148040153.jpg?_wi=4",
-        },
-        {
-          id: "m6",
-          name: "Valrhona Chocolate Mousse",
-          price: "$14",
-          imageSrc: "http://img.b2bpic.net/free-photo/decorative-cake-slices-tray-orchid-flower-bouquet_23-2148028530.jpg?_wi=3",
-        },
-      ]}
-      title="Full Seasonal Menu"
-      description="Explore our complete selection of artisanal dishes."
-    />
-  </div>
-
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Local Artisan",
-        "Organic Farms",
-        "Sustainability Union",
-        "City Harvest",
-        "Culinary Arts",
-      ]}
-      title="Our Sourcing Partners"
-      description="We partner with local farmers to ensure peak seasonal freshness."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Lumière Dining"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Use",
-        href: "#",
-      }}
-    />
-  </div>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Menu", id: "/menu" },
+            { name: "Gallery", id: "/gallery" },
+            { name: "Reservations", id: "/reservations" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          button={{ text: "Book Now", href: "/reservations" }}
+          brandName="Lumière Dining"
+        />
+        <div className="pt-32 pb-20">
+            <ProductCatalog 
+                layout="page"
+                products={[
+                    { id: "m1", category: "Appetizers", name: "Seared Scallops with Saffron", price: "$24", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fresh-shrimp-soaked-fish-sauce-thai-food_1150-22764.jpg?_wi=1" },
+                    { id: "m2", category: "Appetizers", name: "Oyster Selection", price: "$28", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/seafood-platter_1150-22764.jpg" },
+                    { id: "m3", category: "Mains", name: "Pan-Seared Salmon", price: "$38", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/fresh-shrimp-soaked-fish-sauce-thai-food_1150-22764.jpg?_wi=2" },
+                    { id: "m4", category: "Mains", name: "Lobster Thermidor", price: "$65", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/lobster-plate_23-2149021844.jpg" },
+                ]}
+            />
+        </div>
+        <FooterLogoReveal
+          logoText="Lumière Dining"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Use", href: "#" }}
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ec20939..7620967 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,8 +29,6 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         { name: "Home", id: "/" },
-        { name: "Menu", id: "/menu" },
-        { name: "Gallery", id: "/gallery" },
         { name: "Reservations", id: "/reservations" },
         { name: "Contact", id: "/contact" },
       ]}
@@ -96,10 +94,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="ecommerce" data-section="ecommerce">
-      <ProductCatalog layout="page" />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Lumière Dining"
diff --git a/src/app/reservations/page.tsx b/src/app/reservations/page.tsx
index 3316e24..25f2987 100644
--- a/src/app/reservations/page.tsx
+++ b/src/app/reservations/page.tsx
@@ -2,12 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import ContactForm from '@/components/form/ContactForm';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
-export default function LandingPage() {
+export default function ReservationsPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -22,80 +21,28 @@ export default function LandingPage() {
         headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Menu",
-          id: "/menu",
-        },
-        {
-          name: "Gallery",
-          id: "/gallery",
-        },
-        {
-          name: "Reservations",
-          id: "/reservations",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-      ]}
-      button={{
-        text: "Book Now",
-        href: "/reservations",
-      }}
-      brandName="Lumière Dining"
-    />
-  </div>
-
-  <div id="reservation-form" data-section="reservation-form">
-      <ContactCenter
-      useInvertedBackground={true}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="Booking"
-      title="Reserve Your Experience"
-      description="Secure your table for an evening of elegance."
-      buttonText="Confirm Booking"
-    />
-  </div>
-
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "OpenTable Platinum",
-        "Resy Elite",
-        "Travel & Leisure",
-        "Michelin Pick",
-        "Local Favorite",
-      ]}
-      title="Trusted by Diners"
-      description="Recognized for seamless booking and elite guest experiences."
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoReveal
-      logoText="Lumière Dining"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Use",
-        href: "#",
-      }}
-    />
-  </div>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Reservations", id: "/reservations" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          button={{ text: "Book Now", href: "/reservations" }}
+          brandName="Lumière Dining"
+        />
+        <div className="pt-32 pb-20">
+            <ContactForm 
+                title="Book Your Table" 
+                description="Secure your spot for an exquisite dining experience at Lumière."
+                tag="Reservations"
+                buttonText="Reserve Table"
+            />
+        </div>
+        <FooterLogoReveal
+          logoText="Lumière Dining"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Use", href: "#" }}
+        />
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index b7afc67..d6e830c 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
+  --background: #020617;
+  --card: #0f172a;
+  --foreground: #e2e8f0;
+  --primary-cta: #c4d8f9;
   --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #041633;
   --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  --accent: #b8860b;
+  --background-accent: #1d4ed8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);