diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index f32a5b5..613b2ab 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -9,18 +9,24 @@ const navItems = [
   { name: "About Us", id: "/about" },
   { name: "Gallery", id: "/gallery" },
   { name: "Reviews", id: "/reviews" },
-  { name: "FAQ", id: "/faq" },
+  { name: "Showroom", id: "/showroom" },
+  { name: "Contact", id: "/contact" },
 ];
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay navItems={navItems} brandName="Expert Plumbing" />
-      <TextSplitAbout
-        title="About Our Family"
-        description={["Three generations of trust and quality plumbing. We are your local, family-owned experts."]}
-        ariaLabel="About section"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" 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">
+        <NavbarLayoutFloatingOverlay navItems={navItems} />
+      </div>
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title="About Our Family"
+          description={["Three generations of trust and quality plumbing. We are your local, family-owned experts."]}
+          useInvertedBackground={false}
+          ariaLabel="About section"
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file