diff --git a/AGENTS.md b/AGENTS.md
index 084b9f46..318d1119 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -67,6 +67,12 @@ The WebView root component is assigned to `globalThis.webViewComponent` (not exp
 
 [src/services/projectStorage.ts](src/services/projectStorage.ts) — owns all `papi.storage` reads and writes for interlinearizer projects. Two serialization queues prevent interleaved read-modify-write races. Tests must call `resetQueuesForTesting()` between tests because module state is not cleared by `resetMocks`.
 
+### Components
+
+Prefer Platform.Bible's `platform-bible-react` components (`Button`, `Input`, `Textarea`, `Label`, `Switch`, `RadioGroup`, `Popover`, `Tooltip`, etc.) over hand-rolled raw HTML (`<button>`, `<input>`, `<textarea>`, `<label>`, custom dropdowns) wherever an equivalent exists — this keeps the UI visually and behaviorally consistent with the host app and gives us theming and accessibility for free. Reserve raw elements for cases where the platform component can't preserve behavior the extension depends on (e.g. `field-sizing: content` gloss inputs); when you do, add a comment explaining why. When a raw element is replaced by a platform component in tests, extend `__mocks__/platform-bible-react.tsx` to stub the newly-used component.
+
+Size icons inside a `Button` with `size-*` (e.g. `tw:size-3`), never `h-*`/`w-*` — `buttonVariants` forces any child SVG lacking a `size-` class to `size-4`, silently overriding `h-*`/`w-*`.
+
 ### Styling
 
 All UI uses Tailwind CSS (via `src/tailwind.css`). Every Tailwind class is prefixed `tw:` to avoid collisions with Platform.Bible's own styles (configured in `tailwind.config.ts`). For modifier variants the prefix comes first: `tw:hover:px-3`, not `hover:tw-px-3`.
diff --git a/__mocks__/platform-bible-react.tsx b/__mocks__/platform-bible-react.tsx
index f0420834..0966e894 100644
--- a/__mocks__/platform-bible-react.tsx
+++ b/__mocks__/platform-bible-react.tsx
@@ -4,7 +4,14 @@
  */
 
 import { Children, cloneElement, forwardRef, isValidElement, useEffect, useRef } from 'react';
-import type { MouseEventHandler, ReactElement, ReactNode } from 'react';
+import type {
+  ChangeEventHandler,
+  CSSProperties,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactElement,
+  ReactNode,
+} from 'react';
 
 export interface MenuItemContainingCommand {
   label: `%${string}%`;
@@ -242,21 +249,72 @@ export function ScrollGroupSelector({
 }
 
 /**
- * Stub button that passes through `children`, `onClick`, `type`, `className`, `disabled`,
- * `aria-label`, `aria-expanded`, `aria-haspopup`, `data-testid`, and `ref` to a native `<button>`
- * element; `variant` and `size` are accepted but ignored.
+ * Throws if a `Button`-descendant SVG loses its size to `buttonVariants`: an `h-*` or `w-*`
+ * className without `size-`, or a numeric `size` prop without a `size-` className. Production
+ * silently overrides all of these (AGENTS.md § Components); jsdom can't reproduce the visual
+ * regression, so this fails loudly instead of letting it pass as a green test.
+ *
+ * @param node - A `Button` child (or subtree) to check.
+ */
+function assertNoOversizedIconClassName(node: ReactNode): void {
+  if (Array.isArray(node)) {
+    node.forEach(assertNoOversizedIconClassName);
+    return;
+  }
+  if (!isValidElement(node)) return;
+  const { className, size, children } = node.props as {
+    className?: unknown;
+    size?: unknown;
+    children?: ReactNode;
+  };
+  const hasSizeClass = typeof className === 'string' && /\bsize-/.test(className);
+  if (
+    typeof className === 'string' &&
+    (/\btw:h-\S+/.test(className) || /\btw:w-\S+/.test(className)) &&
+    !hasSizeClass
+  ) {
+    throw new Error(
+      `Icon className "${className}" uses tw:h-*/tw:w-* instead of tw:size-* inside a Button — ` +
+        'the platform Button forces child SVG size unless the class contains "size-" (see AGENTS.md § Components).',
+    );
+  }
+  if (typeof size === 'number' && !hasSizeClass) {
+    throw new Error(
+      `Icon has a numeric size={${size}} prop instead of a tw:size-* className inside a Button — ` +
+        'the platform Button forces child SVG size unless the class contains "size-" (see AGENTS.md § Components).',
+    );
+  }
+  if (children) assertNoOversizedIconClassName(children);
+}
+
+/**
+ * Stub button that passes the attributes the extension relies on through to a native `<button>`
+ * element; `variant` and `size` are accepted but ignored for rendering (jsdom does not apply
+ * styling, so tests assert on behavior/testid/role, not the visual variant). Children still go
+ * through {@link assertNoOversizedIconClassName}, which throws on the one sizing regression this
+ * stub can catch regardless of variant/size. The mouse/keyboard handlers and `tabIndex`/`style` are
+ * forwarded so migrated icon buttons keep their hover-preview and focus-skipping behavior under test.
  *
  * @param props - Component props.
  * @param props.children - Button content.
  * @param props.onClick - Click handler.
+ * @param props.onMouseEnter - Pointer-enter handler (icon buttons use it to preview hover state).
+ * @param props.onMouseLeave - Pointer-leave handler (clears the previewed hover state).
+ * @param props.onMouseDown - Pointer-down handler (e.g. to preventDefault and keep input focus).
  * @param props.type - HTML button type attribute.
  * @param props.className - CSS class names.
+ * @param props.style - Inline styles (icon buttons use it for absolute positioning).
+ * @param props.title - Native tooltip text; the {@link Tooltip} stub clones its trigger child with
+ *   this prop, so a `Button` used as a `TooltipTrigger asChild` child must forward it.
  * @param props.disabled - Whether the button is disabled.
+ * @param props.tabIndex - Tab order; icon buttons set `-1` to skip them in keyboard navigation.
  * @param props.variant - Ignored styling variant.
  * @param props.size - Ignored size variant.
  * @param props['aria-label'] - Accessible label.
  * @param props['aria-expanded'] - Expanded state for popup triggers.
  * @param props['aria-haspopup'] - Haspopup attribute.
+ * @param props['aria-controls'] - ID of the element the button controls (e.g. a listbox popup).
+ * @param props['aria-hidden'] - Hides the button from the accessibility tree when it is inert.
  * @param props['data-testid'] - Test identifier.
  * @param ref - Forwarded ref to the underlying button element.
  * @returns A native `<button>` element with standard attributes forwarded.
@@ -265,42 +323,67 @@ export const Button = forwardRef<
   HTMLButtonElement,
   Readonly<{
     children?: ReactNode;
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onMouseEnter?: MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
+    onMouseDown?: MouseEventHandler<HTMLButtonElement>;
     type?: 'button' | 'submit' | 'reset';
     className?: string;
+    style?: CSSProperties;
+    title?: string;
     disabled?: boolean;
+    tabIndex?: number;
     variant?: 'default' | 'secondary' | 'destructive' | 'ghost' | 'outline' | 'link';
-    size?: 'default' | 'sm' | 'lg' | 'icon';
+    size?: 'default' | 'sm' | 'lg' | 'icon' | 'xs' | 'icon-sm' | 'icon-xs' | 'icon-lg';
     'aria-label'?: string;
     'aria-expanded'?: boolean;
     'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    'aria-controls'?: string;
+    'aria-hidden'?: boolean;
     'data-testid'?: string;
   }>
 >(function ButtonImpl(
   {
     children,
     onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
     type,
     className,
+    style,
+    title,
     disabled,
+    tabIndex,
     variant: _variant,
     size: _size,
     'aria-label': ariaLabel,
     'aria-expanded': ariaExpanded,
     'aria-haspopup': ariaHaspopup,
+    'aria-controls': ariaControls,
+    'aria-hidden': ariaHidden,
     'data-testid': testId,
   },
   ref,
 ) {
+  assertNoOversizedIconClassName(children);
   return (
     <button
       ref={ref}
       type={type ?? 'button'}
       onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onMouseDown={onMouseDown}
       className={className}
+      style={style}
+      title={title}
+      tabIndex={tabIndex}
       aria-label={ariaLabel}
       aria-expanded={ariaExpanded}
       aria-haspopup={ariaHaspopup}
+      aria-controls={ariaControls}
+      aria-hidden={ariaHidden}
       data-testid={testId}
       disabled={disabled}
     >
@@ -309,6 +392,122 @@ export const Button = forwardRef<
   );
 });
 
+/**
+ * Stub input rendered as a native `<input>`, forwarding the attributes the extension's migrated
+ * form fields and inline editors rely on so tests can read and drive them by id, testid, role, or
+ * value.
+ *
+ * @param props - Component props.
+ * @param props.id - HTML `id` attribute (labels bind to it via `htmlFor`).
+ * @param props.type - Input type; defaults to `text`.
+ * @param props.value - Controlled value.
+ * @param props.placeholder - Placeholder text.
+ * @param props.className - CSS class names.
+ * @param props.style - Inline styles.
+ * @param props.disabled - Whether the input is disabled.
+ * @param props.onChange - Change handler.
+ * @param props.onKeyDown - Key-down handler (inline editors commit/cancel on Enter/Escape).
+ * @param props['aria-label'] - Accessible label.
+ * @param props['data-testid'] - Test identifier.
+ * @param ref - Forwarded ref to the underlying input element.
+ * @returns A native `<input>` element with the forwarded attributes.
+ */
+export const Input = forwardRef<
+  HTMLInputElement,
+  Readonly<{
+    id?: string;
+    type?: string;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    'aria-label'?: string;
+    'data-testid'?: string;
+  }>
+>(function InputImpl(
+  {
+    id,
+    type,
+    value,
+    placeholder,
+    className,
+    style,
+    disabled,
+    onChange,
+    onKeyDown,
+    'aria-label': ariaLabel,
+    'data-testid': testId,
+  },
+  ref,
+) {
+  return (
+    <input
+      ref={ref}
+      id={id}
+      type={type ?? 'text'}
+      value={value}
+      placeholder={placeholder}
+      className={className}
+      style={style}
+      disabled={disabled}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      aria-label={ariaLabel}
+      data-testid={testId}
+    />
+  );
+});
+
+/**
+ * Stub textarea rendered as a native `<textarea>`, forwarding the attributes the extension's
+ * migrated multi-line form fields rely on.
+ *
+ * @param props - Component props.
+ * @param props.id - HTML `id` attribute (labels bind to it via `htmlFor`).
+ * @param props.value - Controlled value.
+ * @param props.placeholder - Placeholder text.
+ * @param props.className - CSS class names.
+ * @param props.rows - Visible row count.
+ * @param props.disabled - Whether the textarea is disabled.
+ * @param props.onChange - Change handler.
+ * @param props['data-testid'] - Test identifier.
+ * @param ref - Forwarded ref to the underlying textarea element.
+ * @returns A native `<textarea>` element with the forwarded attributes.
+ */
+export const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  Readonly<{
+    id?: string;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    rows?: number;
+    disabled?: boolean;
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    'data-testid'?: string;
+  }>
+>(function TextareaImpl(
+  { id, value, placeholder, className, rows, disabled, onChange, 'data-testid': testId },
+  ref,
+) {
+  return (
+    <textarea
+      ref={ref}
+      id={id}
+      value={value}
+      placeholder={placeholder}
+      className={className}
+      rows={rows}
+      disabled={disabled}
+      onChange={onChange}
+      data-testid={testId}
+    />
+  );
+});
+
 /**
  * Stub book/chapter control that displays the current reference as text and exposes a single
  * "Submit reference" button so tests can simulate reference changes without the real picker UI.
diff --git a/src/components/ArcOverlay.tsx b/src/components/ArcOverlay.tsx
index c7a20c01..1308d6d6 100644
--- a/src/components/ArcOverlay.tsx
+++ b/src/components/ArcOverlay.tsx
@@ -1,5 +1,6 @@
 import type { PhraseAnalysisLink } from 'interlinearizer';
 import { Link2Off } from 'lucide-react';
+import { Button } from 'platform-bible-react';
 import { memo, useState, useCallback } from 'react';
 import type { PhraseMode } from '../types/phrase-mode';
 import { computeSplitFreeRefs, getArcStrokeProps, type ArcPath } from '../utils/phrase-arc';
@@ -321,14 +322,15 @@ export function ArcOverlay({
             );
             const willCreateFreeTokens = arcSplitFreeRefs !== undefined;
             return (
-              <button
+              <Button
                 key={`split-arc-${phraseId}-${d}`}
                 aria-label="Split phrase here"
-                className={`tw:absolute tw:-translate-x-1/2 tw:-translate-y-1/2 tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:border tw:bg-background tw:p-px ${buttonZClass} ${buttonColorClass}${willCreateFreeTokens ? ' tw:hover:border-destructive tw:hover:text-destructive' : ''}`}
+                className={`tw:absolute tw:-translate-x-1/2 tw:-translate-y-1/2 tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:border tw:bg-background tw:p-px ${buttonZClass} ${buttonColorClass}${willCreateFreeTokens ? ' tw:hover:border-destructive tw:hover:text-destructive' : ''}`}
                 data-testid="split-arc-btn"
                 style={{ left: midX, top: midY }}
                 tabIndex={-1}
                 type="button"
+                variant="ghost"
                 onClick={() => {
                   // Clear the split-hover state synchronously with the click. The button is removed
                   // from the DOM by the resulting re-render, so no mouseLeave fires — without this
@@ -352,8 +354,8 @@ export function ArcOverlay({
                   else handleReshapeHoverLeave();
                 }}
               >
-                <Link2Off className="tw:h-2.5 tw:w-2.5" />
-              </button>
+                <Link2Off className="tw:size-2.5" />
+              </Button>
             );
           })}
     </>
diff --git a/src/components/ContinuousView.tsx b/src/components/ContinuousView.tsx
index 87f87c2d..b27d35b0 100644
--- a/src/components/ContinuousView.tsx
+++ b/src/components/ContinuousView.tsx
@@ -1,18 +1,19 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
 import type { Book, Token } from 'interlinearizer';
+import { Button } from 'platform-bible-react';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import { usePhraseLinkByIdMap, usePhraseLinkMap } from './AnalysisStore';
+import { useArcPaths } from '../hooks/useArcPaths';
+import { usePhraseHoverState } from '../hooks/usePhraseHoverState';
 import type { PhraseMode } from '../types/phrase-mode';
-import type { ViewOptions } from '../types/view-options';
-import { PhraseStripProvider } from './PhraseStripContext';
-import { PhraseStrip, LINK_SLOT_TRANSITION_MS, type StripItem } from './PhraseStripParts';
 import type { LinkSlot, TokenGroup } from '../types/token-layout';
-import { buildRenderUnits, groupTokens, resolveFocusContext } from '../utils/token-layout';
+import type { ViewOptions } from '../types/view-options';
 import { resolvedOrEmpty } from '../utils/localized-strings';
+import { buildRenderUnits, groupTokens, resolveFocusContext } from '../utils/token-layout';
 import { buildVerseStartLabelsByTokenRef, slotVerseLabel } from '../utils/verse-superscripts';
-import { useArcPaths } from '../hooks/useArcPaths';
-import { usePhraseHoverState } from '../hooks/usePhraseHoverState';
+import { usePhraseLinkByIdMap, usePhraseLinkMap } from './AnalysisStore';
+import { PhraseStripProvider } from './PhraseStripContext';
+import { PhraseStrip, LINK_SLOT_TRANSITION_MS, type StripItem } from './PhraseStripParts';
 import {
   useArcSplitHandler,
   useCandidatePhraseIds,
@@ -966,16 +967,17 @@ export default function ContinuousView({
   return (
     <div className="tw:relative tw:flex tw:items-center tw:gap-1">
       {/* Previous navigation arrow */}
-      <button
+      <Button
         aria-label="Previous token"
-        className="tw:icon-button"
         disabled={atStart}
-        tabIndex={-1}
         onClick={stepPrev}
+        size="icon-sm"
+        tabIndex={-1}
         type="button"
+        variant="ghost"
       >
         <span aria-hidden="true">{isRtl ? '\u2192' : '\u2190'}</span>
-      </button>
+      </Button>
 
       {/* Scrollable token strip */}
       <div
@@ -1050,16 +1052,17 @@ export default function ContinuousView({
       </div>
 
       {/* Next navigation arrow */}
-      <button
+      <Button
         aria-label="Next token"
-        className="tw:icon-button"
         disabled={atEnd}
-        tabIndex={-1}
         onClick={stepNext}
+        size="icon-sm"
+        tabIndex={-1}
         type="button"
+        variant="ghost"
       >
         <span aria-hidden="true">{isRtl ? '\u2190' : '\u2192'}</span>
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/src/components/MorphemeEditor.tsx b/src/components/MorphemeEditor.tsx
index 1070287f..471b9284 100644
--- a/src/components/MorphemeEditor.tsx
+++ b/src/components/MorphemeEditor.tsx
@@ -5,7 +5,7 @@
  *   lives separately in {@link ./MorphemeBox}.
  */
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { PopoverContent } from 'platform-bible-react';
+import { Button, PopoverContent } from 'platform-bible-react';
 import { useEffect, useId, useRef, useState } from 'react';
 import type { KeyboardEvent, MouseEvent } from 'react';
 
@@ -195,32 +195,25 @@ export function MorphemeBreakdownPopover({
       />
       <div className="tw:flex tw:justify-end tw:gap-1.5">
         {onDelete && (
-          <button
-            className="tw:me-auto tw:rounded tw:border tw:border-destructive tw:px-3 tw:py-0.5 tw:text-xs tw:text-destructive tw:hover:bg-destructive/10"
-            type="button"
+          <Button
+            className="tw:me-auto tw:text-destructive"
             onClick={() => {
               onDelete();
               onClose();
             }}
+            size="sm"
+            type="button"
+            variant="outline"
           >
             {localizedStrings['%interlinearizer_morphemeEditor_delete%']}
-          </button>
+          </Button>
         )}
-        <button
-          className="tw:rounded tw:border tw:border-border tw:px-3 tw:py-0.5 tw:text-xs tw:text-muted-foreground tw:hover:bg-accent"
-          type="button"
-          onClick={onClose}
-        >
+        <Button onClick={onClose} size="sm" type="button" variant="outline">
           {localizedStrings['%interlinearizer_morphemeEditor_cancel%']}
-        </button>
-        <button
-          className="tw:rounded tw:bg-primary tw:px-3 tw:py-0.5 tw:text-xs tw:text-primary-foreground tw:hover:bg-primary/90 tw:disabled:opacity-50 tw:disabled:pointer-events-none"
-          disabled={isMeaningless}
-          type="button"
-          onClick={handleSave}
-        >
+        </Button>
+        <Button disabled={isMeaningless} onClick={handleSave} size="sm" type="button">
           {localizedStrings['%interlinearizer_morphemeEditor_done%']}
-        </button>
+        </Button>
       </div>
     </PopoverContent>
   );
diff --git a/src/components/PhraseBox.tsx b/src/components/PhraseBox.tsx
index e323f9bd..c098ba5f 100644
--- a/src/components/PhraseBox.tsx
+++ b/src/components/PhraseBox.tsx
@@ -1,8 +1,11 @@
 /** @file Shared phrase-box wrapper used around word tokens. */
 import type { PhraseAnalysisLink, Token } from 'interlinearizer';
 import { Trash2 } from 'lucide-react';
+import { Button } from 'platform-bible-react';
 import { memo, useCallback, useEffect, useState } from 'react';
 import type { KeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
+import { sortByDocOrder } from '../utils/phrase-arc';
+import { NO_SLOT_FOCUS } from '../utils/token-layout';
 import {
   usePhraseDispatch,
   usePhraseGloss,
@@ -13,8 +16,6 @@ import {
 import { usePhraseStripContext } from './PhraseStripContext';
 import MemoizedTokenChip, { InertTokenChip } from './TokenChip';
 import MemoizedTokenLinkIcon from './TokenLinkIcon';
-import { sortByDocOrder } from '../utils/phrase-arc';
-import { NO_SLOT_FOCUS } from '../utils/token-layout';
 
 /**
  * Inline gloss input for a phrase. Reads and writes the phrase-level gloss from the analysis store.
@@ -349,26 +350,30 @@ export function PhraseBox({
             className="tw:absolute tw:top-0 tw:z-1 tw:left-1/2 tw:-translate-x-1/2 tw:-translate-y-full tw:inline-flex tw:gap-0.5 tw:rounded tw:border tw:phrase-hovered tw:bg-background tw:px-0.5 tw:py-px"
             data-phrase-controls="true"
           >
-            <button
+            <Button
               aria-label="Edit phrase"
-              className="tw:rounded tw:px-0.5 tw:py-px tw:text-xs tw:text-muted-foreground tw:hover:text-foreground"
+              className="tw:text-xs tw:text-muted-foreground tw:hover:text-foreground"
               data-testid="edit-phrase-btn"
-              tabIndex={-1}
               onClick={handleEditClick}
+              size="icon-xs"
+              tabIndex={-1}
               type="button"
+              variant="ghost"
             >
               ✎
-            </button>
-            <button
+            </Button>
+            <Button
               aria-label="Unlink phrase"
-              className="tw:rounded tw:px-0.5 tw:py-px tw:text-xs tw:text-muted-foreground tw:hover:text-destructive"
+              className="tw:text-muted-foreground tw:hover:text-destructive"
               data-testid="unlink-phrase-btn"
-              tabIndex={-1}
               onClick={handleUnlinkClick}
+              size="icon-xs"
+              tabIndex={-1}
               type="button"
+              variant="ghost"
             >
-              <Trash2 className="tw:h-3 tw:w-3" />
-            </button>
+              <Trash2 className="tw:size-3" />
+            </Button>
           </span>
         )}
         <div
diff --git a/src/components/PhraseStripParts.tsx b/src/components/PhraseStripParts.tsx
index 46276c6d..202d2075 100644
--- a/src/components/PhraseStripParts.tsx
+++ b/src/components/PhraseStripParts.tsx
@@ -1,19 +1,19 @@
 /** @file Shared render parts for the two phrase strips (SegmentView and ContinuousView). */
 import type { Token } from 'interlinearizer';
 import { Merge, Split } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
 import { memo } from 'react';
 import type { MouseEvent, ReactNode } from 'react';
-import MemoizedPhraseBox from './PhraseBox';
-import { useAltHeldValue } from './AltHeldContext';
 import type { PhraseMode } from '../types/phrase-mode';
+import type { FocusContext, LinkSlot, TokenGroup } from '../types/token-layout';
+import { resolveSplitAnchor } from '../utils/split-anchor';
+import { resolveSlotFocus } from '../utils/token-layout';
+import { useAltHeldValue } from './AltHeldContext';
+import MemoizedPhraseBox from './PhraseBox';
 import { usePhraseStripContext } from './PhraseStripContext';
 import { useSegmentation } from './SegmentationStore';
 import { InertTokenChip } from './TokenChip';
 import MemoizedTokenLinkIcon from './TokenLinkIcon';
-import type { FocusContext, LinkSlot, TokenGroup } from '../types/token-layout';
-import { resolveSlotFocus } from '../utils/token-layout';
-import { resolveSplitAnchor } from '../utils/split-anchor';
 
 /** Props for {@link BoundaryButton}. */
 type BoundaryButtonProps = Readonly<{
@@ -47,16 +47,17 @@ function BoundaryButton({ label, title, testId, icon, action }: BoundaryButtonPr
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button
+        <Button
           aria-label={label}
-          className="tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:text-muted-foreground tw:hover:bg-accent tw:hover:text-accent-foreground"
+          className="tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:text-muted-foreground tw:hover:bg-accent tw:hover:text-accent-foreground"
           data-testid={testId}
+          onClick={action}
           tabIndex={-1}
           type="button"
-          onClick={action}
+          variant="ghost"
         >
           {icon}
-        </button>
+        </Button>
       </TooltipTrigger>
       <TooltipContent>{title}</TooltipContent>
     </Tooltip>
@@ -99,10 +100,10 @@ type BoundaryControlProps = Readonly<{
  *   segment at the resolved punctuation-travel anchor). `Split` and `Merge` are a mirrored lucide
  *   pair, so the two operations read as one system yet stay distinct at icon size.
  *
- * Returns `undefined` (leaving the row blank) for slots where no edit applies: leading/trailing
- * slots (a leading slot sits on an existing segment start, where a split would be a no-op),
- * intra-segment slots while Alt is up, and intra-segment slots where the split is suppressed by the
- * not-mid-phrase UI guard.
+ * Returns `undefined` only where no boundary edit can ever apply: leading/trailing slots and while
+ * a phrase mode is active. An intra-segment slot always renders its reserved-height wrapper — even
+ * without a visible marker — so the strip doesn't reflow when Alt or the not-mid-phrase guard
+ * toggles.
  *
  * The not-mid-phrase rule: no split marker renders at a boundary that would cut a phrase (including
  * the gap between two fragments of a discontiguous phrase), and an Alt+click there is a silent
@@ -119,7 +120,8 @@ type BoundaryControlProps = Readonly<{
  * @param props.prevToken - Last word token before the slot.
  * @param props.nextToken - First word token after the slot (the word boundary).
  * @param props.punctuation - Gap punctuation between the two words, in document order.
- * @returns The merge button or the split marker, or `undefined` when no edit applies at this slot.
+ * @returns The merge button, split marker, empty wrapper, or `undefined` when no boundary slot
+ *   exists here.
  */
 function BoundaryControl({
   prevSegmentId,
@@ -162,7 +164,7 @@ function BoundaryControl({
           label={boundaryMergeLabel}
           title={altHeld ? boundaryMergeLabel : boundaryMergeAltHint}
           testId="boundary-merge-btn"
-          icon={<Merge className="tw:h-3 tw:w-3" />}
+          icon={<Merge className="tw:size-3" />}
           action={() => dispatch.merge(secondStart)}
         />
       </span>
@@ -171,28 +173,31 @@ function BoundaryControl({
 
   // Split stays Alt-gated: the marker only appears while Alt is held. The not-mid-phrase UI guard
   // additionally suppresses it at a boundary that would cut a phrase (the absent marker is the
-  // explanation; an Alt+click there is a silent no-op).
+  // explanation; an Alt+click there is a silent no-op). The wrapper itself always renders, so Alt
+  // toggling doesn't unmount/remount the row and grow the strip unevenly (rows with a live boundary
+  // never move, since the merge button's wrapper reserves that height permanently).
   const splittable = altHeld && !straddledBoundaryRefs.has(nextTokenRef);
-  if (!splittable) return undefined;
 
   return (
     <span className="tw:inline-flex tw:min-h-4 tw:items-center">
-      <SplitMarker
-        label={boundarySplitLabel}
-        // A split on a former boundary dispatches the original removed default start (which may be a
-        // leading punctuation token no word-anchored slot could name), so the restore cancels the
-        // removal exactly and the delta can normalize back to the default segmentation. Otherwise
-        // the anchor comes from the punctuation-travel rule so leading-quote punctuation lands on
-        // the following segment.
-        onSplit={() => {
-          /* v8 ignore next -- an intra-segment split slot always resolves its segment's baseline */
-          const baselineText = segmentById.get(nextSegmentId)?.baselineText ?? '';
-          const splitRef =
-            formerBoundaries.get(nextTokenRef) ??
-            resolveSplitAnchor(prevToken, nextToken, punctuation, baselineText);
-          dispatch.split(splitRef);
-        }}
-      />
+      {splittable && (
+        <SplitMarker
+          label={boundarySplitLabel}
+          // A split on a former boundary dispatches the original removed default start (which may be a
+          // leading punctuation token no word-anchored slot could name), so the restore cancels the
+          // removal exactly and the delta can normalize back to the default segmentation. Otherwise
+          // the anchor comes from the punctuation-travel rule so leading-quote punctuation lands on
+          // the following segment.
+          onSplit={() => {
+            /* v8 ignore next -- an intra-segment split slot always resolves its segment's baseline */
+            const baselineText = segmentById.get(nextSegmentId)?.baselineText ?? '';
+            const splitRef =
+              formerBoundaries.get(nextTokenRef) ??
+              resolveSplitAnchor(prevToken, nextToken, punctuation, baselineText);
+            dispatch.split(splitRef);
+          }}
+        />
+      )}
     </span>
   );
 }
diff --git a/src/components/SegmentListView.tsx b/src/components/SegmentListView.tsx
index 37d0bb67..0aaba628 100644
--- a/src/components/SegmentListView.tsx
+++ b/src/components/SegmentListView.tsx
@@ -2,18 +2,18 @@ import { useLocalizedStrings } from '@papi/frontend/react';
 import { Canon, type SerializedVerseRef } from '@sillsdev/scripture';
 import type { Book, ScriptureRef, Segment, Token } from 'interlinearizer';
 import { LocateFixed, Merge } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
+import useSegmentWindow from '../hooks/useSegmentWindow';
 import type { PhraseMode } from '../types/phrase-mode';
 import type { ViewOptions } from '../types/view-options';
+import { buildSegmentLabels } from '../utils/segment-labels';
+import { segmentContainsVerse } from '../utils/verse-ref';
+import { buildVerseStartLabels } from '../utils/verse-superscripts';
 import { useAltHeldValue } from './AltHeldContext';
 import { useSegmentation } from './SegmentationStore';
 import MemoizedSegmentView from './SegmentView';
-import useSegmentWindow from '../hooks/useSegmentWindow';
-import { buildVerseStartLabels } from '../utils/verse-superscripts';
-import { buildSegmentLabels } from '../utils/segment-labels';
-import { segmentContainsVerse } from '../utils/verse-ref';
 import { RECENTER_FADE_TRANSITION_STYLE } from './recenter-fade';
 
 /** Localized labels for the between-rows merge control; hoisted so the array reference is stable. */
@@ -64,22 +64,27 @@ function MergeRowButton({ segment }: MergeRowButtonProps) {
       />
       <Tooltip>
         <TooltipTrigger asChild>
-          <button
+          {/* Full-area hit strip: the layout classes (absolute inset-0, h-auto, no padding) override
+              the Button size box so it fills the gap, and hover:bg-transparent suppresses the ghost
+              variant's hover band — this control deliberately never paints over the rail (see the
+              handle's group-hover styling below). */}
+          <Button
             aria-label={localizedStrings['%interlinearizer_boundaryControl_merge%']}
-            className="tw:absolute tw:inset-0 tw:flex tw:items-center tw:justify-center tw:rounded"
+            className="tw:absolute tw:inset-0 tw:flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0 tw:hover:bg-transparent"
             data-testid="segment-merge-btn"
+            onClick={() => dispatch.merge(secondSegmentStartRef)}
             tabIndex={-1}
             type="button"
-            onClick={() => dispatch.merge(secondSegmentStartRef)}
+            variant="ghost"
           >
             {/* A solid rounded "handle" riding the rail: a real theme surface (`bg-muted`) so it
                 reads coherently over the line, brightening to the accent on hover. Rotated 90° so
                 the Y-join points along this view's vertical merge axis (the lower row folds up into
                 the one above), unlike the horizontal continuous-strip merge. */}
             <span className="tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:bg-muted tw:p-1 tw:text-muted-foreground tw:group-hover/merge:bg-accent tw:group-hover/merge:text-accent-foreground">
-              <Merge className="tw:h-3 tw:w-3 tw:rotate-90" />
+              <Merge className="tw:size-3 tw:rotate-90" />
             </span>
-          </button>
+          </Button>
         </TooltipTrigger>
         <TooltipContent>
           {altHeld
@@ -373,15 +378,16 @@ export default function SegmentListView({
           <span className="tw:text-sm tw:font-semibold tw:text-foreground">
             {pinnedChapter !== undefined ? `${bookName} ${pinnedChapter}` : ''}
           </span>
-          <button
+          <Button
             aria-label="Scroll to active verse"
-            className="tw:rounded tw:p-1 tw:text-foreground tw:hover:bg-muted/50"
-            tabIndex={-1}
             onClick={recenterOnActive}
+            tabIndex={-1}
+            size="icon-sm"
             type="button"
+            variant="ghost"
           >
-            <LocateFixed className="tw:h-4 tw:w-4" />
-          </button>
+            <LocateFixed className="tw:size-4" />
+          </Button>
         </div>
       )}
 
diff --git a/src/components/TokenChip.tsx b/src/components/TokenChip.tsx
index 75b6c7db..f416b643 100644
--- a/src/components/TokenChip.tsx
+++ b/src/components/TokenChip.tsx
@@ -1,7 +1,7 @@
 import type { Token } from 'interlinearizer';
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { Plus, X } from 'lucide-react';
-import { Popover, PopoverAnchor } from 'platform-bible-react';
+import { Button, Popover, PopoverAnchor } from 'platform-bible-react';
 import {
   type KeyboardEvent,
   memo,
@@ -354,11 +354,12 @@ export function TokenChip({
   return (
     <span className="tw:relative tw:inline-flex tw:shrink-0">
       {onRemove && (
-        <button
+        <Button
           aria-label={`Remove ${token.surfaceText} from phrase`}
-          className={`tw:absolute tw:-top-1.5 tw:-right-1.5 tw:z-10 tw:flex tw:h-3.5 tw:w-3.5 tw:items-center tw:justify-center tw:rounded-full tw:border tw:bg-background${isRemoveHovered ? ' tw:border-destructive tw:text-destructive' : ' tw:border-border tw:text-muted-foreground'}`}
+          className={`tw:absolute tw:-top-1.5 tw:-right-1.5 tw:z-10 tw:flex tw:h-3.5 tw:w-3.5 tw:items-center tw:justify-center tw:rounded-full tw:border tw:bg-background tw:p-0${isRemoveHovered ? ' tw:border-destructive tw:text-destructive' : ' tw:border-border tw:text-muted-foreground'}`}
           tabIndex={-1}
           type="button"
+          variant="ghost"
           onClick={(e) => {
             e.preventDefault();
             onRemove();
@@ -366,8 +367,8 @@ export function TokenChip({
           onMouseEnter={() => setIsRemoveHovered(true)}
           onMouseLeave={() => setIsRemoveHovered(false)}
         >
-          <X className="tw:h-2.5 tw:w-2.5" />
-        </button>
+          <X className="tw:size-2.5" />
+        </Button>
       )}
       <label
         className={`tw:inline-flex tw:flex-col tw:items-center tw:rounded tw:border tw:bg-muted tw:px-0.5 tw:py-0.5${isRemoveHovered || isSplitFree ? ' tw:border-destructive' : ' tw:border-border'}${disabled ? ' tw:pointer-events-none' : ''}`}
@@ -402,20 +403,21 @@ export function TokenChip({
               />
             ) : (
               <PopoverAnchor asChild>
-                <button
+                <Button
                   aria-label={localizedStrings[
                     '%interlinearizer_tokenChip_defineMorphemes%'
                   ].replace('{token}', () => token.surfaceText)}
-                  className={`tw:flex tw:flex-row tw:items-center tw:rounded tw:px-0.5 tw:font-mono tw:text-xs tw:italic tw:text-muted-foreground/50 tw:transition-colors${disabled ? '' : ' tw:cursor-pointer tw:hover:bg-accent'}`}
+                  className={`tw:flex tw:h-auto tw:flex-row tw:items-center tw:rounded tw:px-0.5 tw:py-0 tw:font-mono tw:text-xs tw:italic tw:text-muted-foreground/50 tw:transition-colors${disabled ? '' : ' tw:cursor-pointer tw:hover:bg-accent'}`}
                   tabIndex={-1}
                   type="button"
+                  variant="ghost"
                   onClick={(e) => {
                     e.preventDefault();
                     if (!disabled) setPopoverOpen(true);
                   }}
                 >
                   <span className="tw:whitespace-nowrap">{token.surfaceText}</span>
-                </button>
+                </Button>
               </PopoverAnchor>
             )}
             {popoverOpen && (
@@ -488,7 +490,7 @@ export function TokenChip({
             type="text"
           />
           {hasMultipleSuggestions && (
-            <button
+            <Button
               aria-controls={dropdownShown ? listboxId : undefined}
               aria-expanded={dropdownShown}
               aria-hidden={!addVisible}
@@ -496,16 +498,17 @@ export function TokenChip({
               // Absolutely positioned inside the input's reserved end-padding so it never affects
               // layout; we toggle only opacity, fading the button in on focus/hover. When hidden it
               // is also made non-interactive so an invisible button can't swallow clicks.
-              className={`tw:absolute tw:right-0.5 tw:top-1/2 tw:flex tw:h-2.5 tw:w-2.5 tw:-translate-y-1/2 tw:items-center tw:justify-center tw:rounded tw:text-muted-foreground tw:cursor-pointer tw:transition-opacity tw:hover:bg-accent${addVisible ? '' : ' tw:pointer-events-none tw:opacity-0'}`}
+              className={`tw:absolute tw:right-0.5 tw:top-1/2 tw:flex tw:h-2.5 tw:w-2.5 tw:-translate-y-1/2 tw:items-center tw:justify-center tw:rounded tw:p-0 tw:text-muted-foreground tw:cursor-pointer tw:transition-opacity tw:hover:bg-accent${addVisible ? '' : ' tw:pointer-events-none tw:opacity-0'}`}
               data-testid="suggestion-add"
               tabIndex={-1}
               type="button"
+              variant="ghost"
               onClick={handleAddClick}
               // Suppress the mouse-down focus shift so clicking the button never blurs the input.
               onMouseDown={(e) => e.preventDefault()}
             >
-              <Plus className="tw:h-2.5 tw:w-2.5" />
-            </button>
+              <Plus className="tw:size-2.5" />
+            </Button>
           )}
         </span>
         {dropdownShown && (
diff --git a/src/components/TokenLinkIcon.tsx b/src/components/TokenLinkIcon.tsx
index b2f09196..ed3a9bce 100644
--- a/src/components/TokenLinkIcon.tsx
+++ b/src/components/TokenLinkIcon.tsx
@@ -1,12 +1,12 @@
 /** @file Inline link / unlink icon rendered between adjacent word token groups. */
 import type { PhraseAnalysisLink, Token } from 'interlinearizer';
 import { Link2, Unlink2 } from 'lucide-react';
-import { Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'platform-bible-react';
 import { memo, useCallback } from 'react';
-import { usePhraseDispatch } from './AnalysisStore';
-import { usePhraseStripContext } from './PhraseStripContext';
 import type { SlotFocusInfo } from '../types/token-layout';
 import { computeSplitFreeRefs, sortByDocOrder, splitPhraseAtBoundary } from '../utils/phrase-arc';
+import { usePhraseDispatch } from './AnalysisStore';
+import { usePhraseStripContext } from './PhraseStripContext';
 
 /** Props for {@link TokenLinkIcon}. */
 type TokenLinkIconProps = Readonly<{
@@ -248,9 +248,9 @@ export function TokenLinkIcon({
     };
 
     return (
-      <button
+      <Button
         aria-label="Unlink tokens"
-        className={`tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:transition-opacity tw:hover:text-destructive tw:focus:opacity-100 tw:disabled:pointer-events-none tw:disabled:opacity-30 ${isPhraseRevealed ? 'tw:text-muted-foreground tw:opacity-100' : 'tw:text-muted-foreground/50 tw:opacity-100'}`}
+        className={`tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0.5 tw:transition-opacity tw:hover:text-destructive tw:focus:opacity-100 tw:disabled:opacity-30 ${isPhraseRevealed ? 'tw:text-muted-foreground tw:opacity-100' : 'tw:text-muted-foreground/50 tw:opacity-100'}`}
         data-testid="token-unlink-btn"
         disabled={unlinkDisabled}
         tabIndex={-1}
@@ -259,9 +259,10 @@ export function TokenLinkIcon({
         onMouseEnter={(candidatePhraseId ?? splitFreeRefs) ? handleUnlinkMouseEnter : undefined}
         onMouseLeave={(candidatePhraseId ?? splitFreeRefs) ? handleUnlinkMouseLeave : undefined}
         type="button"
+        variant="ghost"
       >
-        <Unlink2 className="tw:h-3 tw:w-3" />
-      </button>
+        <Unlink2 className="tw:size-3" />
+      </Button>
     );
   }
 
@@ -317,9 +318,9 @@ export function TokenLinkIcon({
   };
 
   const linkButton = (
-    <button
+    <Button
       aria-label="Link tokens"
-      className={`tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:p-0.5 ${isActive ? 'tw:text-foreground/60 tw:hover:text-foreground' : 'tw:text-foreground/20 tw:cursor-default'}`}
+      className={`tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:p-0.5 ${isActive ? 'tw:text-foreground/60 tw:hover:text-foreground' : 'tw:text-foreground/20 tw:cursor-default'}`}
       data-testid="token-link-btn"
       disabled={linkDisabled}
       tabIndex={-1}
@@ -327,9 +328,10 @@ export function TokenLinkIcon({
       onMouseEnter={isActive ? handleLinkMouseEnter : undefined}
       onMouseLeave={isActive ? handleLinkMouseLeave : undefined}
       type="button"
+      variant="ghost"
     >
-      <Link2 className="tw:h-3 tw:w-3" />
-    </button>
+      <Link2 className="tw:size-3" />
+    </Button>
   );
 
   // Only the cross-segment-disabled case carries a tooltip.
diff --git a/src/components/controls/EditPhraseControls.tsx b/src/components/controls/EditPhraseControls.tsx
index 3a2fdccc..b432e00c 100644
--- a/src/components/controls/EditPhraseControls.tsx
+++ b/src/components/controls/EditPhraseControls.tsx
@@ -1,7 +1,8 @@
 /** @file Done/Cancel controls shown in the confirm bar while editing a phrase. */
+import { Button } from 'platform-bible-react';
 import type { Dispatch, SetStateAction } from 'react';
-import { usePhraseLinkByIdMap } from '../AnalysisStore';
 import type { PhraseMode } from '../../types/phrase-mode';
+import { usePhraseLinkByIdMap } from '../AnalysisStore';
 
 /** Props for {@link EditPhraseControls}. */
 type EditPhraseControlsProps = Readonly<{
@@ -34,23 +35,24 @@ export default function EditPhraseControls({ phraseMode, setPhraseMode }: EditPh
   return (
     <div className="tw:confirm-controls" data-testid="edit-phrase-controls">
       <span>Editing Phrase</span>
-      <button
-        className="tw:pill-btn-primary"
+      <Button
         data-testid="done-edit-btn"
         disabled={liveTokenCount < 2}
         onClick={() => setPhraseMode({ kind: 'view' })}
+        size="sm"
         type="button"
       >
         Done
-      </button>
-      <button
-        className="tw:pill-btn-secondary"
+      </Button>
+      <Button
         data-testid="cancel-phrase-btn"
         onClick={() => setPhraseMode({ ...phraseMode, revert: true })}
+        size="sm"
         type="button"
+        variant="secondary"
       >
         Cancel
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/src/components/controls/ViewOptionsDropdown.tsx b/src/components/controls/ViewOptionsDropdown.tsx
index 85c1956f..6a542872 100644
--- a/src/components/controls/ViewOptionsDropdown.tsx
+++ b/src/components/controls/ViewOptionsDropdown.tsx
@@ -182,7 +182,7 @@ export default function ViewOptionsDropdown({
         variant="ghost"
         onClick={() => setOpen((v) => !v)}
       >
-        <Settings className="tw:h-4 tw:w-4" />
+        <Settings className="tw:size-4" />
       </Button>
 
       {open &&
diff --git a/src/components/modals/CreateProjectModal.tsx b/src/components/modals/CreateProjectModal.tsx
index 4b592336..5bfece89 100644
--- a/src/components/modals/CreateProjectModal.tsx
+++ b/src/components/modals/CreateProjectModal.tsx
@@ -1,5 +1,5 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { Button } from 'platform-bible-react';
+import { Button, Input, Label, Textarea } from 'platform-bible-react';
 import { useState, useCallback } from 'react';
 import { parseLanguageTags } from '../../utils/language-tags';
 import { ModalShell } from './ModalShell';
@@ -87,33 +87,33 @@ export function CreateProjectModal({
       title={localizedStrings['%interlinearizer_modal_create_title%']}
       width="tw:w-96"
     >
-      <label className="tw:modal-form-label" htmlFor="project-name">
+      <Label className="tw:mb-1" htmlFor="project-name">
         {localizedStrings['%interlinearizer_modal_create_name_label%']}
-      </label>
-      <input
+      </Label>
+      <Input
         id="project-name"
-        className="tw:modal-form-input tw:mb-3"
+        className="tw:mb-3 tw:w-full"
         value={name}
         onChange={(e) => setName(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
       />
-      <label className="tw:modal-form-label" htmlFor="project-description">
+      <Label className="tw:mb-1" htmlFor="project-description">
         {localizedStrings['%interlinearizer_modal_create_description_label%']}
-      </label>
-      <textarea
+      </Label>
+      <Textarea
         id="project-description"
-        className="tw:modal-form-input tw:mb-3 tw:resize-none"
+        className="tw:mb-3 tw:resize-none"
         rows={2}
         value={description}
         onChange={(e) => setDescription(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
       />
-      <label className="tw:modal-form-label" htmlFor="analysis-language">
+      <Label className="tw:mb-1" htmlFor="analysis-language">
         {localizedStrings['%interlinearizer_modal_create_language_label%']}
-      </label>
-      <input
+      </Label>
+      <Input
         id="analysis-language"
-        className="tw:modal-form-input tw:mb-4"
+        className="tw:mb-4 tw:w-full"
         value={analysisLanguages}
         onChange={(e) => setAnalysisLanguages(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_language_placeholder%']}
diff --git a/src/components/modals/ProjectMetadataModal.tsx b/src/components/modals/ProjectMetadataModal.tsx
index 5c1d5ca5..8117f2fd 100644
--- a/src/components/modals/ProjectMetadataModal.tsx
+++ b/src/components/modals/ProjectMetadataModal.tsx
@@ -1,10 +1,10 @@
 import papi, { logger } from '@papi/frontend';
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { Trash2 } from 'lucide-react';
-import { Button } from 'platform-bible-react';
+import { Button, Input, Label, Textarea } from 'platform-bible-react';
 import { useCallback, useMemo, useState } from 'react';
-import { parseLanguageTags } from '../../utils/language-tags';
 import useSubmitGuard from '../../hooks/useSubmitGuard';
+import { parseLanguageTags } from '../../utils/language-tags';
 import { ModalShell } from './ModalShell';
 
 /** Localized string keys used by {@link ProjectMetadataModal}. */
@@ -191,10 +191,10 @@ export function ProjectMetadataModal({
       {/* Editable fields */}
       <div className="tw:flex tw:flex-col tw:gap-3 tw:mb-4">
         <div className="tw:flex tw:flex-col tw:gap-1">
-          <label className="tw:section-label" htmlFor="metadata-edit-name">
+          <Label className="tw:section-label" htmlFor="metadata-edit-name">
             {localizedStrings['%interlinearizer_modal_metadata_name_label%']}
-          </label>
-          <input
+          </Label>
+          <Input
             id="metadata-edit-name"
             className="tw:modal-metadata-input"
             value={editName}
@@ -204,10 +204,10 @@ export function ProjectMetadataModal({
         </div>
 
         <div className="tw:flex tw:flex-col tw:gap-1">
-          <label className="tw:section-label" htmlFor="metadata-edit-description">
+          <Label className="tw:section-label" htmlFor="metadata-edit-description">
             {localizedStrings['%interlinearizer_modal_metadata_description_label%']}
-          </label>
-          <textarea
+          </Label>
+          <Textarea
             id="metadata-edit-description"
             className="tw:modal-metadata-input tw:resize-none"
             rows={2}
@@ -220,10 +220,10 @@ export function ProjectMetadataModal({
         </div>
 
         <div className="tw:flex tw:flex-col tw:gap-1">
-          <label className="tw:section-label" htmlFor="metadata-edit-language">
+          <Label className="tw:section-label" htmlFor="metadata-edit-language">
             {localizedStrings['%interlinearizer_modal_metadata_analysis_language_label%']}
-          </label>
-          <input
+          </Label>
+          <Input
             id="metadata-edit-language"
             className="tw:modal-metadata-input tw:font-mono"
             value={editLanguages}
@@ -285,7 +285,7 @@ export function ProjectMetadataModal({
             onClick={() => setConfirmingDelete(true)}
             disabled={isSubmitting}
           >
-            <Trash2 size={13} className="tw:mr-1" />
+            <Trash2 className="tw:mr-1 tw:size-[13px]" />
             {localizedStrings['%interlinearizer_modal_metadata_delete%']}
           </Button>
           <div className="tw:flex tw:gap-2">
diff --git a/src/components/modals/SaveAsProjectModal.tsx b/src/components/modals/SaveAsProjectModal.tsx
index bdade719..f45d1970 100644
--- a/src/components/modals/SaveAsProjectModal.tsx
+++ b/src/components/modals/SaveAsProjectModal.tsx
@@ -1,6 +1,6 @@
 import papi, { logger } from '@papi/frontend';
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { Button } from 'platform-bible-react';
+import { Button, Input, Label, Textarea } from 'platform-bible-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import useSubmitGuard from '../../hooks/useSubmitGuard';
 import type { InterlinearProjectSummary } from '../../types/interlinear-project-summary';
@@ -170,22 +170,22 @@ export function SaveAsProjectModal({
       <h3 className="tw:text-sm tw:font-medium tw:mb-2">
         {localizedStrings['%interlinearizer_modal_saveAs_new_section%']}
       </h3>
-      <label className="tw:modal-form-label" htmlFor="save-as-name">
+      <Label className="tw:mb-1" htmlFor="save-as-name">
         {localizedStrings['%interlinearizer_modal_create_name_label%']}
-      </label>
-      <input
+      </Label>
+      <Input
         id="save-as-name"
-        className="tw:modal-form-input tw:mb-3"
+        className="tw:mb-3 tw:w-full"
         value={name}
         onChange={(e) => setName(e.target.value)}
         placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
       />
-      <label className="tw:modal-form-label" htmlFor="save-as-description">
+      <Label className="tw:mb-1" htmlFor="save-as-description">
         {localizedStrings['%interlinearizer_modal_create_description_label%']}
-      </label>
-      <textarea
+      </Label>
+      <Textarea
         id="save-as-description"
-        className="tw:modal-form-input tw:mb-3 tw:resize-none"
+        className="tw:mb-3 tw:resize-none"
         rows={2}
         value={description}
         onChange={(e) => setDescription(e.target.value)}
diff --git a/src/components/modals/SelectInterlinearProjectModal.tsx b/src/components/modals/SelectInterlinearProjectModal.tsx
index b25b7ed3..d3bb642e 100644
--- a/src/components/modals/SelectInterlinearProjectModal.tsx
+++ b/src/components/modals/SelectInterlinearProjectModal.tsx
@@ -159,7 +159,7 @@ export function SelectInterlinearProjectModal({
                   className="tw:shrink-0"
                   onClick={() => onViewInfo(project)}
                 >
-                  <Info size={15} />
+                  <Info className="tw:size-[15px]" />
                 </Button>
               </li>
             );
diff --git a/src/components/modals/UnlinkPhraseConfirm.tsx b/src/components/modals/UnlinkPhraseConfirm.tsx
index c5d82022..0bae3ff9 100644
--- a/src/components/modals/UnlinkPhraseConfirm.tsx
+++ b/src/components/modals/UnlinkPhraseConfirm.tsx
@@ -1,7 +1,8 @@
 /** @file Confirmation controls shown in the confirm bar for unlinking (deleting) a phrase. */
+import { Button } from 'platform-bible-react';
 import type { Dispatch, SetStateAction } from 'react';
-import { usePhraseDispatch } from '../AnalysisStore';
 import type { PhraseMode } from '../../types/phrase-mode';
+import { usePhraseDispatch } from '../AnalysisStore';
 
 /** Props for {@link UnlinkPhraseConfirm}. */
 type UnlinkPhraseConfirmProps = Readonly<{
@@ -42,22 +43,24 @@ export default function UnlinkPhraseConfirm({ phraseId, setPhraseMode }: UnlinkP
   return (
     <div className="tw:confirm-controls" data-testid="unlink-confirm">
       <span>Unlink this phrase?</span>
-      <button
-        className="tw:pill-btn-destructive"
+      <Button
         data-testid="unlink-confirm-yes"
         onClick={handleConfirm}
+        size="sm"
         type="button"
+        variant="destructive"
       >
         Unlink
-      </button>
-      <button
-        className="tw:pill-btn-secondary"
+      </Button>
+      <Button
         data-testid="unlink-confirm-cancel"
         onClick={handleCancel}
+        size="sm"
         type="button"
+        variant="secondary"
       >
         Cancel
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/src/tailwind.css b/src/tailwind.css
index 2b15d6d7..0900ba1e 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -109,10 +109,6 @@
   @apply tw:text-destructive;
 }
 
-@utility icon-button {
-  @apply tw:shrink-0 tw:rounded tw:p-1 tw:text-foreground tw:disabled:opacity-30 tw:hover:bg-muted/50;
-}
-
 @utility link-slot {
   @apply tw:inline-flex tw:flex-col tw:items-center;
 }
@@ -129,14 +125,6 @@
   @apply tw:rounded tw:border tw:border-destructive/40 tw:bg-destructive/5;
 }
 
-@utility modal-form-input {
-  @apply tw:w-full tw:rounded tw:border tw:border-border tw:bg-muted tw:text-foreground tw:px-3 tw:py-1.5 tw:text-sm;
-}
-
-@utility modal-form-label {
-  @apply tw:block tw:text-sm tw:mb-1;
-}
-
 @utility modal-metadata-input {
   @apply tw:rounded tw:border tw:border-border tw:bg-background tw:px-2 tw:py-1 tw:text-sm tw:text-foreground;
 }
@@ -209,18 +197,6 @@
   @apply tw:inline-flex tw:items-start tw:gap-1;
 }
 
-@utility pill-btn-destructive {
-  @apply tw:rounded tw:border tw:border-destructive tw:bg-destructive tw:px-2 tw:py-0.5 tw:text-destructive-foreground tw:hover:opacity-90;
-}
-
-@utility pill-btn-primary {
-  @apply tw:rounded tw:border tw:border-ring tw:bg-ring tw:px-2 tw:py-0.5 tw:text-background tw:hover:opacity-90;
-}
-
-@utility pill-btn-secondary {
-  @apply tw:rounded tw:border tw:border-border tw:bg-muted tw:px-2 tw:py-0.5 tw:text-foreground tw:hover:bg-muted/80;
-}
-
 @utility section-label {
   @apply tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide;
 }