diff --git a/nextjs-app/components/SchoolRow.tsx b/nextjs-app/components/SchoolRow.tsx
index dac2186..5c5f96d 100644
--- a/nextjs-app/components/SchoolRow.tsx
+++ b/nextjs-app/components/SchoolRow.tsx
@@ -9,7 +9,7 @@
*/
import type { School } from '@/lib/types';
-import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge } from '@/lib/utils';
+import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge, formatAgeRange } from '@/lib/utils';
import styles from './SchoolRow.module.css';
interface SchoolRowProps {
@@ -75,7 +75,7 @@ export function SchoolRow({
)}
{school.school_type && {school.school_type}}
- {school.age_range && {school.age_range}}
+ {school.age_range && {formatAgeRange(school.age_range)}}
{showDenomination && {school.religious_denomination}}
{showGender && {school.gender}}
diff --git a/nextjs-app/components/SecondarySchoolDetailView.tsx b/nextjs-app/components/SecondarySchoolDetailView.tsx
index 0fc33bb..0f9d87f 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.tsx
+++ b/nextjs-app/components/SecondarySchoolDetailView.tsx
@@ -23,7 +23,7 @@ import type {
SchoolAdmissions, SenDetail, Phonics,
SchoolDeprivation, SchoolFinance, NationalAverages,
} from '@/lib/types';
-import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils';
+import { formatPercentage, formatProgress, formatAcademicYear, formatAgeRange } from '@/lib/utils';
import { DeltaChip } from './DeltaChip';
import { track, getNavigationSource } from '@/lib/analytics';
import styles from './SecondarySchoolDetailView.module.css';
@@ -228,7 +228,7 @@ export function SecondarySchoolDetailView({
{schoolInfo.gender}'s school
)}
{schoolInfo.age_range && (
- {schoolInfo.age_range}
+ {formatAgeRange(schoolInfo.age_range)}
)}
{hasSixthForm && (
Sixth form
diff --git a/nextjs-app/components/SecondarySchoolRow.tsx b/nextjs-app/components/SecondarySchoolRow.tsx
index 7cf73f3..a302d6f 100644
--- a/nextjs-app/components/SecondarySchoolRow.tsx
+++ b/nextjs-app/components/SecondarySchoolRow.tsx
@@ -11,7 +11,7 @@
'use client';
import type { School } from '@/lib/types';
-import { buildOfstedListBadge, getPhaseStyle, schoolUrl } from '@/lib/utils';
+import { buildOfstedListBadge, getPhaseStyle, schoolUrl, formatAgeRange } from '@/lib/utils';
import styles from './SecondarySchoolRow.module.css';
function detectAdmissionsTag(school: School): string | null {
@@ -84,7 +84,7 @@ export function SecondarySchoolRow({
)}
{school.school_type && {school.school_type}}
- {school.age_range && {school.age_range}}
+ {school.age_range && {formatAgeRange(school.age_range)}}
{showGender && (
{school.gender}
)}
diff --git a/nextjs-app/lib/utils.ts b/nextjs-app/lib/utils.ts
index 2f47c54..a696370 100644
--- a/nextjs-app/lib/utils.ts
+++ b/nextjs-app/lib/utils.ts
@@ -59,6 +59,18 @@ export function truncate(text: string, maxLength: number): string {
return text.slice(0, maxLength).trim() + '...';
}
+/**
+ * Format a school's age range for display, e.g. "3-11" → "Ages 3–11".
+ * Display-only — leaves the raw `age_range` field (used for sixth-form
+ * detection) untouched. Falls back to the raw value if it's not a plain range.
+ */
+export function formatAgeRange(ageRange: string | null | undefined): string {
+ if (!ageRange) return '';
+ const match = ageRange.match(/^\s*(\d+)\s*[-–]\s*(\d+)\s*$/);
+ if (!match) return ageRange;
+ return `Ages ${match[1]}–${match[2]}`;
+}
+
// ============================================================================
// Number Formatting
// ============================================================================