diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 4361737..6a60d5d 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -3,12 +3,11 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Calendar } from "lucide-react";
+import { Phone, MessageCircle, Instagram } from 'lucide-react';
 
-export default function ContactPage() {
+export default function ContactOrderPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -34,40 +33,38 @@ export default function ContactPage() {
           />
         </div>
 
-        <div id="contact-us" data-section="contact-us">
-          <ContactSplit
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Get in touch"
+            title="Contact & Order"
+            description="Reach out to us via your favorite channel or fill out the form below to place your order."
+            background={{ variant: "gradient-bars" }}
             useInvertedBackground={false}
-            background={{ variant: "plain" }}
-            tag="Contact Us"
-            title="Order Your Favorites"
-            description="Get in touch for catering orders or table reservations."
-            imageSrc="http://img.b2bpic.net/free-photo/happy-small-business-owner-standing-doorway-opening-bar-business_637285-3402.jpg"
-            mediaAnimation="blur-reveal"
-            buttonText="Send Inquiry"
-          />
-        </div>
-
-        <div id="feature" data-section="feature">
-          <FeatureCardTen
-            animationType="slide-up"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            title="Visit Us"
-            description="We look forward to serving you."
-            features={[
-              {
-                title: "Opening Hours",                description: "Daily 8am to 8pm",                media: { imageSrc: "http://img.b2bpic.net/free-photo/young-manager-girl-changing-sign-from-closed-open-sign-door-cafe-looking-outside-waiting-clients-after-lockdown_7861-3174.jpg" },
-                items: [{ text: "Monday-Friday", icon: Calendar }],
-                reverse: false
-              }
-            ]}
           />
+          
+          <div className="max-w-4xl mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-3 gap-8">
+            <a href="https://instagram.com/karamelscafe" target="_blank" className="flex flex-col items-center p-6 bg-white rounded-xl border hover:shadow-lg transition">
+              <Instagram className="w-10 h-10 mb-4 text-pink-600" />
+              <h3 className="font-semibold">Instagram</h3>
+              <p className="text-sm text-gray-600">@karamelscafe</p>
+            </a>
+            <a href="https://wa.me/1234567890" target="_blank" className="flex flex-col items-center p-6 bg-white rounded-xl border hover:shadow-lg transition">
+              <MessageCircle className="w-10 h-10 mb-4 text-green-600" />
+              <h3 className="font-semibold">WhatsApp</h3>
+              <p className="text-sm text-gray-600">Chat to order</p>
+            </a>
+            <a href="tel:+1234567890" className="flex flex-col items-center p-6 bg-white rounded-xl border hover:shadow-lg transition">
+              <Phone className="w-10 h-10 mb-4 text-blue-600" />
+              <h3 className="font-semibold">Phone</h3>
+              <p className="text-sm text-gray-600">Call us now</p>
+            </a>
+          </div>
         </div>
 
         <div id="footer" data-section="footer">
           <FooterSimple
             columns={[
-              { title: "Quick Links", items: [{ label: "Menu", href: "/menu" }, { label: "Order", href: "/contact" }] }
+              { title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "Order", href: "/contact" }] }
             ]}
             bottomLeftText="© 2024 Karamel's Cafe"
             bottomRightText="123 Cafe Street, Coffee Town"
@@ -76,4 +73,4 @@ export default function ContactPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 1823420..bc5ca67 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -2,137 +2,73 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 
-export default function LandingPage() {
+export default function MenuPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="icon-arrow"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="rounded"
-        contentWidth="mediumLarge"
-        sizing="largeSmall"
-        background="aurora"
-        cardStyle="solid"
-        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmall"
+      background="aurora"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "Menu",
-          id: "/menu",
-        },
-        {
-          name: "Contact & Order",
-          id: "/contact",
-        },
-      ]}
-      brandName="Karamel's Cafe"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Menu", id: "/menu" },
+              { name: "Contact & Order", id: "/contact" }
+            ]}
+            brandName="Karamel's Cafe"
+          />
+        </div>
 
