diff --git a/app/components/Main.module.css b/app/components/Main.module.css
new file mode 100644
index 000000000..e80d6f8b2
--- /dev/null
+++ b/app/components/Main.module.css
@@ -0,0 +1,34 @@
+.container {
+	display: flex;
+	flex-direction: row;
+}
+
+.main {
+	padding-block: var(--s-4) var(--s-32);
+}
+
+.normal {
+	width: 100%;
+	max-width: 48rem;
+	margin: 0 auto;
+	padding-inline: var(--s-3);
+	min-height: 75vh;
+}
+
+.narrow {
+	width: 100%;
+	max-width: 24rem;
+	margin: 0 auto;
+}
+
+.wide {
+	width: 100%;
+	max-width: 72rem;
+	margin: 0 auto;
+}
+
+@media screen and (display-mode: standalone) {
+	.main {
+		padding-block-start: env(safe-area-inset-top);
+	}
+}
diff --git a/app/components/Main.tsx b/app/components/Main.tsx
index 70acd8ad6..4ae8be565 100644
--- a/app/components/Main.tsx
+++ b/app/components/Main.tsx
@@ -2,6 +2,7 @@ import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
 import clsx from "clsx";
 import type * as React from "react";
 import { useHasRole } from "~/modules/permissions/hooks";
+import styles from "./Main.module.css";
 
 export const Main = ({
 	children,
@@ -26,20 +27,20 @@ export const Main = ({
 		!isRouteErrorResponse(error);
 
 	return (
-		<div className="layout__main-container">
+		<div className={styles.container}>
 			<main
 				className={
 					classNameOverwrite
 						? clsx(classNameOverwrite, {
-								[containerClassName("narrow")]: halfWidth,
+								[styles.narrow]: halfWidth,
 								"pt-8-forced": showLeaderboard,
 							})
 						: clsx(
-								"layout__main",
-								containerClassName("normal"),
+								styles.main,
+								styles.normal,
 								{
-									[containerClassName("narrow")]: halfWidth,
-									[containerClassName("wide")]: bigger,
+									[styles.narrow]: halfWidth,
+									[styles.wide]: bigger,
 									"pt-8-forced": showLeaderboard,
 								},
 								className,
@@ -53,14 +54,16 @@ export const Main = ({
 	);
 };
 
+export { styles as mainStyles };
+
 export const containerClassName = (width: "narrow" | "normal" | "wide") => {
 	if (width === "narrow") {
-		return "half-width";
+		return styles.narrow;
 	}
 
 	if (width === "wide") {
-		return "bigger";
+		return styles.wide;
 	}
 
-	return "main";
+	return styles.normal;
 };
diff --git a/app/components/layout/AnythingAdder.tsx b/app/components/layout/AnythingAdder.tsx
index 8021b9f40..58e7b6b18 100644
--- a/app/components/layout/AnythingAdder.tsx
+++ b/app/components/layout/AnythingAdder.tsx
@@ -21,6 +21,7 @@ import {
 	type SendouMenuItemProps,
 } from "../elements/Menu";
 import { PlusIcon } from "../icons/Plus";
+import styles from "./TopRightButtons.module.css";
 
 export function AnythingAdder() {
 	const { t } = useTranslation(["common"]);
@@ -103,10 +104,10 @@ export function AnythingAdder() {
 		<SendouMenu
 			trigger={
 				<Button
-					className="layout__header__button"
+					className={styles.button}
 					data-testid="anything-adder-menu-button"
 				>
-					<PlusIcon className="layout__header__button__icon" />
+					<PlusIcon className={styles.buttonIcon} />
 				</Button>
 			}
 		>
diff --git a/app/components/layout/Footer.module.css b/app/components/layout/Footer.module.css
new file mode 100644
index 000000000..8dfc72a18
--- /dev/null
+++ b/app/components/layout/Footer.module.css
@@ -0,0 +1,121 @@
+.footer {
+	display: flex;
+	flex-direction: column;
+	padding: var(--s-2-5);
+	background-color: var(--color-bg-high);
+	gap: var(--s-6);
+	margin-block-start: auto;
+	padding-block-end: var(--s-32);
+}
+
+.linkList {
+	display: flex;
+	justify-content: space-evenly;
+	font-size: var(--fonts-xxs);
+}
+
+.socials {
+	display: flex;
+	justify-content: center;
+	gap: var(--s-2);
+}
+
+.socialLink {
+	display: flex;
+	max-width: 10rem;
+	height: 12rem;
+	flex: 1 1 0;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--s-4);
+	border-radius: var(--rounded);
+	background-color: var(--color-bg-higher);
+	cursor: pointer;
+	font-size: var(--fonts-lg);
+}
+
+.socialIcon {
+	height: 2.25rem;
+	transition: transform 0.25s ease-in-out;
+}
+
+.socialLink:hover > .socialIcon {
+	transform: translateY(-0.3rem);
+}
+
+.socialHeader {
+	text-align: center;
+}
+
+.socialHeader > p {
+	font-size: var(--fonts-xxs);
+}
+
+.patronTitle {
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	font-size: var(--fonts-sm);
+	font-weight: var(--semi-bold);
+	gap: var(--s-2);
+}
+
+.patronList {
+	display: flex;
+	max-width: 75vw;
+	flex-wrap: wrap;
+	justify-content: center;
+	padding: 0;
+	margin: 0 auto;
+	font-size: var(--fonts-xs);
+	gap: var(--s-1);
+	list-style: none;
+	margin-block-start: var(--s-2);
+}
+
+.patron {
+	max-width: 250px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	display: block;
+}
+
+.copyrightNote {
+	display: flex;
+	flex-direction: column;
+	color: var(--color-text-high);
+	font-size: var(--fonts-xxs);
+	text-align: center;
+}
+
+@media screen and (max-width: 640px) {
+	.socials {
+		flex-direction: column;
+	}
+
+	.socialLink {
+		max-width: initial;
+		flex-direction: row;
+	}
+
+	.socialHeader {
+		display: flex;
+		align-items: center;
+		gap: var(--s-2);
+		text-align: initial;
+	}
+
+	.socialHeader > p {
+		margin-block-start: var(--s-1);
+	}
+
+	.socialIcon {
+		height: 1.75rem;
+	}
+
+	.socialLink:hover > .socialIcon {
+		transform: translateX(-0.3rem);
+	}
+}
diff --git a/app/components/layout/Footer.tsx b/app/components/layout/Footer.tsx
index 8f75484e5..cb8067ee8 100644
--- a/app/components/layout/Footer.tsx
+++ b/app/components/layout/Footer.tsx
@@ -17,6 +17,7 @@ import { Image } from "../Image";
 import { DiscordIcon } from "../icons/Discord";
 import { GitHubIcon } from "../icons/GitHub";
 import { PatreonIcon } from "../icons/Patreon";
+import styles from "./Footer.module.css";
 
 export function Footer() {
 	const { t } = useTranslation();
@@ -24,45 +25,45 @@ export function Footer() {
 	const currentYear = new Date().getFullYear();
 
 	return (
-		<footer className="layout__footer">
-			<div className="layout__footer__link-list">
+		<footer className={styles.footer}>
+			<div className={styles.linkList}>
 				<Link to={PRIVACY_POLICY_PAGE}>{t("pages.privacy")}</Link>
 				<Link to={CONTRIBUTIONS_PAGE}>{t("pages.contributors")}</Link>
 				<Link to={FAQ_PAGE}>{t("pages.faq")}</Link>
 				<Link to={API_PAGE}>{t("pages.api")}</Link>
 			</div>
-			<div className="layout__footer__socials">
+			<div className={styles.socials}>
 				<a
-					className="layout__footer__social-link"
+					className={styles.socialLink}
 					href={SENDOU_INK_GITHUB_URL}
 					target="_blank"
 					rel="noreferrer"
 				>
-					<div className="layout__footer__social-header">
+					<div className={styles.socialHeader}>
 						GitHub<p>{t("footer.github.subtitle")}</p>
 					</div>
-					<GitHubIcon className="layout__footer__social-icon github" />
+					<GitHubIcon className={styles.socialIcon} />
 				</a>
 				<a
-					className="layout__footer__social-link"
+					className={styles.socialLink}
 					href={SENDOU_INK_DISCORD_URL}
 					target="_blank"
 					rel="noreferrer"
 				>
-					<div className="layout__footer__social-header">
+					<div className={styles.socialHeader}>
 						Discord<p>{t("footer.discord.subtitle")}</p>
 					</div>{" "}
-					<DiscordIcon className="layout__footer__social-icon discord" />
+					<DiscordIcon className={styles.socialIcon} />
 				</a>
-				<Link className="layout__footer__social-link" to={SUPPORT_PAGE}>
-					<div className="layout__footer__social-header">
+				<Link className={styles.socialLink} to={SUPPORT_PAGE}>
+					<div className={styles.socialHeader}>
 						Patreon<p>{t("footer.patreon.subtitle")}</p>
 					</div>{" "}
-					<PatreonIcon className="layout__footer__social-icon patreon" />
+					<PatreonIcon className={styles.socialIcon} />
 				</Link>
 			</div>
 			<PatronsList />
-			<div className="layout__copyright-note">
+			<div className={styles.copyrightNote}>
 				<p>
 					sendou.ink © Copyright of Sendou and contributors 2019-{currentYear}.
 					Original content & source code is licensed under the AGPL-3.0 license.
@@ -94,17 +95,14 @@ function PatronsList() {
 
 	return (
 		<div>
-			<h4 className="layout__footer__patron-title">
+			<h4 className={styles.patronTitle}>
 				{t("footer.thanks")}
 				<Image alt="" path={SENDOU_LOVE_EMOJI_PATH} width={24} height={24} />
 			</h4>
-			<ul className="layout__footer__patron-list">
+			<ul className={styles.patronList}>
 				{patrons?.map((patron) => (
 					<li key={patron.id}>
-						<Link
-							to={userPage(patron)}
-							className="layout__footer__patron-list__patron"
-						>
+						<Link to={userPage(patron)} className={styles.patron}>
 							{patron.username}
 						</Link>
 					</li>
diff --git a/app/components/layout/LogInButtonContainer.tsx b/app/components/layout/LogInButtonContainer.tsx
index 40b134bf9..27b7d816b 100644
--- a/app/components/layout/LogInButtonContainer.tsx
+++ b/app/components/layout/LogInButtonContainer.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { SendouDialog } from "~/components/elements/Dialog";
 import { useIsMounted } from "~/hooks/useIsMounted";
 import { LOG_IN_URL, SENDOU_INK_DISCORD_URL } from "~/utils/urls";
+import styles from "./UserItem.module.css";
 
 export function LogInButtonContainer({
 	children,
@@ -32,7 +33,7 @@ export function LogInButtonContainer({
 								: t("auth.errors.failed")
 						}
 					>
-						<div className="stack md layout__user-item">
+						<div className={`stack md ${styles.userItem}`}>
 							{authError === "aborted" ? (
 								t("auth.errors.discordPermissions")
 							) : (
diff --git a/app/components/layout/NavDialog.module.css b/app/components/layout/NavDialog.module.css
new file mode 100644
index 000000000..b0eb7c3b5
--- /dev/null
+++ b/app/components/layout/NavDialog.module.css
@@ -0,0 +1,92 @@
+.dialog {
+	min-width: 100vw;
+	min-height: 100vh;
+	border-radius: 0 !important;
+	border: 0 !important;
+}
+
+.closeButton {
+	margin-inline-start: auto;
+	margin-block-end: var(--s-4);
+	margin-inline-end: var(--s-4);
+}
+
+.closeButton > svg {
+	width: 32px;
+}
+
+.itemsContainer {
+	display: flex;
+	margin: 0 auto;
+	gap: var(--s-4) var(--s-4);
+	font-size: 13px;
+	flex-wrap: wrap;
+	justify-content: center;
+	animation: smooth-appear 0.75s ease-out forwards;
+	margin-top: 27.5px;
+	opacity: 0.25;
+	max-width: 48rem;
+}
+
+@keyframes smooth-appear {
+	to {
+		margin-top: 0px;
+		opacity: 1;
+	}
+}
+
+.navItem {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: var(--color-text);
+	font-weight: bold;
+	gap: var(--s-1);
+	text-align: center;
+	width: 100px;
+}
+
+.logInButton {
+	display: grid;
+	width: 50px;
+	height: 50px;
+	border: none;
+	border-radius: 100%;
+	background-color: var(--color-bg-high);
+	color: var(--color-text);
+	place-items: center;
+	transition: all 0.2s ease-out;
+}
+
+.imageContainer {
+	display: grid;
+	width: 75px;
+	height: 75px;
+	border-radius: var(--rounded);
+	background-color: var(--color-bg-high);
+	color: var(--color-text);
+	place-items: center;
+	transition: all 0.2s ease-out;
+}
+
+.imageContainer.round {
+	width: 50px;
+	height: 50px;
+	border-radius: 100%;
+}
+
+.avatar {
+	width: 50px;
+	height: 50px;
+}
+
+.imageContainer:hover {
+	background-color: var(--color-bg-higher);
+}
+
+@media screen and (max-width: 640px) {
+	.dialog {
+		padding-block: var(--s-12) !important;
+		padding-inline: 0 !important;
+	}
+}
diff --git a/app/components/layout/NavDialog.tsx b/app/components/layout/NavDialog.tsx
index 96e600752..92df9e6f4 100644
--- a/app/components/layout/NavDialog.tsx
+++ b/app/components/layout/NavDialog.tsx
@@ -10,6 +10,7 @@ import { Image } from "../Image";
 import { CrossIcon } from "../icons/Cross";
 import { LogOutIcon } from "../icons/LogOut";
 import { LogInButtonContainer } from "./LogInButtonContainer";
+import styles from "./NavDialog.module.css";
 
 export function NavDialog({
 	isOpen,
@@ -27,7 +28,7 @@ export function NavDialog({
 
 	return (
 		<SendouDialog
-			className="layout__overlay-nav__dialog"
+			className={styles.dialog}
 			showHeading={false}
 			aria-label="Site navigation"
 			isFullScreen
@@ -35,21 +36,21 @@ export function NavDialog({
 			<SendouButton
 				icon={<CrossIcon />}
 				variant="minimal-destructive"
-				className="layout__overlay-nav__close-button"
+				className={styles.closeButton}
 				onPress={close}
 				aria-label="Close navigation dialog"
 			/>
-			<div className="layout__overlay-nav__nav-items-container">
+			<div className={styles.itemsContainer}>
 				<LogInButton close={close} />
 				{navItems.map((item) => (
 					<Link
 						to={`/${item.url}`}
-						className="layout__overlay-nav__nav-item"
+						className={styles.navItem}
 						key={item.name}
 						prefetch={item.prefetch ? "render" : undefined}
 						onClick={close}
 					>
-						<div className="layout__overlay-nav__nav-image-container">
+						<div className={styles.imageContainer}>
 							<Image
 								path={navIconUrl(item.name)}
 								height={48}
@@ -85,18 +86,14 @@ function LogInButton({ close }: { close: () => void }) {
 
 	if (user) {
 		return (
-			<Link
-				to={userPage(user)}
-				className="layout__overlay-nav__nav-item"
-				onClick={close}
-			>
-				<div className="layout__overlay-nav__nav-image-container">
+			<Link to={userPage(user)} className={styles.navItem} onClick={close}>
+				<div className={styles.imageContainer}>
 					<Avatar
 						user={user}
 						alt={t("common:header.loggedInAs", {
 							userName: `${user.username}`,
 						})}
-						className="layout__overlay-nav__avatar"
+						className={styles.avatar}
 						size="sm"
 					/>
 				</div>
@@ -106,10 +103,10 @@ function LogInButton({ close }: { close: () => void }) {
 	}
 
 	return (
-		<div className="layout__overlay-nav__nav-item">
+		<div className={styles.navItem}>
 			<LogInButtonContainer>
 				<button
-					className="layout__overlay-nav__log-in-button layout__overlay-nav__nav-image-container"
+					className={`${styles.logInButton} ${styles.imageContainer}`}
 					type="submit"
 				>
 					<Image path={navIconUrl("log_in")} height={48} width={48} alt="" />
diff --git a/app/components/layout/NotificationPopover.tsx b/app/components/layout/NotificationPopover.tsx
index d6462cdee..3d1222410 100644
--- a/app/components/layout/NotificationPopover.tsx
+++ b/app/components/layout/NotificationPopover.tsx
@@ -18,6 +18,7 @@ import { BellIcon } from "../icons/Bell";
 import { RefreshIcon } from "../icons/Refresh";
 
 import styles from "./NotificationPopover.module.css";
+import headerStyles from "./TopRightButtons.module.css";
 
 export type LoaderNotification = NonNullable<
 	RootLoaderData["notifications"]
@@ -48,10 +49,10 @@ export function NotificationPopover() {
 			<SendouPopover
 				trigger={
 					<Button
-						className="layout__header__button"
+						className={headerStyles.button}
 						data-testid="notifications-button"
 					>
-						<BellIcon />
+						<BellIcon className={headerStyles.buttonIcon} />
 					</Button>
 				}
 				popoverClassName={clsx(styles.popoverContainer, {
diff --git a/app/components/layout/TopRightButtons.module.css b/app/components/layout/TopRightButtons.module.css
new file mode 100644
index 000000000..23793447a
--- /dev/null
+++ b/app/components/layout/TopRightButtons.module.css
@@ -0,0 +1,33 @@
+.container {
+	display: flex;
+	gap: var(--s-3);
+	justify-self: flex-end;
+}
+
+.button {
+	display: grid;
+	place-items: center;
+	background-color: var(--color-bg);
+	width: var(--item-size);
+	height: var(--item-size);
+	padding: 0.25rem;
+	border: 2px solid var(--color-border);
+	border-radius: 50%;
+	color: inherit;
+	cursor: pointer;
+}
+
+.button:focus-visible {
+	outline: 2px solid var(--color-text-accent);
+	outline-offset: 1px;
+}
+
+.buttonIcon {
+	width: 1.15rem;
+}
+
+@media screen and (max-width: 640px) {
+	.container > .userItem {
+		display: none;
+	}
+}
diff --git a/app/components/layout/TopRightButtons.tsx b/app/components/layout/TopRightButtons.tsx
index 72de3a9b9..3456b379f 100644
--- a/app/components/layout/TopRightButtons.tsx
+++ b/app/components/layout/TopRightButtons.tsx
@@ -5,6 +5,7 @@ import { HamburgerIcon } from "../icons/Hamburger";
 import { HeartIcon } from "../icons/Heart";
 import { AnythingAdder } from "./AnythingAdder";
 import { NotificationPopover } from "./NotificationPopover";
+import styles from "./TopRightButtons.module.css";
 import { UserItem } from "./UserItem";
 
 export function TopRightButtons({
@@ -19,7 +20,7 @@ export function TopRightButtons({
 	const { t } = useTranslation(["common"]);
 
 	return (
-		<div className="layout__header__right-container">
+		<div className={styles.container}>
 			{showSupport ? (
 				<LinkButton
 					to={SUPPORT_PAGE}
@@ -35,12 +36,12 @@ export function TopRightButtons({
 			<button
 				aria-label="Open navigation"
 				onClick={openNavDialog}
-				className="layout__header__button"
+				className={styles.button}
 				type="button"
 			>
-				<HamburgerIcon className="layout__header__button__icon" />
+				<HamburgerIcon className={styles.buttonIcon} />
 			</button>
-			{!isErrored ? <UserItem /> : null}
+			{!isErrored ? <UserItem className={styles.userItem} /> : null}
 		</div>
 	);
 }
diff --git a/app/components/layout/UserItem.module.css b/app/components/layout/UserItem.module.css
new file mode 100644
index 000000000..129a1ead8
--- /dev/null
+++ b/app/components/layout/UserItem.module.css
@@ -0,0 +1,40 @@
+.userItem {
+	outline-offset: 1px;
+	border-radius: 100%;
+}
+
+.userItem:focus-visible {
+	outline: 2px solid var(--color-text-accent);
+}
+
+.avatar {
+	width: var(--item-size);
+	height: var(--item-size);
+	color: transparent;
+}
+
+.logInButton {
+	display: flex;
+	height: var(--item-size);
+	align-items: center;
+	justify-content: center;
+	padding: 0.5rem;
+	border: 2px solid;
+	border-color: var(--color-text-accent);
+	border-radius: var(--rounded);
+	background-color: transparent;
+	color: inherit;
+	cursor: pointer;
+	font-size: var(--fonts-xs);
+	font-weight: var(--bold);
+	gap: var(--s-2);
+	text-decoration: none;
+}
+
+.logInButton > svg {
+	width: 1rem;
+}
+
+.logInButton:active {
+	transform: translateY(1px);
+}
diff --git a/app/components/layout/UserItem.tsx b/app/components/layout/UserItem.tsx
index 1f7f53c3b..9f2efc0d2 100644
--- a/app/components/layout/UserItem.tsx
+++ b/app/components/layout/UserItem.tsx
@@ -1,24 +1,30 @@
 import { Link } from "@remix-run/react";
+import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { useUser } from "~/features/auth/core/user";
 import { userPage } from "~/utils/urls";
 import { Avatar } from "../Avatar";
 import { LogInIcon } from "../icons/LogIn";
 import { LogInButtonContainer } from "./LogInButtonContainer";
+import styles from "./UserItem.module.css";
 
-export function UserItem() {
+export function UserItem({ className }: { className?: string }) {
 	const { t } = useTranslation();
 	const user = useUser();
 
 	if (user) {
 		return (
-			<Link to={userPage(user)} prefetch="intent" className="layout__user-item">
+			<Link
+				to={userPage(user)}
+				prefetch="intent"
+				className={clsx(styles.userItem, className)}
+			>
 				<Avatar
 					user={user}
 					alt={t("header.loggedInAs", {
 						userName: `${user.username}`,
 					})}
-					className="layout__avatar"
+					className={styles.avatar}
 					size="sm"
 				/>
 			</Link>
@@ -27,7 +33,7 @@ export function UserItem() {
 
 	return (
 		<LogInButtonContainer>
-			<button type="submit" className="layout__log-in-button">
+			<button type="submit" className={styles.logInButton}>
 				<LogInIcon /> {t("header.login")}
 			</button>
 		</LogInButtonContainer>
diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css
index 2505eb3d6..1c1c646b9 100644
--- a/app/components/layout/index.module.css
+++ b/app/components/layout/index.module.css
@@ -1,3 +1,85 @@
+.container {
+	width: 100%;
+	min-height: 100vh;
+	padding-top: 50px;
+}
+
+.header {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1.5px solid var(--color-border);
+	-webkit-backdrop-filter: var(--backdrop-filter);
+	backdrop-filter: var(--backdrop-filter);
+	background-color: transparent;
+	font-weight: bold;
+	padding-block: var(--s-2);
+	padding-inline: var(--s-4);
+	position: fixed;
+	top: 0;
+	z-index: 10;
+}
+
+.itemSize {
+	--item-size: var(--input-height-small);
+}
+
+.breadcrumbContainer {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+}
+
+.breadcrumb {
+	overflow: hidden;
+	max-width: 350px;
+	color: var(--color-text);
+	font-size: var(--fonts-xs);
+	font-weight: 600;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	border-radius: 9999px;
+	height: var(--item-size);
+	display: inline-flex;
+	align-items: center;
+
+	img {
+		height: 100%;
+	}
+
+	&:focus-visible {
+		outline: var(--input-focus-ring);
+		outline-offset: 1px;
+		border-radius: 9999px;
+	}
+}
+
+.breadcrumbImage {
+	min-width: var(--item-size);
+}
+
+.logo {
+	overflow: initial;
+	padding: 0 var(--s-1);
+}
+
+.logo:focus-visible {
+	outline: var(--input-focus-ring);
+	outline-offset: 1px;
+	border-radius: var(--rounded);
+}
+
+.breadcrumbSeparator {
+	font-size: 20px;
+	opacity: 0.4;
+	margin-inline-start: -1px;
+}
+
+.textMobileHidden {
+	display: inline;
+}
+
 .hamburger.fab {
 	display: grid;
 	position: fixed;
@@ -22,3 +104,20 @@
 		display: none;
 	}
 }
+
+@media screen and (display-mode: standalone) {
+	.header {
+		align-items: flex-end;
+		padding-top: calc(var(--s-2) + env(safe-area-inset-top));
+	}
+}
+
+@media screen and (max-width: 640px) {
+	.textMobileHidden {
+		display: none;
+	}
+
+	.breadcrumbContainer > a {
+		max-width: 90px;
+	}
+}
diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index 25a317482..cf21418c9 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -52,7 +52,7 @@ export function Layout({
 		!data?.user?.roles.includes("MINOR_SUPPORT") &&
 		!location.pathname.includes("plans");
 	return (
-		<div className="layout__container">
+		<div className={styles.container}>
 			<NavDialog isOpen={navDialogOpen} close={() => setNavDialogOpen(false)} />
 			{isFrontPage ? (
 				<SendouButton
@@ -62,16 +62,16 @@ export function Layout({
 					onPress={() => setNavDialogOpen(true)}
 				/>
 			) : null}
-			<header className="layout__header layout__item_size">
-				<div className="layout__breadcrumb-container">
-					<Link to="/" className="layout__breadcrumb logo">
+			<header className={clsx(styles.header, styles.itemSize)}>
+				<div className={styles.breadcrumbContainer}>
+					<Link to="/" className={clsx(styles.breadcrumb, styles.logo)}>
 						sendou.ink
 					</Link>
 					{breadcrumbs.flatMap((breadcrumb) => {
 						return [
 							<span
 								key={`${breadcrumb.href}-sep`}
-								className="layout__breadcrumb-separator"
+								className={styles.breadcrumbSeparator}
 							>
 								»
 							</span>,
@@ -101,13 +101,13 @@ function BreadcrumbLink({ data }: { data: Breadcrumb }) {
 		return (
 			<Link
 				to={data.href}
-				className={clsx("layout__breadcrumb", {
+				className={clsx(styles.breadcrumb, {
 					"stack horizontal sm items-center": data.text,
 				})}
 			>
 				{imageIsWithExtension ? (
 					<img
-						className={clsx("layout__breadcrumb__image", {
+						className={clsx(styles.breadcrumbImage, {
 							"rounded-full": data.rounded,
 						})}
 						alt=""
@@ -117,7 +117,7 @@ function BreadcrumbLink({ data }: { data: Breadcrumb }) {
 					/>
 				) : (
 					<Image
-						className={clsx("layout__breadcrumb__image", {
+						className={clsx(styles.breadcrumbImage, {
 							"rounded-full": data.rounded,
 						})}
 						alt=""
@@ -126,15 +126,13 @@ function BreadcrumbLink({ data }: { data: Breadcrumb }) {
 						height={24}
 					/>
 				)}
-				<span className="layout__breadcrumb__text-mobile-hidden">
-					{data.text}
-				</span>
+				<span className={styles.textMobileHidden}>{data.text}</span>
 			</Link>
 		);
 	}
 
 	return (
-		<Link to={data.href} className="layout__breadcrumb">
+		<Link to={data.href} className={styles.breadcrumb}>
 			{data.text}
 		</Link>
 	);
diff --git a/app/styles/badges.css b/app/features/badges/badges.module.css
similarity index 76%
rename from app/styles/badges.css
rename to app/features/badges/badges.module.css
index b59e1d6d6..b07f3eab0 100644
--- a/app/styles/badges.css
+++ b/app/features/badges/badges.module.css
@@ -1,4 +1,4 @@
-.badges__container {
+.container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -10,7 +10,7 @@
 	padding-inline: var(--s-3);
 }
 
-.badges__small-badges {
+.smallBadges {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
@@ -18,11 +18,11 @@
 	margin-block-start: var(--s-1);
 }
 
-.badges__nav-link.active {
+.navLink.active {
 	display: none;
 }
 
-.badges__general-info-texts {
+.generalInfoTexts {
 	display: flex;
 	justify-content: space-between;
 	color: var(--color-text-high);
@@ -30,24 +30,24 @@
 	padding-inline: var(--s-1);
 }
 
-.badges__explanation {
+.explanation {
 	color: var(--color-text-accent);
 	font-weight: var(--semi-bold);
 	text-align: center;
 }
 
-.badges__managers {
+.managers {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxs);
 	text-align: center;
 }
 
-.badges__owners-container {
+.ownersContainer {
 	height: 8rem;
 	overflow-y: auto;
 }
 
-.badges__owners {
+.owners {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
@@ -56,7 +56,7 @@
 	gap: var(--s-1-5);
 }
 
-.badges__owners > li {
+.owners > li {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -64,19 +64,19 @@
 	list-style: none;
 }
 
-.badges__count {
+.count {
 	color: var(--color-accent-high);
 	font-size: var(--fonts-xs);
 }
 
-.badges-edit__users-list > li {
+.editUsersList > li {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	list-style: none;
 }
 
-.badges-edit__users-list {
+.editUsersList {
 	display: flex;
 	flex-direction: column;
 	padding: 0;
@@ -86,35 +86,35 @@
 	padding-block-end: var(--s-2-5);
 }
 
-.badges-edit__number-input {
+.editNumberInput {
 	max-width: 5rem;
 }
 
-.badges-edit__cancel-button {
+.editCancelButton {
 	width: max-content;
 	margin: 0 auto;
 }
 
-.badges-edit__big-header {
+.editBigHeader {
 	font-size: var(--fonts-lg);
 }
 
-.badges-edit__small-header {
+.editSmallHeader {
 	font-size: var(--fonts-md);
 }
 
-.badges-edit__differences {
+.editDifferences {
 	padding: 0;
 	font-size: var(--fonts-xs);
 	list-style: none;
 }
 
-.badges-edit__differences > li::before {
+.editDifferences > li::before {
 	content: "-";
 	padding-inline-end: 5px;
 }
 
-.badges-search__input {
+.searchInput {
 	height: 40px !important;
 	margin: 0 auto;
 	font-size: var(--fonts-lg);
diff --git a/app/features/badges/routes/badges.$id.edit.tsx b/app/features/badges/routes/badges.$id.edit.tsx
index 50f61ab34..988fc9f7b 100644
--- a/app/features/badges/routes/badges.$id.edit.tsx
+++ b/app/features/badges/routes/badges.$id.edit.tsx
@@ -8,6 +8,7 @@ import { TrashIcon } from "~/components/icons/Trash";
 import type { Tables } from "~/db/tables";
 import { useHasPermission, useHasRole } from "~/modules/permissions/hooks";
 import { action } from "../actions/badges.$id.edit.server";
+import styles from "../badges.module.css";
 import type { BadgeDetailsLoaderData } from "../loaders/badges.$id.server";
 import type { BadgeDetailsContext } from "./badges.$id";
 export { action };
@@ -54,7 +55,7 @@ function Managers({ data }: { data: BadgeDetailsLoaderData }) {
 	return (
 		<div className="stack md mx-auto">
 			<div className="stack sm">
-				<h3 className="badges-edit__small-header">Managers</h3>
+				<h3 className={styles.editSmallHeader}>Managers</h3>
 				<UserSearch
 					key={managers.map((m) => m.id).join("-")}
 					label="Add new manager"
@@ -69,7 +70,7 @@ function Managers({ data }: { data: BadgeDetailsLoaderData }) {
 						setManagers([...managers, user]);
 					}}
 				/>
-				<ul className="badges-edit__users-list">
+				<ul className={styles.editUsersList}>
 					{managers.map((manager) => (
 						<li key={manager.id}>
 							{manager.username}
@@ -121,7 +122,7 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
 	return (
 		<div className="stack md mx-auto">
 			<div className="stack sm">
-				<h3 className="badges-edit__small-header">Owners</h3>
+				<h3 className={styles.editSmallHeader}>Owners</h3>
 				<UserSearch
 					label="Add new owner"
 					className="text-center mx-auto"
@@ -143,12 +144,12 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
 					}}
 				/>
 			</div>
-			<ul className="badges-edit__users-list">
+			<ul className={styles.editUsersList}>
 				{owners.map((owner) => (
 					<li key={owner.id}>
 						{owner.username}
 						<input
-							className="badges-edit__number-input"
+							className={styles.editNumberInput}
 							type="number"
 							value={owner.count}
 							min={0}
@@ -167,7 +168,7 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) {
 				))}
 			</ul>
 			{ownerDifferences.length > 0 ? (
-				<ul className="badges-edit__differences">
+				<ul className={styles.editDifferences}>
 					{ownerDifferences.map((o) => (
 						<li key={o.id}>
 							{o.type === "added" ? (
diff --git a/app/features/badges/routes/badges.$id.tsx b/app/features/badges/routes/badges.$id.tsx
index 4945713f3..659d1f2fb 100644
--- a/app/features/badges/routes/badges.$id.tsx
+++ b/app/features/badges/routes/badges.$id.tsx
@@ -6,6 +6,7 @@ import { LinkButton } from "~/components/elements/Button";
 import { useHasPermission, useHasRole } from "~/modules/permissions/hooks";
 import type { SerializeFrom } from "~/utils/remix";
 import { userPage } from "~/utils/urls";
+import styles from "../badges.module.css";
 import { badgeExplanationText } from "../badges-utils";
 
 import { loader } from "../loaders/badges.$id.server";
@@ -29,10 +30,10 @@ export default function BadgeDetailsPage() {
 			<Outlet context={context} />
 			<Badge badge={data.badge} isAnimated size={200} />
 			<div>
-				<div className="badges__explanation">
+				<div className={styles.explanation}>
 					{badgeExplanationText(t, data.badge)}
 				</div>
-				<div className="badges__managers">
+				<div className={styles.managers}>
 					<Trans
 						i18nKey="managedBy"
 						ns="badges"
@@ -65,12 +66,12 @@ export default function BadgeDetailsPage() {
 					Edit
 				</LinkButton>
 			) : null}
-			<div className="badges__owners-container">
-				<ul className="badges__owners">
+			<div className={styles.ownersContainer}>
+				<ul className={styles.owners}>
 					{data.badge.owners.map((owner) => (
 						<li key={owner.id}>
 							<span
-								className={clsx("badges__count", {
+								className={clsx(styles.count, {
 									invisible: owner.count <= 1,
 								})}
 							>
diff --git a/app/features/badges/routes/badges.tsx b/app/features/badges/routes/badges.tsx
index 558a8d008..9b03944ab 100644
--- a/app/features/badges/routes/badges.tsx
+++ b/app/features/badges/routes/badges.tsx
@@ -15,7 +15,7 @@ import { metaTags } from "../../../utils/remix";
 import { type BadgesLoaderData, loader } from "../loaders/badges.server";
 export { loader };
 
-import "~/styles/badges.css";
+import styles from "../badges.module.css";
 
 export const handle: SendouRouteHandle = {
 	i18n: "badges",
@@ -61,10 +61,10 @@ export default function BadgesPageLayout() {
 
 	return (
 		<Main>
-			<div className="badges__container">
+			<div className={styles.container}>
 				<Outlet />
 				<Input
-					className="badges-search__input"
+					className={styles.searchInput}
 					icon={<SearchIcon />}
 					value={inputValue}
 					onChange={(e) => setInputValue(e.target.value)}
@@ -72,10 +72,10 @@ export default function BadgesPageLayout() {
 				{ownBadges.length > 0 ? (
 					<div className="w-full">
 						<Divider smallText>{t("badges:own.divider")}</Divider>
-						<div className="badges__small-badges">
+						<div className={styles.smallBadges}>
 							{ownBadges.map((badge) => (
 								<NavLink
-									className="badges__nav-link"
+									className={styles.navLink}
 									key={badge.id}
 									to={String(badge.id)}
 								>
@@ -87,13 +87,13 @@ export default function BadgesPageLayout() {
 				) : null}
 				{ownBadges.length > 0 || otherBadges.length > 0 ? (
 					<div className="w-full">
-						<div className="badges__small-badges">
+						<div className={styles.smallBadges}>
 							{ownBadges.length > 0 ? (
 								<Divider smallText>{t("badges:other.divider")}</Divider>
 							) : null}
 							{otherBadges.map((badge) => (
 								<NavLink
-									className="badges__nav-link"
+									className={styles.navLink}
 									key={badge.id}
 									to={String(badge.id)}
 								>
@@ -108,7 +108,7 @@ export default function BadgesPageLayout() {
 					</div>
 				)}
 			</div>
-			<div className="badges__general-info-texts">
+			<div className={styles.generalInfoTexts}>
 				<p>
 					<a href={BADGES_DOC_LINK} target="_blank" rel="noopener noreferrer">
 						{t("forYourEvent")}
diff --git a/app/features/build-analyzer/components/PerInkTankGrid.tsx b/app/features/build-analyzer/components/PerInkTankGrid.tsx
index 60c046755..b1ef2d306 100644
--- a/app/features/build-analyzer/components/PerInkTankGrid.tsx
+++ b/app/features/build-analyzer/components/PerInkTankGrid.tsx
@@ -9,6 +9,7 @@ import { MAX_AP } from "../analyzer-constants";
 import type { FullInkTankOption } from "../analyzer-types";
 import { fullInkTankOptions } from "../core/stats";
 import { weaponParams } from "../core/utils";
+import styles from "../routes/analyzer.module.css";
 
 interface PerInkTankGridProps {
 	weaponSplId: MainWeaponId;
@@ -19,7 +20,7 @@ export function PerInkTankGrid(props: PerInkTankGridProps) {
 
 	return (
 		<SendouPopover
-			popoverClassName="analyzer__ink-grid__container"
+			popoverClassName={styles.inkGridContainer}
 			trigger={
 				<SendouButton variant="minimal" size="small">
 					{t("analyzer:button.showConsumptionGrid")}
@@ -92,19 +93,20 @@ function Grid({ weaponSplId }: PerInkTankGridProps) {
 			</div>
 			{/** biome-ignore lint/a11y/noStaticElementInteractions: Biome v2 migration */}
 			<div className="stack horizontal sm" onMouseLeave={handleMouseLeaveGrid}>
-				<div className="analyzer__ink-grid__horizontal-ability">
+				<div className={styles.inkGridHorizontalAbility}>
 					<Ability ability="ISS" size="SUBTINY" />
 				</div>
-				<div className="analyzer__ink-grid">
-					<div className="analyzer__ink-grid__horizontal-ability">
+				<div className={styles.inkGrid}>
+					<div className={styles.inkGridHorizontalAbility}>
 						<Ability ability="ISM" size="SUBTINY" />
 					</div>
 					<div />
 					{AP_VALUES_TO_SHOW.map((ap) => (
 						<div
-							className={clsx("analyzer__ink-grid__ap", {
-								"analyzer__ink-grid__ap__focused": ismHovered === ap,
-							})}
+							className={clsx(
+								styles.inkGridAp,
+								ismHovered === ap && styles.inkGridApFocused,
+							)}
 							key={ap}
 						>
 							{ap}
@@ -113,10 +115,11 @@ function Grid({ weaponSplId }: PerInkTankGridProps) {
 					{values.map((row, i) =>
 						[
 							<div
-								className={clsx("analyzer__ink-grid__ap", {
-									"analyzer__ink-grid__ap__focused":
-										issHovered === AP_VALUES_TO_SHOW[i],
-								})}
+								className={clsx(
+									styles.inkGridAp,
+									issHovered === AP_VALUES_TO_SHOW[i] &&
+										styles.inkGridApFocused,
+								)}
 								key={i}
 							>
 								{AP_VALUES_TO_SHOW[i]}
@@ -126,7 +129,7 @@ function Grid({ weaponSplId }: PerInkTankGridProps) {
 								const key = `${i}-${j}`;
 
 								if (cell === "N/A") {
-									return <div className="analyzer__ink-grid__cell" key={key} />;
+									return <div className={styles.inkGridCell} key={key} />;
 								}
 
 								const title = `${cell.shots ?? "-"} (ISM: ${cell.ismAP}, ISS: ${
@@ -137,7 +140,7 @@ function Grid({ weaponSplId }: PerInkTankGridProps) {
 									return (
 										// biome-ignore lint/a11y/noStaticElementInteractions: Biome v2 migration
 										<div
-											className="analyzer__ink-grid__cell"
+											className={styles.inkGridCell}
 											key={key}
 											style={{ "--cell-color": "var(--color-bg-high)" }}
 											title={title}
@@ -154,7 +157,7 @@ function Grid({ weaponSplId }: PerInkTankGridProps) {
 									// biome-ignore lint/a11y/noStaticElementInteractions: Biome v2 migration
 									<div
 										key={key}
-										className="analyzer__ink-grid__cell"
+										className={styles.inkGridCell}
 										style={{ "--cell-color": cell.hex }}
 										title={title}
 										onMouseEnter={() =>
diff --git a/app/features/build-analyzer/analyzer.css b/app/features/build-analyzer/routes/analyzer.module.css
similarity index 75%
rename from app/features/build-analyzer/analyzer.css
rename to app/features/build-analyzer/routes/analyzer.module.css
index bb2dd2e57..33364490b 100644
--- a/app/features/build-analyzer/analyzer.css
+++ b/app/features/build-analyzer/routes/analyzer.module.css
@@ -1,10 +1,10 @@
-.analyzer__container {
+.container {
 	display: grid;
 	gap: var(--s-10);
 	grid-template-columns: 1fr 2fr;
 }
 
-.analyzer__left-column {
+.leftColumn {
 	position: sticky;
 	top: 2rem;
 	display: flex;
@@ -14,7 +14,7 @@
 	gap: var(--s-8);
 }
 
-.analyzer__ap-compare {
+.apCompare {
 	display: grid;
 	grid-template-columns: 1fr max-content max-content max-content 1fr;
 	gap: var(--s-2);
@@ -22,7 +22,7 @@
 	align-items: center;
 }
 
-.analyzer__ap-compare__mains {
+.apCompareMains {
 	grid-column: span 2;
 	display: flex;
 	justify-content: center;
@@ -30,27 +30,27 @@
 	margin-block-end: var(--s-2);
 }
 
-.analyzer__ap-compare__bar {
+.apCompareBar {
 	height: 100%;
 	background-color: var(--color-info);
 }
 
-.analyzer__ap-compare__bar.analyzer__better {
+.apCompareBar.better {
 	background-color: var(--color-success);
 }
 
-.analyzer__effects-selector {
+.effectsSelector {
 	display: grid;
 	gap: var(--s-2);
 	grid-template-columns: 1fr 2.5fr;
 	place-items: center;
 }
 
-.analyzer__lde-intensity-select {
+.ldeIntensitySelect {
 	font-size: var(--fonts-xxs);
 }
 
-.analyzer__ap-summary {
+.apSummary {
 	width: 100%;
 	border-radius: var(--rounded);
 	background-color: var(--color-bg-high);
@@ -60,7 +60,7 @@
 	padding-inline: var(--s-2);
 }
 
-.analyzer__noticeable-link {
+.noticeableLink {
 	display: flex;
 	width: 100%;
 	align-items: center;
@@ -73,23 +73,23 @@
 	padding-inline: var(--s-2);
 }
 
-.analyzer__stat-popover-trigger {
+.statPopoverTrigger {
 	border-radius: 100%;
 	padding: 2px;
 }
 
-.analyzer__stat-popover-trigger__icon {
+.statPopoverTriggerIcon {
 	width: 16px;
 	stroke-width: 2;
 }
 
-.analyzer__ap-text {
+.apText {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
 }
 
-.analyzer__summary {
+.summary {
 	border-radius: var(--rounded);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-md);
@@ -99,11 +99,11 @@
 	position: relative;
 }
 
-.analyzer__details:has(.analyzer__stat-card-highlighted) .analyzer__summary {
+.details:has(.statCardHighlighted) .summary {
 	background-color: var(--color-bg-higher);
 }
 
-.analyzer__weapon-info-badge {
+.weaponInfoBadge {
 	display: inline-flex;
 	font-size: var(--fonts-xs);
 	gap: var(--s-2);
@@ -112,15 +112,12 @@
 	border-radius: var(--rounded);
 	padding: var(--s-1) var(--s-3);
 	margin-inline-start: auto;
-	/** Decided to do it absolutely because  
-  summary really dislikes becoming a flex 
-  (arrow disappears) */
 	position: absolute;
 	right: 10px;
 	top: 6.5px;
 }
 
-.analyzer__weapon-info-badge__text {
+.weaponInfoBadgeText {
 	max-width: 140px;
 	overflow-x: hidden;
 	text-overflow: ellipsis;
@@ -128,19 +125,19 @@
 }
 
 @media screen and (min-width: 480px) {
-	.analyzer__weapon-info-badge__text {
+	.weaponInfoBadgeText {
 		max-width: initial;
 	}
 }
 
-.analyzer__stat-collection {
+.statCollection {
 	display: grid;
 	gap: var(--s-2);
 	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
 	margin-block-start: var(--s-4);
 }
 
-.analyzer__stat-card {
+.statCard {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -150,11 +147,11 @@
 	gap: var(--s-4);
 }
 
-.analyzer__stat-card-highlighted {
+.statCardHighlighted {
 	background-color: var(--color-bg-higher);
 }
 
-.analyzer__stat-card__title-and-value-container {
+.statCardTitleAndValueContainer {
 	display: flex;
 	height: 100%;
 	flex-direction: column;
@@ -162,21 +159,21 @@
 	justify-content: space-between;
 }
 
-.analyzer__stat-card__title {
+.statCardTitle {
 	font-size: var(--fonts-xs);
 	line-height: 1.35;
 	text-align: center;
 	word-break: break-word;
 }
 
-.analyzer__stat-card__ability-container {
+.statCardAbilityContainer {
 	min-height: 22px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
 
-.analyzer__stat-card__popover-trigger {
+.statCardPopoverTrigger {
 	display: inline;
 	height: 1rem;
 	padding: 0;
@@ -188,21 +185,21 @@
 	outline: initial;
 }
 
-.analyzer__stat-card-values {
+.statCardValues {
 	display: flex;
 	justify-content: space-evenly;
 	margin-top: var(--s-2);
 	gap: var(--s-1);
 }
 
-.analyzer__stat-card__value {
+.statCardValue {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 }
 
-.analyzer__stat-card__value__title {
+.statCardValueTitle {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxs);
 	font-weight: 400;
@@ -210,12 +207,12 @@
 	text-transform: uppercase;
 }
 
-.analyzer__stat-card__value__number {
+.statCardValueNumber {
 	font-size: var(--fonts-md);
 	font-weight: var(--bold);
 }
 
-.analyzer__table-container {
+.tableContainer {
 	width: 100%;
 	padding: var(--s-3);
 	border-radius: var(--rounded);
@@ -224,29 +221,29 @@
 	padding-block: var(--s-2);
 }
 
-.analyzer__shots-to-splat {
+.shotsToSplat {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxxs);
 	margin-inline-start: var(--s-4);
 }
 
-.analyzer__consumption-table-explanation {
+.consumptionTableExplanation {
 	margin-top: var(--s-2);
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxs);
 }
 
-.analyzer__stat-category-explanation {
+.statCategoryExplanation {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxs);
 	margin-block-start: var(--s-3);
 }
 
-.analyzer__sub-nav {
+.subNav {
 	margin-block-end: var(--s-4);
 }
 
-.analyzer__patch {
+.patch {
 	border-radius: var(--rounded);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent-high);
@@ -257,16 +254,16 @@
 }
 
 @media screen and (max-width: 640px) {
-	.analyzer__container {
+	.container {
 		grid-template-columns: 1fr;
 	}
 
-	.analyzer__left-column {
+	.leftColumn {
 		position: initial;
 	}
 }
 
-.analyzer__stat-popover {
+.statPopover {
 	min-width: 360px;
 
 	--chart-bg: transparent;
@@ -275,51 +272,51 @@
 }
 
 @media screen and (min-width: 700px) {
-	.analyzer__stat-popover {
+	.statPopover {
 		min-width: calc(360px * 1.75);
 		--chart-height: calc(250px * 1.75);
 		--chart-width: calc(340px * 1.75);
 	}
 }
 
-.analyzer__ink-grid__container {
+.inkGridContainer {
 	overflow: auto;
 	min-width: min(100vw, 1100px);
 }
 
-.analyzer__ink-grid {
+.inkGrid {
 	display: grid;
 	grid-template-columns: repeat(41, 1fr);
 }
 
-.analyzer__ink-grid__vertical-ability {
+.inkGridVerticalAbility {
 	grid-row: span 41;
 	display: grid;
 	place-items: center;
 	padding-inline-end: var(--s-2);
 }
 
-.analyzer__ink-grid__horizontal-ability {
+.inkGridHorizontalAbility {
 	grid-column: span 41;
 	display: grid;
 	place-items: center;
 	padding-block-end: var(--s-2);
 }
 
-.analyzer__ink-grid__ap {
+.inkGridAp {
 	display: grid;
 	place-items: center;
 	font-weight: var(--semi-bold);
 	font-size: var(--fonts-xs);
 }
 
-.analyzer__ink-grid__ap__focused {
+.inkGridApFocused {
 	color: var(--color-accent);
 	font-weight: var(--bold);
 	text-decoration: underline;
 }
 
-.analyzer__ink-grid__cell {
+.inkGridCell {
 	width: 25px;
 	font-size: var(--fonts-xs);
 	display: grid;
diff --git a/app/features/build-analyzer/routes/analyzer.tsx b/app/features/build-analyzer/routes/analyzer.tsx
index 1bd6b12f1..c4ef68c2c 100644
--- a/app/features/build-analyzer/routes/analyzer.tsx
+++ b/app/features/build-analyzer/routes/analyzer.tsx
@@ -4,9 +4,11 @@ import { Link } from "@remix-run/react";
 import clsx from "clsx";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import * as R from "remeda";
 import { AbilitiesSelector } from "~/components/AbilitiesSelector";
 import { Ability } from "~/components/Ability";
 import Chart from "~/components/Chart";
+import { SendouSwitch } from "~/components/elements/Switch";
 import {
 	SendouTab,
 	SendouTabList,
@@ -16,7 +18,9 @@ import {
 import { Image } from "~/components/Image";
 import { BeakerIcon } from "~/components/icons/Beaker";
 import { Main } from "~/components/Main";
+import { Placeholder } from "~/components/Placeholder";
 import { Table } from "~/components/Table";
+import { WeaponSelect } from "~/components/WeaponSelect";
 import { useUser } from "~/features/auth/core/user";
 import { useIsMounted } from "~/hooks/useIsMounted";
 import { abilitiesShort } from "~/modules/in-game-lists/abilities";
@@ -39,6 +43,7 @@ import {
 } from "~/modules/in-game-lists/weapon-ids";
 import { nullFilledArray } from "~/utils/arrays";
 import invariant from "~/utils/invariant";
+import { logger } from "~/utils/logger";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 import {
 	ANALYZER_URL,
@@ -83,12 +88,7 @@ import {
 	isMainOnlyAbility,
 	isStackableAbility,
 } from "../core/utils";
-import "../analyzer.css";
-import * as R from "remeda";
-import { SendouSwitch } from "~/components/elements/Switch";
-import { Placeholder } from "~/components/Placeholder";
-import { WeaponSelect } from "~/components/WeaponSelect";
-import { logger } from "~/utils/logger";
+import styles from "./analyzer.module.css";
 
 export const CURRENT_PATCH = "10.1";
 
@@ -244,8 +244,8 @@ function BuildAnalyzerPage() {
 
 	return (
 		<Main>
-			<div className="analyzer__container">
-				<div className="analyzer__left-column">
+			<div className={styles.container}>
+				<div className={styles.leftColumn}>
 					<div className="stack sm items-center w-full">
 						<div className="w-full">
 							<WeaponSelect
@@ -272,7 +272,7 @@ function BuildAnalyzerPage() {
 										handleChange({ newFocused: 3 });
 									}
 								}}
-								className="analyzer__sub-nav"
+								className={styles.subNav}
 							>
 								<SendouTabList>
 									<SendouTab id="build-1" data-testid="build1-tab">
@@ -359,7 +359,7 @@ function BuildAnalyzerPage() {
 							<AbilityChunksRequired build={build} />
 						)}
 					</div>
-					<div className="analyzer__patch">
+					<div className={styles.patch}>
 						{t("analyzer:patch")} {CURRENT_PATCH}
 					</div>
 				</div>
@@ -368,14 +368,14 @@ function BuildAnalyzerPage() {
 						<StatCategory
 							title={t("analyzer:stat.category.main")}
 							summaryRightContent={
-								<div className="analyzer__weapon-info-badge">
+								<div className={styles.weaponInfoBadge}>
 									<Image
 										path={mainWeaponImageUrl(mainWeaponId)}
 										width={20}
 										height={20}
 										alt={t(`weapons:MAIN_${mainWeaponId}`)}
 									/>
-									<span className="analyzer__weapon-info-badge__text">
+									<span className={styles.weaponInfoBadgeText}>
 										{t(`weapons:MAIN_${mainWeaponId}`)}
 									</span>
 								</div>
@@ -388,7 +388,7 @@ function BuildAnalyzerPage() {
 					<StatCategory
 						title={t("analyzer:stat.category.sub")}
 						summaryRightContent={
-							<div className="analyzer__weapon-info-badge">
+							<div className={styles.weaponInfoBadge}>
 								<Image
 									path={subWeaponImageUrl(analyzed.weapon.subWeaponSplId)}
 									width={20}
@@ -477,7 +477,7 @@ function BuildAnalyzerPage() {
 					<StatCategory
 						title={t("analyzer:stat.category.special")}
 						summaryRightContent={
-							<div className="analyzer__weapon-info-badge">
+							<div className={styles.weaponInfoBadge}>
 								<Image
 									path={specialWeaponImageUrl(
 										analyzed.weapon.specialWeaponSplId,
@@ -742,13 +742,13 @@ function BuildAnalyzerPage() {
 					{analyzed.stats.subWeaponDefenseDamages.length > 0 && (
 						<StatCategory
 							title={t("analyzer:stat.category.subWeaponDefenseDamages")}
-							containerClassName="analyzer__table-container"
+							containerClassName={styles.tableContainer}
 							textBelow={t("analyzer:damageSubDefExplanation")}
 						>
 							{(["SRU"] as const).some(
 								(ability) => (abilityPoints.get(ability) ?? 0) > 0,
 							) ? (
-								<div className="analyzer__stat-card-highlighted" />
+								<div className={styles.statCardHighlighted} />
 							) : null}
 							<DamageTable
 								showPopovers
@@ -771,7 +771,7 @@ function BuildAnalyzerPage() {
 					{analyzed.stats.damages.length > 0 && (
 						<StatCategory
 							title={t("analyzer:stat.category.damage")}
-							containerClassName="analyzer__table-container"
+							containerClassName={styles.tableContainer}
 						>
 							<DamageTable
 								values={analyzed.stats.damages}
@@ -787,7 +787,7 @@ function BuildAnalyzerPage() {
 									`weapons:SPECIAL_${analyzed.weapon.specialWeaponSplId}`,
 								),
 							})}
-							containerClassName="analyzer__table-container"
+							containerClassName={styles.tableContainer}
 						>
 							<DamageTable values={analyzed.stats.specialWeaponDamages} />
 						</StatCategory>
@@ -796,12 +796,12 @@ function BuildAnalyzerPage() {
 					{analyzed.stats.fullInkTankOptions.length > 0 && (
 						<StatCategory
 							title={t("analyzer:stat.category.actionsPerInkTank")}
-							containerClassName="analyzer__table-container"
+							containerClassName={styles.tableContainer}
 						>
 							{(["ISM", "ISS"] as const).some(
 								(ability) => (abilityPoints.get(ability) ?? 0) > 0,
 							) ? (
-								<div className="analyzer__stat-card-highlighted" />
+								<div className={styles.statCardHighlighted} />
 							) : null}
 							<ConsumptionTable
 								isComparing={context.isComparing}
@@ -938,7 +938,7 @@ function BuildAnalyzerPage() {
 					</StatCategory>
 					{objectShredderSelected && (
 						<Link
-							className="analyzer__noticeable-link"
+							className={styles.noticeableLink}
 							to={objectDamageCalculatorPage(mainWeaponId)}
 						>
 							<Image
@@ -952,7 +952,7 @@ function BuildAnalyzerPage() {
 					)}
 					{user && focusedBuild && !buildIsEmpty(focusedBuild) ? (
 						<Link
-							className="analyzer__noticeable-link"
+							className={styles.noticeableLink}
 							to={userNewBuildPage(user, {
 								weapon: mainWeaponId,
 								build: focusedBuild,
@@ -989,17 +989,15 @@ function StatChartPopover(props: StatChartProps) {
 
 	return (
 		<SendouPopover
-			popoverClassName="analyzer__stat-popover"
+			popoverClassName={styles.statPopover}
 			trigger={
 				<SendouButton
-					className={
-						props.simple ? undefined : "analyzer__stat-popover-trigger"
-					}
+					className={props.simple ? undefined : styles.statPopoverTrigger}
 					variant="minimal"
 					size="small"
 					icon={
 						<BeakerIcon
-							className="analyzer__stat-popover-trigger__icon"
+							className={styles.statPopoverTriggerIcon}
 							title={t("analyzer:button.showChart")}
 						/>
 					}
@@ -1191,16 +1189,16 @@ function APCompare({
 		buildMains.length > 0 || build2Mains.length > 0;
 
 	return (
-		<div className="analyzer__ap-compare">
+		<div className={styles.apCompare}>
 			{hasAtLeastOneMainOnlyAbility ? (
 				<>
-					<div className="analyzer__ap-compare__mains">
+					<div className={styles.apCompareMains}>
 						{buildMains.map((ability) => (
 							<Ability key={ability} ability={ability} size="TINY" />
 						))}
 					</div>
 					<div />
-					<div className="analyzer__ap-compare__mains">
+					<div className={styles.apCompareMains}>
 						{build2Mains.map((ability) => (
 							<Ability key={ability} ability={ability} size="TINY" />
 						))}
@@ -1225,16 +1223,16 @@ function APCompare({
 							{t("analyzer:abilityPoints.short")}
 						</div>
 						<div
-							className={clsx("analyzer__ap-compare__bar", "justify-self-end", {
-								analyzer__better: ap >= ap2,
-							})}
+							className={clsx(
+								styles.apCompareBar,
+								"justify-self-end",
+								ap >= ap2 && styles.better,
+							)}
 							style={{ width: `${ap}px` }}
 						/>
 						<Ability ability={ability} size="TINY" />
 						<div
-							className={clsx("analyzer__ap-compare__bar", {
-								analyzer__better: ap <= ap2,
-							})}
+							className={clsx(styles.apCompareBar, ap <= ap2 && styles.better)}
 							style={{ width: `${ap2}px` }}
 						/>
 						<div
@@ -1278,7 +1276,7 @@ function EffectsSelector({
 	).reverse(); // reverse to show Tacticooler first as it always shows
 
 	return (
-		<div className="analyzer__effects-selector">
+		<div className={styles.effectsSelector}>
 			{effectsToShow.map((effect) => {
 				return (
 					<React.Fragment key={effect.type}>
@@ -1301,7 +1299,7 @@ function EffectsSelector({
 									onChange={(e) =>
 										handleLdeIntensityChange(Number(e.target.value))
 									}
-									className="analyzer__lde-intensity-select"
+									className={styles.ldeIntensitySelect}
 								>
 									{new Array(MAX_LDE_INTENSITY + 1).fill(null).map((_, i) => {
 										const percentage = ((i / MAX_LDE_INTENSITY) * 100)
@@ -1345,7 +1343,7 @@ function AbilityChunksRequired({
 
 	return (
 		<details className="w-full">
-			<summary className="analyzer__ap-summary">{t("abilityChunks")}</summary>
+			<summary className={styles.apSummary}>{t("abilityChunks")}</summary>
 			<div className="stack sm horizontal flex-wrap mt-4">
 				{abilityChunksMapAsArray.map((a) => {
 					const mainAbilityName = a[0];
@@ -1357,7 +1355,7 @@ function AbilityChunksRequired({
 							className="stack items-center"
 						>
 							<Ability ability={mainAbilityName} size="TINY" />
-							<div className="analyzer__ap-text">{numChunksRequired}</div>
+							<div className={styles.apText}>{numChunksRequired}</div>
 						</div>
 					);
 				})}
@@ -1369,7 +1367,7 @@ function AbilityChunksRequired({
 function StatCategory({
 	title,
 	children,
-	containerClassName = "analyzer__stat-collection",
+	containerClassName = styles.statCollection,
 	textBelow,
 	summaryRightContent,
 	testId,
@@ -1382,14 +1380,14 @@ function StatCategory({
 	testId?: string;
 }) {
 	return (
-		<details className="analyzer__details">
-			<summary className="analyzer__summary" data-testid={testId}>
+		<details className={styles.details}>
+			<summary className={styles.summary} data-testid={testId}>
 				{title}
 				{summaryRightContent}
 			</summary>
 			<div className={containerClassName}>{children}</div>
 			{textBelow && (
-				<div className="analyzer__stat-category-explanation">{textBelow}</div>
+				<div className={styles.statCategoryExplanation}>{textBelow}</div>
 			)}
 		</details>
 	);
@@ -1454,18 +1452,19 @@ function StatCard({
 
 	return (
 		<div
-			className={clsx("analyzer__stat-card", {
-				"analyzer__stat-card-highlighted": isHighlighted(),
-			})}
+			className={clsx(
+				styles.statCard,
+				isHighlighted() && styles.statCardHighlighted,
+			)}
 			data-testid={testId}
 		>
-			<div className="analyzer__stat-card__title-and-value-container">
-				<h3 className="analyzer__stat-card__title">
+			<div className={styles.statCardTitleAndValueContainer}>
+				<h3 className={styles.statCardTitle}>
 					{title}{" "}
 					{popoverInfo && (
 						<SendouPopover
 							trigger={
-								<SendouButton className="analyzer__stat-card__popover-trigger">
+								<SendouButton className={styles.statCardPopoverTrigger}>
 									?
 								</SendouButton>
 							}
@@ -1474,9 +1473,9 @@ function StatCard({
 						</SendouPopover>
 					)}
 				</h3>
-				<div className="analyzer__stat-card-values">
-					<div className="analyzer__stat-card__value">
-						<h4 className="analyzer__stat-card__value__title">
+				<div className={styles.statCardValues}>
+					<div className={styles.statCardValue}>
+						<h4 className={styles.statCardValueTitle}>
 							{typeof stat === "number"
 								? t("value")
 								: showComparison
@@ -1484,7 +1483,7 @@ function StatCard({
 									: t("base")}
 						</h4>{" "}
 						<div
-							className="analyzer__stat-card__value__number"
+							className={styles.statCardValueNumber}
 							data-testid={testId ? `${testId}-base` : undefined}
 						>
 							{showComparison ? (stat as StatTuple)[0].value : baseValue}
@@ -1492,14 +1491,14 @@ function StatCard({
 						</div>
 					</div>
 					{showBuildValue() ? (
-						<div className="analyzer__stat-card__value">
+						<div className={styles.statCardValue}>
 							<h4
-								className="analyzer__stat-card__value__title"
+								className={styles.statCardValueTitle}
 								data-testid={testId ? `${testId}-build-title` : undefined}
 							>
 								{showComparison ? t("build2") : t("build")}
 							</h4>{" "}
-							<div className="analyzer__stat-card__value__number">
+							<div className={styles.statCardValueNumber}>
 								{(stat as StatTuple)[showComparison ? 1 : 0].value}
 								{suffix}
 							</div>
@@ -1508,7 +1507,7 @@ function StatCard({
 				</div>
 			</div>
 			{/* always render this so it reserves space */}
-			<div className="analyzer__stat-card__ability-container">
+			<div className={styles.statCardAbilityContainer}>
 				{!isStaticValue && (
 					<>
 						<ModifiedByAbilities abilities={stat[0].modifiedBy} />
@@ -1659,7 +1658,7 @@ function DamageTable({
 									{damage(val)}
 									{comparisonVal ? `/${damage(comparisonVal)}` : null}{" "}
 									{val.shotsToSplat && (
-										<span className="analyzer__shots-to-splat">
+										<span className={styles.shotsToSplat}>
 											{t("analyzer:damage.toSplat", {
 												count: val.shotsToSplat,
 											})}
@@ -1776,7 +1775,7 @@ function ConsumptionTable({
 				</tbody>
 			</Table>
 			{subWeaponId === TORPEDO_ID && (
-				<div className="analyzer__consumption-table-explanation">
+				<div className={styles.consumptionTableExplanation}>
 					{t("analyzer:torpedoExplanation")}
 				</div>
 			)}
diff --git a/app/features/build-stats/build-stats.css b/app/features/build-stats/routes/builds.$slug.stats.module.css
similarity index 73%
rename from app/features/build-stats/build-stats.css
rename to app/features/build-stats/routes/builds.$slug.stats.module.css
index bf883918d..f3732a5ea 100644
--- a/app/features/build-stats/build-stats.css
+++ b/app/features/build-stats/routes/builds.$slug.stats.module.css
@@ -1,10 +1,10 @@
-.build-stats__ability-row {
+.abilityRow {
 	display: flex;
 	align-items: center;
 	gap: var(--s-3);
 }
 
-.build-stats__bars {
+.bars {
 	font-size: var(--fonts-sm);
 	font-weight: var(--semi-bold);
 	display: grid;
@@ -14,11 +14,7 @@
 	row-gap: var(--s-1);
 }
 
-.build-stats__bar {
+.bar {
 	background-color: var(--color-accent);
 	height: 100%;
 }
-
-.build-stats__value-text {
-	width: 100px;
-}
diff --git a/app/features/build-stats/routes/builds.$slug.stats.tsx b/app/features/build-stats/routes/builds.$slug.stats.tsx
index faba10369..0f512660a 100644
--- a/app/features/build-stats/routes/builds.$slug.stats.tsx
+++ b/app/features/build-stats/routes/builds.$slug.stats.tsx
@@ -16,8 +16,8 @@ import { metaTags } from "../../../utils/remix";
 import { loader } from "../loaders/builds.$slug.stats.server";
 export { loader };
 
-import "../build-stats.css";
 import { MAX_AP } from "~/features/build-analyzer/analyzer-constants";
+import styles from "./builds.$slug.stats.module.css";
 
 export const meta: MetaFunction<typeof loader> = (args) => {
 	if (!args.data) return [];
@@ -79,11 +79,11 @@ export default function BuildStatsPage() {
 							);
 
 						return (
-							<div key={stats.name} className="build-stats__ability-row">
+							<div key={stats.name} className={styles.abilityRow}>
 								<div>
 									<Ability ability={stats.name} size="SUB" />
 								</div>
-								<div className="build-stats__bars">
+								<div className={styles.bars}>
 									<div>
 										<WeaponImage
 											variant="badge"
@@ -95,7 +95,7 @@ export default function BuildStatsPage() {
 										{stats.apAverage.weapon} {t("analyzer:abilityPoints.short")}
 									</div>{" "}
 									<div
-										className="build-stats__bar"
+										className={styles.bar}
 										style={{ width: `${apToPx(stats.apAverage.weapon)}px` }}
 									/>
 									<div className="text-xs text-lighter font-bold justify-self-center">
@@ -105,7 +105,7 @@ export default function BuildStatsPage() {
 										{stats.apAverage.all} {t("analyzer:abilityPoints.short")}
 									</div>{" "}
 									<div
-										className="build-stats__bar"
+										className={styles.bar}
 										style={{ width: `${apToPx(stats.apAverage.all)}px` }}
 									/>
 								</div>
@@ -123,9 +123,9 @@ export default function BuildStatsPage() {
 							Math.floor((ap / MAX_AP) * 125);
 
 						return (
-							<div key={stats.name} className="build-stats__ability-row">
+							<div key={stats.name} className={styles.abilityRow}>
 								<Ability ability={stats.name} size="SUB" />
-								<div className="build-stats__bars">
+								<div className={styles.bars}>
 									<div>
 										<WeaponImage
 											variant="badge"
@@ -135,7 +135,7 @@ export default function BuildStatsPage() {
 									</div>
 									<div>{stats.percentage.weapon}%</div>{" "}
 									<div
-										className="build-stats__bar"
+										className={styles.bar}
 										style={{
 											width: `${percentageToPx(stats.percentage.weapon)}px`,
 										}}
@@ -145,7 +145,7 @@ export default function BuildStatsPage() {
 									</div>
 									<div>{stats.percentage.all}%</div>{" "}
 									<div
-										className="build-stats__bar"
+										className={styles.bar}
 										style={{
 											width: `${percentageToPx(stats.percentage.all)}px`,
 										}}
diff --git a/app/styles/calendar-event.css b/app/features/calendar/calendar-event.module.css
similarity index 77%
rename from app/styles/calendar-event.css
rename to app/features/calendar/calendar-event.module.css
index 60d5fe17a..877e189b1 100644
--- a/app/styles/calendar-event.css
+++ b/app/features/calendar/calendar-event.module.css
@@ -1,23 +1,23 @@
-.event__title {
+.title {
 	line-height: 1.35;
 }
 
-.event__day {
+.day {
 	color: var(--color-text-high);
 }
 
-.event__times {
+.times {
 	display: grid;
 	column-gap: var(--s-1-5);
 	font-weight: var(--semi-bold);
 	grid-template-columns: max-content 1fr;
 }
 
-.event__times > time {
+.times > time {
 	height: 1.25rem;
 }
 
-.event__map-pool-section {
+.mapPoolSection {
 	display: flex;
 	max-width: 32rem;
 	flex-direction: column;
@@ -26,7 +26,7 @@
 	gap: var(--s-4);
 }
 
-.event__create-map-list-link {
+.createMapListLink {
 	display: flex;
 	width: max-content;
 	align-items: center;
@@ -35,7 +35,7 @@
 	gap: var(--s-1-5);
 }
 
-.event__author {
+.author {
 	display: flex;
 	align-items: center;
 	color: var(--color-text-high);
@@ -43,7 +43,7 @@
 	gap: var(--s-1);
 }
 
-.event__results-players {
+.resultsPlayers {
 	display: flex;
 	flex-wrap: wrap;
 	padding: 0;
@@ -51,14 +51,14 @@
 	list-style: none;
 }
 
-.event__results-section {
+.resultsSection {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-1);
 	overflow-x: auto;
 }
 
-.event__results-participant-count {
+.resultsParticipantCount {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xs);
 }
diff --git a/app/styles/calendar-new.css b/app/features/calendar/calendar-new.module.css
similarity index 65%
rename from app/styles/calendar-new.css
rename to app/features/calendar/calendar-new.module.css
index fb0bcf4c7..e5d72d2f4 100644
--- a/app/styles/calendar-new.css
+++ b/app/features/calendar/calendar-new.module.css
@@ -1,12 +1,12 @@
-.calendar-new__container {
+.container {
 	max-width: 38rem;
 }
 
-.calendar-new__select {
+.select {
 	max-width: 16rem;
 }
 
-.calendar-new__badges {
+.badges {
 	width: max-content;
 	padding: var(--s-2);
 	border-radius: var(--rounded);
@@ -15,15 +15,15 @@
 	font-weight: var(--semi-bold);
 }
 
-.calendar-new__day-label {
+.dayLabel {
 	margin: 0;
 }
 
-.calendar-new__range-input {
+.rangeInput {
 	width: 4.25rem;
 }
 
-.calendar-new__avatar-preview {
+.avatarPreview {
 	width: 124px;
 	height: 124px;
 	border-radius: 100%;
diff --git a/app/features/calendar/calendar-schemas.server.ts b/app/features/calendar/calendar-schemas.server.ts
index f6e71f0d2..407bc38fa 100644
--- a/app/features/calendar/calendar-schemas.server.ts
+++ b/app/features/calendar/calendar-schemas.server.ts
@@ -1,12 +1,11 @@
 import { z } from "zod/v4";
 import * as CalendarRepository from "~/features/calendar/CalendarRepository.server";
-import { MapPool } from "~/features/map-list-generator/core/map-pool";
-import { rankedModesShort } from "~/modules/in-game-lists/modes";
-import "~/styles/calendar-new.css";
 import {
 	bracketProgressionSchema,
 	calendarEventTagSchema,
 } from "~/features/calendar/calendar-schemas";
+import { MapPool } from "~/features/map-list-generator/core/map-pool";
+import { rankedModesShort } from "~/modules/in-game-lists/modes";
 import {
 	actualNumber,
 	checkboxValueToBoolean,
diff --git a/app/features/calendar/calendar-schemas.ts b/app/features/calendar/calendar-schemas.ts
index 144a52e43..5ab5a74a4 100644
--- a/app/features/calendar/calendar-schemas.ts
+++ b/app/features/calendar/calendar-schemas.ts
@@ -3,7 +3,6 @@ import { type CalendarEventTag, TOURNAMENT_STAGE_TYPES } from "~/db/tables";
 import { TOURNAMENT } from "~/features/tournament/tournament-constants";
 import * as Progression from "~/features/tournament-bracket/core/Progression";
 import * as Swiss from "~/features/tournament-bracket/core/Swiss";
-import "~/styles/calendar-new.css";
 import { gamesShort, versusShort } from "~/modules/in-game-lists/games";
 import { modesShortWithSpecial } from "~/modules/in-game-lists/modes";
 import {
diff --git a/app/features/calendar/routes/calendar.$id.tsx b/app/features/calendar/routes/calendar.$id.tsx
index c2c7f70ed..00551f80d 100644
--- a/app/features/calendar/routes/calendar.$id.tsx
+++ b/app/features/calendar/routes/calendar.$id.tsx
@@ -31,6 +31,7 @@ import {
 } from "~/utils/urls";
 import { metaTags } from "../../../utils/remix";
 import { action } from "../actions/calendar.$id.server";
+import styles from "../calendar-event.module.css";
 import {
 	canDeleteCalendarEvent,
 	canEditCalendarEvent,
@@ -40,8 +41,6 @@ import { Tags } from "../components/Tags";
 import { loader } from "../loaders/calendar.$id.server";
 export { loader, action };
 
-import "~/styles/calendar-event.css";
-
 export const meta: MetaFunction = (args) => {
 	const data = args.data as SerializeFrom<typeof loader>;
 
@@ -88,11 +87,11 @@ export default function CalendarEventPage() {
 	return (
 		<Main className="stack lg">
 			<section className="stack sm">
-				<div className="event__times">
+				<div className={styles.times}>
 					{data.event.startTimes.map((startTime, i) => (
 						<React.Fragment key={startTime}>
 							<span
-								className={clsx("event__day", {
+								className={clsx(styles.day, {
 									hidden: data.event.startTimes.length === 1,
 								})}
 							>
@@ -202,9 +201,9 @@ function Results() {
 	);
 
 	return (
-		<Section title={t("calendar:results")} className="event__results-section">
+		<Section title={t("calendar:results")} className={styles.resultsSection}>
 			{data.event.participantCount && (
-				<div className="event__results-participant-count">
+				<div className={styles.resultsParticipantCount}>
 					{isTeamResults
 						? t("calendar:participatedCount", {
 								count: data.event.participantCount,
@@ -230,7 +229,7 @@ function Results() {
 							</td>
 							<td>{result.teamName}</td>
 							<td>
-								<ul className="event__results-players">
+								<ul className={styles.resultsPlayers}>
 									{result.players.map((player) => {
 										return (
 											<li
@@ -272,10 +271,10 @@ function MapPoolInfo() {
 
 	return (
 		<Section title={t("calendar:forms.mapPool")}>
-			<div className="event__map-pool-section">
+			<div className={styles.mapPoolSection}>
 				<MapPoolStages mapPool={mapPool} />
 				<LinkButton
-					className="event__create-map-list-link"
+					className={styles.createMapListLink}
 					to={mapsPageWithMapPool(mapPool)}
 					variant="outlined"
 					size="small"
@@ -295,7 +294,7 @@ function Description() {
 	return (
 		<Section title={t("forms.description")}>
 			<div className="stack sm">
-				<div className="event__author">
+				<div className={styles.author}>
 					<Avatar user={data.event} size="xs" />
 					{data.event.username}
 				</div>
diff --git a/app/features/calendar/routes/calendar.new.tsx b/app/features/calendar/routes/calendar.new.tsx
index f76b64af7..19022afe1 100644
--- a/app/features/calendar/routes/calendar.new.tsx
+++ b/app/features/calendar/routes/calendar.new.tsx
@@ -10,6 +10,7 @@ import { Badge } from "~/components/Badge";
 import { DateInput } from "~/components/DateInput";
 import { Divider } from "~/components/Divider";
 import { SendouButton } from "~/components/elements/Button";
+import { SendouSwitch } from "~/components/elements/Switch";
 import { FormMessage } from "~/components/FormMessage";
 import { Input } from "~/components/Input";
 import { CrossIcon } from "~/components/icons/Cross";
@@ -25,20 +26,25 @@ import * as Progression from "~/features/tournament-bracket/core/Progression";
 import { useIsMounted } from "~/hooks/useIsMounted";
 import { useTimeFormat } from "~/hooks/useTimeFormat";
 import type { RankedModeShort } from "~/modules/in-game-lists/types";
+import { useHasRole } from "~/modules/permissions/hooks";
 import {
 	databaseTimestampToDate,
 	getDateAtNextFullHour,
 	getDateWithHoursOffset,
 } from "~/utils/dates";
 import invariant from "~/utils/invariant";
+import { logger } from "~/utils/logger";
+import { metaTags } from "~/utils/remix";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 import { pathnameFromPotentialURL } from "~/utils/strings";
 import { CREATING_TOURNAMENT_DOC_LINK, FAQ_PAGE } from "~/utils/urls";
+import { action } from "../actions/calendar.new.server";
 import {
 	CALENDAR_EVENT,
 	REG_CLOSES_AT_OPTIONS,
 	type RegClosesAtOption,
 } from "../calendar-constants";
+import styles from "../calendar-new.module.css";
 import {
 	calendarEventMaxDate,
 	calendarEventMinDate,
@@ -47,12 +53,6 @@ import {
 } from "../calendar-utils";
 import { BracketProgressionSelector } from "../components/BracketProgressionSelector";
 import { Tags } from "../components/Tags";
-import "~/styles/calendar-new.css";
-import { SendouSwitch } from "~/components/elements/Switch";
-import { useHasRole } from "~/modules/permissions/hooks";
-import { logger } from "~/utils/logger";
-import { metaTags } from "~/utils/remix";
-import { action } from "../actions/calendar.new.server";
 import { loader } from "../loaders/calendar.new.server";
 export { loader, action };
 
@@ -109,7 +109,7 @@ export default function CalendarNewEventPage() {
 	}
 
 	return (
-		<Main className="calendar-new__container">
+		<Main className={styles.container}>
 			<div className="stack md">
 				<div className="stack horizontal md items-center">
 					<h1 className="text-lg">
@@ -494,7 +494,7 @@ function DatesInput({ allowMultiDate }: { allowMultiDate?: boolean }) {
 								<div key={key} className="stack horizontal sm items-center">
 									<label
 										id={`date-input-${key}-label`}
-										className="calendar-new__day-label"
+										className={styles.dayLabel}
 										htmlFor={`date-input-${key}`}
 									>
 										{t("calendar:day", {
@@ -610,7 +610,7 @@ function TagsAdder() {
 				<label htmlFor={id}>{t("calendar:forms.tags")}</label>
 				<select
 					id={id}
-					className="calendar-new__select"
+					className={styles.select}
 					onChange={(e) =>
 						setTags([...tags, e.target.value as CalendarEventTag])
 					}
@@ -665,7 +665,7 @@ function BadgesAdder() {
 				<label htmlFor={id}>{t("forms.badges")}</label>
 				<select
 					id={id}
-					className="calendar-new__select"
+					className={styles.select}
 					onChange={(e) => {
 						setBadges([
 							...badges,
@@ -684,7 +684,7 @@ function BadgesAdder() {
 				</select>
 			</div>
 			{badges.length > 0 && (
-				<div className="calendar-new__badges">
+				<div className={styles.badges}>
 					{badges.map((badge) => (
 						<div className="stack horizontal md items-center" key={badge.id}>
 							<Badge badge={badge} isAnimated size={32} />
@@ -726,7 +726,7 @@ function AvatarImageInput({
 					<img
 						src={baseEvent.tournament.ctx.logoUrl}
 						alt=""
-						className="calendar-new__avatar-preview"
+						className={styles.avatarPreview}
 					/>
 					<SendouButton
 						variant="outlined"
@@ -782,7 +782,7 @@ function AvatarImageInput({
 					<img
 						src={URL.createObjectURL(avatarImg)}
 						alt=""
-						className="calendar-new__avatar-preview"
+						className={styles.avatarPreview}
 					/>
 				</div>
 			)}
diff --git a/app/styles/front.module.css b/app/features/front-page/routes/index.module.css
similarity index 100%
rename from app/styles/front.module.css
rename to app/features/front-page/routes/index.module.css
diff --git a/app/features/front-page/routes/index.tsx b/app/features/front-page/routes/index.tsx
index 9dd157068..b42a83bad 100644
--- a/app/features/front-page/routes/index.tsx
+++ b/app/features/front-page/routes/index.tsx
@@ -30,7 +30,6 @@ import type * as Changelog from "~/features/front-page/core/Changelog.server";
 import * as Seasons from "~/features/mmr/core/Seasons";
 import { useIsMounted } from "~/hooks/useIsMounted";
 import { useTimeFormat } from "~/hooks/useTimeFormat";
-import styles from "~/styles/front.module.css";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 import {
 	BLANK_IMAGE_URL,
@@ -42,8 +41,8 @@ import {
 	SENDOUQ_PAGE,
 	sqHeaderGuyImageUrl,
 } from "~/utils/urls";
-
 import { type LeaderboardEntry, loader } from "../loaders/index.server";
+import styles from "./index.module.css";
 export { loader };
 
 export const handle: SendouRouteHandle = {
diff --git a/app/features/info/support.css b/app/features/info/routes/support.module.css
similarity index 84%
rename from app/features/info/support.css
rename to app/features/info/routes/support.module.css
index e3247c19c..f18ed526c 100644
--- a/app/features/info/support.css
+++ b/app/features/info/routes/support.module.css
@@ -1,4 +1,4 @@
-.support__table {
+.table {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr;
 	place-items: center;
@@ -6,12 +6,12 @@
 	row-gap: var(--s-2);
 }
 
-.support__checkmark {
+.checkmark {
 	color: var(--color-success);
 	width: 25px;
 }
 
-.support__popover-trigger {
+.popoverTrigger {
 	display: inline;
 	height: 1rem;
 	padding: 0;
diff --git a/app/features/info/routes/support.tsx b/app/features/info/routes/support.tsx
index 0e5af9fad..cb5a26cd6 100644
--- a/app/features/info/routes/support.tsx
+++ b/app/features/info/routes/support.tsx
@@ -12,8 +12,7 @@ import {
 } from "~/utils/urls";
 import { SendouButton } from "../../../components/elements/Button";
 import { SendouPopover } from "../../../components/elements/Popover";
-
-import "../support.css";
+import styles from "./support.module.css";
 
 export const meta: MetaFunction = (args) => {
 	return metaTags({
@@ -163,7 +162,7 @@ export default function SupportPage() {
 function SupportTable() {
 	const { t } = useTranslation();
 	return (
-		<div className="support__table">
+		<div className={styles.table}>
 			<div />
 			<div>Support</div>
 			<div>Supporter</div>
@@ -178,7 +177,7 @@ function SupportTable() {
 									{" "}
 									<SendouPopover
 										trigger={
-											<SendouButton className="support__popover-trigger">
+											<SendouButton className={styles.popoverTrigger}>
 												?
 											</SendouButton>
 										}
@@ -190,7 +189,7 @@ function SupportTable() {
 						</div>
 						<div>
 							{perk.tier === 1 ? (
-								<CheckmarkIcon className="support__checkmark" />
+								<CheckmarkIcon className={styles.checkmark} />
 							) : null}
 						</div>
 						{perk.name === "badge" ? (
@@ -204,7 +203,7 @@ function SupportTable() {
 						) : (
 							<div>
 								{perk.tier <= 2 ? (
-									<CheckmarkIcon className="support__checkmark" />
+									<CheckmarkIcon className={styles.checkmark} />
 								) : null}
 							</div>
 						)}
@@ -222,7 +221,7 @@ function SupportTable() {
 						) : (
 							<div>
 								{perk.tier <= 3 ? (
-									<CheckmarkIcon className="support__checkmark" />
+									<CheckmarkIcon className={styles.checkmark} />
 								) : null}
 							</div>
 						)}
diff --git a/app/features/leaderboards/routes/leaderboards.tsx b/app/features/leaderboards/routes/leaderboards.tsx
index 9a33fa3fd..b82451f88 100644
--- a/app/features/leaderboards/routes/leaderboards.tsx
+++ b/app/features/leaderboards/routes/leaderboards.tsx
@@ -32,7 +32,7 @@ import { loader } from "../loaders/leaderboards.server";
 import type { XPLeaderboardItem } from "../queries/XPLeaderboard.server";
 export { loader };
 
-import "../../top-search/top-search.css";
+import styles from "../../top-search/top-search.module.css";
 
 export const handle: SendouRouteHandle = {
 	i18n: ["vods"],
@@ -241,7 +241,7 @@ function OwnEntryPeek({
 	return (
 		<div>
 			{entry.firstOfTier ? (
-				<div className="placements__tier-header">
+				<div className={styles.tierHeader}>
 					<TierImage tier={entry.firstOfTier} width={32} />
 					{entry.firstOfTier.name}
 					{entry.firstOfTier.isPlus ? "+" : ""}
@@ -250,24 +250,24 @@ function OwnEntryPeek({
 			<div>
 				<Link
 					to={userSeasonsPage({ user: entry, season: data.season })}
-					className="placements__table__row"
+					className={styles.tableRow}
 				>
-					<div className="placements__table__inner-row">
-						<div className="placements__table__rank">{entry.placementRank}</div>
+					<div className={styles.tableInnerRow}>
+						<div className={styles.tableRank}>{entry.placementRank}</div>
 						<div>
 							<Avatar size="xxs" user={entry} />
 						</div>
 						{typeof entry.weaponSplId === "number" ? (
 							<WeaponImage
-								className="placements__table__weapon"
+								className={styles.tableWeapon}
 								variant="build"
 								weaponSplId={entry.weaponSplId}
 								width={32}
 								height={32}
 							/>
 						) : null}
-						<div className="placements__table__name">{entry.username}</div>
-						<div className="placements__table__power">{entry.power}</div>
+						<div className={styles.tableName}>{entry.username}</div>
+						<div className={styles.tablePower}>{entry.power}</div>
 					</div>
 				</Link>
 			</div>
@@ -294,7 +294,7 @@ function PlayersTable({
 	const data = useLoaderData<typeof loader>();
 
 	return (
-		<div className="placements__table">
+		<div className={styles.table}>
 			{entries
 				// hide normal rows that are showed in "fancy" top 10 format
 				.filter((_, i) => !showingTopTen || i > 9)
@@ -302,7 +302,7 @@ function PlayersTable({
 					return (
 						<React.Fragment key={entry.entryId}>
 							{entry.firstOfTier && showTiers ? (
-								<div className="placements__tier-header">
+								<div className={styles.tierHeader}>
 									<TierImage tier={entry.firstOfTier} width={32} />
 									{entry.firstOfTier.name}
 									{entry.firstOfTier.isPlus ? "+" : ""}
@@ -310,33 +310,29 @@ function PlayersTable({
 							) : null}
 							<Link
 								to={userSeasonsPage({ user: entry, season: data.season })}
-								className="placements__table__row"
+								className={styles.tableRow}
 							>
-								<div className="placements__table__inner-row">
-									<div className="placements__table__rank">
-										{entry.placementRank}
-									</div>
+								<div className={styles.tableInnerRow}>
+									<div className={styles.tableRank}>{entry.placementRank}</div>
 									<div>
 										<Avatar size="xxs" user={entry} />
 									</div>
 									{typeof entry.weaponSplId === "number" ? (
 										<WeaponImage
-											className="placements__table__weapon"
+											className={styles.tableWeapon}
 											variant="build"
 											weaponSplId={entry.weaponSplId}
 											width={32}
 											height={32}
 										/>
 									) : null}
-									<div className="placements__table__name">
-										{entry.username}
-									</div>
+									<div className={styles.tableName}>{entry.username}</div>
 									{entry.pendingPlusTier ? (
 										<div className="text-xs text-theme whitespace-nowrap">
 											➜ +{entry.pendingPlusTier}
 										</div>
 									) : null}
-									<div className="placements__table__power">
+									<div className={styles.tablePower}>
 										{entry.power.toFixed(2)}
 									</div>
 								</div>
@@ -362,15 +358,13 @@ function TeamTable({
 		_showQualificationDividers && isCurrentSeason && entries.length > 20;
 
 	return (
-		<div className="placements__table">
+		<div className={styles.table}>
 			{entries.map((entry, i) => {
 				return (
 					<React.Fragment key={entry.entryId}>
-						<div className="placements__table__row">
-							<div className="placements__table__inner-row">
-								<div className="placements__table__rank">
-									{entry.placementRank}
-								</div>
+						<div className={styles.tableRow}>
+							<div className={styles.tableInnerRow}>
+								<div className={styles.tableRank}>{entry.placementRank}</div>
 								{entry.team?.avatarUrl ? (
 									<Link
 										to={teamPage(entry.team.customUrl)}
@@ -379,7 +373,7 @@ function TeamTable({
 										<Avatar
 											size="xxs"
 											url={entry.team.avatarUrl}
-											className="placements__avatar"
+											className={styles.avatar}
 										/>
 									</Link>
 								) : null}
@@ -393,13 +387,15 @@ function TeamTable({
 										);
 									})}
 								</div>
-								<div className="placements__table__power">
+								<div className={styles.tablePower}>
 									{entry.power.toFixed(2)}
 								</div>
 							</div>
 						</div>
 						{i === 11 && showQualificationDividers ? (
-							<div className="placements__table__row placements__table__row__qualification">
+							<div
+								className={`${styles.tableRow} ${styles.tableRowQualification}`}
+							>
 								{t("common:leaderboard.qualification")}
 								<InfoPopover tiny>
 									{t("common:leaderboard.qualification.info")}
@@ -415,32 +411,28 @@ function TeamTable({
 
 function XPTable({ entries }: { entries: XPLeaderboardItem[] }) {
 	return (
-		<div className="placements__table">
+		<div className={styles.table}>
 			{entries.map((entry) => {
 				return (
 					<Link
 						to={topSearchPlayerPage(entry.playerId)}
 						key={entry.entryId}
-						className="placements__table__row"
+						className={styles.tableRow}
 					>
-						<div className="placements__table__inner-row">
-							<div className="placements__table__rank">
-								{entry.placementRank}
-							</div>
+						<div className={styles.tableInnerRow}>
+							<div className={styles.tableRank}>{entry.placementRank}</div>
 							{entry.discordId ? (
 								<Avatar size="xxs" user={entry as any} />
 							) : null}
 							<WeaponImage
-								className="placements__table__weapon"
+								className={styles.tableWeapon}
 								variant="build"
 								weaponSplId={entry.weaponSplId}
 								width={32}
 								height={32}
 							/>
 							<div>{entry.name}</div>
-							<div className="placements__table__power">
-								{entry.power.toFixed(1)}
-							</div>
+							<div className={styles.tablePower}>{entry.power.toFixed(1)}</div>
 						</div>
 					</Link>
 				);
diff --git a/app/features/map-planner/components/Planner.module.css b/app/features/map-planner/components/Planner.module.css
new file mode 100644
index 000000000..b5528c37e
--- /dev/null
+++ b/app/features/map-planner/components/Planner.module.css
@@ -0,0 +1,127 @@
+.topSection {
+	position: fixed;
+	z-index: 10;
+	top: 25px;
+	left: 50%;
+	display: flex;
+	align-items: center;
+	padding: var(--s-3);
+	border: 2px solid var(--color-border);
+	border-top: transparent;
+	border-radius: 0 0 var(--rounded) var(--rounded);
+	background-color: var(--color-bg);
+	gap: var(--s-4);
+	transform: translate(-50%, -42%);
+}
+
+.outlineToggle {
+	position: fixed;
+	z-index: 10;
+	top: 10%;
+	left: 5px;
+}
+
+.outlineToggleButton {
+	background-color: var(--color-bg-high);
+	color: var(--color-text);
+	font-size: var(--fonts-xs);
+	padding: var(--s-2);
+	width: 140px;
+}
+
+.outlineToggleButtonOutlined {
+	background-color: var(--color-text-accent);
+	color: var(--color-text-inverse);
+}
+
+.weaponsSection {
+	position: fixed;
+	z-index: 10;
+	top: 15%;
+	width: 150px;
+	max-height: 85vh;
+	border: 2px solid var(--color-border);
+	border-left: transparent;
+	border-radius: 0 var(--rounded) var(--rounded) 0;
+	background: var(--color-bg);
+	gap: 2px;
+	overflow-y: auto;
+}
+
+.weaponsSectionWide {
+	width: 175px;
+}
+
+.weaponsSummary {
+	background-color: var(--color-bg-high);
+	font-size: var(--fonts-sm);
+	font-weight: var(--bold);
+	padding: var(--s-2-5);
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+}
+
+.weaponsContainer {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	padding: var(--s-1-5);
+	gap: var(--s-1-5);
+}
+
+.stylePanel {
+	position: fixed;
+	z-index: 10;
+	margin-top: 50px;
+}
+
+.zoomQuickActions {
+	position: absolute;
+	z-index: 10;
+	display: block;
+}
+
+.zoomMenu {
+	position: absolute;
+	right: 0;
+}
+
+.quickActions {
+	display: flex;
+	right: 0;
+}
+
+.draggableButton {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--s-0-5);
+	border: none;
+	border-radius: var(--rounded);
+	background: transparent;
+	cursor: grab;
+	touch-action: none;
+}
+
+.draggableButton:hover {
+	background-color: var(--color-bg-high);
+}
+
+.weaponDragging {
+	opacity: 0.5;
+}
+
+.dragPreviewContainer {
+	display: block;
+	min-width: 45px;
+	min-height: 45px;
+}
+
+.dragPreview {
+	cursor: grabbing;
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
diff --git a/app/features/map-planner/components/Planner.tsx b/app/features/map-planner/components/Planner.tsx
index 5501815ce..12d5c2d7a 100644
--- a/app/features/map-planner/components/Planner.tsx
+++ b/app/features/map-planner/components/Planner.tsx
@@ -50,6 +50,7 @@ import {
 import { SendouButton } from "../../../components/elements/Button";
 import { Image } from "../../../components/Image";
 import type { StageBackgroundStyle } from "../plans-types";
+import styles from "./Planner.module.css";
 
 const DROPPED_IMAGE_SIZE_PX = 45;
 const BACKGROUND_WIDTH = 1127;
@@ -252,8 +253,8 @@ export default function Planner() {
 						width={DROPPED_IMAGE_SIZE_PX}
 						height={DROPPED_IMAGE_SIZE_PX}
 						alt=""
-						className="plans__drag-preview"
-						containerClassName="plans__drag-preview-container"
+						className={styles.dragPreview}
+						containerClassName={styles.dragPreviewContainer}
 					/>
 				) : null}
 			</DragOverlay>
@@ -264,13 +265,13 @@ export default function Planner() {
 // Formats the style panel so it can have classnames, this is needed so it can be moved below the header bar which blocks clicks (idk why this is different to the old version), also needed to format the quick actions bar and zoom menu nicely
 function CustomStylePanel(props: TLUiStylePanelProps) {
 	return (
-		<div className="plans__style-panel">
+		<div className={styles.stylePanel}>
 			<DefaultStylePanel {...props} />
-			<div className="plans__zoom-quick-actions">
-				<div className="plans__quick-actions">
+			<div className={styles.zoomQuickActions}>
+				<div className={styles.quickActions}>
 					<DefaultQuickActions />
 				</div>
-				<div className="plans__zoom-menu">
+				<div className={styles.zoomMenu}>
 					<DefaultZoomMenu />
 				</div>
 			</div>
@@ -292,13 +293,14 @@ function OutlineToggle({
 	};
 
 	return (
-		<div className="plans__outline-toggle">
+		<div className={styles.outlineToggle}>
 			<SendouButton
 				variant="minimal"
 				onPress={handleClick}
-				className={clsx("plans__outline-toggle__button", {
-					"plans__outline-toggle__button__outlined": outlined,
-				})}
+				className={clsx(
+					styles.outlineToggleButton,
+					outlined && styles.outlineToggleButtonOutlined,
+				)}
 			>
 				{outlined
 					? t("common:actions.outlined")
@@ -334,9 +336,10 @@ function DraggableWeaponButton({
 		<button
 			type="button"
 			ref={setNodeRef}
-			className={clsx("plans__draggable-button", {
-				"plans__weapon-dragging": isDragging,
-			})}
+			className={clsx(
+				styles.draggableButton,
+				isDragging && styles.weaponDragging,
+			)}
 			{...listeners}
 			{...attributes}
 		>
@@ -358,14 +361,16 @@ function WeaponImageSelector() {
 
 	return (
 		<div
-			className={clsx("plans__weapons-section scrollbar", {
-				"plans__weapons-section__wide": isWide,
-			})}
+			className={clsx(
+				styles.weaponsSection,
+				"scrollbar",
+				isWide && styles.weaponsSectionWide,
+			)}
 		>
 			{weaponCategories.map((category) => {
 				return (
 					<details key={category.name}>
-						<summary className="plans__weapons-summary">
+						<summary className={styles.weaponsSummary}>
 							<Image
 								path={weaponCategoryUrl(category.name)}
 								width={24}
@@ -374,7 +379,7 @@ function WeaponImageSelector() {
 							/>
 							{t(`common:weapon.category.${category.name}`)}
 						</summary>
-						<div className="plans__weapons-container">
+						<div className={styles.weaponsContainer}>
 							{category.weaponIds.map((weaponId) => {
 								return (
 									<DraggableWeaponButton
@@ -394,11 +399,11 @@ function WeaponImageSelector() {
 				);
 			})}
 			<details>
-				<summary className="plans__weapons-summary">
+				<summary className={styles.weaponsSummary}>
 					<Image path={subWeaponImageUrl(0)} width={24} height={24} alt="" />
 					{t("common:weapon.category.subs")}
 				</summary>
-				<div className="plans__weapons-container">
+				<div className={styles.weaponsContainer}>
 					{subWeaponIds.map((subWeaponId) => {
 						return (
 							<DraggableWeaponButton
@@ -416,7 +421,7 @@ function WeaponImageSelector() {
 				</div>
 			</details>
 			<details>
-				<summary className="plans__weapons-summary">
+				<summary className={styles.weaponsSummary}>
 					<Image
 						path={specialWeaponImageUrl(1)}
 						width={24}
@@ -425,7 +430,7 @@ function WeaponImageSelector() {
 					/>
 					{t("common:weapon.category.specials")}
 				</summary>
-				<div className="plans__weapons-container">
+				<div className={styles.weaponsContainer}>
 					{specialWeaponIds.map((specialWeaponId) => {
 						return (
 							<DraggableWeaponButton
@@ -443,11 +448,11 @@ function WeaponImageSelector() {
 				</div>
 			</details>
 			<details>
-				<summary className="plans__weapons-summary">
+				<summary className={styles.weaponsSummary}>
 					<Image path={modeImageUrl("RM")} width={24} height={24} alt="" />
 					{t("common:plans.adder.objective")}
 				</summary>
-				<div className="plans__weapons-container">
+				<div className={styles.weaponsContainer}>
 					{(["TC", "RM", "CB"] as const).map((mode) => {
 						return (
 							<DraggableWeaponButton
@@ -489,7 +494,7 @@ function StageBackgroundSelector({
 	};
 
 	return (
-		<div className="plans__top-section">
+		<div className={styles.topSection}>
 			<select
 				className="w-max"
 				value={stageId}
diff --git a/app/features/map-planner/plans.css b/app/features/map-planner/plans-global.css
similarity index 51%
rename from app/features/map-planner/plans.css
rename to app/features/map-planner/plans-global.css
index 78910effa..1b919177b 100644
--- a/app/features/map-planner/plans.css
+++ b/app/features/map-planner/plans-global.css
@@ -75,105 +75,6 @@ div {
 	background-color: var(--color-bg);
 }
 
-.plans__top-section {
-	position: fixed;
-	z-index: 10;
-	top: 25px;
-	left: 50%;
-	display: flex;
-	align-items: center;
-	padding: var(--s-3);
-	border: 2px solid var(--color-border);
-	border-top: transparent;
-	border-radius: 0 0 var(--rounded) var(--rounded);
-	background-color: var(--color-bg);
-	gap: var(--s-4);
-	transform: translate(-50%, -42%);
-}
-
-.plans__outline-toggle {
-	position: fixed;
-	z-index: 10;
-	top: 10%;
-	left: 5px;
-}
-
-.plans__outline-toggle > .plans__outline-toggle__button {
-	background-color: var(--color-bg-high);
-	color: var(--color-text);
-	font-size: var(--fonts-xs);
-	padding: var(--s-2);
-	width: 140px;
-}
-
-.plans__outline-toggle > .plans__outline-toggle__button__outlined {
-	background-color: var(--color-text-accent);
-	color: var(--color-text-inverse);
-}
-
-.plans__weapons-section {
-	position: fixed;
-	z-index: 10;
-	top: 15%;
-	width: 150px;
-	max-height: 85vh;
-	border: 2px solid var(--color-border);
-	border-left: transparent;
-	border-radius: 0 var(--rounded) var(--rounded) 0;
-	background: var(--color-bg);
-	gap: 2px;
-	overflow-y: auto;
-}
-
-.plans__weapons-section__wide {
-	width: 175px;
-}
-
-.plans__weapons-summary {
-	background-color: var(--color-bg-high);
-	font-size: var(--fonts-sm);
-	font-weight: var(--bold);
-	padding: var(--s-2-5);
-	display: flex;
-	align-items: center;
-	gap: var(--s-2);
-}
-
-.plans__weapons-container {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	padding: var(--s-1-5);
-	gap: var(--s-1-5);
-}
-
-.plans__no-img-text {
-	color: var(--color-error);
-	font-size: var(--fonts-xs);
-}
-
-.plans__style-panel {
-	position: fixed;
-	z-index: 10;
-	margin-top: 50px;
-}
-
-.plans__zoom-quick-actions {
-	position: absolute;
-	z-index: 10;
-	display: block;
-}
-
-.plans__zoom-menu {
-	position: absolute;
-	right: 0;
-}
-
-.plans__quick-actions {
-	display: flex;
-	right: 0;
-}
-
 img[src$="?outline=red"] {
 	--outline-width: 0.1rem;
 	--outline-color: crimson;
@@ -181,37 +82,3 @@ img[src$="?outline=red"] {
 		drop-shadow(0 0 var(--outline-width) var(--outline-color))
 		drop-shadow(0 0 var(--outline-width) var(--outline-color));
 }
-
-.plans__draggable-button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: var(--s-0-5);
-	border: none;
-	border-radius: var(--rounded);
-	background: transparent;
-	cursor: grab;
-	touch-action: none;
-}
-
-.plans__draggable-button:hover {
-	background-color: var(--color-bg-high);
-}
-
-.plans__weapon-dragging {
-	opacity: 0.5;
-}
-
-.plans__drag-preview-container {
-	display: block;
-	min-width: 45px;
-	min-height: 45px;
-}
-
-.plans__drag-preview {
-	cursor: grabbing;
-	display: block;
-	width: 100%;
-	height: 100%;
-	object-fit: contain;
-}
diff --git a/app/features/map-planner/routes/plans.tsx b/app/features/map-planner/routes/plans.tsx
index 64d60d241..cf839c376 100644
--- a/app/features/map-planner/routes/plans.tsx
+++ b/app/features/map-planner/routes/plans.tsx
@@ -6,7 +6,7 @@ import { metaTags } from "~/utils/remix";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 import { navIconUrl, PLANNER_URL } from "~/utils/urls";
 
-import "../plans.css";
+import "../plans-global.css";
 
 export const meta: MetaFunction = (args) => {
 	return metaTags({
diff --git a/app/features/object-damage-calculator/calculator.css b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
similarity index 79%
rename from app/features/object-damage-calculator/calculator.css
rename to app/features/object-damage-calculator/routes/object-damage-calculator.module.css
index 79ddcc981..e3044ebf2 100644
--- a/app/features/object-damage-calculator/calculator.css
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
@@ -1,30 +1,30 @@
-.object-damage__controls {
+.controls {
 	display: flex;
 	align-items: flex-start;
 	justify-content: space-between;
 }
 
-.object-damage__selects {
+.selects {
 	display: flex;
 	flex-wrap: wrap;
 	gap: var(--s-5);
 }
 
-.object-damage__selects__weapon {
+.selectsWeapon {
 	width: 16rem;
 }
 
-.object-damage__ability {
+.ability {
 	position: absolute;
 }
 
-.object-damage__ap-label {
+.apLabel {
 	display: flex;
 	justify-content: center;
 	gap: var(--s-1-5);
 }
 
-.object-damage__grid {
+.grid {
 	column-gap: var(--s-2);
 	display: grid;
 	max-height: 60vh;
@@ -34,17 +34,17 @@
 }
 
 @media screen and (min-width: 431px) {
-	.object-damage__grid {
+	.grid {
 		max-height: 70vh;
 	}
 }
 
-.object-damage__hp {
+.hp {
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 }
 
-.object-damage__table-header {
+.tableHeader {
 	align-items: center;
 	background-color: var(--color-bg-higher);
 	border-radius: var(--rounded);
@@ -65,23 +65,23 @@
 	width: 100%;
 }
 
-.object-damage__weapon-image {
+.weaponImage {
 	min-width: 24px;
 }
 
-.object-damage__distance {
+.distance {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxs);
 	margin-block-start: var(--s-0-5);
 }
 
-.object-damage__receiver-image {
+.receiverImage {
 	padding: var(--s-2);
 	border-radius: var(--rounded);
 	background-color: var(--color-bg);
 }
 
-.object-damage__table-card {
+.tableCard {
 	display: grid;
 	width: 100%;
 	height: 100%;
@@ -93,20 +93,20 @@
 	place-items: center;
 }
 
-.object-damage__table-card__results {
+.tableCardResults {
 	display: grid;
 	column-gap: var(--s-2);
 	grid-template-columns: 1fr 1fr;
 	padding-inline: var(--s-2);
 }
 
-.object-damage__abbr {
+.abbr {
 	color: var(--color-text-high);
 	font-weight: var(--bold);
 	text-decoration: none;
 }
 
-.object-damage__multiplier {
+.multiplier {
 	color: var(--color-text-accent);
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
@@ -114,14 +114,14 @@
 	margin-block-start: var(--s-2);
 }
 
-.object-damage__bottom-container {
+.bottomContainer {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
 }
 
-.object-damage__patch {
+.patch {
 	border-radius: var(--rounded);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent-high);
diff --git a/app/features/object-damage-calculator/routes/object-damage-calculator.tsx b/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
index 16f80918a..ee3556280 100644
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
@@ -1,11 +1,16 @@
+import type { MetaFunction } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
 import clsx from "clsx";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Ability } from "~/components/Ability";
+import { SendouSwitch } from "~/components/elements/Switch";
 import { Image, WeaponImage } from "~/components/Image";
 import { Label } from "~/components/Label";
 import { Main } from "~/components/Main";
+import { WeaponSelect } from "~/components/WeaponSelect";
+import type { DamageType } from "~/features/build-analyzer/analyzer-types";
+import { possibleApValues } from "~/features/build-analyzer/core/utils";
 import {
 	BIG_BUBBLER_ID,
 	BOOYAH_BOMB_ID,
@@ -19,6 +24,8 @@ import {
 	TRIPLE_SPLASHDOWN_ID,
 	WAVE_BREAKER_ID,
 } from "~/modules/in-game-lists/weapon-ids";
+import { roundToNDecimalPlaces } from "~/utils/number";
+import { metaTags } from "~/utils/remix";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 import {
 	mainWeaponImageUrl,
@@ -32,14 +39,7 @@ import {
 } from "~/utils/urls";
 import { useObjectDamage } from "../calculator-hooks";
 import type { DamageReceiver } from "../calculator-types";
-import "../calculator.css";
-import type { MetaFunction } from "@remix-run/node";
-import { SendouSwitch } from "~/components/elements/Switch";
-import { WeaponSelect } from "~/components/WeaponSelect";
-import type { DamageType } from "~/features/build-analyzer/analyzer-types";
-import { possibleApValues } from "~/features/build-analyzer/core/utils";
-import { roundToNDecimalPlaces } from "~/utils/number";
-import { metaTags } from "~/utils/remix";
+import styles from "./object-damage-calculator.module.css";
 
 export const CURRENT_PATCH = "10.1";
 
@@ -79,9 +79,9 @@ export default function ObjectDamagePage() {
 
 	return (
 		<Main className="stack lg">
-			<div className="object-damage__controls">
-				<div className="object-damage__selects">
-					<div className="object-damage__selects__weapon">
+			<div className={styles.controls}>
+				<div className={styles.selects}>
+					<div className={styles.selectsWeapon}>
 						<Label htmlFor="weapon">{t("analyzer:labels.weapon")}</Label>
 						<WeaponSelect
 							includeSubSpecial
@@ -148,11 +148,11 @@ export default function ObjectDamagePage() {
 			) : (
 				<div>{t("analyzer:noDmgData")}</div>
 			)}
-			<div className="object-damage__bottom-container">
+			<div className={styles.bottomContainer}>
 				<div className="text-lighter text-xs">
 					{t("analyzer:dmgHtdExplanation")}
 				</div>
-				<div className="object-damage__patch">
+				<div className={styles.patch}>
 					{t("analyzer:patch")} {CURRENT_PATCH}
 				</div>
 			</div>
@@ -226,14 +226,12 @@ const damageReceiverImages: Record<DamageReceiver, string> = {
 
 const damageReceiverAp: Partial<Record<DamageReceiver, JSX.Element>> = {
 	GreatBarrier_Barrier: (
-		<Ability ability="SPU" size="TINY" className="object-damage__ability" />
+		<Ability ability="SPU" size="TINY" className={styles.ability} />
 	),
 	GreatBarrier_WeakPoint: (
-		<Ability ability="SPU" size="TINY" className="object-damage__ability" />
-	),
-	Wsb_Shield: (
-		<Ability ability="BRU" size="TINY" className="object-damage__ability" />
+		<Ability ability="SPU" size="TINY" className={styles.ability} />
 	),
+	Wsb_Shield: <Ability ability="BRU" size="TINY" className={styles.ability} />,
 };
 
 function DamageReceiversGrid({
@@ -253,7 +251,7 @@ function DamageReceiversGrid({
 	return (
 		<div>
 			<div
-				className="object-damage__grid scrollbar"
+				className={`${styles.grid} scrollbar`}
 				style={{
 					gridTemplateColumns: gridTemplateColumnsValue(
 						damagesToReceivers[0]?.damages.length ?? 0,
@@ -261,13 +259,13 @@ function DamageReceiversGrid({
 				}}
 			>
 				<div
-					className="object-damage__table-header"
+					className={styles.tableHeader}
 					style={{ zIndex: "1", justifyContent: "center" }}
 				>
 					<div>
 						<Label htmlFor="ap">
 							{t("analyzer:labels.amountOf")}
-							<div className="object-damage__ap-label">
+							<div className={styles.apLabel}>
 								<Ability ability="BRU" size="TINY" />
 								<Ability ability="SPU" size="TINY" />
 							</div>
@@ -276,7 +274,7 @@ function DamageReceiversGrid({
 					<div>{children}</div>
 				</div>
 				{damagesToReceivers[0]?.damages.map((damage) => (
-					<div key={damage.id} className="object-damage__table-header">
+					<div key={damage.id} className={styles.tableHeader}>
 						{t(`weapons:${weapon.type}_${weapon.id}` as any)}
 						<div className="text-lighter stack horizontal sm justify-center items-center">
 							{weapon.type === "MAIN" ? (
@@ -285,7 +283,7 @@ function DamageReceiversGrid({
 									width={24}
 									height={24}
 									variant="build"
-									className="object-damage__weapon-image"
+									className={styles.weaponImage}
 								/>
 							) : weapon.type === "SUB" ? (
 								<Image
@@ -293,7 +291,7 @@ function DamageReceiversGrid({
 									path={subWeaponImageUrl(weapon.id)}
 									width={24}
 									height={24}
-									className="object-damage__weapon-image"
+									className={styles.weaponImage}
 								/>
 							) : (
 								<Image
@@ -301,14 +299,12 @@ function DamageReceiversGrid({
 									path={specialWeaponImageUrl(weapon.id)}
 									width={24}
 									height={24}
-									className="object-damage__weapon-image"
+									className={styles.weaponImage}
 								/>
 							)}
 						</div>
 						<div
-							className={clsx("object-damage__distance", {
-								invisible: !damage.distance,
-							})}
+							className={clsx(styles.distance, !damage.distance && "invisible")}
 						>
 							{t("analyzer:distanceInline", {
 								value: Array.isArray(damage.distance)
@@ -325,16 +321,16 @@ function DamageReceiversGrid({
 				{damagesToReceivers.map((damageToReceiver, i) => {
 					return (
 						<React.Fragment key={damageToReceiver.receiver}>
-							<div className="object-damage__table-header">
+							<div className={styles.tableHeader}>
 								<div>
 									<Label htmlFor="ap">
-										<div className="object-damage__ap-label">
+										<div className={styles.apLabel}>
 											{abilityPoints !== "0" &&
 												damageReceiverAp[damageToReceiver.receiver]}
 										</div>
 									</Label>
 									<Image
-										className="object-damage__receiver-image"
+										className={styles.receiverImage}
 										key={i}
 										alt=""
 										path={damageReceiverImages[damageToReceiver.receiver]}
@@ -342,7 +338,7 @@ function DamageReceiversGrid({
 										height={40}
 									/>
 								</div>
-								<div className="object-damage__hp">
+								<div className={styles.hp}>
 									<span data-testid={`hp-${damageToReceiver.receiver}`}>
 										{roundToNDecimalPlaces(damageToReceiver.hitPoints)}
 									</span>
@@ -351,10 +347,10 @@ function DamageReceiversGrid({
 							</div>
 							{damageToReceiver.damages.map((damage) => {
 								return (
-									<div key={damage.id} className="object-damage__table-card">
-										<div className="object-damage__table-card__results">
+									<div key={damage.id} className={styles.tableCard}>
+										<div className={styles.tableCardResults}>
 											<abbr
-												className="object-damage__abbr"
+												className={styles.abbr}
 												title={t("analyzer:stat.category.damage")}
 											>
 												{t("analyzer:damageShort")}
@@ -367,7 +363,7 @@ function DamageReceiversGrid({
 												{damage.value}
 											</div>
 											<abbr
-												className="object-damage__abbr"
+												className={styles.abbr}
 												title={t("analyzer:hitsToDestroyLong")}
 											>
 												{t("analyzer:hitsToDestroyShort")}
@@ -380,7 +376,7 @@ function DamageReceiversGrid({
 												{damage.hitsToDestroy}
 											</div>
 										</div>
-										<div className="object-damage__multiplier">
+										<div className={styles.multiplier}>
 											×{damage.multiplier}
 										</div>
 									</div>
diff --git a/app/styles/plus.css b/app/features/plus-suggestions/plus.module.css
similarity index 72%
rename from app/styles/plus.css
rename to app/features/plus-suggestions/plus.module.css
index 81e839de7..e1f443d4d 100644
--- a/app/styles/plus.css
+++ b/app/features/plus-suggestions/plus.module.css
@@ -1,102 +1,102 @@
-.plus__container {
+.container {
 	max-width: 24rem;
 	margin-inline: auto;
 }
 
-.plus__suggested-info-text {
+.suggestedInfoText {
 	color: var(--color-text-high);
 	font-size: var(--fonts-lg);
 }
 
-.plus__top-container {
+.topContainer {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 }
 
-.plus__top-container.content-centered {
+.topContainerCentered {
 	justify-content: center;
 }
 
-.plus__radios {
+.radios {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	gap: var(--s-5);
 }
 
-.plus__radio-container {
+.radioContainer {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	gap: var(--s-1);
 }
 
-.plus__radio-label {
+.radioLabel {
 	font-size: var(--fonts-sm);
 	margin-block-end: 0;
 }
 
-.plus__users-count {
+.usersCount {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxs);
 }
 
-.plus__suggested-user-info {
+.suggestedUserInfo {
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
 }
 
-.plus__comment {
+.comment {
 	white-space: pre-wrap;
 }
 
-.plus__comment-button {
+.commentButton {
 	max-width: 12rem;
 	margin-inline-start: auto;
 }
 
-.plus__view-comments-action {
+.viewCommentsAction {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 }
 
-.plus__comment-time {
+.commentTime {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxs);
 }
 
-.plus__delete-button {
+.deleteButton {
 	display: inline;
 }
 
-.plus__modal-select {
+.modalSelect {
 	max-width: 6rem;
 }
 
-.plus__modal-textarea {
+.modalTextarea {
 	width: 100% !important;
 	resize: none;
 }
 
-.plus-voting__container {
+.votingContainer {
 	max-width: 32rem;
 	margin-inline: auto;
 }
 
-.plus-voting__vote-button {
+.votingVoteButton {
 	width: 4rem;
 }
 
-.plus-voting__vote-button.downvote {
+.votingVoteButtonDownvote {
 	border-color: var(--color-error);
 	color: var(--color-error);
 	outline-color: var(--color-error);
 }
 
-.plus-voting__submit-button {
+.votingSubmitButton {
 	display: flex;
 	width: 12rem;
 	height: 2.5rem;
@@ -104,11 +104,11 @@
 	margin-inline: auto;
 }
 
-.plus-voting__progress {
+.votingProgress {
 	width: 100%;
 }
 
-.plus-voting__alert {
+.votingAlert {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -124,12 +124,12 @@
 	padding-inline: var(--s-3) var(--s-4);
 }
 
-.plus-voting__alert > svg {
+.votingAlert > svg {
 	height: 1.75rem;
 	fill: var(--color-success);
 }
 
-.plus-voting__bio-header {
+.votingBioHeader {
 	font-size: var(--fonts-lg);
 	padding-block-end: var(--s-2);
 }
diff --git a/app/features/plus-suggestions/routes/plus.suggestions.new.tsx b/app/features/plus-suggestions/routes/plus.suggestions.new.tsx
index 6ec8a69d7..aae328519 100644
--- a/app/features/plus-suggestions/routes/plus.suggestions.new.tsx
+++ b/app/features/plus-suggestions/routes/plus.suggestions.new.tsx
@@ -8,6 +8,7 @@ import { SubmitButton } from "~/components/SubmitButton";
 import { useUser } from "~/features/auth/core/user";
 import { plusSuggestionPage } from "~/utils/urls";
 import { action } from "../actions/plus.suggestions.new.server";
+import styles from "../plus.module.css";
 import { PLUS_SUGGESTION, PLUS_TIERS } from "../plus-suggestions-constants";
 import { canSuggestNewUser } from "../plus-suggestions-utils";
 import type { PlusSuggestionsLoaderData } from "./plus.suggestions";
@@ -50,7 +51,7 @@ export default function PlusNewSuggestionModalPage() {
 					<select
 						id="tier"
 						name="tier"
-						className="plus__modal-select"
+						className={styles.modalSelect}
 						value={targetPlusTier}
 						onChange={(e) => setTargetPlusTier(Number(e.target.value))}
 					>
@@ -107,7 +108,7 @@ export function CommentTextarea({ maxLength }: { maxLength: number }) {
 			<textarea
 				id="comment"
 				name="comment"
-				className="plus__modal-textarea"
+				className={styles.modalTextarea}
 				rows={4}
 				value={value}
 				onChange={handleChange}
diff --git a/app/features/plus-suggestions/routes/plus.suggestions.tsx b/app/features/plus-suggestions/routes/plus.suggestions.tsx
index e53391823..e500eade6 100644
--- a/app/features/plus-suggestions/routes/plus.suggestions.tsx
+++ b/app/features/plus-suggestions/routes/plus.suggestions.tsx
@@ -22,6 +22,7 @@ import { metaTags } from "~/utils/remix";
 import { userPage } from "~/utils/urls";
 import { action } from "../actions/plus.suggestions.server";
 import { loader } from "../loaders/plus.suggestions.server";
+import styles from "../plus.module.css";
 import {
 	canAddCommentToSuggestionFE,
 	canDeleteComment,
@@ -71,7 +72,7 @@ export default function PlusSuggestionsPage() {
 	return (
 		<>
 			<Outlet />
-			<div className="plus__container">
+			<div className={styles.container}>
 				<div className="stack md">
 					<SuggestedForInfo />
 					{searchParams.get("alert") === "true" ? (
@@ -82,14 +83,14 @@ export default function PlusSuggestionsPage() {
 					) : null}
 					<div className="stack lg">
 						<div
-							className={clsx("plus__top-container", {
-								"content-centered": !canSuggestNewUser({
+							className={clsx(styles.topContainer, {
+								[styles.topContainerCentered]: !canSuggestNewUser({
 									user,
 									suggestions: data.suggestions,
 								}),
 							})}
 						>
-							<div className="plus__radios">
+							<div className={styles.radios}>
 								{[1, 2, 3].map((tier) => {
 									const id = String(tier);
 									const suggestions = data.suggestions.filter(
@@ -97,10 +98,10 @@ export default function PlusSuggestionsPage() {
 									);
 
 									return (
-										<div key={id} className="plus__radio-container">
-											<label htmlFor={id} className="plus__radio-label">
+										<div key={id} className={styles.radioContainer}>
+											<label htmlFor={id} className={styles.radioLabel}>
 												+{tier}{" "}
-												<span className="plus__users-count">
+												<span className={styles.usersCount}>
 													({suggestions.length})
 												</span>
 											</label>
@@ -129,7 +130,7 @@ export default function PlusSuggestionsPage() {
 								);
 							})}
 							{visibleSuggestions.length === 0 ? (
-								<div className="plus__suggested-info-text text-center">
+								<div className={clsx(styles.suggestedInfoText, "text-center")}>
 									No suggestions yet
 								</div>
 							) : null}
@@ -204,7 +205,7 @@ function SuggestedUser({
 
 	return (
 		<div className="stack md">
-			<div className="plus__suggested-user-info">
+			<div className={styles.suggestedUserInfo}>
 				<Avatar user={suggestion.suggested} size="md" />
 				<h2>
 					<Link className="all-unset" to={userPage(suggestion.suggested)}>
@@ -218,7 +219,7 @@ function SuggestedUser({
 					targetPlusTier: Number(tier),
 				}) ? (
 					<LinkButton
-						className="plus__comment-button"
+						className={styles.commentButton}
 						size="small"
 						variant="outlined"
 						to={`comment/${tier}/${suggestion.suggested.id}?tier=${tier}`}
@@ -257,17 +258,17 @@ export function PlusSuggestionComments({
 }) {
 	return (
 		<details open={defaultOpen} className="w-full">
-			<summary className="plus__view-comments-action">
+			<summary className={styles.viewCommentsAction}>
 				Comments ({suggestion.entries.length})
 			</summary>
 			<div className="stack sm mt-2">
 				{suggestion.entries.map((entry) => {
 					return (
-						<fieldset key={entry.id} className="plus__comment">
+						<fieldset key={entry.id} className={styles.comment}>
 							<legend>{entry.author.username}</legend>
 							{entry.text}
 							<div className="stack horizontal xs items-center">
-								<span className="plus__comment-time">
+								<span className={styles.commentTime}>
 									<RelativeTime
 										timestamp={databaseTimestampToDate(
 											entry.createdAt,
@@ -325,7 +326,7 @@ function CommentDeleteButton({
 			}
 		>
 			<SendouButton
-				className="plus__delete-button"
+				className={styles.deleteButton}
 				icon={<TrashIcon />}
 				variant="minimal-destructive"
 				aria-label="Delete comment"
diff --git a/app/features/plus-suggestions/routes/plus.tsx b/app/features/plus-suggestions/routes/plus.tsx
index 4824a9225..4daa01875 100644
--- a/app/features/plus-suggestions/routes/plus.tsx
+++ b/app/features/plus-suggestions/routes/plus.tsx
@@ -9,7 +9,7 @@ import {
 	plusSuggestionsNewPage,
 } from "~/utils/urls";
 
-import "~/styles/plus.css";
+import "../plus.module.css";
 
 export const handle: SendouRouteHandle = {
 	navItemName: "plus",
diff --git a/app/styles/plus-history.css b/app/features/plus-voting/plus-voting-results.module.css
similarity index 72%
rename from app/styles/plus-history.css
rename to app/features/plus-voting/plus-voting-results.module.css
index d85a9ffc8..569f9ffd7 100644
--- a/app/styles/plus-history.css
+++ b/app/features/plus-voting/plus-voting-results.module.css
@@ -1,4 +1,4 @@
-.plus-history__own-scores {
+.ownScores {
 	padding: var(--s-2);
 	border-radius: var(--rounded);
 	margin: 0 auto;
@@ -10,48 +10,48 @@
 	text-align: center;
 }
 
-.plus-history__success {
+.success {
 	color: var(--color-success);
 }
 
-.plus-history__fail {
+.fail {
 	color: var(--color-error);
 }
 
-.plus-history__tier-header {
+.tierHeader {
 	display: flex;
 	flex-direction: row;
 	color: var(--color-accent);
 }
 
-.plus-history__tier-header::before,
-.plus-history__tier-header::after {
+.tierHeader::before,
+.tierHeader::after {
 	flex: 1 1;
 	border-bottom: 3px solid var(--color-accent-low);
 	margin: auto;
 	content: "";
 }
 
-.plus-history__tier-header::before {
+.tierHeader::before {
 	margin-right: 10px;
 }
 
-.plus-history__tier-header::after {
+.tierHeader::after {
 	margin-left: 10px;
 }
 
-.plus-history__passed-info-container {
+.passedInfoContainer {
 	display: flex;
 	flex-wrap: wrap;
 	gap: var(--s-2);
 }
 
-.plus-history__passed-header {
+.passedHeader {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xs);
 }
 
-.plus-history__user-status {
+.userStatus {
 	border-radius: var(--rounded);
 	background-color: var(--color-accent);
 	color: var(--color-text-inverse);
@@ -60,12 +60,12 @@
 	padding-inline: var(--s-1-5);
 }
 
-.plus-history__user-status.failed {
+.userStatusFailed {
 	background-color: var(--color-error);
 	color: var(--color-text);
 }
 
-.plus-history__suggestion-s {
+.suggestionS {
 	border-radius: 50%;
 	background-color: var(--color-bg);
 	color: var(--color-text);
diff --git a/app/features/plus-voting/routes/plus.voting.results.tsx b/app/features/plus-voting/routes/plus.voting.results.tsx
index cd9832817..df0e71ac5 100644
--- a/app/features/plus-voting/routes/plus.voting.results.tsx
+++ b/app/features/plus-voting/routes/plus.voting.results.tsx
@@ -5,10 +5,9 @@ import { metaTags } from "~/utils/remix";
 import { PLUS_SERVER_DISCORD_URL, userPage } from "~/utils/urls";
 
 import { loader } from "../loaders/plus.voting.results.server";
+import styles from "../plus-voting-results.module.css";
 export { loader };
 
-import "~/styles/plus-history.css";
-
 export const meta: MetaFunction = (args) => {
 	return metaTags({
 		title: "Plus Server voting results",
@@ -30,14 +29,14 @@ export default function PlusVotingResultsPage() {
 			</h2>
 			{data.ownScores && data.ownScores.length > 0 ? (
 				<>
-					<ul className="plus-history__own-scores stack sm">
+					<ul className={clsx(styles.ownScores, "stack sm")}>
 						{data.ownScores.map((result) => (
 							<li key={result.tier}>
 								You{" "}
 								{result.passedVoting ? (
-									<span className="plus-history__success">passed</span>
+									<span className={styles.success}>passed</span>
 								) : (
-									<span className="plus-history__fail">didn&apos;t pass</span>
+									<span className={styles.fail}>didn&apos;t pass</span>
 								)}{" "}
 								the +{result.tier} voting
 								{typeof result.score === "number"
@@ -81,25 +80,25 @@ function Results({
 			<div className="stack lg">
 				{results.map((tiersResults) => (
 					<div className="stack md" key={tiersResults.tier}>
-						<h3 className="plus-history__tier-header">
+						<h3 className={styles.tierHeader}>
 							<span>+{tiersResults.tier}</span>
 						</h3>
 						{(["passed", "failed"] as const).map((status) => (
-							<div key={status} className="plus-history__passed-info-container">
-								<h4 className="plus-history__passed-header">
+							<div key={status} className={styles.passedInfoContainer}>
+								<h4 className={styles.passedHeader}>
 									{status === "passed" ? "Passed" : "Didn't pass"} (
 									{tiersResults[status].length})
 								</h4>
 								{tiersResults[status].map((user) => (
 									<Link
 										to={userPage(user)}
-										className={clsx("plus-history__user-status", {
-											failed: status === "failed",
+										className={clsx(styles.userStatus, {
+											[styles.userStatusFailed]: status === "failed",
 										})}
 										key={user.id}
 									>
 										{user.wasSuggested ? (
-											<span className="plus-history__suggestion-s">S</span>
+											<span className={styles.suggestionS}>S</span>
 										) : null}
 										{user.username}
 									</Link>
diff --git a/app/features/plus-voting/routes/plus.voting.tsx b/app/features/plus-voting/routes/plus.voting.tsx
index 485f4c039..6b714da70 100644
--- a/app/features/plus-voting/routes/plus.voting.tsx
+++ b/app/features/plus-voting/routes/plus.voting.tsx
@@ -1,10 +1,12 @@
 import type { MetaFunction } from "@remix-run/node";
 import { Form, useLoaderData } from "@remix-run/react";
+import clsx from "clsx";
 import * as React from "react";
 import { Avatar } from "~/components/Avatar";
 import { SendouButton } from "~/components/elements/Button";
 import { CheckmarkIcon } from "~/components/icons/Checkmark";
 import { RelativeTime } from "~/components/RelativeTime";
+import styles from "~/features/plus-suggestions/plus.module.css";
 import { usePlusVoting } from "~/features/plus-voting/core";
 import { metaTags } from "~/utils/remix";
 import { assertUnreachable } from "~/utils/types";
@@ -53,7 +55,7 @@ function VotingTimingInfo(
 	return (
 		<div className="stack md">
 			{data.voted ? (
-				<div className="plus-voting__alert">
+				<div className={styles.votingAlert}>
 					<CheckmarkIcon /> You have voted
 				</div>
 			) : null}
@@ -83,7 +85,7 @@ function Voting(data: Extract<PlusVotingLoaderData, { type: "voting" }>) {
 	if (!isReady) return null;
 
 	return (
-		<div className="plus-voting__container stack md">
+		<div className={clsx(styles.votingContainer, "stack md")}>
 			<div className="stack xs">
 				<div className="text-sm text-center">
 					Voting ends{" "}
@@ -93,7 +95,7 @@ function Voting(data: Extract<PlusVotingLoaderData, { type: "voting" }>) {
 				</div>
 				{progress ? (
 					<progress
-						className="plus-voting__progress"
+						className={styles.votingProgress}
 						value={progress[0]}
 						max={progress[1]}
 						title={`Voting progress ${progress[0]} out of ${progress[1]}`}
@@ -125,14 +127,17 @@ function Voting(data: Extract<PlusVotingLoaderData, { type: "voting" }>) {
 					<h2>{currentUser.user.username}</h2>
 					<div className="stack horizontal lg">
 						<SendouButton
-							className="plus-voting__vote-button downvote"
+							className={clsx(
+								styles.votingVoteButton,
+								styles.votingVoteButtonDownvote,
+							)}
 							variant="outlined"
 							onPress={() => addVote("downvote")}
 						>
 							-1
 						</SendouButton>
 						<SendouButton
-							className="plus-voting__vote-button"
+							className={styles.votingVoteButton}
 							variant="outlined"
 							onPress={() => addVote("upvote")}
 						>
@@ -147,7 +152,7 @@ function Voting(data: Extract<PlusVotingLoaderData, { type: "voting" }>) {
 					) : null}
 					{currentUser.user.bio ? (
 						<article className="w-full">
-							<h2 className="plus-voting__bio-header">Bio</h2>
+							<h2 className={styles.votingBioHeader}>Bio</h2>
 							{currentUser.user.bio}
 						</article>
 					) : null}
@@ -155,7 +160,7 @@ function Voting(data: Extract<PlusVotingLoaderData, { type: "voting" }>) {
 			) : (
 				<Form method="post">
 					<input type="hidden" name="votes" value={JSON.stringify(votes)} />
-					<SendouButton className="plus-voting__submit-button" type="submit">
+					<SendouButton className={styles.votingSubmitButton} type="submit">
 						Submit votes
 					</SendouButton>
 				</Form>
diff --git a/app/features/sendouq-settings/q-settings.css b/app/features/sendouq-settings/routes/q.settings.module.css
similarity index 74%
rename from app/features/sendouq-settings/q-settings.css
rename to app/features/sendouq-settings/routes/q.settings.module.css
index 7b4406b2a..9b0559a37 100644
--- a/app/features/sendouq-settings/q-settings.css
+++ b/app/features/sendouq-settings/routes/q.settings.module.css
@@ -1,4 +1,4 @@
-.q-settings__radio {
+.radio {
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-xs);
 	text-transform: uppercase;
@@ -12,25 +12,25 @@
 	cursor: pointer;
 }
 
-.q-settings__radio__emoji {
+.radioEmoji {
 	filter: grayscale(100%);
 	transition: all 0.2s;
 }
 
-.q-settings__radio__checked {
+.radioChecked {
 	color: var(--color-text);
 	outline: 2px solid var(--color-bg-higher);
 }
 
-.q-settings__radio__checked .q-settings__radio__emoji {
+.radioChecked .radioEmoji {
 	filter: grayscale(0%);
 }
 
-.q-settings__radio:hover .q-settings__radio__emoji {
+.radio:hover .radioEmoji {
 	scale: 1.1;
 }
 
-.q-settings__summary {
+.summary {
 	padding: var(--s-3);
 	border-radius: var(--rounded);
 	background-color: var(--color-bg-high);
@@ -40,11 +40,11 @@
 	position: relative;
 }
 
-.q-settings__summary > div {
+.summary > div {
 	display: inline-flex;
 }
 
-.q-settings__summary svg {
+.summary svg {
 	width: 24px;
 	color: var(--color-text-accent);
 	position: absolute;
@@ -52,21 +52,21 @@
 	top: 14px;
 }
 
-.q-settings__weapon-pool-select-container {
+.weaponPoolSelectContainer {
 	width: 250px;
 	height: 50px;
 }
 
-.q-settings__volume-slider-icon {
+.volumeSliderIcon {
 	width: 16px;
 	height: 16px;
 }
 
-/* 
+/*
 Necessary because default style adds padding, making the slider not go from 0 to 1 visually
 Changing the default style would affect all other input elements, so we need to override it
 */
-.q-settings__volume-slider-input {
+.volumeSliderInput {
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	border: 0 !important;
diff --git a/app/features/sendouq-settings/routes/q.settings.tsx b/app/features/sendouq-settings/routes/q.settings.tsx
index 87c0c9ec3..a27807da7 100644
--- a/app/features/sendouq-settings/routes/q.settings.tsx
+++ b/app/features/sendouq-settings/routes/q.settings.tsx
@@ -50,7 +50,7 @@ import {
 } from "../q-settings-constants";
 export { loader, action };
 
-import "../q-settings.css";
+import styles from "./q.settings.module.css";
 
 export const handle: SendouRouteHandle = {
 	i18n: ["q"],
@@ -153,7 +153,7 @@ function MapPicker() {
 
 	return (
 		<details>
-			<summary className="q-settings__summary">
+			<summary className={styles.summary}>
 				<div>
 					<span>{t("q:settings.maps.header")}</span> <MapIcon />
 				</div>
@@ -257,7 +257,7 @@ function VoiceChat() {
 
 	return (
 		<details>
-			<summary className="q-settings__summary">
+			<summary className={styles.summary}>
 				<div>
 					<span>{t("q:settings.voiceChat.header")}</span>{" "}
 					<MicrophoneFilledIcon />
@@ -388,7 +388,7 @@ function WeaponPool() {
 
 	return (
 		<details>
-			<summary className="q-settings__summary">
+			<summary className={styles.summary}>
 				<div>
 					<span>{t("q:settings.weaponPool.header")}</span> <PuzzleIcon />
 				</div>
@@ -399,7 +399,7 @@ function WeaponPool() {
 					name="weaponPool"
 					value={JSON.stringify(weapons)}
 				/>
-				<div className="q-settings__weapon-pool-select-container">
+				<div className={styles.weaponPoolSelectContainer}>
 					{weapons.length < SENDOUQ_WEAPON_POOL_MAX_SIZE ? (
 						<WeaponSelect
 							onChange={(weaponSplId) => {
@@ -491,7 +491,7 @@ function Sounds() {
 
 	return (
 		<details>
-			<summary className="q-settings__summary">
+			<summary className={styles.summary}>
 				<div>
 					<span>{t("q:settings.sounds.header")}</span> <SpeakerFilledIcon />
 				</div>
@@ -591,9 +591,9 @@ function SoundSlider() {
 
 	return (
 		<div className="stack horizontal xs items-center ml-2-5">
-			<SpeakerFilledIcon className="q-settings__volume-slider-icon" />
+			<SpeakerFilledIcon className={styles.volumeSliderIcon} />
 			<input
-				className="q-settings__volume-slider-input"
+				className={styles.volumeSliderInput}
 				type="range"
 				value={volume}
 				onChange={changeVolume}
@@ -610,7 +610,7 @@ function TrustedUsers() {
 
 	return (
 		<details>
-			<summary className="q-settings__summary">
+			<summary className={styles.summary}>
 				<span>{t("q:settings.trusted.header")}</span> <UsersIcon />
 			</summary>
 			<div className="mb-4">
@@ -684,7 +684,7 @@ function Misc() {
 
 	return (
 		<details>
-			<summary className="q-settings__summary">
+			<summary className={styles.summary}>
 				<div>{t("q:settings.misc.header")}</div>
 			</summary>
 			<fetcher.Form method="post" className="mb-4 ml-2-5 stack sm">
diff --git a/app/features/sendouq/components/MemberAdder.tsx b/app/features/sendouq/components/MemberAdder.tsx
index e0289a509..2b0fc176a 100644
--- a/app/features/sendouq/components/MemberAdder.tsx
+++ b/app/features/sendouq/components/MemberAdder.tsx
@@ -51,12 +51,7 @@ export function MemberAdder({
 			<div>
 				<label htmlFor="invite">{t("q:looking.groups.adder.inviteLink")}</label>
 				<div className="stack horizontal sm items-center">
-					<input
-						type="text"
-						value={inviteLink}
-						readOnly
-						id="invite"
-					/>
+					<input type="text" value={inviteLink} readOnly id="invite" />
 					<SendouButton
 						variant={copySuccess ? "outlined-success" : "outlined"}
 						onPress={() => copyToClipboard(inviteLink)}
diff --git a/app/features/team/routes/t.$customUrl.edit.tsx b/app/features/team/routes/t.$customUrl.edit.tsx
index 5767bc7d6..64feb3264 100644
--- a/app/features/team/routes/t.$customUrl.edit.tsx
+++ b/app/features/team/routes/t.$customUrl.edit.tsx
@@ -9,17 +9,17 @@ import { FormMessage } from "~/components/FormMessage";
 import { FormWithConfirm } from "~/components/FormWithConfirm";
 import { Input } from "~/components/Input";
 import { Label } from "~/components/Label";
-import { Main } from "~/components/Main";
+import { Main, mainStyles } from "~/components/Main";
 import { SubmitButton } from "~/components/SubmitButton";
 import { useUser } from "~/features/auth/core/user";
-import { uploadImagePage } from "~/utils/urls";
-import { TEAM } from "../team-constants";
-import { canAddCustomizedColors, isTeamOwner } from "../team-utils";
-import "../team.css";
 import { TeamGoBackButton } from "~/features/team/components/TeamGoBackButton";
 import { metaTags } from "~/utils/remix";
+import { uploadImagePage } from "~/utils/urls";
 import { action } from "../actions/t.$customUrl.edit.server";
 import { loader } from "../loaders/t.$customUrl.edit.server";
+import styles from "../team.module.css";
+import { TEAM } from "../team-constants";
+import { canAddCustomizedColors, isTeamOwner } from "../team-utils";
 export { action, loader };
 
 export const meta: MetaFunction = (args) => {
@@ -37,7 +37,7 @@ export default function EditTeamPage() {
 	return (
 		<Main className="stack lg">
 			<TeamGoBackButton />
-			<div className="half-width">
+			<div className={mainStyles.narrow}>
 				{isTeamOwner({ team, user }) ? (
 					<FormWithConfirm
 						dialogHeading={t("team:deleteTeam.header", { teamName: team.name })}
@@ -83,7 +83,7 @@ function ImageUploadLinks() {
 	return (
 		<div>
 			<Label>{t("team:forms.fields.uploadImages")}</Label>
-			<ol className="team__image-links-list">
+			<ol className={styles.imageLinksList}>
 				<li>
 					<Link
 						to={uploadImagePage({
@@ -116,7 +116,7 @@ function ImageRemoveButtons() {
 	return team.avatarUrl || team.bannerUrl ? (
 		<div>
 			<Label>{t("team:forms.fields.removeImages")}</Label>
-			<ol className="team__image-links-list">
+			<ol className={styles.imageLinksList}>
 				{team.avatarUrl ? (
 					<li>
 						<FormWithConfirm
diff --git a/app/features/team/routes/t.$customUrl.index.tsx b/app/features/team/routes/t.$customUrl.index.tsx
index 925f8b4be..17b22df55 100644
--- a/app/features/team/routes/t.$customUrl.index.tsx
+++ b/app/features/team/routes/t.$customUrl.index.tsx
@@ -11,19 +11,19 @@ import { UsersIcon } from "~/components/icons/Users";
 import { Placement } from "~/components/Placement";
 import { SubmitButton } from "~/components/SubmitButton";
 import { useUser } from "~/features/auth/core/user";
+import type { TeamLoaderData } from "~/features/team/loaders/t.$customUrl.server";
 import { useHasRole } from "~/modules/permissions/hooks";
+import invariant from "~/utils/invariant";
 import { editTeamPage, manageTeamRosterPage, userPage } from "~/utils/urls";
+import { action } from "../actions/t.$customUrl.index.server";
+import type * as TeamRepository from "../TeamRepository.server";
+import styles from "../team.module.css";
 import {
 	isTeamManager,
 	isTeamMember,
 	isTeamOwner,
 	resolveNewOwner,
 } from "../team-utils";
-import "../team.css";
-import type { TeamLoaderData } from "~/features/team/loaders/t.$customUrl.server";
-import invariant from "~/utils/invariant";
-import { action } from "../actions/t.$customUrl.index.server";
-import type * as TeamRepository from "../TeamRepository.server";
 export { action };
 
 export default function TeamIndexPage() {
@@ -70,7 +70,7 @@ function ActionButtons() {
 	);
 
 	return (
-		<div className="team__action-buttons">
+		<div className={styles.actionButtons}>
 			{isTeamMember({ user, team }) && !isMainTeam ? (
 				<ChangeMainTeamButton />
 			) : null}
@@ -150,9 +150,9 @@ function ResultsBanner({
 	results: NonNullable<TeamLoaderData["results"]>;
 }) {
 	return (
-		<Link className="team__results" to="results">
+		<Link className={styles.results} to="results">
 			<div>View {results.count} results</div>
-			<ul className="team__results__placements">
+			<ul className={styles.resultsPlacements}>
 				{results.placements.map(({ placement, count }) => {
 					return (
 						<li key={placement}>
@@ -176,23 +176,23 @@ function MemberRow({
 
 	return (
 		<div
-			className="team__member"
+			className={styles.member}
 			data-testid={member.isOwner ? `member-owner-${member.id}` : undefined}
 		>
 			{member.role ? (
 				<span
-					className="team__member__role"
+					className={styles.memberRole}
 					data-testid={`member-row-role-${number}`}
 				>
 					{t(`team:roles.${member.role}`)}
 				</span>
 			) : null}
-			<div className="team__member__section">
+			<div className={styles.memberSection}>
 				<Link
 					to={userPage(member)}
-					className="team__member__avatar-name-container"
+					className={styles.memberAvatarNameContainer}
 				>
-					<div className="team__member__avatar">
+					<div className={styles.memberAvatar}>
 						<Avatar user={member} size="md" />
 					</div>
 					{member.username}
@@ -221,11 +221,11 @@ function MobileMemberCard({
 	const { t } = useTranslation(["team"]);
 
 	return (
-		<div className="team__member-card__container">
-			<div className="team__member-card">
+		<div className={styles.memberCardContainer}>
+			<div className={styles.memberCard}>
 				<Link to={userPage(member)} className="stack items-center">
 					<Avatar user={member} size="md" />
-					<div className="team__member-card__name">{member.username}</div>
+					<div className={styles.memberCardName}>{member.username}</div>
 				</Link>
 				{member.weapons.length > 0 ? (
 					<div className="stack horizontal md">
@@ -242,7 +242,7 @@ function MobileMemberCard({
 				) : null}
 			</div>
 			{member.role ? (
-				<span className="team__member__role__mobile">
+				<span className={styles.memberRoleMobile}>
 					{t(`team:roles.${member.role}`)}
 				</span>
 			) : null}
diff --git a/app/features/team/routes/t.$customUrl.join.tsx b/app/features/team/routes/t.$customUrl.join.tsx
index 5949e49bd..97a4b6f2b 100644
--- a/app/features/team/routes/t.$customUrl.join.tsx
+++ b/app/features/team/routes/t.$customUrl.join.tsx
@@ -3,10 +3,9 @@ import { useTranslation } from "react-i18next";
 import { Main } from "~/components/Main";
 import { SubmitButton } from "~/components/SubmitButton";
 import type { SendouRouteHandle } from "~/utils/remix.server";
-import "../team.css";
-
 import { action } from "../actions/t.$customUrl.join.server";
 import { loader } from "../loaders/t.$customUrl.join.server";
+import styles from "../team.module.css";
 export { loader, action };
 
 export const handle: SendouRouteHandle = {
@@ -28,7 +27,7 @@ export default function JoinTeamPage() {
 
 	return (
 		<Main>
-			<Form method="post" className="team__invite-container">
+			<Form method="post" className={styles.inviteContainer}>
 				<div className="text-center">
 					{t(`team:validation.${validation}`, { teamName })}
 				</div>
diff --git a/app/features/team/routes/t.$customUrl.roster.tsx b/app/features/team/routes/t.$customUrl.roster.tsx
index 84b487571..6087f44a5 100644
--- a/app/features/team/routes/t.$customUrl.roster.tsx
+++ b/app/features/team/routes/t.$customUrl.roster.tsx
@@ -13,16 +13,15 @@ import { TrashIcon } from "~/components/icons/Trash";
 import { Main } from "~/components/Main";
 import { SubmitButton } from "~/components/SubmitButton";
 import { useUser } from "~/features/auth/core/user";
-import { joinTeamPage } from "~/utils/urls";
-import type * as TeamRepository from "../TeamRepository.server";
-import { TEAM_MEMBER_ROLES } from "../team-constants";
-import { isTeamFull } from "../team-utils";
-import "../team.css";
 import { TeamGoBackButton } from "~/features/team/components/TeamGoBackButton";
 import { metaTags } from "~/utils/remix";
-
+import { joinTeamPage } from "~/utils/urls";
 import { action } from "../actions/t.$customUrl.roster.server";
 import { loader } from "../loaders/t.$customUrl.roster.server";
+import type * as TeamRepository from "../TeamRepository.server";
+import styles from "../team.module.css";
+import { TEAM_MEMBER_ROLES } from "../team-constants";
+import { isTeamFull } from "../team-utils";
 export { loader, action };
 
 export const meta: MetaFunction = (args) => {
@@ -111,7 +110,7 @@ function MemberActions() {
 		<div className="stack md">
 			<h2 className="text-lg">{t("team:roster.members.header")}</h2>
 
-			<div className="team__roster__members">
+			<div className={styles.rosterMembers}>
 				{team.members.map((member, i) => (
 					<MemberRow key={member.id} member={member} number={i} />
 				))}
@@ -152,10 +151,7 @@ function MemberRow({
 
 	return (
 		<React.Fragment key={member.id}>
-			<div
-				className="team__roster__members__member"
-				data-testid={`member-row-${number}`}
-			>
+			<div className={styles.rosterMember} data-testid={`member-row-${number}`}>
 				{member.username}
 			</div>
 			<div>
@@ -229,7 +225,7 @@ function MemberRow({
 					</SendouButton>
 				</FormWithConfirm>
 			</div>
-			<hr className="team__roster__separator" />
+			<hr className={styles.rosterSeparator} />
 		</React.Fragment>
 	);
 }
diff --git a/app/features/team/routes/t.$customUrl.tsx b/app/features/team/routes/t.$customUrl.tsx
index ce4901834..8905a1766 100644
--- a/app/features/team/routes/t.$customUrl.tsx
+++ b/app/features/team/routes/t.$customUrl.tsx
@@ -11,7 +11,7 @@ import { bskyUrl, navIconUrl, TEAM_SEARCH_PAGE, teamPage } from "~/utils/urls";
 import { loader } from "../loaders/t.$customUrl.server";
 export { loader };
 
-import "../team.css";
+import styles from "../team.module.css";
 
 export const meta: MetaFunction<typeof loader> = (args) => {
 	if (!args.data) return [];
@@ -72,9 +72,10 @@ function TeamBanner() {
 	return (
 		<>
 			<div
-				className={clsx("team__banner", {
-					team__banner__placeholder: !team.bannerUrl,
-				})}
+				className={clsx(
+					styles.banner,
+					!team.bannerUrl && styles.bannerPlaceholder,
+				)}
 				style={{
 					"--team-banner-img": team.bannerUrl
 						? `url("${team.bannerUrl}")`
@@ -82,13 +83,13 @@ function TeamBanner() {
 				}}
 			>
 				{team.avatarUrl ? (
-					<div className="team__banner__avatar">
+					<div className={styles.bannerAvatar}>
 						<div>
 							<img src={team.avatarUrl} alt="" />
 						</div>
 					</div>
 				) : null}
-				<div className="team__banner__flags">
+				<div className={styles.bannerFlags}>
 					{R.unique(
 						team.members
 							.map((member) => member.country)
@@ -97,16 +98,16 @@ function TeamBanner() {
 						return <Flag key={country} countryCode={country} />;
 					})}
 				</div>
-				<div className="team__banner__name">
+				<div className={styles.bannerName}>
 					{team.tag ? (
-						<div className="team__banner__tag team__banner__tag__desktop">
+						<div className={`${styles.bannerTag} ${styles.bannerTagDesktop}`}>
 							{team.tag}
 						</div>
 					) : null}
 					{team.name} <BskyLink />
 				</div>
 			</div>
-			{team.avatarUrl ? <div className="team__banner__avatar__spacer" /> : null}
+			{team.avatarUrl ? <div className={styles.bannerAvatarSpacer} /> : null}
 		</>
 	);
 }
@@ -115,7 +116,7 @@ function MobileTeamNameCountry() {
 	const { team } = useLoaderData<typeof loader>();
 
 	return (
-		<div className="team__mobile-name-country">
+		<div className={styles.mobileNameCountry}>
 			<div className="stack horizontal sm">
 				{R.unique(
 					team.members
@@ -125,12 +126,12 @@ function MobileTeamNameCountry() {
 					return <Flag key={country} countryCode={country} tiny />;
 				})}
 			</div>
-			<div className="team__mobile-team-name">
+			<div className={styles.mobileTeamName}>
 				{team.name}
 				<BskyLink />
 			</div>
 			{team.tag ? (
-				<div className="team__banner__tag team__banner__tag__mobile">
+				<div className={`${styles.bannerTag} ${styles.bannerTagMobile}`}>
 					{team.tag}
 				</div>
 			) : null}
@@ -145,7 +146,7 @@ function BskyLink() {
 
 	return (
 		<a
-			className="team__bsky-link"
+			className={styles.bskyLink}
 			data-testid="bsky-link"
 			href={bskyUrl(team.bsky)}
 			target="_blank"
diff --git a/app/features/team/routes/t.tsx b/app/features/team/routes/t.tsx
index 84621c717..dc604da7f 100644
--- a/app/features/team/routes/t.tsx
+++ b/app/features/team/routes/t.tsx
@@ -27,7 +27,7 @@ import { loader } from "../loaders/t.server";
 import { TEAM, TEAMS_PER_PAGE } from "../team-constants";
 export { loader, action };
 
-import "../team.css";
+import styles from "../team.module.css";
 
 export const meta: MetaFunction = (args) => {
 	return metaTags({
@@ -99,8 +99,8 @@ export default function TeamSearchPage() {
 			<NewTeamDialog />
 			<div className="stack sm horizontal justify-between">
 				<Input
-					className="team-search__input"
-					icon={<SearchIcon className="team-search__icon" />}
+					className={styles.searchInput}
+					icon={<SearchIcon className={styles.searchIcon} />}
 					value={inputValue}
 					onChange={(e) => setInputValue(e.target.value)}
 					placeholder={t("team:teamSearch.placeholder")}
@@ -113,7 +113,7 @@ export default function TeamSearchPage() {
 					<Link
 						key={team.customUrl}
 						to={teamPage(team.customUrl)}
-						className="team-search__team"
+						className={styles.searchTeam}
 					>
 						{team.avatarUrl ? (
 							<img
@@ -125,21 +125,18 @@ export default function TeamSearchPage() {
 								loading="lazy"
 							/>
 						) : (
-							<div className="team-search__team__avatar-placeholder">
+							<div className={styles.searchTeamAvatarPlaceholder}>
 								{team.name[0]}
 							</div>
 						)}
 						<div>
-							<div
-								className="team-search__team__name"
-								data-testid={`team-${i}`}
-							>
+							<div className={styles.searchTeamName} data-testid={`team-${i}`}>
 								{team.name}
 								{team.tag ? (
-									<span className="team-search__team__tag">{team.tag}</span>
+									<span className={styles.searchTeamTag}>{team.tag}</span>
 								) : null}
 							</div>
-							<div className="team-search__team__members">
+							<div className={styles.searchTeamMembers}>
 								{team.members.length === 1
 									? team.members[0].username
 									: new Intl.ListFormat(i18n.language, {
diff --git a/app/features/team/team.css b/app/features/team/team.module.css
similarity index 78%
rename from app/features/team/team.css
rename to app/features/team/team.module.css
index 1270bcc8f..70ebfbed9 100644
--- a/app/features/team/team.css
+++ b/app/features/team/team.module.css
@@ -1,34 +1,34 @@
-.team-search__input {
+.searchInput {
 	height: 40px !important;
 	font-size: var(--fonts-lg);
 	max-width: 240px;
 }
 
-.team-search__icon {
+.searchIcon {
 	height: 25px;
 	margin: auto;
 	margin-right: 15px;
 }
 
-.team-search__team {
+.searchTeam {
 	display: flex;
 	color: var(--color-text);
 	gap: var(--s-3);
 	align-items: center;
 }
 
-.team-search__team__name {
+.searchTeamName {
 	font-size: var(--fonts-xl);
 	font-weight: var(--bold);
 	word-break: break-word;
 }
 
-.team-search__team__members {
+.searchTeamMembers {
 	font-size: var(--fonts-xs);
 	color: var(--color-text-high);
 }
 
-.team-search__team__tag {
+.searchTeamTag {
 	font-size: var(--fonts-xs);
 	color: var(--color-accent);
 	padding: var(--s-0-5) var(--s-1);
@@ -37,7 +37,7 @@
 	font-weight: var(--bold);
 }
 
-.team-search__team__avatar-placeholder {
+.searchTeamAvatarPlaceholder {
 	height: 64px;
 	min-width: 64px;
 	display: grid;
@@ -47,7 +47,7 @@
 	background-color: var(--color-bg-high);
 }
 
-.team__banner {
+.banner {
 	background-image:
 		linear-gradient(
 			to bottom,
@@ -64,19 +64,19 @@
 	border-radius: var(--rounded);
 }
 
-.team__banner__placeholder {
+.bannerPlaceholder {
 	height: 6rem;
 	background-color: var(--color-accent-low);
 }
 
-.team__banner__flags {
+.bannerFlags {
 	grid-area: flags;
 	margin-top: -5px;
 	display: none;
 	column-gap: var(--s-4);
 }
 
-.team__banner__name {
+.bannerName {
 	grid-area: name;
 	align-self: flex-end;
 	justify-self: flex-end;
@@ -90,7 +90,7 @@
 	position: relative;
 }
 
-.team__bsky-link {
+.bskyLink {
 	padding: var(--s-1);
 	border: 1px solid;
 	border-radius: 50%;
@@ -102,21 +102,21 @@
 	place-items: center;
 }
 
-.team__bsky-link > svg {
+.bskyLink > svg {
 	width: 0.9rem;
 }
 
-.team__bsky-link path {
+.bskyLink path {
 	fill: #1285fe;
 }
 
-.team__banner__avatar {
+.bannerAvatar {
 	grid-area: avatar;
 	align-self: flex-end;
 	margin-bottom: -110px;
 }
 
-.team__banner__avatar > div {
+.bannerAvatar > div {
 	padding: var(--s-2);
 	background-color: var(--color-bg);
 	border-radius: 100%;
@@ -125,11 +125,11 @@
 	width: 7rem;
 }
 
-.team__banner__avatar__spacer {
+.bannerAvatarSpacer {
 	height: 4rem;
 }
 
-.team__mobile-name-country {
+.mobileNameCountry {
 	display: flex;
 	font-size: var(--fonts-xl);
 	align-items: center;
@@ -138,13 +138,13 @@
 	line-height: 1.5;
 }
 
-.team__mobile-team-name {
+.mobileTeamName {
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
 }
 
-.team__banner__tag {
+.bannerTag {
 	font-size: var(--fonts-sm);
 	background-color: var(--color-accent-low);
 	color: var(--color-accent);
@@ -152,30 +152,30 @@
 	border-radius: var(--rounded);
 }
 
-.team__banner__tag__desktop {
+.bannerTagDesktop {
 	position: absolute;
 	bottom: 41px;
 	right: 0;
 	display: none;
 }
 
-.team__banner__tag__mobile {
+.bannerTagMobile {
 	font-size: var(--fonts-xs);
 	padding: var(--s-0-5) var(--s-1);
 	margin-block: var(--s-1);
 }
 
-.team__banner__avatar img {
+.bannerAvatar img {
 	border-radius: 100%;
 }
 
-.team__badges {
+.badges {
 	justify-content: flex-end;
 	display: flex;
 	gap: var(--s-3);
 }
 
-.team__badges > div {
+.badges > div {
 	background-color: var(--color-accent-low);
 	border-radius: var(--rounded);
 	font-size: var(--fonts-xs);
@@ -187,14 +187,14 @@
 	height: 1.5rem;
 }
 
-.team__action-buttons {
+.actionButtons {
 	display: flex;
 	justify-content: center;
 	gap: var(--s-2);
 	flex-wrap: wrap;
 }
 
-.team__results {
+.results {
 	background-color: var(--color-bg-higher);
 	max-width: 32rem;
 	margin: 0 auto;
@@ -209,24 +209,24 @@
 	white-space: nowrap;
 }
 
-.team__results__placements {
+.resultsPlacements {
 	list-style: none;
 	display: flex;
 	gap: var(--s-4);
 }
 
-.team__results__placements > li {
+.resultsPlacements > li {
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
 }
 
-.team__member {
+.member {
 	display: none;
 	flex-direction: column;
 }
 
-.team__member__section {
+.memberSection {
 	background-color: var(--color-bg-high);
 	border-radius: var(--rounded);
 	padding: var(--s-2) var(--s-4);
@@ -238,7 +238,7 @@
 	height: 4.5rem;
 }
 
-.team__member__avatar-name-container {
+.memberAvatarNameContainer {
 	display: flex;
 	align-items: center;
 	gap: var(--s-4);
@@ -246,13 +246,13 @@
 	font-weight: var(--bold);
 }
 
-.team__member__avatar {
+.memberAvatar {
 	background-color: var(--color-bg);
 	padding: var(--s-2);
 	border-radius: 100%;
 }
 
-.team__member__role {
+.memberRole {
 	margin-left: auto;
 	font-size: var(--fonts-sm);
 	color: var(--color-text-high);
@@ -260,12 +260,12 @@
 	font-weight: var(--bold);
 }
 
-.team__member__role__mobile {
+.memberRoleMobile {
 	color: var(--color-text-high);
 	font-weight: var(--bold);
 }
 
-.team__member-card__container {
+.memberCardContainer {
 	width: 16rem;
 	margin: 0 auto;
 	display: flex;
@@ -273,7 +273,7 @@
 	flex-direction: column;
 }
 
-.team__member-card {
+.memberCard {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -285,13 +285,13 @@
 	font-weight: var(--bold);
 }
 
-.team__member-card__name {
+.memberCardName {
 	color: var(--color-text);
 	font-weight: var(--bold);
 	margin-block-start: var(--s-2);
 }
 
-.team__roster__members {
+.rosterMembers {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	gap: var(--s-4);
@@ -299,18 +299,18 @@
 	max-width: max-content;
 }
 
-.team__roster__members__member {
+.rosterMember {
 	justify-self: flex-start;
 	font-weight: var(--bold);
 	font-size: var(--fonts-sm);
 }
 
-.team__roster__separator {
+.rosterSeparator {
 	grid-column: 1 / 3;
 	width: 100%;
 }
 
-.team__invite-container {
+.inviteContainer {
 	margin-block-start: var(--s-14);
 	display: flex;
 	flex-direction: column;
@@ -318,7 +318,7 @@
 	align-items: center;
 }
 
-.team__image-links-list {
+.imageLinksList {
 	display: flex;
 	gap: var(--s-8);
 	padding-left: var(--s-4);
@@ -326,50 +326,50 @@
 }
 
 @media screen and (min-width: 640px) {
-	.team__banner__flags {
+	.bannerFlags {
 		display: flex;
 	}
-	.team__banner__name {
+	.bannerName {
 		display: flex;
 	}
-	.team__banner__tag__desktop {
+	.bannerTagDesktop {
 		display: initial;
 	}
 
-	.team__banner__avatar > div {
+	.bannerAvatar > div {
 		width: 10rem;
 	}
 
-	.team__banner__avatar {
+	.bannerAvatar {
 		margin-left: var(--s-2);
 		margin-bottom: -90px;
 	}
 
-	.team__mobile-name-country {
+	.mobileNameCountry {
 		display: none;
 	}
 
-	.team__member {
+	.member {
 		display: flex;
 	}
 
-	.team__member-card__container {
+	.memberCardContainer {
 		display: none;
 	}
 
-	.team__roster__members {
+	.rosterMembers {
 		grid-template-columns: 1fr 1fr max-content max-content;
 	}
 
-	.team__roster__separator {
+	.rosterSeparator {
 		display: none;
 	}
 
-	.team__banner__placeholder {
+	.bannerPlaceholder {
 		height: 12rem;
 	}
 
-	.team__action-buttons {
+	.actionButtons {
 		justify-content: flex-end;
 	}
 }
diff --git a/app/features/top-search/components/Placements.tsx b/app/features/top-search/components/Placements.tsx
index f8eaca9c0..bd0c7cc06 100644
--- a/app/features/top-search/components/Placements.tsx
+++ b/app/features/top-search/components/Placements.tsx
@@ -7,6 +7,7 @@ import {
 	topSearchPage,
 	topSearchPlayerPage,
 } from "~/utils/urls";
+import styles from "../top-search.module.css";
 import { monthYearToSpan } from "../top-search-utils";
 import type * as XRankPlacementRepository from "../XRankPlacementRepository.server";
 
@@ -25,7 +26,7 @@ export function PlacementsTable({
 	const { t } = useTranslation(["game-misc"]);
 
 	return (
-		<div className="placements__table">
+		<div className={styles.table}>
 			{placements.map((placement, i) => (
 				<Link
 					to={
@@ -34,14 +35,14 @@ export function PlacementsTable({
 							: topSearchPlayerPage(placement.playerId)
 					}
 					key={placement.id}
-					className="placements__table__row"
+					className={styles.tableRow}
 					data-testid={`placement-row-${i}`}
 				>
-					<div className="placements__table__inner-row">
-						<div className="placements__table__rank">{placement.rank}</div>
+					<div className={styles.tableInnerRow}>
+						<div className={styles.tableRank}>{placement.rank}</div>
 						{type === "MODE_INFO" ? (
 							<>
-								<div className="placements__table__mode">
+								<div className={styles.tableMode}>
 									<Image
 										alt={
 											placement.region === "WEST"
@@ -57,7 +58,7 @@ export function PlacementsTable({
 									/>
 								</div>
 
-								<div className="placements__table__mode">
+								<div className={styles.tableMode}>
 									<Image
 										alt={t(`game-misc:MODE_LONG_${placement.mode}`)}
 										path={modeImageUrl(placement.mode)}
@@ -67,7 +68,7 @@ export function PlacementsTable({
 							</>
 						) : null}
 						<WeaponImage
-							className="placements__table__weapon"
+							className={styles.tableWeapon}
 							variant="build"
 							weaponSplId={placement.weaponSplId}
 							width={32}
@@ -75,7 +76,7 @@ export function PlacementsTable({
 						/>
 						{type === "PLAYER_NAME" ? <div>{placement.name}</div> : null}
 						{type === "MODE_INFO" ? (
-							<div className="placements__time">
+							<div className={styles.time}>
 								{monthYearToSpan(placement).from.month}/
 								{monthYearToSpan(placement).from.year} -{" "}
 								{monthYearToSpan(placement).to.month}/
diff --git a/app/features/top-search/routes/xsearch.player.$id.tsx b/app/features/top-search/routes/xsearch.player.$id.tsx
index aba56ee4b..958493fc5 100644
--- a/app/features/top-search/routes/xsearch.player.$id.tsx
+++ b/app/features/top-search/routes/xsearch.player.$id.tsx
@@ -19,8 +19,6 @@ import { PlacementsTable } from "../components/Placements";
 import { loader } from "../loaders/xsearch.player.$id.server";
 export { loader, action };
 
-import "../top-search.css";
-
 export const handle: SendouRouteHandle = {
 	breadcrumb: ({ match }) => {
 		const data = match.data as SerializeFrom<typeof loader> | undefined;
diff --git a/app/features/top-search/routes/xsearch.tsx b/app/features/top-search/routes/xsearch.tsx
index d422f84a8..cbf2bff54 100644
--- a/app/features/top-search/routes/xsearch.tsx
+++ b/app/features/top-search/routes/xsearch.tsx
@@ -15,8 +15,6 @@ import { loader } from "../loaders/xsearch.server";
 import type { MonthYear } from "../top-search-utils";
 export { loader };
 
-import "../top-search.css";
-
 export const handle: SendouRouteHandle = {
 	breadcrumb: () => ({
 		imgPath: navIconUrl("xsearch"),
diff --git a/app/features/top-search/top-search.css b/app/features/top-search/top-search.module.css
similarity index 73%
rename from app/features/top-search/top-search.css
rename to app/features/top-search/top-search.module.css
index 702ae959b..a80bf820f 100644
--- a/app/features/top-search/top-search.css
+++ b/app/features/top-search/top-search.module.css
@@ -1,4 +1,4 @@
-.placements__table {
+.table {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-0-5);
@@ -6,19 +6,19 @@
 	font-weight: var(--semi-bold);
 }
 
-.placements__table__rank {
+.tableRank {
 	min-width: 28px;
 	text-align: right;
 }
 
-.placements__table__name {
+.tableName {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	max-width: 117px;
 }
 
-.placements__tier-header {
+.tierHeader {
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
@@ -26,7 +26,7 @@
 	color: var(--color-text-high);
 }
 
-.placements__table__row {
+.tableRow {
 	background-color: var(--color-bg-high);
 	display: flex;
 	padding: var(--s-2) var(--s-3);
@@ -36,23 +36,23 @@
 	transition: 0.1s ease-in-out background-color;
 }
 
-a.placements__table__row:hover {
+a.tableRow:hover {
 	background-color: var(--color-bg-higher);
 }
 
-.placements__table__row:first-of-type {
+.tableRow:first-of-type {
 	border-radius: var(--rounded) var(--rounded) 0 0;
 }
 
-.placements__table__row:last-of-type {
+.tableRow:last-of-type {
 	border-radius: 0 0 var(--rounded) var(--rounded);
 }
 
-.placements__table__row:only-child {
+.tableRow:only-child {
 	border-radius: var(--rounded);
 }
 
-.placements__table__row__qualification {
+.tableRowQualification {
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	justify-content: center;
@@ -61,35 +61,35 @@ a.placements__table__row:hover {
 	gap: var(--s-2);
 }
 
-.placements__table__weapon {
+.tableWeapon {
 	background-color: var(--color-bg);
 	border-radius: 100%;
 }
 
-.placements__table__mode {
+.tableMode {
 	background-color: var(--color-bg);
 	border-radius: 100%;
 	padding: var(--s-1);
 }
 
-.placements__time {
+.time {
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	color: var(--color-text-high);
 }
 
-.placements__table__power {
+.tablePower {
 	margin-inline-start: auto;
 }
 
-.placements__table__inner-row {
+.tableInnerRow {
 	display: flex;
 	align-items: center;
 	gap: var(--s-2-5);
 	width: 100%;
 }
 
-.placements__avatar {
+.avatar {
 	min-width: 24px;
 	min-height: 24px;
 }
diff --git a/app/features/tournament-bracket/components/Bracket/Elimination.tsx b/app/features/tournament-bracket/components/Bracket/Elimination.tsx
index a168e0137..822e50655 100644
--- a/app/features/tournament-bracket/components/Bracket/Elimination.tsx
+++ b/app/features/tournament-bracket/components/Bracket/Elimination.tsx
@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { TOURNAMENT } from "../../../tournament/tournament-constants";
 import type { Bracket as BracketType } from "../../core/Bracket";
 import { getRounds } from "../../core/rounds";
+import styles from "./bracket.module.css";
 import { Match } from "./Match";
 import { RoundHeader } from "./RoundHeader";
 
@@ -17,7 +18,7 @@ export function EliminationBracketSide(props: EliminationBracketSideProps) {
 	let atLeastOneColumnHidden = false;
 	return (
 		<div
-			className="elim-bracket__container"
+			className={styles.elimContainer}
 			style={{ "--round-count": rounds.length }}
 		>
 			{rounds.flatMap((round, roundIdx) => {
@@ -48,7 +49,7 @@ export function EliminationBracketSide(props: EliminationBracketSideProps) {
 				return (
 					<div
 						key={round.id}
-						className="elim-bracket__round-column"
+						className={styles.elimRoundColumn}
 						data-round-id={round.id}
 					>
 						<RoundHeader
@@ -59,8 +60,8 @@ export function EliminationBracketSide(props: EliminationBracketSideProps) {
 							maps={round.maps}
 						/>
 						<div
-							className={clsx("elim-bracket__round-matches-container", {
-								"elim-bracket__round-matches-container__top-bye":
+							className={clsx(styles.elimRoundMatchesContainer, {
+								[styles.elimRoundMatchesContainerTopBye]:
 									!atLeastOneColumnHidden &&
 									props.type === "winners" &&
 									(!props.bracket.data.match[0].opponent1 ||
diff --git a/app/features/tournament-bracket/components/Bracket/Match.tsx b/app/features/tournament-bracket/components/Bracket/Match.tsx
index bf995fcaf..4a94f4655 100644
--- a/app/features/tournament-bracket/components/Bracket/Match.tsx
+++ b/app/features/tournament-bracket/components/Bracket/Match.tsx
@@ -18,7 +18,9 @@ import { tournamentMatchPage, tournamentStreamsPage } from "~/utils/urls";
 import type { Bracket } from "../../core/Bracket";
 import * as Deadline from "../../core/Deadline";
 import type { TournamentData } from "../../core/Tournament.server";
+import parentStyles from "../../tournament-bracket.module.css";
 import { matchEndedEarly } from "../../tournament-bracket-utils";
+import styles from "./bracket.module.css";
 
 interface MatchProps {
 	match: Unpacked<TournamentData["data"]["match"]>;
@@ -35,7 +37,7 @@ export function Match(props: MatchProps) {
 	const isBye = !props.match.opponent1 || !props.match.opponent2;
 
 	if (isBye) {
-		return <div className="bracket__match__bye" />;
+		return <div className={styles.matchBye} />;
 	}
 
 	return (
@@ -43,7 +45,7 @@ export function Match(props: MatchProps) {
 			<MatchHeader {...props} />
 			<MatchWrapper {...props}>
 				<MatchRow {...props} side={1} />
-				<div className="bracket__match__separator" />
+				<div className={styles.matchSeparator} />
 				<MatchRow {...props} side={2} />
 			</MatchWrapper>
 			{!props.hideMatchTimer ? (
@@ -89,15 +91,20 @@ function MatchHeader({ match, type, roundNumber, group }: MatchProps) {
 		tournament.ctx.castedMatchesInfo?.lockedMatches?.includes(match.id);
 
 	return (
-		<div className="bracket__match__header">
-			<div className="bracket__match__header__box">
+		<div className={styles.matchHeader}>
+			<div className={styles.matchHeaderBox}>
 				{prefix()}
 				{roundNumber}.{match.number}
 			</div>
 			{toBeCasted ? (
 				<SendouPopover
 					trigger={
-						<SendouButton className="bracket__match__header__box bracket__match__header__box__button">
+						<SendouButton
+							className={clsx(
+								styles.matchHeaderBox,
+								styles.matchHeaderBoxButton,
+							)}
+						>
 							🔒 CAST
 						</SendouButton>
 					}
@@ -109,7 +116,12 @@ function MatchHeader({ match, type, roundNumber, group }: MatchProps) {
 					placement="top"
 					popoverClassName="w-max"
 					trigger={
-						<SendouButton className="bracket__match__header__box bracket__match__header__box__button">
+						<SendouButton
+							className={clsx(
+								styles.matchHeaderBox,
+								styles.matchHeaderBoxButton,
+							)}
+						>
 							🔴 LIVE
 						</SendouButton>
 					}
@@ -131,7 +143,7 @@ function MatchWrapper({
 	if (!isPreview) {
 		return (
 			<Link
-				className="bracket__match"
+				className={styles.match}
 				to={tournamentMatchPage({
 					tournamentId: tournament.ctx.id,
 					matchId: match.id,
@@ -143,7 +155,7 @@ function MatchWrapper({
 		);
 	}
 
-	return <div className="bracket__match">{children}</div>;
+	return <div className={styles.match}>{children}</div>;
 }
 
 function MatchRow({
@@ -214,30 +226,30 @@ function MatchRow({
 			title={team?.members.map((m) => m.username).join(", ")}
 		>
 			<div
-				className={clsx("bracket__match__seed", {
+				className={clsx(styles.matchSeed, {
 					"text-lighter-important italic opaque": simulated,
-					bracket__match__seed__wide: isBigSeedNumber,
+					[styles.matchSeedWide]: isBigSeedNumber,
 				})}
 			>
 				{team?.seed}
 			</div>
 			{logoSrc ? <Avatar size="xxxs" url={logoSrc} className="mr-1" /> : null}
 			<div
-				className={clsx("bracket__match__team-name", {
+				className={clsx(styles.matchTeamName, {
 					"text-theme-secondary":
 						!simulated && ownTeam && ownTeam?.id === team?.id,
 					"text-lighter italic opaque": simulated,
-					"bracket__match__team-name__narrow":
+					[styles.matchTeamNameNarrow]:
 						// either but not both
 						(logoSrc || isBigSeedNumber) && !(logoSrc && isBigSeedNumber),
 					// both
-					"bracket__match__team-name__narrowest": logoSrc && isBigSeedNumber,
+					[styles.matchTeamNameNarrowest]: logoSrc && isBigSeedNumber,
 					invisible: !team,
 				})}
 			>
 				{team?.name ?? "???"}
 			</div>{" "}
-			<div className="bracket__match__score">{score()}</div>
+			<div className={styles.matchScore}>{score()}</div>
 		</div>
 	);
 }
@@ -253,7 +265,9 @@ function MatchStreams({ match }: Pick<MatchProps, "match">) {
 
 	if (!fetcher.data || !match.opponent1?.id || !match.opponent2?.id)
 		return (
-			<div className="text-lighter text-center tournament-bracket__stream-popover">
+			<div
+				className={clsx("text-lighter text-center", parentStyles.streamPopover)}
+			>
 				Loading streams...
 			</div>
 		);
@@ -274,7 +288,7 @@ function MatchStreams({ match }: Pick<MatchProps, "match">) {
 
 	if (streamsOfThisMatch.length === 0)
 		return (
-			<div className="tournament-bracket__stream-popover">
+			<div className={parentStyles.streamPopover}>
 				After all there seems to be no streams of this match. Check the{" "}
 				<Link to={tournamentStreamsPage(tournament.ctx.id)}>streams page</Link>{" "}
 				for all the available streams.
@@ -282,7 +296,9 @@ function MatchStreams({ match }: Pick<MatchProps, "match">) {
 		);
 
 	return (
-		<div className="stack md justify-center tournament-bracket__stream-popover">
+		<div
+			className={clsx("stack md justify-center", parentStyles.streamPopover)}
+		>
 			{streamsOfThisMatch.map((stream) => (
 				<TournamentStream
 					key={stream.twitchUserName}
@@ -344,11 +360,8 @@ function MatchTimer({ match, bracket }: Pick<MatchProps, "match" | "bracket">) {
 				: "var(--color-text)";
 
 	return (
-		<div className="bracket__match__timer">
-			<div
-				className="bracket__match__header__box"
-				style={{ color: statusColor }}
-			>
+		<div className={styles.matchTimer}>
+			<div className={styles.matchHeaderBox} style={{ color: statusColor }}>
 				{displayText}
 			</div>
 		</div>
diff --git a/app/features/tournament-bracket/components/Bracket/PlacementsTable.tsx b/app/features/tournament-bracket/components/Bracket/PlacementsTable.tsx
index 51a18bdef..f66410653 100644
--- a/app/features/tournament-bracket/components/Bracket/PlacementsTable.tsx
+++ b/app/features/tournament-bracket/components/Bracket/PlacementsTable.tsx
@@ -13,6 +13,7 @@ import { TOURNAMENT } from "../../../tournament/tournament-constants";
 import type { Bracket } from "../../core/Bracket";
 import * as Progression from "../../core/Progression";
 import * as Swiss from "../../core/Swiss";
+import styles from "./bracket.module.css";
 
 export function PlacementsTable({
 	groupId,
@@ -130,7 +131,7 @@ export function PlacementsTable({
 	let eliminatedRowRendered = false;
 
 	return (
-		<table className="rr__placements-table" cellSpacing={0}>
+		<table className={styles.rrPlacementsTable} cellSpacing={0}>
 			<thead>
 				<tr>
 					<th>Team</th>
@@ -451,17 +452,17 @@ function SwissDividerRow({
 		: `Eliminated (@ ${threshold} losses)`;
 
 	return (
-		<tr className="tournament__standings__divider-row">
-			<td colSpan={columnCount} className="tournament__standings__divider">
+		<tr className={styles.standingsDividerRow}>
+			<td colSpan={columnCount} className={styles.standingsDivider}>
 				<div
-					className={clsx("tournament__standings__divider-content", {
-						"tournament__standings__divider--qualified": isQualified,
-						"tournament__standings__divider--eliminated": !isQualified,
+					className={clsx(styles.standingsDividerContent, {
+						[styles.standingsDividerQualified]: isQualified,
+						[styles.standingsDividerEliminated]: !isQualified,
 					})}
 				>
-					<div className="tournament__standings__divider-line" />
-					<span className="tournament__standings__divider-text">{message}</span>
-					<div className="tournament__standings__divider-line" />
+					<div className={styles.standingsDividerLine} />
+					<span className={styles.standingsDividerText}>{message}</span>
+					<div className={styles.standingsDividerLine} />
 				</div>
 			</td>
 		</tr>
diff --git a/app/features/tournament-bracket/components/Bracket/RoundHeader.tsx b/app/features/tournament-bracket/components/Bracket/RoundHeader.tsx
index 2052d587e..4a26f3b4b 100644
--- a/app/features/tournament-bracket/components/Bracket/RoundHeader.tsx
+++ b/app/features/tournament-bracket/components/Bracket/RoundHeader.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { differenceInMinutes } from "date-fns";
 import * as React from "react";
 import type { TournamentRoundMaps } from "~/db/tables";
@@ -8,6 +9,7 @@ import { databaseTimestampToDate } from "~/utils/dates";
 import type { Unpacked } from "~/utils/types";
 import * as Deadline from "../../core/Deadline";
 import type { TournamentData } from "../../core/Tournament.server";
+import styles from "./bracket.module.css";
 
 export function RoundHeader({
 	roundId,
@@ -39,9 +41,9 @@ export function RoundHeader({
 
 	return (
 		<div>
-			<div className="elim-bracket__round-header">{name}</div>
+			<div className={styles.elimRoundHeader}>{name}</div>
 			{showInfos && bestOf && !leagueRoundStartDate ? (
-				<div className="elim-bracket__round-header__infos">
+				<div className={styles.elimRoundHeaderInfos}>
 					<div>
 						{countPrefix}
 						{bestOf}
@@ -58,7 +60,7 @@ export function RoundHeader({
 			) : leagueRoundStartDate ? (
 				<LeagueRoundStartDate date={leagueRoundStartDate} />
 			) : (
-				<div className="elim-bracket__round-header__infos invisible">
+				<div className={clsx(styles.elimRoundHeaderInfos, "invisible")}>
 					Hidden
 				</div>
 			)}
@@ -70,7 +72,7 @@ function LeagueRoundStartDate({ date }: { date: Date }) {
 	const { formatDate } = useTimeFormat();
 
 	return (
-		<div className="elim-bracket__round-header__infos">
+		<div className={styles.elimRoundHeaderInfos}>
 			<div>
 				{formatDate(date, {
 					month: "short",
diff --git a/app/features/tournament-bracket/components/Bracket/RoundRobin.tsx b/app/features/tournament-bracket/components/Bracket/RoundRobin.tsx
index 9506d7c37..32630323f 100644
--- a/app/features/tournament-bracket/components/Bracket/RoundRobin.tsx
+++ b/app/features/tournament-bracket/components/Bracket/RoundRobin.tsx
@@ -1,6 +1,7 @@
 import type { Match as MatchType } from "~/modules/brackets-model";
 import type { Bracket as BracketType } from "../../core/Bracket";
 import { groupNumberToLetters } from "../../tournament-bracket-utils";
+import styles from "./bracket.module.css";
 import { Match } from "./Match";
 import { PlacementsTable } from "./PlacementsTable";
 import { RoundHeader } from "./RoundHeader";
@@ -31,7 +32,7 @@ export function RoundRobinBracket({ bracket }: { bracket: BracketType }) {
 					<div key={groupName} className="stack lg ml-6">
 						<h2 className="text-lg">{groupName}</h2>
 						<div
-							className="elim-bracket__container"
+							className={styles.elimContainer}
 							style={{ "--round-count": rounds.length }}
 						>
 							{rounds.flatMap((round) => {
@@ -50,7 +51,7 @@ export function RoundRobinBracket({ bracket }: { bracket: BracketType }) {
 								);
 
 								return (
-									<div key={round.id} className="elim-bracket__round-column">
+									<div key={round.id} className={styles.elimRoundColumn}>
 										<RoundHeader
 											roundId={round.id}
 											name={`Round ${round.number}`}
@@ -58,7 +59,7 @@ export function RoundRobinBracket({ bracket }: { bracket: BracketType }) {
 											showInfos={someMatchOngoing}
 											maps={round.maps}
 										/>
-										<div className="elim-bracket__round-matches-container">
+										<div className={styles.elimRoundMatchesContainer}>
 											{matches.map((match) => {
 												if (!match.opponent1 || !match.opponent2) {
 													return null;
diff --git a/app/features/tournament-bracket/components/Bracket/Swiss.tsx b/app/features/tournament-bracket/components/Bracket/Swiss.tsx
index dd258d68a..7e26fab98 100644
--- a/app/features/tournament-bracket/components/Bracket/Swiss.tsx
+++ b/app/features/tournament-bracket/components/Bracket/Swiss.tsx
@@ -11,6 +11,7 @@ import {
 import { useSearchParamState } from "~/hooks/useSearchParamState";
 import type { Match as MatchType } from "~/modules/brackets-model";
 import type { Bracket as BracketType } from "../../core/Bracket";
+import styles from "../../tournament-bracket.module.css";
 import { groupNumberToLetters } from "../../tournament-bracket-utils";
 import { Match } from "./Match";
 import { PlacementsTable } from "./PlacementsTable";
@@ -106,9 +107,10 @@ export function SwissBracket({
 								key={g.groupId}
 								onPress={() => setSelectedGroupId(g.groupId)}
 								className={clsx(
-									"tournament-bracket__bracket-nav__link tournament-bracket__bracket-nav__link__big",
+									styles.bracketNavLink,
+									styles.bracketNavLinkBig,
 									{
-										"tournament-bracket__bracket-nav__link__selected":
+										[styles.bracketNavLinkSelected]:
 											selectedGroupId === g.groupId,
 									},
 								)}
diff --git a/app/features/tournament-bracket/components/Bracket/bracket.css b/app/features/tournament-bracket/components/Bracket/bracket.module.css
similarity index 68%
rename from app/features/tournament-bracket/components/Bracket/bracket.css
rename to app/features/tournament-bracket/components/Bracket/bracket.module.css
index 21e092583..513f6c9d7 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.module.css
@@ -8,7 +8,7 @@
 	padding-block-end: var(--s-6);
 }
 
-.scrolling-bracket {
+.scrollingBracket {
 	padding: var(--s-4) var(--s-6);
 	max-width: 100%;
 	max-height: min(1000px, 70vh);
@@ -19,7 +19,7 @@
 	overflow: scroll;
 }
 
-.bracket__match__header {
+.matchHeader {
 	position: absolute;
 	display: flex;
 	justify-content: space-between;
@@ -27,7 +27,7 @@
 	margin-block-start: -16px;
 }
 
-.bracket__match__header__box {
+.matchHeaderBox {
 	background-color: var(--color-bg-higher);
 	padding: var(--s-0-5) var(--s-1);
 	border-radius: var(--rounded-sm);
@@ -37,11 +37,11 @@
 	border: 0;
 }
 
-.bracket__match__header__box__button {
+.matchHeaderBoxButton {
 	height: 18.86px;
 }
 
-.bracket__match__timer {
+.matchTimer {
 	position: absolute;
 	top: 50%;
 	left: 0;
@@ -49,7 +49,7 @@
 	margin-inline-start: 8px;
 }
 
-.bracket__match {
+.match {
 	width: var(--match-width);
 	min-height: var(--match-height);
 	max-height: var(--match-height);
@@ -66,56 +66,56 @@
 	transition: background-color 0.2s;
 }
 
-a.bracket__match:hover {
+a.match:hover {
 	background-color: var(--color-bg-high);
 	border-radius: var(--rounded-sm);
 }
 
-.bracket__match__separator {
+.matchSeparator {
 	min-height: 2px;
 	max-height: 2px;
 	width: 100%;
 	background-color: var(--color-bg-higher);
 }
 
-.bracket__match__bye {
+.matchBye {
 	visibility: hidden;
 	min-height: var(--match-height);
 	max-height: var(--match-height);
 }
 
-.bracket__match__seed {
+.matchSeed {
 	color: var(--color-text-accent);
 	margin-inline-end: var(--s-0-5);
 	min-width: 15px;
 	max-width: 15px;
 }
 
-.bracket__match__seed__wide {
+.matchSeedWide {
 	min-width: 22px;
 	max-width: 22px;
 }
 
-.bracket__match__team-name {
+.matchTeamName {
 	max-width: 95px;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
 
-.bracket__match__team-name__narrow {
+.matchTeamNameNarrow {
 	max-width: 75px;
 }
 
-.bracket__match__team-name__narrowest {
+.matchTeamNameNarrowest {
 	max-width: 70px;
 }
 
-.bracket__match__score {
+.matchScore {
 	margin-inline-start: auto;
 }
 
-.elim-bracket__container {
+.elimContainer {
 	--line-width: 30px;
 	display: grid;
 	grid-template-columns: repeat(
@@ -125,7 +125,7 @@ a.bracket__match:hover {
 	overflow: visible;
 }
 
-.elim-bracket__round-matches-container {
+.elimRoundMatchesContainer {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-around;
@@ -135,11 +135,11 @@ a.bracket__match:hover {
 	overflow: visible;
 }
 
-.elim-bracket__round-matches-container__top-bye {
+.elimRoundMatchesContainerTopBye {
 	margin-top: -18px;
 }
 
-.elim-bracket__round-header {
+.elimRoundHeader {
 	text-align: center;
 	background-color: var(--color-bg-higher);
 	font-size: var(--fonts-xs);
@@ -149,7 +149,7 @@ a.bracket__match:hover {
 	border-radius: var(--rounded-sm);
 }
 
-.elim-bracket__round-header__infos {
+.elimRoundHeaderInfos {
 	width: var(--match-width);
 	display: flex;
 	justify-content: space-between;
@@ -158,12 +158,12 @@ a.bracket__match:hover {
 	font-weight: var(--semi-bold);
 }
 
-.elim-bracket__round-column {
+.elimRoundColumn {
 	display: flex;
 	flex-direction: column;
 }
 
-.rr__placements-table {
+.rrPlacementsTable {
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	min-width: max-content;
@@ -171,26 +171,69 @@ a.bracket__match:hover {
 	max-width: 600px;
 }
 
-.rr__placements-table thead {
+.rrPlacementsTable thead {
 	color: var(--color-text-high);
 }
 
-.rr__placements-table th {
+.rrPlacementsTable th {
 	text-align: left;
 }
 
-.rr__placements-table th abbr {
+.rrPlacementsTable th abbr {
 	padding-inline: var(--s-2);
 }
 
-.rr__placements-table td span {
+.rrPlacementsTable td span {
 	padding-inline: var(--s-2);
 }
 
-.rr__placements-table tbody tr:nth-child(odd) {
+.rrPlacementsTable tbody tr:nth-child(odd) {
 	background-color: var(--color-bg-high);
 }
 
-.rr__placements-table tbody tr:nth-child(even) {
+.rrPlacementsTable tbody tr:nth-child(even) {
 	background-color: var(--color-bg-higher);
 }
+
+.standingsDividerRow {
+	background-color: transparent !important;
+}
+
+.standingsDivider {
+	padding: 0;
+}
+
+.standingsDividerContent {
+	display: flex;
+	align-items: center;
+	gap: var(--s-2);
+	padding-block: var(--s-2);
+}
+
+.standingsDividerQualified .standingsDividerLine {
+	background-color: var(--color-success);
+}
+
+.standingsDividerQualified .standingsDividerText {
+	color: var(--color-success);
+}
+
+.standingsDividerEliminated .standingsDividerLine {
+	background-color: var(--color-error);
+}
+
+.standingsDividerEliminated .standingsDividerText {
+	color: var(--color-error);
+}
+
+.standingsDividerLine {
+	flex: 1;
+	height: 2px;
+	background-color: var(--color-border);
+}
+
+.standingsDividerText {
+	font-size: var(--fonts-xxs);
+	font-weight: var(--bold);
+	white-space: nowrap;
+}
diff --git a/app/features/tournament-bracket/components/Bracket/index.tsx b/app/features/tournament-bracket/components/Bracket/index.tsx
index 3411521c1..daa511399 100644
--- a/app/features/tournament-bracket/components/Bracket/index.tsx
+++ b/app/features/tournament-bracket/components/Bracket/index.tsx
@@ -1,7 +1,9 @@
+import clsx from "clsx";
 import * as React from "react";
 import { useDraggable } from "react-use-draggable-scroll";
 import { useBracketExpanded } from "~/features/tournament/routes/to.$id";
 import type { Bracket as BracketType } from "../../core/Bracket";
+import styles from "./bracket.module.css";
 import { EliminationBracketSide } from "./Elimination";
 import { RoundRobinBracket } from "./RoundRobin";
 import { SwissBracket } from "./Swiss";
@@ -68,7 +70,7 @@ function BracketContainer({
 }) {
 	if (!scrollable) {
 		return (
-			<div className="bracket" data-testid="brackets-viewer">
+			<div className={styles.bracket} data-testid="brackets-viewer">
 				{children}
 			</div>
 		);
@@ -91,7 +93,7 @@ function ScrollableBracketContainer({
 
 	return (
 		<div
-			className="bracket scrolling-bracket"
+			className={clsx(styles.bracket, styles.scrollingBracket)}
 			data-testid="brackets-viewer"
 			ref={ref}
 			{...events}
diff --git a/app/features/tournament-bracket/components/CastInfo.tsx b/app/features/tournament-bracket/components/CastInfo.tsx
index 9356b89b9..0147154e0 100644
--- a/app/features/tournament-bracket/components/CastInfo.tsx
+++ b/app/features/tournament-bracket/components/CastInfo.tsx
@@ -6,6 +6,7 @@ import { SubmitButton } from "~/components/SubmitButton";
 import { TournamentMatchStatus } from "~/db/tables";
 import { useUser } from "~/features/auth/core/user";
 import { useTournament } from "~/features/tournament/routes/to.$id";
+import styles from "../tournament-bracket.module.css";
 
 const lockingInfo =
 	"You can lock the match to indicate that it should not be started before the cast is ready. Match being locked prevents score reporting and hides the map list till the organizer/streamer unlocks it.";
@@ -106,19 +107,12 @@ function CastInfoWrapper({
 
 	return (
 		<div className="stack horizontal sm justify-center items-center">
-			<fetcher.Form
-				className="tournament-bracket__cast-info-container"
-				method="post"
-			>
-				<div className="tournament-bracket__cast-info-container__label">
-					Cast
-				</div>
+			<fetcher.Form className={styles.castInfoContainer} method="post">
+				<div className={styles.castInfoContainerLabel}>Cast</div>
 
 				<div className="stack horizontal sm items-center justify-between w-full">
 					{children ? (
-						<div className="tournament-bracket__cast-info-container__content">
-							{children}
-						</div>
+						<div className={styles.castInfoContainerContent}>{children}</div>
 					) : null}
 					{submitButtonText && _action ? (
 						<SubmitButton
diff --git a/app/features/tournament-bracket/components/DeadlineInfoPopover.tsx b/app/features/tournament-bracket/components/DeadlineInfoPopover.tsx
index b0c3d0187..393832dbb 100644
--- a/app/features/tournament-bracket/components/DeadlineInfoPopover.tsx
+++ b/app/features/tournament-bracket/components/DeadlineInfoPopover.tsx
@@ -1,8 +1,10 @@
+import clsx from "clsx";
 import { differenceInSeconds } from "date-fns";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { InfoPopover } from "~/components/InfoPopover";
 import * as Deadline from "../core/Deadline";
+import styles from "../tournament-bracket.module.css";
 
 interface DeadlineInfoPopoverProps {
 	startedAt: Date;
@@ -36,21 +38,28 @@ export function DeadlineInfoPopover({
 
 	const warningIndicator =
 		status === "warning" ? (
-			<span className="tournament-bracket__deadline-indicator tournament-bracket__deadline-indicator__warning">
+			<span
+				className={clsx(
+					styles.deadlineIndicator,
+					styles.deadlineIndicatorWarning,
+				)}
+			>
 				!
 			</span>
 		) : status === "error" ? (
-			<span className="tournament-bracket__deadline-indicator tournament-bracket__deadline-indicator__error">
+			<span
+				className={clsx(
+					styles.deadlineIndicator,
+					styles.deadlineIndicatorError,
+				)}
+			>
 				!
 			</span>
 		) : null;
 
 	return (
-		<div className="tournament-bracket__deadline-popover">
-			<InfoPopover
-				tiny
-				className="tournament-bracket__deadline-popover__trigger"
-			>
+		<div className={styles.deadlinePopover}>
+			<InfoPopover tiny className={styles.deadlinePopoverTrigger}>
 				{t("tournament:match.deadline.explanation")}
 			</InfoPopover>
 			{warningIndicator}
diff --git a/app/features/tournament-bracket/components/MatchActions.tsx b/app/features/tournament-bracket/components/MatchActions.tsx
index d6867f090..998f9faa1 100644
--- a/app/features/tournament-bracket/components/MatchActions.tsx
+++ b/app/features/tournament-bracket/components/MatchActions.tsx
@@ -11,6 +11,7 @@ import invariant from "~/utils/invariant";
 import * as PickBan from "../core/PickBan";
 import type { TournamentDataTeam } from "../core/Tournament.server";
 import type { TournamentMatchLoaderData } from "../loaders/to.$id.matches.$mid.server";
+import styles from "../tournament-bracket.module.css";
 import {
 	isSetOverByScore,
 	matchIsLocked,
@@ -140,10 +141,7 @@ export function MatchActions({
 				revising={revising}
 			/>
 			{!presentational && bothTeamsHaveActiveRosters ? (
-				<Form
-					method="post"
-					className="tournament-bracket__during-match-actions__actions"
-				>
+				<Form method="post" className={styles.duringMatchActionsActions}>
 					<input type="hidden" name="winnerTeamId" value={winnerId ?? ""} />
 					{showPoints ? (
 						<input type="hidden" name="points" value={JSON.stringify(points)} />
@@ -180,8 +178,8 @@ export function MatchActions({
 				/>
 			) : null}
 			{!result && presentational ? (
-				<div className="tournament-bracket__during-match-actions__actions">
-					<p className="tournament-bracket__during-match-actions__amount-warning-paragraph">
+				<div className={styles.duringMatchActionsActions}>
+					<p className={styles.duringMatchActionsAmountWarningParagraph}>
 						No permissions to report score
 					</p>
 				</div>
@@ -238,7 +236,7 @@ function ReportScoreButtons({
 	);
 	if (leagueRoundStartDate && leagueRoundStartDate > new Date()) {
 		return (
-			<p className="tournament-bracket__during-match-actions__amount-warning-paragraph">
+			<p className={styles.duringMatchActionsAmountWarningParagraph}>
 				League round has not started yet
 			</p>
 		);
@@ -246,7 +244,7 @@ function ReportScoreButtons({
 
 	if (matchLocked) {
 		return (
-			<p className="tournament-bracket__during-match-actions__amount-warning-paragraph">
+			<p className={styles.duringMatchActionsAmountWarningParagraph}>
 				Match is pending to be casted. Please wait a bit
 			</p>
 		);
@@ -258,7 +256,7 @@ function ReportScoreButtons({
 		points[winnerIdx] <= points[winnerIdx === 0 ? 1 : 0]
 	) {
 		return (
-			<p className="tournament-bracket__during-match-actions__amount-warning-paragraph">
+			<p className={styles.duringMatchActionsAmountWarningParagraph}>
 				Winner should have higher score than loser
 			</p>
 		);
@@ -270,7 +268,7 @@ function ReportScoreButtons({
 			(points[0] !== 0 && points[1] === 100))
 	) {
 		return (
-			<p className="tournament-bracket__during-match-actions__amount-warning-paragraph">
+			<p className={styles.duringMatchActionsAmountWarningParagraph}>
 				If there was a KO (100 score), other team should have 0 score
 			</p>
 		);
@@ -278,7 +276,7 @@ function ReportScoreButtons({
 
 	if (typeof winnerIdx !== "number") {
 		return (
-			<p className="tournament-bracket__during-match-actions__amount-warning-paragraph">
+			<p className={styles.duringMatchActionsAmountWarningParagraph}>
 				Please select the winner of this map
 			</p>
 		);
diff --git a/app/features/tournament-bracket/components/MatchRosters.tsx b/app/features/tournament-bracket/components/MatchRosters.tsx
index c493523dd..a53b7565f 100644
--- a/app/features/tournament-bracket/components/MatchRosters.tsx
+++ b/app/features/tournament-bracket/components/MatchRosters.tsx
@@ -4,6 +4,7 @@ import { Avatar } from "~/components/Avatar";
 import { useTournament } from "~/features/tournament/routes/to.$id";
 import { tournamentTeamPage, userPage } from "~/utils/urls";
 import type { TournamentMatchLoaderData } from "../loaders/to.$id.matches.$mid.server";
+import styles from "../tournament-bracket.module.css";
 
 const INACTIVE_PLAYER_CSS =
 	"tournament__team-with-roster__member__inactive text-lighter-important";
@@ -39,17 +40,16 @@ export function MatchRosters({
 		: null;
 
 	return (
-		<div className="tournament-bracket__rosters">
+		<div className={styles.rosters}>
 			<div className="stack xxs">
 				<div className="stack xs horizontal items-center text-lighter">
-					<div className="tournament-bracket__team-one-dot" />
+					<div className={styles.teamOneDot} />
 					Team 1
 				</div>
 				<h2
 					className={clsx("text-sm", {
 						"text-lighter": !teamOne,
-						"tournament-bracket__rosters__spaced-header":
-							teamOneLogoSrc || teamTwoLogoSrc,
+						[styles.rostersSpacedHeader]: teamOneLogoSrc || teamTwoLogoSrc,
 					})}
 				>
 					{teamOne ? (
@@ -96,14 +96,13 @@ export function MatchRosters({
 			</div>
 			<div className="stack xxs">
 				<div className="stack xs horizontal items-center text-lighter">
-					<div className="tournament-bracket__team-two-dot" />
+					<div className={styles.teamTwoDot} />
 					Team 2
 				</div>
 				<h2
 					className={clsx("text-sm", {
 						"text-lighter": !teamTwo,
-						"tournament-bracket__rosters__spaced-header":
-							teamOneLogoSrc || teamTwoLogoSrc,
+						[styles.rostersSpacedHeader]: teamOneLogoSrc || teamTwoLogoSrc,
 					})}
 				>
 					{teamTwo ? (
diff --git a/app/features/tournament-bracket/components/StartedMatch.tsx b/app/features/tournament-bracket/components/StartedMatch.tsx
index 162fe62ec..62dd008ad 100644
--- a/app/features/tournament-bracket/components/StartedMatch.tsx
+++ b/app/features/tournament-bracket/components/StartedMatch.tsx
@@ -37,11 +37,13 @@ import {
 	specialWeaponImageUrl,
 	stageImageUrl,
 } from "~/utils/urls";
+import tournamentStyles from "../../tournament/tournament.module.css";
 import type { Bracket } from "../core/Bracket";
 import * as Deadline from "../core/Deadline";
 import * as PickBan from "../core/PickBan";
 import type { TournamentDataTeam } from "../core/Tournament.server";
 import type { TournamentMatchLoaderData } from "../loaders/to.$id.matches.$mid.server";
+import styles from "../tournament-bracket.module.css";
 import {
 	groupNumberToLetters,
 	mapCountPlayedInSetWithCertainty,
@@ -168,7 +170,7 @@ export function StartedMatch({
 	];
 
 	return (
-		<div className="tournament-bracket__during-match-actions">
+		<div className={styles.duringMatchActions}>
 			<FancyStageBanner
 				stage={currentStageWithMode}
 				infos={roundInfos}
@@ -190,10 +192,10 @@ export function StartedMatch({
 								name="position"
 								value={currentPosition - 1}
 							/>
-							<div className="tournament-bracket__stage-banner__bottom-bar">
+							<div className={styles.stageBannerBottomBar}>
 								<SubmitButton
 									_action="UNDO_REPORT_SCORE"
-									className="tournament-bracket__stage-banner__undo-button"
+									className={styles.stageBannerUndoButton}
 									testId="undo-score-button"
 								>
 									{t("tournament:match.action.undoLastScore")}
@@ -205,10 +207,10 @@ export function StartedMatch({
 					tournament.matchCanBeReopened(data.match.id) &&
 					presentational && (
 						<Form method="post">
-							<div className="tournament-bracket__stage-banner__bottom-bar">
+							<div className={styles.stageBannerBottomBar}>
 								<SubmitButton
 									_action="REOPEN_MATCH"
-									className="tournament-bracket__stage-banner__undo-button"
+									className={styles.stageBannerUndoButton}
 									testId="reopen-match-button"
 								>
 									{t("tournament:match.action.reopenMatch")}
@@ -354,14 +356,14 @@ function FancyStageBanner({
 	return (
 		<>
 			{inBanPhase ? (
-				<div className="tournament-bracket__locked-banner">
+				<div className={styles.lockedBanner}>
 					<div className="stack sm items-center">
 						<div className="text-lg text-center font-bold">Banning phase</div>
 						<div>Waiting for {banPickingTeam()?.name}</div>
 					</div>
 				</div>
 			) : !stage ? (
-				<div className="tournament-bracket__locked-banner">
+				<div className={styles.lockedBanner}>
 					<div className="stack sm items-center">
 						<div className="text-lg text-center font-bold">Counterpick</div>
 						<div>Waiting for {banPickingTeam()?.name}</div>
@@ -369,7 +371,7 @@ function FancyStageBanner({
 					</div>
 				</div>
 			) : matchIsLocked ? (
-				<div className="tournament-bracket__locked-banner">
+				<div className={styles.lockedBanner}>
 					<div className="stack sm items-center">
 						<div className="text-lg text-center font-bold">
 							Match locked to be casted
@@ -378,7 +380,7 @@ function FancyStageBanner({
 					</div>
 				</div>
 			) : waitingForLeagueRoundToStart ? (
-				<div className="tournament-bracket__locked-banner">
+				<div className={styles.lockedBanner}>
 					<div className="stack sm items-center">
 						<div className="text-lg text-center font-bold">
 							Waiting for league round to start
@@ -394,7 +396,7 @@ function FancyStageBanner({
 					</div>
 				</div>
 			) : waitingForPreviousMatch ? (
-				<div className="tournament-bracket__locked-banner">
+				<div className={styles.lockedBanner}>
 					<div className="stack sm items-center">
 						<div className="text-lg text-center font-bold">
 							Previous match ongoing
@@ -405,7 +407,7 @@ function FancyStageBanner({
 					</div>
 				</div>
 			) : waitingForActiveRosterSelectionFor ? (
-				<div className="tournament-bracket__locked-banner">
+				<div className={styles.lockedBanner}>
 					<div className="stack sm items-center">
 						<div
 							className="text-lg text-center font-bold"
@@ -432,25 +434,20 @@ function FancyStageBanner({
 				</div>
 			) : (
 				<div
-					className={clsx("tournament-bracket__stage-banner", {
+					className={clsx(styles.stageBanner, {
 						rounded: !infos,
 					})}
 					style={style}
 					data-testid="stage-banner"
 				>
-					<div className="tournament-bracket__stage-banner__top-bar">
-						<h4 className="tournament-bracket__stage-banner__top-bar__header">
-							<Image
-								className="tournament-bracket__stage-banner__top-bar__mode-image"
-								path={modeImageUrl(stage.mode)}
-								alt=""
-								width={24}
-							/>
-							<span className="tournament-bracket__stage-banner__top-bar__map-text-small">
+					<div className={styles.stageBannerTopBar}>
+						<h4 className={styles.stageBannerTopBarHeader}>
+							<Image path={modeImageUrl(stage.mode)} alt="" width={24} />
+							<span className={styles.stageBannerTopBarMapTextSmall}>
 								{t(`game-misc:MODE_SHORT_${stage.mode}`)}{" "}
 								{t(`game-misc:STAGE_${stage.stageId}`)}
 							</span>
-							<span className="tournament-bracket__stage-banner__top-bar__map-text-big">
+							<span className={styles.stageBannerTopBarMapTextBig}>
 								{t(`game-misc:MODE_LONG_${stage.mode}`)} on{" "}
 								{t(`game-misc:STAGE_${stage.stageId}`)}
 							</span>
@@ -485,7 +482,7 @@ function FancyStageBanner({
 				/>
 			) : null}
 			{infos && (
-				<div className="tournament-bracket__infos">
+				<div className={styles.infos}>
 					{infos.filter(Boolean).map((info, i) => (
 						<div key={i}>{info}</div>
 					))}
@@ -535,8 +532,8 @@ function ModeProgressIndicator({
 
 	// TODO: this should be button when we click on it
 	return (
-		<div className="tournament-bracket__mode-progress">
-			<div className="tournament-bracket__mode-progress__inner">
+		<div className={styles.modeProgress}>
+			<div className={styles.modeProgressInner}>
 				{nullFilledArray(
 					Math.max(data.mapList?.length ?? 0, data.match.roundMaps?.count ?? 0),
 				).map((_, i) => {
@@ -554,7 +551,7 @@ function ModeProgressIndicator({
 
 					if (!map?.mode) {
 						return (
-							<div key={i} className="tournament-bracket__mode-progress__image">
+							<div key={i} className={styles.modeProgressImage}>
 								<PickIcon />
 							</div>
 						);
@@ -572,10 +569,13 @@ function ModeProgressIndicator({
 									<SendouButton
 										variant="minimal"
 										size="small"
-										className="tournament-bracket__mode-progress__image__banned__popover-trigger"
+										className={styles.modeProgressImageBannedPopoverTrigger}
 									>
 										<Image
-											containerClassName="tournament-bracket__mode-progress__image tournament-bracket__mode-progress__image__banned"
+											containerClassName={clsx(
+												styles.modeProgressImage,
+												styles.modeProgressImageBanned,
+											)}
 											path={modeImageUrl(map.mode)}
 											height={20}
 											width={20}
@@ -597,24 +597,21 @@ function ModeProgressIndicator({
 
 					return (
 						<Image
-							containerClassName={clsx(
-								"tournament-bracket__mode-progress__image",
-								{
-									"tournament-bracket__mode-progress__image__notable":
-										adjustedI <= maxIndexThatWillBePlayedForSure,
-									"tournament-bracket__mode-progress__image__team-one-win":
-										data.results[adjustedI] &&
-										data.results[adjustedI].winnerTeamId ===
-											data.match.opponentOne?.id,
-									"tournament-bracket__mode-progress__image__team-two-win":
-										data.results[adjustedI] &&
-										data.results[adjustedI].winnerTeamId ===
-											data.match.opponentTwo?.id,
-									"tournament-bracket__mode-progress__image__selected":
-										adjustedI === selectedResultIndex,
-									"cursor-pointer": Boolean(setSelectedResultIndex),
-								},
-							)}
+							containerClassName={clsx(styles.modeProgressImage, {
+								[styles.modeProgressImageNotable]:
+									adjustedI <= maxIndexThatWillBePlayedForSure,
+								[styles.modeProgressImageTeamOneWin]:
+									data.results[adjustedI] &&
+									data.results[adjustedI].winnerTeamId ===
+										data.match.opponentOne?.id,
+								[styles.modeProgressImageTeamTwoWin]:
+									data.results[adjustedI] &&
+									data.results[adjustedI].winnerTeamId ===
+										data.match.opponentTwo?.id,
+								[styles.modeProgressImageSelected]:
+									adjustedI === selectedResultIndex,
+								"cursor-pointer": Boolean(setSelectedResultIndex),
+							})}
 							key={i}
 							path={modeImageUrl(map.mode)}
 							height={20}
@@ -766,8 +763,11 @@ function StartedMatchTabs({
 					<Chat
 						rooms={rooms}
 						users={chatUsers}
-						className="tournament__chat-container"
-						messagesContainerClassName="tournament__chat-messages-container pt-0"
+						className={tournamentStyles.chatContainer}
+						messagesContainerClassName={clsx(
+							tournamentStyles.chatMessagesContainer,
+							"pt-0",
+						)}
 						chat={chat}
 						onMount={onChatMount}
 						onUnmount={onChatUnmount}
@@ -822,9 +822,9 @@ function ActionSectionWrapper({
 			}
 		: undefined;
 	return (
-		<section className="tournament__action-section" style={style}>
+		<section className={tournamentStyles.actionSection} style={style}>
 			<div
-				className={clsx("tournament__action-section__content", {
+				className={clsx({
 					"justify-center": rest["justify-center"],
 				})}
 			>
@@ -839,8 +839,8 @@ function ScreenBanIcons({ banned }: { banned: boolean }) {
 
 	return (
 		<div
-			className={clsx("tournament-bracket__no-screen", {
-				"tournament-bracket__no-screen__banned": banned,
+			className={clsx(styles.noScreen, {
+				[styles.noScreenBanned]: banned,
 			})}
 			data-testid={`screen-${banned ? "banned" : "allowed"}`}
 		>
@@ -871,7 +871,10 @@ function EndSetPopover({
 			trigger={
 				<SendouButton
 					variant="minimal"
-					className="tournament-bracket__stage-banner__undo-button tournament-bracket__stage-banner__end-set-button"
+					className={clsx(
+						styles.stageBannerUndoButton,
+						styles.stageBannerEndSetButton,
+					)}
 				>
 					{t("tournament:match.action.endSet")}
 				</SendouButton>
diff --git a/app/features/tournament-bracket/components/TeamRosterInputs.tsx b/app/features/tournament-bracket/components/TeamRosterInputs.tsx
index b7be7bf42..5a1773355 100644
--- a/app/features/tournament-bracket/components/TeamRosterInputs.tsx
+++ b/app/features/tournament-bracket/components/TeamRosterInputs.tsx
@@ -11,6 +11,7 @@ import { tournamentTeamPage, userPage } from "~/utils/urls";
 import { useTournament } from "../../tournament/routes/to.$id";
 import type { TournamentDataTeam } from "../core/Tournament.server";
 import type { TournamentMatchLoaderData } from "../loaders/to.$id.matches.$mid.server";
+import styles from "../tournament-bracket.module.css";
 import { tournamentTeamToActiveRosterUserIds } from "../tournament-bracket-utils";
 import type { Result } from "./StartedMatch";
 
@@ -53,7 +54,7 @@ export function TeamRosterInputs({
 			: _points;
 
 	return (
-		<div className="tournament-bracket__during-match-actions__rosters">
+		<div className={styles.duringMatchActionsRosters}>
 			{teams.map((team, teamI) => {
 				const winnerRadioChecked = result
 					? result.winnerTeamId === team.id
@@ -253,27 +254,19 @@ function TeamRosterHeader({
 	return (
 		<>
 			<div className="text-xs text-lighter font-semi-bold stack horizontal xs items-center justify-center">
-				<div
-					className={
-						idx === 0
-							? "tournament-bracket__team-one-dot"
-							: "tournament-bracket__team-two-dot"
-					}
-				/>
+				<div className={idx === 0 ? styles.teamOneDot : styles.teamTwoDot} />
 				Team {idx + 1}
 			</div>
 			<h4>
 				{team.seed ? (
-					<span className="tournament-bracket__during-match-actions__seed">
-						#{team.seed}
-					</span>
+					<span className={styles.duringMatchActionsSeed}>#{team.seed}</span>
 				) : null}{" "}
 				<Link
 					to={tournamentTeamPage({
 						tournamentId,
 						tournamentTeamId: team.id,
 					})}
-					className="tournament-bracket__during-match-actions__team-name"
+					className={styles.duringMatchActionsTeamName}
 				>
 					{team.name}
 				</Link>
@@ -316,12 +309,9 @@ function WinnerRadio({
 
 	return (
 		<div
-			className={clsx(
-				"tournament-bracket__during-match-actions__radio-container",
-				{
-					invisible,
-				},
-			)}
+			className={clsx(styles.duringMatchActionsRadioContainer, {
+				invisible,
+			})}
 		>
 			<input
 				type="radio"
@@ -364,7 +354,7 @@ function PointInput({
 	return (
 		<div className="stack horizontal sm items-center">
 			<input
-				className="tournament-bracket__points-input"
+				className={styles.pointsInput}
 				onChange={(e) => onChange(Number(e.target.value))}
 				type="number"
 				min={0}
@@ -423,24 +413,21 @@ function TeamRosterInputsCheckboxes({
 	};
 
 	return (
-		<div className="tournament-bracket__during-match-actions__team-players">
+		<div className={styles.duringMatchActionsTeamPlayers}>
 			{members.map((member, i) => {
 				return (
 					<div className="stack horizontal xs" key={member.id}>
 						<div
 							className={clsx(
-								"tournament-bracket__during-match-actions__checkbox-name",
+								styles.duringMatchActionsCheckboxName,
 								{ "disabled-opaque": mode() === "DISABLED" },
 								{ presentational: mode() === "PRESENTATIONAL" },
 							)}
 						>
 							<input
-								className={clsx(
-									"tournament-bracket__during-match-actions__checkbox",
-									{
-										opaque: presentational,
-									},
-								)}
+								className={clsx(styles.duringMatchActionsCheckbox, {
+									opaque: presentational,
+								})}
 								type="checkbox"
 								id={`${member.id}-${id}`}
 								name="playerName"
@@ -451,10 +438,10 @@ function TeamRosterInputsCheckboxes({
 								data-testid={`player-checkbox-${i}`}
 							/>{" "}
 							<label
-								className="tournament-bracket__during-match-actions__player-name"
+								className={styles.duringMatchActionsPlayerName}
 								htmlFor={`${member.id}-${id}`}
 							>
-								<span className="tournament-bracket__during-match-actions__player-name__inner">
+								<span className={styles.duringMatchActionsPlayerNameInner}>
 									{member.inGameName
 										? inGameNameWithoutDiscriminator(member.inGameName)
 										: member.username}
@@ -490,11 +477,11 @@ function RosterFormWithButtons({
 
 	if (!editingRoster) {
 		return (
-			<div className="tournament-bracket__roster-buttons__container">
+			<div className={styles.rosterButtonsContainer}>
 				<SendouButton
 					size="small"
 					onPress={() => setEditingRoster(true)}
-					className="tournament-bracket__edit-roster-button"
+					className={styles.editRosterButton}
 					variant="minimal"
 					data-testid="edit-active-roster-button"
 				>
@@ -505,10 +492,7 @@ function RosterFormWithButtons({
 	}
 
 	return (
-		<fetcher.Form
-			method="post"
-			className="tournament-bracket__roster-buttons__container"
-		>
+		<fetcher.Form method="post" className={styles.rosterButtonsContainer}>
 			<input
 				type="hidden"
 				name="roster"
diff --git a/app/features/tournament-bracket/components/TournamentTeamActions.tsx b/app/features/tournament-bracket/components/TournamentTeamActions.tsx
index b25298f37..447e4c4db 100644
--- a/app/features/tournament-bracket/components/TournamentTeamActions.tsx
+++ b/app/features/tournament-bracket/components/TournamentTeamActions.tsx
@@ -15,6 +15,7 @@ import {
 	tournamentMatchPage,
 	tournamentRegisterPage,
 } from "~/utils/urls";
+import styles from "../tournament-bracket.module.css";
 
 export function TournamentTeamActions() {
 	const tournament = useTournament();
@@ -151,7 +152,7 @@ export function TournamentTeamActions() {
 	if (status.type === "WAITING_FOR_BRACKET") {
 		return (
 			<Container spaced>
-				<CheckmarkIcon className="tournament-bracket__quick-action__checkmark" />{" "}
+				<CheckmarkIcon className={styles.quickActionCheckmark} />{" "}
 				<div>
 					Checked in, waiting on bracket
 					<Dots />
@@ -177,9 +178,9 @@ function Container({
 }) {
 	return (
 		<div
-			className={clsx("tournament-bracket__quick-action", {
-				"tournament-bracket__quick-action__spaced": spaced,
-				"tournament-bracket__quick-action__very-spaced": spaced === "very",
+			className={clsx(styles.quickAction, {
+				[styles.quickActionSpaced]: spaced,
+				[styles.quickActionVerySpaced]: spaced === "very",
 			})}
 		>
 			{children}
diff --git a/app/features/tournament-bracket/routes/to.$id.brackets.tsx b/app/features/tournament-bracket/routes/to.$id.brackets.tsx
index 75dc7ee0e..f62659f8b 100644
--- a/app/features/tournament-bracket/routes/to.$id.brackets.tsx
+++ b/app/features/tournament-bracket/routes/to.$id.brackets.tsx
@@ -36,8 +36,7 @@ import type { Bracket as BracketType } from "../core/Bracket";
 import * as PreparedMaps from "../core/PreparedMaps";
 export { action };
 
-import "../tournament-bracket.css";
-import "../components/Bracket/bracket.css";
+import styles from "../tournament-bracket.module.css";
 
 export default function TournamentBracketsPage() {
 	const { t } = useTranslation(["tournament"]);
@@ -175,7 +174,7 @@ export default function TournamentBracketsPage() {
 		<div>
 			<Outlet context={ctx} />
 			{tournament.canFinalize(user) ? (
-				<div className="tournament-bracket__finalize">
+				<div className={styles.finalize}>
 					<LinkButton
 						variant="minimal"
 						testId="finalize-tournament-button"
@@ -193,7 +192,7 @@ export default function TournamentBracketsPage() {
 					<div className="stack sm items-center">
 						<Alert
 							variation="INFO"
-							alertClassName="tournament-bracket__start-bracket-alert"
+							alertClassName={styles.startBracketAlert}
 							textClassName="stack horizontal md items-center"
 						>
 							{bracket.participantTournamentTeamIds.length}/
@@ -203,7 +202,7 @@ export default function TournamentBracketsPage() {
 							) : null}
 						</Alert>
 						{!bracket.canBeStarted ? (
-							<div className="tournament-bracket__mini-alert">
+							<div className={styles.miniAlert}>
 								⚠️{" "}
 								{bracket.isStartingBracket
 									? "Tournament start time is in the future"
@@ -461,16 +460,11 @@ function BracketNav({
 			{/** MOBILE */}
 			<SendouMenu
 				trigger={
-					<SendouButton
-						className={clsx(
-							"tournament-bracket__bracket-nav__link",
-							"tournament-bracket__menu",
-						)}
-					>
+					<SendouButton className={clsx(styles.bracketNavLink, styles.menu)}>
 						{bracketNameForButton(
 							tournament.bracketByIdxOrDefault(bracketIdx).name,
 						)}
-						<span className="tournament-bracket__bracket-nav__chevron">▼</span>
+						<span className={styles.bracketNavChevron}>▼</span>
 					</SendouButton>
 				}
 			>
@@ -485,15 +479,14 @@ function BracketNav({
 				))}
 			</SendouMenu>
 			{/** DESKTOP */}
-			<div className="tournament-bracket__bracket-nav tournament-bracket__button-row">
+			<div className={clsx(styles.bracketNav, styles.buttonRow)}>
 				{visibleBrackets.map((bracket, i) => {
 					return (
 						<SendouButton
 							key={bracket.name}
 							onPress={() => setBracketIdx(i)}
-							className={clsx("tournament-bracket__bracket-nav__link", {
-								"tournament-bracket__bracket-nav__link__selected":
-									bracketIdx === i,
+							className={clsx(styles.bracketNavLink, {
+								[styles.bracketNavLinkSelected]: bracketIdx === i,
 							})}
 						>
 							{bracketNameForButton(bracket.name)}
@@ -513,7 +506,7 @@ function CompactifyButton() {
 			onPress={() => {
 				setBracketExpanded(!bracketExpanded);
 			}}
-			className="tournament-bracket__compactify-button"
+			className={styles.compactifyButton}
 			icon={bracketExpanded ? <EyeSlashIcon /> : <EyeIcon />}
 		>
 			{bracketExpanded ? "Compactify" : "Show all"}
diff --git a/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx b/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
index 37ec0a3c0..5260f73a3 100644
--- a/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
+++ b/app/features/tournament-bracket/routes/to.$id.matches.$mid.tsx
@@ -28,7 +28,8 @@ import {
 } from "../tournament-bracket-utils";
 export { action, loader };
 
-import "../tournament-bracket.css";
+import tournamentStyles from "../../tournament/tournament.module.css";
+import styles from "../tournament-bracket.module.css";
 
 export default function TournamentMatchPage() {
 	const user = useUser();
@@ -172,12 +173,12 @@ function BeforeMatchChat() {
 	}, [data.match.chatCode]);
 
 	return (
-		<div className="tournament__action-section mt-6">
+		<div className={clsx(tournamentStyles.actionSection, "mt-6")}>
 			<ConnectedChat
 				rooms={rooms}
 				users={chatUsers}
-				className="tournament__chat-container"
-				messagesContainerClassName="tournament__chat-messages-container"
+				className={tournamentStyles.chatContainer}
+				messagesContainerClassName={tournamentStyles.chatMessagesContainer}
 				missingUserName="???"
 			/>
 		</div>
@@ -386,8 +387,8 @@ function EndedEarlyMessage() {
 	const winnerTeam = winnerTeamId ? tournament.teamById(winnerTeamId) : null;
 
 	return (
-		<div className="tournament-bracket__during-match-actions">
-			<div className="tournament-bracket__locked-banner tournament-bracket__locked-banner__lonely">
+		<div className={styles.duringMatchActions}>
+			<div className={clsx(styles.lockedBanner, styles.lockedBannerLonely)}>
 				<div className="stack sm items-center">
 					<div className="text-lg text-center font-bold">Match ended early</div>
 					{winnerTeam ? (
@@ -402,7 +403,7 @@ function EndedEarlyMessage() {
 					<Form method="post" className="contents">
 						<SubmitButton
 							_action="REOPEN_MATCH"
-							className="tournament-bracket__stage-banner__undo-button"
+							className={styles.stageBannerUndoButton}
 							testId="reopen-match-button"
 						>
 							Reopen match
diff --git a/app/features/tournament-bracket/tournament-bracket.css b/app/features/tournament-bracket/tournament-bracket.module.css
similarity index 65%
rename from app/features/tournament-bracket/tournament-bracket.css
rename to app/features/tournament-bracket/tournament-bracket.module.css
index db9d0c838..cb9d5aacc 100644
--- a/app/features/tournament-bracket/tournament-bracket.css
+++ b/app/features/tournament-bracket/tournament-bracket.module.css
@@ -1,4 +1,4 @@
-.tournament-bracket__finalize {
+.finalize {
 	font-size: var(--fonts-sm);
 	margin-block-end: var(--s-4);
 	display: flex;
@@ -7,18 +7,18 @@
 	justify-content: center;
 }
 
-.tournament-bracket__start-bracket-alert {
+.startBracketAlert {
 	line-height: 1.4;
 }
 
-.tournament-bracket__mini-alert {
+.miniAlert {
 	background-color: var(--color-info-low);
 	font-size: var(--fonts-xxs);
 	border-radius: var(--rounded);
 	padding: var(--s-1) var(--s-2);
 }
 
-.tournament-bracket__infos {
+.infos {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -33,15 +33,15 @@
 	letter-spacing: 0.3px;
 }
 
-.tournament-bracket__infos__label {
+.infosLabel {
 	margin-block-end: 0;
 }
 
-.tournament-bracket__infos__value > button {
+.infosValue > button {
 	font-size: var(--fonts-xxs);
 }
 
-.tournament-bracket__locked-banner {
+.lockedBanner {
 	width: 100%;
 	height: 10rem;
 	background-color: var(--color-bg-higher);
@@ -54,11 +54,11 @@
 	padding-inline: var(--s-2);
 }
 
-.tournament-bracket__locked-banner__lonely {
+.lockedBannerLonely {
 	border-radius: var(--rounded);
 }
 
-.tournament-bracket__stage-banner {
+.stageBanner {
 	display: flex;
 	width: 100%;
 	height: 10rem;
@@ -74,7 +74,7 @@
 	position: relative;
 }
 
-.tournament-bracket__stage-banner__top-bar {
+.stageBannerTopBar {
 	display: flex;
 	justify-content: space-between;
 	padding: var(--s-2);
@@ -86,13 +86,13 @@
 	font-size: var(--fonts-xs);
 }
 
-.tournament-bracket__stage-banner__bottom-bar {
+.stageBannerBottomBar {
 	display: flex;
 	justify-content: flex-end;
 	padding: var(--s-2);
 }
 
-.tournament-bracket__stage-banner__undo-button {
+.stageBannerUndoButton {
 	border: 0;
 	background-color: var(--color-error);
 	color: var(--color-text);
@@ -104,21 +104,17 @@
 	bottom: 8px;
 }
 
-.tournament-bracket__stage-banner__end-set-button {
+.stageBannerEndSetButton {
 	right: 8px;
 	bottom: 8px;
 }
 
-.tournament-bracket__stage-banner:has(
-		.tournament-bracket__stage-banner__end-set-button
-	)
-	.tournament-bracket__stage-banner__undo-button:not(
-		.tournament-bracket__stage-banner__end-set-button
-	) {
+.stageBanner:has(.stageBannerEndSetButton)
+	.stageBannerUndoButton:not(.stageBannerEndSetButton) {
 	right: 72px;
 }
 
-.tournament-bracket__deadline-popover {
+.deadlinePopover {
 	position: absolute;
 	left: 8px;
 	bottom: 8px;
@@ -127,12 +123,12 @@
 	gap: var(--s-1);
 }
 
-.tournament-bracket__deadline-popover__trigger {
+.deadlinePopoverTrigger {
 	margin-block-start: 0;
 	background-color: var(--color-bg-higher) !important;
 }
 
-.tournament-bracket__deadline-indicator {
+.deadlineIndicator {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -143,56 +139,56 @@
 	font-size: var(--fonts-sm);
 }
 
-.tournament-bracket__deadline-indicator__warning {
+.deadlineIndicatorWarning {
 	background-color: var(--color-warning);
 	color: var(--color-text-inverse);
 }
 
-.tournament-bracket__deadline-indicator__error {
+.deadlineIndicatorError {
 	background-color: var(--color-error);
 	color: var(--color-text-inverse);
 }
 
-.tournament-bracket__stage-banner__top-bar__header {
+.stageBannerTopBarHeader {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	gap: var(--s-2);
 }
 
-.tournament-bracket__stage-banner__top-bar__map-text-big {
+.stageBannerTopBarMapTextBig {
 	display: none;
 }
 
 @media screen and (min-width: 480px) {
-	.tournament-bracket__stage-banner__top-bar {
+	.stageBannerTopBar {
 		font-size: initial;
 	}
 
-	.tournament-bracket__stage-banner__top-bar__map-text-small {
+	.stageBannerTopBarMapTextSmall {
 		display: none;
 	}
 
-	.tournament-bracket__stage-banner__top-bar__map-text-big {
+	.stageBannerTopBarMapTextBig {
 		display: initial;
 	}
 }
 
-.tournament-bracket__no-screen {
+.noScreen {
 	display: flex;
 	gap: var(--s-0-5);
 }
 
-.tournament-bracket__no-screen > svg {
+.noScreen > svg {
 	width: 24px;
 	fill: var(--color-success);
 }
 
-.tournament-bracket__no-screen__banned > svg {
+.noScreenBanned > svg {
 	fill: var(--color-error);
 }
 
-.tournament-bracket__during-match-actions {
+.duringMatchActions {
 	display: grid;
 	grid-template-areas:
 		"img"
@@ -201,27 +197,27 @@
 	grid-template-columns: 1fr;
 }
 
-.tournament-bracket__during-match-actions__actions {
+.duringMatchActionsActions {
 	display: flex;
 	justify-content: center;
 	color: var(--color-warning);
 	margin-block-start: var(--s-6);
 }
 
-.tournament-bracket__during-match-actions__amount-warning-paragraph {
+.duringMatchActionsAmountWarningParagraph {
 	display: flex;
 	align-items: center;
 	text-align: center;
 	font-size: var(--fonts-xs);
 }
 
-.tournament-bracket__during-match-actions__confirm-score-text {
+.duringMatchActionsConfirmScoreText {
 	font-size: var(--fonts-xs);
 	color: var(--color-text);
 	text-align: center;
 }
 
-.tournament-bracket__during-match-actions__rosters {
+.duringMatchActionsRosters {
 	display: flex;
 	width: 100%;
 	flex-wrap: wrap;
@@ -230,13 +226,13 @@
 	text-align: center;
 }
 
-.tournament-bracket__during-match-actions__radio-container {
+.duringMatchActionsRadioContainer {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.tournament-bracket__roster-buttons__container {
+.rosterButtonsContainer {
 	display: flex;
 	gap: var(--s-4);
 	align-items: center;
@@ -245,11 +241,11 @@
 	height: 30px;
 }
 
-.tournament-bracket__edit-roster-button {
+.editRosterButton {
 	font-style: italic;
 }
 
-.tournament-bracket__during-match-actions__team-players {
+.duringMatchActionsTeamPlayers {
 	display: flex;
 	width: 15rem;
 	flex-direction: column;
@@ -258,22 +254,22 @@
 	gap: var(--s-2);
 }
 
-.tournament-bracket__during-match-actions__checkbox-name {
+.duringMatchActionsCheckboxName {
 	display: flex;
 	align-items: center;
 	flex: 1;
 }
 
-.tournament-bracket__during-match-actions__checkbox-name:not(
-		.disabled-opaque
-	):not(.presentational):hover {
+.duringMatchActionsCheckboxName:not(.disabled-opaque):not(
+		.presentational
+	):hover {
 	border-radius: var(--rounded);
 	cursor: pointer;
 	outline: 2px solid var(--color-accent-low);
 	outline-offset: 2px;
 }
 
-.tournament-bracket__during-match-actions__checkbox {
+.duringMatchActionsCheckbox {
 	width: 40% !important;
 	height: 1.5rem !important;
 	appearance: none;
@@ -283,11 +279,11 @@
 	cursor: pointer;
 }
 
-.tournament-bracket__during-match-actions__checkbox:checked {
+.duringMatchActionsCheckbox:checked {
 	background-color: var(--color-accent);
 }
 
-.tournament-bracket__during-match-actions__checkbox::after {
+.duringMatchActionsCheckbox::after {
 	display: flex;
 	width: 100%;
 	height: 100%;
@@ -301,12 +297,12 @@
 	padding-block-end: 1px;
 }
 
-.tournament-bracket__during-match-actions__checkbox:checked::after {
+.duringMatchActionsCheckbox:checked::after {
 	color: var(--color-text-inverse);
 	content: "Playing";
 }
 
-.tournament-bracket__during-match-actions__player-name {
+.duringMatchActionsPlayerName {
 	display: flex;
 	width: 60%;
 	height: 1.5rem;
@@ -323,7 +319,7 @@
 	flex: 1;
 }
 
-.tournament-bracket__during-match-actions__player-name__inner {
+.duringMatchActionsPlayerNameInner {
 	white-space: nowrap;
 	overflow-x: hidden;
 	text-overflow: ellipsis;
@@ -331,17 +327,17 @@
 	max-width: 150px;
 }
 
-.tournament-bracket__during-match-actions__seed {
+.duringMatchActionsSeed {
 	font-size: var(--fonts-xxs);
 	color: var(--color-accent);
 }
 
-.tournament-bracket__during-match-actions__team-name {
+.duringMatchActionsTeamName {
 	color: var(--color-text);
 	font-weight: var(--bold);
 }
 
-.tournament-bracket__rosters {
+.rosters {
 	display: flex;
 	flex-wrap: wrap;
 	gap: var(--s-8);
@@ -350,25 +346,25 @@
 	flex-direction: column;
 }
 
-.tournament-bracket__rosters ul {
+.rosters ul {
 	padding: 0;
 	list-style: none;
 }
 
-.tournament-bracket__rosters__spaced-header {
+.rostersSpacedHeader {
 	min-height: 45px;
 	display: flex;
 	align-items: center;
 }
 
 @media screen and (min-width: 640px) {
-	.tournament-bracket__rosters {
+	.rosters {
 		justify-content: space-evenly;
 		flex-direction: row;
 	}
 }
 
-.tournament-bracket__mode-progress {
+.modeProgress {
 	display: block;
 	text-align: center;
 	overflow-x: auto;
@@ -376,13 +372,13 @@
 	margin-bottom: var(--s-1-5);
 }
 
-.tournament-bracket__mode-progress__inner {
+.modeProgressInner {
 	display: inline-flex;
 	gap: var(--s-4);
 	justify-content: flex-start;
 }
 
-.tournament-bracket__mode-progress__image {
+.modeProgressImage {
 	background-color: var(--color-bg-high);
 	border-radius: 100%;
 	padding: var(--s-2-5);
@@ -390,63 +386,63 @@
 	min-width: 40px;
 }
 
-.tournament-bracket__mode-progress__image > svg {
+.modeProgressImage > svg {
 	width: 20px;
 	height: 20px;
 }
 
-.tournament-bracket__mode-progress__image__notable {
+.modeProgressImageNotable {
 	background-color: var(--color-bg-higher);
 	border: none;
 	outline: 2px solid var(--color-bg-higher);
 }
 
-.tournament-bracket__mode-progress__image__team-one-win {
+.modeProgressImageTeamOneWin {
 	outline: 2px solid var(--color-accent);
 }
 
-.tournament-bracket__mode-progress__image__team-two-win {
+.modeProgressImageTeamTwoWin {
 	outline: 2px solid var(--color-accent);
 }
 
-.tournament-bracket__mode-progress__image__selected {
+.modeProgressImageSelected {
 	background-color: var(--color-bg-high);
 }
 
-.tournament-bracket__mode-progress__image__banned {
+.modeProgressImageBanned {
 	outline: 2px solid var(--color-error);
 	background-color: var(--color-bg-high);
 }
 
-.tournament-bracket__mode-progress__image__banned > img {
+.modeProgressImageBanned > img {
 	filter: grayscale(100%);
 }
 
-.tournament-bracket__mode-progress__image__banned__popover-trigger:focus-visible {
+.modeProgressImageBannedPopoverTrigger:focus-visible {
 	outline: none !important;
 }
 
-.tournament-bracket__team-one-dot {
+.teamOneDot {
 	border-radius: 100%;
 	background-color: var(--color-accent);
 	width: 8px;
 	height: 8px;
 }
 
-.tournament-bracket__team-two-dot {
+.teamTwoDot {
 	border-radius: 100%;
 	background-color: var(--color-accent);
 	width: 8px;
 	height: 8px;
 }
 
-.tournament-bracket__points-input {
+.pointsInput {
 	--input-width: 4.5rem;
 	padding: var(--s-3-5) var(--s-2) !important;
 	font-size: var(--fonts-sm);
 }
 
-.tournament-bracket__progress {
+.progress {
 	display: flex;
 	align-items: center;
 	background-color: var(--color-bg-higher);
@@ -457,17 +453,17 @@
 }
 
 @media screen and (min-width: 480px) {
-	.tournament-bracket__infos {
+	.infos {
 		flex-direction: row;
 	}
 }
 
-.tournament-bracket__bracket-nav {
+.bracketNav {
 	display: flex;
 	flex-wrap: wrap;
 }
 
-.tournament-bracket__bracket-nav__link {
+.bracketNavLink {
 	font-size: var(--fonts-xxs);
 	color: var(--color-text-high);
 	border-color: var(--color-bg-higher);
@@ -475,36 +471,34 @@
 	border-radius: 0;
 }
 
-.tournament-bracket__bracket-nav__link__big {
+.bracketNavLinkBig {
 	font-size: var(--fonts-lg);
 }
 
-.tournament-bracket__bracket-nav__link:active {
+.bracketNavLink:active {
 	transform: translateY(0px);
 }
 
-.tournament-bracket__bracket-nav__link:first-of-type {
+.bracketNavLink:first-of-type {
 	border-start-start-radius: var(--rounded);
 	border-end-start-radius: var(--rounded);
 }
 
-.tournament-bracket__bracket-nav__link:not(
-		.tournament-bracket__bracket-nav__link:first-of-type
-	) {
+.bracketNavLink:not(.bracketNavLink:first-of-type) {
 	margin-left: -2px;
 }
 
-.tournament-bracket__bracket-nav__link:last-of-type {
+.bracketNavLink:last-of-type {
 	border-start-end-radius: var(--rounded);
 	border-end-end-radius: var(--rounded);
 }
 
-.tournament-bracket__bracket-nav__link__selected {
+.bracketNavLinkSelected {
 	color: var(--color-text);
 	background-color: var(--color-bg-high);
 }
 
-.tournament-bracket__quick-action {
+.quickAction {
 	font-size: var(--fonts-xs);
 	color: var(--color-text);
 	background-color: var(--color-bg);
@@ -516,42 +510,42 @@
 	align-items: center;
 }
 
-.tournament-bracket__quick-action__spaced {
+.quickActionSpaced {
 	display: flex;
 	gap: var(--s-1-5);
 }
 
-.tournament-bracket__quick-action__very-spaced {
+.quickActionVerySpaced {
 	display: flex;
 	gap: var(--s-3);
 }
 
-.tournament-bracket__quick-action__checkmark {
+.quickActionCheckmark {
 	width: 1rem;
 	color: var(--color-success);
 }
 
-.tournament-bracket__bracket-nav__chevron {
+.bracketNavChevron {
 	margin-inline-start: var(--s-2);
 	font-size: var(--fonts-xxxs);
 	margin-block-end: -2px;
 }
 
-.tournament-bracket__button-row {
+.buttonRow {
 	display: none;
 }
 
 @media screen and (min-width: 600px) {
-	.tournament-bracket__menu {
+	.menu {
 		display: none;
 	}
 
-	.tournament-bracket__button-row {
+	.buttonRow {
 		display: inherit;
 	}
 }
 
-.tournament-bracket__compactify-button {
+.compactifyButton {
 	font-size: var(--fonts-xxs);
 	color: var(--color-text-high);
 	border-color: var(--color-bg-higher);
@@ -559,12 +553,12 @@
 	border-radius: var(--rounded);
 }
 
-.tournament-bracket__compactify-button svg {
+.compactifyButton svg {
 	min-width: 0.85rem;
 	max-width: 0.85rem;
 }
 
-.tournament-bracket__cast-info-container {
+.castInfoContainer {
 	display: flex;
 	gap: var(--s-2);
 	border-radius: var(--rounded);
@@ -572,7 +566,7 @@
 	width: max-content;
 }
 
-.tournament-bracket__cast-info-container__label {
+.castInfoContainerLabel {
 	padding: var(--s-2) var(--s-3-5);
 	text-transform: uppercase;
 	background-color: var(--color-bg-higher);
@@ -584,17 +578,17 @@
 	justify-content: center;
 }
 
-.tournament-bracket__cast-info-container__content {
+.castInfoContainerContent {
 	padding-block: var(--s-2);
 	display: flex;
 	align-items: center;
 }
 
-.tournament-bracket__stream-popover {
+.streamPopover {
 	width: 280px;
 }
 
-.finalize__badge-container {
+.finalizeBadgeContainer {
 	padding: var(--s-2);
 	background-color: black;
 	border-radius: var(--rounded);
diff --git a/app/features/tournament-organization/components/EventCalendar.tsx b/app/features/tournament-organization/components/EventCalendar.tsx
index 512b1cc05..8359f37ae 100644
--- a/app/features/tournament-organization/components/EventCalendar.tsx
+++ b/app/features/tournament-organization/components/EventCalendar.tsx
@@ -7,6 +7,7 @@ import { useIsMounted } from "~/hooks/useIsMounted";
 import { useTimeFormat } from "~/hooks/useTimeFormat";
 import { databaseTimestampToDate, nullPaddedDatesOfMonth } from "~/utils/dates";
 import type { loader } from "../loaders/org.$slug.server";
+import styles from "../tournament-organization.module.css";
 
 interface EventCalendarProps {
 	month: number;
@@ -33,11 +34,11 @@ export function EventCalendar({
 	});
 
 	return (
-		<div className="org__calendar__container">
+		<div className={styles.calendarContainer}>
 			<MonthSelector month={month} year={year} />
-			<div className="org__calendar">
+			<div className={styles.calendar}>
 				{dayHeaders.map((day) => (
-					<div key={day} className="org__calendar__day-header">
+					<div key={day} className={styles.calendarDayHeader}>
 						{day}
 					</div>
 				))}
@@ -79,19 +80,19 @@ function EventCalendarCell({
 
 	return (
 		<div
-			className={clsx("org__calendar__day", {
-				org__calendar__day__previous: !date,
-				org__calendar__day__today:
+			className={clsx(styles.calendarDay, {
+				[styles.calendarDayPrevious]: !date,
+				[styles.calendarDayToday]:
 					isMounted &&
 					date?.getDate() === new Date().getDate() &&
 					date?.getMonth() === new Date().getMonth() &&
 					date?.getFullYear() === new Date().getFullYear(),
 			})}
 		>
-			<div className="org__calendar__day__date">{date?.getUTCDate()}</div>
+			<div className={styles.calendarDayDate}>{date?.getUTCDate()}</div>
 			{events.length === 1 ? (
 				<img
-					className="org__calendar__day__logo"
+					className={styles.calendarDayLogo}
 					src={events[0].logoUrl ?? fallbackLogoUrl}
 					width={32}
 					height={32}
@@ -99,7 +100,7 @@ function EventCalendarCell({
 				/>
 			) : null}
 			{events.length > 1 ? (
-				<div className="org__calendar__day__many-events">{events.length}</div>
+				<div className={styles.calendarDayManyEvents}>{events.length}</div>
 			) : null}
 		</div>
 	);
@@ -115,7 +116,7 @@ function MonthSelector({ month, year }: { month: number; year: number }) {
 	const { formatDate } = useTimeFormat();
 
 	return (
-		<div className="org__calendar__month-selector">
+		<div className={styles.calendarMonthSelector}>
 			<LinkButton
 				variant="minimal"
 				aria-label="Previous month"
diff --git a/app/features/tournament-organization/components/SocialLinksList.tsx b/app/features/tournament-organization/components/SocialLinksList.tsx
index 374f6c032..fcfe08a5f 100644
--- a/app/features/tournament-organization/components/SocialLinksList.tsx
+++ b/app/features/tournament-organization/components/SocialLinksList.tsx
@@ -3,6 +3,7 @@ import { BskyIcon } from "~/components/icons/Bsky";
 import { LinkIcon } from "~/components/icons/Link";
 import { TwitchIcon } from "~/components/icons/Twitch";
 import { YouTubeIcon } from "~/components/icons/YouTube";
+import styles from "../tournament-organization.module.css";
 
 export function SocialLinksList({ links }: { links: string[] }) {
 	return (
@@ -18,12 +19,17 @@ function SocialLink({ url }: { url: string }) {
 	const type = urlToLinkType(url);
 
 	return (
-		<a href={url} target="_blank" rel="noreferrer" className="org__social-link">
+		<a
+			href={url}
+			target="_blank"
+			rel="noreferrer"
+			className={styles.socialLink}
+		>
 			<div
-				className={clsx("org__social-link__icon-container", {
-					youtube: type === "youtube",
-					twitch: type === "twitch",
-					bsky: type === "bsky",
+				className={clsx(styles.socialLinkIconContainer, {
+					[styles.socialLinkYoutube]: type === "youtube",
+					[styles.socialLinkTwitch]: type === "twitch",
+					[styles.socialLinkBsky]: type === "bsky",
 				})}
 			>
 				<SocialLinkIcon url={url} />
diff --git a/app/features/tournament-organization/routes/org.$slug.tsx b/app/features/tournament-organization/routes/org.$slug.tsx
index 3f8bc94c1..155eb1555 100644
--- a/app/features/tournament-organization/routes/org.$slug.tsx
+++ b/app/features/tournament-organization/routes/org.$slug.tsx
@@ -44,11 +44,10 @@ import { action } from "../actions/org.$slug.server";
 import { EventCalendar } from "../components/EventCalendar";
 import { SocialLinksList } from "../components/SocialLinksList";
 import { loader } from "../loaders/org.$slug.server";
+import styles from "../tournament-organization.module.css";
 import { TOURNAMENT_SERIES_EVENTS_PER_PAGE } from "../tournament-organization-constants";
 export { action, loader };
 
-import "../tournament-organization.css";
-
 export const meta: MetaFunction<typeof loader> = (args) => {
 	if (!args.data) return [];
 
@@ -262,7 +261,7 @@ function AllTournamentsView() {
 	const data = useLoaderData<typeof loader>();
 
 	return (
-		<div className="org__events-container">
+		<div className={styles.eventsContainer}>
 			<EventCalendar
 				month={data.month}
 				year={data.year}
@@ -439,7 +438,7 @@ function EventsList({
 }
 
 function SectionDivider({ children }: { children: React.ReactNode }) {
-	return <div className="org__section-divider">{children}</div>;
+	return <div className={styles.sectionDivider}>{children}</div>;
 }
 
 function EventInfo({
@@ -459,14 +458,14 @@ function EventInfo({
 						? tournamentPage(event.tournamentId)
 						: calendarEventPage(event.eventId)
 				}
-				className="org__event-info"
+				className={styles.eventInfo}
 			>
 				{event.logoUrl ? (
 					<img src={event.logoUrl} alt={event.name} width={38} height={38} />
 				) : null}
 				<div>
-					<div className="org__event-info__name">{event.name}</div>
-					<time className="org__event-info__time" suppressHydrationWarning>
+					<div>{event.name}</div>
+					<time className={styles.eventInfoTime} suppressHydrationWarning>
 						{formatDateTime(databaseTimestampToDate(event.startTime), {
 							day: "numeric",
 							month: "numeric",
@@ -562,7 +561,7 @@ function EventLeaderboard({
 		<div className="stack md">
 			{ownEntry ? (
 				<>
-					<ol className="org__leaderboard-list" start={ownEntry.placement}>
+					<ol className={styles.leaderboardList} start={ownEntry.placement}>
 						<li>
 							<EventLeaderboardRow entry={ownEntry.entry} />
 						</li>
@@ -570,7 +569,7 @@ function EventLeaderboard({
 					<Divider />
 				</>
 			) : null}
-			<ol className="org__leaderboard-list">
+			<ol className={styles.leaderboardList}>
 				{leaderboard.map((entry) => (
 					<li key={entry.user.discordId}>
 						<EventLeaderboardRow entry={entry} />
@@ -589,7 +588,7 @@ function EventLeaderboardRow({
 	>[number];
 }) {
 	return (
-		<div className="org__leaderboard-list__row">
+		<div className={styles.leaderboardListRow}>
 			<Link
 				to={userPage(entry.user)}
 				className="stack horizontal sm items-center font-semi-bold text-main-forced"
diff --git a/app/features/tournament-organization/tournament-organization.css b/app/features/tournament-organization/tournament-organization.module.css
similarity index 74%
rename from app/features/tournament-organization/tournament-organization.css
rename to app/features/tournament-organization/tournament-organization.module.css
index 51450fbdb..9deaaabba 100644
--- a/app/features/tournament-organization/tournament-organization.css
+++ b/app/features/tournament-organization/tournament-organization.module.css
@@ -1,4 +1,4 @@
-.org__calendar {
+.calendar {
 	display: grid;
 	grid-template-columns: repeat(7, max-content);
 	gap: var(--s-2);
@@ -6,7 +6,7 @@
 	overflow-x: auto;
 }
 
-.org__calendar__container {
+.calendarContainer {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-2);
@@ -14,12 +14,12 @@
 	overflow-x: visible;
 }
 
-.org__calendar__day-header {
+.calendarDayHeader {
 	font-size: var(--fonts-md);
 	font-weight: var(--semi-bold);
 }
 
-.org__calendar__day {
+.calendarDay {
 	width: var(--cell-size);
 	height: var(--cell-size);
 	font-size: var(--fonts-xs);
@@ -31,20 +31,20 @@
 	place-items: center;
 }
 
-.org__calendar__day__date {
+.calendarDayDate {
 	position: absolute;
 	top: 1px;
 	left: 6px;
 }
 
-.org__calendar__day__logo {
+.calendarDayLogo {
 	position: absolute;
 	border-radius: var(--rounded);
 	top: 18px;
 	left: 18px;
 }
 
-.org__calendar__day__many-events {
+.calendarDayManyEvents {
 	position: absolute;
 	border-radius: var(--rounded);
 	top: 18px;
@@ -58,16 +58,16 @@
 	background-color: var(--color-bg-higher);
 }
 
-.org__calendar__day__today {
+.calendarDayToday {
 	color: var(--color-accent);
 	font-weight: var(--bold);
 }
 
-.org__calendar__day__previous {
+.calendarDayPrevious {
 	background-color: var(--color-bg);
 }
 
-.org__calendar__month-selector {
+.calendarMonthSelector {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -75,16 +75,16 @@
 	font-weight: var(--bold);
 }
 
-.org__calendar__month-selector a {
+.calendarMonthSelector a {
 	font-size: var(--fonts-xl);
 }
 
-.org__calendar__month-selector > div {
+.calendarMonthSelector > div {
 	font-size: var(--fonts-lg);
 	margin-block-start: var(--s-1);
 }
 
-.org__section-divider {
+.sectionDivider {
 	font-size: var(--fonts-md);
 	font-weight: var(--bold);
 	color: var(--color-text-high);
@@ -93,26 +93,26 @@
 	padding-block: var(--s-1);
 }
 
-.org__events-container {
+.eventsContainer {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-16);
 }
 
 @media screen and (min-width: 768px) {
-	.org__events-container {
+	.eventsContainer {
 		flex-direction: row;
 		gap: var(--s-8);
 		overflow-x: initial;
 	}
 
-	.org__calendar__container {
+	.calendarContainer {
 		position: sticky;
 		top: 47px;
 	}
 }
 
-.org__event-info {
+.eventInfo {
 	display: flex;
 	align-items: center;
 	gap: var(--s-2);
@@ -121,37 +121,37 @@
 	width: max-content;
 }
 
-.org__event-info img {
+.eventInfo img {
 	border-radius: 100%;
 }
 
-.org__event-info__time {
+.eventInfoTime {
 	display: block;
 	color: var(--color-text-high);
 	font-size: var(--fonts-sm);
 }
 
-.org__leaderboard-list {
+.leaderboardList {
 	display: flex;
 	gap: var(--s-4);
 	flex-direction: column;
 }
 
-.org__leaderboard-list li::marker {
+.leaderboardList li::marker {
 	font-size: var(--fonts-lg);
 	font-weight: var(--bold);
 	color: var(--color-accent);
 	padding-inline-end: var(--s-2);
 }
 
-.org__leaderboard-list__row {
+.leaderboardListRow {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-2);
 	padding-inline-start: var(--s-2-5);
 }
 
-.org__social-link {
+.socialLink {
 	font-size: var(--fonts-sm);
 	color: var(--text-main);
 	display: flex;
@@ -160,11 +160,11 @@
 	max-width: max-content;
 }
 
-.org__social-link svg {
+.socialLink svg {
 	width: 18px;
 }
 
-.org__social-link__icon-container {
+.socialLinkIconContainer {
 	background-color: var(--color-bg-higher);
 	display: grid;
 	place-items: center;
@@ -172,14 +172,14 @@
 	padding: var(--s-2);
 }
 
-.org__social-link__icon-container.twitch svg {
+.socialLinkTwitch svg {
 	fill: #9146ff;
 }
 
-.org__social-link__icon-container.youtube svg {
+.socialLinkYoutube svg {
 	fill: #f00;
 }
 
-.org__social-link__icon-container.bsky path {
+.socialLinkBsky path {
 	fill: #1285fe;
 }
diff --git a/app/features/tournament-subs/routes/to.$id.subs.new.tsx b/app/features/tournament-subs/routes/to.$id.subs.new.tsx
index 8a6f45ad2..fd44ba0dd 100644
--- a/app/features/tournament-subs/routes/to.$id.subs.new.tsx
+++ b/app/features/tournament-subs/routes/to.$id.subs.new.tsx
@@ -19,6 +19,7 @@ import { TOURNAMENT_SUB } from "../tournament-subs-constants";
 export { action, loader };
 
 import clsx from "clsx";
+import { mainStyles } from "~/components/Main";
 import styles from "./to.$id.subs.new.module.css";
 
 export const handle: SendouRouteHandle = {
@@ -38,7 +39,7 @@ export default function NewTournamentSubPage() {
 	);
 
 	return (
-		<div className="half-width">
+		<div className={mainStyles.narrow}>
 			<Form method="post" className="stack md items-start">
 				<div className="stack">
 					<h2>{t("tournament:subs.addPost")}</h2>
diff --git a/app/features/tournament/components/TeamWithRoster.tsx b/app/features/tournament/components/TeamWithRoster.tsx
index d9af1c962..27b254934 100644
--- a/app/features/tournament/components/TeamWithRoster.tsx
+++ b/app/features/tournament/components/TeamWithRoster.tsx
@@ -9,6 +9,7 @@ import { databaseTimestampToDate } from "~/utils/dates";
 import { userPage } from "~/utils/urls";
 import { accountCreatedInTheLastSixMonths } from "~/utils/users";
 import { useTournament, useTournamentFriendCodes } from "../routes/to.$id";
+import styles from "../tournament.module.css";
 
 export function TeamWithRoster({
 	team,
@@ -31,29 +32,27 @@ export function TeamWithRoster({
 
 	return (
 		<div>
-			<div className="tournament__team-with-roster">
-				<div className="tournament__team-with-roster__name">
+			<div className={styles.teamWithRoster}>
+				<div className={styles.teamWithRosterName}>
 					<div className="stack horizontal sm justify-end items-end">
 						{teamLogoSrc ? <Avatar size="xxs" url={teamLogoSrc} /> : null}
 						{seed ? (
-							<div className="tournament__team-with-roster__seed">#{seed}</div>
+							<div className={styles.teamWithRosterSeed}>#{seed}</div>
 						) : null}
 					</div>{" "}
 					{teamPageUrl ? (
 						<Link
 							to={teamPageUrl}
-							className="tournament__team-with-roster__team-name"
+							className={styles.teamWithRosterTeamName}
 							data-testid="team-name"
 						>
 							{team.name}
 						</Link>
 					) : (
-						<span className="tournament__team-with-roster__team-name">
-							{team.name}
-						</span>
+						<span className={styles.teamWithRosterTeamName}>{team.name}</span>
 					)}
 				</div>
-				<ul className="tournament__team-with-roster__members">
+				<ul className={styles.teamWithRosterMembers}>
 					{team.members.map((member) => {
 						const friendCode = friendCodes?.[member.userId];
 						const isSub =
@@ -69,20 +68,22 @@ export function TeamWithRoster({
 						};
 
 						return (
-							<li key={member.userId} className="tournament__team-member-row">
+							<li key={member.userId} className={styles.teamMemberRow}>
 								{member.isOwner ? (
-									<span className="tournament__team-member-name__role text-theme">
+									<span className={`${styles.teamMemberNameRole} text-theme`}>
 										C
 									</span>
 								) : null}
 								{isSub && !member.isOwner ? (
-									<span className="tournament__team-member-name__role tournament__team-member-name__role__sub">
+									<span
+										className={`${styles.teamMemberNameRole} ${styles.teamMemberNameRoleSub}`}
+									>
 										S
 									</span>
 								) : null}
 								<div
-									className={clsx("tournament__team-with-roster__member", {
-										"tournament__team-with-roster__member__inactive":
+									className={clsx(styles.teamWithRosterMember, {
+										[styles.teamWithRosterMemberInactive]:
 											activePlayers && !activePlayers.includes(member.userId),
 									})}
 								>
@@ -90,13 +91,13 @@ export function TeamWithRoster({
 										user={member}
 										size="xxs"
 										className={clsx({
-											"tournament__team-with-roster__member__avatar-inactive":
+											[styles.teamWithRosterMemberAvatarInactive]:
 												activePlayers && !activePlayers.includes(member.userId),
 										})}
 									/>
 									<Link
 										to={userPage(member)}
-										className="tournament__team-member-name"
+										className={styles.teamMemberName}
 										data-testid="team-member-name"
 									>
 										{name()}
@@ -140,16 +141,15 @@ function TeamMapPool({
 }) {
 	return (
 		<div
-			className={clsx("tournament__team-with-roster__map-pool", {
-				"tournament__team-with-roster__map-pool__3-columns":
-					mapPool.length % 3 === 0,
+			className={clsx(styles.teamWithRosterMapPool, {
+				[styles.teamWithRosterMapPool3Columns]: mapPool.length % 3 === 0,
 			})}
 		>
 			{mapPool.map(({ mode, stageId }, i) => {
 				return (
 					<div key={i}>
 						<StageImage stageId={stageId} width={85} />
-						<div className="tournament__team-with-roster__map-pool__mode-info">
+						<div className={styles.teamWithRosterMapPoolModeInfo}>
 							<ModeImage mode={mode} size={16} />
 						</div>
 					</div>
diff --git a/app/features/tournament/components/TournamentStream.tsx b/app/features/tournament/components/TournamentStream.tsx
index f27165067..3c4a00b15 100644
--- a/app/features/tournament/components/TournamentStream.tsx
+++ b/app/features/tournament/components/TournamentStream.tsx
@@ -5,6 +5,7 @@ import { twitchThumbnailUrlToSrc } from "~/modules/twitch/utils";
 import { twitchUrl } from "~/utils/urls";
 import type { TournamentStreamsLoader } from "../loaders/to.$id.streams.server";
 import { useTournament } from "../routes/to.$id";
+import styles from "../tournament.module.css";
 
 export function TournamentStream({
 	stream,
@@ -37,17 +38,17 @@ export function TournamentStream({
 			) : null}
 			<div className="stack md horizontal justify-between">
 				{user && team ? (
-					<div className="tournament__stream__user-container">
+					<div className={styles.streamUserContainer}>
 						<Avatar size="xxs" user={user} /> {user.username}
 						<span className="text-theme-secondary">{team.name}</span>
 					</div>
 				) : (
-					<div className="tournament__stream__user-container">
+					<div className={styles.streamUserContainer}>
 						<Avatar size="xxs" url={tournament.ctx.logoUrl} />
 						Cast <span className="text-lighter">{stream.twitchUserName}</span>
 					</div>
 				)}
-				<div className="tournament__stream__viewer-count">
+				<div className={styles.streamViewerCount}>
 					<UserIcon />
 					{stream.viewerCount}
 				</div>
diff --git a/app/features/tournament/routes/to.$id.join.tsx b/app/features/tournament/routes/to.$id.join.tsx
index 1a2e5b94f..94443a783 100644
--- a/app/features/tournament/routes/to.$id.join.tsx
+++ b/app/features/tournament/routes/to.$id.join.tsx
@@ -11,6 +11,7 @@ import { assertUnreachable } from "~/utils/types";
 import { userEditProfilePage } from "~/utils/urls";
 import { action } from "../actions/to.$id.join.server";
 import { loader } from "../loaders/to.$id.join.server";
+import styles from "../tournament.module.css";
 import { validateCanJoinTeam } from "../tournament-utils";
 import { useTournament } from "./to.$id";
 export { action, loader };
@@ -80,7 +81,7 @@ export default function JoinTeamPage() {
 					</div>
 				) : null}
 			</div>
-			<Form method="post" className="tournament__invite-container">
+			<Form method="post" className={styles.inviteContainer}>
 				{validationStatus === "VALID" ? (
 					<div className="stack md items-center">
 						<SubmitButton size="big" isDisabled={!user?.friendCode}>
diff --git a/app/features/tournament/routes/to.$id.register.tsx b/app/features/tournament/routes/to.$id.register.tsx
index a8ecd934e..67b0f3f51 100644
--- a/app/features/tournament/routes/to.$id.register.tsx
+++ b/app/features/tournament/routes/to.$id.register.tsx
@@ -60,6 +60,7 @@ import { AlertIcon } from "../../../components/icons/Alert";
 import { action } from "../actions/to.$id.register.server";
 import type { TournamentRegisterPageLoader } from "../loaders/to.$id.register.server";
 import { loader } from "../loaders/to.$id.register.server";
+import styles from "../tournament.module.css";
 import { TOURNAMENT } from "../tournament-constants";
 import {
 	type CounterPickValidationStatus,
@@ -76,16 +77,16 @@ export default function TournamentRegisterPage() {
 
 	return (
 		<div className={clsx("stack lg", containerClassName("normal"))}>
-			<div className="tournament__logo-container">
+			<div className={styles.logoContainer}>
 				<img
 					src={tournament.ctx.logoUrl}
 					alt=""
-					className="tournament__logo"
+					className={styles.logo}
 					width={124}
 					height={124}
 				/>
 				<div>
-					<div className="tournament__title">{tournament.ctx.name}</div>
+					<div className={styles.title}>{tournament.ctx.name}</div>
 					<div>
 						{tournament.ctx.organization ? (
 							<Link
@@ -106,15 +107,15 @@ export default function TournamentRegisterPage() {
 								to={userPage(tournament.ctx.author)}
 								className="stack horizontal xs items-center text-lighter"
 							>
-								<UserIcon className="tournament__info__icon" />{" "}
+								<UserIcon className={styles.infoIcon} />{" "}
 								{tournament.ctx.author.username}
 							</Link>
 						)}
 					</div>
 					{!tournament.isLeagueSignup ? (
-						<div className="tournament__by mt-2">
+						<div className={clsx(styles.by, "mt-2")}>
 							<div className="stack horizontal xs items-center">
-								<ClockIcon className="tournament__info__icon" />{" "}
+								<ClockIcon className={styles.infoIcon} />{" "}
 								{isMounted ? (
 									<TimePopover
 										time={tournament.ctx.startTime}
@@ -131,15 +132,15 @@ export default function TournamentRegisterPage() {
 					) : null}
 					<div className="stack horizontal sm mt-1">
 						{tournament.ranked ? (
-							<div className="tournament__badge tournament__badge__ranked">
+							<div className={clsx(styles.badge, styles.badgeRanked)}>
 								Ranked
 							</div>
 						) : (
-							<div className="tournament__badge tournament__badge__unranked">
+							<div className={clsx(styles.badge, styles.badgeUnranked)}>
 								Unranked
 							</div>
 						)}
-						<div className="tournament__badge tournament__badge__modes">
+						<div className={clsx(styles.badge, styles.badgeModes)}>
 							{tournament.modesIncluded.map((mode) => (
 								<ModeImage key={mode} mode={mode} size={16} />
 							))}
@@ -216,7 +217,7 @@ function TournamentRegisterInfoTabs() {
 							</div>
 						) : null}
 
-						<div className="tournament__info__description">
+						<div className={styles.infoDescription}>
 							<Markdown options={{ wrapper: React.Fragment }}>
 								{tournament.ctx.description ?? ""}
 							</Markdown>
@@ -228,7 +229,7 @@ function TournamentRegisterInfoTabs() {
 
 				{tournament.ctx.rules ? (
 					<SendouTabPanel id="rules">
-						<div className="tournament__info__description">
+						<div className={styles.infoDescription}>
 							<Markdown options={{ wrapper: React.Fragment }}>
 								{tournament.ctx.rules ?? ""}
 							</Markdown>
@@ -436,10 +437,10 @@ function RegistrationProgress({
 
 	return (
 		<div>
-			<h3 className="tournament__section-header text-center">
+			<h3 className={clsx(styles.sectionHeader, "text-center")}>
 				{t("tournament:pre.steps.header")}
 			</h3>
-			<section className="tournament__section stack md">
+			<section className={clsx(styles.section, "stack md")}>
 				<div className="stack horizontal lg justify-center text-sm font-semi-bold">
 					{steps.map((step, i) => {
 						return (
@@ -450,13 +451,17 @@ function RegistrationProgress({
 								{step.name}
 								{step.status === "completed" ? (
 									<CheckmarkIcon
-										className="tournament__section__icon fill-success"
+										className={clsx(styles.sectionIcon, "fill-success")}
 										testId={`checkmark-icon-num-${i + 1}`}
 									/>
 								) : step.status === "notice" ? (
-									<AlertIcon className="tournament__section__icon fill-info p-1" />
+									<AlertIcon
+										className={clsx(styles.sectionIcon, "fill-info p-1")}
+									/>
 								) : (
-									<CrossIcon className="tournament__section__icon fill-error" />
+									<CrossIcon
+										className={clsx(styles.sectionIcon, "fill-error")}
+									/>
 								)}
 							</div>
 						);
@@ -480,7 +485,7 @@ function RegistrationProgress({
 					/>
 				) : null}
 			</section>
-			<div className="tournament__section__warning">
+			<div className={styles.sectionWarning}>
 				{regClosesBeforeStart || tournament.isLeagueSignup ? (
 					<span className="text-warning">
 						Registration closes at {registrationClosesAtString}
@@ -663,7 +668,7 @@ function TeamInfo({
 	return (
 		<div>
 			<div className="stack horizontal justify-between">
-				<h3 className="tournament__section-header">
+				<h3 className={styles.sectionHeader}>
 					2. {t("tournament:pre.info.header")}
 				</h3>
 				{canUnregister &&
@@ -699,7 +704,7 @@ function TeamInfo({
 					</FormWithConfirm>
 				) : null}
 			</div>
-			<section className="tournament__section">
+			<section className={styles.section}>
 				<Form method="post" className="stack md items-center" ref={ref}>
 					<input type="hidden" name="_action" value="UPSERT_TEAM" />
 					{signUpWithTeamId ? (
@@ -707,7 +712,7 @@ function TeamInfo({
 					) : null}
 					<div className="stack sm-plus items-center">
 						{data && data.teams.length > 0 && tournament.registrationOpen ? (
-							<div className="tournament__section__input-container">
+							<div className={styles.sectionInputContainer}>
 								<Label htmlFor="signingUpAs">Team signing up as</Label>
 								<select
 									id="signingUpAs"
@@ -733,7 +738,7 @@ function TeamInfo({
 						) : null}
 
 						{!signUpWithTeamId ? (
-							<div className="tournament__section__input-container">
+							<div className={styles.sectionInputContainer}>
 								<Label htmlFor="teamName">
 									{data && data.teams.length > 0
 										? "Pick-up name"
@@ -755,7 +760,7 @@ function TeamInfo({
 							<input type="hidden" name="teamName" value={teamName} />
 						)}
 						{tournament.registrationOpen || avatarUrl ? (
-							<div className="tournament__section__input-container">
+							<div className={styles.sectionInputContainer}>
 								<Label htmlFor="logo">Logo</Label>
 								{avatarUrl ? (
 									<div className="stack horizontal md items-center">
@@ -863,14 +868,14 @@ function FriendCode() {
 
 	return (
 		<div>
-			<h3 className="tournament__section-header">1. Friend code</h3>
-			<section className="tournament__section">
-				<div className="tournament__section__input-container mx-auto">
+			<h3 className={styles.sectionHeader}>1. Friend code</h3>
+			<section className={styles.section}>
+				<div className={clsx(styles.sectionInputContainer, "mx-auto")}>
 					<FriendCodeInput friendCode={user?.friendCode} />
 				</div>
 			</section>
 			{user?.friendCode ? (
-				<div className="tournament__section__warning">
+				<div className={styles.sectionWarning}>
 					Is the friend code above wrong? Post a message on the{" "}
 					<a
 						href={SENDOU_INK_DISCORD_URL}
@@ -889,10 +894,10 @@ function FriendCode() {
 function GoogleFormsLink() {
 	return (
 		<div>
-			<h3 className="tournament__section-header">
+			<h3 className={styles.sectionHeader}>
 				Additional Requirement: Google Form
 			</h3>
-			<section className="tournament__section stack lg items-center">
+			<section className={clsx(styles.section, "stack lg items-center")}>
 				<a
 					href={import.meta.env.VITE_LEAGUE_GOOGLE_FORM_URL}
 					className="py-4 font-bold"
@@ -902,7 +907,7 @@ function GoogleFormsLink() {
 					Answer survey hosted on Google Forms
 				</a>
 			</section>
-			<div className="tournament__section__warning">
+			<div className={styles.sectionWarning}>
 				Answer to additional question about your team's preferred match time and
 				info to help with seeding
 			</div>
@@ -963,10 +968,10 @@ function FillRoster({
 
 	return (
 		<div>
-			<h3 className="tournament__section-header">
+			<h3 className={styles.sectionHeader}>
 				3. {t("tournament:pre.roster.header")}
 			</h3>
-			<section className="tournament__section stack lg items-center">
+			<section className={clsx(styles.section, "stack lg items-center")}>
 				{playersAvailableToDirectlyAdd.length > 0 && canAddMembers ? (
 					<>
 						<DirectlyAddPlayerSelect
@@ -992,7 +997,7 @@ function FillRoster({
 						</div>
 					</div>
 				) : null}
-				<div className="tournament__roster-grid">
+				<div className={styles.rosterGrid}>
 					{ownTeamMembers.map((member, i) => {
 						return (
 							<div
@@ -1002,7 +1007,7 @@ function FillRoster({
 							>
 								<Avatar size="xsm" user={member} />
 								{tournament.ctx.settings.requireInGameNames ? (
-									<div className="tournament__roster-grid__member-name">
+									<div className={styles.rosterGridMemberName}>
 										<div className="text-center">
 											{member.inGameName ?? member.username}
 										</div>
@@ -1013,7 +1018,7 @@ function FillRoster({
 										) : null}
 									</div>
 								) : (
-									<div className="tournament__roster-grid__member-name">
+									<div className={styles.rosterGridMemberName}>
 										{member.username}
 									</div>
 								)}
@@ -1022,7 +1027,7 @@ function FillRoster({
 					})}
 					{new Array(missingMembers).fill(null).map((_, i) => {
 						return (
-							<div key={i} className="tournament__missing-player">
+							<div key={i} className={styles.missingPlayer}>
 								?
 							</div>
 						);
@@ -1031,7 +1036,10 @@ function FillRoster({
 						return (
 							<div
 								key={i}
-								className="tournament__missing-player tournament__missing-player__optional"
+								className={clsx(
+									styles.missingPlayer,
+									styles.missingPlayerOptional,
+								)}
 							>
 								?
 							</div>
@@ -1043,13 +1051,13 @@ function FillRoster({
 				) : null}
 			</section>
 			{tournament.ctx.settings.requireInGameNames ? (
-				<div className="tournament__section__warning text-warning-important">
+				<div className={clsx(styles.sectionWarning, "text-warning-important")}>
 					Note that you are expected to use the in-game names as listed above.
 					Playing in the event with a different name or using the alias feature
 					might result in disqualification.
 				</div>
 			) : (
-				<div className="tournament__section__warning">
+				<div className={styles.sectionWarning}>
 					{tournament.minMembersPerTeam <= 3
 						? t("tournament:pre.roster.footer.noSubs", {
 								format: `${tournament.minMembersPerTeam}v${tournament.minMembersPerTeam}`,
@@ -1184,10 +1192,10 @@ function CounterPickMapPoolPicker() {
 
 	return (
 		<div>
-			<h3 className="tournament__section-header">
+			<h3 className={styles.sectionHeader}>
 				4. {t("tournament:pre.pool.header")}
 			</h3>
-			<section className="tournament__section">
+			<section className={styles.section}>
 				<fetcher.Form method="post" className="stack lg">
 					<input
 						type="hidden"
diff --git a/app/features/tournament/routes/to.$id.results.tsx b/app/features/tournament/routes/to.$id.results.tsx
index 01edba76c..4156eb74c 100644
--- a/app/features/tournament/routes/to.$id.results.tsx
+++ b/app/features/tournament/routes/to.$id.results.tsx
@@ -19,6 +19,7 @@ import {
 	tournamentTeamPage,
 } from "~/utils/urls";
 import * as Standings from "../core/Standings";
+import styles from "../tournament.module.css";
 import { useTournament } from "./to.$id";
 
 export default function TournamentResultsPage() {
@@ -135,7 +136,7 @@ function ResultsTable({ standings }: { standings: Standing[] }) {
 										tournamentId: tournament.ctx.id,
 										tournamentTeamId: standing.team.id,
 									})}
-									className="tournament__standings__team-name"
+									className={styles.standingsTeamName}
 									data-testid="result-team-name"
 								>
 									{teamLogoSrc ? <Avatar size="xs" url={teamLogoSrc} /> : null}{" "}
@@ -190,7 +191,7 @@ function MatchHistoryRow({ teamId }: { teamId: number }) {
 				return (
 					<React.Fragment key={match.id}>
 						{bracketChanged ? (
-							<div className="tournament__standings__divider" />
+							<div className={styles.standingsDivider} />
 						) : null}
 						<MatchResultSquare result={match.result} matchId={match.id}>
 							{match.vsSeed}
@@ -219,9 +220,9 @@ function MatchResultSquare({
 				matchId,
 				tournamentId: tournament.ctx.id,
 			})}
-			className={clsx("tournament__standings__match-result-square", {
-				"tournament__standings__match-result-square--win": result === "win",
-				"tournament__standings__match-result-square--loss": result === "loss",
+			className={clsx(styles.standingsMatchResultSquare, {
+				[styles.standingsMatchResultSquareWin]: result === "win",
+				[styles.standingsMatchResultSquareLoss]: result === "loss",
 			})}
 		>
 			{children}
diff --git a/app/features/tournament/routes/to.$id.seeds.tsx b/app/features/tournament/routes/to.$id.seeds.tsx
index 7eff713ef..4a11c6d80 100644
--- a/app/features/tournament/routes/to.$id.seeds.tsx
+++ b/app/features/tournament/routes/to.$id.seeds.tsx
@@ -31,6 +31,7 @@ import { InfoPopover } from "../../../components/InfoPopover";
 import { ordinalToRoundedSp } from "../../mmr/mmr-utils";
 import { action } from "../actions/to.$id.seeds.server";
 import { loader } from "../loaders/to.$id.seeds.server";
+import styles from "../tournament.module.css";
 import { useTournament } from "./to.$id";
 export { loader, action };
 
@@ -90,7 +91,7 @@ export default function TournamentSeedsPage() {
 					</div>
 				) : (
 					<SendouButton
-						className="tournament__seeds__order-button"
+						className={styles.seedsOrderButton}
 						variant="minimal"
 						size="small"
 						type="button"
@@ -118,11 +119,16 @@ export default function TournamentSeedsPage() {
 				/>
 			) : null}
 			<ul>
-				<li className="tournament__seeds__teams-list-row">
-					<div className="tournament__seeds__teams-container__header" />
-					<div className="tournament__seeds__teams-container__header" />
-					<div className="tournament__seeds__teams-container__header">Name</div>
-					<div className="tournament__seeds__teams-container__header stack horizontal xxs">
+				<li className={styles.seedsTeamsListRow}>
+					<div className={styles.seedsTeamsContainerHeader} />
+					<div className={styles.seedsTeamsContainerHeader} />
+					<div className={styles.seedsTeamsContainerHeader}>Name</div>
+					<div
+						className={clsx(
+							styles.seedsTeamsContainerHeader,
+							"stack horizontal xxs",
+						)}
+					>
 						SP
 						<InfoPopover tiny>
 							Seeding point is a value that tracks players' head-to-head
@@ -130,9 +136,7 @@ export default function TournamentSeedsPage() {
 							different points.
 						</InfoPopover>
 					</div>
-					<div className="tournament__seeds__teams-container__header">
-						Players
-					</div>
+					<div className={styles.seedsTeamsContainerHeader}>Players</div>
 				</li>
 				<DndContext
 					id="team-seed-sorter"
@@ -170,14 +174,10 @@ export default function TournamentSeedsPage() {
 								id={team.id}
 								testId={`seed-team-${team.id}`}
 								disabled={navigation.state !== "idle"}
-								liClassName={clsx(
-									"tournament__seeds__teams-list-row",
-									"sortable",
-									{
-										disabled: navigation.state !== "idle",
-										invisible: activeTeam?.id === team.id,
-									},
-								)}
+								liClassName={clsx(styles.seedsTeamsListRow, "sortable", {
+									disabled: navigation.state !== "idle",
+									invisible: activeTeam?.id === team.id,
+								})}
 							>
 								<RowContents
 									team={team}
@@ -195,7 +195,7 @@ export default function TournamentSeedsPage() {
 
 					<DragOverlay>
 						{activeTeam && (
-							<li className="tournament__seeds__teams-list-row active">
+							<li className={clsx(styles.seedsTeamsListRow, "active")}>
 								<RowContents
 									team={activeTeam}
 									teamSeedingSkill={{
@@ -338,7 +338,7 @@ function SeedAlert({ teamOrder }: { teamOrder: number[] }) {
 	const teamOrderChanged = teamOrder.some((id, i) => id !== teamOrderInDb[i]);
 
 	return (
-		<fetcher.Form method="post" className="tournament__seeds__form">
+		<fetcher.Form method="post" className={styles.seedsForm}>
 			<input type="hidden" name="tournamentId" value={tournament.ctx.id} />
 			<input type="hidden" name="seeds" value={JSON.stringify(teamOrder)} />
 			<input type="hidden" name="_action" value="UPDATE_SEEDS" />
@@ -382,7 +382,7 @@ function RowContents({
 		<>
 			<div>{seed}</div>
 			<div>{logoUrl ? <Avatar url={logoUrl} size="xxs" /> : null}</div>
-			<div className="tournament__seeds__team-name">
+			<div className={styles.seedsTeamName}>
 				{team.checkIns.length > 0 ? "✅ " : "❌ "} {team.name}
 			</div>
 			<div className={clsx({ "text-warning": teamSeedingSkill.outOfOrder })}>
@@ -391,10 +391,10 @@ function RowContents({
 			<div className="stack horizontal sm">
 				{team.members.map((member) => {
 					return (
-						<div key={member.userId} className="tournament__seeds__team-member">
+						<div key={member.userId} className={styles.seedsTeamMember}>
 							<Link
 								to={userResultsPage(member, true)}
-								className="tournament__seeds__team-member__name"
+								className={styles.seedsTeamMemberName}
 							>
 								{member.username}
 							</Link>
diff --git a/app/features/tournament/routes/to.$id.teams.$tid.tsx b/app/features/tournament/routes/to.$id.teams.$tid.tsx
index bcf693767..8480f7b43 100644
--- a/app/features/tournament/routes/to.$id.teams.$tid.tsx
+++ b/app/features/tournament/routes/to.$id.teams.$tid.tsx
@@ -23,6 +23,7 @@ import { TeamWithRoster } from "../components/TeamWithRoster";
 import * as Standings from "../core/Standings";
 import type { PlayedSet } from "../core/sets.server";
 import { loader } from "../loaders/to.$id.teams.$tid.server";
+import styles from "../tournament.module.css";
 import { useTournament } from "./to.$id";
 export { loader };
 
@@ -86,7 +87,7 @@ export default function TournamentTeamPage() {
 					teamsCount={tournament.ctx.teams.length}
 				/>
 			) : null}
-			<div className="tournament__team__sets">
+			<div className={styles.teamSets}>
 				{data.sets.map((set) => {
 					return <SetInfo key={set.tournamentMatchId} set={set} team={team} />;
 				})}
@@ -118,46 +119,44 @@ function StatSquares({
 	)?.placement;
 
 	return (
-		<div className="tournament__team__stats">
-			<div className="tournament__team__stat">
-				<div className="tournament__team__stat__title">
+		<div className={styles.teamStats}>
+			<div className={styles.teamStat}>
+				<div className={styles.teamStatTitle}>
 					{t("tournament:team.setWins")}
 				</div>
-				<div className="tournament__team__stat__main">
+				<div className={styles.teamStatMain}>
 					{data.winCounts.sets.won} / {data.winCounts.sets.total}
 				</div>
-				<div className="tournament__team__stat__sub">
+				<div className={styles.teamStatSub}>
 					{data.winCounts.sets.percentage}%
 				</div>
 			</div>
 
-			<div className="tournament__team__stat">
-				<div className="tournament__team__stat__title">
+			<div className={styles.teamStat}>
+				<div className={styles.teamStatTitle}>
 					{t("tournament:team.mapWins")}
 				</div>
-				<div className="tournament__team__stat__main">
+				<div className={styles.teamStatMain}>
 					{data.winCounts.maps.won} / {data.winCounts.maps.total}
 				</div>
-				<div className="tournament__team__stat__sub">
+				<div className={styles.teamStatSub}>
 					{data.winCounts.maps.percentage}%
 				</div>
 			</div>
 
-			<div className="tournament__team__stat">
-				<div className="tournament__team__stat__title">
-					{t("tournament:team.seed")}
-				</div>
-				<div className="tournament__team__stat__main">{seed}</div>
-				<div className="tournament__team__stat__sub">
+			<div className={styles.teamStat}>
+				<div className={styles.teamStatTitle}>{t("tournament:team.seed")}</div>
+				<div className={styles.teamStatMain}>{seed}</div>
+				<div className={styles.teamStatSub}>
 					{t("tournament:team.seed.footer", { count: teamsCount })}
 				</div>
 			</div>
 
-			<div className="tournament__team__stat">
-				<div className="tournament__team__stat__title">
+			<div className={styles.teamStat}>
+				<div className={styles.teamStatTitle}>
 					{t("tournament:team.placement")}
 				</div>
-				<div className="tournament__team__stat__main">
+				<div className={styles.teamStatMain}>
 					{placement ? <Placement placement={placement} textOnly /> : "-"}
 					{undergroundPlacement ? (
 						<>
@@ -167,12 +166,12 @@ function StatSquares({
 					) : null}
 				</div>
 				{undergroundPlacement ? (
-					<div className="tournament__team__stat__sub">
+					<div className={styles.teamStatSub}>
 						{t("tournament:team.placement.footer")}
 					</div>
 				) : null}
 				{standingsResult.type === "multi" ? (
-					<div className="tournament__team__stat__sub">
+					<div className={styles.teamStatSub}>
 						{
 							standingsResult.standings.find((s) =>
 								s.standings.some((s) => s.team.id === data.tournamentTeamId),
@@ -223,17 +222,15 @@ function SetInfo({ set, team }: { set: PlayedSet; team: TournamentDataTeam }) {
 		tournament.matchContextNamesById(set.tournamentMatchId);
 
 	return (
-		<div className="tournament__team__set">
-			<div className="tournament__team__set__top-container">
-				<div className="tournament__team__set__score">
-					{set.score.join("-")}
-				</div>
+		<div className={styles.teamSet}>
+			<div className={styles.teamSetTopContainer}>
+				<div className={styles.teamSetScore}>{set.score.join("-")}</div>
 				<Link
 					to={tournamentMatchPage({
 						matchId: set.tournamentMatchId,
 						tournamentId: tournament.ctx.id,
 					})}
-					className="tournament__team__set__round-name"
+					className={styles.teamSetRoundName}
 				>
 					{roundNameWithoutMatchIdentifier}{" "}
 					{tournament.ctx.settings.bracketProgression.length > 1 ? (
@@ -241,7 +238,7 @@ function SetInfo({ set, team }: { set: PlayedSet; team: TournamentDataTeam }) {
 					) : null}
 				</Link>
 			</div>
-			<div className="overlap-divider">
+			<div className={styles.overlapDivider}>
 				<div className="stack horizontal sm">
 					{set.maps.map(({ stageId, modeShort, result, source }, i) => {
 						return (
@@ -252,15 +249,15 @@ function SetInfo({ set, team }: { set: PlayedSet; team: TournamentDataTeam }) {
 										<ModeImage
 											mode={modeShort}
 											size={20}
-											containerClassName={clsx("tournament__team__set__mode", {
-												tournament__team__set__mode__loss: result === "loss",
+											containerClassName={clsx(styles.teamSetMode, {
+												[styles.teamSetModeLoss]: result === "loss",
 											})}
 										/>
 									</SendouButton>
 								}
 								placement="top"
 							>
-								<div className="tournament__team__set__stage-container">
+								<div className={styles.teamSetStageContainer}>
 									<StageImage
 										stageId={stageId}
 										width={125}
@@ -273,24 +270,24 @@ function SetInfo({ set, team }: { set: PlayedSet; team: TournamentDataTeam }) {
 					})}
 				</div>
 			</div>
-			<div className="tournament__team__set__opponent">
-				<div className="tournament__team__set__opponent__vs">vs.</div>
+			<div className={styles.teamSetOpponent}>
+				<div className={styles.teamSetOpponentVs}>vs.</div>
 				<Link
 					to={tournamentTeamPage({
 						tournamentTeamId: set.opponent.id,
 						tournamentId: tournament.ctx.id,
 					})}
-					className="tournament__team__set__opponent__team"
+					className={styles.teamSetOpponentTeam}
 				>
 					{set.opponent.name}
 				</Link>
-				<div className="tournament__team__set__opponent__members">
+				<div className={styles.teamSetOpponentMembers}>
 					{set.opponent.roster.map((user) => {
 						return (
 							<Link
 								to={userPage(user)}
 								key={user.id}
-								className="tournament__team__set__opponent__member"
+								className={styles.teamSetOpponentMember}
 							>
 								<Avatar user={user} size="xxs" />
 								{user.username}
diff --git a/app/features/tournament/routes/to.$id.tsx b/app/features/tournament/routes/to.$id.tsx
index 8224fafa6..94e50f215 100644
--- a/app/features/tournament/routes/to.$id.tsx
+++ b/app/features/tournament/routes/to.$id.tsx
@@ -27,9 +27,6 @@ import { metaTags } from "../../../utils/remix";
 import { loader, type TournamentLoaderData } from "../loaders/to.$id.server";
 export { loader };
 
-import "~/styles/calendar-event.css";
-import "../tournament.css";
-
 export const shouldRevalidate: ShouldRevalidateFunction = (args) => {
 	const navigatedToMatchPage =
 		typeof args.nextParams.mid === "string" &&
diff --git a/app/features/tournament/tournament.css b/app/features/tournament/tournament.module.css
similarity index 69%
rename from app/features/tournament/tournament.css
rename to app/features/tournament/tournament.module.css
index 5c48e8471..5fc934772 100644
--- a/app/features/tournament/tournament.css
+++ b/app/features/tournament/tournament.module.css
@@ -1,35 +1,35 @@
-.tournament__action-section {
+.actionSection {
 	padding: var(--s-0-5) var(--s-6) var(--s-6) var(--s-6);
 	border-radius: var(--rounded);
 	background-color: var(--color-bg-high);
 }
 
-.tournament__action-section__top-padded {
+.actionSectionTopPadded {
 	padding: var(--s-3) var(--s-6) var(--s-6) var(--s-6);
 }
 
-.tournament__action-section-title {
+.actionSectionTitle {
 	font-size: var(--fonts-lg);
 	font-weight: var(--bold);
 }
 
-.tournament__action-side-note {
+.actionSideNote {
 	color: var(--color-text-high);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 }
 
-.tournament__chat-container {
+.chatContainer {
 	top: var(--sticky-top);
 	position: sticky;
 	width: 100%;
 }
 
-.tournament__chat-messages-container {
+.chatMessagesContainer {
 	height: 350px;
 }
 
-.tournament__map-pool-counts {
+.mapPoolCounts {
 	display: grid;
 	width: 250px;
 	margin: 0 auto;
@@ -40,43 +40,43 @@
 	row-gap: var(--s-2);
 }
 
-.tournament__summary-content {
+.summaryContent {
 	display: inline-flex;
 	gap: var(--s-3);
 }
 
-.tournament__summary-content > svg {
+.summaryContent > svg {
 	width: 1rem;
 }
 
-.tournament__round-container {
+.roundContainer {
 	width: 250px;
 	margin: 0 auto;
 }
 
-.tournament__select-container > label {
+.selectContainer > label {
 	margin-left: var(--s-2-5);
 }
 
-.tournament__teams-container {
+.teamsContainer {
 	display: flex;
 	justify-content: center;
 	gap: var(--s-4);
 }
 
-.tournament__team-select {
+.teamSelect {
 	width: 150px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.tournament__bo-radios-container {
+.boRadiosContainer {
 	display: flex;
 	justify-content: center;
 	gap: var(--s-4);
 }
 
-.tournament__map-list {
+.mapList {
 	display: grid;
 	justify-content: center;
 	column-gap: var(--s-4);
@@ -85,45 +85,45 @@
 	grid-template-columns: max-content max-content;
 }
 
-.tournament__pick-info {
+.pickInfo {
 	align-self: center;
 	font-size: var(--fonts-xxxs);
 }
 
-.tournament__pick-info.team-1 {
+.pickInfoTeam1 {
 	color: var(--color-info);
 }
 
-.tournament__pick-info.team-2 {
+.pickInfoTeam2 {
 	color: var(--color-error-high);
 }
 
-.tournament__pick-info.tiebreaker {
+.pickInfoTiebreaker {
 	color: var(--color-warning-high);
 }
 
-.tournament__pick-info.both {
+.pickInfoBoth {
 	color: var(--color-success-high);
 }
 
-.tournament__stage-listed {
+.stageListed {
 	justify-self: flex-start;
 }
 
-.tournament__team-with-roster {
+.teamWithRoster {
 	display: flex;
 	width: 100%;
 	align-items: center;
 }
 
-.tournament__team-with-roster__name {
+.teamWithRosterName {
 	flex: 1;
 	font-weight: var(--bold);
 	padding-inline-end: var(--s-4);
 	text-align: right;
 }
 
-.tournament__team-with-roster__members {
+.teamWithRosterMembers {
 	display: flex;
 	flex: 1;
 	flex-direction: column;
@@ -135,23 +135,23 @@
 	padding-block: var(--s-3);
 }
 
-.tournament__team-with-roster__member {
+.teamWithRosterMember {
 	display: grid;
 	gap: var(--s-1-5);
 	grid-template-columns: max-content max-content 1fr;
 }
 
-.tournament__team-with-roster__member__inactive {
+.teamWithRosterMemberInactive {
 	text-decoration: line-through;
 	color: var(--color-text-high);
 	text-decoration-thickness: 2px;
 }
 
-.tournament__team-with-roster__member__avatar-inactive {
+.teamWithRosterMemberAvatarInactive {
 	opacity: 0.4;
 }
 
-.tournament__team-with-roster__map-pool {
+.teamWithRosterMapPool {
 	display: grid;
 	grid-template-columns: max-content max-content max-content max-content;
 	border-radius: var(--rounded);
@@ -161,11 +161,11 @@
 	overflow: hidden;
 }
 
-.tournament__team-with-roster__map-pool.tournament__team-with-roster__map-pool__3-columns {
+.teamWithRosterMapPool3Columns {
 	grid-template-columns: max-content max-content max-content;
 }
 
-.tournament__team-with-roster__map-pool__mode-info {
+.teamWithRosterMapPoolModeInfo {
 	background-color: var(--color-bg);
 	display: flex;
 	font-size: var(--fonts-xxs);
@@ -176,22 +176,22 @@
 	padding-block: var(--s-0-5);
 }
 
-.tournament__team-with-roster__seed {
+.teamWithRosterSeed {
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
 	color: var(--color-text-high);
 }
 
-.tournament__team-with-roster__team-name {
+.teamWithRosterTeamName {
 	word-break: break-word;
 }
 
-.tournament__team-member-row {
+.teamMemberRow {
 	list-style: none;
 	position: relative;
 }
 
-.tournament__team-member-name {
+.teamMemberName {
 	overflow: hidden;
 	color: var(--color-text);
 	text-overflow: ellipsis;
@@ -201,7 +201,7 @@
 	align-items: center;
 }
 
-.tournament__team-member-name__role {
+.teamMemberNameRole {
 	position: absolute;
 	background-color: var(--color-text-accent);
 	color: var(--color-text-inverse);
@@ -216,27 +216,27 @@
 	left: 15px;
 }
 
-.tournament__team-member-name__role__sub {
+.teamMemberNameRoleSub {
 	background-color: var(--color-info);
 }
 
-.tournament__logo-container {
+.logoContainer {
 	display: flex;
 	align-items: center;
 	gap: var(--s-4);
 }
 
-.tournament__logo {
+.logo {
 	border-radius: 100%;
 	min-width: 124px;
 }
 
-.tournament__title {
+.title {
 	font-size: var(--fonts-xl);
 	font-weight: var(--bold);
 }
 
-.tournament__badge {
+.badge {
 	text-transform: uppercase;
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
@@ -248,93 +248,93 @@
 	gap: var(--s-2);
 }
 
-.tournament__badge__ranked {
+.badgeRanked {
 	background-color: var(--color-info-low);
 	color: var(--color-info-high);
 }
 
-.tournament__badge__unranked {
+.badgeUnranked {
 	background-color: var(--color-success-low);
 	color: var(--color-success-high);
 }
 
-.tournament__badge__modes {
+.badgeModes {
 	background-color: var(--color-bg-high);
 }
 
-.tournament__info__icon {
+.infoIcon {
 	width: 18px;
 	padding: var(--s-1) 0;
 }
 
-.tournament__info__description {
+.infoDescription {
 	white-space: pre-wrap;
 }
 
-.tournament__info__description > :is(h1, h2, h3, h4, h5, h6) {
+.infoDescription > :is(h1, h2, h3, h4, h5, h6) {
 	margin-block-end: var(--s-6);
 	line-height: 1.4;
 }
 
-.tournament__info__description > :is(h2, h3, h4, h5, h6) {
+.infoDescription > :is(h2, h3, h4, h5, h6) {
 	margin-block-start: var(--s-6);
 }
 
-.tournament__info__description > h1 {
+.infoDescription > h1 {
 	font-size: var(--fonts-xl);
 }
 
-.tournament__info__description > :is(h2, h3, h4, h5, h6) {
+.infoDescription > :is(h2, h3, h4, h5, h6) {
 	font-size: var(--fonts-lg);
 }
 
-.tournament__info__description > :is(h3, h4, h5, h6) {
+.infoDescription > :is(h3, h4, h5, h6) {
 	font-size: var(--fonts-md);
 }
 
-.tournament__info__description > ul:has(+ p) {
+.infoDescription > ul:has(+ p) {
 	margin-block-end: var(--s-6);
 }
 
-.tournament__by {
+.by {
 	color: var(--color-text-high);
 	font-size: var(--fonts-sm);
 	font-weight: var(--semi-bold);
 }
 
-.tournament__section-header {
+.sectionHeader {
 	font-size: var(--fonts-sm);
 }
 
-.tournament__section {
+.section {
 	background-color: var(--color-bg-high);
 	margin-inline: -12px;
 	padding: var(--s-4) var(--s-3);
 }
 
-.tournament__section__input-container {
+.sectionInputContainer {
 	width: 16rem;
 }
 
-.tournament__section__warning {
+.sectionWarning {
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	text-align: center;
 	color: var(--color-text-high);
 }
 
-.tournament__section__map-select-row {
+.sectionMapSelectRow {
 	display: flex;
 	align-items: center;
 	gap: var(--s-4);
 	white-space: nowrap;
 }
 
-.tournament__section__icon {
+.sectionIcon {
 	width: 2rem;
 }
 
-.tournament__roster-grid {
+.rosterGrid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, 110px);
 	gap: var(--s-4);
@@ -343,14 +343,14 @@
 	justify-content: center;
 }
 
-.tournament__roster-grid__member-name {
+.rosterGridMemberName {
 	max-width: 110px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.tournament__missing-player {
+.missingPlayer {
 	width: 62px;
 	height: 62px;
 	font-size: 32px;
@@ -361,31 +361,31 @@
 	margin: 0 auto;
 }
 
-.tournament__missing-player__optional {
+.missingPlayerOptional {
 	border: 2px dashed var(--color-text-accent);
 	color: var(--color-text-accent);
 }
 
-.tournament__invite-container {
+.inviteContainer {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-12);
 	align-items: center;
 }
 
-.tournament__seeds__form {
+.seedsForm {
 	width: 100%;
 	display: flex;
 	align-items: center;
 }
 
-.tournament__seeds__order-button {
+.seedsOrderButton {
 	margin-block-start: var(--s-2);
 	margin-inline-end: auto;
 }
 
 /* TODO: overflow-x scroll */
-.tournament__seeds__teams-list-row {
+.seedsTeamsListRow {
 	display: grid;
 	width: 100%;
 	align-items: center;
@@ -398,29 +398,29 @@
 	row-gap: var(--s-1-5);
 }
 
-.tournament__seeds__teams-list-row.sortable:not(.disabled) {
+.seedsTeamsListRow.sortable:not(.disabled) {
 	cursor: grab;
 }
 
-.tournament__seeds__teams-list-row.active {
+.seedsTeamsListRow.active {
 	cursor: grabbing;
 }
 
-.tournament__seeds__teams-list-row.sortable:active:not(.disabled) {
+.seedsTeamsListRow.sortable:active:not(.disabled) {
 	cursor: grabbing !important;
 }
 
-.tournament__seeds__teams-container__header {
+.seedsTeamsContainerHeader {
 	font-weight: var(--bold);
 }
 
-.tournament__seeds__team-name {
+.seedsTeamName {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.tournament__seeds__team-member {
+.seedsTeamMember {
 	display: grid;
 	grid-template-columns: max-content max-content;
 	grid-column-gap: var(--s-2-5);
@@ -430,27 +430,27 @@
 	place-items: center;
 }
 
-.tournament__seeds__teams-list-row.active .tournament__seeds__team-member {
+.seedsTeamsListRow.active .seedsTeamMember {
 	background-color: var(--color-bg-higher);
 }
 
-.tournament__seeds__team-member__name {
+.seedsTeamMemberName {
 	grid-column: 1 / span 2;
 	font-weight: var(--semi-bold);
 }
 
-.tournament__seeds__lonely-stat {
+.seedsLonelyStat {
 	grid-column: 1 / span 2;
 }
 
-.tournament__seeds__plus-info {
+.seedsPlusInfo {
 	display: inline-flex;
 	align-items: center;
 	margin-inline-end: var(--s-4);
 	min-width: 2rem;
 }
 
-.tournament__stream__user-container {
+.streamUserContainer {
 	font-size: var(--fonts-xs);
 	display: flex;
 	gap: var(--s-2);
@@ -458,7 +458,7 @@
 	font-weight: var(--semi-bold);
 }
 
-.tournament__stream__viewer-count {
+.streamViewerCount {
 	font-size: var(--fonts-xs);
 	display: flex;
 	gap: var(--s-2);
@@ -467,11 +467,11 @@
 	color: var(--color-text-high);
 }
 
-.tournament__stream__viewer-count > svg {
+.streamViewerCount > svg {
 	width: 0.75rem;
 }
 
-.tournament__team__stats {
+.teamStats {
 	border-radius: var(--rounded);
 	padding: var(--s-4);
 	display: grid;
@@ -480,7 +480,7 @@
 	margin: 0 auto;
 }
 
-.tournament__team__stat {
+.teamStat {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr 2fr 1fr;
@@ -489,33 +489,38 @@
 	text-align: center;
 }
 
-.tournament__team__stat__main {
+.teamStatTitle {
+	font-size: var(--fonts-sm);
+	color: var(--color-text-high);
+}
+
+.teamStatMain {
 	font-size: var(--fonts-xl);
 	font-weight: var(--semi-bold);
 }
 
-.tournament__team__stat__main sup {
+.teamStatMain sup {
 	font-size: var(--fonts-sm);
 	font-weight: var(--semi-bold);
 }
 
-.tournament__team__stat__sub {
+.teamStatSub {
 	color: var(--color-text-high);
 	font-size: var(--fonts-sm);
 }
 
 @media screen and (min-width: 640px) {
-	.tournament__section {
+	.section {
 		margin: 0;
 		border-radius: var(--rounded);
 	}
 
-	.tournament__team__stats {
+	.teamStats {
 		grid-template-columns: 1fr 1fr 1fr 1fr;
 	}
 }
 
-.tournament__team__sets {
+.teamSets {
 	display: flex;
 	flex-direction: column;
 	max-width: 32rem;
@@ -523,7 +528,7 @@
 	gap: var(--s-8);
 }
 
-.tournament__team__set {
+.teamSet {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-2-5);
@@ -532,7 +537,7 @@
 	padding: var(--s-3) var(--s-6);
 }
 
-.tournament__team__set__top-container {
+.teamSetTopContainer {
 	display: flex;
 	justify-content: center;
 	gap: var(--s-2);
@@ -542,37 +547,37 @@
 }
 
 @media screen and (min-width: 480px) {
-	.tournament__team__set__top-container {
+	.teamSetTopContainer {
 		flex-direction: row;
 		align-items: flex-end;
 	}
 }
 
-.tournament__team__set__score {
+.teamSetScore {
 	font-size: var(--fonts-xl);
 	font-weight: var(--bold);
 	white-space: nowrap;
 }
 
-.tournament__team__set__round-name {
+.teamSetRoundName {
 	font-size: var(--fonts-lg);
 	font-weight: var(--semi-bold);
 	color: var(--color-text-high);
 	margin-block-end: 2px;
 }
 
-.tournament__team__set__mode {
+.teamSetMode {
 	background-color: var(--color-bg-high);
 	border-radius: 100%;
 	padding: var(--s-2);
 	border: 2px solid var(--color-success);
 }
 
-.tournament__team__set__mode__loss {
+.teamSetModeLoss {
 	border-color: var(--color-bg-higher);
 }
 
-.tournament__team__set__stage-container {
+.teamSetStageContainer {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-2);
@@ -582,7 +587,7 @@
 	color: var(--color-text);
 }
 
-.tournament__team__set__opponent {
+.teamSetOpponent {
 	display: grid;
 	grid-template-areas: "vs team" "vs members";
 	grid-template-columns: max-content 1fr;
@@ -590,7 +595,7 @@
 	row-gap: var(--s-2);
 }
 
-.tournament__team__set__opponent__vs {
+.teamSetOpponentVs {
 	grid-area: vs;
 	font-size: var(--fonts-xl);
 	font-weight: var(--bold);
@@ -598,21 +603,21 @@
 	align-self: center;
 }
 
-.tournament__team__set__opponent__team {
+.teamSetOpponentTeam {
 	grid-area: team;
 	font-size: var(--fonts-lg);
 	font-weight: var(--semi-bold);
 	color: var(--color-text);
 }
 
-.tournament__team__set__opponent__members {
+.teamSetOpponentMembers {
 	grid-area: members;
 	display: flex;
 	gap: var(--s-2);
 	flex-wrap: wrap;
 }
 
-.tournament__team__set__opponent__member {
+.teamSetOpponentMember {
 	color: var(--color-text);
 	display: flex;
 	gap: var(--s-1);
@@ -620,7 +625,7 @@
 	align-items: center;
 }
 
-.overlap-divider {
+.overlapDivider {
 	display: flex;
 	width: 100%;
 	align-items: center;
@@ -628,14 +633,14 @@
 	font-size: var(--fonts-lg);
 }
 
-.overlap-divider::before,
-.overlap-divider::after {
+.overlapDivider::before,
+.overlapDivider::after {
 	flex: 1;
 	border-bottom: 2px solid var(--color-accent-low);
 	content: "";
 }
 
-.tournament__standings__match-result-square {
+.standingsMatchResultSquare {
 	width: 28px;
 	height: 28px;
 	display: grid;
@@ -647,15 +652,15 @@
 	color: var(--color-text);
 }
 
-.tournament__standings__match-result-square--win {
+.standingsMatchResultSquareWin {
 	border-color: var(--color-success);
 }
 
-.tournament__standings__match-result-square--loss {
+.standingsMatchResultSquareLoss {
 	border-color: var(--color-error);
 }
 
-.tournament__standings__team-name {
+.standingsTeamName {
 	min-width: 125px;
 	word-break: break-word;
 	display: flex;
@@ -664,19 +669,19 @@
 	color: var(--color-text);
 }
 
-.tournament__standings__divider {
+.standingsDivider {
 	width: 5px;
 	background-color: var(--color-accent-low);
 	border-radius: var(--rounded);
 }
 
-.tournament__div__grid {
+.divGrid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
 	gap: var(--s-4);
 }
 
-.tournament__div__link {
+.divLink {
 	background-color: var(--color-bg-high);
 	padding: var(--s-2) var(--s-4);
 	border-radius: var(--rounded);
@@ -685,21 +690,21 @@
 	white-space: nowrap;
 }
 
-.tournament__div__link:focus-visible {
+.divLink:focus-visible {
 	outline: 3px solid var(--color-accent);
 	outline-offset: 3px;
 }
 
-.tournament__div__link__participant {
+.divLinkParticipant {
 	outline: 3px solid var(--color-bg-higher);
 	outline-offset: 3px;
 }
 
-.tournament__div__link__participant svg {
+.divLinkParticipant svg {
 	fill: var(--color-accent);
 }
 
-.tournament__div__participant-counts {
+.divParticipantCounts {
 	display: flex;
 	align-items: center;
 	color: var(--color-text-high);
@@ -708,35 +713,35 @@
 	margin-block-end: var(--s-1);
 }
 
-.tournament__div__participant-counts > svg {
+.divParticipantCounts > svg {
 	width: 1rem;
 	margin-block-end: 1px;
 }
 
-.tournament__standings__divider-row {
+.standingsDividerRow {
 	background: transparent !important;
 	height: auto;
 }
 
-.tournament__standings__divider {
+.standingsDividerPadding {
 	padding-block: var(--s-2);
 	background: transparent;
 }
 
-.tournament__standings__divider-content {
+.standingsDividerContent {
 	display: flex;
 	align-items: center;
 	width: 100%;
 	gap: var(--s-2);
 }
 
-.tournament__standings__divider-line {
+.standingsDividerLine {
 	flex: 1;
 	height: 4px;
 	border-radius: var(--rounded);
 }
 
-.tournament__standings__divider-text {
+.standingsDividerText {
 	font-size: var(--fonts-xs);
 	font-weight: var(--bold);
 	text-transform: uppercase;
@@ -746,24 +751,20 @@
 	border-radius: var(--rounded);
 }
 
-.tournament__standings__divider--qualified
-	.tournament__standings__divider-line {
+.standingsDividerQualifiedLine {
 	background-color: var(--color-success);
 }
 
-.tournament__standings__divider--qualified
-	.tournament__standings__divider-text {
+.standingsDividerQualifiedText {
 	color: var(--color-success);
 	background-color: transparent;
 }
 
-.tournament__standings__divider--eliminated
-	.tournament__standings__divider-line {
+.standingsDividerEliminatedLine {
 	background-color: var(--color-error);
 }
 
-.tournament__standings__divider--eliminated
-	.tournament__standings__divider-text {
+.standingsDividerEliminatedText {
 	color: var(--color-error);
 	background-color: transparent;
 }
diff --git a/app/features/user-page/components/UserResultsTable.tsx b/app/features/user-page/components/UserResultsTable.tsx
index 23359cce9..568466032 100644
--- a/app/features/user-page/components/UserResultsTable.tsx
+++ b/app/features/user-page/components/UserResultsTable.tsx
@@ -15,6 +15,7 @@ import {
 	userPage,
 } from "~/utils/urls";
 import type { UserResultsLoaderData } from "../loaders/u.$identifier.results.server";
+import styles from "../user-page.module.css";
 import { ParticipationPill } from "./ParticipationPill";
 
 export type UserResultsTableProps = {
@@ -139,7 +140,7 @@ export function UserResultsTable({
 										}
 									>
 										<ul
-											className="u__results-players"
+											className={styles.resultsPlayers}
 											data-testid={`mates-cell-placement-${i}`}
 										>
 											{result.mates.map((player) => (
diff --git a/app/features/user-page/routes/u.$identifier.builds.new.tsx b/app/features/user-page/routes/u.$identifier.builds.new.tsx
index ccefd7652..d81a473da 100644
--- a/app/features/user-page/routes/u.$identifier.builds.new.tsx
+++ b/app/features/user-page/routes/u.$identifier.builds.new.tsx
@@ -38,6 +38,8 @@ import { loader } from "../loaders/u.$identifier.builds.new.server";
 import type { UserPageLoaderData } from "../loaders/u.$identifier.server";
 export { loader, action };
 
+import { mainStyles } from "~/components/Main";
+
 export const handle: SendouRouteHandle = {
 	i18n: ["weapons", "builds", "gear"],
 };
@@ -63,7 +65,7 @@ export default function NewBuildPage() {
 	}
 
 	return (
-		<div className="half-width u__build-form">
+		<div className={mainStyles.narrow}>
 			<Form className="stack md items-start" method="post">
 				{buildToEdit && (
 					<input type="hidden" name="buildToEditId" value={buildToEdit.id} />
diff --git a/app/features/user-page/routes/u.$identifier.builds.tsx b/app/features/user-page/routes/u.$identifier.builds.tsx
index fdf093c0e..2f174c640 100644
--- a/app/features/user-page/routes/u.$identifier.builds.tsx
+++ b/app/features/user-page/routes/u.$identifier.builds.tsx
@@ -29,6 +29,7 @@ import type { UserPageLoaderData } from "../loaders/u.$identifier.server";
 import { DEFAULT_BUILD_SORT } from "../user-page-constants";
 export { loader, action };
 
+import userStyles from "../user-page.module.css";
 import styles from "./u.$identifier.builds.module.css";
 
 export const handle: SendouRouteHandle = {
@@ -142,7 +143,7 @@ function BuildsFilters({
 				onPress={() => setWeaponFilter("ALL")}
 				variant={weaponFilter === "ALL" ? undefined : "outlined"}
 				size="small"
-				className="u__build-filter-button"
+				className={userStyles.buildFilterButton}
 			>
 				{t("builds:stats.all")} ({data.builds.length})
 			</SendouButton>
@@ -152,7 +153,7 @@ function BuildsFilters({
 						onPress={() => setWeaponFilter("PUBLIC")}
 						variant={weaponFilter === "PUBLIC" ? undefined : "outlined"}
 						size="small"
-						className="u__build-filter-button"
+						className={userStyles.buildFilterButton}
 						icon={<UnlockIcon />}
 					>
 						{t("builds:stats.public")} ({publicBuildsCount})
@@ -161,7 +162,7 @@ function BuildsFilters({
 						onPress={() => setWeaponFilter("PRIVATE")}
 						variant={weaponFilter === "PRIVATE" ? undefined : "outlined"}
 						size="small"
-						className="u__build-filter-button"
+						className={userStyles.buildFilterButton}
 						icon={<LockIcon />}
 					>
 						{t("builds:stats.private")} ({privateBuildsCount})
@@ -338,7 +339,7 @@ function WeaponFilterMenu({
 				<SendouButton
 					variant={typeof weaponFilter === "number" ? undefined : "outlined"}
 					size="small"
-					className="u__build-filter-button"
+					className={userStyles.buildFilterButton}
 				>
 					<Image
 						path={weaponCategoryUrl("SHOOTERS")}
diff --git a/app/styles/u.$identifier.module.css b/app/features/user-page/routes/u.$identifier.edit.module.css
similarity index 100%
rename from app/styles/u.$identifier.module.css
rename to app/features/user-page/routes/u.$identifier.edit.module.css
diff --git a/app/features/user-page/routes/u.$identifier.edit.tsx b/app/features/user-page/routes/u.$identifier.edit.tsx
index 07e208386..0e00f6c15 100644
--- a/app/features/user-page/routes/u.$identifier.edit.tsx
+++ b/app/features/user-page/routes/u.$identifier.edit.tsx
@@ -31,7 +31,9 @@ import type { UserPageLoaderData } from "../loaders/u.$identifier.server";
 import { COUNTRY_CODES, USER } from "../user-page-constants";
 export { loader, action };
 
-import styles from "~/styles/u.$identifier.module.css";
+import { mainStyles } from "~/components/Main";
+import styles from "../user-page.module.css";
+import editStyles from "./u.$identifier.edit.module.css";
 
 export default function UserEditPage() {
 	const { t } = useTranslation(["common", "user"]);
@@ -44,8 +46,8 @@ export default function UserEditPage() {
 	const isArtist = useHasRole("ARTIST");
 
 	return (
-		<div className="half-width">
-			<Form className={styles.container} method="post">
+		<div className={mainStyles.narrow}>
+			<Form className={editStyles.container} method="post">
 				{isSupporter ? (
 					<CustomizedColorsInput initialColors={layoutData.css} />
 				) : null}
@@ -148,9 +150,9 @@ function InGameNameInputs() {
 					maxLength={USER.IN_GAME_NAME_TEXT_MAX_LENGTH}
 					defaultValue={inGameNameParts?.[0]}
 				/>
-				<div className={styles.inGameNameHashtag}>#</div>
+				<div className={editStyles.inGameNameHashtag}>#</div>
 				<Input
-					className={styles.inGameNameDiscriminator}
+					className={editStyles.inGameNameDiscriminator}
 					name="inGameNameDiscriminator"
 					aria-label="In game name discriminator"
 					maxLength={USER.IN_GAME_NAME_DISCRIMINATOR_MAX_LENGTH}
@@ -171,14 +173,14 @@ function SensSelects() {
 	const data = useLoaderData<typeof loader>();
 
 	return (
-		<div className={styles.sensContainer}>
+		<div className={editStyles.sensContainer}>
 			<div>
 				<Label htmlFor="motionSens">{t("user:motionSens")}</Label>
 				<select
 					id="motionSens"
 					name="motionSens"
 					defaultValue={data.user.motionSens ?? undefined}
-					className={styles.sensSelect}
+					className={editStyles.sensSelect}
 				>
 					<option value="">{"-"}</option>
 					{SENS_OPTIONS.map((sens) => (
@@ -195,7 +197,7 @@ function SensSelects() {
 					id="stickSens"
 					name="stickSens"
 					defaultValue={data.user.stickSens ?? undefined}
-					className={styles.sensSelect}
+					className={editStyles.sensSelect}
 				>
 					<option value="">{"-"}</option>
 					{SENS_OPTIONS.map((sens) => (
@@ -280,7 +282,7 @@ function WeaponPoolSelect() {
 	const latestWeapon = weapons[weapons.length - 1];
 
 	return (
-		<div className={clsx("stack md", styles.weaponPool)}>
+		<div className={clsx("stack md", editStyles.weaponPool)}>
 			<input type="hidden" name="weapons" value={JSON.stringify(weapons)} />
 			{weapons.length < USER.WEAPON_POOL_MAX_SIZE ? (
 				<WeaponSelect
@@ -307,7 +309,7 @@ function WeaponPoolSelect() {
 				{weapons.map((weapon) => {
 					return (
 						<div key={weapon.weaponSplId} className="stack xs items-center">
-							<div className="u__weapon">
+							<div className={styles.weapon}>
 								<WeaponImage
 									weaponSplId={weapon.weaponSplId}
 									variant={weapon.isFavorite ? "badge-5-star" : "badge"}
@@ -365,7 +367,7 @@ function BioTextarea({
 	const [value, setValue] = React.useState(initialValue ?? "");
 
 	return (
-		<div className={styles.bioContainer}>
+		<div className={editStyles.bioContainer}>
 			<Label
 				htmlFor="bio"
 				valueLimits={{ current: value.length, max: USER.BIO_MAX_LENGTH }}
@@ -487,7 +489,7 @@ function CommissionTextArea({
 	const [value, setValue] = React.useState(initialValue ?? "");
 
 	return (
-		<div className={styles.bioContainer}>
+		<div className={editStyles.bioContainer}>
 			<Label
 				htmlFor="commissionText"
 				valueLimits={{
diff --git a/app/features/user-page/routes/u.$identifier.index.tsx b/app/features/user-page/routes/u.$identifier.index.tsx
index ee9ade952..a64c5fbda 100644
--- a/app/features/user-page/routes/u.$identifier.index.tsx
+++ b/app/features/user-page/routes/u.$identifier.index.tsx
@@ -26,6 +26,7 @@ import {
 } from "~/utils/urls";
 import { loader } from "../loaders/u.$identifier.index.server";
 import type { UserPageLoaderData } from "../loaders/u.$identifier.server";
+import styles from "../user-page.module.css";
 export { loader };
 
 export const handle: SendouRouteHandle = {
@@ -39,11 +40,11 @@ export default function UserInfoPage() {
 	const layoutData = parentRoute.data as UserPageLoaderData;
 
 	return (
-		<div className="u__container">
-			<div className="u__avatar-container">
-				<Avatar user={layoutData.user} size="lg" className="u__avatar" />
+		<div className={styles.container}>
+			<div className={styles.avatarContainer}>
+				<Avatar user={layoutData.user} size="lg" className={styles.avatar} />
 				<div>
-					<h2 className="u__name">
+					<h2 className={styles.name}>
 						<div>{layoutData.user.username}</div>
 						<div>
 							{data.user.country ? (
@@ -53,7 +54,7 @@ export default function UserInfoPage() {
 					</h2>
 					<TeamInfo />
 				</div>
-				<div className="u__socials">
+				<div className={styles.socials}>
 					{data.user.twitch ? (
 						<SocialLink type="twitch" identifier={data.user.twitch} />
 					) : null}
@@ -87,7 +88,7 @@ function TeamInfo() {
 		<div className="stack horizontal sm">
 			<Link
 				to={teamPage(data.user.team.customUrl)}
-				className="u__team"
+				className={styles.team}
 				data-testid="main-team-link"
 			>
 				{data.user.team.avatarUrl ? (
@@ -145,7 +146,7 @@ function SecondaryTeamsPopover() {
 					>
 						<Link
 							to={teamPage(team.customUrl)}
-							className="u__team text-main-forced"
+							className={clsx(styles.team, "text-main-forced")}
 						>
 							{team.avatarUrl ? (
 								<img
@@ -199,11 +200,11 @@ export function SocialLink({
 
 	return (
 		<a
-			className={clsx("u__social-link", {
-				youtube: type === "youtube",
-				twitch: type === "twitch",
-				battlefy: type === "battlefy",
-				bsky: type === "bsky",
+			className={clsx(styles.socialLink, {
+				[styles.socialLinkYoutube]: type === "youtube",
+				[styles.socialLinkTwitch]: type === "twitch",
+				[styles.socialLinkBattlefy]: type === "battlefy",
+				[styles.socialLinkBsky]: type === "bsky",
 			})}
 			href={href()}
 		>
@@ -251,30 +252,30 @@ function ExtraInfos() {
 	}
 
 	return (
-		<div className="u__extra-infos">
-			<div className="u__extra-info">#{data.user.id}</div>
+		<div className={styles.extraInfos}>
+			<div className={styles.extraInfo}>#{data.user.id}</div>
 			{data.user.discordUniqueName && (
-				<div className="u__extra-info">
-					<span className="u__extra-info__heading">
+				<div className={styles.extraInfo}>
+					<span className={styles.extraInfoHeading}>
 						<DiscordIcon />
 					</span>{" "}
 					{data.user.discordUniqueName}
 				</div>
 			)}
 			{data.user.inGameName && (
-				<div className="u__extra-info">
-					<span className="u__extra-info__heading">{t("user:ign.short")}</span>{" "}
+				<div className={styles.extraInfo}>
+					<span className={styles.extraInfoHeading}>{t("user:ign.short")}</span>{" "}
 					{data.user.inGameName}
 				</div>
 			)}
 			{typeof data.user.stickSens === "number" && (
-				<div className="u__extra-info">
-					<span className="u__extra-info__heading">{t("user:sens")}</span>{" "}
+				<div className={styles.extraInfo}>
+					<span className={styles.extraInfoHeading}>{t("user:sens")}</span>{" "}
 					{[motionSensText, stickSensText].filter(Boolean).join(" / ")}
 				</div>
 			)}
 			{data.user.plusTier && (
-				<div className="u__extra-info">
+				<div className={styles.extraInfo}>
 					<Image path={navIconUrl("plus")} width={20} height={20} alt="" />{" "}
 					{data.user.plusTier}
 				</div>
@@ -292,7 +293,7 @@ function WeaponPool() {
 		<div className="stack horizontal sm justify-center">
 			{data.user.weapons.map((weapon, i) => {
 				return (
-					<div key={weapon.weaponSplId} className="u__weapon">
+					<div key={weapon.weaponSplId} className={styles.weapon}>
 						<WeaponImage
 							testId={`${weapon.weaponSplId}-${i + 1}`}
 							weaponSplId={weapon.weaponSplId}
@@ -315,7 +316,7 @@ function TopPlacements() {
 	return (
 		<Link
 			to={topSearchPlayerPage(data.user.topPlacements[0].playerId)}
-			className="u__placements"
+			className={styles.placements}
 			data-testid="placements-box"
 		>
 			{modesShort.map((mode) => {
@@ -326,7 +327,7 @@ function TopPlacements() {
 				if (!placement) return null;
 
 				return (
-					<div key={mode} className="u__placements__mode">
+					<div key={mode} className={styles.placementsMode}>
 						<Image path={modeImageUrl(mode)} alt="" width={24} height={24} />
 						<div>
 							{placement.rank} / {placement.power}
diff --git a/app/features/user-page/routes/u.$identifier.results.highlights.tsx b/app/features/user-page/routes/u.$identifier.results.highlights.tsx
index 8aef65523..31212f237 100644
--- a/app/features/user-page/routes/u.$identifier.results.highlights.tsx
+++ b/app/features/user-page/routes/u.$identifier.results.highlights.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from "react-i18next";
 import { FormErrors } from "~/components/FormErrors";
 import { SubmitButton } from "~/components/SubmitButton";
 import { UserResultsTable } from "~/features/user-page/components/UserResultsTable";
-
 import { action } from "../actions/u.$identifier.results.highlights.server";
 import { loader } from "../loaders/u.$identifier.results.server";
+import styles from "../user-page.module.css";
 export { loader, action };
 
 export default function ResultHighlightsEditPage() {
@@ -13,11 +13,11 @@ export default function ResultHighlightsEditPage() {
 	const data = useLoaderData<typeof loader>();
 
 	return (
-		<div className="u__highlights-container">
+		<div className={styles.highlightsContainer}>
 			<Form id="highlights-form" method="post" className="stack md items-start">
 				<h2 className="text-start">{t("user:results.highlights.choose")}</h2>
-				<div className="u__results-table-wrapper">
-					<fieldset className="u__results-table-highlights">
+				<div className={styles.resultsTableWrapper}>
+					<fieldset className={styles.resultsTableHighlights}>
 						<legend>{t("user:results.highlights.explanation")}</legend>
 						<UserResultsTable
 							id="user-results-highlight-selection"
@@ -27,7 +27,7 @@ export default function ResultHighlightsEditPage() {
 					</fieldset>
 				</div>
 			</Form>
-			<div className="u__highlights-sticky-button">
+			<div className={styles.highlightsStickyButton}>
 				<FormErrors namespace="user" />
 				<SubmitButton form="highlights-form">
 					{t("common:actions.save")}
diff --git a/app/features/user-page/routes/u.$identifier.seasons.tsx b/app/features/user-page/routes/u.$identifier.seasons.tsx
index 1be0b7ba9..0c5fe6fa2 100644
--- a/app/features/user-page/routes/u.$identifier.seasons.tsx
+++ b/app/features/user-page/routes/u.$identifier.seasons.tsx
@@ -61,6 +61,7 @@ import {
 	type UserSeasonsPageLoaderData,
 } from "../loaders/u.$identifier.seasons.server";
 import type { UserPageLoaderData } from "../loaders/u.$identifier.server";
+import styles from "../user-page.module.css";
 export { loader };
 
 export const handle: SendouRouteHandle = {
@@ -155,7 +156,7 @@ export default function UserSeasonsPage() {
 						{t("user:seasons.tabs.opponents")}
 					</SubNavLink>
 				</SubNav>
-				<div className="u__season__info-container">
+				<div className={styles.seasonInfoContainer}>
 					{data.info.weapons ? <Weapons weapons={data.info.weapons} /> : null}
 					{data.info.stages ? (
 						<Stages stages={data.info.stages} seasonViewed={data.season} />
@@ -197,8 +198,8 @@ function SeasonHeader({
 				selectedKey={seasonViewed}
 				onSelectionChange={(seasonNth) => navigate(`?season=${seasonNth}`)}
 				items={options}
-				className="u__season__select"
-				popoverClassName="u__season__select"
+				className={styles.seasonSelect}
+				popoverClassName={styles.seasonSelect}
 			>
 				{({ year, items, key }) => (
 					<SendouSelectItemSection heading={year} key={key}>
@@ -281,13 +282,13 @@ function Winrates({
 
 	return (
 		<div className="stack horizontal sm">
-			<div className="u__season__winrate">
+			<div className={styles.seasonWinrate}>
 				<span className="text-theme text-xxs">Sets</span> {winrates.sets.wins}
 				{t("user:seasons.win.short")} {winrates.sets.losses}
 				{t("user:seasons.loss.short")} (
 				{winrate(winrates.sets.wins, winrates.sets.losses)}%)
 			</div>
-			<div className="u__season__winrate">
+			<div className={styles.seasonWinrate}>
 				<span className="text-theme text-xxs">Maps</span> {winrates.maps.wins}
 				{t("user:seasons.win.short")} {winrates.maps.losses}
 				{t("user:seasons.loss.short")} (
@@ -333,10 +334,10 @@ function Rank({
 					{tier.isPlus ? "+" : ""}
 				</Link>
 				{!isAccurateTiers ? (
-					<div className="u__season__tentative">
+					<div className={styles.seasonTentative}>
 						{t("user:seasons.tentative")}{" "}
 						<SendouPopover
-							popoverClassName="u__season__tentative__explanation"
+							popoverClassName={styles.seasonTentativeExplanation}
 							trigger={
 								<SendouButton variant="minimal" className="ml-1">
 									?
@@ -518,7 +519,12 @@ function StageWeaponUsageStats(props: {
 
 	if (isLoading) {
 		return (
-			<div className="u__season__weapon-usage__container items-center justify-center text-lighter p-2">
+			<div
+				className={clsx(
+					styles.seasonWeaponUsageContainer,
+					"items-center justify-center text-lighter p-2",
+				)}
+			>
 				{t("user:seasons.loading")}
 			</div>
 		);
@@ -528,14 +534,19 @@ function StageWeaponUsageStats(props: {
 
 	if (usages.length === 0) {
 		return (
-			<div className="u__season__weapon-usage__container items-center justify-center text-lighter p-2">
+			<div
+				className={clsx(
+					styles.seasonWeaponUsageContainer,
+					"items-center justify-center text-lighter p-2",
+				)}
+			>
 				{t("user:seasons.noReportedWeapons")}
 			</div>
 		);
 	}
 
 	return (
-		<div className="u__season__weapon-usage__container">
+		<div className={styles.seasonWeaponUsageContainer}>
 			<div className="stack horizontal sm text-xs items-center justify-center">
 				<ModeImage mode={props.modeShort} width={18} />
 				{t(`game-misc:STAGE_${props.stageId}`)}
@@ -551,7 +562,7 @@ function StageWeaponUsageStats(props: {
 				</SendouTabList>
 				{["SELF", "MATE", "ENEMY"].map((id) => (
 					<SendouTabPanel id={id} key={id}>
-						<div className="u__season__weapon-usage__weapons-container">
+						<div className={styles.seasonWeaponUsageWeaponsContainer}>
 							{usages.map((u) => {
 								const winrate = cutToNDecimalPlaces(
 									(u.wins / (u.wins + u.losses)) * 100,
@@ -563,7 +574,7 @@ function StageWeaponUsageStats(props: {
 											weaponSplId={u.weaponSplId}
 											variant="build"
 											width={48}
-											className="u__season__weapon-usage__weapon"
+											className={styles.seasonWeaponUsageWeapon}
 										/>
 										<div
 											className={clsx("text-xs font-bold", {
@@ -612,7 +623,7 @@ function Players({
 					<div key={player.user.id} className="stack">
 						<Link
 							to={userSeasonsPage({ user: player.user, season: seasonViewed })}
-							className="u__season__player-name"
+							className={styles.seasonPlayerName}
 						>
 							<Avatar user={player.user} size="xs" className="mx-auto" />
 							{player.user.username}
@@ -649,15 +660,15 @@ function WeaponCircle({
 	count?: number;
 }) {
 	return (
-		<div className="u__season__weapon-container">
-			<div className="u__season__weapon-border__outer-static" />
+		<div className={styles.seasonWeaponContainer}>
+			<div className={styles.seasonWeaponBorderOuterStatic} />
 			<div
-				className="u__season__weapon-border__outer"
+				className={styles.seasonWeaponBorderOuter}
 				style={{ "--degree": `${degrees}deg` }}
 			>
-				<div className="u__season__weapon-border__inner">{children}</div>
+				<div className={styles.seasonWeaponBorderInner}>{children}</div>
 			</div>
-			{count ? <div className="u__season__weapon-count">{count}</div> : null}
+			{count ? <div className={styles.seasonWeaponCount}>{count}</div> : null}
 		</div>
 	);
 }
@@ -823,14 +834,14 @@ function GroupMatchResult({ match }: { match: SeasonGroupMatch }) {
 		<div>
 			<Link
 				to={sendouQMatchPage(match.id)}
-				className={clsx("u__season__match", {
-					"u__season__match__with-sub-section ": match.spDiff,
+				className={clsx(styles.seasonMatch, {
+					[styles.seasonMatchWithSubSection]: match.spDiff,
 				})}
 			>
 				{rows}
 			</Link>
 			{match.spDiff ? (
-				<div className="u__season__match__sub-section">
+				<div className={styles.seasonMatchSubSection}>
 					{match.spDiff > 0 ? (
 						<span className="text-success">▲</span>
 					) : (
@@ -848,8 +859,8 @@ function TournamentResult({ result }: { result: SeasonTournamentResult }) {
 		<div data-testid="seasons-tournament-result">
 			<Link
 				to={tournamentTeamPage(result)}
-				className={clsx("u__season__match", {
-					"u__season__match__with-sub-section ": result.spDiff,
+				className={clsx(styles.seasonMatch, {
+					[styles.seasonMatchWithSubSection]: result.spDiff,
 				})}
 			>
 				<div className="stack font-bold items-center text-lg text-center">
@@ -862,7 +873,7 @@ function TournamentResult({ result }: { result: SeasonTournamentResult }) {
 					/>
 					{result.tournamentName}
 				</div>
-				<ul className="u__season__match__set-results">
+				<ul className={styles.seasonMatchSetResults}>
 					{result.setResults.filter(Boolean).map((result, i) => (
 						<li key={i} data-is-win={String(result === "W")}>
 							{result}
@@ -871,7 +882,7 @@ function TournamentResult({ result }: { result: SeasonTournamentResult }) {
 				</ul>
 			</Link>
 			{result.spDiff ? (
-				<div className="u__season__match__sub-section">
+				<div className={styles.seasonMatchSubSection}>
 					{result.spDiff > 0 ? (
 						<span className="text-success">▲</span>
 					) : (
@@ -897,9 +908,9 @@ function MatchMembersRow({
 		<div className="stack horizontal xs items-center">
 			{members.map((member) => {
 				return (
-					<div key={member.discordId} className="u__season__match__user">
+					<div key={member.discordId} className={styles.seasonMatchUser}>
 						<Avatar user={member} size="xxs" />
-						<span className="u__season__match__user__name">
+						<span className={styles.seasonMatchUserName}>
 							{member.username}
 						</span>
 						{typeof member.weaponSplId === "number" ? (
@@ -919,7 +930,7 @@ function MatchMembersRow({
 					</div>
 				);
 			})}
-			<div className="u__season__match__score">{score}</div>
+			<div className={styles.seasonMatchScore}>{score}</div>
 		</div>
 	);
 }
diff --git a/app/features/user-page/routes/u.$identifier.tsx b/app/features/user-page/routes/u.$identifier.tsx
index a36535f87..95d78dfd5 100644
--- a/app/features/user-page/routes/u.$identifier.tsx
+++ b/app/features/user-page/routes/u.$identifier.tsx
@@ -26,7 +26,7 @@ import {
 } from "../loaders/u.$identifier.server";
 export { loader };
 
-import "~/styles/u.css";
+import "~/features/user-page/user-page.module.css";
 
 export const meta: MetaFunction<typeof loader> = (args) => {
 	if (!args.data) return [];
diff --git a/app/styles/u.css b/app/features/user-page/user-page.module.css
similarity index 78%
rename from app/styles/u.css
rename to app/features/user-page/user-page.module.css
index b073fa163..942a24588 100644
--- a/app/styles/u.css
+++ b/app/features/user-page/user-page.module.css
@@ -1,22 +1,22 @@
-.u__container {
+.container {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-6);
 }
 
-.u__avatar-container {
+.avatarContainer {
 	display: grid;
 	justify-content: center;
 	column-gap: var(--s-2-5);
 	grid-template-areas: "avatar name" "avatar team" "avatar ." "avatar ." "socials .";
 }
 
-.u__avatar {
+.avatar {
 	min-width: 125px;
 	grid-area: avatar;
 }
 
-.u__team {
+.team {
 	display: flex;
 	font-weight: var(--bold);
 	color: var(--color-text);
@@ -25,7 +25,7 @@
 	align-items: center;
 }
 
-.u__name {
+.name {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -34,12 +34,12 @@
 	gap: var(--s-2-5);
 }
 
-.u__country-name {
+.countryName {
 	color: var(--color-text-high);
 	font-weight: var(--bold);
 }
 
-.u__socials {
+.socials {
 	display: flex;
 	justify-content: center;
 	gap: var(--s-1-5);
@@ -47,59 +47,59 @@
 	padding-block-start: var(--s-2-5);
 }
 
-.u__social-link {
+.socialLink {
 	padding: var(--s-1);
 	border: 1px solid;
 	border-radius: 50%;
 }
 
-.u__extra-info__heading > svg {
+.extraInfoHeading > svg {
 	width: 0.8rem;
 }
 
-.u__social-link > svg {
+.socialLink > svg {
 	width: 0.9rem;
 }
 
-.u__social-link.youtube {
+.socialLinkYoutube {
 	border-color: #f00;
 	background-color: #ff00002f;
 }
 
-.u__social-link.youtube > svg {
+.socialLinkYoutube > svg {
 	fill: #f00;
 }
 
-.u__social-link.twitch {
+.socialLinkTwitch {
 	border-color: #9146ff;
 	background-color: #9146ff2f;
 }
 
-.u__social-link.twitch > svg {
+.socialLinkTwitch > svg {
 	fill: #9146ff;
 }
 
-.u__social-link.battlefy {
+.socialLinkBattlefy {
 	border-color: #de4c5e;
 	background-color: #de4c5e2f;
 }
 
-.u__social-link.battlefy > svg {
+.socialLinkBattlefy > svg {
 	fill: #de4c5e;
 }
 
-.u__social-link.bsky {
+.socialLinkBsky {
 	border-color: #1285fe;
 	background-color: #1285fe2f;
 	display: grid;
 	place-items: center;
 }
 
-.u__social-link.bsky path {
+.socialLinkBsky path {
 	fill: #1285fe;
 }
 
-.u__extra-infos {
+.extraInfos {
 	display: flex;
 	max-width: 24rem;
 	flex-wrap: wrap;
@@ -107,7 +107,7 @@
 	margin-inline: auto;
 }
 
-.u__extra-info {
+.extraInfo {
 	padding: var(--s-1) var(--s-1-5);
 	border-radius: var(--rounded);
 	background-color: var(--color-bg-high);
@@ -117,27 +117,27 @@
 	gap: var(--s-1);
 }
 
-.u__extra-info__heading {
+.extraInfoHeading {
 	color: var(--color-text-accent);
 	font-weight: var(--bold);
 }
 
-.u__results-table-wrapper {
+.resultsTableWrapper {
 	width: 100%;
 	overflow-x: auto;
 }
 
-.u__results-table-highlights {
+.resultsTableHighlights {
 	border: var(--s-2) solid var(--color-bg-high);
 	padding-inline: 0 !important;
 }
 
-.u__results-table-highlights > legend {
+.resultsTableHighlights > legend {
 	margin-inline-start: var(--s-2);
 	padding-inline: var(--s-1);
 }
 
-.u__results-players {
+.resultsPlayers {
 	display: flex;
 	flex-direction: column;
 	padding: 0;
@@ -145,13 +145,13 @@
 	list-style: none;
 }
 
-.u-search__container {
+.searchContainer {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-12);
 }
 
-.u-search__users {
+.searchUsers {
 	display: flex;
 	width: 325px;
 	flex-direction: column;
@@ -160,7 +160,7 @@
 	gap: var(--s-6);
 }
 
-.u-search__user {
+.searchUser {
 	display: flex;
 	align-items: center;
 	color: var(--color-text);
@@ -169,55 +169,55 @@
 	line-height: 1.2rem;
 }
 
-.u-search__ign {
+.searchIgn {
 	color: var(--color-text-high);
 	font-size: var(--fonts-sm);
 	font-weight: var(--body);
 }
 
-.u-search__users > li {
+.searchUsers > li {
 	list-style: none;
 }
 
-.u-search__input {
+.searchInput {
 	height: 40px !important;
 	margin: 0 auto;
 	font-size: var(--fonts-lg);
 }
 
-.u-search__icon {
+.searchIcon {
 	height: 25px;
 	margin: auto;
 	margin-right: 15px;
 }
 
-.u-search__info {
+.searchInfo {
 	color: var(--color-text-high);
 	font-size: var(--fonts-sm);
 	text-align: center;
 }
 
-.u__weapon {
+.weapon {
 	padding: var(--s-2);
 	border-radius: 100%;
 	background-color: var(--color-bg-high);
 }
 
-.u__build-form {
+.buildForm {
 	--input-width: min(18rem, 75vw);
 }
 
-.u__build-form__weapon {
+.buildFormWeapon {
 	--input-width: 16rem;
 }
 
-.u__build-filter-button {
+.buildFilterButton {
 	padding: 0 var(--s-1-5) !important;
 	gap: var(--s-1);
 	min-height: 32px;
 }
 
-.u__placements {
+.placements {
 	display: flex;
 	flex-wrap: wrap;
 	padding: var(--s-4);
@@ -229,11 +229,11 @@
 	transition: 0.1s ease-in-out background-color;
 }
 
-.u__placements:hover {
+.placements:hover {
 	background-color: var(--color-bg-higher);
 }
 
-.u__placements__mode {
+.placementsMode {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -243,20 +243,20 @@
 }
 
 @media screen and (min-width: 480px) {
-	.u__placements {
+	.placements {
 		gap: var(--s-10);
 	}
 
-	.u__placements__mode {
+	.placementsMode {
 		font-size: var(--fonts-sm);
 	}
 }
 
-.u__season__select {
+.seasonSelect {
 	--select-width: 125px;
 }
 
-.u__season__weapon-container {
+.seasonWeaponContainer {
 	display: flex;
 	align-items: center;
 	font-size: var(--fonts-sm);
@@ -266,7 +266,7 @@
 	width: 60px;
 }
 
-.u__season__weapon-border__outer {
+.seasonWeaponBorderOuter {
 	--degree: 80deg;
 	--smoothing: 0.5deg;
 	--color: var(--color-text-accent);
@@ -283,7 +283,7 @@
 	position: absolute;
 }
 
-.u__season__weapon-border__outer-static {
+.seasonWeaponBorderOuterStatic {
 	height: 60px;
 	width: 60px;
 	background-color: var(--color-bg-high);
@@ -291,7 +291,7 @@
 	border-radius: 50%;
 }
 
-.u__season__weapon-border__inner {
+.seasonWeaponBorderInner {
 	height: 84%;
 	width: 84%;
 	top: 8%;
@@ -303,11 +303,11 @@
 	place-items: center;
 }
 
-.u__season__weapon-count {
+.seasonWeaponCount {
 	margin-top: 62px;
 }
 
-.u__season__player-name {
+.seasonPlayerName {
 	width: 64px;
 	font-size: var(--fonts-xs);
 	white-space: nowrap;
@@ -317,7 +317,7 @@
 	font-weight: var(--semi-bold);
 }
 
-.u__season__match {
+.seasonMatch {
 	background-color: var(--color-bg-high);
 	border-radius: var(--rounded);
 	padding: var(--s-2) var(--s-2-5);
@@ -328,11 +328,11 @@
 	gap: var(--s-4);
 }
 
-.u__season__match__with-sub-section {
+.seasonMatchWithSubSection {
 	border-radius: var(--rounded) var(--rounded) 0 0;
 }
 
-.u__season__match__sub-section {
+.seasonMatchSubSection {
 	border-radius: 0 0 var(--rounded) var(--rounded);
 	background-color: var(--color-bg-high);
 	font-size: var(--fonts-xs);
@@ -344,11 +344,11 @@
 	padding-block: var(--s-0-5);
 }
 
-.u__season__match:hover {
+.seasonMatch:hover {
 	background-color: var(--color-bg-higher);
 }
 
-.u__season__match__user {
+.seasonMatchUser {
 	display: flex;
 	flex-direction: column;
 	font-size: var(--fonts-xs);
@@ -356,20 +356,20 @@
 	align-items: center;
 }
 
-.u__season__match__user__name {
+.seasonMatchUserName {
 	max-width: 60px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.u__season__match__score {
+.seasonMatchScore {
 	font-size: var(--fonts-xl);
 	font-weight: var(--bold);
 	margin-inline: auto;
 }
 
-.u__season__match__set-results {
+.seasonMatchSetResults {
 	list-style: none;
 	display: flex;
 	gap: var(--s-2);
@@ -378,7 +378,7 @@
 	padding: 0;
 }
 
-.u__season__match__set-results li {
+.seasonMatchSetResults li {
 	width: 28px;
 	height: 28px;
 	display: grid;
@@ -391,17 +391,17 @@
 	border-color: var(--color-error);
 }
 
-.u__season__match__set-results li[data-is-win="true"] {
+.seasonMatchSetResults li[data-is-win="true"] {
 	border-color: var(--color-success);
 }
 
-.u__season__info-container {
+.seasonInfoContainer {
 	background-color: var(--color-bg-high);
 	padding: var(--s-2-5) var(--s-2);
 	border-radius: var(--rounded);
 }
 
-.u__season__winrate {
+.seasonWinrate {
 	background-color: var(--color-bg-high);
 	padding: var(--s-0-5) var(--s-2);
 	border-radius: var(--rounded);
@@ -409,7 +409,7 @@
 	font-weight: var(--semi-bold);
 }
 
-.u__season__weapon-usage__container {
+.seasonWeaponUsageContainer {
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-2);
@@ -417,7 +417,7 @@
 	min-height: 175px;
 }
 
-.u__season__weapon-usage__weapons-container {
+.seasonWeaponUsageWeaponsContainer {
 	display: flex;
 	flex-wrap: wrap;
 	gap: var(--s-2-5);
@@ -426,13 +426,13 @@
 	overflow-y: auto;
 }
 
-.u__season__weapon-usage__weapon {
+.seasonWeaponUsageWeapon {
 	border-radius: 100%;
 	background-color: var(--color-bg-high);
 	padding: var(--s-1-5);
 }
 
-.u__season__tentative {
+.seasonTentative {
 	text-transform: uppercase;
 	font-weight: var(--semi-bold);
 	color: var(--color-text-high);
@@ -444,16 +444,16 @@
 	line-height: 1.3;
 }
 
-.u__season__tentative__explanation {
+.seasonTentativeExplanation {
 	text-transform: initial;
 }
 
-.u__highlights-container {
+.highlightsContainer {
 	position: relative;
 	padding-bottom: 80px; /* Leave space for sticky button */
 }
 
-.u__highlights-sticky-button {
+.highlightsStickyButton {
 	position: sticky;
 	bottom: 0;
 	background-color: var(--color-bg);
diff --git a/app/features/user-search/routes/u.tsx b/app/features/user-search/routes/u.tsx
index 8d4c3b15e..431e3d942 100644
--- a/app/features/user-search/routes/u.tsx
+++ b/app/features/user-search/routes/u.tsx
@@ -22,7 +22,7 @@ import {
 import { loader } from "../loaders/u.server";
 export { loader };
 
-import "~/styles/u.css";
+import styles from "~/features/user-page/user-page.module.css";
 
 export const handle: SendouRouteHandle = {
 	i18n: ["user"],
@@ -77,10 +77,10 @@ export default function UserSearchPage() {
 	}
 
 	return (
-		<Main className="u-search__container">
+		<Main className={styles.searchContainer}>
 			<Input
-				className="u-search__input"
-				icon={<SearchIcon className="u-search__icon" />}
+				className={styles.searchInput}
+				icon={<SearchIcon className={styles.searchIcon} />}
 				value={inputValue}
 				onChange={(e) => setInputValue(e.target.value)}
 			/>
@@ -94,29 +94,29 @@ function UsersList() {
 	const data = useLoaderData<typeof loader>();
 
 	if (!data) {
-		return <div className="u-search__info">{t("user:search.info")}</div>;
+		return <div className={styles.searchInfo}>{t("user:search.info")}</div>;
 	}
 
 	if (data.users.length === 0) {
 		return (
-			<div className="u-search__info">
+			<div className={styles.searchInfo}>
 				{t("user:search.noResults", { query: data.query })}
 			</div>
 		);
 	}
 
 	return (
-		<ul className="u-search__users">
+		<ul className={styles.searchUsers}>
 			{data.users.map((user) => {
 				return (
 					<li key={user.id}>
 						<Link to={userPage(user)}>
-							<div className="u-search__user">
+							<div className={styles.searchUser}>
 								<Avatar size="sm" user={user} />
 								<div>
 									<div>{user.username}</div>
 									{user.inGameName ? (
-										<div className="u-search__ign">
+										<div className={styles.searchIgn}>
 											{t("user:ign.short")}: {user.inGameName}
 										</div>
 									) : null}
diff --git a/app/root.tsx b/app/root.tsx
index 5c52f093d..572ca66f8 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -18,6 +18,7 @@ import {
 	useNavigation,
 	useSearchParams,
 } from "@remix-run/react";
+import clsx from "clsx";
 import generalI18next from "i18next";
 import NProgress from "nprogress";
 import * as React from "react";
@@ -58,9 +59,7 @@ import "~/styles/common.css";
 import "~/styles/elements.css";
 import "~/styles/utils.css";
 import "~/styles/flags.css";
-import "~/styles/layout.css";
 import "nprogress/nprogress.css";
-import clsx from "clsx";
 
 export const shouldRevalidate: ShouldRevalidateFunction = (args) => {
 	if (isRevalidation(args)) return true;
diff --git a/app/styles/layout.css b/app/styles/layout.css
deleted file mode 100644
index 234dd6af0..000000000
--- a/app/styles/layout.css
+++ /dev/null
@@ -1,427 +0,0 @@
-.layout__container {
-	width: 100%;
-	min-height: 100vh;
-	padding-top: 50px; /** compensate for layout__header */
-}
-
-.layout__breadcrumb-container {
-	display: flex;
-	align-items: center;
-	gap: var(--s-2);
-}
-
-.layout__breadcrumb {
-	overflow: hidden;
-	max-width: 350px;
-	color: var(--color-text);
-	font-size: var(--fonts-xs);
-	font-weight: 600;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	border-radius: 9999px;
-	height: var(--item-size);
-	display: inline-flex;
-	align-items: center;
-
-	img {
-		height: 100%;
-	}
-
-	&:focus-visible {
-		outline: var(--input-focus-ring);
-		outline-offset: 1px;
-		border-radius: 9999px;
-	}
-}
-
-.layout__breadcrumb__image {
-	min-width: var(--item-size);
-}
-
-.layout__breadcrumb.logo {
-	overflow: initial;
-	padding: 0 var(--s-1);
-}
-
-.logo:focus-visible {
-	outline: var(--input-focus-ring);
-	outline-offset: 1px;
-	border-radius: var(--rounded);
-}
-
-.layout__breadcrumb-separator {
-	font-size: 20px;
-	opacity: 0.4;
-	margin-inline-start: -1px;
-}
-
-.layout__item_size {
-	--item-size: var(--input-height-small);
-}
-
-.layout__header {
-	display: flex;
-	width: 100%;
-	align-items: center;
-	justify-content: space-between;
-	border-bottom: 1.5px solid var(--color-border);
-	-webkit-backdrop-filter: var(--backdrop-filter);
-	backdrop-filter: var(--backdrop-filter);
-	background-color: transparent;
-	font-weight: bold;
-	padding-block: var(--s-2);
-	padding-inline: var(--s-4);
-	position: fixed;
-	top: 0;
-	z-index: 10;
-}
-
-.layout__avatar {
-	width: var(--item-size);
-	height: var(--item-size);
-	color: transparent;
-}
-
-.layout__page-heading {
-	display: flex;
-	align-items: center;
-	font-size: var(--fonts-md);
-	font-weight: var(--bold);
-	gap: var(--s-2-5);
-	letter-spacing: 0.02rem;
-}
-
-.layout__header__right-container {
-	display: flex;
-	gap: var(--s-3);
-	justify-self: flex-end;
-}
-
-.layout__header__button {
-	background-color: var(--color-bg);
-	width: var(--item-size);
-	height: var(--item-size);
-	padding: 0.25rem;
-	border: 2px solid var(--color-border);
-	border-radius: 50%;
-	color: inherit;
-	cursor: pointer;
-}
-
-.layout__header__button:focus-visible {
-	outline: 2px solid var(--color-text-accent);
-	outline-offset: 1px;
-}
-
-.layout__user-item {
-	outline-offset: 1px;
-	border-radius: 100%;
-}
-
-.layout__user-item:focus-visible {
-	outline: 2px solid var(--color-text-accent);
-}
-
-.layout__header__button__icon {
-	width: 1.15rem;
-}
-
-.main {
-	width: 100%;
-	max-width: 48rem;
-	margin: 0 auto;
-	padding-inline: var(--s-3);
-	min-height: 75vh;
-}
-
-.half-width {
-	width: 100%;
-	max-width: 24rem;
-	margin: 0 auto;
-}
-
-.bigger {
-	width: 100%;
-	max-width: 72rem;
-	margin: 0 auto;
-}
-
-.layout__main-container {
-	display: flex;
-	flex-direction: row;
-}
-
-.layout__main {
-	padding-block: var(--s-4) var(--s-32);
-}
-
-.layout__log-in-button {
-	display: flex;
-	height: var(--item-size);
-	align-items: center;
-	justify-content: center;
-	padding: 0.5rem;
-	border: 2px solid;
-	border-color: var(--color-text-accent);
-	border-radius: var(--rounded);
-	background-color: transparent;
-	color: inherit;
-	cursor: pointer;
-	font-size: var(--fonts-xs);
-	font-weight: var(--bold);
-	gap: var(--s-2);
-	text-decoration: none;
-}
-
-.layout__log-in-button > svg {
-	width: 1rem;
-}
-
-.layout__log-in-button:active {
-	transform: translateY(1px);
-}
-
-.layout__footer {
-	display: flex;
-	flex-direction: column;
-	padding: var(--s-2-5);
-	background-color: var(--color-bg-high);
-	gap: var(--s-6);
-	margin-block-start: auto;
-	padding-block-end: var(--s-32);
-}
-
-.layout__footer__link-list {
-	display: flex;
-	justify-content: space-evenly;
-	font-size: var(--fonts-xxs);
-}
-
-.layout__footer__socials {
-	display: flex;
-	justify-content: center;
-	gap: var(--s-2);
-}
-
-.layout__footer__social-link {
-	display: flex;
-	max-width: 10rem;
-	height: 12rem;
-	flex: 1 1 0;
-	flex-direction: column;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--s-4);
-	border-radius: var(--rounded);
-	background-color: var(--color-bg-higher);
-	cursor: pointer;
-	font-size: var(--fonts-lg);
-}
-
-.layout__footer__social-icon {
-	height: 2.25rem;
-	transition: transform 0.25s ease-in-out;
-}
-
-.layout__footer__social-link:hover > .layout__footer__social-icon {
-	transform: translateY(-0.3rem);
-}
-
-.layout__footer__social-header {
-	text-align: center;
-}
-
-.layout__footer__social-header > p {
-	font-size: var(--fonts-xxs);
-}
-
-.layout__footer__patron-title {
-	display: flex;
-	align-items: flex-end;
-	justify-content: center;
-	font-size: var(--fonts-sm);
-	font-weight: var(--semi-bold);
-	gap: var(--s-2);
-}
-
-.layout__footer__patron-list {
-	display: flex;
-	max-width: 75vw;
-	flex-wrap: wrap;
-	justify-content: center;
-	padding: 0;
-	margin: 0 auto;
-	font-size: var(--fonts-xs);
-	gap: var(--s-1);
-	list-style: none;
-	margin-block-start: var(--s-2);
-}
-
-.layout__footer__patron-list__patron {
-	max-width: 250px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	display: block;
-}
-
-.layout__copyright-note {
-	display: flex;
-	flex-direction: column;
-	color: var(--color-text-high);
-	font-size: var(--fonts-xxs);
-	text-align: center;
-}
-
-.layout__overlay-nav__nav-items-container {
-	display: flex;
-	margin: 0 auto;
-	gap: var(--s-4) var(--s-4);
-	font-size: 13px;
-	flex-wrap: wrap;
-	justify-content: center;
-	animation: smooth-appear 0.75s ease-out forwards;
-	margin-top: 27.5px;
-	opacity: 0.25;
-	max-width: 48rem;
-}
-
-@keyframes smooth-appear {
-	to {
-		margin-top: 0px;
-		opacity: 1;
-	}
-}
-
-.layout__overlay-nav__nav-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	color: var(--color-text);
-	font-weight: bold;
-	gap: var(--s-1);
-	text-align: center;
-	width: 100px;
-}
-
-.layout__overlay-nav__log-in-button {
-	display: grid;
-	width: 50px;
-	height: 50px;
-	border: none;
-	border-radius: 100%;
-	background-color: var(--color-bg-high);
-	color: var(--color-text);
-	place-items: center;
-	transition: all 0.2s ease-out;
-}
-
-.layout__overlay-nav__nav-image-container {
-	display: grid;
-	width: 75px;
-	height: 75px;
-	border-radius: var(--rounded);
-	background-color: var(--color-bg-high);
-	color: var(--color-text);
-	place-items: center;
-	transition: all 0.2s ease-out;
-}
-
-.layout__overlay-nav__nav-image-container.round {
-	width: 50px;
-	height: 50px;
-	border-radius: 100%;
-}
-
-.layout__overlay-nav__avatar {
-	width: 50px;
-	height: 50px;
-}
-
-.layout__overlay-nav__nav-image-container:hover {
-	background-color: var(--color-bg-higher);
-}
-
-.layout__overlay-nav__log-out-container {
-	display: flex;
-	justify-content: center;
-}
-
-.layout__overlay-nav__dialog {
-	min-width: 100vw;
-	min-height: 100vh;
-	border-radius: 0 !important;
-	border: 0 !important;
-}
-
-.layout__overlay-nav__close-button {
-	margin-inline-start: auto;
-	margin-block-end: var(--s-4);
-	margin-inline-end: var(--s-4);
-}
-
-.layout__overlay-nav__close-button > svg {
-	width: 32px;
-}
-
-@media screen and (display-mode: standalone) {
-	.layout__header {
-		align-items: flex-end;
-		padding-top: calc(var(--s-2) + env(safe-area-inset-top));
-	}
-
-	.layout__main {
-		padding-block-start: env(safe-area-inset-top);
-	}
-}
-
-@media screen and (max-width: 640px) {
-	.layout__hamburger-button {
-		display: initial;
-	}
-
-	.layout__header__right-container .layout__user-item {
-		display: none;
-	}
-
-	.layout__breadcrumb__text-mobile-hidden {
-		display: none;
-	}
-
-	.layout__overlay-nav__dialog {
-		padding-block: var(--s-12) !important;
-		padding-inline: 0 !important;
-	}
-
-	.layout__breadcrumb-container > a {
-		max-width: 90px;
-	}
-
-	.layout__footer__socials {
-		flex-direction: column;
-	}
-
-	.layout__footer__social-link {
-		max-width: initial;
-		flex-direction: row;
-	}
-
-	.layout__footer__social-header {
-		display: flex;
-		align-items: center;
-		gap: var(--s-2);
-		text-align: initial;
-	}
-
-	.layout__footer__social-header > p {
-		margin-block-start: var(--s-1);
-	}
-
-	.layout__footer__social-icon {
-		height: 1.75rem;
-	}
-
-	.layout__footer__social-link:hover > .layout__footer__social-icon {
-		transform: translateX(-0.3rem);
-	}
-}