diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css
index ffb3830..9c17b2c 100644
--- a/nextjs-app/components/SchoolRow.module.css
+++ b/nextjs-app/components/SchoolRow.module.css
@@ -66,12 +66,12 @@
 /* Phase label pill */
 .phaseLabel {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
-  font-size: 0.6875rem;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  border-radius: 3px;
+  line-height: 1.4;
+  border-radius: 4px;
   white-space: nowrap;
-  margin-right: 0.25rem;
 }
 
 .phaseLabelPrimary    { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
@@ -83,15 +83,21 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0;
-  font-size: 0.8rem;
-  color: var(--text-muted, #8a847a);
+  gap: 0.35rem;
 }
 
-.line2 span:not(:last-child)::after {
-  content: '·';
-  margin: 0 0.4rem;
-  color: var(--border-color, #e5dfd5);
+/* Quiet chip — one shared size/weight for every attribute (Ages, faith, etc.);
+   the phase pill keeps its colour but matches this sizing. */
+.attr {
+  display: inline-block;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 4px;
+  white-space: nowrap;
+  background: rgba(26, 22, 18, 0.05);
+  color: var(--text-secondary, #5c564d);
 }
 
 /* Line 3: stats */
diff --git a/nextjs-app/components/SchoolRow.tsx b/nextjs-app/components/SchoolRow.tsx
index 5c5f96d..71fd763 100644
--- a/nextjs-app/components/SchoolRow.tsx
+++ b/nextjs-app/components/SchoolRow.tsx
@@ -74,10 +74,10 @@ export function SchoolRow({
               {phase.label}
             </span>
           )}
-          {school.school_type && <span>{school.school_type}</span>}
-          {school.age_range && <span>{formatAgeRange(school.age_range)}</span>}
-          {showDenomination && <span>{school.religious_denomination}</span>}
-          {showGender && <span>{school.gender}</span>}
+          {school.school_type && <span className={styles.attr}>{school.school_type}</span>}
+          {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
+          {showDenomination && <span className={styles.attr}>{school.religious_denomination}</span>}
+          {showGender && <span className={styles.attr}>{school.gender}</span>}
         </div>
 
         {/* Line 3: Key stats */}
diff --git a/nextjs-app/components/SecondarySchoolRow.module.css b/nextjs-app/components/SecondarySchoolRow.module.css
index 001e3b6..d4d56bb 100644
--- a/nextjs-app/components/SecondarySchoolRow.module.css
+++ b/nextjs-app/components/SecondarySchoolRow.module.css
@@ -68,15 +68,21 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.25rem 0;
-  font-size: 0.8rem;
-  color: var(--text-muted, #8a847a);
+  gap: 0.35rem;
 }
 
-.line2 > span:not(.provisionTag):not(:last-child)::after {
-  content: '·';
-  margin: 0 0.4rem;
-  color: var(--border-color, #e5dfd5);
+/* Quiet chip — one shared size/weight for every attribute (Ages, type, etc.);
+   the phase pill keeps its colour but matches this sizing. */
+.attr {
+  display: inline-block;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 4px;
+  white-space: nowrap;
+  background: rgba(26, 22, 18, 0.05);
+  color: var(--text-secondary, #5c564d);
 }
 
 /* Line 3: KS4 stats */
@@ -151,12 +157,12 @@
 /* Phase label pill */
 .phaseLabel {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
-  font-size: 0.6875rem;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  border-radius: 3px;
+  line-height: 1.4;
+  border-radius: 4px;
   white-space: nowrap;
-  margin-right: 0.25rem;
 }
 
 .phaseLabelSecondary  { background: var(--phase-secondary-bg); color: var(--phase-secondary-text); }
@@ -165,14 +171,14 @@
 
 .provisionTag {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
+  padding: 0.0625rem 0.4rem;
   font-size: 0.75rem;
-  font-weight: 500;
-  background: var(--bg-secondary, #f3ede4);
-  color: var(--text-secondary, #5c5650);
-  border-radius: 3px;
+  font-weight: 600;
+  line-height: 1.4;
+  background: rgba(26, 22, 18, 0.05);
+  color: var(--text-secondary, #5c564d);
+  border-radius: 4px;
   white-space: nowrap;
-  margin-left: 0.375rem;
 }
 
 .selectiveTag {
diff --git a/nextjs-app/components/SecondarySchoolRow.tsx b/nextjs-app/components/SecondarySchoolRow.tsx
index a302d6f..61097ae 100644
--- a/nextjs-app/components/SecondarySchoolRow.tsx
+++ b/nextjs-app/components/SecondarySchoolRow.tsx
@@ -83,8 +83,8 @@ export function SecondarySchoolRow({
               {phase.label}
             </span>
           )}
-          {school.school_type && <span>{school.school_type}</span>}
-          {school.age_range && <span>{formatAgeRange(school.age_range)}</span>}
+          {school.school_type && <span className={styles.attr}>{school.school_type}</span>}
+          {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
           {showGender && (
             <span className={styles.provisionTag}>{school.gender}</span>
           )}