diff --git a/src/components/sections/MenuDisplaySection.tsx b/src/components/sections/MenuDisplaySection.tsx
new file mode 100644
index 0000000..bb68ec4
--- /dev/null
+++ b/src/components/sections/MenuDisplaySection.tsx
@@ -0,0 +1,72 @@
+'use client'
+import { useState } from 'react'
+import Image from 'next/image'
+import { ChefHat, ChevronDown, Flame, Wheat } from 'lucide-react'
+
+export default function MenuDisplaySection() {
+  const [open, setOpen] = useState<string | null>('Antipasti')
+  const categories = ['Antipasti', 'Pizzas', 'Pasta', 'Dolci', 'Beverages']
+  const menu: Record<string, { name: string; price: string; ingredients: string; image: string; tags: string[] }[]> = {
+    Antipasti: [
+      { name: 'Bruschetta Classica', price: '$9', ingredients: "Tomato, basil, mozzarella", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['vegetarian'] },
+      { name: 'Calamari Fritti', price: '$12', ingredients: "Squid, lemon, aioli", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
+    ],
+    Pizzas: [
+      { name: 'Margherita', price: '$14', ingredients: "San Marzano tomatoes, mozzarella, basil", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['vegetarian'] },
+      { name: 'Diavola', price: '$16', ingredients: "Spicy salami, chili flakes", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['spicy'] },
+    ],
+    Pasta: [
+      { name: 'Carbonara', price: '$17', ingredients: "Egg, pecorino, guanciale", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
+      { name: 'Penne Arrabbiata', price: '$15', ingredients: "Tomato, garlic, chili", image: "https://images.pexels.com/photos/2728186/pexels-photo-2728186.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ["spicy", "vegetarian"] },
+    ],
+    Dolci: [
+      { name: 'Tiramisù', price: '$9', ingredients: "Mascarpone, espresso, cocoa", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['vegetarian'] },
+      { name: 'Panna Cotta', price: '$8', ingredients: "Cream, vanilla, berry compote", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: ['gluten-free'] },
+    ],
+    Beverages: [
+      { name: 'Espresso', price: '$3', ingredients: "Italian roast", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
+      { name: 'Chianti', price: '$9', ingredients: "Sangiovese", image: "https://images.pexels.com/photos/35687736/pexels-photo-35687736.jpeg?auto=compress&cs=tinysrgb&h=350", tags: [] },
+    ],
+  }
+  const toggle = (cat: string) => setOpen(open === cat ? null : cat)
+  return (
+    <section data-vula-section="menudisplay" id="menu-display" className="py-20 bg-neutral-50">
+      <div className="container mx-auto px-4 max-w-4xl">
+        <h2 className="text-3xl font-bold text-[#212121] mb-8 text-center">Our Menu</h2>
+        {categories.map((cat) => (
+          <div key={cat} className="mb-4">
+            <button onClick={() => toggle(cat)}
+              className="w-full flex items-center justify-between px-6 py-4 bg-white rounded-xl shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] transition-all duration-200 ease-out"
+            >
+              <span className="text-lg font-semibold text-[#212121]">{cat}</span>
+              <ChevronDown className={`w-5 h-5 text-[#E91E63] transition-transform duration-200 ${open === cat ? 'rotate-180' : ''}`} />
+            </button>
+            {open === cat && (
+              <div className="mt-2 space-y-3">
+                {menu[cat].map((item, i) => (
+                  <div key={i} className="flex items-start gap-4 bg-white p-4 rounded-xl border border-neutral-100">
+                    <div className="w-20 h-20 rounded-lg overflow-hidden flex-shrink-0">
+                      <Image src={item.image} alt={item.name} width={80} height={80} className="w-full h-full object-cover" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <h4 className="font-bold text-[#212121]">{item.name}</h4>
+                        <span className="text-[#FF5722] font-bold">{item.price}</span>
+                      </div>
+                      <p className="text-sm text-[#212121]/70 mt-1">{item.ingredients}</p>
+                      <div className="flex gap-2 mt-2">
+                        {item.tags.includes('vegetarian') && <span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700"><Wheat className="inline w-3 h-3 mr-1" />Veg</span>}
+                        {item.tags.includes('gluten-free') && <span className="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700">GF</span>}
+                        {item.tags.includes('spicy') && <span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700"><Flame className="inline w-3 h-3 mr-1" />Spicy</span>}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
\ No newline at end of file