diff --git a/src/components/pages/CoffinsStep/CoffinsStep.stories.tsx b/src/components/pages/CoffinsStep/CoffinsStep.stories.tsx
new file mode 100644
index 0000000..763908a
--- /dev/null
+++ b/src/components/pages/CoffinsStep/CoffinsStep.stories.tsx
@@ -0,0 +1,200 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CoffinsStep } from './CoffinsStep';
+import type { CoffinsStepValues, CoffinsStepErrors, Coffin } from './CoffinsStep';
+import { Navigation } from '../../organisms/Navigation';
+import Box from '@mui/material/Box';
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const FALogo = () => (
+  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box
+      component="img"
+      src="/brandlogo/logo-full.svg"
+      alt="Funeral Arranger"
+      sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
+    />
+    <Box
+      component="img"
+      src="/brandlogo/logo-short.svg"
+      alt="Funeral Arranger"
+      sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
+    />
+  </Box>
+);
+
+const nav = (
+  <Navigation
+    logo={<FALogo />}
+    items={[
+      { label: 'FAQ', href: '/faq' },
+      { label: 'Contact Us', href: '/contact' },
+    ]}
+  />
+);
+
+const sampleCoffins: Coffin[] = [
+  {
+    id: 'cedar-classic',
+    name: 'Cedar Classic',
+    imageUrl: 'https://images.unsplash.com/photo-1618220179428-22790b461013?w=400&h=300&fit=crop',
+    price: 2800,
+    category: 'Solid Timber',
+    isPopular: true,
+  },
+  {
+    id: 'oak-heritage',
+    name: 'Oak Heritage',
+    imageUrl: 'https://images.unsplash.com/photo-1555041469-a586c1029ad9?w=400&h=300&fit=crop',
+    price: 3500,
+    category: 'Solid Timber',
+  },
+  {
+    id: 'eco-willow',
+    name: 'Eco Willow Basket',
+    imageUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
+    price: 1200,
+    category: 'Environmental',
+    isPopular: true,
+  },
+  {
+    id: 'maple-serenity',
+    name: 'Maple Serenity',
+    imageUrl: 'https://images.unsplash.com/photo-1449247709967-d4461a6a6103?w=400&h=300&fit=crop',
+    price: 4200,
+    category: 'Solid Timber',
+  },
+  {
+    id: 'custom-rose',
+    name: 'Custom Rose Garden',
+    imageUrl: 'https://images.unsplash.com/photo-1490750967868-88aa4f44baee?w=400&h=300&fit=crop',
+    price: 1800,
+    category: 'Custom Board',
+  },
+  {
+    id: 'bronze-eternal',
+    name: 'Bronze Eternal',
+    imageUrl: 'https://images.unsplash.com/photo-1432462770865-65b70566d673?w=400&h=300&fit=crop',
+    price: 6500,
+    category: 'Protective Metal',
+  },
+];
+
+const defaultValues: CoffinsStepValues = {
+  selectedCoffinId: null,
+  categoryFilter: 'all',
+  priceFilter: 'all',
+  page: 1,
+};
+
+// ─── Meta ────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof CoffinsStep> = {
+  title: 'Pages/CoffinsStep',
+  component: CoffinsStep,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CoffinsStep>;
+
+// ─── Interactive (default) ──────────────────────────────────────────────────
+
+/** Full catalogue with filters */
+export const Default: Story = {
+  render: () => {
+    const [values, setValues] = useState<CoffinsStepValues>({ ...defaultValues });
+    const [errors, setErrors] = useState<CoffinsStepErrors>({});
+
+    const handleContinue = () => {
+      if (!values.selectedCoffinId) {
+        setErrors({ selectedCoffinId: 'Please choose a coffin to continue.' });
+        return;
+      }
+      alert(`Selected: ${values.selectedCoffinId}`);
+    };
+
+    return (
+      <CoffinsStep
+        values={values}
+        onChange={(v) => {
+          setValues(v);
+          setErrors({});
+        }}
+        onContinue={handleContinue}
+        onBack={() => alert('Back')}
+        onSaveAndExit={() => alert('Save')}
+        errors={errors}
+        coffins={sampleCoffins}
+        totalCount={19}
+        totalPages={2}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Coffin selected ────────────────────────────────────────────────────────
+
+/** A coffin is already selected */
+export const CoffinSelected: Story = {
+  render: () => {
+    const [values, setValues] = useState<CoffinsStepValues>({
+      ...defaultValues,
+      selectedCoffinId: 'cedar-classic',
+    });
+    return (
+      <CoffinsStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert('Continue')}
+        onBack={() => alert('Back')}
+        coffins={sampleCoffins}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Pre-planning ───────────────────────────────────────────────────────────
+
+/** Pre-planning variant */
+export const PrePlanning: Story = {
+  render: () => {
+    const [values, setValues] = useState<CoffinsStepValues>({ ...defaultValues });
+    return (
+      <CoffinsStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert('Continue')}
+        onBack={() => alert('Back')}
+        coffins={sampleCoffins}
+        isPrePlanning
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Validation error ───────────────────────────────────────────────────────
+
+/** No coffin selected with error */
+export const WithError: Story = {
+  render: () => {
+    const [values, setValues] = useState<CoffinsStepValues>({ ...defaultValues });
+    return (
+      <CoffinsStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => {}}
+        errors={{ selectedCoffinId: 'Please choose a coffin to continue.' }}
+        coffins={sampleCoffins}
+        navigation={nav}
+      />
+    );
+  },
+};
diff --git a/src/components/pages/CoffinsStep/CoffinsStep.tsx b/src/components/pages/CoffinsStep/CoffinsStep.tsx
new file mode 100644
index 0000000..7d8a074
--- /dev/null
+++ b/src/components/pages/CoffinsStep/CoffinsStep.tsx
@@ -0,0 +1,350 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import Pagination from '@mui/material/Pagination';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { WizardLayout } from '../../templates/WizardLayout';
+import { Card } from '../../atoms/Card';
+import { Badge } from '../../atoms/Badge';
+import { Typography } from '../../atoms/Typography';
+import { Button } from '../../atoms/Button';
+import { Divider } from '../../atoms/Divider';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** A coffin available for selection */
+export interface Coffin {
+  id: string;
+  name: string;
+  imageUrl: string;
+  price: number;
+  category: string;
+  isPopular?: boolean;
+}
+
+/** Filter category option */
+export interface CoffinCategory {
+  value: string;
+  label: string;
+}
+
+/** Price range filter option */
+export interface CoffinPriceRange {
+  value: string;
+  label: string;
+}
+
+/** Form values for the coffins step */
+export interface CoffinsStepValues {
+  /** Selected coffin ID */
+  selectedCoffinId: string | null;
+  /** Active category filter */
+  categoryFilter: string;
+  /** Active price filter */
+  priceFilter: string;
+  /** Current page (1-indexed) */
+  page: number;
+}
+
+/** Field-level error messages */
+export interface CoffinsStepErrors {
+  selectedCoffinId?: string;
+}
+
+/** Props for the CoffinsStep page component */
+export interface CoffinsStepProps {
+  /** Current form values */
+  values: CoffinsStepValues;
+  /** Callback when any field value changes */
+  onChange: (values: CoffinsStepValues) => void;
+  /** Callback when the Continue button is clicked */
+  onContinue: () => void;
+  /** Callback for back navigation */
+  onBack?: () => void;
+  /** Callback for save-and-exit */
+  onSaveAndExit?: () => void;
+  /** Field-level validation errors */
+  errors?: CoffinsStepErrors;
+  /** Whether the Continue button is in a loading state */
+  loading?: boolean;
+  /** Available coffins (already filtered by parent) */
+  coffins: Coffin[];
+  /** Total count before pagination (for display) */
+  totalCount?: number;
+  /** Total pages */
+  totalPages?: number;
+  /** Category filter options */
+  categories?: CoffinCategory[];
+  /** Price range filter options */
+  priceRanges?: CoffinPriceRange[];
+  /** Whether this is a pre-planning flow */
+  isPrePlanning?: boolean;
+  /** Navigation bar */
+  navigation?: React.ReactNode;
+  /** Progress stepper */
+  progressStepper?: React.ReactNode;
+  /** Running total */
+  runningTotal?: React.ReactNode;
+  /** Hide the help bar */
+  hideHelpBar?: boolean;
+  /** MUI sx prop */
+  sx?: SxProps<Theme>;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * Step 10 — Coffin selection for the FA arrangement wizard.
+ *
+ * Grid-sidebar layout: filter sidebar (left/top on mobile) + coffin
+ * card grid (main area). Cards show image, name, price, and optional
+ * "Most Popular" badge (Rec #10). Pagination at the bottom.
+ *
+ * Uses Australian terminology: "coffin" not "casket" (both types may
+ * appear in the catalogue — the product type is shown per card).
+ *
+ * Pure presentation component — props in, callbacks out.
+ * Filtering and pagination logic handled by parent.
+ *
+ * Spec: documentation/steps/steps/10_coffins.yaml
+ */
+export const CoffinsStep: React.FC<CoffinsStepProps> = ({
+  values,
+  onChange,
+  onContinue,
+  onBack,
+  onSaveAndExit,
+  errors,
+  loading = false,
+  coffins,
+  totalCount,
+  totalPages = 1,
+  categories = [
+    { value: 'all', label: 'All categories' },
+    { value: 'solid_timber', label: 'Solid Timber' },
+    { value: 'custom_board', label: 'Custom Board' },
+    { value: 'environmental', label: 'Environmental' },
+    { value: 'designer', label: 'Designer' },
+    { value: 'protective_metal', label: 'Protective Metal' },
+  ],
+  priceRanges = [
+    { value: 'all', label: 'All prices' },
+    { value: 'under_2000', label: 'Under $2,000' },
+    { value: '2000_4000', label: '$2,000 – $4,000' },
+    { value: 'over_4000', label: 'Over $4,000' },
+  ],
+  isPrePlanning = false,
+  navigation,
+  progressStepper,
+  runningTotal,
+  hideHelpBar,
+  sx,
+}) => {
+  const displayCount = totalCount ?? coffins.length;
+
+  const handleFilterChange = (field: 'categoryFilter' | 'priceFilter', value: string) => {
+    onChange({ ...values, [field]: value, page: 1 });
+  };
+
+  return (
+    <WizardLayout
+      variant="centered-form"
+      navigation={navigation}
+      progressStepper={progressStepper}
+      runningTotal={runningTotal}
+      showBackLink={!!onBack}
+      backLabel="Back"
+      onBack={onBack}
+      hideHelpBar={hideHelpBar}
+      sx={sx}
+    >
+      {/* Page heading */}
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+        Choose a coffin
+      </Typography>
+
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
+        {isPrePlanning
+          ? 'Browse the range to get an idea of styles and pricing. You can change your selection later.'
+          : 'Browse the range available with your selected provider. Use the filters to narrow your options.'}
+      </Typography>
+
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
+        Selecting a coffin within your package allowance won&apos;t change your total. Coffins
+        outside the allowance will adjust the price.
+      </Typography>
+
+      <Box
+        component="form"
+        noValidate
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+          onContinue();
+        }}
+      >
+        {/* ─── Filters ─── */}
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: 2,
+            mb: 3,
+          }}
+        >
+          <TextField
+            select
+            label="Categories"
+            value={values.categoryFilter}
+            onChange={(e) => handleFilterChange('categoryFilter', e.target.value)}
+            sx={{ minWidth: 200 }}
+          >
+            {categories.map((cat) => (
+              <MenuItem key={cat.value} value={cat.value}>
+                {cat.label}
+              </MenuItem>
+            ))}
+          </TextField>
+
+          <TextField
+            select
+            label="Price range"
+            value={values.priceFilter}
+            onChange={(e) => handleFilterChange('priceFilter', e.target.value)}
+            sx={{ minWidth: 200 }}
+          >
+            {priceRanges.map((range) => (
+              <MenuItem key={range.value} value={range.value}>
+                {range.label}
+              </MenuItem>
+            ))}
+          </TextField>
+        </Box>
+
+        {/* ─── Results count ─── */}
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }} aria-live="polite">
+          Showing {displayCount} coffin{displayCount !== 1 ? 's' : ''}
+        </Typography>
+
+        {/* ─── Coffin card grid ─── */}
+        <Box
+          role="radiogroup"
+          aria-label="Available coffins"
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: {
+              xs: '1fr',
+              sm: 'repeat(2, 1fr)',
+              md: 'repeat(3, 1fr)',
+            },
+            gap: 2,
+            mb: 3,
+          }}
+        >
+          {coffins.map((coffin, index) => (
+            <Card
+              key={coffin.id}
+              interactive
+              selected={coffin.id === values.selectedCoffinId}
+              padding="none"
+              onClick={() => onChange({ ...values, selectedCoffinId: coffin.id })}
+              role="radio"
+              aria-checked={coffin.id === values.selectedCoffinId}
+              tabIndex={
+                values.selectedCoffinId === null
+                  ? index === 0
+                    ? 0
+                    : -1
+                  : coffin.id === values.selectedCoffinId
+                    ? 0
+                    : -1
+              }
+              sx={{ overflow: 'hidden' }}
+            >
+              {/* Image */}
+              <Box
+                sx={{
+                  position: 'relative',
+                  height: 180,
+                  backgroundImage: `url(${coffin.imageUrl})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  backgroundColor: 'var(--fa-color-surface-subtle)',
+                }}
+                role="img"
+                aria-label={`Photo of ${coffin.name}`}
+              >
+                {coffin.isPopular && (
+                  <Box sx={{ position: 'absolute', top: 8, left: 8 }}>
+                    <Badge variant="soft" color="brand" aria-label="Most popular choice">
+                      Most Popular
+                    </Badge>
+                  </Box>
+                )}
+              </Box>
+
+              {/* Content */}
+              <Box sx={{ p: 2 }}>
+                <Typography variant="h6" maxLines={2} sx={{ mb: 0.5 }}>
+                  {coffin.name}
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                  {coffin.category}
+                </Typography>
+                <Typography variant="h6" color="primary">
+                  ${coffin.price.toLocaleString('en-AU')}
+                </Typography>
+              </Box>
+            </Card>
+          ))}
+        </Box>
+
+        {/* Validation error */}
+        {errors?.selectedCoffinId && (
+          <Typography variant="body2" color="error" sx={{ mb: 2 }} role="alert">
+            {errors.selectedCoffinId}
+          </Typography>
+        )}
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
+            <Pagination
+              count={totalPages}
+              page={values.page}
+              onChange={(_, page) => onChange({ ...values, page })}
+              color="primary"
+            />
+          </Box>
+        )}
+
+        <Divider sx={{ my: 3 }} />
+
+        {/* CTAs */}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexDirection: { xs: 'column-reverse', sm: 'row' },
+            gap: 2,
+          }}
+        >
+          {onSaveAndExit ? (
+            <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
+              Save and continue later
+            </Button>
+          ) : (
+            <Box />
+          )}
+          <Button type="submit" variant="contained" size="large" loading={loading}>
+            Continue
+          </Button>
+        </Box>
+      </Box>
+    </WizardLayout>
+  );
+};
+
+CoffinsStep.displayName = 'CoffinsStep';
+export default CoffinsStep;
diff --git a/src/components/pages/CoffinsStep/index.ts b/src/components/pages/CoffinsStep/index.ts
new file mode 100644
index 0000000..6f16c39
--- /dev/null
+++ b/src/components/pages/CoffinsStep/index.ts
@@ -0,0 +1,9 @@
+export { CoffinsStep, default } from './CoffinsStep';
+export type {
+  CoffinsStepProps,
+  CoffinsStepValues,
+  CoffinsStepErrors,
+  Coffin,
+  CoffinCategory,
+  CoffinPriceRange,
+} from './CoffinsStep';