diff --git a/src/app/page.tsx b/src/app/page.tsx
index fec3e33..c571274 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,11 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function Page() {
-  const navItems = [{ name: 'Home', id: '/' }];
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Contact', id: '/contact' }
+  ];
 
   return (
     <ThemeProvider 
@@ -35,7 +39,7 @@ export default function Page() {
         <SplitAbout title="About" description="Desc" textboxLayout="default" useInvertedBackground={false} bulletPoints={[{ title: 'Point', description: 'Desc' }]} mediaAnimation="none" />
       </div>
       <div id="menu" data-section="menu">
-        <ProductCardFour title="Products" description="Desc" gridVariant="bento-grid" animationType="none" textboxLayout="default" useInvertedBackground={false} />
+        <ProductCardFour title="Products" description="Desc" gridVariant="bento-grid" animationType="none" textboxLayout="default" useInvertedBackground={false} products={[{ id: '1', name: 'Product 1', price: '$10', variant: 'Default', imageSrc: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb' }, { id: '2', name: 'Product 2', price: '$20', variant: 'Default', imageSrc: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb' }, { id: '3', name: 'Product 3', price: '$30', variant: 'Default', imageSrc: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb' }]} />
       </div>
       <div id="faq" data-section="faq">
         <FaqSplitText faqs={[{ id: '1', title: 'Q', content: 'A' }]} sideTitle="FAQ" faqsAnimation="none" useInvertedBackground={false} />