diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index b42dfd0..3e93b6c 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -6,16 +6,16 @@
 
 import React from 'react';
 import HeroSection from './HomePage/sections/Hero';
-import ServicesSection from './HomePage/sections/Services';
 import AboutSection from './HomePage/sections/About';
 import CtaSection from './HomePage/sections/Cta';
 
-export default function HomePage(): React.JSX.Element {
+
+import ServicesSection from './HomePage/sections/Services';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
+      <ServicesSection />
 
-  <ServicesSection />
 
   <AboutSection />
 
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
index e685e56..6c75232 100644
--- a/src/pages/HomePage/sections/Services.tsx
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -1,53 +1,64 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "services" section.
-
 import React from 'react';
-import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+import TextAnimation from '@/components/ui/TextAnimation';
+import ScrollReveal from '@/components/ui/ScrollReveal';
 
-export default function ServicesSection(): React.JSX.Element {
+export default function ServicesSection() {
   return (
-    <div id="services" data-section="services">
-        <SectionErrorBoundary name="services">
-              <FeaturesDetailedCards
-          tag="Expertise"
-          title="What we do"
-          description="We balance clarity with depth."
-          items={[
-            {
-              title: "Web Design",
-              description: "Custom layouts and interaction design built around content, not templates.",
-              tags: [
-                "UX",
-                "UI",
-                "Creative",
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/abstract-smooth-brown-wall-background-layout-design-studio-room-web-template-business-report-with-smooth-circle-gradient-color_1258-71972.jpg",
-            },
-            {
-              title: "Brand & Identity",
-              description: "Type systems, color, and voice that define your presence.",
-              tags: [
-                "Strategy",
-                "Visuals",
-                "Voice",
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/abstract-luxury-plain-blur-grey-black-gradient-used-as-background-studio-wall-display-your-products_1258-52733.jpg",
-            },
-            {
-              title: "Development",
-              description: "Fast, accessible builds handed over clean.",
-              tags: [
-                "Code",
-                "Perf",
-                "Delivery",
-              ],
-              imageSrc: "http://img.b2bpic.net/free-photo/dark-grunge-texture_1048-4055.jpg",
-            },
-          ]}
-          textAnimation="fade"
-        />
-        </SectionErrorBoundary>
+    <section id="services" data-webild-section="services" className="relative w-full py-24 md:py-32 bg-background">
+      <div className="w-content-width mx-auto">
+        {/* Header */}
+        <div className="max-w-4xl">
+          <ScrollReveal variant="slide-up">
+            <span className="text-sm font-medium text-primary-cta uppercase tracking-widest">
+              What we do
+            </span>
+          </ScrollReveal>
+          
+          <TextAnimation 
+            text="Custom layouts and interaction design built around content" 
+            variant="slide-up" 
+            tag="h2" 
+            className="mt-6 text-4xl md:text-5xl lg:text-6xl font-serif text-foreground leading-tight"
+            gradientText={false}
+          />
+          
+          <ScrollReveal variant="slide-up" delay={0.2}>
+            <p className="mt-6 text-lg md:text-xl text-foreground/80 font-sans max-w-3xl leading-relaxed">
+              Three disciplines, one team — design, code, and identity working from the same brief instead of handed off between departments.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        {/* Services Grid */}
+        <div className="mt-20 grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-foreground/10 border-t border-foreground/10">
+          {/* Service 1 */}
+          <ScrollReveal variant="slide-up" delay={0.3} className="py-8 md:py-12 md:px-8 first:md:pl-0 last:md:pr-0 flex flex-col">
+            <span className="text-sm font-medium text-primary-cta mb-6">I.</span>
+            <h3 className="text-2xl md:text-3xl font-serif text-foreground mb-4">Web Design</h3>
+            <p className="text-base text-foreground/70 font-sans leading-relaxed">
+              Custom layouts and interaction design built around your content, not page builder's defaults.
+            </p>
+          </ScrollReveal>
+
+          {/* Service 2 */}
+          <ScrollReveal variant="slide-up" delay={0.4} className="py-8 md:py-12 md:px-8 first:md:pl-0 last:md:pr-0 flex flex-col">
+            <span className="text-sm font-medium text-primary-cta mb-6">II.</span>
+            <h3 className="text-2xl md:text-3xl font-serif text-foreground mb-4">Brand & Identity</h3>
+            <p className="text-base text-foreground/70 font-sans leading-relaxed">
+              Type systems, colour, and voice — the details that make your brand unmistakably yours.
+            </p>
+          </ScrollReveal>
+
+          {/* Service 3 */}
+          <ScrollReveal variant="slide-up" delay={0.5} className="py-8 md:py-12 md:px-8 first:md:pl-0 last:md:pr-0 flex flex-col">
+            <span className="text-sm font-medium text-primary-cta mb-6">III.</span>
+            <h3 className="text-2xl md:text-3xl font-serif text-foreground mb-4">Development</h3>
+            <p className="text-base text-foreground/70 font-sans leading-relaxed">
+              Reliable, accessible builds on modern tooling, handed over clean.
+            </p>
+          </ScrollReveal>
+        </div>
       </div>
+    </section>
   );
-}
+}
\ No newline at end of file