diff --git a/src/index.css b/src/index.css
index 182738c..81d9b66 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #050012;
-  --card: #040121;
-  --foreground: #f0e6ff;
-  --primary-cta: #c89bff;
+  --background: #050505;
+  --card: #111111;
+  --foreground: #ffffff;
+  --primary-cta: #41C0F2;
   --primary-cta-text: #050012;
-  --secondary-cta: #1d123b;
-  --secondary-cta-text: #f0e6ff;
-  --accent: #684f7b;
-  --background-accent: #65417c;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #41C0F2;
+  --background-accent: #0f2b38;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 019900e..dcac1be 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,145 +1,33 @@
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
-import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
-import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
-import { Box, Code, Layers } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import FeaturesSection from './HomePage/sections/Features';
+import WorkSection from './HomePage/sections/Work';
+import MetricsSection from './HomePage/sections/Metrics';
+import TestimonialsSection from './HomePage/sections/Testimonials';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroCenteredLogos
-      avatarsSrc={[
-        "http://img.b2bpic.net/free-photo/smiley-woman-office-holding-tablet_23-2148356266.jpg",        "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg",        "http://img.b2bpic.net/free-photo/happy-bearded-man-brown-suit-wearing-glasses-looking-smiling-cheerfully_141793-111775.jpg",        "http://img.b2bpic.net/free-photo/freelancing-is-good-idea-independent-person_329181-12349.jpg"]}
-      avatarText="Trusted by industry experts"
-      title="Muhammad Abdullah"
-      description="Crafting fully immersive, 3D interactive web experiences and high-performance front-end solutions."
-      primaryButton={{
-        text: "View Projects",        href: "#work"}}
-      secondaryButton={{
-        text: "Contact Me",        href: "#contact"}}
-      names={[
-        "Frontend",        "3D Animation",        "Web Development",        "UI/UX Design"]}
-      imageSrc="http://img.b2bpic.net/free-photo/3d-render-low-poly-network-communications-background-design_1048-12972.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutMediaOverlay
-      tag="About Me"
-      title="Front-End Developer & 3D Specialist"
-      description="I blend technical precision with artistic 3D animation. My mission is to push the boundaries of the browser, turning static designs into fluid, responsive, and award-winning digital experiences."
-      imageSrc="http://img.b2bpic.net/free-photo/woman-with-crossed-arms-looking-camera_23-2147762391.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="features" data-section="features">
-    <SectionErrorBoundary name="features">
-          <FeaturesBorderGlow
-      tag="Technical Expertise"
-      title="Built for Modern Performance"
-      description="I utilize cutting-edge technology stacks to build highly performant, accessible, and interactive web applications."
-      features={[
-        {
-          icon: Code,
-          title: "React & Next.js",          description: "Building scalable, performant frontend architectures."},
-        {
-          icon: Box,
-          title: "Three.js & WebGL",          description: "Delivering complex 3D experiences inside the browser."},
-        {
-          icon: Layers,
-          title: "GSAP Animations",          description: "Complex motion design and fluid interaction transitions."},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FeaturesSection />
 
-  <div id="work" data-section="work">
-    <SectionErrorBoundary name="work">
-          <FeaturesImageBento
-      tag="Selected Work"
-      title="Portfolio Highlights"
-      description="A collection of my latest 3D web experiments and client projects."
-      items={[
-        {
-          title: "SaaS Dashboard",          description: "Data visualization with 3D elements.",          imageSrc: "http://img.b2bpic.net/free-vector/trendy-y2k-design-style-poster-template-set_107791-26292.jpg"},
-        {
-          title: "Mobile App UI",          description: "Interactive mobile navigation prototype.",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-nutritional-counter-app_23-2149880604.jpg"},
-        {
-          title: "Architectural Studio",          description: "Minimalist gallery with 3D transitions.",          imageSrc: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background_1258-54472.jpg"},
-        {
-          title: "E-Commerce Store",          description: "Interactive 3D product showcase.",          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-boxes-front-side_187299-37628.jpg"},
-        {
-          title: "Creative Portfolio",          description: "Fluid web design with motion effects.",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345406.jpg"},
-        {
-          title: "Analytics System",          description: "High-tech node visualizations.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-low-poly-plexus-design_1048-18244.jpg"},
-        {
-          title: "Game Portal",          description: "Immersive gaming interactive portal.",          imageSrc: "http://img.b2bpic.net/free-photo/adha-signages-front-side-white-background_187299-39129.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <WorkSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsSimpleCards
-      tag="Performance"
-      title="Development Impact"
-      description="Delivering quality code that drives measurable results."
-      metrics={[
-        {
-          value: "100+",          description: "Components built"},
-        {
-          value: "99",          description: "Lighthouse performance score"},
-        {
-          value: "50k+",          description: "Active users served"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialQuoteCards
-      tag="Feedback"
-      title="What Clients Say"
-      description="Transforming creative ideas into reality through collaborative innovation."
-      testimonials={[
-        {
-          name: "Sarah Jenkins",          role: "Creative Lead",          quote: "Muhammad's 3D animation skills are unmatched in the industry.",          imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
-        {
-          name: "David Vane",          role: "CTO",          quote: "The most professional frontend developer I've worked with.",          imageSrc: "http://img.b2bpic.net/free-photo/company-worker-browsing-internet-research-project-using-computer-create-business-report-with-charts-data-analyzing-network-information-web-presentation-handheld-shot_482257-50935.jpg"},
-        {
-          name: "Maria Lopez",          role: "Product Designer",          quote: "His eye for detail is incredible, he brings designs to life.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-sitting-chair_23-2149241411.jpg"},
-        {
-          name: "Kevin Chen",          role: "Founder",          quote: "Efficient, talented, and highly visionary. Highly recommend.",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-woman-couple-blooming-garden_1157-35772.jpg"},
-        {
-          name: "Linda Wu",          role: "Marketing Director",          quote: "Brought our brand presence into the future with 3D magic.",          imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-lady-with-short-curly-hair-wireless-earphones_574295-1285.jpg"},
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <TestimonialsSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Let's Connect"
-      text="Ready to build the future of the web?"
-      primaryButton={{
-        text: "Contact Me",        href: "mailto:muhammad@example.com"}}
-      secondaryButton={{
-        text: "Download CV",        href: "#"}}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..046505d
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutMediaOverlay
+          tag="About Me"
+          title="Front-End Developer & 3D Specialist"
+          description="I blend technical precision with artistic 3D animation. My mission is to push the boundaries of the browser, turning static designs into fluid, responsive, and award-winning digital experiences."
+          imageSrc="http://img.b2bpic.net/free-photo/woman-with-crossed-arms-looking-camera_23-2147762391.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..c937b97
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Let's Connect"
+          text="Ready to build the future of the web?"
+          primaryButton={{
+            text: "Contact Me",        href: "mailto:muhammad@example.com"}}
+          secondaryButton={{
+            text: "Download CV",        href: "#"}}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Features.tsx b/src/pages/HomePage/sections/Features.tsx
new file mode 100644
index 0000000..446c8de
--- /dev/null
+++ b/src/pages/HomePage/sections/Features.tsx
@@ -0,0 +1,32 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "features" section.
+
+import React from 'react';
+import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
+import { Box, Code, Layers } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FeaturesSection(): React.JSX.Element {
+  return (
+    <div id="features" data-section="features">
+        <SectionErrorBoundary name="features">
+              <FeaturesBorderGlow
+          tag="Technical Expertise"
+          title="Built for Modern Performance"
+          description="I utilize cutting-edge technology stacks to build highly performant, accessible, and interactive web applications."
+          features={[
+            {
+              icon: Code,
+              title: "React & Next.js",          description: "Building scalable, performant frontend architectures."},
+            {
+              icon: Box,
+              title: "Three.js & WebGL",          description: "Delivering complex 3D experiences inside the browser."},
+            {
+              icon: Layers,
+              title: "GSAP Animations",          description: "Complex motion design and fluid interaction transitions."},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..d1e29f2
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,19 @@
+// Created by add_section_from_catalog (HeroSplit).
+
+import React from 'react';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroSplit
+        secondaryButton={{"href":"#contact","text":"Contact Me"}}
+        title="Muhammad Abdullah"
+        description="Front-End Developer crafting fully immersive, 3D interactive web experiences and high-performance solutions."
+        primaryButton={{"href":"#work","text":"View Projects"}}
+        imageSrc="https://storage.googleapis.com/webild/users/user_3BcOL3UbY4IN589MnmC4i4ccLur/uploaded-1781705050378-rx246wlx.jpg"
+        tag="Front-End Developer"
+      />
+    </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx
new file mode 100644
index 0000000..bead7bb
--- /dev/null
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,28 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsSimpleCards
+          tag="Performance"
+          title="Development Impact"
+          description="Delivering quality code that drives measurable results."
+          metrics={[
+            {
+              value: "100+",          description: "Components built"},
+            {
+              value: "99",          description: "Lighthouse performance score"},
+            {
+              value: "50k+",          description: "Active users served"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Testimonials.tsx b/src/pages/HomePage/sections/Testimonials.tsx
new file mode 100644
index 0000000..49d15ed
--- /dev/null
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,32 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "testimonials" section.
+
+import React from 'react';
+import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function TestimonialsSection(): React.JSX.Element {
+  return (
+    <div id="testimonials" data-section="testimonials">
+        <SectionErrorBoundary name="testimonials">
+              <TestimonialQuoteCards
+          tag="Feedback"
+          title="What Clients Say"
+          description="Transforming creative ideas into reality through collaborative innovation."
+          testimonials={[
+            {
+              name: "Sarah Jenkins",          role: "Creative Lead",          quote: "Muhammad's 3D animation skills are unmatched in the industry.",          imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
+            {
+              name: "David Vane",          role: "CTO",          quote: "The most professional frontend developer I've worked with.",          imageSrc: "http://img.b2bpic.net/free-photo/company-worker-browsing-internet-research-project-using-computer-create-business-report-with-charts-data-analyzing-network-information-web-presentation-handheld-shot_482257-50935.jpg"},
+            {
+              name: "Maria Lopez",          role: "Product Designer",          quote: "His eye for detail is incredible, he brings designs to life.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-sitting-chair_23-2149241411.jpg"},
+            {
+              name: "Kevin Chen",          role: "Founder",          quote: "Efficient, talented, and highly visionary. Highly recommend.",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-woman-couple-blooming-garden_1157-35772.jpg"},
+            {
+              name: "Linda Wu",          role: "Marketing Director",          quote: "Brought our brand presence into the future with 3D magic.",          imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-lady-with-short-curly-hair-wireless-earphones_574295-1285.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Work.tsx b/src/pages/HomePage/sections/Work.tsx
new file mode 100644
index 0000000..833583f
--- /dev/null
+++ b/src/pages/HomePage/sections/Work.tsx
@@ -0,0 +1,36 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "work" section.
+
+import React from 'react';
+import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function WorkSection(): React.JSX.Element {
+  return (
+    <div id="work" data-section="work">
+        <SectionErrorBoundary name="work">
+              <FeaturesImageBento
+          tag="Selected Work"
+          title="Portfolio Highlights"
+          description="A collection of my latest 3D web experiments and client projects."
+          items={[
+            {
+              title: "SaaS Dashboard",          description: "Data visualization with 3D elements.",          imageSrc: "http://img.b2bpic.net/free-vector/trendy-y2k-design-style-poster-template-set_107791-26292.jpg"},
+            {
+              title: "Mobile App UI",          description: "Interactive mobile navigation prototype.",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-nutritional-counter-app_23-2149880604.jpg"},
+            {
+              title: "Architectural Studio",          description: "Minimalist gallery with 3D transitions.",          imageSrc: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background_1258-54472.jpg"},
+            {
+              title: "E-Commerce Store",          description: "Interactive 3D product showcase.",          imageSrc: "http://img.b2bpic.net/free-photo/ramadan-boxes-front-side_187299-37628.jpg"},
+            {
+              title: "Creative Portfolio",          description: "Fluid web design with motion effects.",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345406.jpg"},
+            {
+              title: "Analytics System",          description: "High-tech node visualizations.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-low-poly-plexus-design_1048-18244.jpg"},
+            {
+              title: "Game Portal",          description: "Immersive gaming interactive portal.",          imageSrc: "http://img.b2bpic.net/free-photo/adha-signages-front-side-white-background_187299-39129.jpg"},
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}