diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 383f00d..f0f133b 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,14 +1,18 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import TextAbout from '@/components/sections/about/TextAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleCentered navItems={[{ name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Reviews", id: "/reviews" }, { name: "Contact", id: "/contact" }]} brandName="King Kebabish" />
-      <TextAbout title="About Us" />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Reviews", id: "/reviews" }, { name: "Contact", id: "/contact" }]} />
+      </div>
+      <div id="about" data-section="about">
+        <MediaAbout title="About Us" description="Our story is one of tradition and flavour." useInvertedBackground={false} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 4e251d6..92e7210 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,14 +1,18 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleCentered navItems={[{ name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Reviews", id: "/reviews" }, { name: "Contact", id: "/contact" }]} brandName="King Kebabish" />
-      <ContactCTA tag="Contact Us" title="Get In Touch" description="We'd love to hear from you." buttons={[{ text: "Submit" }]} />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Reviews", id: "/reviews" }, { name: "Contact", id: "/contact" }]} />
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactCenter tag="Contact Us" title="Get In Touch" description="We'd love to hear from you." background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 7f47c17..c4c15c6 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -1,26 +1,30 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 
 export default function MenuPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleCentered navItems={[{ name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Reviews", id: "/reviews" }, { name: "Contact", id: "/contact" }]} brandName="King Kebabish" />
-      <ProductCardThree
-        animationType="slide-up"
-        textboxLayout="default"
-        gridVariant="three-columns-all-equal-width"
-        useInvertedBackground={true}
-        products={[
-          { id: "1", name: "Chicken Kebab Roll", price: "£6.50", imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-eating-tasty-burger-dressed-colorful-jacket-cap_8353-7004.jpg?_wi=1" },
-          { id: "2", name: "Special Biryani", price: "£9.99", imageSrc: "http://img.b2bpic.net/free-photo/delicious-chicken-biryani-traditional-bowl_84443-65252.jpg?_wi=1" },
-          { id: "3", name: "Grilled Lamb Chops", price: "£12.50", imageSrc: "http://img.b2bpic.net/free-photo/closeu-shot-seasoned-stake-board-served-with-fries_181624-59818.jpg" }
-        ]}
-        title="Our Menu"
-        description="Authentic recipes, fresh ingredients, and bold flavours."
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Reviews", id: "/reviews" }, { name: "Contact", id: "/contact" }]} />
+      </div>
+      <div id="menu" data-section="menu">
+        <ProductCardFour
+          animationType="slide-up"
+          textboxLayout="default"
+          gridVariant="three-columns-all-equal-width"
+          useInvertedBackground={false}
+          title="Our Menu"
+          description="Authentic recipes, fresh ingredients, and bold flavours."
+          products={[
+            { id: "1", name: "Chicken Kebab Roll", price: "£6.50", variant: "Regular", imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-eating-tasty-burger-dressed-colorful-jacket-cap_8353-7004.jpg?_wi=1" },
+            { id: "2", name: "Special Biryani", price: "£9.99", variant: "Large", imageSrc: "http://img.b2bpic.net/free-photo/delicious-chicken-biryani-traditional-bowl_84443-65252.jpg?_wi=1" },
+            { id: "3", name: "Grilled Lamb Chops", price: "£12.50", variant: "Medium", imageSrc: "http://img.b2bpic.net/free-photo/closeu-shot-seasoned-stake-board-served-with-fries_181624-59818.jpg" }
+          ]}
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/reviews/page.tsx b/src/app/reviews/page.tsx
index e058900..79e4355 100644
--- a/src/app/reviews/page.tsx
+++ b/src/app/reviews/page.tsx
@@ -1,14 +1,26 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 
 export default function ReviewsPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleCentered navItems={[{ name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Reviews", id: "/reviews" }, { name: "Contact", id: "/contact" }]} brandName="King Kebabish" />
-      <TestimonialCardTwo title="Customer Reviews" animationType="slide-up" textboxLayout="default" testimonials={[]} />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }, { name: "Reviews", id: "/reviews" }, { name: "Contact", id: "/contact" }]} />
+      </div>
+      <div id="reviews" data-section="reviews">
+        <TestimonialCardFifteen 
+            testimonial="The best kebabs in town! Absolutely delicious and authentic taste."
+            rating={5}
+            author="John Doe"
+            avatars={[{ src: "https://i.pravatar.cc/100?u=1", alt: "John Doe" }]}
+            ratingAnimation="slide-up"
+            avatarsAnimation="slide-up"
+            useInvertedBackground={false}
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file