diff --git a/frontend/common/services/useExperiment.ts b/frontend/common/services/useExperiment.ts
new file mode 100644
index 000000000000..9c0536d99d76
--- /dev/null
+++ b/frontend/common/services/useExperiment.ts
@@ -0,0 +1,30 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const experimentService = service
+  .enhanceEndpoints({ addTagTypes: ['Experiment'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      createExperiment: builder.mutation<
+        Res['experiment'],
+        Req['createExperiment']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'Experiment' }],
+        query: ({ body, environmentId }) => ({
+          body,
+          method: 'POST',
+          url: `environments/${environmentId}/experiments/`,
+        }),
+      }),
+      getExperiments: builder.query<Res['experiments'], Req['getExperiments']>({
+        providesTags: [{ id: 'LIST', type: 'Experiment' }],
+        query: ({ environmentId }) => ({
+          url: `environments/${environmentId}/experiments/`,
+        }),
+      }),
+    }),
+  })
+
+export const { useCreateExperimentMutation, useGetExperimentsQuery } =
+  experimentService
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
index 7dd713129e41..0677227f4702 100644
--- a/frontend/common/types/requests.ts
+++ b/frontend/common/types/requests.ts
@@ -984,5 +984,10 @@ export type Req = {
     name?: string
     config?: Record<string, string>
   }
