diff --git a/src/client/components/SearchBar.test.tsx b/src/client/components/SearchBar.test.tsx
new file mode 100644
index 0000000..ee12cb4
--- /dev/null
+++ b/src/client/components/SearchBar.test.tsx
@@ -0,0 +1,155 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { SearchBar } from "./SearchBar";
+
+const defaultProps = {
+  query: "",
+  onQueryChange: vi.fn(),
+  matchCount: 0,
+  currentMatchPosition: -1,
+  onNext: vi.fn(),
+  onPrev: vi.fn(),
+};
+
+function renderSearchBar(overrides: Partial<typeof defaultProps> = {}) {
+  return render(<SearchBar {...defaultProps} {...overrides} />);
+}
+
+describe("SearchBar", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("empty state visibility", () => {
+    it("does not render match count or navigation when query is empty", () => {
+      const { container } = renderSearchBar();
+      // No match count badge should be visible
+      expect(container.querySelector("[data-testid='match-count']")).toBeNull();
+      // No navigation arrows should be visible
+      expect(container.querySelector("[aria-label='Previous match']")).toBeNull();
+      expect(container.querySelector("[aria-label='Next match']")).toBeNull();
+    });
+
+    it("shows keyboard hint when no query is entered", () => {
+      const { container } = renderSearchBar();
+      const kbd = container.querySelector("kbd");
+      expect(kbd).toBeInTheDocument();
+      expect(kbd?.textContent).toBe("/");
+    });
+  });
+
+  describe("active search state", () => {
+    it("shows match count when query has results", () => {
+      const { container } = renderSearchBar({
+        query: "test",
+        matchCount: 5,
+        currentMatchPosition: 2,
+      });
+      const badge = container.querySelector("[data-testid='match-count']");
+      expect(badge).toBeInTheDocument();
+      expect(badge?.textContent).toContain("3");
+      expect(badge?.textContent).toContain("5");
+    });
+
+    it("shows 'No results' when query has no matches", () => {
+      const { container } = renderSearchBar({
+        query: "nonexistent",
+        matchCount: 0,
+        currentMatchPosition: -1,
+      });
+      const badge = container.querySelector("[data-testid='match-count']");
+      expect(badge).toBeInTheDocument();
+      expect(badge?.textContent).toContain("No results");
+    });
+
+    it("shows navigation arrows when there are results", () => {
+      const { container } = renderSearchBar({
+        query: "test",
+        matchCount: 3,
+        currentMatchPosition: 0,
+      });
+      expect(container.querySelector("[aria-label='Previous match']")).toBeInTheDocument();
+      expect(container.querySelector("[aria-label='Next match']")).toBeInTheDocument();
+    });
+
+    it("shows clear button when input has text", () => {
+      const { container } = renderSearchBar({
+        query: "test",
+        matchCount: 1,
+        currentMatchPosition: 0,
+      });
+      expect(container.querySelector("[aria-label='Clear search']")).toBeInTheDocument();
+    });
+  });
+
+  describe("arrow key navigation", () => {
+    it("calls onNext when ArrowDown is pressed in the input", () => {
+      const onNext = vi.fn();
+      const { container } = renderSearchBar({
+        query: "test",
+        matchCount: 3,
+        currentMatchPosition: 0,
+        onNext,
+      });
+      const input = container.querySelector("input")!;
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      expect(onNext).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onPrev when ArrowUp is pressed in the input", () => {
+      const onPrev = vi.fn();
+      const { container } = renderSearchBar({
+        query: "test",
+        matchCount: 3,
+        currentMatchPosition: 1,
+        onPrev,
+      });
+      const input = container.querySelector("input")!;
+      fireEvent.keyDown(input, { key: "ArrowUp" });
+      expect(onPrev).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("navigation button clicks", () => {
+    it("calls onPrev when previous button is clicked", () => {
+      const onPrev = vi.fn();
+      const { container } = renderSearchBar({
+        query: "test",
+        matchCount: 3,
+        currentMatchPosition: 1,
+        onPrev,
+      });
+      fireEvent.click(container.querySelector("[aria-label='Previous match']")!);
+      expect(onPrev).toHaveBeenCalledTimes(1);
+    });
+
+    it("calls onNext when next button is clicked", () => {
+      const onNext = vi.fn();
+      const { container } = renderSearchBar({
+        query: "test",
+        matchCount: 3,
+        currentMatchPosition: 0,
+        onNext,
+      });
+      fireEvent.click(container.querySelector("[aria-label='Next match']")!);
+      expect(onNext).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("clear button", () => {
+    it("clears query when clear button is clicked", () => {
+      const onQueryChange = vi.fn();
+      const { container } = renderSearchBar({
+        query: "test",
+        matchCount: 1,
+        currentMatchPosition: 0,
+        onQueryChange,
+      });
+      fireEvent.click(container.querySelector("[aria-label='Clear search']")!);
+      expect(onQueryChange).toHaveBeenCalledWith("");
+    });
+  });
+});
diff --git a/src/client/components/SearchBar.tsx b/src/client/components/SearchBar.tsx
index 3cd903f..779fbba 100644
--- a/src/client/components/SearchBar.tsx
+++ b/src/client/components/SearchBar.tsx
@@ -90,10 +90,21 @@ export function SearchBar({
         onNext();
       }
     }
+
+    // Arrow keys navigate between matches while in the search input
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      onNext();
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      onPrev();
+    }
   }
 
   const hasResults = query && matchCount > 0;
   const hasNoResults = query && matchCount === 0;
+  const showControls = !!localQuery || !!query;
 
   return (
     <div className="w-80 sm:w-96">
@@ -131,70 +142,102 @@ export function SearchBar({
                      focus:outline-none"
         />
 
-        {/* Right-side controls — all inside the unified bar */}
-        <div className="flex items-center gap-0.5 pr-2 flex-shrink-0">
-          {/* Match count badge */}
-          {query && (
-            <div className={`
-              flex items-center gap-1 px-2 py-0.5 rounded-md text-caption tabular-nums whitespace-nowrap mr-0.5
-              ${hasNoResults
-                ? "text-red-400 bg-red-500/10"
-                : "text-foreground-muted bg-surface-overlay/50"
-              }
-            `}>
-              {hasNoResults ? (
-                <span>No results</span>
-              ) : (
-                <span>{currentMatchPosition >= 0 ? currentMatchPosition + 1 : 0}<span className="text-foreground-muted/50 mx-0.5">/</span>{matchCount}</span>
-              )}
-            </div>
-          )}
-
-          {/* Navigation arrows — only when there are results */}
-          {hasResults && (
-            <div className="flex items-center border-l border-border-muted/60 ml-1 pl-1">
-              <button
-                onClick={onPrev}
-                className="p-1 rounded-md text-foreground-muted hover:text-foreground hover:bg-surface-overlay/60 transition-colors"
-                aria-label="Previous match"
+        {/* Right-side controls — only rendered when there's content */}
+        {showControls ? (
+          <div className="flex items-center gap-1 pr-2.5 flex-shrink-0 animate-fade-in">
+            {/* Match count badge */}
+            {query && (
+              <div
+                data-testid="match-count"
+                className={`
+                  flex items-center px-2 py-0.5 rounded-md text-caption tabular-nums whitespace-nowrap
+                  transition-colors duration-150
+                  ${hasNoResults
+                    ? "text-red-400 bg-red-500/10"
+                    : "text-foreground-muted bg-surface-overlay/50"
+                  }
+                `}
               >
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
-                </svg>
-              </button>
-              <button
-                onClick={onNext}
-                className="p-1 rounded-md text-foreground-muted hover:text-foreground hover:bg-surface-overlay/60 transition-colors"
-                aria-label="Next match"
-              >
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-                </svg>
-              </button>
-            </div>
-          )}
+                {hasNoResults ? (
+                  <span>No results</span>
+                ) : (
+                  <span>
+                    <span className="text-foreground-secondary font-medium">
+                      {currentMatchPosition >= 0 ? currentMatchPosition + 1 : 0}
+                    </span>
+                    <span className="text-foreground-muted/40 mx-0.5">/</span>
+                    <span>{matchCount}</span>
+                  </span>
+                )}
+              </div>
+            )}
 
-          {/* Clear button or keyboard hint */}
-          {localQuery ? (
+            {/* Navigation arrows — only when there are results */}
+            {hasResults && (
+              <div className="flex items-center gap-0.5 ml-0.5">
+                <button
+                  onClick={onPrev}
+                  className="flex items-center justify-center w-6 h-6 rounded-md
+                             text-foreground-muted hover:text-foreground
+                             hover:bg-surface-overlay/60
+                             active:bg-surface-overlay/80 active:scale-95
+                             transition-all duration-100"
+                  aria-label="Previous match"
+                  tabIndex={-1}
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+                  </svg>
+                </button>
+                <button
+                  onClick={onNext}
+                  className="flex items-center justify-center w-6 h-6 rounded-md
+                             text-foreground-muted hover:text-foreground
+                             hover:bg-surface-overlay/60
+                             active:bg-surface-overlay/80 active:scale-95
+                             transition-all duration-100"
+                  aria-label="Next match"
+                  tabIndex={-1}
+                >
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                  </svg>
+                </button>
+              </div>
+            )}
+
+            {/* Divider between nav and clear */}
+            {hasResults && (
+              <div className="w-px h-4 bg-border-muted/50 mx-0.5" />
+            )}
+
+            {/* Clear button */}
             <button
               onClick={() => {
                 setLocalQuery("");
                 onQueryChange("");
                 inputRef.current?.focus();
               }}
-              className="p-1 rounded-md text-foreground-muted hover:text-foreground hover:bg-surface-overlay/60 transition-colors ml-0.5"
+              className="flex items-center justify-center w-6 h-6 rounded-md
+                         text-foreground-muted hover:text-foreground
+                         hover:bg-surface-overlay/60
+                         active:bg-surface-overlay/80 active:scale-95
+                         transition-all duration-100"
               aria-label="Clear search"
+              tabIndex={-1}
             >
               <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                 <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
               </svg>
             </button>
-          ) : (
-            <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 text-caption text-foreground-muted/70 bg-surface-overlay/40 border border-border-muted rounded font-mono leading-none">
+          </div>
+        ) : (
+          <div className="pr-2.5 flex-shrink-0">
+            <kbd className="hidden sm:inline-flex items-center justify-center w-5 h-5 text-[11px] text-foreground-secondary bg-surface-overlay border border-border rounded font-mono">
               /
             </kbd>
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );