diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 2b46744..7f22488 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -2,10 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Twitter, Instagram, Linkedin } from "lucide-react";
+import FooterBase from "@/components/sections/footer/FooterBase";
 
 export default function AboutPage() {
     const navItems = [
@@ -19,34 +18,41 @@ export default function AboutPage() {
     return (
         <ThemeProvider
             defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
             borderRadius="pill"
             contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline
-                    navItems={navItems}
-                    brandName="Studio"
-                    button={{ text: "Get in Touch", href: "/contact" }}
-                />
-                <InlineImageSplitTextAbout
-                    heading={[
-                        { type: "text", content: "About Our " },
-                        { type: "image", src: "/templates/web-agency/hero/hero1.webp", alt: "Agency" },
-                        { type: "text", content: " Agency" }
-                    ]}
-                    useInvertedBackground={false}
-                    className="py-24"
-                />
-                <FooterCard
-                    logoText="Studio"
-                    copyrightText="© 2025 Studio. All rights reserved."
-                    socialLinks={[
-                        { icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter" },
-                        { icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram" },
-                        { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn" },
-                    ]}
-                />
+                <div id="nav" data-section="nav">
+                    <NavbarStyleApple
+                        navItems={navItems}
+                        button={{ text: "Get in Touch", href: "/contact" }}
+                        brandName="Studio"
+                    />
+                </div>
+                <div id="about-section" data-section="about-section">
+                    <InlineImageSplitTextAbout
+                        title="About Our Agency"
+                        description="We are a creative agency dedicated to crafting exceptional digital experiences that drive growth and engagement."
+                        useInvertedBackground={false}
+                    />
+                </div>
+                <div id="footer" data-section="footer">
+                    <FooterBase
+                        columns={[
+                            { title: "Studio", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] },
+                            { title: "Contact", items: [{ label: "Email Us", href: "mailto:hello@studio.com" }] }
+                        ]}
+                        logoText="Studio"
+                    />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 042f98d..914439e 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,10 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import ContactFaq from "@/components/sections/contact/ContactFaq";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Twitter, Instagram, Linkedin, MessageCircle } from "lucide-react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FaqBase from "@/components/sections/faq/FaqBase";
+import FooterBase from "@/components/sections/footer/FooterBase";
 
 export default function ContactPage() {
     const navItems = [
@@ -19,37 +18,47 @@ export default function ContactPage() {
     return (
         <ThemeProvider
             defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
             borderRadius="pill"
             contentWidth="medium"
+            sizing="medium"
+            background="circleGradient"
+            cardStyle="glass-elevated"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="normal"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline
-                    navItems={navItems}
-                    brandName="Studio"
-                    button={{ text: "Get in Touch", href: "/contact" }}
-                />
-                <ContactFaq
-                    faqs={[
-                        { id: "1", title: "How do we get started?", content: "Simply reach out through our contact form and our team will get back to you within 24 hours to schedule a discovery call." },
-                        { id: "2", title: "What is your typical turnaround?", content: "Depending on the complexity, project timelines vary, but most web projects are delivered within 4-8 weeks." }
-                    ]}
-                    ctaTitle="Let's Build Something"
-                    ctaDescription="Have a project in mind? We'd love to hear about it. Tell us your goals and let's create something extraordinary together."
-                    ctaButton={{ text: "Send Message", href: "#" }}
-                    ctaIcon={MessageCircle}
-                    animationType="slide-up"
-                    className="py-24"
-                />
-                <FooterCard
-                    logoText="Studio"
-                    copyrightText="© 2025 Studio. All rights reserved."
-                    socialLinks={[
-                        { icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter" },
-                        { icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram" },
-                        { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn" },
-                    ]}
-                />
+                <div id="nav" data-section="nav">
+                    <NavbarStyleApple
+                        navItems={navItems}
+                        button={{ text: "Get in Touch", href: "/contact" }}
+                        brandName="Studio"
+                    />
+                </div>
+                <div id="faq-section" data-section="faq-section">
+                    <FaqBase
+                        title="Frequently Asked Questions"
+                        description="Find answers to common questions about our agency and process."
+                        faqs={[
+                            { id: "1", title: "How do we get started?", content: "Reach out via our contact page." },
+                            { id: "2", title: "What is your timeline?", content: "Typically 4-8 weeks." }
+                        ]}
+                        faqsAnimation="slide-up"
+                        textboxLayout="default"
+                        useInvertedBackground={false}
+                    />
+                </div>
+                <div id="footer" data-section="footer">
+                    <FooterBase
+                        columns={[
+                            { title: "Studio", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] },
+                            { title: "Contact", items: [{ label: "Email Us", href: "mailto:hello@studio.com" }] }
+                        ]}
+                        logoText="Studio"
+                    />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}
\ No newline at end of file