diff --git a/src/app/achievements/page.tsx b/src/app/achievements/page.tsx
index 8186448..b9e7466 100644
--- a/src/app/achievements/page.tsx
+++ b/src/app/achievements/page.tsx
@@ -8,19 +8,33 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function AchievementsPage() {
   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>
-        <NavbarLayoutFloatingOverlay
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
             navItems={[
-                { name: "Home", id: "/" },
-                { name: "About", id: "/#about" },
-                { name: "Services", id: "/#services" },
-                { name: "Achievements", id: "/achievements" },
-                { name: "Contact", id: "/#contact" },
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/#services" },
+              { name: "Achievements", id: "/achievements" },
+              { name: "Contact", id: "/#contact" },
             ]}
             brandName="NILEx"
-        />
+          />
+        </div>
         <div className="pt-24">
+          <div id="metrics" data-section="metrics">
             <MetricCardFourteen 
                 title="Our Milestones"
                 tag="Growth"
@@ -32,14 +46,17 @@ export default function AchievementsPage() {
                 ]}
                 useInvertedBackground={false}
             />
+          </div>
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+              logoText="NILEx Supply Chain"
+              columns={[
+                  { title: "Company", items: [{ label: "About", href: "/#about" }, { label: "Services", href: "/#services" }, { label: "Achievements", href: "/achievements" }] },
+                  { title: "Legal (EN/AR)", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] },
+              ]}
+          />
         </div>
-        <FooterBaseReveal
-            logoText="NILEx Supply Chain"
-            columns={[
-                { title: "Company", items: [{ label: "About", href: "/#about" }, { label: "Services", href: "/#services" }, { label: "Achievements", href: "/achievements" }] },
-                { title: "Legal (EN/AR)", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] },
-            ]}
-        />
       </ReactLenis>
     </ThemeProvider>
   );