diff --git a/src/components/pages/HomePage/HomePage.tsx b/src/components/pages/HomePage/HomePage.tsx
index 36323c8..4446463 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -12,8 +12,8 @@ import StarBorderIcon from '@mui/icons-material/StarBorder';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
-import { Card } from '../../atoms/Card';
 import { ProviderCardCompact } from '../../molecules/ProviderCardCompact';
+import { Divider } from '../../atoms/Divider';
 import { FuneralFinderV3, type FuneralFinderV3SearchParams } from '../../organisms/FuneralFinder';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -102,6 +102,10 @@ export interface HomePageProps {
 
   /** Feature cards for "Why Use FA" */
   features?: FeatureCard[];
+  /** Features section heading */
+  featuresHeading?: string;
+  /** Features section body text */
+  featuresBody?: string;
 
   /** Aggregate Google rating */
   googleRating?: number;
@@ -178,6 +182,8 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
       discoverMapSlot,
       onSelectFeaturedProvider,
       features = [],
+      featuresHeading = 'How it works',
+      featuresBody = 'Search local funeral directors, compare transparent pricing, and personalise a plan — all in your own time. No pressure, no hidden costs.',
       googleRating,
       googleReviewCount,
       testimonials = [],
@@ -404,15 +410,15 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
                     display: 'grid',
                     gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
                     gap: 3,
-                    alignItems: 'start',
+                    alignItems: 'stretch',
                   }}
                 >
-                  {/* Map placeholder */}
+                  {/* Map placeholder — stretches to match card stack */}
                   <Box
                     sx={{
                       borderRadius: 2,
                       overflow: 'hidden',
-                      minHeight: { xs: 240, md: 400 },
+                      minHeight: { xs: 240, md: 0 },
                       bgcolor: 'var(--fa-color-surface-cool)',
                       border: '1px solid',
                       borderColor: 'divider',
@@ -447,6 +453,13 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
                     ))}
                   </Box>
                 </Box>
+
+                {/* CTA */}
+                <Box sx={{ textAlign: 'center', mt: 4 }}>
+                  <Button variant="text" size="medium" onClick={onCtaClick}>
+                    Start exploring &rarr;
+                  </Button>
+                </Box>
               </Container>
             </Box>
           )}
@@ -556,28 +569,19 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
               <Container maxWidth="lg">
                 <Box sx={{ textAlign: 'center', mb: { xs: 4, md: 6 } }}>
                   <Typography
-                    variant="overline"
-                    sx={{ color: 'var(--fa-color-text-brand)', mb: 1.5, display: 'block' }}
-                  >
-                    Why use Funeral Arranger
-                  </Typography>
-                  <Typography
-                    variant="h2"
+                    variant="display3"
                     component="h2"
                     id="features-heading"
                     sx={{ mb: 2, color: 'text.primary' }}
                   >
-                    Making an impossible time a little easier
+                    {featuresHeading}
                   </Typography>
                   <Typography
-                    variant="body2"
+                    variant="body1"
                     color="text.secondary"
                     sx={{ maxWidth: 560, mx: 'auto' }}
                   >
-                    Funeral planning doesn&apos;t have to be overwhelming. Whether a loved one has
-                    just passed, is imminent, or you&apos;re pre-planning for the future. Compare
-                    transparent pricing from local funeral directors. Explore the service options,
-                    coffins and more to personalise a funeral plan in clear, easy steps.
+                    {featuresBody}
                   </Typography>
                 </Box>
 
@@ -589,41 +593,27 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
                       sm: 'repeat(2, 1fr)',
                       md: 'repeat(4, 1fr)',
                     },
-                    gap: { xs: 3, md: 3 },
+                    gap: { xs: 4, md: 5 },
                   }}
                 >
                   {features.map((feature) => (
-                    <Card key={feature.heading} variant="outlined" padding="compact">
-                      <Box sx={{ textAlign: 'center' }}>
-                        <Box
-                          sx={{
-                            mb: 1.5,
-                            mx: 'auto',
-                            width: 56,
-                            height: 56,
-                            borderRadius: '50%',
-                            bgcolor: 'var(--fa-color-brand-50)',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            color: 'primary.main',
-                            '& svg': { fontSize: 28 },
-                          }}
-                        >
-                          {feature.icon}
-                        </Box>
-                        <Typography
-                          variant="h5"
-                          component="h3"
-                          sx={{ mb: 1, color: 'text.primary' }}
-                        >
-                          {feature.heading}
-                        </Typography>
-                        <Typography variant="body2" color="text.secondary">
-                          {feature.description}
-                        </Typography>
+                    <Box key={feature.heading} sx={{ textAlign: 'center' }}>
+                      <Box
+                        sx={{
+                          mb: 2,
+                          color: 'primary.main',
+                          '& svg': { fontSize: 32 },
+                        }}
+                      >
+                        {feature.icon}
                       </Box>
-                    </Card>
+                      <Typography variant="h6" component="h3" sx={{ mb: 1, color: 'text.primary' }}>
+                        {feature.heading}
+                      </Typography>
+                      <Typography variant="body2" color="text.secondary">
+                        {feature.description}
+                      </Typography>
+                    </Box>
                   ))}
                 </Box>
               </Container>
