diff --git a/app/components/Main.module.css b/app/components/Main.module.css
index cb54b7cf3..30c6f3782 100644
--- a/app/components/Main.module.css
+++ b/app/components/Main.module.css
@@ -1,4 +1,5 @@
 .main {
+	container-type: inline-size;
 	padding: var(--layout-main-padding);
 	margin-bottom: var(--s-32);
 	min-height: calc(100dvh - var(--layout-nav-height));
diff --git a/app/components/MapPoolSelector.module.css b/app/components/MapPoolSelector.module.css
index da271ddd9..ee2eead91 100644
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -20,7 +20,7 @@
 	padding-inline: var(--s-3);
 }
 
-@media screen and (min-width: 640px) {
+@container (width >= 560px) {
 	.stageNameRow {
 		flex-direction: row;
 	}
diff --git a/app/components/Pagination.module.css b/app/components/Pagination.module.css
index 52f9044ee..96f8aa809 100644
--- a/app/components/Pagination.module.css
+++ b/app/components/Pagination.module.css
@@ -104,13 +104,13 @@
 	outline: none;
 }
 
-@media (width < 640px) {
+@container (width < 580px) {
 	.desktopOnly {
 		display: none;
 	}
 }
 
-@media (width >= 640px) {
+@container (width >= 580px) {
 	.mobileOnly {
 		display: none;
 	}
diff --git a/app/features/build-analyzer/routes/analyzer.module.css b/app/features/build-analyzer/routes/analyzer.module.css
index 8c2415bfa..d6e278fa1 100644
--- a/app/features/build-analyzer/routes/analyzer.module.css
+++ b/app/features/build-analyzer/routes/analyzer.module.css
@@ -14,6 +14,16 @@
 	gap: var(--s-4);
 }
 
+@container (width < 640px) {
+	.container {
+		grid-template-columns: 1fr;
+	}
+
+	.leftColumn {
+		position: initial;
+	}
+}
+
 .apCompare {
 	display: grid;
 	grid-template-columns: 1fr max-content max-content max-content 1fr;
@@ -114,7 +124,7 @@
 	white-space: nowrap;
 }
 
-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.weaponInfoBadgeText {
 		max-width: initial;
 	}
@@ -245,16 +255,6 @@
 	align-items: center;
 }
 
-@media screen and (max-width: 640px) {
-	.container {
-		grid-template-columns: 1fr;
-	}
-
-	.leftColumn {
-		position: initial;
-	}
-}
-
 .statPopover {
 	min-width: 360px;
 
diff --git a/app/features/builds/components/FilterSection.module.css b/app/features/builds/components/FilterSection.module.css
index 99541ea6b..5395f12b7 100644
--- a/app/features/builds/components/FilterSection.module.css
+++ b/app/features/builds/components/FilterSection.module.css
@@ -9,6 +9,7 @@
 
 .filterMode {
 	gap: var(--s-6);
+	flex-wrap: wrap;
 }
 
 .filterDate {
@@ -16,7 +17,7 @@
 	align-items: center;
 }
 
-@media screen and (min-width: 750px) {
+@container (width >= 560px) {
 	.filter {
 		flex-direction: row;
 	}
diff --git a/app/features/builds/routes/builds.$slug.module.css b/app/features/builds/routes/builds.$slug.module.css
index bbe5f5aa6..0b180ea0c 100644
--- a/app/features/builds/routes/builds.$slug.module.css
+++ b/app/features/builds/routes/builds.$slug.module.css
@@ -17,7 +17,7 @@
 	gap: var(--s-2);
 }
 
-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.buildsButtonsLink {
 		flex-direction: row;
 	}
diff --git a/app/features/calendar/routes/calendar.module.css b/app/features/calendar/routes/calendar.module.css
index 904912efd..4ea77b6a2 100644
--- a/app/features/calendar/routes/calendar.module.css
+++ b/app/features/calendar/routes/calendar.module.css
@@ -30,7 +30,7 @@
 	outline: var(--focus-ring);
 }
 
-@media screen and (min-width: 600px) {
+@container (width >= 640px) {
 	.navigateButton {
 		flex: initial;
 	}
diff --git a/app/features/comp-analyzer/components/DamageComboBar.module.css b/app/features/comp-analyzer/components/DamageComboBar.module.css
index 3047ff60e..bdcdc6e5f 100644
--- a/app/features/comp-analyzer/components/DamageComboBar.module.css
+++ b/app/features/comp-analyzer/components/DamageComboBar.module.css
@@ -232,7 +232,7 @@
 	margin-bottom: var(--s-1);
 }
 
-@media (max-width: 640px) {
+@container (width < 640px) {
 	.slidersContainer {
 		grid-template-columns: auto 1fr auto;
 	}
diff --git a/app/features/comp-analyzer/components/WeaponGrid.module.css b/app/features/comp-analyzer/components/WeaponGrid.module.css
index 520fc1fbf..635265ba2 100644
--- a/app/features/comp-analyzer/components/WeaponGrid.module.css
+++ b/app/features/comp-analyzer/components/WeaponGrid.module.css
@@ -35,13 +35,13 @@
 	gap: var(--s-4);
 }
 
-@media (max-width: 900px) {
+@container (width < 640px) {
 	.weaponGrid {
 		grid-template-columns: repeat(2, 1fr);
 	}
 }
 
-@media (max-width: 600px) {
+@container (width < 560px) {
 	.weaponGrid {
 		grid-template-columns: 1fr;
 	}
diff --git a/app/features/lfg/components/LFGPost.module.css b/app/features/lfg/components/LFGPost.module.css
index 9a4e73453..805dc7dcc 100644
--- a/app/features/lfg/components/LFGPost.module.css
+++ b/app/features/lfg/components/LFGPost.module.css
@@ -12,7 +12,7 @@
 	flex-direction: column;
 }
 
-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.wideLayout {
 		grid-template-columns: 1fr 2fr;
 		row-gap: 0;
diff --git a/app/features/object-damage-calculator/routes/object-damage-calculator.module.css b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
index a988e024c..bbdfca139 100644
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
@@ -29,12 +29,6 @@
 	width: 100%;
 }
 
-@media screen and (min-width: 431px) {
-	.grid {
-		max-height: 70vh;
-	}
-}
-
 .hp {
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
diff --git a/app/features/scrims/routes/scrims.$id.module.css b/app/features/scrims/routes/scrims.$id.module.css
index 4870ee686..f670b0d07 100644
--- a/app/features/scrims/routes/scrims.$id.module.css
+++ b/app/features/scrims/routes/scrims.$id.module.css
@@ -4,7 +4,7 @@
 	gap: var(--s-8);
 }
 
-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.groupsContainer {
 		grid-template-columns: 1fr 1fr;
 	}
diff --git a/app/features/sendouq-match/routes/q.match.$id.module.css b/app/features/sendouq-match/routes/q.match.$id.module.css
index 331a1ba2b..fc4b1bc70 100644
--- a/app/features/sendouq-match/routes/q.match.$id.module.css
+++ b/app/features/sendouq-match/routes/q.match.$id.module.css
@@ -109,7 +109,7 @@
 	outline: none !important;
 }
 
-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.teamsContainer {
 		grid-template-columns: 1fr 1fr;
 	}
diff --git a/app/features/team/team.module.css b/app/features/team/team.module.css
index 923e0f41c..91b371092 100644
--- a/app/features/team/team.module.css
+++ b/app/features/team/team.module.css
@@ -262,7 +262,7 @@
 	margin-block: var(--s-6);
 }
 
-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.bannerFlags {
 		display: flex;
 	}
diff --git a/app/features/tournament-bracket/components/MatchTimer.module.css b/app/features/tournament-bracket/components/MatchTimer.module.css
index fc3d88bc1..3469afafe 100644
--- a/app/features/tournament-bracket/components/MatchTimer.module.css
+++ b/app/features/tournament-bracket/components/MatchTimer.module.css
@@ -2,7 +2,7 @@
 	position: relative;
 	width: 100%;
 	height: 18px;
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg);
 }
 
 .progressBar {
@@ -10,7 +10,7 @@
 	left: 0;
 	top: 0;
 	height: 100%;
-	background-color: var(--color-accent);
+	background-color: var(--color-text-accent);
 	transition:
 		width 0.5s ease-in-out,
 		background-color 0.3s ease;
@@ -55,6 +55,7 @@
 	font-size: var(--font-2xs);
 	font-weight: var(--weight-semi);
 	white-space: nowrap;
+	text-shadow: 0 0 3px black;
 }
 
 .gameMarkerHidden .gameMarkerText {
diff --git a/app/features/tournament-bracket/tournament-bracket.module.css b/app/features/tournament-bracket/tournament-bracket.module.css
index 60edfcf6a..4a5a2bdde 100644
--- a/app/features/tournament-bracket/tournament-bracket.module.css
+++ b/app/features/tournament-bracket/tournament-bracket.module.css
@@ -146,7 +146,7 @@
 	display: none;
 }
 
-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.stageBannerTopBar {
 		font-size: initial;
 	}
@@ -167,11 +167,11 @@
 
 .noScreen > svg {
 	width: 24px;
-	fill: var(--color-success);
+	color: var(--color-success);
 }
 
 .noScreenBanned > svg {
-	fill: var(--color-error);
+	color: var(--color-error);
 }
 
 .duringMatchActions {
@@ -363,7 +363,7 @@
 	text-decoration: line-through;
 }
 
-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.rosters {
 		justify-content: space-evenly;
 		flex-direction: row;
@@ -447,7 +447,7 @@
 	font-size: var(--font-sm);
 }
 
-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.infos {
 		flex-direction: row;
 	}
diff --git a/app/features/tournament-organization/tournament-organization.module.css b/app/features/tournament-organization/tournament-organization.module.css
index 9aab41aa9..7c086be78 100644
--- a/app/features/tournament-organization/tournament-organization.module.css
+++ b/app/features/tournament-organization/tournament-organization.module.css
@@ -109,7 +109,7 @@
 	align-items: center;
 }
 
-@media screen and (min-width: 768px) {
+@container (width >= 720px) {
 	.eventsContainer {
 		flex-direction: row;
 		gap: var(--s-8);
diff --git a/app/features/tournament-subs/routes/to.$id.subs.module.css b/app/features/tournament-subs/routes/to.$id.subs.module.css
index 55023685d..45aa888ae 100644
--- a/app/features/tournament-subs/routes/to.$id.subs.module.css
+++ b/app/features/tournament-subs/routes/to.$id.subs.module.css
@@ -94,7 +94,7 @@
 	height: 18px;
 }
 
-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.section {
 		grid-template-columns: max-content 1fr max-content max-content;
 		grid-template-areas:
diff --git a/app/features/tournament/routes/to.$id.seeds.module.css b/app/features/tournament/routes/to.$id.seeds.module.css
index c934aa0d2..6a0261152 100644
--- a/app/features/tournament/routes/to.$id.seeds.module.css
+++ b/app/features/tournament/routes/to.$id.seeds.module.css
@@ -60,7 +60,7 @@
 	grid-area: players;
 }
 
-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.headerRow {
 		display: grid;
 	}
diff --git a/app/features/tournament/tournament.module.css b/app/features/tournament/tournament.module.css
index 0d699faea..685ab2109 100644
--- a/app/features/tournament/tournament.module.css
+++ b/app/features/tournament/tournament.module.css
@@ -316,7 +316,7 @@
 	font-size: var(--font-sm);
 }
 
-@media screen and (min-width: 640px) {
+@container (width >= 640px) {
 	.section {
 		margin: 0;
 		border-radius: var(--radius-box);
@@ -353,7 +353,7 @@
 	text-align: center;
 }
 
-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.teamSetTopContainer {
 		flex-direction: row;
 		align-items: flex-end;
@@ -381,7 +381,7 @@
 }
 
 .teamSetModeLoss {
-	border-color: var(--color-bg-higher);
+	border-color: var(--color-error);
 }
 
 .teamSetStageContainer {
diff --git a/app/features/user-page/components/UserPageIconNav.module.css b/app/features/user-page/components/UserPageIconNav.module.css
index e66054bd4..199c7d7f4 100644
--- a/app/features/user-page/components/UserPageIconNav.module.css
+++ b/app/features/user-page/components/UserPageIconNav.module.css
@@ -38,7 +38,7 @@
 	background-color: var(--color-bg-higher);
 }
 
-@media screen and (min-width: 768px) {
+@container (width >= 720px) {
 	.iconNav {
 		display: grid;
 		grid-template-columns: repeat(4, 42px);
diff --git a/app/features/user-page/components/Widget.tsx b/app/features/user-page/components/Widget.tsx
index f89acc430..fc12fc8a6 100644
--- a/app/features/user-page/components/Widget.tsx
+++ b/app/features/user-page/components/Widget.tsx
@@ -595,7 +595,7 @@ function Builds({
 	builds: Extract<LoadedWidget, { id: "builds" }>["data"];
 }) {
 	return (
-		<div className={styles.builds}>
+		<div className={clsx(styles.builds, "scrollbar")}>
 			{builds.map((build) => (
 				<BuildCard key={build.id} build={build} canEdit={false} />
 			))}
diff --git a/app/features/user-page/routes/u.$identifier.edit.tsx b/app/features/user-page/routes/u.$identifier.edit.tsx
index ab53b3156..5ebe7c6ad 100644
--- a/app/features/user-page/routes/u.$identifier.edit.tsx
+++ b/app/features/user-page/routes/u.$identifier.edit.tsx
@@ -71,6 +71,7 @@ export default function UserEditPage() {
 				{({ FormField }) => (
 					<>
 						<SendouDialog
+							isDismissable
 							heading={t("common:fc.title")}
 							trigger={
 								<SendouButton variant="outlined">
diff --git a/app/features/user-page/routes/u.$identifier.index.tsx b/app/features/user-page/routes/u.$identifier.index.tsx
index bfa46dbbc..56d7d0674 100644
--- a/app/features/user-page/routes/u.$identifier.index.tsx
+++ b/app/features/user-page/routes/u.$identifier.index.tsx
@@ -138,7 +138,7 @@ function NewUserInfoPage() {
 				<UserPageIconNav items={navItems} />
 			</div>
 
-			<div className={newStyles.sideCarousel}>
+			<div className={clsx(newStyles.sideCarousel, "scrollbar")}>
 				{sideWidgets.map((widget) => (
 					<Widget key={widget.id} widget={widget} user={layoutData.user} />
 				))}
diff --git a/app/features/user-page/routes/u.$identifier.module.css b/app/features/user-page/routes/u.$identifier.module.css
index 96bb47787..fd80ce8d0 100644
--- a/app/features/user-page/routes/u.$identifier.module.css
+++ b/app/features/user-page/routes/u.$identifier.module.css
@@ -61,7 +61,6 @@
 	overflow-x: auto;
 	gap: var(--s-4);
 	padding-block: var(--s-2);
-	scrollbar-width: thin;
 	scroll-snap-type: x mandatory;
 }
 
@@ -80,7 +79,7 @@
 	display: none;
 }
 
-@media screen and (min-width: 768px) {
+@container (width >= 720px) {
 	.header {
 		flex-direction: row;
 		flex-wrap: wrap;
diff --git a/app/features/user-page/user-page.module.css b/app/features/user-page/user-page.module.css
index 336d023b7..8d693c30d 100644
--- a/app/features/user-page/user-page.module.css
+++ b/app/features/user-page/user-page.module.css
@@ -177,7 +177,7 @@
 	gap: var(--s-1-5);
 }
 
-@media screen and (min-width: 480px) {
+@container (width >= 480px) {
 	.placements {
 		gap: var(--s-10);
 	}