diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx
index 5b0c508726..de11223a94 100644
--- a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx
+++ b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.stories.tsx
@@ -60,13 +60,13 @@ export const Default: Story = {
 
 		await Promise.all([
 			// System notification templates
-			canvas.findByRole("checkbox", { name: "Task Events" }),
-			canvas.findByRole("checkbox", { name: "Template Events" }),
-			canvas.findByRole("checkbox", { name: "User Events" }),
-			canvas.findByRole("checkbox", { name: "Workspace Events" }),
+			canvas.findByRole("switch", { name: "Task Events" }),
+			canvas.findByRole("switch", { name: "Template Events" }),
+			canvas.findByRole("switch", { name: "User Events" }),
+			canvas.findByRole("switch", { name: "Workspace Events" }),
 
 			// Custom notification template
-			canvas.findByRole("checkbox", { name: "Custom Events" }),
+			canvas.findByRole("switch", { name: "Custom Events" }),
 		]);
 	},
 };
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
index 904e29500f..5c006a31c6 100644
--- a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
+++ b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -160,7 +160,9 @@ const NotificationsPage: FC = () => {
 													}}
 												/>
 											</div>
-											<div className="font-medium text-sm">{group}</div>
+											<label htmlFor={group} className="font-medium text-sm">
+												{group}
+											</label>
 										</header>
 										{templates.map((tmpl) => {
 											const method = castNotificationMethod(