diff --git a/components/ExperimentsView.tsx b/components/ExperimentsView.tsx
index d4dc664..75926e3 100644
--- a/components/ExperimentsView.tsx
+++ b/components/ExperimentsView.tsx
@@ -943,7 +943,7 @@ const ExperimentCreateView: React.FC<{
                 value={name}
                 onChange={e => setName(e.target.value)}
                 placeholder="e.g. Price reduction test - Premium Line"
-                className="input-field"
+                className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
               />
             </FormField>
             <FormField label="Description">
@@ -952,19 +952,19 @@ const ExperimentCreateView: React.FC<{
                 onChange={e => setDescription(e.target.value)}
                 rows={2}
                 placeholder="Brief description of the experiment..."
-                className="input-field resize-y"
+                className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 resize-y"
               />
             </FormField>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
               <FormField label="Type">
-                <select value={type} onChange={e => setType(e.target.value as ExperimentType)} className="input-field">
+                <select value={type} onChange={e => setType(e.target.value as ExperimentType)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                   {TYPE_OPTIONS.map(t => (
                     <option key={t} value={t}>{getExperimentIcon(t)} {t.charAt(0).toUpperCase() + t.slice(1)}</option>
                   ))}
                 </select>
               </FormField>
               <FormField label="Marketplace">
-                <select value={marketplace} onChange={e => setMarketplace(e.target.value)} className="input-field">
+                <select value={marketplace} onChange={e => setMarketplace(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                   {MARKETPLACE_OPTIONS.map(m => (
                     <option key={m} value={m}>{m}</option>
                   ))}
@@ -972,7 +972,7 @@ const ExperimentCreateView: React.FC<{
                 </select>
               </FormField>
               <FormField label="Primary Metric">
-                <select value={primaryMetric} onChange={e => setPrimaryMetric(e.target.value as ExperimentMetric)} className="input-field">
+                <select value={primaryMetric} onChange={e => setPrimaryMetric(e.target.value as ExperimentMetric)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
                   {METRIC_OPTIONS.map(m => (
                     <option key={m.value} value={m.value}>{m.label}</option>
                   ))}
@@ -984,7 +984,7 @@ const ExperimentCreateView: React.FC<{
                   value={owner}
                   onChange={e => setOwner(e.target.value)}
                   placeholder="Your name"
-                  className="input-field"
+                  className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
                 />
               </FormField>
             </div>
@@ -998,7 +998,7 @@ const ExperimentCreateView: React.FC<{
             onChange={e => setHypothesis(e.target.value)}
             rows={3}
             placeholder="What do you expect to happen? e.g. 'Reducing price by 12% will increase units sold by at least 20% while maintaining net margin'"
-            className="input-field resize-y"
+            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 resize-y"
           />
         </Card>
 
@@ -1013,14 +1013,14 @@ const ExperimentCreateView: React.FC<{
                   value={c.field}
                   onChange={e => updateChange(i, 'field', e.target.value)}
                   placeholder="Field (e.g. Price)"
-                  className="input-field w-32"
+                  className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 w-32"
                 />
                 <input
                   type="text"
                   value={c.before_value}
                   onChange={e => updateChange(i, 'before_value', e.target.value)}
                   placeholder="Before"
-                  className="input-field flex-1"
+                  className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 flex-1"
                 />
                 <svg className="w-4 h-4 text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
@@ -1030,7 +1030,7 @@ const ExperimentCreateView: React.FC<{
                   value={c.after_value}
                   onChange={e => updateChange(i, 'after_value', e.target.value)}
                   placeholder="After"
-                  className="input-field flex-1"
+                  className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 flex-1"
                 />
                 {changes.length > 1 && (
                   <button onClick={() => removeChange(i)} className="p-1.5 text-slate-500 hover:text-red-400 transition-colors shrink-0">
@@ -1060,7 +1060,7 @@ const ExperimentCreateView: React.FC<{
             onChange={e => setTreatmentAsins(e.target.value)}
             rows={3}
             placeholder="B09ABC1234, B09DEF5678&#10;or LINE:PREMIUM_COLLECTION"
-            className="input-field resize-y font-mono text-xs"
+            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 resize-y font-mono text-xs"
           />
           {treatmentAsins && (
             <div className="mt-2 text-xs text-slate-500">{parseAsins(treatmentAsins).length} ASINs detected</div>
@@ -1077,7 +1077,7 @@ const ExperimentCreateView: React.FC<{
             onChange={e => setControlAsins(e.target.value)}
             rows={3}
             placeholder="B09GHI9012, B09JKL3456"
-            className="input-field resize-y font-mono text-xs"
+            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 resize-y font-mono text-xs"
           />
           {controlAsins && (
             <div className="mt-2 text-xs text-slate-500">{parseAsins(controlAsins).length} control ASINs detected</div>
@@ -1088,10 +1088,10 @@ const ExperimentCreateView: React.FC<{
         <Card title="Timeline">
           <div className="grid grid-cols-2 gap-4 mb-6">
             <FormField label="Start Date" required>
-              <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} className="input-field" />
+              <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" />
             </FormField>
             <FormField label="End Date">
-              <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} className="input-field" />
+              <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" />
             </FormField>
           </div>
 
@@ -1112,10 +1112,10 @@ const ExperimentCreateView: React.FC<{
                   Instead of dynamically looking right before the start date, specify an exact previous period (like year-over-year).
                 </div>
                 <FormField label="Baseline Start Date">
-                  <input type="date" value={baselineStartDate} onChange={e => setBaselineStartDate(e.target.value)} className="input-field" />
+                  <input type="date" value={baselineStartDate} onChange={e => setBaselineStartDate(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" />
                 </FormField>
                 <FormField label="Baseline End Date">
-                  <input type="date" value={baselineEndDate} onChange={e => setBaselineEndDate(e.target.value)} className="input-field" />
+                  <input type="date" value={baselineEndDate} onChange={e => setBaselineEndDate(e.target.value)} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" />
                 </FormField>
               </div>
             )}