diff --git a/e2e-tests/specs/onboarding.spec.js b/e2e-tests/specs/onboarding.spec.js
index d737ce93..fbbf6673 100644
--- a/e2e-tests/specs/onboarding.spec.js
+++ b/e2e-tests/specs/onboarding.spec.js
@@ -48,9 +48,12 @@ test.describe('Onboarding', () => {
         expect(await page.locator('.ss-card .ss-badge').count()).toBeGreaterThan(0);
 
         // 'All' and 'Free' should show after you select a category.
+        // Match exactly: card page-shot buttons (e.g. "Gallery", "Ballet Blog",
+        // "All Courses") also contain "all" as a substring, so a non-exact name
+        // match resolves to multiple elements once the grid renders a full page.
         await page.locator('.ob-cat-wrap').first().click();
-        await expect(page.getByRole('button', { name: 'All' })).toBeVisible();
-        await expect(page.getByRole('button', { name: 'Free' })).toBeVisible();
+        await expect(page.getByRole('button', { name: 'All', exact: true })).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Free', exact: true })).toBeVisible();
 
         // Check card structure.
         const firstListedSiteCard = page.locator('.ss-card-wrap').first();
diff --git a/onboarding/src/Components/Sites.js b/onboarding/src/Components/Sites.js
index a0ef9747..efee2918 100644
--- a/onboarding/src/Components/Sites.js
+++ b/onboarding/src/Components/Sites.js
@@ -27,11 +27,11 @@ const Sites = ( {
 	sortBy,
 	selectedColors,
 } ) => {
-	const [ maxShown, setMaxShown ] = useState( 9 );
+	const [ maxShown, setMaxShown ] = useState( 12 );
 	const { sites = {} } = getSites;
 
 	useEffect( () => {
-		setMaxShown( 9 );
+		setMaxShown( 12 );
 	}, [ editor, category, searchQuery, sortBy, selectedColors ] );
 
 	const getBuilders = () => Object.keys( sites );
@@ -218,9 +218,9 @@ const Sites = ( {
 			const rest = filterByColors( filterByCategory( ranked, category ) ).filter(
 				( site ) => site && site.slug && ! inMatches[ site.slug ]
 			);
-			const remainder = matches.length % 3;
+			const remainder = matches.length % 4;
 			const pad =
-				remainder === 0 ? 0 : Math.min( 3 - remainder, rest.length );
+				remainder === 0 ? 0 : Math.min( 4 - remainder, rest.length );
 
 			return {
 				list: [ ...matches, ...rest ],
@@ -280,7 +280,7 @@ const Sites = ( {
 								return false;
 							}
 
-							setMaxShown( ( shown ) => shown + 9 );
+							setMaxShown( ( shown ) => shown + 12 );
 						} }
 					>
 						<span
diff --git a/onboarding/src/scss/_general.scss b/onboarding/src/scss/_general.scss
index f3b1268a..043c9c11 100644
--- a/onboarding/src/scss/_general.scss
+++ b/onboarding/src/scss/_general.scss
@@ -231,7 +231,7 @@ input.components-text-control__input[type="email"],
 
 @mixin ob-general--laptop() {
   .ob-sites.is-grid {
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }