diff --git a/frontend/src/components/signals/BacktestPanel.tsx b/frontend/src/components/signals/BacktestPanel.tsx
index 543d41a..b38bff5 100644
--- a/frontend/src/components/signals/BacktestPanel.tsx
+++ b/frontend/src/components/signals/BacktestPanel.tsx
@@ -5,6 +5,7 @@ import { triggerJob } from '../../api/admin';
 import { Button } from '../ui/Button';
 import { Callout } from '../ui/Callout';
 import { Disclosure } from '../ui/Disclosure';
+import { Dropdown } from '../ui/Dropdown';
 import { Section } from '../ui/Section';
 import { useToast } from '../ui/Toast';
 import type { BacktestCurvePoint, BacktestPortfolioMonitorRun } from '../../lib/types';
@@ -217,32 +218,29 @@ export function BacktestPanel() {
                     </p>
                   </div>
                   <div className="flex flex-wrap gap-2">
-                    <label className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
-                      Strategy
-                      <select
+                    <div className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
+                      <label htmlFor="monitor-strategy">Strategy</label>
+                      <Dropdown
+                        id="monitor-strategy"
+                        className="w-64 normal-case tracking-normal"
                         value={activeStrategy}
-                        onChange={(e) => setSelectedStrategy(e.target.value)}
-                        className="rounded border border-white/10 bg-slate-950 px-3 py-2 text-xs normal-case tracking-normal text-gray-200"
-                      >
-                        {monitor.strategies.map((s) => (
-                          <option key={s.strategy} value={s.strategy}>
-                            {s.is_production ? 'Production: ' : ''}{s.label}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                    <label className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
-                      Lookback
-                      <select
+                        onChange={setSelectedStrategy}
+                        options={monitor.strategies.map((s) => ({
+                          value: s.strategy,
+                          label: `${s.is_production ? 'Production: ' : ''}${s.label}`,
+                        }))}
+                      />
+                    </div>
+                    <div className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
+                      <label htmlFor="monitor-lookback">Lookback</label>
+                      <Dropdown
+                        id="monitor-lookback"
+                        className="w-36 normal-case tracking-normal"
                         value={activeLookback}
-                        onChange={(e) => setSelectedLookback(e.target.value)}
-                        className="rounded border border-white/10 bg-slate-950 px-3 py-2 text-xs normal-case tracking-normal text-gray-200"
-                      >
-                        {monitor.lookbacks.map((l) => (
-                          <option key={l.lookback} value={l.lookback}>{l.label}</option>
-                        ))}
-                      </select>
-                    </label>
+                        onChange={setSelectedLookback}
+                        options={monitor.lookbacks.map((l) => ({ value: l.lookback, label: l.label }))}
+                      />
+                    </div>
                   </div>
                 </div>