-  <div id="menu-grid" data-section="menu-grid">
-      <ProductCardThree
-      animationType="opacity"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Croissant",
-          price: "$4.50",
-          imageSrc: "http://img.b2bpic.net/free-photo/watercolor-coffee-cup-coffee-beans-illustration_23-2151720146.jpg",
-        },
-        {
-          id: "p2",
-          name: "Cake Slice",
-          price: "$6.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/fruit-salad-blue-bowl-wooden-table_123827-32690.jpg",
-        },
-        {
-          id: "p3",
-          name: "Sourdough",
-          price: "$8.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/healthy-ingredients-included-salad_23-2148173932.jpg",
-        },
-        {
-          id: "p4",
-          name: "Fruit Bowl",
-          price: "$7.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-tasty-cheesecake-lemon-tea-cup-toast-salad-fried-egg-bacon-gray-plate-white-background_23-2148067173.jpg",
-        },
-        {
-          id: "p5",
-          name: "Sandwich",
-          price: "$9.50",
-          imageSrc: "http://img.b2bpic.net/free-photo/two-cups-aroma-coffee-with-pastries-gray-table_114579-22175.jpg",
-        },
-        {
-          id: "p6",
-          name: "Brownie",
-          price: "$5.00",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-delicious-chocolate-pudding-with-almonds_23-2149349267.jpg",
-        },
-      ]}
-      title="Our Full Menu"
-      description="Explore our delicious range of food and drinks."
-    />
-  </div>
+        <div id="coffee" data-section="coffee">
+          <FeatureCardTwentyEight
+            animationType="slide-up"
+            textboxLayout="default"
+            title="Coffee & Drinks"
+            description="Carefully crafted beverages."
+            features={[
+              { id: "c1", title: "Espresso", subtitle: "Rich and intense", category: "Hot", value: "$3.50" },
+              { id: "c2", title: "Latte", subtitle: "Creamy and smooth", category: "Hot", value: "$4.50" },
+              { id: "c3", title: "Iced Americano", subtitle: "Cool and refreshing", category: "Cold", value: "$4.00" }
+            ]}
+          />
+        </div>
 
-  <div id="metric" data-section="metric">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Menu Highlights"
-      description="What our customers love most."
-      metrics={[
-        {
-          id: "m1",
-          value: "20+",
-          title: "Daily Items",
-          items: [
-            "Fresh Pastries",
-            "Gourmet Coffee",
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="food" data-section="food">
+          <FeatureCardTwentyEight
+            animationType="slide-up"
+            textboxLayout="default"
+            title="Signature Meals"
+            description="Fresh ingredients, handmade daily."
+            features={[
+              { id: "f1", title: "Avocado Toast", subtitle: "Sourdough, radish, herbs", category: "Breakfast", value: "$12.00" },
+              { id: "f2", title: "Croissant Sandwich", subtitle: "Eggs, cheddar, greens", category: "Lunch", value: "$10.00" },
+              { id: "f3", title: "Berry Parfait", subtitle: "Yogurt, granola, honey", category: "Breakfast", value: "$8.00" }
+            ]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        {
-          title: "Quick Links",
-          items: [
-            {
-              label: "Menu",
-              href: "/menu",
-            },
-            {
-              label: "Order",
-              href: "/contact",
-            },
-          ],
-        },
-      ]}
-      bottomLeftText="© 2024 Karamel's Cafe"
-      bottomRightText="123 Cafe Street, Coffee Town"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "Order", href: "/contact" }] }
+            ]}
+            bottomLeftText="© 2024 Karamel's Cafe"
+            bottomRightText="123 Cafe Street, Coffee Town"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1270635..c23786b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -114,7 +114,7 @@ export default function LandingPage() {
         <div id="footer" data-section="footer">
           <FooterSimple
             columns={[
-              { title: "Quick Links", items: [{ label: "Menu", href: "/menu" }, { label: "Order", href: "/contact" }] }
+              { title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "Order", href: "/contact" }] }
             ]}
             bottomLeftText="© 2024 Karamel's Cafe"
             bottomRightText="123 Cafe Street, Coffee Town"
@@ -123,4 +123,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file