diff --git a/app/components/MapPoolSelector.module.css b/app/components/MapPoolSelector.module.css
index a4f2f4d1b..3f7543487 100644
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -51,9 +51,9 @@
 
 .modeButton {
 	padding: var(--s-1);
-	border: 2px solid var(--color-bg);
+	border: 2px solid var(--color-border);
 	border-radius: var(--rounded-full);
-	background-color: transparent;
+	background-color: var(--color-bg);
 	color: var(--color-accent);
 	opacity: 1 !important;
 	outline: initial;
@@ -61,15 +61,14 @@
 
 .modeButton.selected {
 	border: 2px solid transparent;
-	background-color: var(--color-accent-high);
+	background-color: var(--color-bg-higher);
 }
 
 .modeButton.preselected {
-	border: 2px solid var(--color-info);
-	background-color: var(--color-accent-high);
+	border: 2px solid var(--color-text-accent);
+	background-color: var(--color-bg-higher);
 }
 
 .mode:not(.selected, .preselected) {
-	filter: grayscale(100%) brightness(30%);
-	opacity: 0.6;
+	filter: grayscale(100%) brightness(50%);
 }
diff --git a/app/features/build-analyzer/analyzer.css b/app/features/build-analyzer/analyzer.css
index 5f4b2c6ac..bb2dd2e57 100644
--- a/app/features/build-analyzer/analyzer.css
+++ b/app/features/build-analyzer/analyzer.css
@@ -32,7 +32,7 @@
 
 .analyzer__ap-compare__bar {
 	height: 100%;
-	background-color: var(--color-accent);
+	background-color: var(--color-info);
 }
 
 .analyzer__ap-compare__bar.analyzer__better {
@@ -100,7 +100,7 @@
 }
 
 .analyzer__details:has(.analyzer__stat-card-highlighted) .analyzer__summary {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-higher);
 }
 
 .analyzer__weapon-info-badge {
@@ -151,7 +151,7 @@
 }
 
 .analyzer__stat-card-highlighted {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-higher);
 }
 
 .analyzer__stat-card__title-and-value-container {
@@ -249,11 +249,11 @@
 .analyzer__patch {
 	border-radius: var(--rounded);
 	background-color: var(--color-accent-low);
-	color: var(--color-text-high);
+	color: var(--color-accent-high);
 	font-size: var(--fonts-xxxs);
 	font-weight: var(--bold);
 	padding-block: var(--s-0-5);
-	padding-inline: var(--s-1);
+	padding-inline: var(--s-2);
 }
 
 @media screen and (max-width: 640px) {
diff --git a/app/features/calendar/routes/calendar.module.css b/app/features/calendar/routes/calendar.module.css
index f69f9284c..f6e66eb14 100644
--- a/app/features/calendar/routes/calendar.module.css
+++ b/app/features/calendar/routes/calendar.module.css
@@ -85,7 +85,7 @@
 
 .dayHeaderToday {
 	background-color: var(--color-bg-higher);
-	border: 2px solid var(--color-accent-low);
+	border: 2px solid var(--color-border-high);
 }
 
 .dayHeaderWeekday {
@@ -109,7 +109,7 @@
 .clockHeaderDivider {
 	width: 100%;
 	height: 3px;
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-high);
 	border-radius: var(--rounded);
 }
 
diff --git a/app/features/front-page/routes/index.tsx b/app/features/front-page/routes/index.tsx
index e352b4a7d..5693fe7f1 100644
--- a/app/features/front-page/routes/index.tsx
+++ b/app/features/front-page/routes/index.tsx
@@ -253,7 +253,7 @@ function AllTournamentsLinkCard() {
 	return (
 		<Link
 			to={CALENDAR_TOURNAMENTS_PAGE}
-			className={clsx(styles.tournamentCardsViewAllCard, "mt-4")}
+			className={clsx(styles.tournamentCardsViewAllCard)}
 		>
 			<Image path={navIconUrl("medal")} size={36} alt="" />
 			{t("front:showcase.viewAll")}
diff --git a/app/features/info/support.css b/app/features/info/support.css
index 2960520b3..e3247c19c 100644
--- a/app/features/info/support.css
+++ b/app/features/info/support.css
@@ -17,7 +17,7 @@
 	padding: 0;
 	border: none;
 	background-color: transparent;
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	font-size: var(--fonts-md);
 	font-weight: var(--bold);
 	outline: initial;
diff --git a/app/features/map-planner/components/Planner.tsx b/app/features/map-planner/components/Planner.tsx
index 89701cd7d..5501815ce 100644
--- a/app/features/map-planner/components/Planner.tsx
+++ b/app/features/map-planner/components/Planner.tsx
@@ -358,7 +358,7 @@ function WeaponImageSelector() {
 
 	return (
 		<div
-			className={clsx("plans__weapons-section", {
+			className={clsx("plans__weapons-section scrollbar", {
 				"plans__weapons-section__wide": isWide,
 			})}
 		>
diff --git a/app/features/map-planner/plans.css b/app/features/map-planner/plans.css
index d7b598138..486e4ab4e 100644
--- a/app/features/map-planner/plans.css
+++ b/app/features/map-planner/plans.css
@@ -83,7 +83,8 @@ button[data-state="closed"][aria-haspopup="dialog"] {
 	display: flex;
 	align-items: center;
 	padding: var(--s-3);
-	border: 1px solid var(--color-accent-low);
+	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);
@@ -98,15 +99,16 @@ button[data-state="closed"][aria-haspopup="dialog"] {
 }
 
 .plans__outline-toggle > .plans__outline-toggle__button {
-	background-color: grey;
+	background-color: var(--color-bg-high);
+	color: var(--color-text);
 	font-size: var(--fonts-xs);
 	padding: var(--s-2);
-	color: var(--color-text-inverse);
 	width: 140px;
 }
 
 .plans__outline-toggle > .plans__outline-toggle__button__outlined {
-	background-color: var(--color-accent);
+	background-color: var(--color-text-accent);
+	color: var(--color-text-inverse);
 }
 
 .plans__weapons-section {
@@ -115,7 +117,8 @@ button[data-state="closed"][aria-haspopup="dialog"] {
 	top: 15%;
 	width: 150px;
 	max-height: 85vh;
-	border: 1px solid var(--color-accent-low);
+	border: 2px solid var(--color-border);
+	border-left: transparent;
 	border-radius: 0 var(--rounded) var(--rounded) 0;
 	background: var(--color-bg);
 	gap: 2px;
diff --git a/app/features/notifications/components/NotificationList.module.css b/app/features/notifications/components/NotificationList.module.css
index 1302bb474..6a2f1f5b4 100644
--- a/app/features/notifications/components/NotificationList.module.css
+++ b/app/features/notifications/components/NotificationList.module.css
@@ -1,7 +1,7 @@
 .itemDivider {
 	margin-inline: var(--s-2-5);
 	border-width: 0.5px;
-	border-color: var(--color-border);
+	border-color: var(--color-bg-high);
 }
 
 .item {
diff --git a/app/features/object-damage-calculator/calculator.css b/app/features/object-damage-calculator/calculator.css
index f473d7bc1..4f6f92bcc 100644
--- a/app/features/object-damage-calculator/calculator.css
+++ b/app/features/object-damage-calculator/calculator.css
@@ -39,20 +39,6 @@
 	}
 }
 
-.object-damage__grid::-webkit-scrollbar {
-	width: 4px;
-	height: 8px;
-}
-
-.object-damage__grid::-webkit-scrollbar-corner {
-	background-color: var(--color-bg-high);
-}
-
-.object-damage__grid::-webkit-scrollbar-thumb {
-	background-color: var(--color-accent-low);
-	border-radius: 4px;
-}
-
 .object-damage__hp {
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
@@ -127,7 +113,7 @@
 }
 
 .object-damage__multiplier {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	font-size: var(--fonts-xxs);
 	font-weight: var(--bold);
 	letter-spacing: 0.5px;
@@ -144,9 +130,9 @@
 .object-damage__patch {
 	border-radius: var(--rounded);
 	background-color: var(--color-accent-low);
-	color: var(--color-text-high);
+	color: var(--color-accent-high);
 	font-size: var(--fonts-xxxs);
 	font-weight: var(--bold);
 	padding-block: var(--s-0-5);
-	padding-inline: var(--s-1);
+	padding-inline: var(--s-2);
 }
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 ac002311a..2ff49402c 100644
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.tsx
@@ -257,7 +257,7 @@ function DamageReceiversGrid({
 	return (
 		<div>
 			<div
-				className="object-damage__grid"
+				className="object-damage__grid scrollbar"
 				style={{
 					gridTemplateColumns: gridTemplateColumnsValue(
 						damagesToReceivers[0]?.damages.length ?? 0,
diff --git a/app/features/scrims/components/ScrimCard.module.css b/app/features/scrims/components/ScrimCard.module.css
index 63bcd32d0..0dd3e087f 100644
--- a/app/features/scrims/components/ScrimCard.module.css
+++ b/app/features/scrims/components/ScrimCard.module.css
@@ -91,7 +91,7 @@
 .expandButton {
 	background: none;
 	border: none;
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	cursor: pointer;
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
@@ -113,7 +113,7 @@
 }
 
 .requestCard {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-higher);
 }
 
 .requestFooter {
diff --git a/app/features/sendouq-settings/q-settings.css b/app/features/sendouq-settings/q-settings.css
index a37b8cd83..7b4406b2a 100644
--- a/app/features/sendouq-settings/q-settings.css
+++ b/app/features/sendouq-settings/q-settings.css
@@ -46,7 +46,7 @@
 
 .q-settings__summary svg {
 	width: 24px;
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	position: absolute;
 	right: 20px;
 	top: 14px;
diff --git a/app/features/sendouq/q.css b/app/features/sendouq/q.css
index 663d162f8..163333462 100644
--- a/app/features/sendouq/q.css
+++ b/app/features/sendouq/q.css
@@ -40,7 +40,7 @@
 }
 
 .q__front-page-link:hover {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-higher);
 }
 
 .q__front-page-link__sub-text {
@@ -121,7 +121,7 @@
 	font-size: var(--fonts-xxs);
 	font-weight: var(--semi-bold);
 	text-transform: uppercase;
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	display: flex;
 	align-items: center;
 }
@@ -131,7 +131,7 @@
 	flex: 1;
 	content: "";
 	padding: 2px;
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-high);
 	margin: 5px;
 	border-radius: var(--rounded);
 }
@@ -293,7 +293,7 @@
 .q__group-member__star {
 	min-width: 18px;
 	max-width: 18px;
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	stroke-width: 2;
 }
 
@@ -528,7 +528,7 @@
 .q-info__container h2 {
 	font-size: var(--fonts-lg);
 	margin-block-end: var(--s-2);
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 }
 
 .q-info__container h3 {
diff --git a/app/features/team/team.css b/app/features/team/team.css
index b8d1e3c43..1270bcc8f 100644
--- a/app/features/team/team.css
+++ b/app/features/team/team.css
@@ -44,7 +44,7 @@
 	place-items: center;
 	font-size: var(--fonts-xl);
 	border-radius: 100%;
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-high);
 }
 
 .team__banner {
diff --git a/app/features/top-search/top-search.css b/app/features/top-search/top-search.css
index cef4f08ea..702ae959b 100644
--- a/app/features/top-search/top-search.css
+++ b/app/features/top-search/top-search.css
@@ -37,7 +37,7 @@
 }
 
 a.placements__table__row:hover {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-higher);
 }
 
 .placements__table__row:first-of-type {
diff --git a/app/features/tournament-bracket/components/Bracket/bracket.css b/app/features/tournament-bracket/components/Bracket/bracket.css
index 69f4cd7f7..20e6eb9d8 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.css
@@ -85,7 +85,7 @@ a.bracket__match:hover {
 }
 
 .bracket__match__seed {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	margin-inline-end: var(--s-0-5);
 	min-width: 15px;
 	max-width: 15px;
diff --git a/app/features/tournament/tournament.css b/app/features/tournament/tournament.css
index 2108a73c8..5c48e8471 100644
--- a/app/features/tournament/tournament.css
+++ b/app/features/tournament/tournament.css
@@ -127,7 +127,7 @@
 	display: flex;
 	flex: 1;
 	flex-direction: column;
-	border-inline-start: 2px solid var(--color-accent);
+	border-inline-start: 2px solid var(--color-text-accent);
 	font-size: var(--fonts-xs);
 	font-weight: var(--semi-bold);
 	gap: var(--s-2);
@@ -203,7 +203,7 @@
 
 .tournament__team-member-name__role {
 	position: absolute;
-	background-color: var(--color-accent);
+	background-color: var(--color-text-accent);
 	color: var(--color-text-inverse);
 	font-weight: var(--semi-bold);
 	width: 12px;
@@ -250,16 +250,16 @@
 
 .tournament__badge__ranked {
 	background-color: var(--color-info-low);
-	color: var(--color-info);
+	color: var(--color-info-high);
 }
 
 .tournament__badge__unranked {
-	background-color: var(--color-success-high);
-	color: var(--color-success);
+	background-color: var(--color-success-low);
+	color: var(--color-success-high);
 }
 
 .tournament__badge__modes {
-	background-color: var(--color-bg-higher);
+	background-color: var(--color-bg-high);
 }
 
 .tournament__info__icon {
@@ -362,7 +362,8 @@
 }
 
 .tournament__missing-player__optional {
-	border: 2px dashed var(--color-accent-low);
+	border: 2px dashed var(--color-text-accent);
+	color: var(--color-text-accent);
 }
 
 .tournament__invite-container {
diff --git a/app/styles/badges.css b/app/styles/badges.css
index 7c6dee4fb..957d1c3ee 100644
--- a/app/styles/badges.css
+++ b/app/styles/badges.css
@@ -31,7 +31,7 @@
 }
 
 .badges__explanation {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	font-weight: var(--semi-bold);
 	text-align: center;
 }
diff --git a/app/styles/common.css b/app/styles/common.css
index 8c595885e..da3f7f4a2 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -110,6 +110,10 @@ input:not(.plain) {
 	outline: none;
 }
 
+input:not(.plain):hover {
+	border-color: var(--color-border-high);
+}
+
 input:user-invalid {
 	border-color: transparent;
 	outline: 2px solid var(--color-error);
@@ -137,7 +141,7 @@ input:user-invalid {
 
 input:not(.plain, .combobox-input):focus-within {
 	border-color: transparent;
-	outline: 2px solid var(--color-accent);
+	outline: 2px solid var(--color-text-accent);
 }
 
 input:not(.plain)::placeholder {
@@ -311,7 +315,7 @@ td > input[type="checkbox"] {
 }
 
 hr {
-	border-color: var(--color-accent-low);
+	border: 1px solid var(--color-bg-high);
 }
 
 abbr:not([title]) {
@@ -469,7 +473,7 @@ abbr[title] {
 }
 
 .articles-list__title {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	font-size: var(--fonts-md);
 }
 
@@ -534,7 +538,7 @@ abbr[title] {
 	justify-content: center;
 	border-radius: var(--rounded);
 	background-color: var(--color-info-low);
-	color: var(--color-text);
+	color: var(--color-info-high);
 	font-size: var(--fonts-sm);
 	font-weight: var(--semi-bold);
 	gap: var(--s-2);
@@ -880,7 +884,7 @@ abbr[title] {
 .divider::before,
 .divider::after {
 	flex: 1;
-	border-bottom: 2px solid var(--color-border);
+	border-bottom: 2px solid var(--color-bg-high);
 	content: "";
 }
 
@@ -1077,12 +1081,12 @@ html[dir="rtl"] .fix-rtl {
 	width: 0.6rem;
 	height: 0.6rem;
 	border-radius: 50%;
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-higher);
 	transition: all 0.2s ease;
 }
 
 .pagination__dot__active {
-	background-color: var(--color-accent);
+	background-color: var(--color-text-accent);
 }
 
 .pagination__page-count {
@@ -1429,13 +1433,13 @@ html[dir="rtl"] .fix-rtl {
 }
 
 .format-selector__count {
-	color: var(--color-accent);
+	color: var(--color-text-accent);
 	font-size: var(--fonts-sm);
 	white-space: nowrap;
 }
 
 .format-selector__divider {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-text-accent);
 	width: 2px;
 	align-self: stretch;
 }
diff --git a/app/styles/front.module.css b/app/styles/front.module.css
index fbf936589..19564e1c9 100644
--- a/app/styles/front.module.css
+++ b/app/styles/front.module.css
@@ -192,6 +192,7 @@
 	min-width: 90px;
 	max-width: 90px;
 	border: 2.5px solid var(--color-bg-higher);
+	margin-top: calc((var(--s-2) * 2) + var(--s-2));
 }
 
 .tournamentCardsViewAllCard:hover {
diff --git a/app/styles/layout.css b/app/styles/layout.css
index 8d4a9ecee..ac63ce90f 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -150,7 +150,7 @@
 	justify-content: center;
 	padding: 0.5rem;
 	border: 2px solid;
-	border-color: var(--color-accent-low);
+	border-color: var(--color-text-accent);
 	border-radius: var(--rounded);
 	background-color: transparent;
 	color: inherit;
diff --git a/app/styles/u.css b/app/styles/u.css
index 5a635f654..2c1311ca5 100644
--- a/app/styles/u.css
+++ b/app/styles/u.css
@@ -230,7 +230,7 @@
 }
 
 .u__placements:hover {
-	background-color: var(--color-accent-low);
+	background-color: var(--color-bg-higher);
 }
 
 .u__placements__mode {
diff --git a/app/styles/utils.css b/app/styles/utils.css
index 29f627e94..9349b6b85 100644
--- a/app/styles/utils.css
+++ b/app/styles/utils.css
@@ -522,8 +522,6 @@
 }
 
 .scrollbar {
-	scrollbar-gutter: stable;
-
 	@supports not selector(::-webkit-scrollbar) {
 		scrollbar-width: thin;
 		scrollbar-color: var(--color-bg-higher) transparent;