diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 5182ee4d783e..954e10b38eb5 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -208,7 +208,7 @@ import { Input } from "./ui/input";
 import {
   Combobox,
   ComboboxEmpty,
-  ComboboxInput,
+  ComboboxSearchInput,
   ComboboxItem,
   ComboboxList,
   ComboboxPopup,
@@ -4395,48 +4395,34 @@ export default function Sidebar() {
                     align="start"
                     className="w-(--anchor-width) min-w-0 overflow-hidden"
                   >
-                    <div className="shrink-0 px-3 pt-2.5">
-                      <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
-                        <SearchIcon
-                          aria-hidden="true"
-                          className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
-                        />
-                        <ComboboxInput
-                          aria-label="Search projects"
-                          className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
-                          inputClassName="rounded-none bg-transparent text-sm"
-                          placeholder="Search projects..."
-                          showTrigger={false}
-                          size="sm"
-                          unstyled
-                          value={projectScopeMenuState.query}
-                          onKeyDown={(event) => {
-                            if (
-                              event.defaultPrevented ||
-                              event.nativeEvent.isComposing ||
-                              event.ctrlKey ||
-                              event.altKey ||
-                              event.metaKey ||
-                              (event.key !== "ContextMenu" &&
-                                !(event.shiftKey && event.key === "F10"))
-                            ) {
-                              return;
-                            }
-                            // Combobox items use virtual focus: keyboard events
-                            // stay on this input, not on the highlighted option.
-                            const scopeKey = highlightedProjectScopeKeyRef.current;
-                            const project = scopeKey ? projectGroupByScopeKey.get(scopeKey) : null;
-                            if (project) handleProjectSettings(event, project);
-                          }}
-                          onChange={(event) =>
-                            dispatchProjectScopeMenu({
-                              type: "query-changed",
-                              query: event.target.value,
-                            })
-                          }
-                        />
-                      </div>
-                    </div>
+                    <ComboboxSearchInput
+                      aria-label="Search projects"
+                      placeholder="Search projects..."
+                      value={projectScopeMenuState.query}
+                      onKeyDown={(event) => {
+                        if (
+                          event.defaultPrevented ||
+                          event.nativeEvent.isComposing ||
+                          event.ctrlKey ||
+                          event.altKey ||
+                          event.metaKey ||
+                          (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10"))
+                        ) {
+                          return;
+                        }
+                        // Combobox items use virtual focus: keyboard events
+                        // stay on this input, not on the highlighted option.
+                        const scopeKey = highlightedProjectScopeKeyRef.current;
+                        const project = scopeKey ? projectGroupByScopeKey.get(scopeKey) : null;
+                        if (project) handleProjectSettings(event, project);
+                      }}
+                      onChange={(event) =>
+                        dispatchProjectScopeMenu({
+                          type: "query-changed",
+                          query: event.target.value,
+                        })
+                      }
+                    />
                     <ComboboxEmpty>No matching projects.</ComboboxEmpty>
                     <ComboboxList>
                       {(item: (typeof projectScopeItems)[number]) => {
diff --git a/apps/web/src/components/settings/ProjectsSettings.tsx b/apps/web/src/components/settings/ProjectsSettings.tsx
index 4eedaab63846..b454517bcda7 100644
--- a/apps/web/src/components/settings/ProjectsSettings.tsx
+++ b/apps/web/src/components/settings/ProjectsSettings.tsx
@@ -1,12 +1,22 @@
 import { resolveEnvironmentMachineKind } from "@t3tools/contracts";
-import { FolderIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { ChevronDownIcon, FolderIcon } from "lucide-react";
+import { type ReactNode, useState } from "react";
 import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
 import { ProjectFavicon } from "../ProjectFavicon";
 import { WorkspacePageContainer } from "../WorkspacePageContainer";
 import { useEnvironments } from "../../state/environments";
 import { Toggle, ToggleGroup } from "../ui/toggle-group";
-import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
+import {
+  Combobox,
+  ComboboxEmpty,
+  ComboboxSearchInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxTrigger,
+} from "../ui/combobox";
+import { selectTriggerVariants } from "../ui/select";
+import { cn } from "../../lib/utils";
 import { ProjectSettingsPanel, useSettingsProjectGroups } from "./ProjectSettingsPanel";
 import { ProjectDefaultsSettings } from "./ProjectDefaultsSettings";
 
@@ -21,44 +31,51 @@ function ScopePicker({
   options: ReadonlyArray<{ value: string; label: string; icon?: ReactNode }>;
   onChange: (value: string | null) => void;
 }) {
+  const [query, setQuery] = useState("");
   const selected = options.find((option) => option.value === value);
   const allIcon =
     label === "project" ? <FolderIcon aria-hidden className="size-3.5 shrink-0" /> : null;
+  const items = [{ value: "all", label: `All ${label}s`, icon: allIcon }, ...options];
   return (
-    <Select
-      value={value ?? "all"}
+    <Combobox
+      items={items}
+      value={items.find((item) => item.value === (value ?? "all")) ?? null}
+      inputValue={query}
+      onInputValueChange={setQuery}
+      onOpenChange={() => setQuery("")}
       onValueChange={(next) => {
-        if (next) onChange(next === "all" ? null : next);
+        if (next) onChange(next.value === "all" ? null : next.value);
       }}
     >
-      <SelectTrigger
-        size="compact"
+      <ComboboxTrigger
         aria-label={`${label === "project" ? "Project" : "Machine"} scope`}
-        className="w-auto min-w-0 max-w-52"
+        className={cn(selectTriggerVariants({ size: "compact" }), "w-auto min-w-0 max-w-52")}
       >
-        <SelectValue className="flex min-w-0 items-center gap-1.5">
+        <span className="flex min-w-0 items-center gap-1.5">
           {value === null ? allIcon : selected?.icon}
           <span className="truncate">
             {value === null ? `All ${label}s` : (selected?.label ?? `Unavailable ${label}`)}
           </span>
-        </SelectValue>
-      </SelectTrigger>
-      <SelectPopup align="start" alignItemWithTrigger={false}>
-        <SelectItem value="all">
-          <span className="flex items-center gap-2">
-            {allIcon}All {label}s
-          </span>
-        </SelectItem>
-        {options.map((option) => (
-          <SelectItem key={option.value} value={option.value}>
-            <span className="flex items-center gap-2">
-              {option.icon}
-              {option.label}
-            </span>
-          </SelectItem>
-        ))}
-      </SelectPopup>
-    </Select>
+        </span>
+        <ChevronDownIcon aria-hidden className="-me-1 size-3 opacity-50" />
+      </ComboboxTrigger>
+      <ComboboxPopup align="start" className="w-64">
+        <ComboboxSearchInput aria-label={`Search ${label}s`} placeholder={`Search ${label}s...`} />
+        <ComboboxEmpty>No matching {label}s.</ComboboxEmpty>
+        <ComboboxList>
+          {(item: (typeof items)[number]) => (
+            <ComboboxItem
+              key={item.value}
+              value={item}
+              contentClassName="flex min-w-0 items-center gap-2"
+            >
+              {item.icon}
+              <span className="truncate">{item.label}</span>
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </Combobox>
   );
 }
 
diff --git a/apps/web/src/components/ui/combobox.tsx b/apps/web/src/components/ui/combobox.tsx
index d9f09690331d..59bf4d637704 100644
--- a/apps/web/src/components/ui/combobox.tsx
+++ b/apps/web/src/components/ui/combobox.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
-import { ChevronsUpDownIcon, XIcon } from "lucide-react";
+import { ChevronsUpDownIcon, SearchIcon, XIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "~/lib/utils";
@@ -130,6 +130,27 @@ function ComboboxInput({
   );
 }
 
+function ComboboxSearchInput(props: React.ComponentProps<typeof ComboboxInput>) {
+  return (
+    <div className="shrink-0 px-3 pt-2.5">
+      <div className="relative -translate-y-px border-b border-border/70 pb-1.5 transition-colors focus-within:border-ring">
+        <SearchIcon
+          aria-hidden="true"
+          className="pointer-events-none absolute top-1.5 left-0 size-4 shrink-0 text-muted-foreground/55"
+        />
+        <ComboboxInput
+          {...props}
+          className="[&_input]:h-6.5 [&_input]:ps-5 [&_input]:font-sans [&_input]:leading-6.5"
+          inputClassName="rounded-none bg-transparent text-sm"
+          showTrigger={false}
+          size="sm"
+          unstyled
+        />
+      </div>
+    </div>
+  );
+}
+
 function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
   return (
     <ComboboxPrimitive.Trigger className={className} data-slot="combobox-trigger" {...props}>
@@ -393,6 +414,7 @@ export {
   Combobox,
   ComboboxChipsInput,
   ComboboxInput,
+  ComboboxSearchInput,
   ComboboxTrigger,
   ComboboxPopup,
   ComboboxItem,