diff --git a/App.tsx b/App.tsx
index 031bb56..9d22f6c 100644
--- a/App.tsx
+++ b/App.tsx
@@ -23,8 +23,7 @@ const AdsPerformance = lazy(() => import('./components/AdsPerformance'));
 const ForecastView = lazy(() => import('./components/ForecastView'));
 const VendorDataView = lazy(() => import('./components/VendorDataView'));
 const ExperimentsView = lazy(() => import('./components/ExperimentsView'));
-const ExperimentDetail = lazy(() => import('./components/ExperimentDetail'));
-const ExperimentForm = lazy(() => import('./components/ExperimentForm'));
+// ExperimentDetail and ExperimentForm are now integrated into ExperimentsView
 
 // Loading fallback component
 const LoadingSpinner = () => (
@@ -64,17 +63,7 @@ const App: React.FC = () => {
 
   // Experiments state
   const [experimentMap, setExperimentMap] = useState<Map<string, ActiveExperiment[]>>(new Map());
-  const [selectedExperimentId, setSelectedExperimentId] = useState<string | null>(null);
-  const [showCreateExperiment, setShowCreateExperiment] = useState(false);
-  const [preselectedAsins, setPreselectedAsins] = useState<string[]>([]);
-  const [preselectedMarketplace, setPreselectedMarketplace] = useState<string>('');
-  const [preselectedLine, setPreselectedLine] = useState<string>('');
-
-  // Available product lines (for experiment form)
-  const availableProductLines = useMemo(() => {
-    const lines = new Set(rawData.map(r => r.line).filter(Boolean));
-    return Array.from(lines).sort();
-  }, [rawData]);
+  // Experiment modal state removed — detail/create are now inline in ExperimentsView
 
   // Modal State
   const [isDataModalOpen, setIsDataModalOpen] = useState(false);
@@ -349,13 +338,10 @@ const App: React.FC = () => {
     setView('ads');
   }, []);
 
-  // Create experiment for a specific line
-  const handleCreateExperimentForLine = useCallback((line: string) => {
-    if (!line) return;
-    setPreselectedLine(line);
-    setPreselectedMarketplace(filters.customer[0] || '');
-    setShowCreateExperiment(true);
-  }, [filters.customer]);
+  // Create experiment for a specific line — now handled inline by ExperimentsView
+  const handleCreateExperimentForLine = useCallback((_line: string) => {
+    setView('experiments');
+  }, []);
 
   // 1. Initial Load from Cache (IndexedDB) or Auto-Fetch Permanent URL
   useEffect(() => {
@@ -902,7 +888,7 @@ const App: React.FC = () => {
                     velocityMap={velocityMap}
                     buyBoxLostMap={buyBoxLostMap}
                     experimentMap={experimentMap}
-                    onOpenExperiment={(id) => setSelectedExperimentId(id)}
+                    onOpenExperiment={() => setView('experiments')}
                   />
                 </div>
               </Suspense>
@@ -962,13 +948,8 @@ const App: React.FC = () => {
               <Suspense fallback={<LoadingSpinner />}>
                 <div className={view === 'experiments' ? '' : 'hidden'}>
                   <ExperimentsView
-                    onOpenDetail={(id) => setSelectedExperimentId(id)}
-                    onOpenCreate={() => {
-                      setPreselectedAsins([]);
-                      setPreselectedMarketplace(filters.customer[0] || '');
-                      setShowCreateExperiment(true);
-                    }}
                     salesData={unfilteredCombinedData}
+                    onExperimentsFetch={handleExperimentsFetch}
                   />
                 </div>
               </Suspense>
@@ -1036,33 +1017,7 @@ const App: React.FC = () => {
         )
       }
 
-      {/* Experiment Detail Modal */}
-      {selectedExperimentId && (
-        <ExperimentDetail
-          experimentId={selectedExperimentId}
-          onClose={() => setSelectedExperimentId(null)}
-          salesData={unfilteredCombinedData}
-        />
-      )}
-
-      {/* Create Experiment Modal */}
-      {showCreateExperiment && (
-        <ExperimentForm
-          onClose={() => {
-            setShowCreateExperiment(false);
-            setPreselectedAsins([]);
-            setPreselectedMarketplace('');
-            setPreselectedLine('');
-          }}
-          onSuccess={() => {
-            handleExperimentsFetch();
-          }}
-          initialAsins={preselectedAsins}
-          initialMarketplace={preselectedMarketplace}
-          initialLine={preselectedLine}
-          availableLines={availableProductLines}
-        />
-      )}
+      {/* Experiment modals removed — detail/create are now inline in ExperimentsView */}
 
     </div >
   );
diff --git a/components/ExperimentBadge.tsx b/components/ExperimentBadge.tsx
index 6a5c858..c9a3dac 100644
--- a/components/ExperimentBadge.tsx
+++ b/components/ExperimentBadge.tsx
@@ -98,11 +98,12 @@ export const ExperimentTypeBadge: React.FC<ExperimentTypeBadgeProps> = ({ type,
     lg: 'px-3 py-1.5 text-sm',
   };
 
-  const typeLabels = {
+  const typeLabels: Record<string, string> = {
     pricing: 'Pricing',
     advertising: 'Advertising',
     content: 'Content',
     promotion: 'Promotion',
+    seo: 'SEO',
   };
 
   return (
diff --git a/components/ExperimentsView.tsx b/components/ExperimentsView.tsx
index 202a117..781ce7c 100644
--- a/components/ExperimentsView.tsx
+++ b/components/ExperimentsView.tsx
@@ -1,106 +1,135 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { ExperimentListItem, ExperimentType, ExperimentStatus, CombinedKPIs } from '../types';
-import { listExperiments, deleteExperiment, getExperimentStatusColor, getExperimentTypeColor, getExperimentIcon, getExperimentAsins } from '../services/experiments';
+import {
+  Experiment,
+  ExperimentCreateInput,
+  ExperimentListItem,
+  ExperimentType,
+  ExperimentStatus,
+  ExperimentMetric,
+  ExperimentVerdict,
+  ExperimentChangeAnnotation,
+  DiDMetricResult,
+  CombinedKPIs,
+} from '../types';
+import {
+  listExperiments,
+  getExperiment,
+  createExperiment,
+  updateExperiment,
+  deleteExperiment,
+  getExperimentStatusColor,
+  getExperimentTypeColor,
+  getExperimentIcon,
+  getVerdictColor,
+  getVerdictLabel,
+  METRIC_LABELS,
+  formatMetricValue,
+} from '../services/experiments';
+import { computeDiD, computeVerdict, buildCounterfactualSeries, TrendDataPoint } from '../services/experimentAnalysis';
 import MultiSelectDropdown from './MultiSelectDropdown';
-import { ExperimentBadge, ExperimentStatusBadge, ExperimentTypeBadge } from './ExperimentBadge';
-import { LineChart, Line, ResponsiveContainer, YAxis } from 'recharts';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip as RechartsTooltip,
+  ResponsiveContainer,
+  ReferenceLine,
+} from 'recharts';
 
-const getChartMetricColor = (metric: string) => {
-  switch (metric) {
-    case 'cvr': return '#34d399'; // emerald
-    case 'gv': return '#a78bfa'; // purple 
-    case 'acos': return '#fb7185'; // rose
-    case 'revenue': return '#fbbf24'; // amber
-    default: return '#818cf8'; // indigo for units
-  }
-};
+// ============ Sub-view type ============
+type SubView = 'list' | 'detail' | 'create';
 
-const ExperimentSparkline: React.FC<{ experiment: ExperimentListItem; salesData: CombinedKPIs[] }> = ({ experiment, salesData }) => {
-  const chartData = useMemo(() => {
-    if (!experiment?.asins || !salesData?.length) return [];
+// ============ Constants ============
+const STATUS_OPTIONS = ['planned', 'active', 'completed', 'paused'];
+const TYPE_OPTIONS: ExperimentType[] = ['content', 'pricing', 'advertising', 'seo', 'promotion'];
+const MARKETPLACE_OPTIONS = ['DE', 'UK', 'FR', 'IT', 'ES'];
+const METRIC_OPTIONS: { value: ExperimentMetric; label: string }[] = [
+  { value: 'units', label: 'Units Sold' },
+  { value: 'sessions', label: 'Sessions' },
+  { value: 'cvr', label: 'Conversion Rate (CVR)' },
+  { value: 'ctr', label: 'Click-Through Rate (CTR)' },
+  { value: 'roas', label: 'ROAS' },
+  { value: 'revenue', label: 'Revenue' },
+  { value: 'acos', label: 'ACOS' },
+];
 
-    const asinSet = getExperimentAsins(experiment.asins, salesData);
-    const weeklyMap = new Map<string, any>();
+// ============ Main Component ============
+interface ExperimentsViewProps {
+  salesData?: CombinedKPIs[];
+  onExperimentsFetch?: () => void;
+}
 
-    salesData.forEach(r => {
-      const asin = (r.asin || '').toUpperCase();
-      if (!asinSet.has(asin)) return;
+const ExperimentsView: React.FC<ExperimentsViewProps> = ({ salesData = [], onExperimentsFetch }) => {
+  const [subView, setSubView] = useState<SubView>('list');
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
-      const weekNum = r.week || 1;
-      const yearStr = r.year || new Date().getFullYear();
-      const weekStr = `${yearStr}-W${String(weekNum).padStart(2, '0')}`;
+  const navigateToDetail = useCallback((id: string) => {
+    setSelectedId(id);
+    setSubView('detail');
+  }, []);
 
-      if (!weeklyMap.has(weekStr)) {
-        const d = new Date(yearStr, 0, 1 + (weekNum - 1) * 7);
-        weeklyMap.set(weekStr, {
-          name: weekStr,
-          timestamp: d.getTime(),
-          units: 0,
-          revenue: 0,
-          gv: 0,
-          spend: 0,
-        });
-      }
+  const navigateToCreate = useCallback(() => {
+    setSubView('create');
+  }, []);
 
-      const w = weeklyMap.get(weekStr);
-      w.units += r.unitsTotal || 0;
-      w.revenue += r.salesTotal || 0;
-      w.gv += r.glanceViews || 0;
-      w.spend += r.cost || 0;
-    });
+  const navigateToList = useCallback(() => {
+    setSelectedId(null);
+    setSubView('list');
+  }, []);
 
-    const arr = Array.from(weeklyMap.values()).map(w => ({
-      ...w,
-      cvr: w.gv > 0 ? (w.units / w.gv) * 100 : 0,
-      acos: w.revenue > 0 ? (w.spend / w.revenue) * 100 : 0
-    })).sort((a, b) => a.timestamp - b.timestamp);
-
-    return arr.slice(-12);
-  }, [experiment, salesData]);
-
-  if (chartData.length < 2) return <div className="h-8 w-16 bg-slate-800/50 rounded animate-pulse" />;
-
-  const metric = experiment.primary_metric || 'units';
+  const handleCreated = useCallback((id: string) => {
+    setSelectedId(id);
+    setSubView('detail');
+    onExperimentsFetch?.();
+  }, [onExperimentsFetch]);
 
   return (
-    <div className="h-10 w-24">
-      <ResponsiveContainer width="100%" height="100%">
-        <LineChart data={chartData}>
-          <YAxis domain={['dataMin', 'dataMax']} hide />
-          <Line
-            type="monotone"
-            dataKey={metric === 'bsr' ? 'units' : metric === 'ctr' ? 'gv' : metric}
-            stroke={getChartMetricColor(metric)}
-            strokeWidth={2}
-            dot={false}
-          />
-        </LineChart>
-      </ResponsiveContainer>
+    <div className="p-4 md:p-6 pb-24 md:pb-6 max-w-[1400px] mx-auto">
+      {subView === 'list' && (
+        <ExperimentListView
+          salesData={salesData}
+          onOpenDetail={navigateToDetail}
+          onOpenCreate={navigateToCreate}
+        />
+      )}
+      {subView === 'detail' && selectedId && (
+        <ExperimentDetailView
+          experimentId={selectedId}
+          salesData={salesData}
+          onBack={navigateToList}
+          onExperimentsFetch={onExperimentsFetch}
+        />
+      )}
+      {subView === 'create' && (
+        <ExperimentCreateView
+          salesData={salesData}
+          onBack={navigateToList}
+          onCreated={handleCreated}
+        />
+      )}
     </div>
   );
 };
 
-interface ExperimentsViewProps {
-  onOpenDetail: (experimentId: string) => void;
-  onOpenCreate: () => void;
-  salesData?: CombinedKPIs[];
-}
+// ====================================================================
+// LIST VIEW
+// ====================================================================
 
-const ExperimentsView: React.FC<ExperimentsViewProps> = ({ onOpenDetail, onOpenCreate, salesData = [] }) => {
+const ExperimentListView: React.FC<{
+  salesData: CombinedKPIs[];
+  onOpenDetail: (id: string) => void;
+  onOpenCreate: () => void;
+}> = ({ salesData, onOpenDetail, onOpenCreate }) => {
   const [experiments, setExperiments] = useState<ExperimentListItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-
-  // Filters
   const [statusFilter, setStatusFilter] = useState<string[]>([]);
   const [typeFilter, setTypeFilter] = useState<string[]>([]);
   const [marketplaceFilter, setMarketplaceFilter] = useState<string[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
 
-  const statusOptions = ['planned', 'active', 'completed', 'paused'];
-  const typeOptions = ['pricing', 'advertising', 'content', 'promotion'];
-  const marketplaceOptions = ['DE', 'UK', 'FR', 'IT', 'ES'];
-
   const loadExperiments = useCallback(async () => {
     setLoading(true);
     setError(null);
@@ -118,174 +147,141 @@ const ExperimentsView: React.FC<ExperimentsViewProps> = ({ onOpenDetail, onOpenC
     }
   }, [statusFilter, typeFilter, marketplaceFilter]);
 
-  useEffect(() => {
-    loadExperiments();
-  }, [loadExperiments]);
+  useEffect(() => { loadExperiments(); }, [loadExperiments]);
 
-  const filteredExperiments = useMemo(() => {
+  const filtered = useMemo(() => {
     if (!searchQuery) return experiments;
-    const query = searchQuery.toLowerCase();
-    return experiments.filter(exp =>
-      exp.name.toLowerCase().includes(query) ||
-      exp.owner?.toLowerCase().includes(query)
+    const q = searchQuery.toLowerCase();
+    return experiments.filter(e =>
+      e.name.toLowerCase().includes(q) || e.owner?.toLowerCase().includes(q)
     );
   }, [experiments, searchQuery]);
 
+  const stats = useMemo(() => {
+    const winners = experiments.filter(e => e.verdict === 'winner').length;
+    const withLift = experiments.filter(e => e.verdict_probability != null);
+    const avgProb = withLift.length > 0
+      ? withLift.reduce((s, e) => s + (e.verdict_probability || 0), 0) / withLift.length
+      : 0;
+    return {
+      total: experiments.length,
+      active: experiments.filter(e => e.status === 'active').length,
+      winners,
+      avgProb: Math.round(avgProb * 100),
+    };
+  }, [experiments]);
+
   const handleDelete = async (id: string, e: React.MouseEvent) => {
     e.stopPropagation();
-    if (!confirm('Are you sure you want to delete this experiment?')) return;
-
+    if (!confirm('Delete this experiment? This action cannot be undone.')) return;
     try {
       await deleteExperiment(id);
       loadExperiments();
     } catch (e: any) {
-      alert(`Error deleting experiment: ${e.message}`);
+      alert(`Error: ${e.message}`);
     }
   };
 
-  const handleDuplicate = async (experiment: ExperimentListItem, e: React.MouseEvent) => {
-    e.stopPropagation();
-    onOpenDetail(experiment.id);
-    // Duplicate functionality will be in detail view
-  };
-
-  // Stats
-  const stats = useMemo(() => ({
-    total: experiments.length,
-    active: experiments.filter(e => e.status === 'active').length,
-    planned: experiments.filter(e => e.status === 'planned').length,
-    avgLift: experiments.filter(e => e.actual_lift_percent !== undefined)
-      .reduce((sum, e) => sum + (e.actual_lift_percent || 0), 0) /
-      Math.max(1, experiments.filter(e => e.actual_lift_percent !== undefined).length),
-  }), [experiments]);
-
   return (
-    <div className="p-6 pb-24 md:pb-6">
+    <>
       {/* Header */}
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center justify-between mb-8">
         <div>
-          <h1 className="text-2xl font-bold text-white">🧪 Experiments</h1>
+          <h1 className="text-2xl font-bold text-white tracking-tight">Experiments</h1>
           <p className="text-sm text-slate-400 mt-1">
-            Track and analyze your product experiments
+            Measure the impact of your changes with scientific rigor
           </p>
         </div>
         <button
           onClick={onOpenCreate}
-          className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors flex items-center gap-2"
+          className="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg font-medium transition-colors text-sm flex items-center gap-2"
         >
-          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
           </svg>
           New Experiment
         </button>
       </div>
 
-      {/* Stats Cards */}
+      {/* Stat Cards */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-        <StatCard label="Total Experiments" value={stats.total} color="indigo" />
-        <StatCard label="Active" value={stats.active} color="emerald" />
-        <StatCard label="Planned" value={stats.planned} color="amber" />
-        <StatCard label="Avg. Lift" value={`${stats.avgLift.toFixed(1)}%`} color="purple" />
+        <StatCard label="Total" value={stats.total} accent="indigo" />
+        <StatCard label="Active" value={stats.active} accent="emerald" />
+        <StatCard label="Winners" value={stats.winners} accent="amber" />
+        <StatCard label="Avg Confidence" value={`${stats.avgProb}%`} accent="purple" />
       </div>
 
       {/* Filters */}
-      <div className="flex flex-wrap gap-3 items-center mb-6 p-4 bg-slate-900/50 border border-slate-800 rounded-xl">
-        <MultiSelectDropdown
-          label="Status"
-          options={statusOptions}
-          selected={statusFilter}
-          onChange={setStatusFilter}
-        />
-        <MultiSelectDropdown
-          label="Type"
-          options={typeOptions}
-          selected={typeFilter}
-          onChange={setTypeFilter}
-        />
-        <MultiSelectDropdown
-          label="Marketplace"
-          options={marketplaceOptions}
-          selected={marketplaceFilter}
-          onChange={setMarketplaceFilter}
-        />
-        <input
-          type="text"
-          placeholder="Search experiments..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="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 flex-1 min-w-[200px]"
-        />
+      <div className="flex flex-wrap gap-3 items-center mb-6 p-3 bg-slate-900/60 border border-slate-800 rounded-xl">
+        <MultiSelectDropdown label="Status" options={STATUS_OPTIONS} selected={statusFilter} onChange={setStatusFilter} />
+        <MultiSelectDropdown label="Type" options={TYPE_OPTIONS} selected={typeFilter} onChange={setTypeFilter} />
+        <MultiSelectDropdown label="Market" options={MARKETPLACE_OPTIONS} selected={marketplaceFilter} onChange={setMarketplaceFilter} />
+        <div className="relative flex-1 min-w-[200px]">
+          <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+          </svg>
+          <input
+            type="text"
+            placeholder="Search by name or owner..."
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            className="w-full bg-slate-800/80 border border-slate-700 rounded-lg pl-9 pr-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"
+          />
+        </div>
         {(statusFilter.length > 0 || typeFilter.length > 0 || marketplaceFilter.length > 0 || searchQuery) && (
           <button
-            onClick={() => {
-              setStatusFilter([]);
-              setTypeFilter([]);
-              setMarketplaceFilter([]);
-              setSearchQuery('');
-            }}
-            className="text-xs text-slate-400 hover:text-white underline whitespace-nowrap"
+            onClick={() => { setStatusFilter([]); setTypeFilter([]); setMarketplaceFilter([]); setSearchQuery(''); }}
+            className="text-xs text-slate-400 hover:text-white transition-colors"
           >
             Clear all
           </button>
         )}
       </div>
 
-      {/* Error State */}
+      {/* Error */}
       {error && (
-        <div className="mb-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400">
-          Error: {error}
+        <div className="mb-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
+          {error}
         </div>
       )}
 
       {/* Table */}
       <div className="bg-slate-900/50 border border-slate-800 rounded-xl overflow-hidden">
         {loading ? (
-          <div className="flex items-center justify-center py-12">
-            <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-indigo-500"></div>
-          </div>
-        ) : filteredExperiments.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-12 text-center">
-            <div className="text-4xl mb-4">🧪</div>
-            <h3 className="text-lg font-semibold text-slate-200">No experiments yet</h3>
-            <p className="text-slate-400 text-sm mt-1 mb-4">
-              Create your first experiment to start tracking performance
-            </p>
-            <button
-              onClick={onOpenCreate}
-              className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors"
-            >
-              Create Experiment
-            </button>
+          <div className="flex items-center justify-center py-16">
+            <div className="animate-spin rounded-full h-8 w-8 border-2 border-indigo-500 border-t-transparent" />
           </div>
+        ) : filtered.length === 0 ? (
+          <EmptyState onOpenCreate={onOpenCreate} />
         ) : (
           <div className="overflow-x-auto">
             <table className="w-full">
-              <thead className="bg-slate-800/50 border-b border-slate-700">
-                <tr>
-                  <th className="text-left text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">Status</th>
-                  <th className="text-left text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">Type</th>
-                  <th className="text-left text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">Name</th>
-                  <th className="text-left text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">Marketplace</th>
-                  <th className="text-left text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">ASINs</th>
-                  <th className="text-left text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">Duration</th>
-                  <th className="text-left text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">Progress</th>
-                  <th className="text-left text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">Impact</th>
-                  <th className="text-left text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">Owner</th>
-                  <th className="text-right text-xs font-medium text-slate-400 uppercase tracking-wider px-4 py-3">Actions</th>
+              <thead>
+                <tr className="border-b border-slate-800">
+                  <Th>Status</Th>
+                  <Th>Type</Th>
+                  <Th>Name</Th>
+                  <Th>Market</Th>
+                  <Th align="center">ASINs</Th>
+                  <Th align="center">Control</Th>
+                  <Th>Duration</Th>
+                  <Th>Verdict</Th>
+                  <Th>Owner</Th>
+                  <Th align="right">Actions</Th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-800">
-                {filteredExperiments.map((exp) => (
+              <tbody className="divide-y divide-slate-800/60">
+                {filtered.map(exp => (
                   <tr
                     key={exp.id}
                     onClick={() => onOpenDetail(exp.id)}
-                    className="hover:bg-slate-800/30 cursor-pointer transition-colors"
+                    className="hover:bg-slate-800/30 cursor-pointer transition-colors group"
                   >
                     <td className="px-4 py-3">
-                      <ExperimentStatusBadge status={exp.status} size="sm" />
+                      <StatusBadge status={exp.status} />
                     </td>
                     <td className="px-4 py-3">
-                      <ExperimentTypeBadge type={exp.type} size="sm" />
+                      <TypeBadge type={exp.type} />
                     </td>
                     <td className="px-4 py-3">
                       <span className="text-sm font-medium text-slate-200">{exp.name}</span>
@@ -293,56 +289,36 @@ const ExperimentsView: React.FC<ExperimentsViewProps> = ({ onOpenDetail, onOpenC
                     <td className="px-4 py-3">
                       <span className="text-sm text-slate-400">{exp.marketplace}</span>
                     </td>
-                    <td className="px-4 py-3">
-                      <span className="text-sm text-slate-400">{exp.asin_count} ASINs</span>
+                    <td className="px-4 py-3 text-center">
+                      <span className="text-sm text-slate-400">{exp.asin_count}</span>
+                    </td>
+                    <td className="px-4 py-3 text-center">
+                      <span className="text-sm text-slate-500">
+                        {exp.control_asin_count > 0 ? exp.control_asin_count : '—'}
+                      </span>
                     </td>
                     <td className="px-4 py-3">
-                      <div className="text-sm text-slate-400">
-                        <div>{new Date(exp.start_date).toLocaleDateString()}</div>
+                      <div className="text-xs text-slate-400">
+                        {new Date(exp.start_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}
                         {exp.end_date && (
-                          <div className="text-xs text-slate-500">
-                            → {new Date(exp.end_date).toLocaleDateString()}
-                          </div>
+                          <span className="text-slate-500">
+                            {' → '}{new Date(exp.end_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' })}
+                          </span>
                         )}
                       </div>
                     </td>
                     <td className="px-4 py-3">
-                      <div className="flex items-center gap-2">
-                        <div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden max-w-[100px]">
-                          <div
-                            className="h-full bg-indigo-500 rounded-full"
-                            style={{ width: `${exp.progress_percent}%` }}
-                          />
-                        </div>
-                        <span className="text-xs text-slate-400 w-10">{exp.progress_percent}%</span>
-                      </div>
-                    </td>
-                    <td className="px-4 py-3">
-                      <div className="flex items-center gap-3">
-                        {salesData.length > 0 && <ExperimentSparkline experiment={exp} salesData={salesData} />}
-                        <div className="w-16">
-                          {exp.actual_lift_percent !== undefined ? (
-                            <span className={`text-sm font-bold ${exp.actual_lift_percent >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
-                              {exp.actual_lift_percent >= 0 ? '+' : ''}{exp.actual_lift_percent}%
-                            </span>
-                          ) : (
-                            <span className="text-sm text-slate-500 font-medium">—</span>
-                          )}
-                          <div className="text-[10px] text-slate-500 capitalize leading-none mt-0.5" style={{ color: getChartMetricColor(exp.primary_metric || 'units') }}>
-                            {exp.primary_metric || 'units'}
-                          </div>
-                        </div>
-                      </div>
+                      <VerdictBadge verdict={exp.verdict} probability={exp.verdict_probability} />
                     </td>
                     <td className="px-4 py-3">
                       <span className="text-sm text-slate-400">{exp.owner || '—'}</span>
                     </td>
-                    <td className="px-4 py-3 text-right">
-                      <div className="flex items-center justify-end gap-2">
+                    <td className="px-4 py-3">
+                      <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                         <button
-                          onClick={(e) => handleDuplicate(exp, e)}
+                          onClick={e => { e.stopPropagation(); onOpenDetail(exp.id); }}
                           className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700 rounded transition-colors"
-                          title="View / Edit"
+                          title="View"
                         >
                           <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                             <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
@@ -350,7 +326,7 @@ const ExperimentsView: React.FC<ExperimentsViewProps> = ({ onOpenDetail, onOpenC
                           </svg>
                         </button>
                         <button
-                          onClick={(e) => handleDelete(exp.id, e)}
+                          onClick={e => handleDelete(exp.id, e)}
                           className="p-1.5 text-slate-400 hover:text-red-400 hover:bg-slate-700 rounded transition-colors"
                           title="Delete"
                         >
@@ -367,27 +343,856 @@ const ExperimentsView: React.FC<ExperimentsViewProps> = ({ onOpenDetail, onOpenC
           </div>
         )}
       </div>
-    </div>
+    </>
   );
 };
 
-// Stat Card Component
-const StatCard: React.FC<{ label: string; value: string | number; color: string }> = ({ label, value, color }) => {
-  const colorClasses: Record<string, string> = {
-    indigo: 'bg-indigo-500/10 border-indigo-500/30 text-indigo-400',
-    emerald: 'bg-emerald-500/10 border-emerald-500/30 text-emerald-400',
-    amber: 'bg-amber-500/10 border-amber-500/30 text-amber-400',
-    purple: 'bg-purple-500/10 border-purple-500/30 text-purple-400',
+// ====================================================================
+// DETAIL VIEW
+// ====================================================================
+
+const ExperimentDetailView: React.FC<{
+  experimentId: string;
+  salesData: CombinedKPIs[];
+  onBack: () => void;
+  onExperimentsFetch?: () => void;
+}> = ({ experimentId, salesData, onBack, onExperimentsFetch }) => {
+  const [experiment, setExperiment] = useState<Experiment | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [analyzing, setAnalyzing] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editLearnings, setEditLearnings] = useState('');
+
+  const loadExperiment = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await getExperiment(experimentId);
+      setExperiment(data);
+      if (data) setEditLearnings(data.learnings || '');
+    } catch (e: any) {
+      console.error('Failed to load experiment:', e);
+    } finally {
+      setLoading(false);
+    }
+  }, [experimentId]);
+
+  useEffect(() => { loadExperiment(); }, [loadExperiment]);
+
+  const handleRunAnalysis = async () => {
+    if (!experiment || salesData.length === 0) return;
+    setAnalyzing(true);
+    try {
+      const didResults = computeDiD(experiment, salesData);
+      const { verdict, probability } = computeVerdict(didResults, experiment.primary_metric);
+
+      const updated = await updateExperiment(experiment.id, {
+        did_results: didResults,
+        verdict,
+        verdict_probability: probability,
+      });
+      setExperiment(updated);
+      onExperimentsFetch?.();
+    } catch (e: any) {
+      alert(`Analysis error: ${e.message}`);
+    } finally {
+      setAnalyzing(false);
+    }
+  };
+
+  const handleSaveLearnings = async () => {
+    if (!experiment) return;
+    try {
+      const updated = await updateExperiment(experiment.id, { learnings: editLearnings });
+      setExperiment(updated);
+      setEditing(false);
+    } catch (e: any) {
+      alert(`Error: ${e.message}`);
+    }
+  };
+
+  const handleUpdateStatus = async (status: ExperimentStatus) => {
+    if (!experiment) return;
+    try {
+      const updated = await updateExperiment(experiment.id, { status });
+      setExperiment(updated);
+      onExperimentsFetch?.();
+    } catch (e: any) {
+      alert(`Error: ${e.message}`);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!experiment) return;
+    if (!confirm('Delete this experiment permanently?')) return;
+    try {
+      await deleteExperiment(experiment.id);
+      onBack();
+      onExperimentsFetch?.();
+    } catch (e: any) {
+      alert(`Error: ${e.message}`);
+    }
+  };
+
+  const trendData = useMemo<TrendDataPoint[]>(() => {
+    if (!experiment || salesData.length === 0) return [];
+    return buildCounterfactualSeries(experiment, salesData, experiment.primary_metric);
+  }, [experiment, salesData]);
+
+  const didResults = experiment?.did_results;
+  const primaryResult = didResults?.metrics[experiment?.primary_metric || 'units'];
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <div className="animate-spin rounded-full h-8 w-8 border-2 border-indigo-500 border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (!experiment) {
+    return (
+      <div className="text-center py-24">
+        <p className="text-slate-400">Experiment not found</p>
+        <button onClick={onBack} className="mt-4 text-indigo-400 hover:text-indigo-300 text-sm">Back to list</button>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Back Button + Header */}
+      <button onClick={onBack} className="flex items-center gap-1.5 text-sm text-slate-400 hover:text-white transition-colors mb-6">
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+        </svg>
+        Back to experiments
+      </button>
+
+      {/* Header */}
+      <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-8">
+        <div>
+          <div className="flex items-center gap-3 mb-2">
+            <h1 className="text-2xl font-bold text-white tracking-tight">{experiment.name}</h1>
+            <StatusBadge status={experiment.status} />
+            <TypeBadge type={experiment.type} />
+          </div>
+          {experiment.description && (
+            <p className="text-sm text-slate-400 max-w-2xl">{experiment.description}</p>
+          )}
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          {experiment.status === 'planned' && (
+            <button onClick={() => handleUpdateStatus('active')} className="px-3 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition-colors">
+              Start Experiment
+            </button>
+          )}
+          {experiment.status === 'active' && (
+            <button onClick={() => handleUpdateStatus('completed')} className="px-3 py-2 bg-slate-600 hover:bg-slate-500 text-white rounded-lg text-sm font-medium transition-colors">
+              Complete
+            </button>
+          )}
+          <button
+            onClick={handleRunAnalysis}
+            disabled={analyzing || salesData.length === 0}
+            className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+          >
+            {analyzing ? (
+              <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />
+            ) : (
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+              </svg>
+            )}
+            Run Analysis
+          </button>
+          <button
+            onClick={handleDelete}
+            className="p-2 text-slate-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
+            title="Delete experiment"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Verdict Card (if results exist) */}
+      {experiment.verdict && primaryResult && (
+        <div className={`mb-8 p-6 rounded-2xl border ${getVerdictColor(experiment.verdict)} relative overflow-hidden`}>
+          <div className="relative z-10 flex flex-col md:flex-row items-center gap-6">
+            <div className="text-center md:text-left">
+              <div className="text-xs uppercase tracking-widest opacity-60 mb-1">Primary Metric Verdict</div>
+              <div className="text-3xl font-bold">
+                {getVerdictLabel(experiment.verdict)}
+              </div>
+              <div className="text-sm opacity-80 mt-1">
+                {METRIC_LABELS[experiment.primary_metric] || experiment.primary_metric}
+              </div>
+            </div>
+            <div className="flex-1" />
+            <div className="flex items-center gap-8">
+              <div className="text-center">
+                <div className="text-xs text-slate-400 mb-1">Lift</div>
+                <div className={`text-2xl font-bold ${primaryResult.lift_percent >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                  {primaryResult.lift_percent >= 0 ? '+' : ''}{primaryResult.lift_percent}%
+                </div>
+              </div>
+              <div className="text-center">
+                <div className="text-xs text-slate-400 mb-1">Confidence</div>
+                <div className="text-2xl font-bold text-white">
+                  {Math.round((experiment.verdict_probability || 0) * 100)}%
+                </div>
+              </div>
+              <div className="text-center">
+                <div className="text-xs text-slate-400 mb-1">DiD Effect</div>
+                <div className="text-2xl font-bold text-white">
+                  {primaryResult.did_estimate >= 0 ? '+' : ''}{formatMetricValue(primaryResult.did_estimate, experiment.primary_metric)}
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* Confidence bar */}
+          <div className="mt-4 h-1.5 bg-slate-700/50 rounded-full overflow-hidden">
+            <div
+              className={`h-full rounded-full transition-all duration-500 ${
+                experiment.verdict === 'winner' ? 'bg-emerald-400' :
+                experiment.verdict === 'loser' ? 'bg-red-400' : 'bg-slate-400'
+              }`}
+              style={{ width: `${Math.round((experiment.verdict_probability || 0) * 100)}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Info Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+        {/* Hypothesis */}
+        <Card title="Hypothesis" className="lg:col-span-2">
+          <p className="text-sm text-slate-300 leading-relaxed">
+            {experiment.hypothesis || 'No hypothesis defined'}
+          </p>
+        </Card>
+
+        {/* Timeline */}
+        <Card title="Timeline">
+          <div className="space-y-3">
+            <div className="flex justify-between text-sm">
+              <span className="text-slate-400">Start</span>
+              <span className="text-white font-medium">{new Date(experiment.start_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</span>
+            </div>
+            {experiment.end_date && (
+              <div className="flex justify-between text-sm">
+                <span className="text-slate-400">End</span>
+                <span className="text-white font-medium">{new Date(experiment.end_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</span>
+              </div>
+            )}
+            <div className="flex justify-between text-sm">
+              <span className="text-slate-400">Primary Metric</span>
+              <span className="text-indigo-400 font-medium">{METRIC_LABELS[experiment.primary_metric] || experiment.primary_metric}</span>
+            </div>
+            {experiment.owner && (
+              <div className="flex justify-between text-sm">
+                <span className="text-slate-400">Owner</span>
+                <span className="text-white">{experiment.owner}</span>
+              </div>
+            )}
+            <div className="flex justify-between text-sm">
+              <span className="text-slate-400">Marketplace</span>
+              <span className="text-white">{experiment.marketplace || 'All'}</span>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Change Annotations */}
+      {experiment.changes && experiment.changes.length > 0 && (
+        <Card title="Changes Made" className="mb-8">
+          <div className="space-y-2">
+            {experiment.changes.map((c, i) => (
+              <div key={i} className="flex items-center gap-3 py-2 px-3 bg-slate-800/50 rounded-lg">
+                <span className="text-xs font-medium text-slate-400 uppercase tracking-wide w-24 shrink-0">{c.field}</span>
+                <code className="text-sm text-red-400/80 bg-red-500/10 px-2 py-0.5 rounded">{c.before_value}</code>
+                <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" />
+                </svg>
+                <code className="text-sm text-emerald-400/80 bg-emerald-500/10 px-2 py-0.5 rounded">{c.after_value}</code>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {/* ASINs */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+        <Card title={`Treatment ASINs (${experiment.asins?.length || 0})`}>
+          <div className="flex flex-wrap gap-2">
+            {(experiment.asins || []).map(a => (
+              <span key={a} className="text-xs font-mono bg-indigo-500/10 text-indigo-300 px-2 py-1 rounded border border-indigo-500/20">{a}</span>
+            ))}
+            {(!experiment.asins || experiment.asins.length === 0) && (
+              <span className="text-sm text-slate-500">No ASINs defined</span>
+            )}
+          </div>
+        </Card>
+        <Card title={`Control Group (${experiment.control_asins?.length || 0})`}>
+          <div className="flex flex-wrap gap-2">
+            {(experiment.control_asins || []).map(a => (
+              <span key={a} className="text-xs font-mono bg-slate-500/10 text-slate-300 px-2 py-1 rounded border border-slate-500/20">{a}</span>
+            ))}
+            {(!experiment.control_asins || experiment.control_asins.length === 0) && (
+              <span className="text-sm text-slate-500">No control group — using simple before/after comparison</span>
+            )}
+          </div>
+        </Card>
+      </div>
+
+      {/* Trend Chart */}
+      {trendData.length > 2 && experiment.did_results && (
+        <Card title="Performance Trend: Actual vs Counterfactual" className="mb-8">
+          <div className="h-80">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={trendData} margin={{ top: 10, right: 20, left: 10, bottom: 5 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
+                <XAxis
+                  dataKey="week"
+                  tick={{ fill: '#94a3b8', fontSize: 11 }}
+                  tickFormatter={w => w.split('-')[1] || w}
+                  stroke="#475569"
+                />
+                <YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} stroke="#475569" />
+                <RechartsTooltip
+                  content={({ active, payload, label }) => {
+                    if (!active || !payload?.length) return null;
+                    const actual = payload.find(p => p.dataKey === 'actual');
+                    const counter = payload.find(p => p.dataKey === 'counterfactual');
+                    return (
+                      <div className="bg-slate-800 border border-slate-700 rounded-lg p-3 shadow-xl">
+                        <div className="text-xs text-slate-400 mb-2">{label}</div>
+                        <div className="flex items-center gap-2 text-sm">
+                          <div className="w-2 h-2 rounded-full bg-indigo-500" />
+                          <span className="text-slate-300">Actual:</span>
+                          <span className="text-white font-medium">{formatMetricValue(Number(actual?.value || 0), experiment.primary_metric)}</span>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm mt-1">
+                          <div className="w-2 h-2 rounded-full bg-slate-400" />
+                          <span className="text-slate-300">Counterfactual:</span>
+                          <span className="text-white font-medium">{formatMetricValue(Number(counter?.value || 0), experiment.primary_metric)}</span>
+                        </div>
+                      </div>
+                    );
+                  }}
+                />
+                {experiment.start_date && (
+                  <ReferenceLine
+                    x={(() => {
+                      const sd = new Date(experiment.start_date);
+                      const week = Math.ceil((sd.getTime() - new Date(sd.getFullYear(), 0, 1).getTime()) / (7 * 86400000));
+                      return `${sd.getFullYear()}-W${String(week).padStart(2, '0')}`;
+                    })()}
+                    stroke="#f59e0b"
+                    strokeDasharray="4 4"
+                    label={{ value: 'Start', position: 'top', fill: '#f59e0b', fontSize: 11 }}
+                  />
+                )}
+                <Line type="monotone" dataKey="actual" stroke="#6366f1" strokeWidth={2.5} dot={false} name="Actual" />
+                <Line type="monotone" dataKey="counterfactual" stroke="#64748b" strokeWidth={2} strokeDasharray="6 3" dot={false} name="Counterfactual" />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+          <div className="flex items-center justify-center gap-6 mt-3">
+            <div className="flex items-center gap-2 text-xs text-slate-400">
+              <div className="w-6 h-0.5 bg-indigo-500 rounded" />
+              Actual performance
+            </div>
+            <div className="flex items-center gap-2 text-xs text-slate-400">
+              <div className="w-6 h-0.5 bg-slate-500 rounded" style={{ backgroundImage: 'repeating-linear-gradient(90deg, #64748b 0, #64748b 4px, transparent 4px, transparent 7px)' }} />
+              Counterfactual (without change)
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* DiD Metric Cards */}
+      {didResults && (
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
+          {(Object.entries(didResults.metrics) as [string, DiDMetricResult][]).map(([metric, result]) => {
+            const isPrimary = metric === experiment.primary_metric;
+            return (
+              <div
+                key={metric}
+                className={`p-4 rounded-xl border transition-colors ${
+                  isPrimary ? 'border-indigo-500/40 bg-indigo-500/5' : 'border-slate-800 bg-slate-900/50'
+                }`}
+              >
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-xs font-medium text-slate-400 uppercase tracking-wide">
+                    {METRIC_LABELS[metric] || metric}
+                  </span>
+                  {isPrimary && (
+                    <span className="text-[10px] bg-indigo-500/20 text-indigo-400 px-1.5 py-0.5 rounded font-medium">PRIMARY</span>
+                  )}
+                </div>
+                <div className={`text-xl font-bold ${result.lift_percent >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                  {result.lift_percent >= 0 ? '+' : ''}{result.lift_percent}%
+                </div>
+                <div className="text-xs text-slate-500 mt-1">
+                  DiD: {result.did_estimate >= 0 ? '+' : ''}{formatMetricValue(result.did_estimate, metric)}
+                </div>
+                <div className="mt-2 flex items-center gap-2">
+                  <div className="flex-1 h-1 bg-slate-700 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full ${
+                        result.posterior_prob_positive >= 0.9 ? 'bg-emerald-400' :
+                        result.posterior_prob_positive <= 0.1 ? 'bg-red-400' : 'bg-slate-400'
+                      }`}
+                      style={{ width: `${Math.round(result.posterior_prob_positive * 100)}%` }}
+                    />
+                  </div>
+                  <span className="text-[10px] text-slate-500">{Math.round(result.posterior_prob_positive * 100)}%</span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Before / After Summary Table */}
+      {didResults && (
+        <Card title="Before vs After Comparison" className="mb-8">
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-slate-800">
+                  <Th>Metric</Th>
+                  <Th align="right">Treatment Before</Th>
+                  <Th align="right">Treatment After</Th>
+                  <Th align="right">Control Before</Th>
+                  <Th align="right">Control After</Th>
+                  <Th align="right">DiD Effect</Th>
+                  <Th align="right">Lift</Th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-800/50">
+                {(Object.entries(didResults.metrics) as [string, DiDMetricResult][]).map(([metric, r]) => (
+                  <tr key={metric} className={metric === experiment.primary_metric ? 'bg-indigo-500/5' : ''}>
+                    <td className="px-4 py-2.5 text-slate-300 font-medium">{METRIC_LABELS[metric] || metric}</td>
+                    <td className="px-4 py-2.5 text-right text-slate-400">{formatMetricValue(r.treatment_before, metric)}</td>
+                    <td className="px-4 py-2.5 text-right text-white font-medium">{formatMetricValue(r.treatment_after, metric)}</td>
+                    <td className="px-4 py-2.5 text-right text-slate-400">{r.control_before ? formatMetricValue(r.control_before, metric) : '—'}</td>
+                    <td className="px-4 py-2.5 text-right text-slate-400">{r.control_after ? formatMetricValue(r.control_after, metric) : '—'}</td>
+                    <td className={`px-4 py-2.5 text-right font-medium ${r.did_estimate >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                      {r.did_estimate >= 0 ? '+' : ''}{formatMetricValue(r.did_estimate, metric)}
+                    </td>
+                    <td className={`px-4 py-2.5 text-right font-bold ${r.lift_percent >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                      {r.lift_percent >= 0 ? '+' : ''}{r.lift_percent}%
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      )}
+
+      {/* Learnings */}
+      <Card title="Learnings & Conclusions" className="mb-8">
+        {editing ? (
+          <div className="space-y-3">
+            <textarea
+              value={editLearnings}
+              onChange={e => setEditLearnings(e.target.value)}
+              rows={5}
+              className="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-y"
+              placeholder="What did you learn from this experiment?"
+            />
+            <div className="flex gap-2">
+              <button onClick={handleSaveLearnings} className="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg transition-colors">
+                Save
+              </button>
+              <button onClick={() => { setEditing(false); setEditLearnings(experiment.learnings || ''); }} className="px-3 py-1.5 text-slate-400 hover:text-white text-sm transition-colors">
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div
+            onClick={() => setEditing(true)}
+            className="cursor-pointer hover:bg-slate-800/30 rounded-lg p-2 -m-2 transition-colors"
+          >
+            {experiment.learnings ? (
+              <p className="text-sm text-slate-300 leading-relaxed whitespace-pre-wrap">{experiment.learnings}</p>
+            ) : (
+              <p className="text-sm text-slate-500 italic">Click to add learnings...</p>
+            )}
+          </div>
+        )}
+      </Card>
+    </>
+  );
+};
+
+// ====================================================================
+// CREATE VIEW
+// ====================================================================
+
+const ExperimentCreateView: React.FC<{
+  salesData: CombinedKPIs[];
+  onBack: () => void;
+  onCreated: (id: string) => void;
+}> = ({ salesData, onBack, onCreated }) => {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [type, setType] = useState<ExperimentType>('content');
+  const [marketplace, setMarketplace] = useState('DE');
+  const [owner, setOwner] = useState('');
+  const [hypothesis, setHypothesis] = useState('');
+  const [primaryMetric, setPrimaryMetric] = useState<ExperimentMetric>('units');
+  const [startDate, setStartDate] = useState(new Date().toISOString().split('T')[0]);
+  const [endDate, setEndDate] = useState('');
+  const [treatmentAsins, setTreatmentAsins] = useState('');
+  const [controlAsins, setControlAsins] = useState('');
+  const [changes, setChanges] = useState<ExperimentChangeAnnotation[]>([{ field: '', before_value: '', after_value: '' }]);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+
+  const parseAsins = (raw: string): string[] => {
+    return raw
+      .split(/[\s,;\n]+/)
+      .map(s => s.trim().toUpperCase())
+      .filter(s => s.length >= 5);
+  };
+
+  const addChange = () => {
+    setChanges([...changes, { field: '', before_value: '', after_value: '' }]);
+  };
+
+  const updateChange = (index: number, key: keyof ExperimentChangeAnnotation, value: string) => {
+    const updated = [...changes];
+    updated[index] = { ...updated[index], [key]: value };
+    setChanges(updated);
+  };
+
+  const removeChange = (index: number) => {
+    setChanges(changes.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async () => {
+    setError('');
+    if (!name.trim()) { setError('Name is required'); return; }
+    const asins = parseAsins(treatmentAsins);
+    if (asins.length === 0) { setError('At least one treatment ASIN is required'); return; }
+
+    setSubmitting(true);
+    try {
+      const validChanges = changes.filter(c => c.field.trim() && (c.before_value.trim() || c.after_value.trim()));
+      const input: ExperimentCreateInput = {
+        name: name.trim(),
+        description: description.trim() || undefined,
+        type,
+        asins,
+        control_asins: parseAsins(controlAsins),
+        marketplace,
+        start_date: startDate,
+        end_date: endDate || undefined,
+        hypothesis: hypothesis.trim() || undefined,
+        primary_metric: primaryMetric,
+        changes: validChanges,
+        owner: owner.trim() || undefined,
+      };
+      const created = await createExperiment(input);
+      onCreated(created.id);
+    } catch (e: any) {
+      setError(e.message);
+    } finally {
+      setSubmitting(false);
+    }
   };
 
   return (
-    <div className={`p-4 rounded-xl border ${colorClasses[color]}`}>
+    <>
+      <button onClick={onBack} className="flex items-center gap-1.5 text-sm text-slate-400 hover:text-white transition-colors mb-6">
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+        </svg>
+        Back to experiments
+      </button>
+
+      <h1 className="text-2xl font-bold text-white tracking-tight mb-8">New Experiment</h1>
+
+      <div className="max-w-3xl space-y-8">
+        {/* Basic Info */}
+        <Card title="Basic Information">
+          <div className="space-y-4">
+            <FormField label="Experiment Name" required>
+              <input
+                type="text"
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder="e.g. Price reduction test - Premium Line"
+                className="input-field"
+              />
+            </FormField>
+            <FormField label="Description">
+              <textarea
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+                rows={2}
+                placeholder="Brief description of the experiment..."
+                className="input-field 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">
+                  {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">
+                  {MARKETPLACE_OPTIONS.map(m => (
+                    <option key={m} value={m}>{m}</option>
+                  ))}
+                  <option value="All">All Markets</option>
+                </select>
+              </FormField>
+              <FormField label="Primary Metric">
+                <select value={primaryMetric} onChange={e => setPrimaryMetric(e.target.value as ExperimentMetric)} className="input-field">
+                  {METRIC_OPTIONS.map(m => (
+                    <option key={m.value} value={m.value}>{m.label}</option>
+                  ))}
+                </select>
+              </FormField>
+              <FormField label="Owner">
+                <input
+                  type="text"
+                  value={owner}
+                  onChange={e => setOwner(e.target.value)}
+                  placeholder="Your name"
+                  className="input-field"
+                />
+              </FormField>
+            </div>
+          </div>
+        </Card>
+
+        {/* Hypothesis */}
+        <Card title="Hypothesis">
+          <textarea
+            value={hypothesis}
+            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"
+          />
+        </Card>
+
+        {/* Change Annotations */}
+        <Card title="Changes Made">
+          <p className="text-xs text-slate-500 mb-4">Document exactly what you changed. This helps correlate results with specific actions.</p>
+          <div className="space-y-3">
+            {changes.map((c, i) => (
+              <div key={i} className="flex items-center gap-3">
+                <input
+                  type="text"
+                  value={c.field}
+                  onChange={e => updateChange(i, 'field', e.target.value)}
+                  placeholder="Field (e.g. Price)"
+                  className="input-field 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"
+                />
+                <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" />
+                </svg>
+                <input
+                  type="text"
+                  value={c.after_value}
+                  onChange={e => updateChange(i, 'after_value', e.target.value)}
+                  placeholder="After"
+                  className="input-field flex-1"
+                />
+                {changes.length > 1 && (
+                  <button onClick={() => removeChange(i)} className="p-1.5 text-slate-500 hover:text-red-400 transition-colors shrink-0">
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            ))}
+            <button onClick={addChange} className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1">
+              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+              </svg>
+              Add another change
+            </button>
+          </div>
+        </Card>
+
+        {/* Treatment ASINs */}
+        <Card title="Treatment ASINs">
+          <p className="text-xs text-slate-500 mb-3">
+            The products you're making changes to. Paste ASINs separated by commas, spaces, or newlines. Use LINE:ProductLine for entire product lines.
+          </p>
+          <textarea
+            value={treatmentAsins}
+            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"
+          />
+          {treatmentAsins && (
+            <div className="mt-2 text-xs text-slate-500">{parseAsins(treatmentAsins).length} ASINs detected</div>
+          )}
+        </Card>
+
+        {/* Control Group */}
+        <Card title="Control Group (Optional)">
+          <p className="text-xs text-slate-500 mb-3">
+            Similar products that you are NOT changing. This enables Difference-in-Differences analysis to isolate your change from market trends.
+          </p>
+          <textarea
+            value={controlAsins}
+            onChange={e => setControlAsins(e.target.value)}
+            rows={3}
+            placeholder="B09GHI9012, B09JKL3456"
+            className="input-field resize-y font-mono text-xs"
+          />
+          {controlAsins && (
+            <div className="mt-2 text-xs text-slate-500">{parseAsins(controlAsins).length} control ASINs detected</div>
+          )}
+        </Card>
+
+        {/* Timeline */}
+        <Card title="Timeline">
+          <div className="grid grid-cols-2 gap-4">
+            <FormField label="Start Date" required>
+              <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} className="input-field" />
+            </FormField>
+            <FormField label="End Date">
+              <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} className="input-field" />
+            </FormField>
+          </div>
+        </Card>
+
+        {/* Error + Submit */}
+        {error && (
+          <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
+            {error}
+          </div>
+        )}
+
+        <div className="flex items-center gap-3 pt-2">
+          <button
+            onClick={handleSubmit}
+            disabled={submitting}
+            className="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-lg font-medium text-sm transition-colors flex items-center gap-2"
+          >
+            {submitting && <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" />}
+            Create Experiment
+          </button>
+          <button onClick={onBack} className="px-4 py-2.5 text-slate-400 hover:text-white text-sm transition-colors">
+            Cancel
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+// ====================================================================
+// SHARED UI COMPONENTS
+// ====================================================================
+
+const StatCard: React.FC<{ label: string; value: string | number; accent: string }> = ({ label, value, accent }) => {
+  const colors: Record<string, string> = {
+    indigo: 'border-indigo-500/20 text-indigo-400',
+    emerald: 'border-emerald-500/20 text-emerald-400',
+    amber: 'border-amber-500/20 text-amber-400',
+    purple: 'border-purple-500/20 text-purple-400',
+  };
+  return (
+    <div className={`p-4 rounded-xl border bg-slate-900/40 ${colors[accent]}`}>
       <div className="text-2xl font-bold">{value}</div>
-      <div className="text-xs opacity-70 mt-1">{label}</div>
+      <div className="text-xs text-slate-500 mt-1">{label}</div>
     </div>
   );
 };
 
+const Card: React.FC<{ title: string; className?: string; children: React.ReactNode }> = ({ title, className = '', children }) => (
+  <div className={`bg-slate-900/50 border border-slate-800 rounded-xl p-5 ${className}`}>
+    <h3 className="text-sm font-medium text-slate-300 mb-4">{title}</h3>
+    {children}
+  </div>
+);
 
+const Th: React.FC<{ children: React.ReactNode; align?: 'left' | 'right' | 'center' }> = ({ children, align = 'left' }) => (
+  <th className={`text-${align} text-[11px] font-medium text-slate-500 uppercase tracking-wider px-4 py-3`}>{children}</th>
+);
+
+const FormField: React.FC<{ label: string; required?: boolean; children: React.ReactNode }> = ({ label, required, children }) => (
+  <div>
+    <label className="block text-xs font-medium text-slate-400 mb-1.5">
+      {label}{required && <span className="text-red-400 ml-0.5">*</span>}
+    </label>
+    {children}
+  </div>
+);
+
+const StatusBadge: React.FC<{ status: ExperimentStatus }> = ({ status }) => (
+  <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium border ${getExperimentStatusColor(status)}`}>
+    {status.charAt(0).toUpperCase() + status.slice(1)}
+  </span>
+);
+
+const TypeBadge: React.FC<{ type: ExperimentType }> = ({ type }) => (
+  <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium border ${getExperimentTypeColor(type)}`}>
+    <span>{getExperimentIcon(type)}</span>
+    {type.charAt(0).toUpperCase() + type.slice(1)}
+  </span>
+);
+
+const VerdictBadge: React.FC<{ verdict?: ExperimentVerdict; probability?: number }> = ({ verdict, probability }) => {
+  if (!verdict) return <span className="text-xs text-slate-600">—</span>;
+  return (
+    <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-semibold border ${getVerdictColor(verdict)}`}>
+      {verdict === 'winner' && <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />}
+      {verdict === 'loser' && <span className="w-1.5 h-1.5 rounded-full bg-red-400" />}
+      {verdict === 'inconclusive' && <span className="w-1.5 h-1.5 rounded-full bg-slate-400" />}
+      {getVerdictLabel(verdict)}
+      {probability != null && (
+        <span className="opacity-60">{Math.round(probability * 100)}%</span>
+      )}
+    </span>
+  );
+};
+
+const EmptyState: React.FC<{ onOpenCreate: () => void }> = ({ onOpenCreate }) => (
+  <div className="flex flex-col items-center justify-center py-16 text-center">
+    <div className="w-16 h-16 rounded-2xl bg-indigo-500/10 flex items-center justify-center mb-4">
+      <svg className="w-8 h-8 text-indigo-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
+      </svg>
+    </div>
+    <h3 className="text-lg font-semibold text-white mb-1">No experiments yet</h3>
+    <p className="text-sm text-slate-400 mb-6 max-w-sm">
+      Start measuring the real impact of your product changes with scientific rigor.
+    </p>
+    <button
+      onClick={onOpenCreate}
+      className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium transition-colors"
+    >
+      Create your first experiment
+    </button>
+  </div>
+);
 
 export default ExperimentsView;
diff --git a/services/experimentAnalysis.ts b/services/experimentAnalysis.ts
new file mode 100644
index 0000000..41bfbe4
--- /dev/null
+++ b/services/experimentAnalysis.ts
@@ -0,0 +1,342 @@
+import {
+  Experiment,
+  CombinedKPIs,
+  DifferenceInDifferencesResult,
+  DiDMetricResult,
+  ExperimentVerdict,
+} from '../types';
+import { getExperimentAsins } from './experiments';
+
+// ============ Math Helpers ============
+
+function erf(x: number): number {
+  const a1 = 0.254829592, a2 = -0.284496736, a3 = 1.421413741;
+  const a4 = -1.453152027, a5 = 1.061405429, p = 0.3275911;
+  const sign = x < 0 ? -1 : 1;
+  const abs = Math.abs(x);
+  const t = 1.0 / (1.0 + p * abs);
+  const y = 1.0 - (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-abs * abs);
+  return sign * y;
+}
+
+function normalCDF(x: number): number {
+  return 0.5 * (1 + erf(x / Math.sqrt(2)));
+}
+
+// ============ Weekly Metric Aggregation ============
+
+interface WeeklyMetrics {
+  week: string;      // "2025-W05"
+  timestamp: number;
+  units: number;
+  revenue: number;
+  sessions: number;  // glanceViews
+  cost: number;
+  clicks: number;
+  impressions: number;
+}
+
+interface ComputedWeeklyMetrics extends WeeklyMetrics {
+  cvr: number;
+  ctr: number;
+  roas: number;
+}
+
+function aggregateWeeklyMetrics(
+  asinSet: Set<string>,
+  salesData: CombinedKPIs[],
+  marketplace: string
+): ComputedWeeklyMetrics[] {
+  const weeklyMap = new Map<string, WeeklyMetrics>();
+
+  for (const r of salesData) {
+    const asin = (r.asin || '').toUpperCase();
+    if (!asinSet.has(asin)) continue;
+
+    const mkt = (r.marketplace || (r as any).customer || '').toLowerCase();
+    if (marketplace && marketplace !== 'All' && !mkt.includes(marketplace.toLowerCase())) continue;
+
+    const weekNum = r.week || 1;
+    const year = r.year || new Date().getFullYear();
+    const key = `${year}-W${String(weekNum).padStart(2, '0')}`;
+
+    if (!weeklyMap.has(key)) {
+      const d = new Date(year, 0, 1 + (weekNum - 1) * 7);
+      weeklyMap.set(key, {
+        week: key,
+        timestamp: d.getTime(),
+        units: 0,
+        revenue: 0,
+        sessions: 0,
+        cost: 0,
+        clicks: 0,
+        impressions: 0,
+      });
+    }
+
+    const w = weeklyMap.get(key)!;
+    w.units += r.unitsTotal ?? (r as any).units ?? 0;
+    w.revenue += r.salesTotal ?? (r as any).sellOut ?? 0;
+    w.sessions += r.glanceViews || 0;
+    w.cost += r.cost || 0;
+    w.clicks += r.clicks || 0;
+    w.impressions += r.impressions || 0;
+  }
+
+  return Array.from(weeklyMap.values())
+    .sort((a, b) => a.timestamp - b.timestamp)
+    .map(w => ({
+      ...w,
+      cvr: w.sessions > 0 ? (w.units / w.sessions) * 100 : 0,
+      ctr: w.impressions > 0 ? (w.clicks / w.impressions) * 100 : 0,
+      roas: w.cost > 0 ? w.revenue / w.cost : 0,
+    }));
+}
+
+function getMetricValue(w: ComputedWeeklyMetrics, metric: string): number {
+  switch (metric) {
+    case 'units': return w.units;
+    case 'sessions': return w.sessions;
+    case 'cvr': return w.cvr;
+    case 'ctr': return w.ctr;
+    case 'roas': return w.roas;
+    case 'revenue': return w.revenue;
+    case 'acos': return w.cost > 0 && w.revenue > 0 ? (w.cost / w.revenue) * 100 : 0;
+    default: return w.units;
+  }
+}
+
+// ============ DiD Computation ============
+
+function parseLocalDate(dateStr?: string): Date {
+  if (!dateStr) return new Date();
+  const [y, m, d] = dateStr.split('T')[0].split('-');
+  return new Date(Number(y), Number(m) - 1, Number(d));
+}
+
+function splitPeriods(
+  data: ComputedWeeklyMetrics[],
+  startTs: number,
+  endTs: number,
+  beforeStartTs: number
+): { before: ComputedWeeklyMetrics[]; after: ComputedWeeklyMetrics[] } {
+  const before: ComputedWeeklyMetrics[] = [];
+  const after: ComputedWeeklyMetrics[] = [];
+
+  for (const w of data) {
+    if (w.timestamp >= beforeStartTs && w.timestamp < startTs) {
+      before.push(w);
+    } else if (w.timestamp >= startTs && w.timestamp <= endTs) {
+      after.push(w);
+    }
+  }
+
+  return { before, after };
+}
+
+function avgMetric(data: ComputedWeeklyMetrics[], metric: string): number {
+  if (data.length === 0) return 0;
+  const sum = data.reduce((s, w) => s + getMetricValue(w, metric), 0);
+  return sum / data.length;
+}
+
+const METRICS = ['units', 'sessions', 'cvr', 'ctr', 'roas', 'revenue', 'acos'];
+const LOWER_IS_BETTER = new Set(['acos']);
+
+function computeMetricDiD(
+  treatmentBefore: ComputedWeeklyMetrics[],
+  treatmentAfter: ComputedWeeklyMetrics[],
+  controlBefore: ComputedWeeklyMetrics[],
+  controlAfter: ComputedWeeklyMetrics[],
+  metric: string,
+  hasControlGroup: boolean
+): DiDMetricResult {
+  const tBefore = avgMetric(treatmentBefore, metric);
+  const tAfter = avgMetric(treatmentAfter, metric);
+  const cBefore = hasControlGroup ? avgMetric(controlBefore, metric) : 0;
+  const cAfter = hasControlGroup ? avgMetric(controlAfter, metric) : 0;
+
+  let didEstimate: number;
+  if (hasControlGroup) {
+    didEstimate = (tAfter - tBefore) - (cAfter - cBefore);
+  } else {
+    didEstimate = tAfter - tBefore;
+  }
+
+  // For ACOS, lower is better — invert the estimate
+  if (LOWER_IS_BETTER.has(metric)) {
+    didEstimate = -didEstimate;
+  }
+
+  const liftPercent = tBefore !== 0 ? (didEstimate / Math.abs(tBefore)) * 100 : 0;
+
+  // Bayesian posterior probability
+  const weeklyDiffs: number[] = [];
+  const minLen = Math.min(treatmentAfter.length, hasControlGroup ? controlAfter.length : treatmentAfter.length);
+
+  for (let i = 0; i < minLen; i++) {
+    const tVal = getMetricValue(treatmentAfter[i], metric);
+    let diff: number;
+    if (hasControlGroup && controlAfter[i]) {
+      const cVal = getMetricValue(controlAfter[i], metric);
+      diff = (tVal - tBefore) - (cVal - cBefore);
+    } else {
+      diff = tVal - tBefore;
+    }
+    if (LOWER_IS_BETTER.has(metric)) diff = -diff;
+    weeklyDiffs.push(diff);
+  }
+
+  let posteriorProb = 0.5;
+  if (weeklyDiffs.length >= 3) {
+    const mean = weeklyDiffs.reduce((s, v) => s + v, 0) / weeklyDiffs.length;
+    const variance = weeklyDiffs.reduce((s, v) => s + (v - mean) ** 2, 0) / (weeklyDiffs.length - 1);
+    const se = Math.sqrt(variance / weeklyDiffs.length);
+    if (se > 0) {
+      posteriorProb = normalCDF(mean / se);
+    } else {
+      posteriorProb = mean > 0 ? 1 : mean < 0 ? 0 : 0.5;
+    }
+  }
+
+  return {
+    treatment_before: Math.round(tBefore * 100) / 100,
+    treatment_after: Math.round(tAfter * 100) / 100,
+    control_before: Math.round(cBefore * 100) / 100,
+    control_after: Math.round(cAfter * 100) / 100,
+    did_estimate: Math.round(didEstimate * 100) / 100,
+    lift_percent: Math.round(liftPercent * 10) / 10,
+    posterior_prob_positive: Math.round(posteriorProb * 1000) / 1000,
+  };
+}
+
+export function computeDiD(
+  experiment: Experiment,
+  salesData: CombinedKPIs[]
+): DifferenceInDifferencesResult {
+  const startDate = parseLocalDate(experiment.start_date);
+  const endDate = experiment.end_date ? parseLocalDate(experiment.end_date) : new Date();
+  const durationMs = endDate.getTime() - startDate.getTime();
+  const beforeStart = new Date(startDate.getTime() - durationMs);
+
+  const treatmentAsinSet = getExperimentAsins(experiment.asins || [], salesData);
+  const treatmentWeekly = aggregateWeeklyMetrics(treatmentAsinSet, salesData, experiment.marketplace);
+
+  const hasControlGroup = (experiment.control_asins || []).length > 0;
+  let controlWeekly: ComputedWeeklyMetrics[] = [];
+  if (hasControlGroup) {
+    const controlAsinSet = getExperimentAsins(experiment.control_asins, salesData);
+    controlWeekly = aggregateWeeklyMetrics(controlAsinSet, salesData, experiment.marketplace);
+  }
+
+  const startTs = startDate.getTime();
+  const endTs = endDate.getTime();
+  const beforeStartTs = beforeStart.getTime();
+
+  const tSplit = splitPeriods(treatmentWeekly, startTs, endTs, beforeStartTs);
+  const cSplit = hasControlGroup
+    ? splitPeriods(controlWeekly, startTs, endTs, beforeStartTs)
+    : { before: [] as ComputedWeeklyMetrics[], after: [] as ComputedWeeklyMetrics[] };
+
+  const metrics: Record<string, DiDMetricResult> = {};
+  for (const metric of METRICS) {
+    metrics[metric] = computeMetricDiD(
+      tSplit.before, tSplit.after,
+      cSplit.before, cSplit.after,
+      metric, hasControlGroup
+    );
+  }
+
+  return {
+    metrics,
+    computed_at: new Date().toISOString(),
+  };
+}
+
+// ============ Verdict ============
+
+export function computeVerdict(
+  didResult: DifferenceInDifferencesResult,
+  primaryMetric: string
+): { verdict: ExperimentVerdict; probability: number } {
+  const result = didResult.metrics[primaryMetric];
+  if (!result) return { verdict: 'inconclusive', probability: 0.5 };
+
+  const prob = result.posterior_prob_positive;
+
+  if (prob >= 0.90) return { verdict: 'winner', probability: prob };
+  if (prob <= 0.10) return { verdict: 'loser', probability: prob };
+  return { verdict: 'inconclusive', probability: prob };
+}
+
+// ============ Counterfactual Time Series ============
+
+export interface TrendDataPoint {
+  week: string;
+  timestamp: number;
+  actual: number;
+  counterfactual: number;
+}
+
+export function buildCounterfactualSeries(
+  experiment: Experiment,
+  salesData: CombinedKPIs[],
+  metric: string
+): TrendDataPoint[] {
+  const startDate = parseLocalDate(experiment.start_date);
+  const endDate = experiment.end_date ? parseLocalDate(experiment.end_date) : new Date();
+  const durationMs = endDate.getTime() - startDate.getTime();
+  const beforeStart = new Date(startDate.getTime() - durationMs);
+
+  const treatmentAsinSet = getExperimentAsins(experiment.asins || [], salesData);
+  const treatmentWeekly = aggregateWeeklyMetrics(treatmentAsinSet, salesData, experiment.marketplace);
+
+  const hasControlGroup = (experiment.control_asins || []).length > 0;
+
+  if (!hasControlGroup) {
+    // Without control group, counterfactual = flat line at pre-treatment average
+    const startTs = startDate.getTime();
+    const beforeStartTs = beforeStart.getTime();
+    const beforeData = treatmentWeekly.filter(w => w.timestamp >= beforeStartTs && w.timestamp < startTs);
+    const preAvg = avgMetric(beforeData, metric);
+
+    return treatmentWeekly.map(w => ({
+      week: w.week,
+      timestamp: w.timestamp,
+      actual: Math.round(getMetricValue(w, metric) * 100) / 100,
+      counterfactual: Math.round(preAvg * 100) / 100,
+    }));
+  }
+
+  const controlAsinSet = getExperimentAsins(experiment.control_asins, salesData);
+  const controlWeekly = aggregateWeeklyMetrics(controlAsinSet, salesData, experiment.marketplace);
+
+  const startTs = startDate.getTime();
+  const beforeStartTs = beforeStart.getTime();
+
+  const tBeforeData = treatmentWeekly.filter(w => w.timestamp >= beforeStartTs && w.timestamp < startTs);
+  const cBeforeData = controlWeekly.filter(w => w.timestamp >= beforeStartTs && w.timestamp < startTs);
+
+  const tPreAvg = avgMetric(tBeforeData, metric);
+  const cPreAvg = avgMetric(cBeforeData, metric);
+
+  // Build a map of control weekly values
+  const controlMap = new Map<string, number>();
+  for (const w of controlWeekly) {
+    controlMap.set(w.week, getMetricValue(w, metric));
+  }
+
+  return treatmentWeekly.map(w => {
+    const actual = getMetricValue(w, metric);
+    const controlVal = controlMap.get(w.week) ?? cPreAvg;
+    // Counterfactual: treatment pre-avg + (control current - control pre-avg)
+    const counterfactual = tPreAvg + (controlVal - cPreAvg);
+
+    return {
+      week: w.week,
+      timestamp: w.timestamp,
+      actual: Math.round(actual * 100) / 100,
+      counterfactual: Math.round(counterfactual * 100) / 100,
+    };
+  });
+}
diff --git a/services/experiments.ts b/services/experiments.ts
index 4cd1896..0fe10d1 100644
--- a/services/experiments.ts
+++ b/services/experiments.ts
@@ -5,12 +5,13 @@ import {
   ActiveExperiment,
   ExperimentType,
   ExperimentStatus,
+  ExperimentVerdict,
+  CombinedKPIs,
 } from '../types';
-import { CombinedKPIs } from '../types';
 
 const API_BASE = '/api/experiments';
 
-// ============ Helper Functions ============
+// ============ ASIN Resolution ============
 
 export const getExperimentAsins = (experimentAsins: string[], salesData: CombinedKPIs[]): Set<string> => {
   const explicitAsins = new Set<string>();
@@ -59,27 +60,22 @@ export const updateExperiment = async (
   id: string,
   updates: Partial<Experiment>
 ): Promise<Experiment> => {
-  try {
-    const response = await fetch(`${API_BASE}?id=${id}`, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(updates),
-    });
+  const response = await fetch(`${API_BASE}?id=${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(updates),
+  });
 
-    if (!response.ok) {
-      let errText = await response.text();
-      try {
-        const errJson = JSON.parse(errText);
-        errText = errJson.error || errText;
-      } catch (e) { }
-      throw new Error(errText);
-    }
-
-    return response.json();
-  } catch (err: any) {
-    console.error('API Error in updateExperiment:', err);
-    throw err;
+  if (!response.ok) {
+    let errText = await response.text();
+    try {
+      const errJson = JSON.parse(errText);
+      errText = errJson.error || errText;
+    } catch (e) { }
+    throw new Error(errText);
   }
+
+  return response.json();
 };
 
 export const deleteExperiment = async (id: string): Promise<void> => {
@@ -95,9 +91,7 @@ export const deleteExperiment = async (id: string): Promise<void> => {
 
 export const getExperiment = async (id: string): Promise<Experiment | null> => {
   const response = await fetch(`${API_BASE}?id=${id}`);
-
   if (!response.ok) return null;
-
   return response.json();
 };
 
@@ -141,7 +135,6 @@ export const listExperiments = async (
 
   const data = await response.json();
 
-  // Transform to ExperimentListItem
   return data.map((exp: any) => {
     const today = new Date();
     const startDate = new Date(exp.start_date);
@@ -161,11 +154,14 @@ export const listExperiments = async (
       status: exp.status,
       asin_count: exp.asins?.length || 0,
       asins: exp.asins || [],
+      control_asin_count: exp.control_asins?.length || 0,
       marketplace: exp.marketplace,
       start_date: exp.start_date,
       end_date: exp.end_date,
       progress_percent: Math.round(progressPercent),
       primary_metric: exp.primary_metric,
+      verdict: exp.verdict,
+      verdict_probability: exp.verdict_probability,
       actual_lift_percent: exp.actual_lift_percent,
       owner: exp.owner,
     };
@@ -185,7 +181,6 @@ export const getActiveExperiments = async (
   const data = await response.json();
   const today = new Date().toISOString().split('T')[0];
 
-  // Filter experiments that are currently active
   const activeExperiments = data.filter((exp: any) =>
     exp.status === 'active' &&
     exp.start_date <= today &&
@@ -203,7 +198,7 @@ export const getActiveExperiments = async (
       : undefined;
 
     const activeExp: ActiveExperiment = {
-      asin: '', // placeholder
+      asin: '',
       experiment_id: exp.id,
       experiment_name: exp.name,
       type: exp.type,
@@ -223,120 +218,7 @@ export const getActiveExperiments = async (
   return map;
 };
 
-// ============ Performance Calculations ============
-
-export const calculateExperimentPerformance = async (
-  experiment: Experiment,
-  salesData: CombinedKPIs[]
-): Promise<{
-  baseline_units: number;
-  baseline_revenue: number;
-  baseline_gv: number;
-  baseline_cvr: number;
-  baseline_acos: number;
-  experiment_units: number;
-  experiment_revenue: number;
-  experiment_gv: number;
-  experiment_cvr: number;
-  experiment_acos: number;
-  actual_lift_percent: number;
-}> => {
-  const parseLocalDate = (dateStr?: string) => {
-    if (!dateStr) return new Date();
-    const [y, m, d] = dateStr.split('T')[0].split('-');
-    return new Date(Number(y), Number(m) - 1, Number(d));
-  };
-
-  const startDate = parseLocalDate(experiment.start_date);
-  const endDate = experiment.end_date ? parseLocalDate(experiment.end_date) : new Date();
-
-  // Calculate baseline period (same duration before experiment)
-  const durationMs = endDate.getTime() - startDate.getTime();
-  const baselineStart = new Date(startDate.getTime() - durationMs);
-  const baselineEnd = startDate;
-
-  // Filter sales data for experiment ASINs
-  const asinSet = getExperimentAsins(experiment.asins, salesData);
-
-  const baselineData = salesData.filter(r => {
-    const recordDate = new Date(r.year, 0, 1 + (r.week - 1) * 7);
-    const mkt = (r.marketplace || (r as any).customer || '').toLowerCase();
-    const isMarket = !experiment.marketplace || experiment.marketplace === 'All' || mkt.includes(experiment.marketplace.toLowerCase());
-    return isMarket && asinSet.has(r.asin.toUpperCase()) &&
-      recordDate >= baselineStart && recordDate < baselineEnd;
-  });
-
-  const experimentData = salesData.filter(r => {
-    const recordDate = new Date(r.year, 0, 1 + (r.week - 1) * 7);
-    const mkt = (r.marketplace || (r as any).customer || '').toLowerCase();
-    const isMarket = !experiment.marketplace || experiment.marketplace === 'All' || mkt.includes(experiment.marketplace.toLowerCase());
-    return isMarket && asinSet.has(r.asin.toUpperCase()) &&
-      recordDate >= startDate && recordDate <= endDate;
-  });
-
-  const baseline_units = baselineData.reduce((sum, r) => sum + (r.unitsTotal ?? (r as any).units ?? 0), 0);
-  const baseline_revenue = baselineData.reduce((sum, r) => sum + (r.salesTotal ?? (r as any).sellOut ?? 0), 0);
-  const baseline_gv = baselineData.reduce((sum, r) => sum + (r.glanceViews || 0), 0);
-  const baseline_cvr = baseline_gv > 0 ? (baseline_units / baseline_gv) * 100 : 0;
-  const baseline_spend = baselineData.reduce((sum, r) => sum + (r.cost || 0), 0);
-  const baseline_acos = baseline_revenue > 0 ? (baseline_spend / baseline_revenue) * 100 : 0;
-
-  const experiment_units = experimentData.reduce((sum, r) => sum + (r.unitsTotal ?? (r as any).units ?? 0), 0);
-  const experiment_revenue = experimentData.reduce((sum, r) => sum + (r.salesTotal ?? (r as any).sellOut ?? 0), 0);
-  const experiment_gv = experimentData.reduce((sum, r) => sum + (r.glanceViews || 0), 0);
-  const experiment_cvr = experiment_gv > 0 ? (experiment_units / experiment_gv) * 100 : 0;
-  const experiment_spend = experimentData.reduce((sum, r) => sum + (r.cost || 0), 0);
-  const experiment_acos = experiment_revenue > 0 ? (experiment_spend / experiment_revenue) * 100 : 0;
-
-  let actual_lift_percent = 0;
-  if (experiment.primary_metric === 'cvr' && baseline_cvr > 0) {
-    actual_lift_percent = ((experiment_cvr - baseline_cvr) / baseline_cvr) * 100;
-  } else if (experiment.primary_metric === 'revenue' && baseline_revenue > 0) {
-    actual_lift_percent = ((experiment_revenue - baseline_revenue) / baseline_revenue) * 100;
-  } else if (experiment.primary_metric === 'acos' && baseline_acos > 0) {
-    actual_lift_percent = ((baseline_acos - experiment_acos) / Math.max(0.1, baseline_acos)) * 100; // inverted, lower is better
-  } else if (baseline_units > 0) {
-    actual_lift_percent = ((experiment_units - baseline_units) / baseline_units) * 100;
-  }
-
-  return {
-    baseline_units,
-    baseline_revenue,
-    baseline_gv,
-    baseline_cvr: Math.round(baseline_cvr * 10) / 10,
-    baseline_acos: Math.round(baseline_acos * 10) / 10,
-    experiment_units,
-    experiment_revenue,
-    experiment_gv,
-    experiment_cvr: Math.round(experiment_cvr * 10) / 10,
-    experiment_acos: Math.round(experiment_acos * 10) / 10,
-    actual_lift_percent: Math.round(actual_lift_percent * 10) / 10,
-  };
-};
-
-export const updateExperimentResults = async (
-  experimentId: string,
-  salesData: CombinedKPIs[]
-): Promise<Experiment> => {
-  const experiment = await getExperiment(experimentId);
-  if (!experiment) throw new Error('Experiment not found');
-
-  const performance = await calculateExperimentPerformance(experiment, salesData);
-
-  return updateExperiment(experimentId, {
-    ...performance,
-  });
-};
-
-// ============ Helper Functions ============
-
-function getMonthNumber(monthStr: string): number {
-  const months: Record<string, number> = {
-    'Jan': 1, 'Feb': 2, 'Mar': 3, 'Apr': 4, 'May': 5, 'Jun': 6,
-    'Jul': 7, 'Aug': 8, 'Sep': 9, 'Oct': 10, 'Nov': 11, 'Dec': 12
-  };
-  return months[monthStr.split('-')[0]] || 1;
-}
+// ============ Display Helpers ============
 
 export const getExperimentStatusColor = (status: ExperimentStatus): string => {
   switch (status) {
@@ -354,6 +236,7 @@ export const getExperimentTypeColor = (type: ExperimentType): string => {
     case 'advertising': return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
     case 'content': return 'bg-pink-500/20 text-pink-400 border-pink-500/30';
     case 'promotion': return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
+    case 'seo': return 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30';
     default: return 'bg-slate-500/20 text-slate-400';
   }
 };
@@ -364,6 +247,50 @@ export const getExperimentIcon = (type: ExperimentType): string => {
     case 'advertising': return '📢';
     case 'content': return '📝';
     case 'promotion': return '🏷️';
+    case 'seo': return '🔍';
     default: return '🧪';
   }
 };
+
+export const getVerdictColor = (verdict?: ExperimentVerdict): string => {
+  switch (verdict) {
+    case 'winner': return 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30';
+    case 'loser': return 'bg-red-500/15 text-red-400 border-red-500/30';
+    case 'inconclusive': return 'bg-slate-500/15 text-slate-400 border-slate-500/30';
+    default: return 'bg-slate-800/50 text-slate-500 border-slate-700';
+  }
+};
+
+export const getVerdictLabel = (verdict?: ExperimentVerdict): string => {
+  switch (verdict) {
+    case 'winner': return 'Winner';
+    case 'loser': return 'Loser';
+    case 'inconclusive': return 'Inconclusive';
+    default: return 'Pending';
+  }
+};
+
+export const METRIC_LABELS: Record<string, string> = {
+  units: 'Units Sold',
+  sessions: 'Sessions',
+  cvr: 'Conversion Rate',
+  ctr: 'Click-Through Rate',
+  roas: 'ROAS',
+  revenue: 'Revenue',
+  acos: 'ACOS',
+};
+
+export const formatMetricValue = (value: number, metric: string): string => {
+  switch (metric) {
+    case 'cvr':
+    case 'ctr':
+    case 'acos':
+      return `${value.toFixed(1)}%`;
+    case 'roas':
+      return `${value.toFixed(2)}x`;
+    case 'revenue':
+      return `€${value.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`;
+    default:
+      return value.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
+  }
+};
diff --git a/types.ts b/types.ts
index 45d1426..35f5be3 100644
--- a/types.ts
+++ b/types.ts
@@ -281,9 +281,31 @@ export interface VendorCSVRow {
 }
 
 // Experiment Tracking Types
-export type ExperimentType = 'pricing' | 'advertising' | 'content' | 'promotion';
+export type ExperimentType = 'pricing' | 'advertising' | 'content' | 'promotion' | 'seo';
 export type ExperimentStatus = 'planned' | 'active' | 'completed' | 'paused';
-export type ExperimentMetric = 'units' | 'revenue' | 'acos' | 'ctr' | 'cvr' | 'bsr';
+export type ExperimentMetric = 'units' | 'sessions' | 'cvr' | 'ctr' | 'roas' | 'revenue' | 'acos';
+export type ExperimentVerdict = 'winner' | 'loser' | 'inconclusive';
+
+export interface ExperimentChangeAnnotation {
+  field: string;
+  before_value: string;
+  after_value: string;
+}
+
+export interface DiDMetricResult {
+  treatment_before: number;
+  treatment_after: number;
+  control_before: number;
+  control_after: number;
+  did_estimate: number;
+  lift_percent: number;
+  posterior_prob_positive: number;
+}
+
+export interface DifferenceInDifferencesResult {
+  metrics: Record<string, DiDMetricResult>;
+  computed_at: string;
+}
 
 export interface Experiment {
   id: string;
@@ -292,6 +314,7 @@ export interface Experiment {
   type: ExperimentType;
   status: ExperimentStatus;
   asins: string[];
+  control_asins: string[];
   marketplace: string;
   start_date: string;
   end_date?: string;
@@ -300,23 +323,27 @@ export interface Experiment {
   hypothesis?: string;
   primary_metric: ExperimentMetric;
   target_lift_percent?: number;
+  changes: ExperimentChangeAnnotation[];
 
-  // Results
+  // Legacy results (kept for backward compat)
   baseline_units?: number;
   baseline_revenue?: number;
   baseline_gv?: number;
   baseline_cvr?: number;
   baseline_acos?: number;
-
   experiment_units?: number;
   experiment_revenue?: number;
   experiment_gv?: number;
   experiment_cvr?: number;
   experiment_acos?: number;
-
   actual_lift_percent?: number;
   statistical_significance?: number;
 
+  // DiD results
+  did_results?: DifferenceInDifferencesResult;
+  verdict?: ExperimentVerdict;
+  verdict_probability?: number;
+
   learnings?: string;
   owner?: string;
 }
@@ -326,12 +353,14 @@ export interface ExperimentCreateInput {
   description?: string;
   type: ExperimentType;
   asins: string[];
+  control_asins: string[];
   marketplace: string;
   start_date: string;
   end_date?: string;
   hypothesis?: string;
   primary_metric: ExperimentMetric;
   target_lift_percent?: number;
+  changes: ExperimentChangeAnnotation[];
   owner?: string;
 }
 
@@ -342,11 +371,14 @@ export interface ExperimentListItem {
   status: ExperimentStatus;
   asin_count: number;
   asins: string[];
+  control_asin_count: number;
   marketplace: string;
   start_date: string;
   end_date?: string;
   progress_percent: number;
   primary_metric: ExperimentMetric;
+  verdict?: ExperimentVerdict;
+  verdict_probability?: number;
   actual_lift_percent?: number;
   owner?: string;
 }