@@ -639,17 +629,17 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
               aria-labelledby="reviews-heading"
               sx={{
                 py: { xs: 6, md: 10 },
-                bgcolor: 'var(--fa-color-surface-warm)',
+                bgcolor: 'var(--fa-color-surface-subtle)',
               }}
             >
               <Container maxWidth="md">
                 <Typography
-                  variant="h2"
+                  variant="display3"
                   component="h2"
                   id="reviews-heading"
                   sx={{ textAlign: 'center', mb: 1, color: 'text.primary' }}
                 >
-                  Testimonials
+                  What families are saying
                 </Typography>
 
                 {googleRating != null && (
@@ -673,55 +663,57 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
                   </Box>
                 )}
 
-                {/* Editorial testimonials — alternating alignment */}
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                {/* Editorial testimonials — alternating alignment with dividers */}
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                   {testimonials.map((t, i) => {
                     const isRight = i % 2 === 1;
                     return (
-                      <Box
-                        key={`${t.name}-${i}`}
-                        sx={{
-                          textAlign: isRight ? 'right' : 'left',
-                          maxWidth: '85%',
-                          ml: isRight ? 'auto' : 0,
-                          mr: isRight ? 0 : 'auto',
-                        }}
-                      >
-                        <FormatQuoteIcon
-                          sx={{
-                            fontSize: 32,
-                            color: 'var(--fa-color-brand-300)',
-                            transform: isRight ? 'scaleX(-1)' : 'none',
-                            mb: 1,
-                          }}
-                        />
-                        <Typography
-                          variant="h5"
-                          component="blockquote"
-                          sx={{ mb: 2, fontWeight: 400 }}
-                        >
-                          {t.quote}
-                        </Typography>
-                        <Typography
-                          variant="label"
-                          component="cite"
-                          sx={{ fontStyle: 'normal', display: 'block', mb: 0.5 }}
-                        >
-                          {t.name}
-                        </Typography>
+                      <React.Fragment key={`${t.name}-${i}`}>
+                        {i > 0 && <Divider sx={{ my: 4 }} />}
                         <Box
                           sx={{
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            gap: 1,
+                            textAlign: isRight ? 'right' : 'left',
+                            maxWidth: '85%',
+                            ml: isRight ? 'auto' : 0,
+                            mr: isRight ? 0 : 'auto',
                           }}
                         >
-                          <StarRating rating={t.rating} size={12} />
-                          <Typography variant="caption" color="text.secondary">
-                            · {t.timeAgo}
+                          <FormatQuoteIcon
+                            sx={{
+                              fontSize: 32,
+                              color: 'var(--fa-color-brand-300)',
+                              transform: isRight ? 'scaleX(-1)' : 'none',
+                              mb: 1,
+                            }}
+                          />
+                          <Typography
+                            variant="h5"
+                            component="blockquote"
+                            sx={{ mb: 2, fontWeight: 400 }}
+                          >
+                            {t.quote}
                           </Typography>
+                          <Typography
+                            variant="label"
+                            component="cite"
+                            sx={{ fontStyle: 'normal', display: 'block', mb: 0.5 }}
+                          >
+                            {t.name}
+                          </Typography>
+                          <Box
+                            sx={{
+                              display: 'inline-flex',
+                              alignItems: 'center',
+                              gap: 1,
+                            }}
+                          >
+                            <StarRating rating={t.rating} size={12} />
+                            <Typography variant="caption" color="text.secondary">
+                              · {t.timeAgo}
+                            </Typography>
+                          </Box>
                         </Box>
-                      </Box>
+                      </React.Fragment>
                     );
                   })}
                 </Box>
@@ -736,16 +728,16 @@ export const HomePage = React.forwardRef<HTMLDivElement, HomePageProps>(
             component="section"
             aria-labelledby="cta-heading"
             sx={{
-              bgcolor: 'var(--fa-color-surface-warm)',
-              py: { xs: 6, md: 10 },
+              py: { xs: 6, md: 8 },
             }}
           >
-            <Container maxWidth="lg" sx={{ textAlign: 'center' }}>
+            <Container maxWidth="sm" sx={{ textAlign: 'center' }}>
+              <Divider sx={{ mb: { xs: 5, md: 6 } }} />
               <Typography
-                variant="displaySm"
+                variant="display3"
                 component="h2"
                 id="cta-heading"
-                sx={{ mb: 3, color: 'text.primary', maxWidth: 500, mx: 'auto' }}
+                sx={{ mb: 3, color: 'text.primary' }}
               >
                 {ctaHeading}
               </Typography>