diff --git a/src/App.tsx b/src/App.tsx
index 98579b0..6fb188b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,12 +4,16 @@ import HomePage from './pages/HomePage';
 import Contact from './pages/Contact';
 import Policy from './pages/Policy';
 import Terms from './pages/Terms';
+import About from './pages/About';
+import Menu from './pages/Menu';
 
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/menu" element={<Menu />} />
         <Route path="/contact" element={<Contact />} />
         <Route path="/policy" element={<Policy />} />
         <Route path="/terms" element={<Terms />} />
diff --git a/src/components/sections/MenuSection.tsx b/src/components/sections/MenuSection.tsx
index 6b2ab9e..3872031 100644
--- a/src/components/sections/MenuSection.tsx
+++ b/src/components/sections/MenuSection.tsx
@@ -1,37 +1,43 @@
 "use client";
 
-import Card from "@/components/ui/Card"
-import TextAnimation from "@/components/ui/TextAnimation"
+import Card from "@/components/ui/Card";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
 
 export default function MenuSection() {
   const items = [
-    { title: "Espresso", description: "Rich, bold, and smooth.", price: "$3.50" },
-    { title: "Cappuccino", description: "Perfectly steamed milk.", price: "$4.50" },
-    { title: "Latte", description: "Creamy and comforting.", price: "$4.75" },
-    { title: "Mocha", description: "Decadent chocolate blend.", price: "$5.00" },
-    { title: "Americano", description: "Espresso with hot water.", price: "$3.75" },
-    { title: "Flat White", description: "Velvety microfoam finish.", price: "$4.25" },
-  ]
+    { title: "Espresso", description: "Rich, bold, and smooth.", price: "$3.50", imageSrc: "/espresso.jpg" },
+    { title: "Cappuccino", description: "Perfectly steamed milk.", price: "$4.50", imageSrc: "/cappuccino.jpg" },
+    { title: "Latte", description: "Creamy and comforting.", price: "$4.75", imageSrc: "/latte.jpg" },
+    { title: "Mocha", description: "Decadent chocolate blend.", price: "$5.00", imageSrc: "/mocha.jpg" },
+    { title: "Americano", description: "Espresso with hot water.", price: "$3.75", imageSrc: "/americano.jpg" },
+    { title: "Flat White", description: "Velvety microfoam finish.", price: "$4.25", imageSrc: "/flat-white.jpg" },
+  ];
 
   return (
     <section id="menu" className="py-24 bg-background">
       <div className="max-w-6xl mx-auto px-6">
-        <TextAnimation 
-          tag="h2" 
-          text="Our Menu" 
-          variant="fade-blur" 
-          className="text-4xl font-bold text-foreground mb-12 text-center luxury-serif" 
+        <TextAnimation
+          tag="h2"
+          text="Our Menu"
+          variant="fade-blur"
+          className="text-5xl font-bold text-foreground mb-16 text-center luxury-serif"
         />
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
           {items.map((item, i) => (
-            <Card key={i} className="p-6 flex flex-col gap-4">
-              <h3 className="text-xl font-bold text-foreground">{item.title}</h3>
-              <p className="text-muted-foreground">{item.description}</p>
-              <span className="text-lg font-bold text-primary-cta">{item.price}</span>
+            <Card key={i} className="p-8 flex flex-col gap-6 hover:-translate-y-2 transition-transform duration-300">
+              <div className="h-64 overflow-hidden rounded-lg">
+                <ImageOrVideo imageSrc={item.imageSrc} className="w-full h-full object-cover" />
+              </div>
+              <div className="flex flex-col gap-2">
+                <h3 className="text-2xl font-bold text-foreground luxury-serif">{item.title}</h3>
+                <p className="text-muted-foreground text-lg">{item.description}</p>
+                <span className="text-xl font-bold text-primary-cta mt-2">{item.price}</span>
+              </div>
             </Card>
           ))}
         </div>
       </div>
     </section>
-  )
+  );
 }
\ No newline at end of file
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index e93c0d7..386bfb0 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,43 +1,22 @@
-import HeroSplit from "@/components/sections/hero/HeroSplit";
+"use client";
+
 import AboutFeaturesSplit from "@/components/sections/about/AboutFeaturesSplit";
-import ChecklistTimeline from "@/components/ui/ChecklistTimeline";
+import { Coffee, Users, Award } from "lucide-react";
 
 export default function About() {
   return (
-    <div className="bg-background text-foreground">
-      <HeroSplit
-        tag="About Us"
-        title="Crafting Coffee with Passion"
-        description="We are a team of coffee lovers dedicated to the perfect brew. From the farm to your cup, we ensure quality in every step."
-        primaryButton={{ text: "Our Menu", href: "/menu" }}
-        secondaryButton={{ text: "Contact Us", href: "/contact" }}
+    <main className="bg-background min-h-screen py-24">
+      <AboutFeaturesSplit
+        tag="Our Story"
+        title="Crafting Excellence in Every Cup"
+        description="At Bean & Bloom, we believe that great coffee is more than just a drink—it's an experience. From ethically sourced beans to our artisanal roasting process, every step is taken with care."
+        items={[
+          { icon: Coffee, title: "Ethical Sourcing", description: "We work directly with farmers to ensure fair wages and sustainable practices." },
+          { icon: Users, title: "Community Focused", description: "Our cafes are designed to be a welcoming space for everyone to connect." },
+          { icon: Award, title: "Artisanal Quality", description: "Small-batch roasting ensures the freshest, most flavorful coffee possible." }
+        ]}
         imageSrc="https://images.unsplash.com/photo-1509042239860-f550ce710b93?q=80&w=1000&auto=format&fit=crop"
       />
-      <AboutFeaturesSplit
-        tag="Our Journey"
-        title="From Bean to Cup"
-        description="We source the finest beans and roast them with care, ensuring every cup tells a story of quality and community."
-        items={[
-          { icon: "coffee", title: "Quality Beans", description: "Sourced from the best farms." },
-          { icon: "users", title: "Community", description: "Building connections." },
-          { icon: "award", title: "Excellence", description: "Award-winning roasts." }
-        ]}
-        imageSrc="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=1000&auto=format&fit=crop"
-      />
-      <section className="py-24 bg-background">
-        <div className="max-w-6xl mx-auto px-6">
-          <ChecklistTimeline
-            heading="Our Milestones"
-            subheading="A journey of passion and coffee."
-            items={[
-              { label: "2018", detail: "Founded in a small garage." },
-              { label: "2020", detail: "Expanded to our first cafe." },
-              { label: "2024", detail: "Launched our online store." }
-            ]}
-            completedLabel="Achieved"
-          />
-        </div>
-      </section>
-    </div>
+    </main>
   );
 }
\ No newline at end of file