diff --git a/packages/app/src/file-pane/find/index.web.tsx b/packages/app/src/file-pane/find/index.web.tsx
index 70801aa0ca..6cd27fe9c4 100644
--- a/packages/app/src/file-pane/find/index.web.tsx
+++ b/packages/app/src/file-pane/find/index.web.tsx
@@ -10,9 +10,11 @@ import { createPortal } from "react-dom";
 import { EditorView } from "@codemirror/view";
 import { Search } from "lucide-react-native";
 import { View } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { useTranslation } from "react-i18next";
-import { Button } from "@/components/ui/button";
+import { mutedIconColorMapping } from "@/components/ui/icon-button-chrome";
+import { paneContentToolbarIconSize, ToolbarButton } from "@/components/ui/pane-content-toolbar";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { PaneFind, type PaneFindHandle } from "@/pane-find";
 import { usePaneFocus } from "@/panels/pane-context";
 import { hasActiveWebOverlay } from "@/lib/overlay-root";
@@ -22,6 +24,8 @@ import { FileFindModel } from "./model.web";
 
 export { FileFindModel } from "./model.web";
 
+const SearchIcon = withUnistyles(Search, mutedIconColorMapping);
+
 export function FileFind({
   model,
   editor,
@@ -31,6 +35,7 @@ export function FileFind({
 }) {
   const { t } = useTranslation();
   const state = useSyncExternalStore(model.subscribe, model.getSnapshot, model.getSnapshot);
+  const isCompact = useIsCompactFormFactor();
   const widget = useRef<PaneFindHandle>(null);
   const { isInteractive, focusPane } = usePaneFocus();
   const active = useRetainedPanelActive();
@@ -75,13 +80,9 @@ export function FileFind({
   if (!state.panel)
     return (
       <View style={styles.trigger}>
-        <Button
-          variant="ghost"
-          size="sm"
-          leftIcon={Search}
-          accessibilityLabel={t("paneFind.title")}
-          onPress={open}
-        />
+        <ToolbarButton label={t("paneFind.title")} compact={isCompact} onPress={open}>
+          <SearchIcon size={paneContentToolbarIconSize(isCompact)} />
+        </ToolbarButton>
       </View>
     );
   const total = `${state.total}${state.limited ? "+" : ""}`;
@@ -110,13 +111,18 @@ export function FileFind({
 }
 
 const styles = StyleSheet.create((theme) => ({
-  panel: { alignItems: "flex-end", padding: theme.spacing[2] },
+  panel: { alignItems: "flex-end", maxWidth: "100%", padding: theme.spacing[2] },
+  // Carries the open widget's chrome so the entry point reads as the same object.
   trigger: {
     position: "absolute",
     top: theme.spacing[2],
     right: theme.spacing[2],
     zIndex: 1,
+    padding: theme.spacing[1],
     backgroundColor: theme.colors.surface1,
-    borderRadius: theme.borderRadius.md,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.lg,
+    ...theme.shadow.md,
   },
 }));
diff --git a/packages/app/src/file-pane/find/model.web.ts b/packages/app/src/file-pane/find/model.web.ts
index 337365c0ec..ba28ce5f99 100644
--- a/packages/app/src/file-pane/find/model.web.ts
+++ b/packages/app/src/file-pane/find/model.web.ts
@@ -39,8 +39,21 @@ export class FileFindModel {
   readonly getSnapshot = () => this.snapshot;
 
   readonly extension: Extension = [
-    // The custom panel lives inside the editor's monospace subtree.
     EditorView.theme({
+      // CodeMirror lays panels out as flex siblings of the scroller, which pushes
+      // the first lines down every time Find opens. Take the panel out of flow so
+      // the widget floats over the top-right of the content instead.
+      ".cm-panels.cm-panels-top": {
+        position: "absolute",
+        top: "0",
+        right: "0",
+        left: "auto",
+        maxWidth: "100%",
+        zIndex: "4",
+        border: "none",
+        backgroundColor: "transparent",
+      },
+      // The custom panel lives inside the editor's monospace subtree.
       ".paseo-file-find, .paseo-file-find *": { fontFamily: "var(--paseo-ui-font)" },
     }),
     search({ literal: true, top: true, createPanel: (view) => this.createPanel(view) }),
diff --git a/packages/app/src/pane-find/index.tsx b/packages/app/src/pane-find/index.tsx
index cf3e5d6a31..dac417023d 100644
--- a/packages/app/src/pane-find/index.tsx
+++ b/packages/app/src/pane-find/index.tsx
@@ -6,6 +6,7 @@ import {
   useImperativeHandle,
   useRef,
   useState,
+  type ReactNode,
   type KeyboardEvent,
 } from "react";
 import {
@@ -13,19 +14,34 @@ import {
   View,
   type NativeSyntheticEvent,
   type TextInputKeyPressEventData,
+  type TextInputProps,
 } from "react-native";
 import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, X } from "lucide-react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { useTranslation } from "react-i18next";
-import { EditingTextInput, type EditingTextInputHandle } from "@/components/ui/text-input";
 import { Button } from "@/components/ui/button";
-import { CONTROL_HEIGHTS } from "@/components/ui/control-geometry";
+import { EditingTextInput, type EditingTextInputHandle } from "@/components/ui/text-input";
+import {
+  createControlGeometry,
+  resolveControlInteractionStyles,
+} from "@/components/ui/control-geometry";
+import {
+  mutedIconColorMapping,
+  smallIconButtonChromeFrameSize,
+} from "@/components/ui/icon-button-chrome";
+import { paneContentToolbarIconSize, ToolbarButton } from "@/components/ui/pane-content-toolbar";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { isWeb } from "@/constants/platform";
 import { isImeComposingKeyboardEvent } from "@/utils/keyboard-ime";
 
 const TextInput = withUnistyles(EditingTextInput, (theme) => ({
   placeholderTextColor: theme.colors.foregroundMuted,
 }));
+const ArrowUpIcon = withUnistyles(ArrowUp, mutedIconColorMapping);
+const ArrowDownIcon = withUnistyles(ArrowDown, mutedIconColorMapping);
+const CloseIcon = withUnistyles(X, mutedIconColorMapping);
+const ChevronDownIcon = withUnistyles(ChevronDown, mutedIconColorMapping);
+const ChevronRightIcon = withUnistyles(ChevronRight, mutedIconColorMapping);
 
 export interface PaneFindHandle {
   focus(): void;
@@ -47,12 +63,81 @@ export interface PaneFindProps {
   };
 }
 
+/**
+ * The bordered box around one Find input. It owns the field chrome so the query
+ * row and the replacement row land on the same rails, and so the match count can
+ * sit inside the query box instead of widening the widget.
+ */
+const FindField = forwardRef<
+  EditingTextInputHandle,
+  {
+    label: string;
+    initialValue: string;
+    height: number;
+    trailing?: ReactNode;
+    onChangeText(value: string): void;
+    onKeyPress(event: NativeSyntheticEvent<TextInputKeyPressEventData>): void;
+    autoFocus?: boolean;
+    returnKeyType?: TextInputProps["returnKeyType"];
+  }
+>(function FindField(
+  { label, initialValue, height, trailing, onChangeText, onKeyPress, autoFocus, returnKeyType },
+  ref,
+) {
+  const [focused, setFocused] = useState(false);
+  const onFocus = useCallback(() => setFocused(true), []);
+  const onBlur = useCallback(() => setFocused(false), []);
+  const fieldStyle = useMemo(
+    () => [
+      styles.field,
+      { minHeight: height },
+      resolveControlInteractionStyles(
+        {
+          controlRest: styles.controlRest,
+          controlHover: styles.controlHover,
+          controlActive: styles.controlActive,
+        },
+        { focused },
+      ),
+    ],
+    [focused, height],
+  );
+  return (
+    <View style={fieldStyle}>
+      <TextInput
+        ref={ref}
+        autoFocus={autoFocus}
+        selectTextOnFocus
+        initialValue={initialValue}
+        onChangeText={onChangeText}
+        onKeyPress={onKeyPress}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        accessibilityLabel={label}
+        placeholder={label}
+        autoCapitalize="none"
+        autoCorrect={false}
+        blurOnSubmit={false}
+        returnKeyType={returnKeyType}
+        style={styles.input}
+      />
+      {trailing}
+    </View>
+  );
+});
+
 /** Pane-local chrome. The content owner supplies search state and commands. */
 export const PaneFind = forwardRef<PaneFindHandle, PaneFindProps>(function PaneFind(
   { query, status, canNavigate, onQueryChange, onNext, onPrevious, onClose, replace },
   ref,
 ) {
   const { t } = useTranslation();
+  const isCompact = useIsCompactFormFactor();
+  const controlSize = smallIconButtonChromeFrameSize(isCompact);
+  const glyphSize = paneContentToolbarIconSize(isCompact);
+  const rowHeight = Math.max(COLLAPSED_FIELD_HEIGHT, controlSize);
+  // Keep the replace actions on the same row height as the icon controls beside them.
+  const actionSize = isCompact ? "sm" : "xs";
   const input = useRef<EditingTextInputHandle>(null);
   const replacementInput = useRef<EditingTextInputHandle>(null);
   useLayoutEffect(() => {
@@ -102,9 +187,22 @@ export const PaneFind = forwardRef<PaneFindHandle, PaneFindProps>(function PaneF
     [focus, onClose, onNext, onPrevious],
   );
   const toggleReplace = useCallback(() => setReplaceExpanded((expanded) => !expanded), []);
-  const replaceAccessibilityState = useMemo(
-    () => ({ expanded: replaceExpanded }),
-    [replaceExpanded],
+  const gutterStyle = useMemo(
+    () => [styles.gutter, { width: controlSize, height: rowHeight }],
+    [controlSize, rowHeight],
+  );
+  const matchCount = useMemo(
+    () => (
+      <Text
+        style={styles.status}
+        role="status"
+        accessibilityLabel={t("paneFind.matches")}
+        accessibilityLiveRegion="polite"
+      >
+        {status}
+      </Text>
+    ),
+    [status, t],
   );
 
   return (
@@ -123,138 +221,143 @@ export const PaneFind = forwardRef<PaneFindHandle, PaneFindProps>(function PaneF
           }
         : {})}
     >
-      <View style={styles.findRow}>
-        <View style={styles.queryRow}>
-          {replace ? (
-            <Button
-              variant="ghost"
-              size="sm"
-              leftIcon={replaceExpanded ? ChevronDown : ChevronRight}
-              accessibilityLabel={t("paneFind.toggleReplace")}
-              accessibilityState={replaceAccessibilityState}
-              onPress={toggleReplace}
-            />
-          ) : null}
-          <TextInput
+      {replace ? (
+        <View style={gutterStyle}>
+          <ToolbarButton
+            label={t("paneFind.toggleReplace")}
+            aria-expanded={replaceExpanded}
+            compact={isCompact}
+            onPress={toggleReplace}
+          >
+            {replaceExpanded ? (
+              <ChevronDownIcon size={glyphSize} />
+            ) : (
+              <ChevronRightIcon size={glyphSize} />
+            )}
+          </ToolbarButton>
+        </View>
+      ) : null}
+      <View style={styles.rows}>
+        <View style={styles.row}>
+          <FindField
             ref={input}
             autoFocus
-            selectTextOnFocus
+            label={t("paneFind.placeholder")}
             initialValue={query}
+            height={rowHeight}
+            returnKeyType="search"
+            trailing={matchCount}
             onChangeText={onQueryChange}
             onKeyPress={onKeyPress}
-            accessibilityLabel={t("paneFind.placeholder")}
-            placeholder={t("paneFind.placeholder")}
-            autoCapitalize="none"
-            autoCorrect={false}
-            returnKeyType="search"
-            blurOnSubmit={false}
-            style={styles.input}
           />
-        </View>
-        <View style={styles.row}>
-          <Text
-            style={styles.status}
-            role="status"
-            accessibilityLabel={t("paneFind.matches")}
-            accessibilityLiveRegion="polite"
-          >
-            {status}
-          </Text>
-          <Button
-            variant="ghost"
-            size="sm"
-            leftIcon={ArrowUp}
-            accessibilityLabel={t("paneFind.previous")}
+          <ToolbarButton
+            label={t("paneFind.previous")}
+            compact={isCompact}
             disabled={!canNavigate}
             onPress={onPrevious}
-          />
-          <Button
-            variant="ghost"
-            size="sm"
-            leftIcon={ArrowDown}
-            accessibilityLabel={t("paneFind.next")}
+          >
+            <ArrowUpIcon size={glyphSize} />
+          </ToolbarButton>
+          <ToolbarButton
+            label={t("paneFind.next")}
+            compact={isCompact}
             disabled={!canNavigate}
             onPress={onNext}
-          />
+          >
+            <ArrowDownIcon size={glyphSize} />
+          </ToolbarButton>
+          <ToolbarButton label={t("paneFind.close")} compact={isCompact} onPress={onClose}>
+            <CloseIcon size={glyphSize} />
+          </ToolbarButton>
         </View>
-        <Button
-          variant="ghost"
-          size="sm"
-          leftIcon={X}
-          accessibilityLabel={t("paneFind.close")}
-          onPress={onClose}
-        />
-      </View>
-      {replace && replaceExpanded ? (
-        <View style={styles.replacement}>
-          <TextInput
-            ref={replacementInput}
-            initialValue={replace.value}
-            onChangeText={replace.onChange}
-            onKeyPress={onKeyPress}
-            accessibilityLabel={t("paneFind.replaceWith")}
-            placeholder={t("paneFind.replaceWith")}
-            autoCapitalize="none"
-            autoCorrect={false}
-            style={styles.input}
-          />
+        {replace && replaceExpanded ? (
           <View style={styles.row}>
-            <Button variant="ghost" size="sm" disabled={!canNavigate} onPress={replace.onReplace}>
+            <FindField
+              ref={replacementInput}
+              label={t("paneFind.replaceWith")}
+              initialValue={replace.value}
+              height={rowHeight}
+              onChangeText={replace.onChange}
+              onKeyPress={onKeyPress}
+            />
+            <Button
+              variant="ghost"
+              size={actionSize}
+              style={styles.replaceAction}
+              disabled={!canNavigate}
+              onPress={replace.onReplace}
+            >
               {t("paneFind.replace")}
             </Button>
             <Button
               variant="ghost"
-              size="sm"
+              size={actionSize}
+              style={styles.replaceAction}
               disabled={!canNavigate}
               onPress={replace.onReplaceAll}
             >
               {t("paneFind.replaceAll")}
             </Button>
           </View>
-        </View>
-      ) : null}
+        ) : null}
+      </View>
     </View>
   );
 });
 
-const styles = StyleSheet.create((theme) => ({
-  widget: {
-    width: 480,
-    maxWidth: "100%",
-    padding: theme.spacing[2],
-    gap: theme.spacing[1],
-    backgroundColor: theme.colors.surface1,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.md,
-  },
-  findRow: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.spacing[1] },
-  queryRow: {
-    flex: 1,
-    minWidth: 140,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[1],
-  },
-  row: { flexDirection: "row", alignItems: "center", gap: theme.spacing[1] },
-  replacement: { gap: theme.spacing[1] },
-  input: {
-    flex: 1,
-    minWidth: 0,
-    minHeight: CONTROL_HEIGHTS.compact,
-    paddingHorizontal: theme.spacing[2],
-    paddingVertical: theme.spacing[1],
-    fontSize: theme.fontSize.base,
-    color: theme.colors.foreground,
-    backgroundColor: theme.colors.surface0,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.sm,
-  },
-  status: {
-    flex: 1,
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-    paddingHorizontal: theme.spacing[2],
-  },
-}));
+/** Desktop find rows run one step tighter than a form field — this is pane chrome. */
+const COLLAPSED_FIELD_HEIGHT = 28;
+const FIND_WIDGET_WIDTH = 340;
+
+const styles = StyleSheet.create((theme) => {
+  const geometry = createControlGeometry(theme);
+
+  return {
+    widget: {
+      width: FIND_WIDGET_WIDTH,
+      maxWidth: "100%",
+      flexDirection: "row",
+      padding: theme.spacing[1.5],
+      gap: theme.spacing[1],
+      backgroundColor: theme.colors.surface1,
+      borderWidth: theme.borderWidth[1],
+      borderColor: theme.colors.border,
+      borderRadius: theme.borderRadius.lg,
+      ...theme.shadow.md,
+    },
+    // The disclosure column spans both rows so the two fields share a leading rail.
+    gutter: { alignItems: "center", justifyContent: "center", flexShrink: 0 },
+    rows: { flex: 1, minWidth: 0, gap: theme.spacing[1] },
+    row: { flexDirection: "row", alignItems: "center", gap: theme.spacing[1] },
+    field: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.spacing[2],
+      paddingHorizontal: theme.spacing[2],
+      backgroundColor: theme.colors.surface2,
+      borderRadius: theme.borderRadius.md,
+    },
+    controlRest: { ...geometry.controlRest },
+    controlHover: { ...geometry.controlHover },
+    controlActive: { ...geometry.controlActive },
+    input: {
+      flex: 1,
+      minWidth: 0,
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      color: theme.colors.foreground,
+      outlineWidth: 0,
+      outlineColor: "transparent",
+      ...geometry.fieldTextSm,
+    },
+    status: {
+      flexShrink: 0,
+      color: theme.colors.foregroundMuted,
+      fontSize: theme.fontSize.sm,
+    },
+    // Ghost actions sit on the field's rail, so they carry the field's padding.
+    replaceAction: { paddingHorizontal: theme.spacing[2] },
+  };
+});