diff --git a/app/features/tournament-bracket/routes/to.$id.divisions.module.css b/app/features/tournament-bracket/routes/to.$id.divisions.module.css
new file mode 100644
index 000000000..3f3263da5
--- /dev/null
+++ b/app/features/tournament-bracket/routes/to.$id.divisions.module.css
@@ -0,0 +1,45 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
+	gap: var(--s-4);
+}
+
+.link {
+	background-color: var(--color-bg-high);
+	padding: var(--s-2) var(--s-4);
+	border-radius: var(--radius-box);
+	font-size: var(--fonts-lg);
+	font-weight: var(--weight-semi);
+	width: 100%;
+	white-space: nowrap;
+	border: var(--border-style);
+}
+
+.link:focus-visible {
+	outline: 3px solid var(--color-accent);
+	outline-offset: 3px;
+}
+
+.participant {
+	outline: 3px solid var(--color-bg-higher);
+	outline-offset: 3px;
+}
+
+.participant svg {
+	fill: var(--color-accent);
+}
+
+.participantCounts {
+	display: flex;
+	align-items: center;
+	font-weight: var(--weight-body);
+	color: var(--color-text-high);
+	font-size: var(--fonts-sm);
+	gap: var(--s-2);
+	margin-block-end: var(--s-1);
+}
+
+.participantCounts > svg {
+	width: 1rem;
+	margin-block-end: 1px;
+}
diff --git a/app/features/tournament-bracket/routes/to.$id.divisions.tsx b/app/features/tournament-bracket/routes/to.$id.divisions.tsx
index c8931a2d1..2c41826f8 100644
--- a/app/features/tournament-bracket/routes/to.$id.divisions.tsx
+++ b/app/features/tournament-bracket/routes/to.$id.divisions.tsx
@@ -6,6 +6,7 @@ import type { SerializeFrom } from "~/utils/remix";
 import { tournamentBracketsPage } from "../../../utils/urls";
 
 import { loader } from "../loaders/to.$id.divisions.server";
+import styles from "./to.$id.divisions.module.css";
 export { loader };
 
 export default function TournamentDivisionsPage() {
@@ -20,7 +21,7 @@ export default function TournamentDivisionsPage() {
 	}
 
 	return (
-		<div className="tournament__div__grid">
+		<div className={styles.grid}>
 			{data.divisions.map((div) => (
 				<DivisionLink key={div.tournamentId} div={div} />
 			))}
@@ -40,14 +41,12 @@ function DivisionLink({
 	return (
 		<Link
 			to={tournamentBracketsPage({ tournamentId: div.tournamentId })}
-			className={clsx("tournament__div__link", {
-				tournament__div__link__participant: data.divsParticipantOf.includes(
-					div.tournamentId,
-				),
+			className={clsx(styles.link, {
+				[styles.participant]: data.divsParticipantOf.includes(div.tournamentId),
 			})}
 		>
 			{shortName}
-			<div className="tournament__div__participant-counts">
+			<div className={styles.participantCounts}>
 				<Users />{" "}
 				{t("calendar:count.teams", {
 					count: div.teamsCount,