+  getExperiments: { environmentId: string }
+  createExperiment: {
+    environmentId: string
+    body: { name: string; hypothesis: string; feature: number }
+  }
   // END OF TYPES
 }
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index b3edece5bd24..66cd73e331f7 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -571,6 +571,20 @@ export type MultivariateOption = {
 
 export type FeatureType = 'STANDARD' | 'MULTIVARIATE'
 
+export type ExperimentStatus = 'created' | 'running' | 'paused' | 'completed'
+
+export type Experiment = {
+  id: number
+  name: string
+  hypothesis: string
+  feature: number
+  status: ExperimentStatus
+  created_at: string
+  updated_at: string
+  started_at: string | null
+  ended_at: string | null
+}
+
 export enum TagStrategy {
   INTERSECTION = 'INTERSECTION',
   UNION = 'UNION',
@@ -1343,5 +1357,7 @@ export type Res = {
   gitlabIssues: PagedResponse<GitLabIssue>
   gitlabMergeRequests: PagedResponse<GitLabMergeRequest>
   warehouseConnections: WarehouseConnection[]
+  experiments: Experiment[]
+  experiment: Experiment
   // END OF TYPES
 }
diff --git a/frontend/web/components/base/grid/ContentCard.scss b/frontend/web/components/base/grid/ContentCard.scss
new file mode 100644
index 000000000000..02c4467acae0
--- /dev/null
+++ b/frontend/web/components/base/grid/ContentCard.scss
@@ -0,0 +1,22 @@
+.content-card {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    font-size: var(--font-body-size, 0.875rem);
+    font-weight: var(--font-weight-bold, 700);
+    color: var(--color-text-default);
+    margin: 0;
+  }
+}
diff --git a/frontend/web/components/base/grid/ContentCard.tsx b/frontend/web/components/base/grid/ContentCard.tsx
new file mode 100644
index 000000000000..2cb5136a3f88
--- /dev/null
+++ b/frontend/web/components/base/grid/ContentCard.tsx
@@ -0,0 +1,31 @@
+import { FC, ReactNode } from 'react'
+import cn from 'classnames'
+import './ContentCard.scss'
+
+type ContentCardProps = {
+  title?: string
+  action?: ReactNode
+  className?: string
+  children: ReactNode
+}
+
+const ContentCard: FC<ContentCardProps> = ({
+  action,
+  children,
+  className,
+  title,
+}) => {
+  return (
+    <div className={cn('content-card', className)}>
+      {(title || action) && (
+        <div className='content-card__header'>
+          {title && <h3 className='content-card__title'>{title}</h3>}
+          {action}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export default ContentCard
diff --git a/frontend/web/components/experiments/CreateExperimentWizard.tsx b/frontend/web/components/experiments/CreateExperimentWizard.tsx
new file mode 100644
index 000000000000..040be0fc5cd6
--- /dev/null
+++ b/frontend/web/components/experiments/CreateExperimentWizard.tsx
@@ -0,0 +1,168 @@
+import { FC, useCallback, useMemo, useState } from 'react'
+import { ProjectFlag } from 'common/types/responses'
+import { useCreateExperimentMutation } from 'common/services/useExperiment'
+import WizardStepper from './WizardStepper'
+import WizardNavButtons from './WizardNavButtons'
+import LivePreviewPanel from './LivePreviewPanel'
+import SetupStep from './steps/SetupStep'
+import AudienceStep from './steps/AudienceStep'
+import MeasurementStep from './steps/MeasurementStep'
+import ReviewStep from './steps/ReviewStep'
+
+const TOTAL_STEPS = 4
+
+type CreateExperimentWizardProps = {
+  environmentId: string
+  projectId: number
+  onCreated: () => void
+}
+
+const CreateExperimentWizard: FC<CreateExperimentWizardProps> = ({
+  environmentId,
+  onCreated,
+  projectId,
+}) => {
+  const [currentStep, setCurrentStep] = useState(0)
+  const [name, setName] = useState('')
+  const [hypothesis, setHypothesis] = useState('')
+  const [selectedFeature, setSelectedFeature] = useState<ProjectFlag | null>(
+    null,
+  )
+  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
+
+  const [createExperiment, { isLoading: isSubmitting }] =
+    useCreateExperimentMutation()
+
+  const isStep1Valid = useMemo(
+    () =>
+      name.trim().length > 0 &&
+      hypothesis.trim().length > 0 &&
+      selectedFeature !== null,
+    [name, hypothesis, selectedFeature],
+  )
+
+  const canContinue = currentStep === 0 ? isStep1Valid : true
+
+  const handleContinue = useCallback(() => {
+    if (currentStep < TOTAL_STEPS - 1) {
+      setCompletedSteps((prev) => new Set(prev).add(currentStep))
+      setCurrentStep(currentStep + 1)
+    }
+  }, [currentStep])
+
+  const handleBack = useCallback(() => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1)
+    }
+  }, [currentStep])
+
+  const handleStepClick = useCallback(
+    (step: number) => {
+      if (completedSteps.has(step) || step < currentStep) {
+        setCurrentStep(step)
+      }
+    },
+    [completedSteps, currentStep],
+  )
+
+  const doCreate = useCallback(async () => {
+    if (!selectedFeature) return
+    try {
+      await createExperiment({
+        body: {
+          feature: selectedFeature.id,
+          hypothesis: hypothesis.trim(),
+          name: name.trim(),
+        },
+        environmentId,
+      }).unwrap()
+      toast('Experiment created successfully')
+      onCreated()
+    } catch {
+      toast('Failed to create experiment', 'danger')
+    }
+  }, [
+    createExperiment,
+    environmentId,
+    hypothesis,
+    name,
+    onCreated,
+    selectedFeature,
+  ])
+
+  const handleLaunch = useCallback(() => {
+    if (!selectedFeature) return
+    openConfirm({
+      body: (
+        <span>
+          This will start serving variations of{' '}
+          <strong>{selectedFeature.name}</strong> to{' '}
+          <strong>100% of all users in the environment</strong>. You can pause
+          or stop the experiment at any time.
+        </span>
+      ),
+      noText: 'Cancel',
+      onYes: doCreate,
+      title: 'Create experiment?',
+      yesText: 'Create',
+    })
+  }, [selectedFeature, doCreate])
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case 0:
+        return (
+          <SetupStep
+            name={name}
+            hypothesis={hypothesis}
+            selectedFeature={selectedFeature}
+            projectId={projectId}
+            environmentId={environmentId}
+            onNameChange={setName}
+            onHypothesisChange={setHypothesis}
+            onFeatureSelect={setSelectedFeature}
+          />
+        )
+      case 1:
+        return <AudienceStep />
+      case 2:
+        return <MeasurementStep />
+      case 3:
+        return (
+          <ReviewStep
+            name={name}
+            hypothesis={hypothesis}
+            selectedFeature={selectedFeature}
+            onEditSetup={() => setCurrentStep(0)}
+          />
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className='d-flex gap-4'>
+      <WizardStepper
+        currentStep={currentStep}
+        completedSteps={completedSteps}
+        onStepClick={handleStepClick}
+      />
+      <div className='flex-fill' style={{ minWidth: 0 }}>
+        {renderStep()}
+        <WizardNavButtons
+          currentStep={currentStep}
+          totalSteps={TOTAL_STEPS}
+          canContinue={canContinue}
+          isSubmitting={isSubmitting}
+          onBack={handleBack}
+          onContinue={handleContinue}
+          onLaunch={handleLaunch}
+        />
+      </div>
+      <LivePreviewPanel />
+    </div>
+  )
+}
+
+export default CreateExperimentWizard
diff --git a/frontend/web/components/experiments/LivePreviewPanel.tsx b/frontend/web/components/experiments/LivePreviewPanel.tsx
new file mode 100644
index 000000000000..27fc768e3bdb
--- /dev/null
+++ b/frontend/web/components/experiments/LivePreviewPanel.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react'
+import ContentCard from 'components/base/grid/ContentCard'
+
+const LivePreviewPanel: FC = () => {
+  return (
+    <div className='d-none d-xl-block' style={{ flexShrink: 0, width: 320 }}>
+      <ContentCard title='Live Preview'>
+        <p className='text-muted mb-0' style={{ fontSize: 13 }}>
+          Coming soon
+        </p>
+      </ContentCard>
+    </div>
+  )
+}
+
+export default LivePreviewPanel
diff --git a/frontend/web/components/experiments/VariationTable.scss b/frontend/web/components/experiments/VariationTable.scss
new file mode 100644
index 000000000000..536b7d559352
--- /dev/null
+++ b/frontend/web/components/experiments/VariationTable.scss
@@ -0,0 +1,101 @@
+.variation-table {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+
+  &__head {
+    display: flex;
+    padding: 12px 20px;
+    background: var(--color-surface-muted);
+    gap: 16px;
+  }
+
+  &__th {
+    font-size: var(--font-caption-size);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+
+    &--name,
+    &--desc {
+      flex: 1;
+    }
+
+    &--value {
+      width: 100px;
+    }
+  }
+
+  &__row {
+    display: flex;
+    padding: 16px 20px;
+    gap: 16px;
+    border-top: 1px solid var(--color-border-default);
+    align-items: center;
+    transition: background var(--duration-fast) var(--easing-standard);
+
+    &:hover {
+      background: var(--color-surface-hover);
+    }
+  }
+
+  &__cell {
+    &--name {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    &--desc {
+      flex: 1;
+      min-width: 0;
+      word-break: break-word;
+    }
+
+    &--value {
+      width: 120px;
+      flex-shrink: 0;
+    }
+  }
+
+  &__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--radius-full);
+    flex-shrink: 0;
+  }
+
+  &__name-text {
+    font-size: var(--font-body-size);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-default);
+  }
+
+  &__control-tag {
+    font-size: var(--font-caption-xs-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-secondary);
+    background: var(--color-surface-muted);
+    padding: 2px 8px;
+    border-radius: var(--radius-sm);
+  }
+
+  &__desc-text {
+    font-size: var(--font-body-sm-size);
+    color: var(--color-text-secondary);
+    line-height: 1.4;
+  }
+
+  &__value-badge {
+    font-family: var(--font-family);
+    font-size: var(--font-body-sm-size);
+    color: var(--color-text-default);
+    background: var(--color-surface-muted);
+    padding: 6px 12px;
+    border-radius: var(--radius-md);
+  }
+}
diff --git a/frontend/web/components/experiments/VariationTable.tsx b/frontend/web/components/experiments/VariationTable.tsx
new file mode 100644
index 000000000000..950b92009301
--- /dev/null
+++ b/frontend/web/components/experiments/VariationTable.tsx
@@ -0,0 +1,82 @@
+import { FC } from 'react'
+import { MultivariateOption } from 'common/types/responses'
+import './VariationTable.scss'
+
+const CONTROL_COLOUR = 'var(--green-500)'
+const VARIATION_COLOUR = 'var(--purple-500)'
+
+type VariationTableProps = {
+  controlValue: string
+  variations: MultivariateOption[]
+}
+
+const getVariationValue = (mv: MultivariateOption) => {
+  if (mv.type === 'unicode') return mv.string_value
+  if (mv.type === 'int') return String(mv.integer_value ?? '')
+  if (mv.type === 'bool') return String(mv.boolean_value ?? '')
+  return ''
+}
+
+const VariationTable: FC<VariationTableProps> = ({
+  controlValue,
+  variations,
+}) => {
+  return (
+    <div className='variation-table'>
+      <div className='variation-table__head'>
+        <span className='variation-table__th variation-table__th--name'>
+          Name
+        </span>
+        <span className='variation-table__th variation-table__th--desc'>
+          Description
+        </span>
+        <span className='variation-table__th variation-table__th--value'>
+          Value
+        </span>
+      </div>
+
+      <div className='variation-table__row'>
+        <div className='variation-table__cell variation-table__cell--name'>
+          <span
+            className='variation-table__dot'
+            style={{ background: CONTROL_COLOUR }}
+          />
+          <span className='variation-table__name-text'>Control</span>
+          <span className='variation-table__control-tag'>control</span>
+        </div>
+        <div className='variation-table__cell variation-table__cell--desc'>
+          <span className='variation-table__desc-text'>
+            Flag&apos;s base value &mdash; the baseline for comparison
+          </span>
+        </div>
+        <div className='variation-table__cell variation-table__cell--value'>
+          <span className='variation-table__value-badge'>{controlValue}</span>
+        </div>
+      </div>
+
+      {variations.map((mv) => (
+        <div key={mv.id} className='variation-table__row'>
+          <div className='variation-table__cell variation-table__cell--name'>
+            <span
+              className='variation-table__dot'
+              style={{ background: VARIATION_COLOUR }}
+            />
+            <span className='variation-table__name-text'>
+              {mv.string_value || `Variation ${mv.id}`}
+            </span>
+          </div>
+          <div className='variation-table__cell variation-table__cell--desc'>
+            <span className='variation-table__desc-text' />
+          </div>
+          <div className='variation-table__cell variation-table__cell--value'>
+            <span className='variation-table__value-badge'>
+              {getVariationValue(mv)}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default VariationTable
diff --git a/frontend/web/components/experiments/WizardNavButtons.tsx b/frontend/web/components/experiments/WizardNavButtons.tsx
new file mode 100644
index 000000000000..f97d582a2f33
--- /dev/null
+++ b/frontend/web/components/experiments/WizardNavButtons.tsx
@@ -0,0 +1,49 @@
+import { FC } from 'react'
+import Button from 'components/base/forms/Button'
+import { IonIcon } from '@ionic/react'
+import { arrowBack, rocketOutline } from 'ionicons/icons'
+
+type WizardNavButtonsProps = {
+  currentStep: number
+  totalSteps: number
+  canContinue: boolean
+  isSubmitting?: boolean
+  onBack: () => void
+  onContinue: () => void
+  onLaunch: () => void
+}
+
+const WizardNavButtons: FC<WizardNavButtonsProps> = ({
+  canContinue,
+  currentStep,
+  isSubmitting,
+  onBack,
+  onContinue,
+  onLaunch,
+  totalSteps,
+}) => {
+  const isLastStep = currentStep === totalSteps - 1
+
+  return (
+    <div className='d-flex justify-content-end gap-3 mt-4'>
+      {currentStep > 0 && (
+        <Button theme='outline' onClick={onBack}>
+          <IonIcon icon={arrowBack} className='me-1' />
+          Back
+        </Button>
+      )}
+      {isLastStep ? (
+        <Button onClick={onLaunch} disabled={isSubmitting}>
+          Create Experiment
+          <IonIcon icon={rocketOutline} className='ms-1' />
+        </Button>
+      ) : (
+        <Button onClick={onContinue} disabled={!canContinue}>
+          Continue
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default WizardNavButtons
diff --git a/frontend/web/components/experiments/WizardStepper.scss b/frontend/web/components/experiments/WizardStepper.scss
new file mode 100644
index 000000000000..385997c13a24
--- /dev/null
+++ b/frontend/web/components/experiments/WizardStepper.scss
@@ -0,0 +1,117 @@
+.wizard-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  flex-shrink: 0;
+}
+
+.wizard-step {
+  display: flex;
+  gap: 20px;
+
+  &--done {
+    cursor: pointer;
+
+    .wizard-step__circle {
+      background: var(--color-surface-success);
+      border: 2px solid var(--green-500);
+      color: var(--color-text-success);
+    }
+
+    .wizard-step__title {
+      color: var(--color-text-default);
+    }
+  }
+
+  &--active {
+    .wizard-step__circle {
+      border: 2px solid var(--color-border-action);
+      color: var(--color-text-action);
+    }
+
+    .wizard-step__title {
+      color: var(--color-text-default);
+    }
+  }
+
+  &--upcoming {
+    .wizard-step__circle {
+      border: 2px solid var(--color-border-default);
+      color: var(--color-text-disabled);
+    }
+
+    .wizard-step__title {
+      color: var(--color-text-disabled);
+    }
+  }
+
+  &__left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 32px;
+    flex-shrink: 0;
+  }
+
+  &__circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-full);
+    flex-shrink: 0;
+  }
+
+  &__number {
+    font-size: var(--font-body-sm-size);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  &__connector {
+    width: 2px;
+    flex: 1;
+    min-height: 24px;
+    background: var(--color-border-default);
+  }
+
+  &__right {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 4px 0 24px;
+    flex: 1;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  &__title {
+    font-size: var(--font-h6-size);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  &__badge {
+    font-size: var(--font-caption-xs-size);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-success);
+    background: var(--color-surface-success);
+    padding: 3px 10px;
+    border-radius: var(--radius-full);
+  }
+
+  &__subtitle {
+    font-size: var(--font-body-sm-size);
+    color: var(--color-text-disabled);
+  }
+
+  &--active &__subtitle {
+    color: var(--color-text-secondary);
+    font-size: var(--font-body-size);
+    line-height: 1.5;
+  }
+}
diff --git a/frontend/web/components/experiments/WizardStepper.tsx b/frontend/web/components/experiments/WizardStepper.tsx
new file mode 100644
index 000000000000..f415afa95585
--- /dev/null
+++ b/frontend/web/components/experiments/WizardStepper.tsx
@@ -0,0 +1,101 @@
+import { FC } from 'react'
+import Icon from 'components/icons/Icon'
+import './WizardStepper.scss'
+
+type StepDef = {
+  title: string
+  subtitle: string
+}
+
+const STEPS: StepDef[] = [
+  {
+    subtitle: 'Name, hypothesis, and the flag to experiment on',
+    title: 'Setup',
+  },
+  {
+    subtitle: 'Choose who is exposed and how traffic is split',
+    title: 'Audience & Traffic',
+  },
+  {
+    subtitle: 'Pick the metrics that determine success',
+    title: 'Measurement',
+  },
+  {
+    subtitle: 'Review your configuration and launch',
+    title: 'Review & Launch',
+  },
+]
+
+type WizardStepperProps = {
+  currentStep: number
+  completedSteps: Set<number>
+  onStepClick: (step: number) => void
+}
+
+type StepStatus = 'done' | 'active' | 'upcoming'
+
+const getStatus = (
+  index: number,
+  currentStep: number,
+  completedSteps: Set<number>,
+): StepStatus => {
+  if (completedSteps.has(index) && index !== currentStep) return 'done'
+  if (index === currentStep) return 'active'
+  return 'upcoming'
+}
+
+const WizardStepper: FC<WizardStepperProps> = ({
+  completedSteps,
+  currentStep,
+  onStepClick,
+}) => {
+  return (
+    <nav className='wizard-sidebar'>
+      {STEPS.map((step, index) => {
+        const status = getStatus(index, currentStep, completedSteps)
+        const isClickable = status === 'done'
+        const showConnector = index < STEPS.length - 1
+
+        return (
+          <div
+            key={index}
+            className={`wizard-step wizard-step--${status}`}
+            onClick={isClickable ? () => onStepClick(index) : undefined}
+            role={isClickable ? 'button' : undefined}
+            tabIndex={isClickable ? 0 : undefined}
+            onKeyDown={
+              isClickable
+                ? (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') onStepClick(index)
+                  }
+                : undefined
+            }
+          >
+            <div className='wizard-step__left'>
+              <div className='wizard-step__circle'>
+                {status === 'done' ? (
+                  <Icon name='checkmark-circle' width={16} />
+                ) : (
+                  <span className='wizard-step__number'>{index + 1}</span>
+                )}
+              </div>
+              {showConnector && <div className='wizard-step__connector' />}
+            </div>
+
+            <div className='wizard-step__right'>
+              <div className='wizard-step__header'>
+                <span className='wizard-step__title'>{step.title}</span>
+                {status === 'done' && (
+                  <span className='wizard-step__badge'>Complete</span>
+                )}
+              </div>
+              <span className='wizard-step__subtitle'>{step.subtitle}</span>
+            </div>
+          </div>
+        )
+      })}
+    </nav>
+  )
+}
+
+export default WizardStepper
diff --git a/frontend/web/components/experiments/steps/AudienceStep.tsx b/frontend/web/components/experiments/steps/AudienceStep.tsx
new file mode 100644
index 000000000000..1dcb2d56e80e
--- /dev/null
+++ b/frontend/web/components/experiments/steps/AudienceStep.tsx
@@ -0,0 +1,65 @@
+import { FC } from 'react'
+import { IonIcon } from '@ionic/react'
+import { peopleOutline } from 'ionicons/icons'
+import ContentCard from 'components/base/grid/ContentCard'
+import 'components/experiments/wizard.scss'
+
+const SAMPLE_PRESETS = [5, 10, 25, 50, 100]
+
+const AudienceStep: FC = () => {
+  return (
+    <div className='d-flex flex-column gap-4'>
+      <ContentCard title='Targeting'>
+        <p className='text-muted fs-small mb-0'>
+          Define who is eligible for the experiment using attribute conditions.
+          Conditions are AND-joined. Leave empty to run on all identities in the
+          environment. Conditions are frozen at launch &mdash; later edits to
+          existing Segments cannot drift the experiment audience.
+        </p>
+        <div className='d-flex align-items-start gap-3 p-3 border rounded'>
+          <IonIcon
+            icon={peopleOutline}
+            style={{ fontSize: 24 }}
+            className='text-muted flex-shrink-0 mt-1'
+          />
+          <div>
+            <div className='fw-bold'>All identities in this environment</div>
+            <div className='text-muted fs-small'>
+              No targeting conditions &mdash; every identity is eligible for the
+              experiment. Add a condition to filter the audience.
+            </div>
+          </div>
+        </div>
+      </ContentCard>
+
+      <ContentCard title='Sample size'>
+        <p className='text-muted fs-small mb-0'>
+          What percentage of eligible users enters the experiment? The rest keep
+          the flag&apos;s environment default and aren&apos;t part of the
+          result.
+        </p>
+        <div className='d-flex gap-2 flex-wrap'>
+          {SAMPLE_PRESETS.map((pct) => (
+            <div
+              key={pct}
+              className={`btn btn-sm ${
+                pct === 100 ? 'btn-primary' : 'btn-outline-secondary'
+              }`}
+              style={{ pointerEvents: 'none' }}
+            >
+              {pct}%
+            </div>
+          ))}
+          <div
+            className='btn btn-sm btn-outline-secondary'
+            style={{ pointerEvents: 'none' }}
+          >
+            Custom
+          </div>
+        </div>
+      </ContentCard>
+    </div>
+  )
+}
+
+export default AudienceStep
diff --git a/frontend/web/components/experiments/steps/MeasurementStep.tsx b/frontend/web/components/experiments/steps/MeasurementStep.tsx
new file mode 100644
index 000000000000..b86b4ea01df5
--- /dev/null
+++ b/frontend/web/components/experiments/steps/MeasurementStep.tsx
@@ -0,0 +1,42 @@
+import { FC } from 'react'
+import Button from 'components/base/forms/Button'
+import { IonIcon } from '@ionic/react'
+import { addOutline, searchOutline } from 'ionicons/icons'
+import ContentCard from 'components/base/grid/ContentCard'
+import 'components/experiments/wizard.scss'
+
+const MeasurementStep: FC = () => {
+  return (
+    <div className='d-flex flex-column gap-4'>
+      <ContentCard title='Metrics'>
+        <div className='d-flex align-items-center gap-3'>
+          <div className='position-relative flex-fill'>
+            <IonIcon
+              icon={searchOutline}
+              className='position-absolute text-muted'
+              style={{
+                fontSize: 18,
+                left: 12,
+                top: '50%',
+                transform: 'translateY(-50%)',
+              }}
+            />
+            <input
+              type='text'
+              className='form-control'
+              placeholder='Search metrics...'
+              disabled
+              style={{ paddingLeft: 40 }}
+            />
+          </div>
+          <Button disabled theme='outline'>
+            <IonIcon icon={addOutline} className='me-1' />
+            Create Metric
+          </Button>
+        </div>
+      </ContentCard>
+    </div>
+  )
+}
+
+export default MeasurementStep
diff --git a/frontend/web/components/experiments/steps/ReviewStep.tsx b/frontend/web/components/experiments/steps/ReviewStep.tsx
new file mode 100644
index 000000000000..86c1c1b7032a
--- /dev/null
+++ b/frontend/web/components/experiments/steps/ReviewStep.tsx
@@ -0,0 +1,60 @@
+import { FC } from 'react'
+import { ProjectFlag } from 'common/types/responses'
+import Button from 'components/base/forms/Button'
+import ContentCard from 'components/base/grid/ContentCard'
+import VariationTable from 'components/experiments/VariationTable'
+import 'components/experiments/wizard.scss'
+
+type ReviewStepProps = {
+  name: string
+  hypothesis: string
+  selectedFeature: ProjectFlag | null
+  onEditSetup: () => void
+}
+
+const ReviewStep: FC<ReviewStepProps> = ({
+  hypothesis,
+  name,
+  onEditSetup,
+  selectedFeature,
+}) => {
+  return (
+    <div className='d-flex flex-column gap-4'>
+      <ContentCard
+        title='Setup'
+        action={
+          <Button theme='text' size='xSmall' onClick={onEditSetup}>
+            Edit
+          </Button>
+        }
+      >
+        <div className='review-row review-row--block'>
+          <span className='review-row__label'>Name</span>
+          <span className='review-row__value'>{name}</span>
+        </div>
+        {hypothesis && (
+          <div className='review-row review-row--block'>
+            <span className='review-row__label'>Hypothesis</span>
+            <span className='review-row__hypothesis'>{hypothesis}</span>
+          </div>
+        )}
+        {selectedFeature && (
+          <>
+            <div className='review-row review-row--block'>
+              <span className='review-row__label'>Feature Flag</span>
+              <span className='review-row__value review-row__value--flag'>
+                {selectedFeature.name}
+              </span>
+            </div>
+            <VariationTable
+              controlValue={selectedFeature.initial_value?.toString() ?? ''}
+              variations={selectedFeature.multivariate_options}
+            />
+          </>
+        )}
+      </ContentCard>
+    </div>
+  )
+}
+
+export default ReviewStep
diff --git a/frontend/web/components/experiments/steps/SetupStep.tsx b/frontend/web/components/experiments/steps/SetupStep.tsx
new file mode 100644
index 000000000000..45a6cf14500f
--- /dev/null
+++ b/frontend/web/components/experiments/steps/SetupStep.tsx
@@ -0,0 +1,142 @@
+import { FC, useMemo } from 'react'
+import { ProjectFlag } from 'common/types/responses'
+import { useGetFeatureListQuery } from 'common/services/useProjectFlag'
+import { useProjectEnvironments } from 'common/hooks/useProjectEnvironments'
+import useDebouncedSearch from 'common/useDebouncedSearch'
+import Utils from 'common/utils/utils'
+import ContentCard from 'components/base/grid/ContentCard'
+import VariationTable from 'components/experiments/VariationTable'
+import 'components/experiments/wizard.scss'
+
+type SetupStepProps = {
+  name: string
+  hypothesis: string
+  selectedFeature: ProjectFlag | null
+  projectId: number
+  environmentId: string
+  onNameChange: (name: string) => void
+  onHypothesisChange: (hypothesis: string) => void
+  onFeatureSelect: (feature: ProjectFlag) => void
+}
+
+const SetupStep: FC<SetupStepProps> = ({
+  environmentId,
+  hypothesis,
+  name,
+  onFeatureSelect,
+  onHypothesisChange,
+  onNameChange,
+  projectId,
+  selectedFeature,
+}) => {
+  const { search, setSearchInput } = useDebouncedSearch('')
+  const { getEnvironmentIdFromKey } = useProjectEnvironments(projectId)
+  const numericEnvId = getEnvironmentIdFromKey(environmentId)
+
+  const { data: featureList, isLoading: isFeaturesLoading } =
+    useGetFeatureListQuery(
+      {
+        environmentId: String(numericEnvId ?? ''),
+        page: 1,
+        page_size: 50,
+        projectId,
+        search: search || undefined,
+      },
+      { skip: !numericEnvId },
+    )
+
+  const multivariateFeatures = useMemo(() => {
+    if (!featureList?.results) return []
+    return featureList.results.filter((f) => f.type === 'MULTIVARIATE')
+  }, [featureList])
+
+  return (
+    <div className='d-flex flex-column gap-4'>
+      <ContentCard title='Experiment details'>
+        <p className='text-muted fs-small mb-0'>
+          Name the experiment and capture what you&apos;re trying to learn
+          before picking a flag.
+        </p>
+
+        <div className='wizard-field'>
+          <label className='wizard-field__label'>
+            Experiment Name <span className='wizard-field__required'>*</span>
+          </label>
+          <Input
+            value={name}
+            onChange={(e: InputEvent) =>
+              onNameChange(Utils.safeParseEventValue(e))
+            }
+            placeholder='e.g. Checkout Button Redesign'
+          />
+        </div>
+
+        <div className='wizard-field'>
+          <label className='wizard-field__label'>
+            Hypothesis <span className='wizard-field__required'>*</span>
+          </label>
+          <textarea
+            className='wizard-field__textarea'
+            rows={3}
+            value={hypothesis}
+            onChange={(e) => onHypothesisChange(e.target.value)}
+            placeholder='e.g. Redesigning the checkout button with a clearer CTA will increase conversion rates by at least 15% within 30 days'
+          />
+          <span className='wizard-field__hint'>
+            A good hypothesis names the change, the metric, the expected
+            magnitude, and the timeframe.
+          </span>
+        </div>
+      </ContentCard>
+
+      <ContentCard title='Feature flag'>
+        <p className='text-muted fs-small mb-0'>
+          The flag you&apos;re experimenting on. Variations are read-only
+          &mdash; they&apos;re defined on the flag itself.
+        </p>
+
+        <div className='wizard-field'>
+          <label className='wizard-field__label'>Feature Flag</label>
+          <Select
+            value={
+              selectedFeature
+                ? { label: selectedFeature.name, value: selectedFeature.id }
+                : null
+            }
+            options={multivariateFeatures.map((f) => ({
+              label: f.name,
+              value: f.id,
+            }))}
+            onInputChange={(val: string) => setSearchInput(val)}
+            onChange={(option: { label: string; value: number } | null) => {
+              if (option) {
+                const feature = multivariateFeatures.find(
+                  (f) => f.id === option.value,
+                )
+                if (feature) onFeatureSelect(feature)
+              }
+            }}
+            isLoading={isFeaturesLoading}
+            placeholder='Search for a multivariate feature...'
+            isClearable={false}
+          />
+          <span className='wizard-field__hint'>
+            Only multi-variant flags can be experimented on.
+          </span>
+        </div>
+
+        {selectedFeature && selectedFeature.multivariate_options.length > 0 && (
+          <div className='wizard-field'>
+            <label className='wizard-field__label'>Variations</label>
+            <VariationTable
+              controlValue={selectedFeature.initial_value?.toString() ?? ''}
+              variations={selectedFeature.multivariate_options}
+            />
+          </div>
+        )}
+      </ContentCard>
+    </div>
+  )
+}
+
+export default SetupStep
diff --git a/frontend/web/components/experiments/wizard.scss b/frontend/web/components/experiments/wizard.scss
new file mode 100644
index 000000000000..1076906bd4a9
--- /dev/null
+++ b/frontend/web/components/experiments/wizard.scss
@@ -0,0 +1,82 @@
+.wizard-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  &__label {
+    font-size: var(--font-body-sm-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-default);
+  }
+
+  &__required {
+    color: var(--color-text-danger);
+  }
+
+  &__hint {
+    color: var(--color-text-secondary);
+    font-size: var(--font-caption-size);
+  }
+
+  &__textarea {
+    width: 100%;
+    min-height: 80px;
+    padding: 10px 14px;
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface-default, #fff);
+    color: var(--color-text-default);
+    font-size: var(--font-body-size);
+    font-family: inherit;
+    resize: vertical;
+    transition: border-color var(--duration-fast) var(--easing-standard);
+
+    &::placeholder {
+      color: var(--color-text-disabled);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--color-border-action);
+    }
+  }
+}
+
+.review-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+
+  &--block {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  &__label {
+    font-size: var(--font-body-sm-size);
+    color: var(--color-text-secondary);
+  }
+
+  &__value {
+    font-size: var(--font-body-sm-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-default);
+
+    &--flag {
+      font-weight: var(--font-weight-bold, 700);
+      font-style: italic;
+    }
+  }
+
+  &__hypothesis {
+    font-size: var(--font-body-sm-size);
+    color: var(--color-text-default);
+    line-height: 1.5;
+    padding: 12px;
+    background: var(--color-surface-muted);
+    border-radius: var(--radius-md);
+    width: 100%;
+  }
+}
diff --git a/frontend/web/components/pages/ExperimentsPage.tsx b/frontend/web/components/pages/ExperimentsPage.tsx
index bfb0aed249bb..f613b5854349 100644
--- a/frontend/web/components/pages/ExperimentsPage.tsx
+++ b/frontend/web/components/pages/ExperimentsPage.tsx
@@ -1,41 +1,130 @@
-import React, { FC } from 'react'
+import { FC, useState } from 'react'
+import { useHistory } from 'react-router-dom'
 import { useRouteContext } from 'components/providers/RouteContext'
-import { useGetTagsQuery } from 'common/services/useTag'
-import FeaturesPage from './features/FeaturesPage'
+import { useGetExperimentsQuery } from 'common/services/useExperiment'
+import { useGetWarehouseConnectionsQuery } from 'common/services/useWarehouseConnection'
+import Button from 'components/base/forms/Button'
+import PageTitle from 'components/PageTitle'
+import CreateExperimentWizard from 'components/experiments/CreateExperimentWizard'
+import { IonIcon } from '@ionic/react'
+import { addOutline, flaskOutline, settingsOutline } from 'ionicons/icons'
 
 const ExperimentsPage: FC = () => {
-  const routeContext = useRouteContext()
-  const projectId = routeContext.projectId!
+  const { environmentId, projectId } = useRouteContext()
+  const [isCreating, setIsCreating] = useState(false)
+  const history = useHistory()
 
-  const { data: tags, isLoading } = useGetTagsQuery({ projectId })
+  const { data: experiments, isLoading } = useGetExperimentsQuery(
+    { environmentId: environmentId ?? '' },
+    { skip: !environmentId },
+  )
+
+  const { data: warehouseConnections, isLoading: isLoadingWarehouse } =
+    useGetWarehouseConnectionsQuery(
+      { environmentId: environmentId ?? '' },
+      { skip: !environmentId },
+    )
+
+  const hasWarehouse = (warehouseConnections?.length ?? 0) > 0
+
+  if (!environmentId || !projectId) return null
 
-  if (isLoading) {
+  if (isCreating) {
     return (
-      <div className='text-center'>
-        <Loader />
+      <div data-test='experiments-page' className='app-container container'>
+        <PageTitle
+          title='Create Experiment'
+          cta={
+            <Button theme='outline' onClick={() => setIsCreating(false)}>
+              Cancel
+            </Button>
+          }
+        />
+        <CreateExperimentWizard
+          environmentId={environmentId}
+          projectId={projectId}
+          onCreated={() => setIsCreating(false)}
+        />
       </div>
     )
   }
 
-  const experimentTag = tags?.find(
-    (t) => t.label.toLowerCase() === 'experiment',
-  )
+  const experimentCount = experiments?.length ?? 0
 
-  if (!experimentTag) {
+  const settingsUrl = `/project/${projectId}/environment/${environmentId}/settings?tab=warehouse`
+
+  const renderBody = () => {
+    if (isLoading || isLoadingWarehouse) {
+      return (
+        <div className='text-center'>
+          <Loader />
+        </div>
+      )
+    }
+    if (!hasWarehouse && experimentCount === 0) {
+      return (
+        <div className='text-center py-5'>
+          <IonIcon
+            icon={settingsOutline}
+            style={{ fontSize: 48 }}
+            className='text-muted mb-3 d-block mx-auto'
+          />
+          <h5>Data warehouse not configured</h5>
+          <p className='text-muted mb-4'>
+            Experiments require a data warehouse connection to collect and
+            analyse results. Configure one in your environment settings to get
+            started.
+          </p>
+          <Button onClick={() => history.push(settingsUrl)}>
+            Configure Warehouse
+          </Button>
+        </div>
+      )
+    }
+    if (experimentCount === 0) {
+      return (
+        <div className='text-center py-5'>
+          <IonIcon
+            icon={flaskOutline}
+            style={{ fontSize: 48 }}
+            className='text-muted mb-3 d-block mx-auto'
+          />
+          <h5>No experiments yet</h5>
+          <p className='text-muted mb-4'>
+            Create your first experiment to start testing hypotheses with your
+            feature flags.
+          </p>
+          <Button onClick={() => setIsCreating(true)}>
+            <IonIcon icon={addOutline} className='me-1' />
+            Create Experiment
+          </Button>
+        </div>
+      )
+    }
     return (
-      <div data-test='experiments-page' className='app-container container'>
-        <h3>Experiments</h3>
-        <p>You don't have any experiment running at the moment</p>
+      <div className='mt-3'>
+        <p className='text-muted'>
+          {experimentCount} experiment{experimentCount !== 1 ? 's' : ''}
+        </p>
       </div>
     )
   }
 
   return (
-    <FeaturesPage
-      pageTitle='Experiments'
-      forcedTagIds={[experimentTag.id]}
-      defaultExperiment
-    />
+    <div data-test='experiments-page' className='app-container container'>
+      <PageTitle
+        title='Experiments'
+        cta={
+          hasWarehouse ? (
+            <Button onClick={() => setIsCreating(true)}>
+              <IonIcon icon={addOutline} className='me-1' />
+              Create Experiment
+            </Button>
+          ) : undefined
+        }
+      />
+      {renderBody()}
+    </div>
   )
 }