diff --git a/tests/e2e/fixtures/resume.ts b/tests/e2e/fixtures/resume.ts
index 8726eddef..2fb498b04 100644
--- a/tests/e2e/fixtures/resume.ts
+++ b/tests/e2e/fixtures/resume.ts
@@ -21,8 +21,9 @@ export async function createSampleResumeFromDashboard(page: Page, testInfo: Test
 	return resumeName;
 }
 
-// Sections the Design mode hosts; every other section title lives in Write.
-const designSections = new Set(["Template", "Layout", "Typography", "Design", "Page"]);
+// Design groups, each under its own heading, and the exact-value sections inside Design → Advanced.
+const designGroups = new Set(["Template", "Type", "Color", "Page"]);
+const advancedSections = new Set(["Layout", "Typography", "Design", "Custom CSS"]);
 // Sections the Share & export sheet hosts, without headings of their own.
 const shareSections = new Set(["Sharing", "Statistics"]);
 
@@ -34,11 +35,16 @@ export async function openSidebarSection(page: Page, title: string) {
 		return;
 	}
 
-	if (designSections.has(title)) {
+	if (designGroups.has(title) || advancedSections.has(title)) {
 		await page.getByRole("tab", { name: "Design", exact: true }).click();
-		// The visible section heading is exactly the title. Filter to visible because the screen-reader-only
-		// resume mirror in the preview also renders <h2> section headings with the same name.
-		const heading = page.getByRole("heading", { name: title, exact: true }).filter({ visible: true }).first();
+		const panel = page.getByRole("tabpanel", { name: "Design" });
+		if (advancedSections.has(title)) {
+			const advanced = panel.locator("#design-advanced");
+			if ((await advanced.getAttribute("open")) === null) await advanced.locator("summary").click();
+		}
+		// Groups are level 2; the exact-value sections inside Advanced are level 3 (both have a "Page").
+		const level = advancedSections.has(title) ? 3 : 2;
+		const heading = panel.getByRole("heading", { name: title, exact: true, level });
 		await heading.scrollIntoViewIfNeeded();
 		await expect(heading).toBeVisible();
 		return;
diff --git a/tests/e2e/specs/template-switch.spec.ts b/tests/e2e/specs/template-switch.spec.ts
index 4c080218e..3d5fef0d6 100644
--- a/tests/e2e/specs/template-switch.spec.ts
+++ b/tests/e2e/specs/template-switch.spec.ts
@@ -1,14 +1,18 @@
 import { createSampleResumeFromDashboard, openSidebarSection } from "../fixtures/resume";
 import { expect, test } from "../fixtures/test";
 
-test("switches the resume template and persists the choice", async ({ authPage: page }, testInfo) => {
+test("previews a template on hover, applies it on click and persists the choice", async ({
+	authPage: page,
+}, testInfo) => {
 	await createSampleResumeFromDashboard(page, testInfo);
 
 	await openSidebarSection(page, "Template");
-	// Sample resumes start on Azurill; its preview button opens the gallery
-	await page.getByRole("button", { name: "Azurill", exact: true }).click();
-	const gallery = page.getByRole("dialog", { name: "Template Gallery" });
-	await expect(gallery).toBeVisible();
+	// Sample resumes start on Azurill.
+	await expect(page.getByRole("button", { name: /^Azurill\b/ })).toHaveAttribute("aria-pressed", "true");
+
+	const bronzor = page.getByRole("button", { name: /^Bronzor\b/ });
+	await bronzor.hover();
+	await expect(page.getByRole("status").filter({ hasText: "Previewing Bronzor · click to apply" })).toBeVisible();
 
 	const savePromise = page.waitForResponse((response) => {
 		if (!response.url().includes("/api/rpc")) return false;
@@ -16,12 +20,22 @@ test("switches the resume template and persists the choice", async ({ authPage:
 		if (!response.ok()) return false;
 		return (response.request().postData() ?? "").includes("bronzor");
 	});
-	await gallery.getByRole("img", { name: "Bronzor", exact: true }).click();
+	await bronzor.click();
+	await expect(page.getByText("Template changed to Bronzor")).toBeVisible();
+	await expect(bronzor).toHaveAttribute("aria-pressed", "true");
 	await savePromise;
-	await page.keyboard.press("Escape");
 
-	// After a reload the Template section previews the newly selected template
+	// After a reload the gallery still marks the newly selected template.
 	await page.reload();
 	await openSidebarSection(page, "Template");
-	await expect(page.getByRole("img", { name: "Bronzor", exact: true })).toBeVisible();
+	await expect(page.getByRole("button", { name: /^Bronzor\b/ })).toHaveAttribute("aria-pressed", "true");
+});
+
+test("undoes a template switch from its toast", async ({ authPage: page }, testInfo) => {
+	await createSampleResumeFromDashboard(page, testInfo);
+	await openSidebarSection(page, "Template");
+
+	await page.getByRole("button", { name: /^Onyx\b/ }).click();
+	await page.getByRole("button", { name: "Undo", exact: true }).last().click();
+	await expect(page.getByRole("button", { name: /^Azurill\b/ })).toHaveAttribute("aria-pressed", "true");
 });