diff --git a/src/index.css b/src/index.css
index c621d19..e139020 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
+  --background: #fdfdfd;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --foreground: #1a0000;
+  --primary-cta: #e63946;
+  --primary-cta-text: #ffffff;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #1a0000;
+  --accent: #0a705f;
+  --background-accent: #f5c4c7;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index b274d57..862a455 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,106 +1,27 @@
-import AboutText from '@/components/sections/about/AboutText';
-import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
-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 AboutSummarySection from './HomePage/sections/AboutSummary';
+import EventsHomeSection from './HomePage/sections/EventsHome';
+import AboutSection from './HomePage/sections/About';
+import ContactCtaSection from './HomePage/sections/ContactCta';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplit
-      tag="Asad Atlas Federation"
-      title="Master Your Potential"
-      description="The Asad Atlas Federation provides world-class martial arts training, fostering discipline, excellence, and international competitiveness."
-      primaryButton={{
-        text: "Join Training",
-        href: "/events",
-      }}
-      secondaryButton={{
-        text: "Learn More",
-        href: "/federation",
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/fencing_654080-2252.jpg"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about-summary" data-section="about-summary">
-    <SectionErrorBoundary name="about-summary">
-          <AboutText
-      title="Science, Sport, Distinction"
-      primaryButton={{
-        text: "Our Mission",
-        href: "/federation",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSummarySection />
 
-  <div id="events-home" data-section="events-home">
-    <SectionErrorBoundary name="events-home">
-          <MetricsMediaCards
-      tag="Next Events"
-      title="Upcoming Challenges"
-      description="Test your limits in our upcoming global tournaments and grading camps."
-      metrics={[
-        {
-          value: "Grading",
-          title: "Belt Promotion",
-          description: "Showcase your progress in our official belt ranking examinations.",
-          imageSrc: "http://img.b2bpic.net/free-photo/muay-thai-thai-boxing-fighters_654080-858.jpg",
-        },
-        {
-          value: "Intensive",
-          title: "International Training",
-          description: "Join masterclasses with global leaders.",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-kids-training-gym_23-2150930328.jpg",
-        },
-        {
-          value: "Summer",
-          title: "Annual Training Camp",
-          description: "The intensive camp for dedicated athletes.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-posing-ground-holi_23-2148338020.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <EventsHomeSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTextSplit
-      title="Our Philosophy"
-      descriptions={[
-        "We believe that martial arts is more than just combat; it is a discipline that shapes the character of every practitioner. Our methodology integrates scientific physical training with traditional values of respect, integrity, and perseverance.",
-        "Our federation is built upon the pillars of athletic excellence and mental fortitude. By fostering an environment where every student can thrive, we bridge the gap between amateur passion and professional mastery.",
-      ]}
-      primaryButton={{
-        text: "Meet the Team",
-        href: "/federation",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="contact-cta" data-section="contact-cta">
-    <SectionErrorBoundary name="contact-cta">
-          <ContactCta
-      tag="Join Us"
-      text="Ready to take your training to the next level? Join the Asad Atlas family today."
-      primaryButton={{
-        text: "Contact Us",
-        href: "/contact",
-      }}
-      secondaryButton={{
-        text: "Visit Shop",
-        href: "/shop",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactCtaSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..b22115a
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,26 @@
+// 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 AboutTextSplit from '@/components/sections/about/AboutTextSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTextSplit
+          title="Our Philosophy"
+          descriptions={[
+            "We believe that martial arts is more than just combat; it is a discipline that shapes the character of every practitioner. Our methodology integrates scientific physical training with traditional values of respect, integrity, and perseverance.",
+            "Our federation is built upon the pillars of athletic excellence and mental fortitude. By fostering an environment where every student can thrive, we bridge the gap between amateur passion and professional mastery.",
+          ]}
+          primaryButton={{
+            text: "Meet the Team",
+            href: "/federation",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/AboutSummary.tsx b/src/pages/HomePage/sections/AboutSummary.tsx
new file mode 100644
index 0000000..8651bee
--- /dev/null
+++ b/src/pages/HomePage/sections/AboutSummary.tsx
@@ -0,0 +1,22 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about-summary" section.
+
+import React from 'react';
+import AboutText from '@/components/sections/about/AboutText';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSummarySection(): React.JSX.Element {
+  return (
+    <div id="about-summary" data-section="about-summary">
+        <SectionErrorBoundary name="about-summary">
+              <AboutText
+          title="Science, Sport, Distinction"
+          primaryButton={{
+            text: "Our Mission",
+            href: "/federation",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/ContactCta.tsx b/src/pages/HomePage/sections/ContactCta.tsx
new file mode 100644
index 0000000..e64c62b
--- /dev/null
+++ b/src/pages/HomePage/sections/ContactCta.tsx
@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact-cta" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactCtaSection(): React.JSX.Element {
+  return (
+    <div id="contact-cta" data-section="contact-cta">
+        <SectionErrorBoundary name="contact-cta">
+              <ContactCta
+          tag="Join Us"
+          text="Ready to take your training to the next level? Join the Asad Atlas family today."
+          primaryButton={{
+            text: "Contact Us",
+            href: "/contact",
+          }}
+          secondaryButton={{
+            text: "Visit Shop",
+            href: "/shop",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/EventsHome.tsx b/src/pages/HomePage/sections/EventsHome.tsx
new file mode 100644
index 0000000..ec9d518
--- /dev/null
+++ b/src/pages/HomePage/sections/EventsHome.tsx
@@ -0,0 +1,40 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "events-home" section.
+
+import React from 'react';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function EventsHomeSection(): React.JSX.Element {
+  return (
+    <div id="events-home" data-section="events-home">
+        <SectionErrorBoundary name="events-home">
+              <MetricsMediaCards
+          tag="Next Events"
+          title="Upcoming Challenges"
+          description="Test your limits in our upcoming global tournaments and grading camps."
+          metrics={[
+            {
+              value: "Grading",
+              title: "Belt Promotion",
+              description: "Showcase your progress in our official belt ranking examinations.",
+              imageSrc: "http://img.b2bpic.net/free-photo/muay-thai-thai-boxing-fighters_654080-858.jpg",
+            },
+            {
+              value: "Intensive",
+              title: "International Training",
+              description: "Join masterclasses with global leaders.",
+              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-kids-training-gym_23-2150930328.jpg",
+            },
+            {
+              value: "Summer",
+              title: "Annual Training Camp",
+              description: "The intensive camp for dedicated athletes.",
+              imageSrc: "http://img.b2bpic.net/free-photo/man-posing-ground-holi_23-2148338020.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..4381803
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,29 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroSplit
+          tag="Asad Atlas Federation"
+          title="Master Your Potential"
+          description="The Asad Atlas Federation provides world-class martial arts training, fostering discipline, excellence, and international competitiveness."
+          primaryButton={{
+            text: "Join Training",
+            href: "/events",
+          }}
+          secondaryButton={{
+            text: "Learn More",
+            href: "/federation",
+          }}
+          imageSrc="http://img.b2bpic.net/free-photo/fencing_654080-2252.jpg"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}