diff --git a/ui/src/components/VoiceModeToggle.tsx b/ui/src/components/VoiceModeToggle.tsx
new file mode 100644
index 00000000..9c5b518e
--- /dev/null
+++ b/ui/src/components/VoiceModeToggle.tsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { useVoiceMode } from "@/hooks/useVoiceMode";
+
+type VoiceMode = "text" | "voice_input" | "full_voice";
+
+const PILLS: { label: string; value: VoiceMode }[] = [
+  { label: "Text", value: "text" },
+  { label: "Voice In", value: "voice_input" },
+  { label: "Full Voice", value: "full_voice" },
+];
+
+export function VoiceModeToggle() {
+  const { mode, setMode, isLoading } = useVoiceMode();
+  const [autoPlay, setAutoPlay] = useState<boolean>(
+    () => localStorage.getItem("nexus:voice:autoplay") === "true"
+  );
+
+  function handleAutoPlayChange(checked: boolean) {
+    setAutoPlay(checked);
+    localStorage.setItem("nexus:voice:autoplay", String(checked));
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div
+        role="group"
+        aria-label="Voice mode"
+        className="flex items-center gap-1"
+      >
+        {PILLS.map(({ label, value }) => (
+          <button
+            key={value}
+            type="button"
+            disabled={isLoading}
+            onClick={() => setMode(value)}
+            className={[
+              "rounded-full px-3 py-1 text-xs font-medium transition-colors",
+              mode === value
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted text-muted-foreground",
+            ].join(" ")}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+      {mode === "full_voice" && (
+        <label className="flex items-center gap-2 text-xs text-muted-foreground mt-1">
+          <input
+            type="checkbox"
+            checked={autoPlay}
+            onChange={(e) => handleAutoPlayChange(e.target.checked)}
+          />
+          Auto-play voice responses
+        </label>
+      )}
+    </div>
+  );
+}