diff --git a/packages/app/src/runner/SpecRunnerOpenMode.vue b/packages/app/src/runner/SpecRunnerOpenMode.vue
index efa65c8d5298..50f1d3da1849 100644
--- a/packages/app/src/runner/SpecRunnerOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerOpenMode.vue
@@ -1,4 +1,18 @@
 <template>
+  <StudioInitModal
+    :open="studioStore.initModalIsOpen"
+    @close="studioStore.closeInitModal"
+    @start="eventManager.emit('studio:start', undefined)"
+  />
+  <StudioInstructionsModal
+    :open="studioStore.instructionModalIsOpen"
+    @close="studioStore.closeInstructionModal"
+  />
+  <StudioSaveModal
+    :open="studioStore.saveModalIsOpen"
+    :studio-store="studioStore"
+    @close="studioStore.closeSaveModal"
+  />
   <AdjustRunnerStyleDuringScreenshot
     id="main-pane"
     class="flex border-gray-900"
@@ -120,6 +134,10 @@ import { useEventManager } from './useEventManager'
 import AutomationDisconnected from './automation/AutomationDisconnected.vue'
 import AutomationMissing from './automation/AutomationMissing.vue'
 import { runnerConstants } from './runner-constants'
+import StudioInitModal from './studio/StudioInitModal.vue'
+import StudioInstructionsModal from './studio/StudioInstructionsModal.vue'
+import StudioSaveModal from './studio/StudioSaveModal.vue'
+import { useStudioStore } from '../store/studio-store'
 
 const {
   preferredMinimumPanelWidth,
@@ -191,6 +209,8 @@ const {
   cleanupRunner,
 } = useEventManager()
 
+const studioStore = useStudioStore()
+
 const specsListWidthPreferences = computed(() => {
   return props.gql.localSettings.preferences.specListWidth ?? runnerUiStore.specListWidth
 })
diff --git a/packages/app/src/runner/StudioControls.vue b/packages/app/src/runner/StudioControls.vue
index 8de85c295576..278553d7a907 100644
--- a/packages/app/src/runner/StudioControls.vue
+++ b/packages/app/src/runner/StudioControls.vue
@@ -16,7 +16,7 @@
 
   <button
     :disabled="studioStore.isLoading"
-    @click="handleShowCommands"
+    @click="studioStore.openInstructionModal"
   >
     Available Commands
   </button>
@@ -64,10 +64,6 @@ import { useStudioStore } from '../store/studio-store'
 
 const studioStore = useStudioStore()
 
-function handleShowCommands () {
-  // TODO: Show modal with available commands'
-}
-
 const eventManager = getEventManager()
 
 function handleClose () {
diff --git a/packages/app/src/runner/reporter.ts b/packages/app/src/runner/reporter.ts
index 8f1b037f792d..52b439952263 100644
--- a/packages/app/src/runner/reporter.ts
+++ b/packages/app/src/runner/reporter.ts
@@ -1,6 +1,6 @@
 import { getMobxRunnerStore, MobxRunnerStore } from '../store'
 import { getReporterElement } from './utils'
-import { getEventManager, getRunnerConfigFromWindow } from '.'
+import { getEventManager } from '.'
 import type { EventManager } from './event-manager'
 import { useRunnerUiStore } from '../store/runner-ui-store'
 
@@ -39,7 +39,7 @@ function renderReporter (
 ) {
   const runnerUiStore = useRunnerUiStore()
 
-  const config = getRunnerConfigFromWindow()
+  // const config = getRunnerConfigFromWindow()
 
   const reporter = window.UnifiedRunner.React.createElement(window.UnifiedRunner.Reporter, {
     runMode: 'single' as const,
@@ -49,7 +49,7 @@ function renderReporter (
     error: null, // errorMessages.reporterError(props.state.scriptError, props.state.spec.relative),
     resetStatsOnSpecChange: true,
     // @ts-ignore - https://github.com/cypress-io/cypress/issues/23338
-    experimentalStudioEnabled: config.experimentalStudio,
+    experimentalStudioEnabled: true,
     runnerStore: store,
   })
 
diff --git a/packages/app/src/runner/studio/StudioInitModal.cy.tsx b/packages/app/src/runner/studio/StudioInitModal.cy.tsx
new file mode 100644
index 000000000000..595940e6aab4
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioInitModal.cy.tsx
@@ -0,0 +1,24 @@
+import StudioInitModal from './StudioInitModal.vue'
+
+describe('StudioInitModal', () => {
+  it('renders hidden by default', () => {
+    cy.mount(<StudioInitModal open={false} />)
+    cy.findByTestId('studio-init-modal').should('not.exist')
+  })
+
+  it('renders open with props', () => {
+    cy.mount(<StudioInitModal open />)
+    cy.findByTestId('studio-init-modal').should('be.visible')
+    cy.percySnapshot()
+  })
+
+  it('calls start when user clicks the button', () => {
+    const start = cy.stub()
+
+    cy.mount(<StudioInitModal onStart={start} open />)
+
+    cy.findByText('Get Started').click().then(() => {
+      expect(start).to.be.calledOnce
+    })
+  })
+})
diff --git a/packages/app/src/runner/studio/StudioInitModal.vue b/packages/app/src/runner/studio/StudioInitModal.vue
new file mode 100644
index 000000000000..acc9c25e544e
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioInitModal.vue
@@ -0,0 +1,52 @@
+<template>
+  <StandardModal
+    :model-value="props.open"
+    help-link="https://on.cypress.io/guides/references/cypress-studio"
+    :help-text="t('links.learnMoreButton')"
+    variant="bare"
+    data-cy="studio-init-modal"
+    @update:model-value="emit('close')"
+  >
+    <template #title>
+      <i className="fas fa-magic icon" />
+      {{ t('runner.studio.studio') }}
+      <span className="beta">{{ t('versions.beta') }}</span>
+    </template>
+
+    <div className="gif">
+      <img
+        src="../../static/studio.gif"
+        alt="Studio"
+      >
+    </div>
+
+    <div className="content center">
+      <div className="text">
+        {{ t('runner.studio.studioDescription') }}
+      </div>
+      <button
+        className="btn-main"
+        @click="emit('start')"
+      >
+        {{ t('runner.studio.getStartedButton') }}
+      </button>
+    </div>
+  </StandardModal>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from '@cy/i18n'
+import StandardModal from '@packages/frontend-shared/src/components/StandardModal.vue'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'start'): void
+  (e: 'close'): void
+}>()
+
+</script>
diff --git a/packages/app/src/runner/studio/StudioInstructionsModal.cy.tsx b/packages/app/src/runner/studio/StudioInstructionsModal.cy.tsx
new file mode 100644
index 000000000000..cf9170caf161
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioInstructionsModal.cy.tsx
@@ -0,0 +1,14 @@
+import StudioInstructionsModal from './StudioInstructionsModal.vue'
+
+describe('StudioInstructionsModal', () => {
+  it('renders hidden by default', () => {
+    cy.mount(<StudioInstructionsModal open={false} />)
+    cy.findByTestId('studio-instructions-modal').should('not.exist')
+  })
+
+  it('renders open with props', () => {
+    cy.mount(<StudioInstructionsModal open />)
+    cy.findByTestId('studio-instructions-modal').should('be.visible')
+    cy.percySnapshot()
+  })
+})
diff --git a/packages/app/src/runner/studio/StudioInstructionsModal.vue b/packages/app/src/runner/studio/StudioInstructionsModal.vue
new file mode 100644
index 000000000000..65fbe36eca57
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioInstructionsModal.vue
@@ -0,0 +1,70 @@
+<template>
+  <StandardModal
+    :model-value="props.open"
+    help-link="https://on.cypress.io/guides/references/cypress-studio"
+    :help-text="t('links.learnMoreButton')"
+    variant="bare"
+    data-cy="studio-instructions-modal"
+    @update:model-value="emit('close')"
+  >
+    <template #title>
+      <i className="fas fa-magic icon" />
+      {{ t('runner.studio.studio') }}
+      <span className="beta">{{ t('versions.beta') }}</span>
+    </template>
+
+    <div className="content center">
+      <div className="text">
+        {{ t('runner.studio.studioDetailedDescription') }}
+      </div>
+
+      <div className="text center-box">
+        <ul>
+          <li>
+            <pre>.check()</pre>
+          </li>
+          <li>
+            <pre>.click()</pre>
+          </li>
+          <li>
+            <pre>.select()</pre>
+          </li>
+          <li>
+            <pre>.type()</pre>
+          </li>
+          <li>
+            <pre>.uncheck()</pre>
+          </li>
+        </ul>
+      </div>
+      <div className="text">
+        {{ t('runner.studio.betaMessage') }}
+        <i18n-t
+          scope="global"
+          keypath="runner.studio.feedbackPrompt"
+        >
+          <a
+            href="https://on.cypress.io/studio-beta"
+            target="_blank"
+          >{{ t('runner.studio.feedbackLink') }}</a>
+        </i18n-t>
+      </div>
+    </div>
+  </StandardModal>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from '@cy/i18n'
+import StandardModal from '@packages/frontend-shared/src/components/StandardModal.vue'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+</script>
diff --git a/packages/app/src/runner/studio/StudioSaveModal.cy.tsx b/packages/app/src/runner/studio/StudioSaveModal.cy.tsx
new file mode 100644
index 000000000000..56bbab214663
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioSaveModal.cy.tsx
@@ -0,0 +1,25 @@
+import StudioSaveModal from './StudioSaveModal.vue'
+
+describe('StudioSaveModal', () => {
+  it('renders hidden by default', () => {
+    cy.mount(<StudioSaveModal studioStore={{}} open={false} />)
+    cy.findByTestId('studio-save-modal').should('not.exist')
+  })
+
+  it('renders open with props', () => {
+    cy.mount(<StudioSaveModal studioStore={{}} open />)
+    cy.findByTestId('studio-save-modal').should('be.visible')
+    cy.percySnapshot()
+  })
+
+  it('submits the form', () => {
+    const save = cy.stub()
+
+    cy.mount(<StudioSaveModal studioStore={{ save }} open />)
+    cy.get('#testName').focus().type('my test')
+
+    cy.findByText('Save Test').click().then(() => {
+      expect(save).to.be.calledOnceWith('my test')
+    })
+  })
+})
diff --git a/packages/app/src/runner/studio/StudioSaveModal.vue b/packages/app/src/runner/studio/StudioSaveModal.vue
new file mode 100644
index 000000000000..b108a7a7ba96
--- /dev/null
+++ b/packages/app/src/runner/studio/StudioSaveModal.vue
@@ -0,0 +1,67 @@
+<template>
+  <StandardModal
+    :model-value="props.open"
+    variant="bare"
+    data-cy="studio-save-modal"
+    @update:model-value="emit('close')"
+  >
+    <template #title>
+      <i className="fas fa-magic icon" />
+      {{ t('runner.studio.saveNewTest') }}
+    </template>
+
+    <div className="content">
+      <form
+        @submit="submit"
+      >
+        <div className="text">
+          <label
+            className="text-strong"
+            htmlFor="testName"
+          >{{ t('runner.studio.testName') }}</label>
+          <Input
+            id="testName"
+            v-model="testName"
+            type="text"
+            :required="true"
+          />
+        </div>
+        <div className="center">
+          <input
+            type="submit"
+            :value="t('runner.studio.saveTestButton')"
+            class="btn btn-block"
+            :disabled="!testName"
+          >
+        </div>
+      </form>
+    </div>
+  </StandardModal>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from '@cy/i18n'
+import StandardModal from '@packages/frontend-shared/src/components/StandardModal.vue'
+import { ref } from 'vue'
+import Input from '../../../../frontend-shared/src/components/Input.vue'
+
+const { t } = useI18n()
+
+const testName = ref('')
+
+const props = defineProps<{
+  open: boolean
+  studioStore: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+function submit (e) {
+  e.preventDefault()
+
+  props.studioStore.save(testName.value)
+}
+
+</script>
diff --git a/packages/app/src/static/studio.gif b/packages/app/src/static/studio.gif
new file mode 100644
index 000000000000..d0f7c47cc516
Binary files /dev/null and b/packages/app/src/static/studio.gif differ
diff --git a/packages/app/src/store/studio-store.ts b/packages/app/src/store/studio-store.ts
index a83dccf72530..a5e8dbd8f871 100644
--- a/packages/app/src/store/studio-store.ts
+++ b/packages/app/src/store/studio-store.ts
@@ -76,7 +76,7 @@ const tagNamesWithValue = [
   'METER',
   'LI',
   'OPTION',
-  'PROGESS',
+  'PROGRESS',
   'PARAM',
   'TEXTAREA',
 ]
@@ -92,6 +92,7 @@ export interface StudioLog {
 interface StudioRecorderState {
   initModalIsOpen: boolean
   saveModalIsOpen: boolean
+  instructionModalIsOpen: boolean
   logs: StudioLog[]
   isLoading: boolean
   isActive: boolean
@@ -113,11 +114,133 @@ interface StudioRecorderState {
   _currentId: number
 }
 
+// interface StudioRecorderGetters {
+//   hasRunnableId: (state: StudioRecorderState) => boolean
+//   isOpen: (state: StudioRecorderState) => boolean
+//   isEmpty: (state: StudioRecorderState) => boolean
+//   isReady: (state: StudioRecorderState) => boolean
+//   hookId: (state: StudioRecorderState) => string
+//   needsUrl: (state: StudioRecorderState) => boolean
+//   testError: (state: StudioRecorderState) => {id: string, state: 'failed'}
+// }
+
+// interface StudioRecorderActions {
+//   setTestId: (testId: string) => void
+
+//   setSuiteId: (suiteId: string) => void
+
+//   clearRunnableIds: () => void
+
+//   showInitModal: () => void
+
+//   closeInitModal: () => void
+
+//   openInstructionModal: () => void
+
+//   closeInstructionModal: () => void
+
+//   showSaveModal: () => void
+
+//   closeSaveModal: () => void
+
+//   startLoading: () => void
+//   setInactive: () => void
+
+//   setUrl: (url?: string) => void
+
+//   testFailed: () => void
+
+//   initialize: (config: any, state: any) => void
+
+//   interceptTest: (test: any) => void
+
+//   start: (body: any) => void
+
+//   stop: () => void
+
+//   reset: () => void
+
+//   cancel: () => void
+
+//   startSave: () => void
+
+//   save: (testName?: string) => void
+
+//   visitUrl: (url?: string) => void
+
+//   _recordEvent: (event: any) => void
+
+//   _removeLastLogIfType: (selector?: string) => void
+
+//   removeLog: (commandId?: number) => void
+
+//   _addLog: (log: StudioLog) => void
+
+//   _addAssertion: ($el: HTMLElement, ...args: unknown[]) => void
+
+//   saveError: (err: Error) => {id: string, err: any}
+
+//   setFileDetails: (fileDetails: any) => void
+
+//   setAbsoluteFile: (absoluteFile: any) => void
+
+//   setRunnableTitle: (runnableTitle: any) => void
+
+//   _clearPreviousMouseEvent: () => void
+
+//   _matchPreviousMouseEvent: (el: any) => boolean
+
+//   attachListeners: (body: HTMLBodyElement) => void
+
+//   removeListeners: () => void
+
+//   copyToClipboard: (commandsText: any) => Promise<void>
+
+//   _trustEvent: (event: any) => boolean
+
+//   _recordMouseEvent: (event: any) => void
+
+//   _getId: () => void
+
+//   _getName: (event: any, $el: any) => any
+
+//   _getMessage: (event: any, $el: any) => any
+
+//   _shouldRecordEvent: (event: any, $el: any) => boolean
+
+//   _generateLog: (args: { id: `s${string}`, name: string, message: unknown, type: 'parent' | 'child', number?: number }) => CommandLog
+
+//   _generateBothLogs: (log: any) => [CommandLog, CommandLog]
+
+//   _addClearLog: (selector: any) => void
+
+//   _updateLog: (log: StudioLog) => void
+
+//   _updateLastLog: (selector: string | undefined, name: string, message: unknown) => boolean
+
+//   _generateAssertionMessage: ($el: HTMLElement, ...args: any[]) => string
+
+//   _isAssertionsMenu: ($el: any) => any
+
+//   _openAssertionsMenu: (event: any) => void
+
+//   _closeAssertionsMenu: () => void
+
+//   _generatePossibleAssertions: ($el: JQuery<Element>) => Array<{
+//     type: string
+//     options?: unknown[] | undefined
+//   }>
+// }
+
+// TODO: Add types for getters and actions here
+// export type StudioStore = Store<'studioRecorder', StudioRecorderState, StudioRecorderGetters, StudioRecorderActions>
+
 export const useStudioStore = defineStore('studioRecorder', {
   state: (): StudioRecorderState => {
     return {
       initModalIsOpen: false,
       saveModalIsOpen: false,
+      instructionModalIsOpen: false,
       logs: [],
       url: '',
       isLoading: false,
@@ -151,6 +274,14 @@ export const useStudioStore = defineStore('studioRecorder', {
       this.initModalIsOpen = false
     },
 
+    openInstructionModal () {
+      this.instructionModalIsOpen = true
+    },
+
+    closeInstructionModal () {
+      this.instructionModalIsOpen = false
+    },
+
     showSaveModal () {
       this.saveModalIsOpen = true
     },
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index ed9255c00565..5af80fab5d02 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -798,6 +798,18 @@
       "buttonHref": "https://on.cypress.io/viewport",
       "infoText": "The viewport determines the width and height of your application under test. By default the viewport will be {0} by {1} for {2} testing.",
       "configText": "Additionally, you can override this value in your {2} or via the {4} command."
+    },
+    "studio": {
+      "studio": "Studio",
+      "studioDescription": "Generate Cypress commands by interacting with your site as an end user would. Then, save these commands directly to your test file.",
+      "studioDetailedDescription": "Generate and save commands directly to your test suite by interacting with your app as an end user would. Right click on an element to add an assertion. Studio will track events that generate the following commands:",
+      "getStartedButton": "Get Started",
+      "feedbackPrompt": "Your {0} will be highly influential to our team.",
+      "betaMessage": "This feature is currently in Beta and we will be adding more commands and abilities in the future.",
+      "feedbackLink": "feedback",
+      "saveNewTest": "Save New Test",
+      "testName": "Test Name",
+      "saveTestButton": "Save Test"
     }
   },
   "warnings": {
diff --git a/packages/reporter/src/lib/app-state.ts b/packages/reporter/src/lib/app-state.ts
index 2ccd675a92e0..c216c26c8436 100644
--- a/packages/reporter/src/lib/app-state.ts
+++ b/packages/reporter/src/lib/app-state.ts
@@ -8,6 +8,8 @@ interface DefaultAppState {
   nextCommandName: string | null | undefined
   pinnedSnapshotId: number | string | null
   studioActive: boolean
+  experimentalStudioEnabled: boolean
+  studioRecorder: any
 }
 
 // these are used for the `reset` method
@@ -19,6 +21,8 @@ const defaults: DefaultAppState = {
   nextCommandName: null,
   pinnedSnapshotId: null,
   studioActive: false,
+  experimentalStudioEnabled: false,
+  studioRecorder: {},
 }
 
 class AppState {
@@ -30,6 +34,8 @@ class AppState {
   @observable nextCommandName = defaults.nextCommandName
   @observable pinnedSnapshotId = defaults.pinnedSnapshotId
   @observable studioActive = defaults.studioActive
+  @observable experimentalStudioEnabled = defaults.experimentalStudioEnabled
+  @observable studioRecorder = defaults.studioRecorder
 
   isStopped = false;
   _resetAutoScrollingEnabledTo = true;
@@ -92,6 +98,10 @@ class AppState {
     this.studioActive = studioActive
   }
 
+  setExperimentalStudioEnabled (experimentalStudioEnabled: boolean) {
+    this.experimentalStudioEnabled = experimentalStudioEnabled
+  }
+
   reset () {
     _.each(defaults, (value: any, key: string) => {
       this[key] = value
diff --git a/packages/reporter/src/main.tsx b/packages/reporter/src/main.tsx
index 22756a2d2d07..df5a70b1bdaf 100644
--- a/packages/reporter/src/main.tsx
+++ b/packages/reporter/src/main.tsx
@@ -35,6 +35,7 @@ interface BaseReporterProps {
   renderReporterHeader?: (props: ReporterHeaderProps) => JSX.Element
   experimentalStudioEnabled: boolean
   runnerStore: MobxRunnerStore
+  studioRecorder: any
 }
 
 export interface SingleReporterProps extends BaseReporterProps{
@@ -80,6 +81,7 @@ class Reporter extends Component<SingleReporterProps> {
             scroller={scroller}
             spec={this.props.runnerStore.spec}
             statsStore={this.props.statsStore}
+            experimentalStudioEnabled={true}
           />
         )}
       </div>
diff --git a/packages/reporter/src/runnables/runnable-and-suite.tsx b/packages/reporter/src/runnables/runnable-and-suite.tsx
index 9646f6da9aaf..bcfe366ecdcd 100644
--- a/packages/reporter/src/runnables/runnable-and-suite.tsx
+++ b/packages/reporter/src/runnables/runnable-and-suite.tsx
@@ -20,9 +20,10 @@ import WandIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/ic
 interface SuiteProps {
   eventManager?: Events
   model: SuiteModel
+  experimentalStudioEnabled: boolean
 }
 
-const Suite = observer(({ eventManager = events, model }: SuiteProps) => {
+const Suite = observer(({ eventManager = events, model, experimentalStudioEnabled }: SuiteProps) => {
   const _launchStudio = (e: MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
@@ -33,7 +34,7 @@ const Suite = observer(({ eventManager = events, model }: SuiteProps) => {
   const _header = () => (
     <>
       <span className='runnable-title'>{model.title}</span>
-      {appState.studioActive && (
+      {experimentalStudioEnabled && (
         <span className='runnable-controls'>
           <Tooltip placement='right' title='Add New Test' className='cy-tooltip'>
             <a onClick={_launchStudio} className='runnable-controls-studio'>
@@ -54,7 +55,7 @@ const Suite = observer(({ eventManager = events, model }: SuiteProps) => {
       isOpen
     >
       <ul className='runnables'>
-        {_.map(model.children, (runnable) => <Runnable key={runnable.id} model={runnable} />)}
+        {_.map(model.children, (runnable) => <Runnable key={runnable.id} model={runnable} experimentalStudioEnabled={experimentalStudioEnabled} />)}
       </ul>
     </Collapsible>
   )
@@ -63,6 +64,7 @@ const Suite = observer(({ eventManager = events, model }: SuiteProps) => {
 export interface RunnableProps {
   model: TestModel | SuiteModel
   appState: AppState
+  experimentalStudioEnabled: boolean
 }
 
 // NOTE: some of the driver tests dig into the React instance for this component
@@ -76,7 +78,7 @@ class Runnable extends Component<RunnableProps> {
   }
 
   render () {
-    const { appState, model } = this.props
+    const { appState, model, experimentalStudioEnabled } = this.props
 
     return (
       <li
@@ -86,7 +88,7 @@ class Runnable extends Component<RunnableProps> {
         })}
         data-model-state={model.state}
       >
-        {model.type === 'test' ? <Test model={model as TestModel} /> : <Suite model={model as SuiteModel} />}
+        {model.type === 'test' ? <Test model={model as TestModel} experimentalStudioEnabled={experimentalStudioEnabled} /> : <Suite model={model as SuiteModel} experimentalStudioEnabled={experimentalStudioEnabled} />}
       </li>
     )
   }
diff --git a/packages/reporter/src/runnables/runnables.tsx b/packages/reporter/src/runnables/runnables.tsx
index 8a3e0825edc5..0b09a8839b95 100644
--- a/packages/reporter/src/runnables/runnables.tsx
+++ b/packages/reporter/src/runnables/runnables.tsx
@@ -66,7 +66,7 @@ const RunnablesEmptyState = ({ spec, eventManager = events }: RunnablesEmptyStat
           {appState.studioActive && (
             <>
               <a className='open-studio' onClick={_launchStudio}><h3><StudioIcon /> Create test with Cypress Studio</h3></a>
-              <p className='open-studio-desc text-muted'>Use an interactive tool to author a test right here.</p>
+              <p className='text-muted open-studio-desc'>Use an interactive tool to author a test right here.</p>
             </>
           )}
         </>
@@ -79,12 +79,13 @@ const RunnablesEmptyState = ({ spec, eventManager = events }: RunnablesEmptyStat
 
 interface RunnablesListProps {
   runnables: RunnableArray
+  experimentalStudioEnabled: boolean
 }
 
-const RunnablesList = observer(({ runnables }: RunnablesListProps) => (
+const RunnablesList = observer(({ runnables, experimentalStudioEnabled }: RunnablesListProps) => (
   <div className='wrap'>
     <ul className='runnables'>
-      {_.map(runnables, (runnable) => <Runnable key={runnable.id} model={runnable} />)}
+      {_.map(runnables, (runnable) => <Runnable key={runnable.id} model={runnable} experimentalStudioEnabled={experimentalStudioEnabled} />)}
     </ul>
   </div>
 ))
@@ -93,9 +94,10 @@ export interface RunnablesContentProps {
   runnablesStore: RunnablesStore
   spec: Cypress.Cypress['spec']
   error?: RunnablesErrorModel
+  experimentalStudioEnabled: boolean
 }
 
-const RunnablesContent = observer(({ runnablesStore, spec, error }: RunnablesContentProps) => {
+const RunnablesContent = observer(({ runnablesStore, spec, error, experimentalStudioEnabled }: RunnablesContentProps) => {
   const { isReady, runnables, runnablesHistory } = runnablesStore
 
   if (!isReady) {
@@ -116,7 +118,7 @@ const RunnablesContent = observer(({ runnablesStore, spec, error }: RunnablesCon
 
   const isRunning = specPath === runnablesStore.runningSpec
 
-  return <RunnablesList runnables={isRunning ? runnables : runnablesHistory[specPath]} />
+  return <RunnablesList runnables={isRunning ? runnables : runnablesHistory[specPath]} experimentalStudioEnabled={experimentalStudioEnabled} />
 })
 
 export interface RunnablesProps {
@@ -126,12 +128,13 @@ export interface RunnablesProps {
   spec: Cypress.Cypress['spec']
   scroller: Scroller
   appState?: AppState
+  experimentalStudioEnabled: boolean
 }
 
 @observer
 class Runnables extends Component<RunnablesProps> {
   render () {
-    const { error, runnablesStore, spec } = this.props
+    const { error, runnablesStore, spec, experimentalStudioEnabled } = this.props
 
     return (
       <div ref='container' className='container'>
@@ -140,6 +143,7 @@ class Runnables extends Component<RunnablesProps> {
           runnablesStore={runnablesStore}
           spec={spec}
           error={error}
+          experimentalStudioEnabled={experimentalStudioEnabled}
         />
       </div>
     )
diff --git a/packages/reporter/src/test/test.tsx b/packages/reporter/src/test/test.tsx
index 3291af0ead98..41c579e8594f 100644
--- a/packages/reporter/src/test/test.tsx
+++ b/packages/reporter/src/test/test.tsx
@@ -106,6 +106,7 @@ interface TestProps {
   runnablesStore: RunnablesStore
   scroller: Scroller
   model: TestModel
+  experimentalStudioEnabled: boolean
 }
 
 @observer
@@ -182,7 +183,7 @@ class Test extends Component<TestProps> {
   _controls () {
     let controls: Array<JSX.Element> = []
 
-    if (this.props.model.state) {
+    if (this.props.model.state === 'failed') {
       controls.push(
         <Tooltip key={`test-failed-${this.props.model}`} placement='top' title='One or more commands failed' className='cy-tooltip'>
           <span>
@@ -192,13 +193,15 @@ class Test extends Component<TestProps> {
       )
     }
 
-    controls.push(
-      <Tooltip key={`studio-command-${this.props.model}`} placement='right' title='Add Commands to Test' className='cy-tooltip'>
-        <a onClick={this._launchStudio} className='runnable-controls-studio'>
-          <WandIcon />
-        </a>
-      </Tooltip>,
-    )
+    if (this.props.experimentalStudioEnabled) {
+      controls.push(
+        <Tooltip key={`studio-command-${this.props.model}`} placement='right' title='Add Commands to Test' className='cy-tooltip'>
+          <a onClick={this._launchStudio} className='runnable-controls-studio'>
+            <WandIcon />
+          </a>
+        </Tooltip>,
+      )
+    }
 
     if (controls.length === 0) {
       return null