diff --git a/src/homepageExperience/components/steps/Finish.tsx b/src/homepageExperience/components/steps/Finish.tsx
index 845372b91a..f9970d0759 100644
--- a/src/homepageExperience/components/steps/Finish.tsx
+++ b/src/homepageExperience/components/steps/Finish.tsx
@@ -21,7 +21,6 @@ import DashboardIntegrations from 'src/homepageExperience/components/steps/Dashb
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {isOrgIOx} from 'src/organizations/selectors'
 
 type OwnProps = {
@@ -96,8 +95,10 @@ export const Finish = (props: OwnProps) => {
     }
   }, [finishStepCompleted, markStepAsCompleted, wizardEventName])
 
+  const isIOxOrg = useSelector(isOrgIOx)
+
   const writeOnly =
-    useSelector(isOrgIOx) &&
+    isIOxOrg &&
     (wizardEventName === 'arduinoWizard' || wizardEventName === 'nodejsWizard')
 
   const outroContent = writeOnly
@@ -124,7 +125,7 @@ export const Finish = (props: OwnProps) => {
           alignItems={AlignItems.Stretch}
           direction={FlexDirection.Row}
         >
-          {isFlagEnabled('ioxOnboarding') ? (
+          {isIOxOrg ? (
             <ResourceCard className="homepage-wizard-next-steps">
               <SafeBlankLink
                 href="https://docs.influxdata.com/influxdb/cloud-serverless/write-data/best-practices/"
@@ -154,7 +155,7 @@ export const Finish = (props: OwnProps) => {
               </p>
             </ResourceCard>
           )}
-          {!isFlagEnabled('ioxOnboarding') && (
+          {!isIOxOrg && (
             <ResourceCard className="homepage-wizard-next-steps">
               <SafeBlankLink
                 href="https://university.influxdata.com/"
@@ -187,13 +188,13 @@ export const Finish = (props: OwnProps) => {
         </FlexBox>
         {props.wizardEventName !== 'cliWizard' &&
         props.wizardEventName !== 'arduinoWizard' &&
-        !isFlagEnabled('ioxOnboarding') ? (
+        !isIOxOrg ? (
           <SampleAppCard
             handleNextStepEvent={handleNextStepEvent}
             wizardEventName={props.wizardEventName}
           />
         ) : null}
-        {isFlagEnabled('ioxOnboarding') && (
+        {isIOxOrg && (
           <DashboardIntegrations
             handleNextStepEvent={handleNextStepEvent}
             wizardEventName={props.wizardEventName}
diff --git a/src/homepageExperience/containers/ArduinoWizard.tsx b/src/homepageExperience/containers/ArduinoWizard.tsx
index 78fb2455e1..6b2c112200 100644
--- a/src/homepageExperience/containers/ArduinoWizard.tsx
+++ b/src/homepageExperience/containers/ArduinoWizard.tsx
@@ -1,139 +1,49 @@
 // Libraries
-import React, {PureComponent} from 'react'
-import classnames from 'classnames'
+import React, {FC, useState} from 'react'
+import {useSelector} from 'react-redux'
 
-// Components
-import {
-  Button,
-  ComponentColor,
-  ComponentSize,
-  ComponentStatus,
-  Page,
-  SubwayNav,
-} from '@influxdata/clockface'
-import {ArduinoIcon} from 'src/homepageExperience/components/HomepageIcons'
+// Contexts
+import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
 
-// Steps
-import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/arduino/ExecuteAggregateQuery'
-import {ExecuteQuery} from 'src/homepageExperience/components/steps/arduino/ExecuteQuery'
-import {Finish} from 'src/homepageExperience/components/steps/Finish'
-import {InitializeClient} from 'src/homepageExperience/components/steps/arduino/InitializeClient'
-import {InstallDependencies} from 'src/homepageExperience/components/steps/arduino/InstallDependencies'
+// Components
 import {Overview} from 'src/homepageExperience/components/steps/Overview'
 import {PrepareIde} from 'src/homepageExperience/components/steps/arduino/PrepareIde'
+import {InstallDependencies} from 'src/homepageExperience/components/steps/arduino/InstallDependencies'
+import {InitializeClient} from 'src/homepageExperience/components/steps/arduino/InitializeClient'
 import {WriteData} from 'src/homepageExperience/components/steps/arduino/WriteData'
-import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
+import {ExecuteQuery} from 'src/homepageExperience/components/steps/arduino/ExecuteQuery'
+import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/arduino/ExecuteAggregateQuery'
+import {Finish} from 'src/homepageExperience/components/steps/Finish'
+
+import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer'
+import {ArduinoIcon} from 'src/homepageExperience/components/HomepageIcons'
+
+// Selectors
+import {isOrgIOx} from 'src/organizations/selectors'
 
 // Utils
-import {event} from 'src/cloud/utils/reporting'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {
-  scrollNextPageIntoView,
   HOMEPAGE_NAVIGATION_STEPS_ARDUINO,
   HOMEPAGE_NAVIGATION_STEPS_ARDUINO_WRITE_ONLY,
 } from 'src/homepageExperience/utils'
-import {normalizeEventName} from 'src/cloud/utils/reporting'
 
-interface State {
-  currentStep: number
-  selectedBucket: string
-  finishStepCompleted: boolean
-  tokenValue: string
-  finalFeedback: number
-}
+export const ArduinoWizard: FC<{}> = () => {
+  const [selectedBucket, setSelectedBucket] = useState<string>('my-bucket')
+  const [finishStepCompleted, setFinishStepCompleted] = useState<boolean>(false)
+  const [tokenValue, setTokenValue] = useState<string | null>(null)
+  const [finalFeedback, setFinalFeedback] = useState<number | null>(null)
 
-export class ArduinoWizard extends PureComponent<{}, State> {
-  state = {
-    currentStep: 1,
-    selectedBucket: 'sample-bucket',
-    finishStepCompleted: false,
-    tokenValue: null,
-    finalFeedback: null,
-  }
-
-  private handleSelectBucket = (bucketName: string) => {
-    this.setState({selectedBucket: bucketName})
-  }
-
-  private handleMarkStepAsCompleted = () => {
-    this.setState({finishStepCompleted: true})
-  }
-
-  private setTokenValue = (tokenValue: string) => {
-    this.setState({tokenValue: tokenValue})
-  }
-
-  private setFinalFeedback = (feedbackValue: number) => {
-    this.setState({finalFeedback: feedbackValue})
-  }
-
-  subwayNavSteps = isFlagEnabled('ioxOnboarding')
+  const isIOxOrg = useSelector(isOrgIOx)
+  const subwayNavSteps = isIOxOrg
     ? HOMEPAGE_NAVIGATION_STEPS_ARDUINO_WRITE_ONLY
     : HOMEPAGE_NAVIGATION_STEPS_ARDUINO
 
-  handleNextClick = () => {
-    this.setState(
-      {
-        currentStep: Math.min(
-          this.state.currentStep + 1,
-          this.subwayNavSteps.length
-        ),
-      },
-      () => {
-        event(
-          'firstMile.arduinoWizard.next.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 2].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
-  }
-
-  handlePreviousClick = () => {
-    this.setState(
-      {currentStep: Math.max(this.state.currentStep - 1, 1)},
-      () => {
-        event(
-          'firstMile.arduinoWizard.previous.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
-  }
-
-  handleNavClick = (clickedStep: number) => {
-    this.setState({currentStep: clickedStep})
-    event(
-      'firstMile.arduinoWizard.subNav.clicked',
-      {},
-      {
-        currentStep: normalizeEventName(
-          this.subwayNavSteps[clickedStep - 1].name
-        ),
-      }
-    )
-    scrollNextPageIntoView()
+  const handleMarkStepAsCompleted = () => {
+    setFinishStepCompleted(true)
   }
 
-  renderStep = () => {
-    switch (this.state.currentStep) {
+  const renderStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="arduinoWizard" />
       }
@@ -146,41 +56,41 @@ export class ArduinoWizard extends PureComponent<{}, State> {
       case 4: {
         return (
           <InitializeClient
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
-            onSelectBucket={this.handleSelectBucket}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
+            onSelectBucket={setSelectedBucket}
           />
         )
       }
       case 5: {
-        return <WriteData bucket={this.state.selectedBucket} />
+        return <WriteData bucket={selectedBucket} />
       }
       case 6: {
-        if (isFlagEnabled('ioxOnboarding')) {
+        if (isIOxOrg) {
           return (
             <Finish
               wizardEventName="arduinoWizard"
-              markStepAsCompleted={this.handleMarkStepAsCompleted}
-              finishStepCompleted={this.state.finishStepCompleted}
-              finalFeedback={this.state.finalFeedback}
-              setFinalFeedback={this.setFinalFeedback}
+              markStepAsCompleted={handleMarkStepAsCompleted}
+              finishStepCompleted={finishStepCompleted}
+              finalFeedback={finalFeedback}
+              setFinalFeedback={setFinalFeedback}
             />
           )
         } else {
-          return <ExecuteQuery bucket={this.state.selectedBucket} />
+          return <ExecuteQuery bucket={selectedBucket} />
         }
       }
       case 7: {
-        return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
+        return <ExecuteAggregateQuery bucket={selectedBucket} />
       }
       case 8: {
         return (
           <Finish
             wizardEventName="arduinoWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -190,73 +100,16 @@ export class ArduinoWizard extends PureComponent<{}, State> {
     }
   }
 
-  render() {
-    return (
-      <Page>
-        <Page.Header fullWidth={false} />
-        <Page.Contents scrollable={true}>
-          <div className="homepage-wizard-container">
-            <aside className="homepage-wizard-container--subway">
-              <div
-                className="homepage-wizard-container--subway-inner"
-                data-testid="subway-nav"
-              >
-                <SubwayNav
-                  currentStep={this.state.currentStep}
-                  onStepClick={this.handleNavClick}
-                  navigationSteps={this.subwayNavSteps}
-                  settingUpIcon={ArduinoIcon}
-                  settingUpText="Arduino"
-                  setupTime="5 minutes"
-                />
-              </div>
-            </aside>
-            <div className="homepage-wizard-container--main">
-              <div
-                className={classnames(
-                  'homepage-wizard-container--main-wrapper',
-                  {
-                    verticallyCentered:
-                      this.state.currentStep === 1 ||
-                      this.state.currentStep === this.subwayNavSteps.length,
-                  }
-                )}
-              >
-                <WriteDataDetailsContextProvider>
-                  {this.renderStep()}
-                </WriteDataDetailsContextProvider>
-              </div>
-
-              <div className="homepage-wizard-container-footer">
-                <Button
-                  onClick={this.handlePreviousClick}
-                  text="Previous"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Tertiary}
-                  status={
-                    this.state.currentStep > 1
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="arduino-prev-button"
-                />
-                <Button
-                  onClick={this.handleNextClick}
-                  text="Next"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Primary}
-                  status={
-                    this.state.currentStep < this.subwayNavSteps.length
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="arduino-next-button"
-                />
-              </div>
-            </div>
-          </div>
-        </Page.Contents>
-      </Page>
-    )
-  }
+  return (
+    <WriteDataDetailsContextProvider>
+      <WizardContainer
+        icon={ArduinoIcon}
+        subwayNavSteps={subwayNavSteps}
+        language="arduino"
+        languageTitle="Arduino"
+      >
+        {currentStep => renderStep(currentStep)}
+      </WizardContainer>
+    </WriteDataDetailsContextProvider>
+  )
 }
diff --git a/src/homepageExperience/containers/CSharpWizard.tsx b/src/homepageExperience/containers/CSharpWizard.tsx
index 77a886f0bc..7e3ed98d39 100644
--- a/src/homepageExperience/containers/CSharpWizard.tsx
+++ b/src/homepageExperience/containers/CSharpWizard.tsx
@@ -1,141 +1,53 @@
-import React, {PureComponent} from 'react'
-import classnames from 'classnames'
-
-import {
-  Button,
-  ComponentColor,
-  ComponentSize,
-  ComponentStatus,
-  Page,
-  SubwayNav,
-} from '@influxdata/clockface'
+// Libraries
+import React, {FC, useState} from 'react'
+import {useSelector} from 'react-redux'
 
+// Contexts
 import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
 
-import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/csharp/InstallDependenciesSql'
+// Components
 import {Overview} from 'src/homepageExperience/components/steps/Overview'
+import {InstallDependencies} from 'src/homepageExperience/components/steps/csharp/InstallDependencies'
+import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/csharp/InstallDependenciesSql'
 import {Tokens} from 'src/homepageExperience/components/steps/Tokens'
+import {InitializeClient} from 'src/homepageExperience/components/steps/csharp/InitializeClient'
 import {InitializeClientSql} from 'src/homepageExperience/components/steps/csharp/InitializeClientSql'
+import {WriteData} from 'src/homepageExperience/components/steps/csharp/WriteData'
 import {WriteDataSql} from 'src/homepageExperience/components/steps/csharp/WriteDataSql'
+import {ExecuteQuery} from 'src/homepageExperience/components/steps/csharp/ExecuteQuery'
 import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/csharp/ExecuteQuerySql'
+import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/csharp/ExecuteAggregateQuery'
 import {Finish} from 'src/homepageExperience/components/steps/Finish'
-// Utils
-import {event, normalizeEventName} from 'src/cloud/utils/reporting'
 
+import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer'
 import {CSharpIcon} from 'src/homepageExperience/components/HomepageIcons'
 
+// Selectors
+import {isOrgIOx} from 'src/organizations/selectors'
+
+// Utils
 import {
   HOMEPAGE_NAVIGATION_STEPS,
   HOMEPAGE_NAVIGATION_STEPS_SQL,
-  scrollNextPageIntoView,
 } from 'src/homepageExperience/utils'
-import {isFlagEnabled} from '../../shared/utils/featureFlag'
-import {InstallDependencies} from '../components/steps/csharp/InstallDependencies'
-import {InitializeClient} from '../components/steps/csharp/InitializeClient'
-import {WriteData} from '../components/steps/csharp/WriteData'
-import {ExecuteQuery} from '../components/steps/csharp/ExecuteQuery'
-import {ExecuteAggregateQuery} from '../components/steps/csharp/ExecuteAggregateQuery'
 
-interface State {
-  currentStep: number
-  selectedBucket: string
-  finishStepCompleted: boolean
-  tokenValue: string
-  finalFeedback: number
-}
+export const CSharpWizard: FC<{}> = () => {
+  const [selectedBucket, setSelectedBucket] = useState<string>('my-bucket')
+  const [finishStepCompleted, setFinishStepCompleted] = useState<boolean>(false)
+  const [tokenValue, setTokenValue] = useState<string | null>(null)
+  const [finalFeedback, setFinalFeedback] = useState<number | null>(null)
 
-export class CSharpWizard extends PureComponent<null, State> {
-  state = {
-    currentStep: 1,
-    selectedBucket: 'my-bucket',
-    finishStepCompleted: false,
-    tokenValue: null,
-    finalFeedback: null,
-  }
-
-  subwayNavSteps = isFlagEnabled('ioxOnboarding')
+  const isIOxOrg = useSelector(isOrgIOx)
+  const subwayNavSteps = isIOxOrg
     ? HOMEPAGE_NAVIGATION_STEPS_SQL
     : HOMEPAGE_NAVIGATION_STEPS
 
-  private handleSelectBucket = (bucketName: string) => {
-    this.setState({selectedBucket: bucketName})
-  }
-
-  private handleMarkStepAsCompleted = () => {
-    this.setState({finishStepCompleted: true})
-  }
-
-  private setTokenValue = (tokenValue: string) => {
-    this.setState({tokenValue})
-  }
-
-  private setFinalFeedback = (feedbackValue: number) => {
-    this.setState({finalFeedback: feedbackValue})
-  }
-
-  handleNextClick = () => {
-    this.setState(
-      {
-        currentStep: Math.min(
-          this.state.currentStep + 1,
-          this.subwayNavSteps.length
-        ),
-      },
-      () => {
-        event(
-          'firstMile.csharpWizard.next.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 2].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
+  const handleMarkStepAsCompleted = () => {
+    setFinishStepCompleted(true)
   }
 
-  handlePreviousClick = () => {
-    this.setState(
-      {currentStep: Math.max(this.state.currentStep - 1, 1)},
-      () => {
-        event(
-          'firstMile.csharpWizard.previous.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
-  }
-
-  handleNavClick = (clickedStep: number) => {
-    this.setState({currentStep: clickedStep})
-    event(
-      'firstMile.csharpWizard.subNav.clicked',
-      {},
-      {
-        currentStep: normalizeEventName(
-          this.subwayNavSteps[clickedStep - 1].name
-        ),
-      }
-    )
-    scrollNextPageIntoView()
-  }
-
-  renderSqlStep = () => {
-    switch (this.state.currentStep) {
+  const renderSqlStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="csharpWizard" />
       }
@@ -146,8 +58,8 @@ export class CSharpWizard extends PureComponent<null, State> {
         return (
           <Tokens
             wizardEventName="csharpWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
@@ -155,19 +67,19 @@ export class CSharpWizard extends PureComponent<null, State> {
         return <InitializeClientSql />
       }
       case 5: {
-        return <WriteDataSql onSelectBucket={this.handleSelectBucket} />
+        return <WriteDataSql onSelectBucket={setSelectedBucket} />
       }
       case 6: {
-        return <ExecuteQuerySql bucket={this.state.selectedBucket} />
+        return <ExecuteQuerySql bucket={selectedBucket} />
       }
       case 7: {
         return (
           <Finish
             wizardEventName="csharpSqlWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -177,8 +89,8 @@ export class CSharpWizard extends PureComponent<null, State> {
     }
   }
 
-  renderFluxStep = () => {
-    switch (this.state.currentStep) {
+  const renderFluxStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="csharpWizard" />
       }
@@ -189,8 +101,8 @@ export class CSharpWizard extends PureComponent<null, State> {
         return (
           <Tokens
             wizardEventName="csharpWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
@@ -198,22 +110,22 @@ export class CSharpWizard extends PureComponent<null, State> {
         return <InitializeClient />
       }
       case 5: {
-        return <WriteData onSelectBucket={this.handleSelectBucket} />
+        return <WriteData onSelectBucket={setSelectedBucket} />
       }
       case 6: {
-        return <ExecuteQuery bucket={this.state.selectedBucket} />
+        return <ExecuteQuery bucket={selectedBucket} />
       }
       case 7: {
-        return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
+        return <ExecuteAggregateQuery bucket={selectedBucket} />
       }
       case 8: {
         return (
           <Finish
             wizardEventName="csharpSqlWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -223,77 +135,18 @@ export class CSharpWizard extends PureComponent<null, State> {
     }
   }
 
-  render() {
-    const {currentStep} = this.state
-
-    return (
-      <Page>
-        <Page.Header fullWidth={false} />
-        <Page.Contents scrollable={true}>
-          <div className="homepage-wizard-container">
-            <aside className="homepage-wizard-container--subway">
-              <div
-                className="homepage-wizard-container--subway-inner"
-                data-testid="subway-nav"
-              >
-                <SubwayNav
-                  currentStep={this.state.currentStep}
-                  onStepClick={this.handleNavClick}
-                  navigationSteps={this.subwayNavSteps}
-                  settingUpIcon={CSharpIcon}
-                  settingUpText="C#"
-                  setupTime="5 minutes"
-                />
-              </div>
-            </aside>
-            <div className="homepage-wizard-container--main">
-              <div
-                className={classnames(
-                  'homepage-wizard-container--main-wrapper',
-                  {
-                    verticallyCentered:
-                      this.state.currentStep === 1 ||
-                      this.state.currentStep === this.subwayNavSteps.length,
-                  }
-                )}
-              >
-                <WriteDataDetailsContextProvider>
-                  {isFlagEnabled('ioxOnboarding')
-                    ? this.renderSqlStep()
-                    : this.renderFluxStep()}
-                </WriteDataDetailsContextProvider>
-              </div>
-
-              <div className="homepage-wizard-container-footer">
-                <Button
-                  onClick={this.handlePreviousClick}
-                  text="Previous"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Tertiary}
-                  status={
-                    currentStep > 1
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="csharp-prev-button"
-                />
-                <Button
-                  onClick={this.handleNextClick}
-                  text="Next"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Primary}
-                  status={
-                    currentStep < this.subwayNavSteps.length
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="csharp-next-button"
-                />
-              </div>
-            </div>
-          </div>
-        </Page.Contents>
-      </Page>
-    )
-  }
+  return (
+    <WriteDataDetailsContextProvider>
+      <WizardContainer
+        icon={CSharpIcon}
+        subwayNavSteps={subwayNavSteps}
+        language="csharp"
+        languageTitle="C#"
+      >
+        {isIOxOrg
+          ? currentStep => renderSqlStep(currentStep)
+          : currentStep => renderFluxStep(currentStep)}
+      </WizardContainer>
+    </WriteDataDetailsContextProvider>
+  )
 }
diff --git a/src/homepageExperience/containers/CliWizard.tsx b/src/homepageExperience/containers/CliWizard.tsx
index 6c9fb0f9dc..d60b5cb16e 100644
--- a/src/homepageExperience/containers/CliWizard.tsx
+++ b/src/homepageExperience/containers/CliWizard.tsx
@@ -1,141 +1,49 @@
 // Libraries
-import React, {PureComponent} from 'react'
-import classnames from 'classnames'
+import React, {FC, useState} from 'react'
+import {useSelector} from 'react-redux'
 
-// Components
-import {
-  Button,
-  ComponentColor,
-  ComponentSize,
-  ComponentStatus,
-  Page,
-  SubwayNav,
-} from '@influxdata/clockface'
-import {CLIIcon} from 'src/homepageExperience/components/HomepageIcons'
+// Contexts
+import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
 
-// Steps
-import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/cli/ExecuteAggregateQuery'
-import {ExecuteQuery} from 'src/homepageExperience/components/steps/cli/ExecuteQuery'
-import {Finish} from 'src/homepageExperience/components/steps/Finish'
-import {InitializeClient} from 'src/homepageExperience/components/steps/cli/InitializeClient'
-import {InstallDependencies} from 'src/homepageExperience/components/steps/cli/InstallDependencies'
+// Components
 import {Overview} from 'src/homepageExperience/components/steps/Overview'
+import {InstallDependencies} from 'src/homepageExperience/components/steps/cli/InstallDependencies'
+import {InitializeClient} from 'src/homepageExperience/components/steps/cli/InitializeClient'
 import {WriteData} from 'src/homepageExperience/components/steps/cli/WriteData'
-import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
+import {ExecuteQuery} from 'src/homepageExperience/components/steps/cli/ExecuteQuery'
+import {ExecuteQuerySql} from '../components/steps/cli/ExecuteQuerySql'
+import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/cli/ExecuteAggregateQuery'
+import {Finish} from 'src/homepageExperience/components/steps/Finish'
+
+import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer'
+import {CLIIcon} from 'src/homepageExperience/components/HomepageIcons'
+
+// Selectors
+import {isOrgIOx} from 'src/organizations/selectors'
 
 // Utils
-import {event} from 'src/cloud/utils/reporting'
 import {
-  scrollNextPageIntoView,
   HOMEPAGE_NAVIGATION_STEPS_SHORT,
   HOMEPAGE_NAVIGATION_STEPS_SHORT_SQL,
 } from 'src/homepageExperience/utils'
-import {normalizeEventName} from 'src/cloud/utils/reporting'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
-import {ExecuteQuerySql} from '../components/steps/cli/ExecuteQuerySql'
 
-interface State {
-  currentStep: number
-  selectedBucket: string
-  finishStepCompleted: boolean
-  tokenValue: string
-  finalFeedback: number
-}
+export const CliWizard: FC<{}> = () => {
+  const [selectedBucket, setSelectedBucket] = useState<string>('my-bucket')
+  const [finishStepCompleted, setFinishStepCompleted] = useState<boolean>(false)
+  const [tokenValue, setTokenValue] = useState<string | null>(null)
+  const [finalFeedback, setFinalFeedback] = useState<number | null>(null)
 
-export class CliWizard extends PureComponent<{}, State> {
-  state = {
-    currentStep: 1,
-    selectedBucket: 'sample-bucket',
-    finishStepCompleted: false,
-    tokenValue: null,
-    finalFeedback: null,
-  }
-
-  subwayNavSteps = isFlagEnabled('ioxOnboarding')
+  const isIOxOrg = useSelector(isOrgIOx)
+  const subwayNavSteps = isIOxOrg
     ? HOMEPAGE_NAVIGATION_STEPS_SHORT_SQL
     : HOMEPAGE_NAVIGATION_STEPS_SHORT
 
-  private handleSelectBucket = (bucketName: string) => {
-    this.setState({selectedBucket: bucketName})
-  }
-
-  private handleMarkStepAsCompleted = () => {
-    this.setState({finishStepCompleted: true})
-  }
-
-  private setTokenValue = (tokenValue: string) => {
-    this.setState({tokenValue: tokenValue})
-  }
-
-  private setFinalFeedback = (feedbackValue: number) => {
-    this.setState({finalFeedback: feedbackValue})
-  }
-
-  handleNextClick = () => {
-    this.setState(
-      {
-        currentStep: Math.min(
-          this.state.currentStep + 1,
-          this.subwayNavSteps.length
-        ),
-      },
-      () => {
-        event(
-          'firstMile.cliWizard.next.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 2].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-
-        scrollNextPageIntoView()
-      }
-    )
-  }
-
-  handlePreviousClick = () => {
-    this.setState(
-      {currentStep: Math.max(this.state.currentStep - 1, 1)},
-      () => {
-        event(
-          'firstMile.cliWizard.previous.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-
-        scrollNextPageIntoView()
-      }
-    )
+  const handleMarkStepAsCompleted = () => {
+    setFinishStepCompleted(true)
   }
 
-  handleNavClick = (clickedStep: number) => {
-    this.setState({currentStep: clickedStep})
-    event(
-      'firstMile.cliWizard.subNav.clicked',
-      {},
-      {
-        currentStep: normalizeEventName(
-          this.subwayNavSteps[clickedStep - 1].name
-        ),
-      }
-    )
-    scrollNextPageIntoView()
-  }
-
-  renderStep = () => {
-    switch (this.state.currentStep) {
+  const renderStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="cliWizard" />
       }
@@ -145,45 +53,45 @@ export class CliWizard extends PureComponent<{}, State> {
       case 3: {
         return (
           <InitializeClient
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
-            onSelectBucket={this.handleSelectBucket}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
+            onSelectBucket={setSelectedBucket}
           />
         )
       }
       case 4: {
-        return <WriteData bucket={this.state.selectedBucket} />
+        return <WriteData bucket={selectedBucket} />
       }
       case 5: {
-        if (isFlagEnabled('ioxOnboarding')) {
-          return <ExecuteQuerySql bucket={this.state.selectedBucket} />
+        if (isIOxOrg) {
+          return <ExecuteQuerySql bucket={selectedBucket} />
         } else {
-          return <ExecuteQuery bucket={this.state.selectedBucket} />
+          return <ExecuteQuery bucket={selectedBucket} />
         }
       }
       case 6: {
-        if (isFlagEnabled('ioxOnboarding')) {
+        if (isIOxOrg) {
           return (
             <Finish
               wizardEventName="cliWizard"
-              markStepAsCompleted={this.handleMarkStepAsCompleted}
-              finishStepCompleted={this.state.finishStepCompleted}
-              finalFeedback={this.state.finalFeedback}
-              setFinalFeedback={this.setFinalFeedback}
+              markStepAsCompleted={handleMarkStepAsCompleted}
+              finishStepCompleted={finishStepCompleted}
+              finalFeedback={finalFeedback}
+              setFinalFeedback={setFinalFeedback}
             />
           )
         } else {
-          return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
+          return <ExecuteAggregateQuery bucket={selectedBucket} />
         }
       }
       case 7: {
         return (
           <Finish
             wizardEventName="cliWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -193,73 +101,16 @@ export class CliWizard extends PureComponent<{}, State> {
     }
   }
 
-  render() {
-    return (
-      <Page>
-        <Page.Header fullWidth={false} />
-        <Page.Contents scrollable={true}>
-          <div className="homepage-wizard-container">
-            <aside className="homepage-wizard-container--subway">
-              <div
-                className="homepage-wizard-container--subway-inner"
-                data-testid="subway-nav"
-              >
-                <SubwayNav
-                  currentStep={this.state.currentStep}
-                  onStepClick={this.handleNavClick}
-                  navigationSteps={this.subwayNavSteps}
-                  settingUpIcon={CLIIcon}
-                  settingUpText="InfluxDB CLI"
-                  setupTime="5 minutes"
-                />
-              </div>
-            </aside>
-            <div className="homepage-wizard-container--main">
-              <div
-                className={classnames(
-                  'homepage-wizard-container--main-wrapper',
-                  {
-                    verticallyCentered:
-                      this.state.currentStep === 1 ||
-                      this.state.currentStep === this.subwayNavSteps.length,
-                  }
-                )}
-              >
-                <WriteDataDetailsContextProvider>
-                  {this.renderStep()}
-                </WriteDataDetailsContextProvider>
-              </div>
-
-              <div className="homepage-wizard-container-footer">
-                <Button
-                  onClick={this.handlePreviousClick}
-                  text="Previous"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Tertiary}
-                  status={
-                    this.state.currentStep > 1
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="cli-prev-button"
-                />
-                <Button
-                  onClick={this.handleNextClick}
-                  text="Next"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Primary}
-                  status={
-                    this.state.currentStep < this.subwayNavSteps.length
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="cli-next-button"
-                />
-              </div>
-            </div>
-          </div>
-        </Page.Contents>
-      </Page>
-    )
-  }
+  return (
+    <WriteDataDetailsContextProvider>
+      <WizardContainer
+        icon={CLIIcon}
+        subwayNavSteps={subwayNavSteps}
+        language="cli"
+        languageTitle="InfluxDB CLI"
+      >
+        {currentStep => renderStep(currentStep)}
+      </WizardContainer>
+    </WriteDataDetailsContextProvider>
+  )
 }
diff --git a/src/homepageExperience/containers/GoWizard.tsx b/src/homepageExperience/containers/GoWizard.tsx
index f1c2f00096..497748c36b 100644
--- a/src/homepageExperience/containers/GoWizard.tsx
+++ b/src/homepageExperience/containers/GoWizard.tsx
@@ -1,140 +1,52 @@
-import React, {PureComponent} from 'react'
-import classnames from 'classnames'
+// Libraries
+import React, {FC, useState} from 'react'
+import {useSelector} from 'react-redux'
 
-import {
-  Button,
-  ComponentColor,
-  ComponentSize,
-  ComponentStatus,
-  Page,
-  SubwayNav,
-} from '@influxdata/clockface'
+// Contexts
+import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
 
+// Components
+import {Overview} from 'src/homepageExperience/components/steps/Overview'
 import {InstallDependencies} from 'src/homepageExperience/components/steps/go/InstallDependencies'
 import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/go/InstallDependenciesSql'
-import {Overview} from 'src/homepageExperience/components/steps/Overview'
 import {Tokens} from 'src/homepageExperience/components/steps/Tokens'
 import {InitializeClient} from 'src/homepageExperience/components/steps/go/InitializeClient'
 import {WriteData} from 'src/homepageExperience/components/steps/go/WriteData'
 import {WriteDataSql} from 'src/homepageExperience/components/steps/go/WriteDataSql'
 import {ExecuteQuery} from 'src/homepageExperience/components/steps/go/ExecuteQuery'
 import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/go/ExecuteQuerySql'
-import {Finish} from 'src/homepageExperience/components/steps/Finish'
 import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/go/ExecuteAggregateQuery'
-import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
-import {normalizeEventName} from 'src/cloud/utils/reporting'
+import {Finish} from 'src/homepageExperience/components/steps/Finish'
 
+import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer'
 import {GoIcon} from 'src/homepageExperience/components/HomepageIcons'
 
+// Selectors
+import {isOrgIOx} from 'src/organizations/selectors'
+
 // Utils
-import {event} from 'src/cloud/utils/reporting'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {
-  scrollNextPageIntoView,
   HOMEPAGE_NAVIGATION_STEPS,
   HOMEPAGE_NAVIGATION_STEPS_GO_SQL,
 } from 'src/homepageExperience/utils'
 
-interface State {
-  currentStep: number
-  selectedBucket: string
-  finishStepCompleted: boolean
-  tokenValue: string
-  finalFeedback: number
-}
-
-export class GoWizard extends PureComponent<null, State> {
-  state = {
-    currentStep: 1,
-    selectedBucket: 'my-bucket',
-    finishStepCompleted: false,
-    tokenValue: null,
-    finalFeedback: null,
-  }
-
-  private handleSelectBucket = (bucketName: string) => {
-    this.setState({selectedBucket: bucketName})
-  }
-
-  private handleMarkStepAsCompleted = () => {
-    this.setState({finishStepCompleted: true})
-  }
-
-  private setTokenValue = (tokenValue: string) => {
-    this.setState({tokenValue})
-  }
-
-  private setFinalFeedback = (feedbackValue: number) => {
-    this.setState({finalFeedback: feedbackValue})
-  }
+export const GoWizard: FC<{}> = () => {
+  const [selectedBucket, setSelectedBucket] = useState<string>('my-bucket')
+  const [finishStepCompleted, setFinishStepCompleted] = useState<boolean>(false)
+  const [tokenValue, setTokenValue] = useState<string | null>(null)
+  const [finalFeedback, setFinalFeedback] = useState<number | null>(null)
 
-  subwayNavSteps = isFlagEnabled('ioxOnboarding')
+  const isIOxOrg = useSelector(isOrgIOx)
+  const subwayNavSteps = isIOxOrg
     ? HOMEPAGE_NAVIGATION_STEPS_GO_SQL
     : HOMEPAGE_NAVIGATION_STEPS
 
-  handleNextClick = () => {
-    this.setState(
-      {
-        currentStep: Math.min(
-          this.state.currentStep + 1,
-          this.subwayNavSteps.length
-        ),
-      },
-      () => {
-        event(
-          'firstMile.goWizard.next.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 2].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
+  const handleMarkStepAsCompleted = () => {
+    setFinishStepCompleted(true)
   }
 
-  handlePreviousClick = () => {
-    this.setState(
-      {currentStep: Math.max(this.state.currentStep - 1, 1)},
-      () => {
-        event(
-          'firstMile.goWizard.previous.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
-  }
-
-  handleNavClick = (clickedStep: number) => {
-    this.setState({currentStep: clickedStep})
-    event(
-      'firstMile.goWizard.subNav.clicked',
-      {},
-      {
-        currentStep: normalizeEventName(
-          this.subwayNavSteps[clickedStep - 1].name
-        ),
-      }
-    )
-    scrollNextPageIntoView()
-  }
-
-  renderSqlStep = () => {
-    switch (this.state.currentStep) {
+  const renderSqlStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="goWizard" />
       }
@@ -145,13 +57,13 @@ export class GoWizard extends PureComponent<null, State> {
         return (
           <Tokens
             wizardEventName="goWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
       case 4: {
-        return <WriteDataSql onSelectBucket={this.handleSelectBucket} />
+        return <WriteDataSql onSelectBucket={setSelectedBucket} />
       }
       case 5: {
         return <ExecuteQuerySql />
@@ -160,10 +72,10 @@ export class GoWizard extends PureComponent<null, State> {
         return (
           <Finish
             wizardEventName="goWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -173,8 +85,8 @@ export class GoWizard extends PureComponent<null, State> {
     }
   }
 
-  renderFluxStep = () => {
-    switch (this.state.currentStep) {
+  const renderFluxStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="goWizard" />
       }
@@ -185,8 +97,8 @@ export class GoWizard extends PureComponent<null, State> {
         return (
           <Tokens
             wizardEventName="goWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
@@ -194,22 +106,22 @@ export class GoWizard extends PureComponent<null, State> {
         return <InitializeClient />
       }
       case 5: {
-        return <WriteData onSelectBucket={this.handleSelectBucket} />
+        return <WriteData onSelectBucket={setSelectedBucket} />
       }
       case 6: {
-        return <ExecuteQuery bucket={this.state.selectedBucket} />
+        return <ExecuteQuery bucket={selectedBucket} />
       }
       case 7: {
-        return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
+        return <ExecuteAggregateQuery bucket={selectedBucket} />
       }
       case 8: {
         return (
           <Finish
             wizardEventName="goWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -219,70 +131,18 @@ export class GoWizard extends PureComponent<null, State> {
     }
   }
 
-  render() {
-    return (
-      <Page>
-        <Page.Header fullWidth={false} />
-        <Page.Contents scrollable={true}>
-          <div className="homepage-wizard-container">
-            <aside className="homepage-wizard-container--subway">
-              <div className="homepage-wizard-container--subway-inner">
-                <SubwayNav
-                  currentStep={this.state.currentStep}
-                  onStepClick={this.handleNavClick}
-                  navigationSteps={this.subwayNavSteps}
-                  settingUpIcon={GoIcon}
-                  settingUpText="Go"
-                  setupTime="5 minutes"
-                />
-              </div>
-            </aside>
-            <div className="homepage-wizard-container--main">
-              <div
-                className={classnames(
-                  'homepage-wizard-container--main-wrapper',
-                  {
-                    verticallyCentered:
-                      this.state.currentStep === 1 ||
-                      this.state.currentStep === this.subwayNavSteps.length,
-                  }
-                )}
-              >
-                <WriteDataDetailsContextProvider>
-                  {isFlagEnabled('ioxOnboarding')
-                    ? this.renderSqlStep()
-                    : this.renderFluxStep()}
-                </WriteDataDetailsContextProvider>{' '}
-              </div>
-
-              <div className="homepage-wizard-container-footer">
-                <Button
-                  onClick={this.handlePreviousClick}
-                  text="Previous"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Tertiary}
-                  status={
-                    this.state.currentStep > 1
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                />
-                <Button
-                  onClick={this.handleNextClick}
-                  text="Next"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Primary}
-                  status={
-                    this.state.currentStep < this.subwayNavSteps.length
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                />
-              </div>
-            </div>
-          </div>
-        </Page.Contents>
-      </Page>
-    )
-  }
+  return (
+    <WizardContainer
+      icon={GoIcon}
+      subwayNavSteps={subwayNavSteps}
+      language="go"
+      languageTitle="Go"
+    >
+      {currentStep => (
+        <WriteDataDetailsContextProvider>
+          {isIOxOrg ? renderSqlStep(currentStep) : renderFluxStep(currentStep)}
+        </WriteDataDetailsContextProvider>
+      )}
+    </WizardContainer>
+  )
 }
diff --git a/src/homepageExperience/containers/JavaWizard.tsx b/src/homepageExperience/containers/JavaWizard.tsx
index e12f9a0417..55002761fc 100644
--- a/src/homepageExperience/containers/JavaWizard.tsx
+++ b/src/homepageExperience/containers/JavaWizard.tsx
@@ -1,141 +1,53 @@
-import React, {PureComponent} from 'react'
-import classnames from 'classnames'
-
-import {
-  Button,
-  ComponentColor,
-  ComponentSize,
-  ComponentStatus,
-  Page,
-  SubwayNav,
-} from '@influxdata/clockface'
+// Libraries
+import React, {FC, useState} from 'react'
+import {useSelector} from 'react-redux'
 
+// Contexts
 import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
 
-import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/java/InstallDependenciesSql'
+// Components
 import {Overview} from 'src/homepageExperience/components/steps/Overview'
+import {InstallDependencies} from 'src/homepageExperience/components/steps/java/InstallDependencies'
+import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/java/InstallDependenciesSql'
 import {Tokens} from 'src/homepageExperience/components/steps/Tokens'
+import {InitializeClient} from 'src/homepageExperience/components/steps/java/InitializeClient'
 import {InitializeClientSql} from 'src/homepageExperience/components/steps/java/InitializeClientSql'
+import {WriteData} from 'src/homepageExperience/components/steps/java/WriteData'
 import {WriteDataSql} from 'src/homepageExperience/components/steps/java/WriteDataSql'
+import {ExecuteQuery} from 'src/homepageExperience/components/steps/java/ExecuteQuery'
 import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/java/ExecuteQuerySql'
+import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/java/ExecuteAggregateQuery'
 import {Finish} from 'src/homepageExperience/components/steps/Finish'
-// Utils
-import {event, normalizeEventName} from 'src/cloud/utils/reporting'
 
+import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer'
 import {JavaIcon} from 'src/homepageExperience/components/HomepageIcons'
 
+// Selectors
+import {isOrgIOx} from 'src/organizations/selectors'
+
+// Utils
 import {
   HOMEPAGE_NAVIGATION_STEPS,
   HOMEPAGE_NAVIGATION_STEPS_SQL,
-  scrollNextPageIntoView,
 } from 'src/homepageExperience/utils'
-import {isFlagEnabled} from '../../shared/utils/featureFlag'
-import {InitializeClient} from '../components/steps/java/InitializeClient'
-import {WriteData} from '../components/steps/java/WriteData'
-import {ExecuteQuery} from '../components/steps/java/ExecuteQuery'
-import {ExecuteAggregateQuery} from '../components/steps/java/ExecuteAggregateQuery'
-import {InstallDependencies} from '../components/steps/java/InstallDependencies'
 
-interface State {
-  currentStep: number
-  selectedBucket: string
-  finishStepCompleted: boolean
-  tokenValue: string
-  finalFeedback: number
-}
+export const JavaWizard: FC<{}> = () => {
+  const [selectedBucket, setSelectedBucket] = useState<string>('my-bucket')
+  const [finishStepCompleted, setFinishStepCompleted] = useState<boolean>(false)
+  const [tokenValue, setTokenValue] = useState<string | null>(null)
+  const [finalFeedback, setFinalFeedback] = useState<number | null>(null)
 
-export class JavaWizard extends PureComponent<null, State> {
-  state = {
-    currentStep: 1,
-    selectedBucket: 'my-bucket',
-    finishStepCompleted: false,
-    tokenValue: null,
-    finalFeedback: null,
-  }
-
-  subwayNavSteps = isFlagEnabled('ioxOnboarding')
+  const isIOxOrg = useSelector(isOrgIOx)
+  const subwayNavSteps = isIOxOrg
     ? HOMEPAGE_NAVIGATION_STEPS_SQL
     : HOMEPAGE_NAVIGATION_STEPS
 
-  private handleSelectBucket = (bucketName: string) => {
-    this.setState({selectedBucket: bucketName})
-  }
-
-  private handleMarkStepAsCompleted = () => {
-    this.setState({finishStepCompleted: true})
-  }
-
-  private setTokenValue = (tokenValue: string) => {
-    this.setState({tokenValue})
-  }
-
-  private setFinalFeedback = (feedbackValue: number) => {
-    this.setState({finalFeedback: feedbackValue})
-  }
-
-  handleNextClick = () => {
-    this.setState(
-      {
-        currentStep: Math.min(
-          this.state.currentStep + 1,
-          this.subwayNavSteps.length
-        ),
-      },
-      () => {
-        event(
-          'firstMile.javaWizard.next.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 2].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
+  const handleMarkStepAsCompleted = () => {
+    setFinishStepCompleted(true)
   }
 
-  handlePreviousClick = () => {
-    this.setState(
-      {currentStep: Math.max(this.state.currentStep - 1, 1)},
-      () => {
-        event(
-          'firstMile.javaWizard.previous.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
-  }
-
-  handleNavClick = (clickedStep: number) => {
-    this.setState({currentStep: clickedStep})
-    event(
-      'firstMile.javaWizard.subNav.clicked',
-      {},
-      {
-        currentStep: normalizeEventName(
-          this.subwayNavSteps[clickedStep - 1].name
-        ),
-      }
-    )
-    scrollNextPageIntoView()
-  }
-
-  renderSqlStep = () => {
-    switch (this.state.currentStep) {
+  const renderSqlStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="javaWizard" />
       }
@@ -146,8 +58,8 @@ export class JavaWizard extends PureComponent<null, State> {
         return (
           <Tokens
             wizardEventName="javaWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
@@ -155,19 +67,19 @@ export class JavaWizard extends PureComponent<null, State> {
         return <InitializeClientSql />
       }
       case 5: {
-        return <WriteDataSql onSelectBucket={this.handleSelectBucket} />
+        return <WriteDataSql onSelectBucket={setSelectedBucket} />
       }
       case 6: {
-        return <ExecuteQuerySql bucket={this.state.selectedBucket} />
+        return <ExecuteQuerySql bucket={selectedBucket} />
       }
       case 7: {
         return (
           <Finish
             wizardEventName="javaSqlWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -177,8 +89,8 @@ export class JavaWizard extends PureComponent<null, State> {
     }
   }
 
-  renderFluxStep = () => {
-    switch (this.state.currentStep) {
+  const renderFluxStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="javaWizard" />
       }
@@ -189,8 +101,8 @@ export class JavaWizard extends PureComponent<null, State> {
         return (
           <Tokens
             wizardEventName="javaWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
@@ -198,22 +110,22 @@ export class JavaWizard extends PureComponent<null, State> {
         return <InitializeClient />
       }
       case 5: {
-        return <WriteData onSelectBucket={this.handleSelectBucket} />
+        return <WriteData onSelectBucket={setSelectedBucket} />
       }
       case 6: {
-        return <ExecuteQuery bucket={this.state.selectedBucket} />
+        return <ExecuteQuery bucket={selectedBucket} />
       }
       case 7: {
-        return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
+        return <ExecuteAggregateQuery bucket={selectedBucket} />
       }
       case 8: {
         return (
           <Finish
             wizardEventName="javaSqlWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -223,77 +135,18 @@ export class JavaWizard extends PureComponent<null, State> {
     }
   }
 
-  render() {
-    const {currentStep} = this.state
-
-    return (
-      <Page>
-        <Page.Header fullWidth={false} />
-        <Page.Contents scrollable={true}>
-          <div className="homepage-wizard-container">
-            <aside className="homepage-wizard-container--subway">
-              <div
-                className="homepage-wizard-container--subway-inner"
-                data-testid="subway-nav"
-              >
-                <SubwayNav
-                  currentStep={this.state.currentStep}
-                  onStepClick={this.handleNavClick}
-                  navigationSteps={this.subwayNavSteps}
-                  settingUpIcon={JavaIcon}
-                  settingUpText="Java"
-                  setupTime="5 minutes"
-                />
-              </div>
-            </aside>
-            <div className="homepage-wizard-container--main">
-              <div
-                className={classnames(
-                  'homepage-wizard-container--main-wrapper',
-                  {
-                    verticallyCentered:
-                      this.state.currentStep === 1 ||
-                      this.state.currentStep === this.subwayNavSteps.length,
-                  }
-                )}
-              >
-                <WriteDataDetailsContextProvider>
-                  {isFlagEnabled('ioxOnboarding')
-                    ? this.renderSqlStep()
-                    : this.renderFluxStep()}
-                </WriteDataDetailsContextProvider>
-              </div>
-
-              <div className="homepage-wizard-container-footer">
-                <Button
-                  onClick={this.handlePreviousClick}
-                  text="Previous"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Tertiary}
-                  status={
-                    currentStep > 1
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="java-prev-button"
-                />
-                <Button
-                  onClick={this.handleNextClick}
-                  text="Next"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Primary}
-                  status={
-                    currentStep < this.subwayNavSteps.length
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="java-next-button"
-                />
-              </div>
-            </div>
-          </div>
-        </Page.Contents>
-      </Page>
-    )
-  }
+  return (
+    <WriteDataDetailsContextProvider>
+      <WizardContainer
+        icon={JavaIcon}
+        subwayNavSteps={subwayNavSteps}
+        language="java"
+        languageTitle="Java"
+      >
+        {isIOxOrg
+          ? currentStep => renderSqlStep(currentStep)
+          : currentStep => renderFluxStep(currentStep)}
+      </WizardContainer>
+    </WriteDataDetailsContextProvider>
+  )
 }
diff --git a/src/homepageExperience/containers/NodejsWizard.tsx b/src/homepageExperience/containers/NodejsWizard.tsx
index c908c7ccad..1dc08eb16e 100644
--- a/src/homepageExperience/containers/NodejsWizard.tsx
+++ b/src/homepageExperience/containers/NodejsWizard.tsx
@@ -1,142 +1,53 @@
-import React, {PureComponent} from 'react'
-import classnames from 'classnames'
+// Libraries
+import React, {FC, useState} from 'react'
+import {useSelector} from 'react-redux'
 
-import {
-  Button,
-  ComponentColor,
-  ComponentSize,
-  ComponentStatus,
-  Page,
-  SubwayNav,
-} from '@influxdata/clockface'
+// Contexts
+import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
 
-import {InstallDependencies} from 'src/homepageExperience/components/steps/nodejs/InstallDependencies'
+// Components
 import {Overview} from 'src/homepageExperience/components/steps/Overview'
+import {InstallDependencies} from 'src/homepageExperience/components/steps/nodejs/InstallDependencies'
+import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/nodejs/InstallDependenciesSql'
 import {Tokens} from 'src/homepageExperience/components/steps/Tokens'
 import {InitializeClient} from 'src/homepageExperience/components/steps/nodejs/InitializeClient'
+import {InitializeClientSql} from 'src/homepageExperience/components/steps/nodejs/InitializeClientSql'
 import {WriteData} from 'src/homepageExperience/components/steps/nodejs/WriteData'
+import {WriteDataSql} from 'src/homepageExperience/components/steps/nodejs/WriteDataSql'
 import {ExecuteQuery} from 'src/homepageExperience/components/steps/nodejs/ExecuteQuery'
-import {Finish} from 'src/homepageExperience/components/steps/Finish'
+import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/nodejs/ExecuteQuerySql'
 import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/nodejs/ExecuteAggregateQuery'
-import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
-import {normalizeEventName} from 'src/cloud/utils/reporting'
+import {Finish} from 'src/homepageExperience/components/steps/Finish'
 
+import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer'
 import {NodejsIcon} from 'src/homepageExperience/components/HomepageIcons'
 
-// Utils
-import {event} from 'src/cloud/utils/reporting'
+// Selectors
+import {isOrgIOx} from 'src/organizations/selectors'
 
+// Utils
 import {
-  scrollNextPageIntoView,
   HOMEPAGE_NAVIGATION_STEPS,
   HOMEPAGE_NAVIGATION_STEPS_SQL,
 } from 'src/homepageExperience/utils'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
-import {InstallDependenciesSql} from '../components/steps/nodejs/InstallDependenciesSql'
-import {InitializeClientSql} from '../components/steps/nodejs/InitializeClientSql'
-import {WriteDataSql} from '../components/steps/nodejs/WriteDataSql'
-import {ExecuteQuerySql} from '../components/steps/nodejs/ExecuteQuerySql'
-
-interface State {
-  currentStep: number
-  selectedBucket: string
-  finishStepCompleted: boolean
-  tokenValue: string
-  finalFeedback: number
-}
-
-export class NodejsWizard extends PureComponent<null, State> {
-  state = {
-    currentStep: 1,
-    selectedBucket: 'my-bucket',
-    finishStepCompleted: false,
-    tokenValue: null,
-    finalFeedback: null,
-  }
-
-  private handleSelectBucket = (bucketName: string) => {
-    this.setState({selectedBucket: bucketName})
-  }
 
-  private handleMarkStepAsCompleted = () => {
-    this.setState({finishStepCompleted: true})
-  }
+export const NodejsWizard: FC<{}> = () => {
+  const [selectedBucket, setSelectedBucket] = useState<string>('my-bucket')
+  const [finishStepCompleted, setFinishStepCompleted] = useState<boolean>(false)
+  const [tokenValue, setTokenValue] = useState<string | null>(null)
+  const [finalFeedback, setFinalFeedback] = useState<number | null>(null)
 
-  private setTokenValue = (tokenValue: string) => {
-    this.setState({tokenValue})
-  }
-
-  private setFinalFeedback = (feedbackValue: number) => {
-    this.setState({finalFeedback: feedbackValue})
-  }
-
-  subwayNavSteps = isFlagEnabled('ioxOnboarding')
+  const isIOxOrg = useSelector(isOrgIOx)
+  const subwayNavSteps = isIOxOrg
     ? HOMEPAGE_NAVIGATION_STEPS_SQL
     : HOMEPAGE_NAVIGATION_STEPS
 
-  handleNextClick = () => {
-    this.setState(
-      {
-        currentStep: Math.min(
-          this.state.currentStep + 1,
-          this.subwayNavSteps.length
-        ),
-      },
-      () => {
-        event(
-          'firstMile.nodejsWizard.next.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 2].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
+  const handleMarkStepAsCompleted = () => {
+    setFinishStepCompleted(true)
   }
 
-  handlePreviousClick = () => {
-    this.setState(
-      {currentStep: Math.max(this.state.currentStep - 1, 1)},
-      () => {
-        event(
-          'firstMile.nodejsWizard.previous.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
-  }
-
-  handleNavClick = (clickedStep: number) => {
-    this.setState({currentStep: clickedStep})
-    event(
-      'firstMile.nodejsWizard.subNav.clicked',
-      {},
-      {
-        currentStep: normalizeEventName(
-          this.subwayNavSteps[clickedStep - 1].name
-        ),
-      }
-    )
-    scrollNextPageIntoView()
-  }
-
-  renderSqlStep = () => {
-    switch (this.state.currentStep) {
+  const renderSqlStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="nodejsWizard" />
       }
@@ -147,8 +58,8 @@ export class NodejsWizard extends PureComponent<null, State> {
         return (
           <Tokens
             wizardEventName="nodejsWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
@@ -156,19 +67,19 @@ export class NodejsWizard extends PureComponent<null, State> {
         return <InitializeClientSql />
       }
       case 5: {
-        return <WriteDataSql onSelectBucket={this.handleSelectBucket} />
+        return <WriteDataSql onSelectBucket={setSelectedBucket} />
       }
       case 6: {
-        return <ExecuteQuerySql bucket={this.state.selectedBucket} />
+        return <ExecuteQuerySql bucket={selectedBucket} />
       }
       case 7: {
         return (
           <Finish
             wizardEventName="nodejsWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -178,8 +89,8 @@ export class NodejsWizard extends PureComponent<null, State> {
     }
   }
 
-  renderFluxStep = () => {
-    switch (this.state.currentStep) {
+  const renderFluxStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="nodejsWizard" />
       }
@@ -190,8 +101,8 @@ export class NodejsWizard extends PureComponent<null, State> {
         return (
           <Tokens
             wizardEventName="nodejsWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
@@ -199,22 +110,22 @@ export class NodejsWizard extends PureComponent<null, State> {
         return <InitializeClient />
       }
       case 5: {
-        return <WriteData onSelectBucket={this.handleSelectBucket} />
+        return <WriteData onSelectBucket={setSelectedBucket} />
       }
       case 6: {
-        return <ExecuteQuery bucket={this.state.selectedBucket} />
+        return <ExecuteQuery bucket={selectedBucket} />
       }
       case 7: {
-        return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
+        return <ExecuteAggregateQuery bucket={selectedBucket} />
       }
       case 8: {
         return (
           <Finish
             wizardEventName="nodejsWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -224,70 +135,18 @@ export class NodejsWizard extends PureComponent<null, State> {
     }
   }
 
-  render() {
-    return (
-      <Page>
-        <Page.Header fullWidth={false} />
-        <Page.Contents scrollable={true}>
-          <div className="homepage-wizard-container">
-            <aside className="homepage-wizard-container--subway">
-              <div className="homepage-wizard-container--subway-inner">
-                <SubwayNav
-                  currentStep={this.state.currentStep}
-                  onStepClick={this.handleNavClick}
-                  navigationSteps={this.subwayNavSteps}
-                  settingUpIcon={NodejsIcon}
-                  settingUpText="Nodejs"
-                  setupTime="5 minutes"
-                />
-              </div>
-            </aside>
-            <div className="homepage-wizard-container--main">
-              <div
-                className={classnames(
-                  'homepage-wizard-container--main-wrapper',
-                  {
-                    verticallyCentered:
-                      this.state.currentStep === 1 ||
-                      this.state.currentStep === this.subwayNavSteps.length,
-                  }
-                )}
-              >
-                <WriteDataDetailsContextProvider>
-                  {isFlagEnabled('ioxOnboarding')
-                    ? this.renderSqlStep()
-                    : this.renderFluxStep()}
-                </WriteDataDetailsContextProvider>
-              </div>
-
-              <div className="homepage-wizard-container-footer">
-                <Button
-                  onClick={this.handlePreviousClick}
-                  text="Previous"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Tertiary}
-                  status={
-                    this.state.currentStep > 1
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                />
-                <Button
-                  onClick={this.handleNextClick}
-                  text="Next"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Primary}
-                  status={
-                    this.state.currentStep < this.subwayNavSteps.length
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                />
-              </div>
-            </div>
-          </div>
-        </Page.Contents>
-      </Page>
-    )
-  }
+  return (
+    <WriteDataDetailsContextProvider>
+      <WizardContainer
+        icon={NodejsIcon}
+        subwayNavSteps={subwayNavSteps}
+        language="nodejs"
+        languageTitle="Node.js"
+      >
+        {isIOxOrg
+          ? currentStep => renderSqlStep(currentStep)
+          : currentStep => renderFluxStep(currentStep)}
+      </WizardContainer>
+    </WriteDataDetailsContextProvider>
+  )
 }
diff --git a/src/homepageExperience/containers/PythonWizard.tsx b/src/homepageExperience/containers/PythonWizard.tsx
index 14388b5c2b..68f54229cc 100644
--- a/src/homepageExperience/containers/PythonWizard.tsx
+++ b/src/homepageExperience/containers/PythonWizard.tsx
@@ -1,20 +1,14 @@
-import React, {PureComponent} from 'react'
-import classnames from 'classnames'
-
-import {
-  Button,
-  ComponentColor,
-  ComponentSize,
-  ComponentStatus,
-  Page,
-  SubwayNav,
-} from '@influxdata/clockface'
+// Libraries
+import React, {FC, useState} from 'react'
+import {useSelector} from 'react-redux'
 
+// Contexts
 import WriteDataDetailsContextProvider from 'src/writeData/components/WriteDataDetailsContext'
 
+// Components
+import {Overview} from 'src/homepageExperience/components/steps/Overview'
 import {InstallDependencies} from 'src/homepageExperience/components/steps/python/InstallDependencies'
 import {InstallDependenciesSql} from 'src/homepageExperience/components/steps/python/InstallDependenciesSql'
-import {Overview} from 'src/homepageExperience/components/steps/Overview'
 import {Tokens} from 'src/homepageExperience/components/steps/Tokens'
 import {InitializeClient} from 'src/homepageExperience/components/steps/python/InitializeClient'
 import {InitializeClientSql} from 'src/homepageExperience/components/steps/python/InitializeClientSql'
@@ -22,156 +16,69 @@ import {WriteData} from 'src/homepageExperience/components/steps/python/WriteDat
 import {WriteDataSql} from 'src/homepageExperience/components/steps/python/WriteDataSql'
 import {ExecuteQuery} from 'src/homepageExperience/components/steps/python/ExecuteQuery'
 import {ExecuteQuerySql} from 'src/homepageExperience/components/steps/python/ExecuteQuerySql'
-import {Finish} from 'src/homepageExperience/components/steps/Finish'
 import {ExecuteAggregateQuery} from 'src/homepageExperience/components/steps/python/ExecuteAggregateQuery'
 import {ExecuteAggregateQuerySql} from 'src/homepageExperience/components/steps/python/ExecuteAggregateQuerySql'
+import {Finish} from 'src/homepageExperience/components/steps/Finish'
 
-import {normalizeEventName} from 'src/cloud/utils/reporting'
-
+import {WizardContainer} from 'src/homepageExperience/containers/WizardContainer'
 import {PythonIcon} from 'src/homepageExperience/components/HomepageIcons'
 
-// Utils
-import {event} from 'src/cloud/utils/reporting'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
-
-import {
-  scrollNextPageIntoView,
-  HOMEPAGE_NAVIGATION_STEPS,
-} from 'src/homepageExperience/utils'
-
-interface State {
-  currentStep: number
-  selectedBucket: string
-  finishStepCompleted: boolean
-  tokenValue: string
-  finalFeedback: number
-}
-
-export class PythonWizard extends PureComponent<null, State> {
-  state = {
-    currentStep: 1,
-    selectedBucket: 'my-bucket',
-    finishStepCompleted: false,
-    tokenValue: null,
-    finalFeedback: null,
-  }
-
-  subwayNavSteps = HOMEPAGE_NAVIGATION_STEPS
+// Selectors
+import {isOrgIOx} from 'src/organizations/selectors'
 
-  private handleSelectBucket = (bucketName: string) => {
-    this.setState({selectedBucket: bucketName})
-  }
+// Utils
+import {HOMEPAGE_NAVIGATION_STEPS} from 'src/homepageExperience/utils'
 
-  private handleMarkStepAsCompleted = () => {
-    this.setState({finishStepCompleted: true})
-  }
+export const PythonWizard: FC<{}> = () => {
+  const [selectedBucket, setSelectedBucket] = useState<string>('my-bucket')
+  const [finishStepCompleted, setFinishStepCompleted] = useState<boolean>(false)
+  const [tokenValue, setTokenValue] = useState<string | null>(null)
+  const [finalFeedback, setFinalFeedback] = useState<number | null>(null)
 
-  private setTokenValue = (tokenValue: string) => {
-    this.setState({tokenValue})
-  }
+  const isIOxOrg = useSelector(isOrgIOx)
+  const subwayNavSteps = HOMEPAGE_NAVIGATION_STEPS
 
-  private setFinalFeedback = (feedbackValue: number) => {
-    this.setState({finalFeedback: feedbackValue})
+  const handleMarkStepAsCompleted = () => {
+    setFinishStepCompleted(true)
   }
 
-  handleNextClick = () => {
-    this.setState(
-      {
-        currentStep: Math.min(
-          this.state.currentStep + 1,
-          this.subwayNavSteps.length
-        ),
-      },
-      () => {
-        event(
-          'firstMile.pythonWizard.next.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 2].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
-  }
-
-  handlePreviousClick = () => {
-    this.setState(
-      {currentStep: Math.max(this.state.currentStep - 1, 1)},
-      () => {
-        event(
-          'firstMile.pythonWizard.previous.clicked',
-          {},
-          {
-            clickedButtonAtStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep].name
-            ),
-            currentStep: normalizeEventName(
-              this.subwayNavSteps[this.state.currentStep - 1].name
-            ),
-          }
-        )
-        scrollNextPageIntoView()
-      }
-    )
-  }
-
-  handleNavClick = (clickedStep: number) => {
-    this.setState({currentStep: clickedStep})
-    event(
-      'firstMile.pythonWizard.subNav.clicked',
-      {},
-      {
-        currentStep: normalizeEventName(
-          this.subwayNavSteps[clickedStep - 1].name
-        ),
-      }
-    )
-    scrollNextPageIntoView()
-  }
-
-  renderStep = () => {
-    switch (this.state.currentStep) {
+  const renderSqlStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="pythonWizard" />
       }
       case 2: {
-        return <InstallDependencies />
+        return <InstallDependenciesSql />
       }
       case 3: {
         return (
           <Tokens
             wizardEventName="pythonWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
       case 4: {
-        return <InitializeClient />
+        return <InitializeClientSql />
       }
       case 5: {
-        return <WriteData onSelectBucket={this.handleSelectBucket} />
+        return <WriteDataSql onSelectBucket={setSelectedBucket} />
       }
       case 6: {
-        return <ExecuteQuery bucket={this.state.selectedBucket} />
+        return <ExecuteQuerySql bucket={selectedBucket} />
       }
       case 7: {
-        return <ExecuteAggregateQuery bucket={this.state.selectedBucket} />
+        return <ExecuteAggregateQuerySql bucket={selectedBucket} />
       }
       case 8: {
         return (
           <Finish
-            wizardEventName="pythonWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            wizardEventName="pythonSqlWizard"
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -181,43 +88,43 @@ export class PythonWizard extends PureComponent<null, State> {
     }
   }
 
-  renderSqlStep = () => {
-    switch (this.state.currentStep) {
+  const renderFluxStep = currentStep => {
+    switch (currentStep) {
       case 1: {
         return <Overview wizard="pythonWizard" />
       }
       case 2: {
-        return <InstallDependenciesSql />
+        return <InstallDependencies />
       }
       case 3: {
         return (
           <Tokens
             wizardEventName="pythonWizard"
-            setTokenValue={this.setTokenValue}
-            tokenValue={this.state.tokenValue}
+            setTokenValue={setTokenValue}
+            tokenValue={tokenValue}
           />
         )
       }
       case 4: {
-        return <InitializeClientSql />
+        return <InitializeClient />
       }
       case 5: {
-        return <WriteDataSql onSelectBucket={this.handleSelectBucket} />
+        return <WriteData onSelectBucket={setSelectedBucket} />
       }
       case 6: {
-        return <ExecuteQuerySql bucket={this.state.selectedBucket} />
+        return <ExecuteQuery bucket={selectedBucket} />
       }
       case 7: {
-        return <ExecuteAggregateQuerySql bucket={this.state.selectedBucket} />
+        return <ExecuteAggregateQuery bucket={selectedBucket} />
       }
       case 8: {
         return (
           <Finish
-            wizardEventName="pythonSqlWizard"
-            markStepAsCompleted={this.handleMarkStepAsCompleted}
-            finishStepCompleted={this.state.finishStepCompleted}
-            finalFeedback={this.state.finalFeedback}
-            setFinalFeedback={this.setFinalFeedback}
+            wizardEventName="pythonWizard"
+            markStepAsCompleted={handleMarkStepAsCompleted}
+            finishStepCompleted={finishStepCompleted}
+            finalFeedback={finalFeedback}
+            setFinalFeedback={setFinalFeedback}
           />
         )
       }
@@ -227,77 +134,18 @@ export class PythonWizard extends PureComponent<null, State> {
     }
   }
 
-  render() {
-    const {currentStep} = this.state
-
-    return (
-      <Page>
-        <Page.Header fullWidth={false} />
-        <Page.Contents scrollable={true}>
-          <div className="homepage-wizard-container">
-            <aside className="homepage-wizard-container--subway">
-              <div
-                className="homepage-wizard-container--subway-inner"
-                data-testid="subway-nav"
-              >
-                <SubwayNav
-                  currentStep={this.state.currentStep}
-                  onStepClick={this.handleNavClick}
-                  navigationSteps={this.subwayNavSteps}
-                  settingUpIcon={PythonIcon}
-                  settingUpText="Python"
-                  setupTime="5 minutes"
-                />
-              </div>
-            </aside>
-            <div className="homepage-wizard-container--main">
-              <div
-                className={classnames(
-                  'homepage-wizard-container--main-wrapper',
-                  {
-                    verticallyCentered:
-                      this.state.currentStep === 1 ||
-                      this.state.currentStep === this.subwayNavSteps.length,
-                  }
-                )}
-              >
-                <WriteDataDetailsContextProvider>
-                  {isFlagEnabled('ioxOnboarding')
-                    ? this.renderSqlStep()
-                    : this.renderStep()}
-                </WriteDataDetailsContextProvider>
-              </div>
-
-              <div className="homepage-wizard-container-footer">
-                <Button
-                  onClick={this.handlePreviousClick}
-                  text="Previous"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Tertiary}
-                  status={
-                    currentStep > 1
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="python-prev-button"
-                />
-                <Button
-                  onClick={this.handleNextClick}
-                  text="Next"
-                  size={ComponentSize.Large}
-                  color={ComponentColor.Primary}
-                  status={
-                    currentStep < this.subwayNavSteps.length
-                      ? ComponentStatus.Default
-                      : ComponentStatus.Disabled
-                  }
-                  testID="python-next-button"
-                />
-              </div>
-            </div>
-          </div>
-        </Page.Contents>
-      </Page>
-    )
-  }
+  return (
+    <WriteDataDetailsContextProvider>
+      <WizardContainer
+        icon={PythonIcon}
+        subwayNavSteps={subwayNavSteps}
+        language="python"
+        languageTitle="Python"
+      >
+        {isIOxOrg
+          ? currentStep => renderSqlStep(currentStep)
+          : currentStep => renderFluxStep(currentStep)}
+      </WizardContainer>
+    </WriteDataDetailsContextProvider>
+  )
 }
diff --git a/src/homepageExperience/containers/WizardContainer.tsx b/src/homepageExperience/containers/WizardContainer.tsx
new file mode 100644
index 0000000000..c932a460e6
--- /dev/null
+++ b/src/homepageExperience/containers/WizardContainer.tsx
@@ -0,0 +1,142 @@
+// Libraries
+import React, {FC, ReactChild, useState} from 'react'
+import classnames from 'classnames'
+
+// Components
+import {
+  Button,
+  ComponentColor,
+  ComponentSize,
+  ComponentStatus,
+  Page,
+  SubwayNav,
+} from '@influxdata/clockface'
+
+// Utils
+import {event, normalizeEventName} from 'src/cloud/utils/reporting'
+import {scrollNextPageIntoView} from 'src/homepageExperience/utils'
+
+interface Props {
+  children: (currentStep: number) => ReactChild
+  icon?: JSX.Element
+  language: string
+  languageTitle: string
+  subwayNavSteps: any[]
+}
+
+export const WizardContainer: FC<Props> = ({
+  children,
+  icon,
+  language,
+  languageTitle,
+  subwayNavSteps,
+}) => {
+  const [currentStep, setCurrentStep] = useState<number>(1)
+
+  const handleNavClick = (clickedStep: number) => {
+    setCurrentStep(clickedStep)
+    event(
+      `firstMile.${language}Wizard.subNav.clicked`,
+      {},
+      {
+        clickedButtonAtStep: normalizeEventName(
+          subwayNavSteps[currentStep].name
+        ),
+        currentStep: normalizeEventName(subwayNavSteps[clickedStep - 1].name),
+      }
+    )
+    console.log('currentStep', subwayNavSteps[clickedStep - 1].name)
+    scrollNextPageIntoView()
+  }
+
+  const handleNextClick = () => {
+    const newStep = Math.min(currentStep + 1, subwayNavSteps.length)
+    setCurrentStep(newStep)
+    event(
+      `firstMile.${language}Wizard.next.clicked`,
+      {},
+      {
+        clickedButtonAtStep: normalizeEventName(
+          subwayNavSteps[newStep - 2].name
+        ),
+        currentStep: normalizeEventName(subwayNavSteps[newStep - 1].name),
+      }
+    )
+    scrollNextPageIntoView()
+  }
+
+  const handlePreviousClick = () => {
+    const newStep = Math.max(currentStep - 1, 1)
+    setCurrentStep(newStep)
+    event(
+      `firstMile.${language}Wizard.previous.clicked`,
+      {},
+      {
+        clickedButtonAtStep: normalizeEventName(subwayNavSteps[newStep].name),
+        currentStep: normalizeEventName(subwayNavSteps[newStep - 1].name),
+      }
+    )
+    scrollNextPageIntoView()
+  }
+
+  return (
+    <Page>
+      <Page.Header fullWidth={false} />
+      <Page.Contents scrollable={true}>
+        <div className="homepage-wizard-container">
+          <aside className="homepage-wizard-container--subway">
+            <div
+              className="homepage-wizard-container--subway-inner"
+              data-testid="subway-nav"
+            >
+              <SubwayNav
+                currentStep={currentStep}
+                onStepClick={handleNavClick}
+                navigationSteps={subwayNavSteps}
+                settingUpIcon={icon}
+                settingUpText={languageTitle}
+                setupTime="5 minutes"
+              />
+            </div>
+          </aside>
+          <div className="homepage-wizard-container--main">
+            <div
+              className={classnames('homepage-wizard-container--main-wrapper', {
+                verticallyCentered:
+                  currentStep === 1 || currentStep === subwayNavSteps.length,
+              })}
+            >
+              {children(currentStep)}
+              <div className="homepage-wizard-container-footer">
+                <Button
+                  onClick={handlePreviousClick}
+                  text="Previous"
+                  size={ComponentSize.Large}
+                  color={ComponentColor.Tertiary}
+                  status={
+                    currentStep > 1
+                      ? ComponentStatus.Default
+                      : ComponentStatus.Disabled
+                  }
+                  testID={`${language}-prev-button`}
+                />
+                <Button
+                  onClick={handleNextClick}
+                  text="Next"
+                  size={ComponentSize.Large}
+                  color={ComponentColor.Primary}
+                  status={
+                    currentStep < subwayNavSteps.length
+                      ? ComponentStatus.Default
+                      : ComponentStatus.Disabled
+                  }
+                  testID={`${language}-next-button`}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Page.Contents>
+    </Page>
+  )
+}