diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index f2aaf69..b983fe9 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,22 +8,27 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Events", id: "/events" }, { name: "Contact", id: "/#contact" }]}
-          brandName="Sankpal Global"
-        />
-        <div className="pt-24">
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Events", id: "/events" }, { name: "Projects", id: "/projects" }, { name: "Contact", id: "/#contact" }]}
+            brandName="Sankpal Global"
+          />
+        </div>
+        <div id="about" data-section="about" className="pt-24">
           <TextSplitAbout
             title="About Sankpal Global"
             description={["We are a forward-thinking organization dedicated to merging architectural brilliance with digital innovation.", "Our mission is to create sustainable, future-ready environments that define the next generation of urban living."]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Events", href: "/events" }] }]}
+            logoText="Sankpal Global"
           />
         </div>
-        <FooterLogoEmphasis
-          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Events", href: "/events" }] }]}
-          logoText="Sankpal Global"
-        />
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 5ac747f..65d3e91 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -8,24 +8,29 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 
 export default function EventsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Events", id: "/events" }, { name: "Contact", id: "/#contact" }]}
-          brandName="Sankpal Global"
-        />
-        <div className="pt-24">
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Events", id: "/events" }, { name: "Projects", id: "/projects" }, { name: "Contact", id: "/#contact" }]}
+            brandName="Sankpal Global"
+          />
+        </div>
+        <div id="features" data-section="features" className="pt-24">
           <FeatureCardNineteen
             title="Upcoming Events"
             description="Discover our latest workshops, industry events, and community engagements."
             textboxLayout="default"
             features={[]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] }]}
+            logoText="Sankpal Global"
           />
         </div>
-        <FooterLogoEmphasis
-          columns={[{ items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] }]}
-          logoText="Sankpal Global"
-        />
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
index 7ea6168..a04fb36 100644
--- a/src/app/projects/[id]/page.tsx
+++ b/src/app/projects/[id]/page.tsx
@@ -6,22 +6,29 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
-export default function ProjectDetailsPage() {
+export default function ProjectPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[{ name: "Home", id: "/" }, { name: "Projects", id: "/projects" }, { name: "Contact", id: "/#contact" }]}
-          brandName="Sankpal Global"
-        />
-        <TextSplitAbout
-          title="Project Title"
-          description={["Detailed description of the project goes here. Covering the scope, innovation, and technological implementation.", "Built with excellence at Sankpal Global."]}
-        />
-        <FooterLogoEmphasis
-          logoText="Sankpal Global"
-          columns={[{ items: [{ label: "Projects", href: "/projects" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Events", id: "/events" }, { name: "Projects", id: "/projects" }, { name: "Contact", id: "/#contact" }]}
+            brandName="Sankpal Global"
+          />
+        </div>
+        <div id="about" data-section="about" className="pt-24">
+          <TextSplitAbout
+            title="Project Details"
+            description={["Detailed view of our selected project and architectural achievements."]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            columns={[{ items: [{ label: "Home", href: "/" }, { label: "Projects", href: "/projects" }] }]}
+            logoText="Sankpal Global"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index c1b8e27..f39b983 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -8,25 +8,32 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 
 export default function ProjectsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[{ name: "Home", id: "/" }, { name: "Projects", id: "/projects" }, { name: "Contact", id: "/#contact" }]}
-          brandName="Sankpal Global"
-        />
-        <FeatureCardNineteen
-          title="Our Projects"
-          description="Explore our diverse portfolio across real estate, technology, and hospitality infrastructure."
-          textboxLayout="default"
-          features={[
-            { tag: "Real Estate", title: "Modern Heights", subtitle: "Residential", description: "A landmark residential project focusing on luxury and sustainability.", imageSrc: "http://img.b2bpic.net/free-photo/modern-residential-building-architecture_1262-1243.jpg", buttons: [{ text: "View Details", href: "/projects/1" }] },
-            { tag: "Tech", title: "SmartHub Center", subtitle: "Infrastructure", description: "A state-of-the-art integrated IT workspace.", imageSrc: "http://img.b2bpic.net/free-photo/office-building-exterior_1262-1212.jpg", buttons: [{ text: "View Details", href: "/projects/2" }] }
-          ]}
-        />
-        <FooterLogoEmphasis
-          logoText="Sankpal Global"
-          columns={[{ items: [{ label: "Home", href: "/" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Events", id: "/events" }, { name: "Projects", id: "/projects" }, { name: "Contact", id: "/#contact" }]}
+            brandName="Sankpal Global"
+          />
+        </div>
+        <div id="features" data-section="features" className="pt-24">
+          <FeatureCardNineteen
+            title="Our Projects"
+            description="Explore our diverse portfolio across real estate, technology, and hospitality infrastructure."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { tag: "Real Estate", title: "Modern Heights", subtitle: "Residential", description: "A landmark residential project focusing on luxury and sustainability.", imageSrc: "http://img.b2bpic.net/free-photo/modern-residential-building-architecture_1262-1243.jpg", buttons: [{ text: "View Details", href: "/projects/1" }] },
+              { tag: "Tech", title: "SmartHub Center", subtitle: "Infrastructure", description: "A state-of-the-art integrated IT workspace.", imageSrc: "http://img.b2bpic.net/free-photo/office-building-exterior_1262-1212.jpg", buttons: [{ text: "View Details", href: "/projects/2" }] }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Sankpal Global"
+            columns={[{ items: [{ label: "Home", href: "/" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );