diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 560dc10..daea0af 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -3,22 +3,22 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider 
-      defaultButtonVariant="text-stagger" 
-      defaultTextAnimation="entrance-slide" 
-      borderRadius="rounded" 
-      contentWidth="medium" 
-      sizing="medium" 
-      background="circleGradient" 
-      cardStyle="glass-elevated" 
-      primaryButtonStyle="gradient" 
-      secondaryButtonStyle="glass" 
-      headingFontWeight="normal"
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="mediumLargeSizeLargeTitles"
+      background="fluid"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
     >
       <ReactLenis root>
         <NavbarStyleFullscreen
@@ -28,21 +28,24 @@ export default function ContactPage() {
             { name: "Contact", id: "/contact" },
           ]}
           logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777200990405-fpi8ibhu.png"
-          logoClassName="scale-[2.5]"
           brandName="Digital Creation"
+          logoClassName="scale-[4.5]"
           button={{ text: "WhatsApp", href: "https://wa.me/yournumber" }}
         />
-        <ContactCenter 
-          tag="Contact Us"
-          title="Let's build something great"
-          description="Have a project in mind? Reach out and let's get started."
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
+        
+        <ContactSplit
+          tag="Get in touch"
+          title="Let's build something amazing"
+          description="We're here to help you turn your digital vision into reality. Reach out today!"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777205706031-qjr1lakf.png"
+          mediaPosition="right"
         />
-        <FooterBase 
+
+        <FooterBase
           className="bg-[#04225D]"
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }] }]} 
-          logoText="Digital Creation" 
+          columns={[{ title: "Links", items: [{ label: "Services", href: "/services" }, { label: "Contact", href: "/contact" }] }]}
+          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777202327410-pp97c78b.png"
+          logoText="Digital Creation"
         />
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 5259d16..6270bf4 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -2,55 +2,88 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import FooterBase from '@/components/sections/footer/FooterBase';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
+import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 
 export default function ServicesPage() {
   return (
-    <ThemeProvider 
-      defaultButtonVariant="text-stagger" 
-      defaultTextAnimation="entrance-slide" 
-      borderRadius="rounded" 
-      contentWidth="medium" 
-      sizing="medium" 
-      background="circleGradient" 
-      cardStyle="glass-elevated" 
-      primaryButtonStyle="gradient" 
-      secondaryButtonStyle="glass" 
-      headingFontWeight="normal"
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="mediumLargeSizeLargeTitles"
+      background="fluid"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
     >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "/services" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777200990405-fpi8ibhu.png"
-          logoClassName="scale-[2.5]"
-          brandName="Digital Creation"
-          button={{ text: "WhatsApp", href: "https://wa.me/yournumber" }}
-        />
-        <FeatureCardNine
-          animationType="slide-up"
-          textboxLayout="default"
-          title="Our Comprehensive Services"
-          description="We offer end-to-end digital solutions to grow your business."
-          features={[
-            { title: "Strategy", description: "Defining your digital vision and roadmap.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201034092-02e81a9a.png?_wi=2" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201041718-c27fe461.png?_wi=2" } },
-            { title: "Development", description: "Scalable, high-performance web and mobile apps.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201095600-5de2edf3.png?_wi=2" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201103456-4ace4124.png?_wi=2" } },
-            { title: "Design", description: "User-centric UI/UX that captivates your audience.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201113489-31d9b01b.png?_wi=2" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201121164-fd368f8f.png?_wi=2" } }
-          ]}
-          showStepNumbers={true}
-          useInvertedBackground={false}
-        />
-        <FooterBase 
-          className="bg-[#04225D]"
-          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }]} 
-          logoText="Digital Creation" 
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777200990405-fpi8ibhu.png"
+            brandName="Digital Creation"
+            logoClassName="scale-[4.5]"
+            button={{ text: "WhatsApp", href: "https://wa.me/yournumber" }}
+          />
+        </div>
+
+        <div id="hero" data-section="hero">
+          <HeroBillboardScroll
+            title="Our Services"
+            description="Comprehensive digital solutions tailored to your growth."
+            background={{ variant: "animated-grid" }}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777205706031-qjr1lakf.png"
+          />
+        </div>
+
+        <div id="features" data-section="features">
+          <FeatureCardNine
+            animationType="slide-up"
+            textboxLayout="default"
+            showStepNumbers={false}
+            title="Service Offerings"
+            description="Innovative tools and expert support for digital transformation."
+            features={[
+              { title: "Web Strategy", description: "High-level planning and roadmapping.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201034092-02e81a9a.png?_wi=1" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201041718-c27fe461.png?_wi=1" } },
+              { title: "Custom Development", description: "Scalable software engineered for performance.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201095600-5de2edf3.png?_wi=1" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201103456-4ace4124.png?_wi=1" } },
+              { title: "Creative Design", description: "Visual identity and user experience.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/mobile-app-ui-showing-modern-dashboard-i-1777201113489-31d9b01b.png?_wi=1" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/professional-analytics-view-on-a-mobile--1777201121164-fd368f8f.png?_wi=1" } }
+            ]}
+          />
+        </div>
+
+        <div id="work" data-section="work">
+          <TimelinePhoneView
+            title="How We Work"
+            description="Our proven methodology to deliver results."
+            textboxLayout="default"
+            items={[
+              { trigger: "Discovery", content: "Analyzing requirements and goals." },
+              { trigger: "Planning", content: "Architecting the ideal solution." },
+              { trigger: "Execution", content: "Iterative development and refinement." },
+              { trigger: "Launch", content: "Final testing and deployment." }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            className="bg-[#04225D]"
+            columns={[{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }]}
+            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ca8jhPNunWlpMXcKOcjb3eD3xc/uploaded-1777202327410-pp97c78b.png"
+            logoText="Digital Creation"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index d8651bc..7fc9340 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #04225d;
-  --card: #001122;
-  --foreground: #ffffff;
-  --primary-cta: #15479c;
+  --background: #0B1D3A;
+  --card: #132D55;
+  --foreground: #FFFFFF;
+  --primary-cta: #00A8FF;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #1e293b;
+  --secondary-cta: #FFFFFF;
   --secondary-cta-text: #e31b1b;
-  --accent: #04225D;
-  --background-accent: #1e3a8a;
+  --accent: #00A8FF;
+  --background-accent: #153A70;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);