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 fc4b1bc70..36fc705a8 100644
--- a/app/features/sendouq-match/routes/q.match.$id.module.css
+++ b/app/features/sendouq-match/routes/q.match.$id.module.css
@@ -109,6 +109,11 @@
 	outline: none !important;
 }
 
+.preferenceEmoji {
+	filter: grayscale(100%);
+	transition: all 0.2s;
+}
+
 @container (width >= 640px) {
 	.teamsContainer {
 		grid-template-columns: 1fr 1fr;
diff --git a/app/features/sendouq-match/routes/q.match.$id.tsx b/app/features/sendouq-match/routes/q.match.$id.tsx
index 6fce94cf9..7901a1de5 100644
--- a/app/features/sendouq-match/routes/q.match.$id.tsx
+++ b/app/features/sendouq-match/routes/q.match.$id.tsx
@@ -1089,7 +1089,7 @@ function MapListMap({
 											>
 												<img
 													src={preferenceEmojiUrl(preference)}
-													className="q-settings__radio__emoji"
+													className={styles.preferenceEmoji}
 													width={18}
 													alt={`${preference} emoji`}
 												/>
@@ -1342,7 +1342,7 @@ function MapListMapPickInfo({
 							<div key={userId} className="stack horizontal items-center xs">
 								<img
 									src={preferenceEmojiUrl(preference)}
-									className="q-settings__radio__emoji"
+									className={styles.preferenceEmoji}
 									width={18}
 									alt={`${preference} emoji`}
 								/>
diff --git a/app/features/sendouq-settings/components/PreferenceRadioGroup.module.css b/app/features/sendouq-settings/components/PreferenceRadioGroup.module.css
new file mode 100644
index 000000000..2eebf6fb9
--- /dev/null
+++ b/app/features/sendouq-settings/components/PreferenceRadioGroup.module.css
@@ -0,0 +1,35 @@
+.radio {
+	background-color: var(--color-bg-high);
+	font-size: var(--font-xs);
+	text-transform: uppercase;
+	font-weight: var(--weight-semi);
+	color: var(--color-text-high);
+	padding: var(--s-1) var(--s-2);
+	border-radius: var(--radius-field);
+	display: flex;
+	align-items: center;
+	gap: var(--s-1);
+	cursor: pointer;
+}
+
+.emoji {
+	filter: grayscale(100%);
+	transition: all 0.2s;
+}
+
+.checked {
+	color: var(--color-text);
+	outline: 2px solid var(--color-bg-higher);
+}
+
+.checked .emoji {
+	filter: grayscale(0%);
+}
+
+.focusVisible {
+	outline: var(--focus-ring);
+}
+
+.radio:hover .emoji {
+	scale: 1.1;
+}
diff --git a/app/features/sendouq-settings/components/PreferenceRadioGroup.tsx b/app/features/sendouq-settings/components/PreferenceRadioGroup.tsx
index 8430c17c2..4f9ecd40a 100644
--- a/app/features/sendouq-settings/components/PreferenceRadioGroup.tsx
+++ b/app/features/sendouq-settings/components/PreferenceRadioGroup.tsx
@@ -3,6 +3,7 @@ import { Radio, RadioGroup } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import type { Preference } from "~/db/tables";
 import { preferenceEmojiUrl } from "~/utils/urls";
+import styles from "./PreferenceRadioGroup.module.css";
 
 export function PreferenceRadioGroup({
 	preference,
@@ -26,17 +27,16 @@ export function PreferenceRadioGroup({
 			orientation="horizontal"
 		>
 			<Radio value="AVOID" aria-label="Avoid the mode">
-				{({ isSelected, isHovered, isFocusVisible }) => (
+				{({ isSelected, isFocusVisible }) => (
 					<span
-						className={clsx("q-settings__radio", {
-							"q-settings__radio__checked": isSelected,
-							"q-settings__radio__hovered": isHovered,
-							"q-settings__radio__focus-visible": isFocusVisible,
+						className={clsx(styles.radio, {
+							[styles.checked]: isSelected,
+							[styles.focusVisible]: isFocusVisible,
 						})}
 					>
 						<img
 							src={preferenceEmojiUrl("AVOID")}
-							className="q-settings__radio__emoji"
+							className={styles.emoji}
 							width={18}
 							alt="Avoid emoji"
 						/>
@@ -45,17 +45,16 @@ export function PreferenceRadioGroup({
 				)}
 			</Radio>
 			<Radio value="NEUTRAL" aria-label="Neutral towards the mode">
-				{({ isSelected, isHovered, isFocusVisible }) => (
+				{({ isSelected, isFocusVisible }) => (
 					<span
-						className={clsx("q-settings__radio", {
-							"q-settings__radio__checked": isSelected,
-							"q-settings__radio__hovered": isHovered,
-							"q-settings__radio__focus-visible": isFocusVisible,
+						className={clsx(styles.radio, {
+							[styles.checked]: isSelected,
+							[styles.focusVisible]: isFocusVisible,
 						})}
 					>
 						<img
 							src={preferenceEmojiUrl()}
-							className="q-settings__radio__emoji"
+							className={styles.emoji}
 							width={18}
 							alt="Neutral emoji"
 						/>
@@ -64,17 +63,16 @@ export function PreferenceRadioGroup({
 				)}
 			</Radio>
 			<Radio value="PREFER" aria-label="Prefer the mode">
-				{({ isSelected, isHovered, isFocusVisible }) => (
+				{({ isSelected, isFocusVisible }) => (
 					<span
-						className={clsx("q-settings__radio", {
-							"q-settings__radio__checked": isSelected,
-							"q-settings__radio__hovered": isHovered,
-							"q-settings__radio__focus-visible": isFocusVisible,
+						className={clsx(styles.radio, {
+							[styles.checked]: isSelected,
+							[styles.focusVisible]: isFocusVisible,
 						})}
 					>
 						<img
 							src={preferenceEmojiUrl("PREFER")}
-							className="q-settings__radio__emoji"
+							className={styles.emoji}
 							width={18}
 							alt="Prefer emoji"
 						/>
diff --git a/app/features/sendouq-settings/routes/q.settings.tsx b/app/features/sendouq-settings/routes/q.settings.tsx
index 0f9d22653..2d2cd6b28 100644
--- a/app/features/sendouq-settings/routes/q.settings.tsx
+++ b/app/features/sendouq-settings/routes/q.settings.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { Map as MapIcon, Mic, Puzzle, Volume2 } from "lucide-react";
 import * as React from "react";
 import { useState } from "react";
@@ -65,12 +66,14 @@ export const meta: MetaFunction = (args) => {
 
 export default function SendouQSettingsPage() {
 	return (
-		<Main>
+		<Main className="stack sm">
 			<MapPicker />
-			<WeaponPool />
-			<VoiceChat />
-			<Sounds />
-			<Misc />
+			<div className="half-width stack sm">
+				<WeaponPool />
+				<VoiceChat />
+				<Sounds />
+				<Misc />
+			</div>
 		</Main>
 	);
 }
@@ -140,7 +143,7 @@ function MapPicker() {
 
 	return (
 		<details>
-			<summary className={styles.summary}>
+			<summary className={clsx(styles.summary, "half-width")}>
 				<div>
 					<span>{t("q:settings.maps.header")}</span> <MapIcon />
 				</div>
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 36fdaf824..411944290 100644
--- a/app/features/user-page/routes/u.$identifier.builds.new.tsx
+++ b/app/features/user-page/routes/u.$identifier.builds.new.tsx
@@ -32,12 +32,10 @@ export default function NewBuildPage() {
 	}
 
 	return (
-		<div className="half-width u__build-form">
-			<NewBuildForm
-				defaultValues={defaultValues}
-				gearIdToAbilities={gearIdToAbilities}
-				isEditing={defaultValues?.buildToEditId != null}
-			/>
-		</div>
+		<NewBuildForm
+			defaultValues={defaultValues}
+			gearIdToAbilities={gearIdToAbilities}
+			isEditing={defaultValues?.buildToEditId != null}
+		/>
 	);
 }
diff --git a/app/styles/utils.css b/app/styles/utils.css
index 20aa5682a..1ff671694 100644
--- a/app/styles/utils.css
+++ b/app/styles/utils.css
@@ -631,4 +631,10 @@
 		font-style: italic;
 		font-size: var(--font-xs);
 	}
+
+	.half-width {
+		width: 100%;
+		max-width: 24rem;
+		margin-inline: auto;
+	}
 }