diff --git a/src/components/ui/SegmentedControl.tsx b/src/components/ui/SegmentedControl.tsx
new file mode 100644
index 0000000..e270b11
--- /dev/null
+++ b/src/components/ui/SegmentedControl.tsx
@@ -0,0 +1,22 @@
+interface Option<T extends string> { label: string; value: T; }
+interface Props<T extends string> { options: Option<T>[]; value: T; onChange: (v: T) => void; }
+
+export function SegmentedControl<T extends string>({ options, value, onChange }: Props<T>) {
+  return (
+    <div className="flex gap-2">
+      {options.map(opt => (
+        <button
+          key={opt.value}
+          onClick={() => onChange(opt.value)}
+          className="px-4 py-2 rounded-[10px] text-sm font-medium transition-all duration-150 cursor-pointer"
+          style={value === opt.value
+            ? { background: '#7C6FE0', color: 'white', boxShadow: '0 2px 12px rgba(124,111,224,0.3)' }
+            : { background: 'var(--bg-elevated)', color: 'var(--text-secondary)', border: '1px solid var(--border-sub)' }
+          }
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}