diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index e8f1232b19bcfbb3ef4b3dcca2389e47892a720f..a6e29cf7231284e5be9b16702fbd77c97d883887 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -6,6 +6,7 @@ import {
   TerminalIcon,
 } from "lucide-react";
 import { useAtomValue } from "@effect/atom-react";
+import { useLocation } from "@tanstack/react-router";
 import { Atom } from "effect/unstable/reactivity";
 import {
   type KeyboardEvent,
@@ -41,7 +42,7 @@ import {
   type EnvironmentId,
   resolveEnvironmentMachineKind,
 } from "@t3tools/contracts";
-import { connectionStatusText } from "@t3tools/client-runtime/connection";
+import { connectionStatusText, connectionStatusTitle } from "@t3tools/client-runtime/connection";
 import {
   isAtomCommandInterrupted,
   squashAtomCommandFailure,
@@ -67,7 +68,7 @@ import {
 } from "./settingsLayout";
 import { searchableSetting } from "./settingsSearch";
 import { EnvironmentIconPicker } from "./EnvironmentIconPicker";
-import { LoadBalancingSettings } from "./LoadBalancingSettings";
+import { LoadBalancingPreference, LoadBalancingSettings } from "./LoadBalancingSettings";
 import { GitHubRoutingSettings } from "./GitHubRoutingSettings";
 import { Input } from "../ui/input";
 import { CommandShortcut } from "../ui/command";
@@ -157,7 +158,7 @@ import {
 import { requestConfirmDialog } from "~/confirmDialog";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { primaryServerKeybindingsAtom, serverEnvironment } from "~/state/server";
-import { ConnectionStatusDot } from "../ConnectionStatusDot";
+import { ConnectionStatusDot, connectionPhaseDotClassName } from "../ConnectionStatusDot";
 import {
   ServerUpdateAction,
   ServerUpdateProgress,
@@ -1498,37 +1499,40 @@ function SavedBackendListRow({
     <div className={cn(ITEM_ROW_CLASSNAME, !enabled && "opacity-60")}>
       <div className={ITEM_ROW_INNER_CLASSNAME}>
         <div className="min-w-0 flex-1 space-y-1">
-          <div className="flex min-h-5 items-center gap-1.5">
-            <ConnectionStatusDot
-              tooltipText={statusTooltip}
-              dotClassName={stateDotClassName}
-              pingClassName={
-                enabled && (connectionState === "connecting" || connectionState === "reconnecting")
-                  ? "bg-warning/60 duration-2000"
-                  : null
-              }
-            />
-            <EnvironmentMachineIcon
-              aria-hidden
-              kind={resolveEnvironmentMachineKind(environment.serverConfig)}
-              className="size-3.5 shrink-0 text-muted-foreground"
-            />
-            <h3 className="min-w-0 truncate text-sm font-medium text-foreground">
-              {environment.label}
-            </h3>
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+            <div className="flex min-h-5 min-w-0 max-w-full items-center gap-1.5">
+              <ConnectionStatusDot
+                tooltipText={statusTooltip}
+                dotClassName={stateDotClassName}
+                pingClassName={
+                  enabled &&
+                  (connectionState === "connecting" || connectionState === "reconnecting")
+                    ? "bg-warning/60 duration-2000"
+                    : null
+                }
+              />
+              <EnvironmentMachineIcon
+                aria-hidden
+                kind={resolveEnvironmentMachineKind(environment.serverConfig)}
+                className="size-3.5 shrink-0 text-muted-foreground"
+              />
+              <h3 className="min-w-0 truncate text-sm font-medium text-foreground">
+                {environment.label}
+              </h3>
+            </div>
+            {isConnected ? (
+              <div className="w-full sm:w-auto">
+                <EnvironmentIconPicker
+                  environmentId={environmentId}
+                  serverConfig={environment.serverConfig}
+                  size="xs"
+                />
+              </div>
+            ) : null}
           </div>
           {metadataBits.length > 0 ? (
             <p className="truncate text-xs text-muted-foreground">{metadataBits.join(" · ")}</p>
           ) : null}
-          {isConnected ? (
-            <div className="pt-1">
-              <EnvironmentIconPicker
-                environmentId={environmentId}
-                serverConfig={environment.serverConfig}
-                size="xs"
-              />
-            </div>
-          ) : null}
           {serverUpdateState.status !== "idle" ? (
             <div className="max-w-md">
               <ServerUpdateProgress state={serverUpdateState} />
@@ -1586,12 +1590,12 @@ function SavedBackendListRow({
               <TooltipTrigger
                 render={
                   <Button size="xs" variant="outline" disabled>
-                    Managed above
+                    Managed locally
                   </Button>
                 }
               />
               <TooltipPopup side="top" className="max-w-80 whitespace-pre-wrap leading-tight">
-                The WSL backend is managed by the WSL setting above — turn it on or off there.
+                Select the primary environment to turn the WSL backend on or off.
               </TooltipPopup>
             </Tooltip>
           ) : (
@@ -1813,6 +1817,19 @@ export function ConnectionsSettings() {
   const keybindings = useAtomValue(primaryServerKeybindingsAtom);
   const { environments } = useEnvironments();
   const primaryEnvironment = usePrimaryEnvironment();
+  const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<EnvironmentId | null>(null);
+  const searchTargetId = useLocation({ select: (location) => location.hash.replace(/^#/, "") });
+  const [handledSearchTargetId, setHandledSearchTargetId] = useState<string | null>(null);
+  if (primaryEnvironment && handledSearchTargetId !== searchTargetId) {
+    setHandledSearchTargetId(searchTargetId);
+    if (["connections-environment", "wsl-backend"].includes(searchTargetId)) {
+      setSelectedEnvironmentId(primaryEnvironment.environmentId);
+    }
+  }
+  const selectedEnvironment =
+    environments.find((environment) => environment.environmentId === selectedEnvironmentId) ??
+    primaryEnvironment ??
+    environments[0];
   const connectPairing = useAtomCommand(connectPairingAtom, { reportFailure: false });
   const connectSshEnvironment = useAtomCommand(connectSshEnvironmentAtom, {
     reportFailure: false,
@@ -3235,8 +3252,8 @@ export function ConnectionsSettings() {
     />
   );
 
-  return (
-    <SettingsPageContainer>
+  const primarySettings = (
+    <>
       {canManageLocalBackend ? (
         <>
           <SettingsSection
@@ -3324,6 +3341,7 @@ export function ConnectionsSettings() {
           {isLocalBackendRemotelyReachable ? (
             <SettingsSection
               title="Authorized clients"
+              className="[&>div:first-child]:flex-wrap"
               headerAction={
                 <AuthorizedClientsHeaderAction
                   onPairingLinkCreated={handlePairingLinkCreated}
@@ -3626,9 +3644,15 @@ export function ConnectionsSettings() {
           <CloudLinkRow canManageRelay={canManageRelay} />
         </SettingsSection>
       )}
+    </>
+  );
 
+  return (
+    <SettingsPageContainer width="wide">
       <SettingsSection
         {...searchableSetting("remote-environments")}
+        title="Environments"
+        variant="plain"
         headerAction={
           <div className="flex items-center gap-1">
             {savedServerUpdateTargets.length > 0 ? (
@@ -3701,21 +3725,117 @@ export function ConnectionsSettings() {
           </div>
         }
       >
-        {savedEnvironments.map((environment) => (
-          <SavedBackendListRow
-            key={environment.environmentId}
-            environment={environment}
-            removingEnvironmentId={removingSavedEnvironmentId}
-            onSetEnabled={handleSetSavedBackendEnabled}
-            onRemove={handleRemoveSavedBackend}
-          />
-        ))}
+        <div className="overflow-hidden rounded-xl border border-border/60 bg-card/40 shadow-xs/5 lg:grid lg:h-[min(34rem,calc(100dvh-18rem))] lg:min-h-[28rem] lg:grid-cols-[17rem_minmax(0,1fr)]">
+          <div className="border-b border-border/60 bg-muted/10 lg:flex lg:min-h-0 lg:flex-col lg:border-r lg:border-b-0">
+            <ScrollArea
+              scrollFade
+              chainVerticalScroll
+              className="max-h-64 lg:max-h-none lg:min-h-0 lg:flex-1"
+            >
+              <div className="divide-y divide-border/50" aria-label="Environments">
+                {(primaryEnvironment
+                  ? [primaryEnvironment, ...savedEnvironments]
+                  : savedEnvironments
+                ).map((environment) => {
+                  const selected = environment.environmentId === selectedEnvironment?.environmentId;
+                  const isPrimary = environment.entry.target._tag === "PrimaryConnectionTarget";
+                  return (
+                    <button
+                      key={environment.environmentId}
+                      type="button"
+                      aria-label={"Select " + environment.label}
+                      aria-pressed={selected}
+                      onClick={() => setSelectedEnvironmentId(environment.environmentId)}
+                      className={cn(
+                        "flex min-h-18 w-full cursor-pointer items-start gap-3 px-3 py-3 text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring sm:px-4",
+                        selected ? "bg-muted/45" : "hover:bg-muted/25",
+                        !environment.entry.enabled && !selected && "opacity-60",
+                      )}
+                    >
+                      <EnvironmentMachineIcon
+                        aria-hidden
+                        kind={resolveEnvironmentMachineKind(environment.serverConfig)}
+                        className="mt-0.5 size-4 shrink-0 text-muted-foreground"
+                      />
+                      <span className="min-w-0 flex-1 space-y-1">
+                        <span className="flex items-center gap-2">
+                          <span className="truncate text-sm font-medium">{environment.label}</span>
+                          {isPrimary ? (
+                            <span className="shrink-0 text-[10px] text-muted-foreground">
+                              Primary
+                            </span>
+                          ) : null}
+                        </span>
+                        <Tooltip>
+                          <TooltipTrigger
+                            render={
+                              <span className="block truncate text-xs text-muted-foreground" />
+                            }
+                          >
+                            {environment.displayUrl ?? "T3 Connect"}
+                          </TooltipTrigger>
+                          <TooltipPopup>{environment.displayUrl ?? "T3 Connect"}</TooltipPopup>
+                        </Tooltip>
+                        <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <span
+                            aria-hidden
+                            className={cn(
+                              "size-1.5 shrink-0 rounded-full",
+                              !environment.entry.enabled
+                                ? "bg-muted-foreground/40"
+                                : connectionPhaseDotClassName(environment.connection.phase),
+                            )}
+                          />
+                          {environment.entry.enabled
+                            ? connectionStatusTitle(environment.connection)
+                            : "Off"}
+                        </span>
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </ScrollArea>
+          </div>
+          <ScrollArea
+            key={selectedEnvironment?.environmentId}
+            scrollFade
+            chainVerticalScroll
+            className="min-w-0 lg:min-h-0 lg:h-full"
+          >
+            {selectedEnvironment ? (
+              <div className="space-y-6 p-4">
+                {selectedEnvironment.entry.target._tag === "PrimaryConnectionTarget" ? (
+                  primarySettings
+                ) : (
+                  <SettingsSection title="Connection">
+                    <SavedBackendListRow
+                      key={selectedEnvironment.environmentId}
+                      environment={selectedEnvironment}
+                      removingEnvironmentId={removingSavedEnvironmentId}
+                      onSetEnabled={handleSetSavedBackendEnabled}
+                      onRemove={handleRemoveSavedBackend}
+                    />
+                  </SettingsSection>
+                )}
+                {selectedEnvironment.entry.enabled && loadBalancingEnvironments.length > 1 ? (
+                  <SettingsSection title="Thread placement">
+                    <LoadBalancingPreference environment={selectedEnvironment} />
+                  </SettingsSection>
+                ) : null}
+                <GitHubRoutingSettings
+                  environments={environments}
+                  selectedEnvironmentId={selectedEnvironment.environmentId}
+                />
+              </div>
+            ) : null}
+          </ScrollArea>
+        </div>
         <CloudRemoteEnvironmentRows
           primaryEnvironmentId={primaryEnvironmentId}
           savedEnvironments={savedEnvironments}
         />
       </SettingsSection>
-      <GitHubRoutingSettings environments={environments} />
       <LoadBalancingSettings environments={loadBalancingEnvironments} />
     </SettingsPageContainer>
   );
diff --git a/apps/web/src/components/settings/GitHubRoutingSettings.tsx b/apps/web/src/components/settings/GitHubRoutingSettings.tsx
index 8f83817294efc90affdcef34bc5c43065e5c9507..fad58b4f644b1e3eb7587697d9123a8649cbcc88 100644
--- a/apps/web/src/components/settings/GitHubRoutingSettings.tsx
+++ b/apps/web/src/components/settings/GitHubRoutingSettings.tsx
@@ -1,4 +1,5 @@
 import { useAtomValue } from "@effect/atom-react";
+import type { EnvironmentId } from "@t3tools/contracts";
 import {
   gitHubRoutingConnectionKey,
   gitHubRoutingPermissionFor,
@@ -22,24 +23,30 @@ const options: ReadonlyArray<{ value: GitHubRoutingPermission; label: string }>
 
 export function GitHubRoutingSettings({
   environments,
+  selectedEnvironmentId,
 }: {
   readonly environments: ReadonlyArray<EnvironmentPresentation>;
+  readonly selectedEnvironmentId: EnvironmentId;
 }) {
   const permissions = useAtomValue(environmentCatalog.githubRoutingPermissionsValueAtom);
   const catalog = useAtomValue(environmentCatalog.catalogValueAtom);
   const update = useAtomCommand(environmentCatalog.setGitHubRoutingPermission);
   const [saving, setSaving] = useState(false);
+  const selectedEnvironments = environments.filter(
+    (environment) => environment.environmentId === selectedEnvironmentId,
+  );
 
   return (
     <SettingsSection {...searchableSetting("github-routing")}>
       <SettingsRow
         title="Share GitHub access"
+        className="sm:[&>div]:grid-cols-1 [&_p]:max-w-none"
         description="Choose environments you trust to share PR data and use each other's GitHub access. Enable both environments. Read and act may use broader permissions than the original environment. This applies only to this client."
       />
-      {environments.map((environment) => (
+      {selectedEnvironments.map((environment) => (
         <SettingsRow
           key={environment.environmentId}
-          title={environment.label}
+          title="GitHub access"
           description={environment.displayUrl ?? "T3 Connect"}
           control={
             <Select
diff --git a/apps/web/src/components/settings/LoadBalancingSettings.tsx b/apps/web/src/components/settings/LoadBalancingSettings.tsx
index c56c6f8d734b1a7a8cd20d6f7b859bb3a311d259..ae42139f58ded105e0481a7bd109a552f55ab0fa 100644
--- a/apps/web/src/components/settings/LoadBalancingSettings.tsx
+++ b/apps/web/src/components/settings/LoadBalancingSettings.tsx
@@ -1,5 +1,3 @@
-import { connectionStatusText } from "@t3tools/client-runtime/connection";
-
 import {
   useClientSettings,
   useClientSettingsHydrated,
@@ -51,51 +49,54 @@ export function LoadBalancingSettings({
           />
         }
       />
-      {environments.map((environment) => {
-        const weight = settings.loadBalancingWeights[environment.environmentId] ?? 50;
-        // Keep saved slider weights until the user chooses a different preference.
-        const preference = weight === 0 ? 0 : weight < 50 ? 25 : weight === 50 ? 50 : 100;
-
-        return (
-          <SettingsRow
-            key={environment.environmentId}
-            title={environment.label}
-            description={connectionStatusText(environment.connection)}
-            control={
-              <Select
-                items={preferences}
-                value={preference}
-                disabled={!settingsHydrated || !settings.loadBalancingEnabled}
-                onValueChange={(value) => {
-                  if (value !== null) {
-                    updateSettings({
-                      loadBalancingWeights: {
-                        ...settings.loadBalancingWeights,
-                        [environment.environmentId]: value,
-                      },
-                    });
-                  }
-                }}
-              >
-                <SelectTrigger
-                  size="sm"
-                  className="w-full sm:w-40"
-                  aria-label={`${environment.label} load preference`}
-                >
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectPopup align="end" alignItemWithTrigger={false}>
-                  {preferences.map(({ value, label }) => (
-                    <SelectItem key={value} value={value}>
-                      {label}
-                    </SelectItem>
-                  ))}
-                </SelectPopup>
-              </Select>
-            }
-          />
-        );
-      })}
     </SettingsSection>
   );
 }
+
+export function LoadBalancingPreference({ environment }: { environment: EnvironmentPresentation }) {
+  const settings = useClientSettings();
+  const settingsHydrated = useClientSettingsHydrated();
+  const updateSettings = useUpdateClientSettings();
+  const weight = settings.loadBalancingWeights[environment.environmentId] ?? 50;
+  // Keep saved slider weights until the user chooses a different preference.
+  const preference = weight === 0 ? 0 : weight < 50 ? 25 : weight === 50 ? 50 : 100;
+
+  return (
+    <SettingsRow
+      title="Load preference"
+      description="How often this machine receives new threads when load balancing is on."
+      control={
+        <Select
+          items={preferences}
+          value={preference}
+          disabled={!settingsHydrated || !settings.loadBalancingEnabled}
+          onValueChange={(value) => {
+            if (value !== null) {
+              updateSettings({
+                loadBalancingWeights: {
+                  ...settings.loadBalancingWeights,
+                  [environment.environmentId]: value,
+                },
+              });
+            }
+          }}
+        >
+          <SelectTrigger
+            size="sm"
+            className="w-full sm:w-40"
+            aria-label={`${environment.label} load preference`}
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectPopup align="end" alignItemWithTrigger={false}>
+            {preferences.map(({ value, label }) => (
+              <SelectItem key={value} value={value}>
+                {label}
+              </SelectItem>
+            ))}
+          </SelectPopup>
+        </Select>
+      }
+    />
+  );
+}