diff --git a/components/settings/settings-page.tsx b/components/settings/settings-page.tsx
index 255a5a3..a517fdf 100644
--- a/components/settings/settings-page.tsx
+++ b/components/settings/settings-page.tsx
@@ -354,17 +354,17 @@ export function SettingsPage() {
           <ThemeToggle />
         </SettingsRow>
         <SettingsRow icon={Wind} title={t("settings.units.wind.title")} description={t("settings.units.wind.description")}>
-          <div className="surface-control inline-flex rounded-control p-1" role="radiogroup" aria-label={t("settings.units.wind.label")}>
+          <div className="surface-control inline-flex rounded-full p-1" role="radiogroup" aria-label={t("settings.units.wind.label")}>
             {WIND_SPEED_UNITS.map((unit) => (
               <button
                 key={unit}
                 type="button"
                 role="radio"
                 aria-checked={windSpeedUnit === unit}
-                className={`rounded-[calc(var(--radius-control)-0.25rem)] px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
+                className={`min-w-14 rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
                   windSpeedUnit === unit
-                    ? "bg-accent text-accent-foreground shadow-soft"
-                    : "text-muted hover:text-foreground"
+                    ? "border-accent/45 bg-accent/10 text-accent shadow-soft"
+                    : "border-transparent text-muted hover:bg-surface-muted/70 hover:text-foreground"
                 }`}
                 onClick={() => setWindSpeedUnit(unit)}
               >