diff --git a/src/renderer/Generics/redesign/Button/button.css.ts b/src/renderer/Generics/redesign/Button/button.css.ts
index ef3a7042e..e69629e8c 100644
--- a/src/renderer/Generics/redesign/Button/button.css.ts
+++ b/src/renderer/Generics/redesign/Button/button.css.ts
@@ -45,7 +45,7 @@ export const primaryButton = style([
 export const secondaryButton = style([
   {
     color: vars.color.font,
-    background: vars.color.background96,
+    background: vars.components.secondaryButtonBackground,
     boxShadow: vars.components.buttonBoxShadow,
     selectors: {
       '&:hover:enabled': {
diff --git a/src/renderer/Generics/redesign/RedesignContainer.tsx b/src/renderer/Generics/redesign/RedesignContainer.tsx
index 8eda344b3..80c962284 100644
--- a/src/renderer/Generics/redesign/RedesignContainer.tsx
+++ b/src/renderer/Generics/redesign/RedesignContainer.tsx
@@ -5,9 +5,10 @@ const RedesignContainerStoryBook: React.FC = ({ children }) => {
   const [isDarkTheme, setIsDarkTheme] = useState(false);
 
   return (
-    <div>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '90vh' }}>
       <p>Toggle dark mode</p>
       <button
+        style={{ width: 150 }}
         type="button"
         onClick={() => setIsDarkTheme((currentValue: boolean) => !currentValue)}
       >
@@ -16,7 +17,19 @@ const RedesignContainerStoryBook: React.FC = ({ children }) => {
       <div
         id="onBoarding"
         className={isDarkTheme ? darkTheme : lightTheme}
-        style={{ padding: '2em', border: '1px solid black', minHeight: '80vh' }}
+        style={{
+          marginTop: '1em',
+          border: '1px dashed #E3E3E3',
+          flexGrow: 1,
+          /**
+           * Then, because flex items cannot be smaller than the
+           * size of their content – min-height: auto is the
+           * default – add min-height: 0 to allow the item to
+           * shrink to fit inside the container.
+           * https://stackoverflow.com/questions/41674979/flex-child-is-growing-out-of-parent
+           */
+          minHeight: 0,
+        }}
       >
         {children}
       </div>
diff --git a/src/renderer/Generics/redesign/Stepper/Stepper.tsx b/src/renderer/Generics/redesign/Stepper/Stepper.tsx
index d02734ad8..3e3a2aa22 100644
--- a/src/renderer/Generics/redesign/Stepper/Stepper.tsx
+++ b/src/renderer/Generics/redesign/Stepper/Stepper.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from '../Button/Button';
 import { bottomBar, previousButton, nextButton } from './stepper.css';
 
@@ -7,23 +6,16 @@ export interface StepperProps {
    * When a step changes ('previous' or 'next')
    */
   onChange: (change: 'next' | 'previous') => void;
-  /**
-   * Optional: Renders above buttons
-   */
-  children?: React.ReactNode;
 }
 
-const Stepper = ({ onChange, children }: StepperProps) => {
+const Stepper = ({ onChange }: StepperProps) => {
   return (
-    <div>
-      {children}
-      <div className={bottomBar}>
-        <div className={previousButton}>
-          <Button label="Previous" onClick={() => onChange('previous')} />
-        </div>
-        <div className={nextButton}>
-          <Button label="Next step" primary onClick={() => onChange('next')} />
-        </div>
+    <div className={bottomBar}>
+      <div className={previousButton}>
+        <Button label="Previous" onClick={() => onChange('previous')} />
+      </div>
+      <div className={nextButton}>
+        <Button label="Next step" primary onClick={() => onChange('next')} />
       </div>
     </div>
   );
diff --git a/src/renderer/Generics/redesign/Stepper/stepper.css.ts b/src/renderer/Generics/redesign/Stepper/stepper.css.ts
index 88b361af9..8506d8cdb 100644
--- a/src/renderer/Generics/redesign/Stepper/stepper.css.ts
+++ b/src/renderer/Generics/redesign/Stepper/stepper.css.ts
@@ -3,6 +3,7 @@ import { vars } from '../theme.css';
 
 export const bottomBar = style({
   height: 60,
+  width: '100%',
   borderTop: '1px solid',
   borderColor: vars.color.font10,
   display: 'flex',
@@ -10,35 +11,11 @@ export const bottomBar = style({
 });
 
 export const previousButton = style({
-  // boxSizing: 'border-box',
-  // display: 'flex',
-  // flexDirection: 'row',
-  // justifyContent: 'center',
-  // alignItems: 'center',
-  // padding: '8px 12px',
-  // gap: '10px',
-  // width: '78px',
-  // height: '32px',
   marginLeft: '14px',
   marginTop: '14px',
 });
 
 export const nextButton = style({
-  // boxSizing: 'border-box',
-  // display: 'flex',
-  // flexDirection: 'row',
-  // justifyContent: 'center',
-  // alignItems: 'center',
-  // padding: '8px 12px',
-  // gap: '10px',
-  // width: '78px',
-  // height: '32px',
   marginRight: '14px',
   marginTop: '14px',
 });
-
-export const titleFont = style({
-  fontWeight: 600,
-  fontSize: 15,
-  lineHeight: '20px',
-});
diff --git a/src/renderer/Generics/redesign/theme.css.ts b/src/renderer/Generics/redesign/theme.css.ts
index 4ab013406..90c365232 100644
--- a/src/renderer/Generics/redesign/theme.css.ts
+++ b/src/renderer/Generics/redesign/theme.css.ts
@@ -19,7 +19,7 @@ export const [lightTheme, vars] = createTheme({
     font50: 'rgba(0, 0, 2, 0.50)',
     font70: 'rgba(0, 0, 2, 0.70)',
     fontDisabled: common.color.black25,
-    background: 'rgba(255, 255, 255, 1)',
+    background: common.color.white,
     background96: 'rgba(0, 0, 2, 0.04)',
     background92: 'rgba(0, 0, 2, 0.08)',
     backgroundActiveGradient:
@@ -37,6 +37,7 @@ export const [lightTheme, vars] = createTheme({
     buttonBoxShadow: '0px 1px 2px rgba(0, 0, 0, 0.08)',
     selectCardBackground: 'rgba(115, 81, 235, 0.08)',
     selectCardBoxShadow: 'inset 0px 0px 0px 4px rgba(255, 255, 255, 0.08)',
+    secondaryButtonBackground: common.color.white,
   },
 });
 
@@ -66,5 +67,6 @@ export const darkTheme = createTheme(vars, {
     buttonBoxShadow: '0px 1px 2px rgba(0, 0, 0, 0.24)',
     selectCardBackground: 'rgba(130, 103, 239, 0.08)',
     selectCardBoxShadow: 'none',
+    secondaryButtonBackground: common.color.white4,
   },
 });
diff --git a/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx b/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx
index 2824aa268..2838db3db 100644
--- a/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx
+++ b/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx
@@ -1,86 +1,72 @@
+// This component could be made into a Generic "FullScreenStepper" component
+// Just make sure to always render each child so that children component state isn't cleard
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import {
-  container,
-  descriptionFont,
-  sectionFont,
-  titleFont,
-} from './addNodeStepper.css';
-import ExternalLink from '../../Generics/redesign/Link/ExternalLink';
-import SpecialSelect from '../../Generics/redesign/SpecialSelect/SpecialSelect';
-import electron from '../../electronGlobal';
-import Button from '../../Generics/redesign/Button/Button';
-import Input from '../../Generics/redesign/Input/Input';
-import DropdownLink from '../../Generics/redesign/Link/DropdownLink';
-import Select from '../../Generics/redesign/Select/Select';
+import { componentContainer, container } from './addNodeStepper.css';
+import Stepper from '../../Generics/redesign/Stepper/Stepper';
+import AddEthereumNode from '../AddEthereumNode/AddEthereumNode';
+import DockerInstallation from '../DockerInstallation/DockerInstallation';
+import NodeRequirements from '../NodeRequirements/NodeRequirements';
 
 export interface AddNodeStepperProps {
-  /**
-   * Listen to node config changes
-   */
-  onChange: (newValue: string) => void;
+  onChange: (newValue: 'done' | 'cancel') => void;
 }
 
+const TOTAL_STEPS = 3;
+
 const AddNodeStepper = ({ onChange }: AddNodeStepperProps) => {
   const { t } = useTranslation();
-  const [sIsOptionsOpen, setIsOptionsOpen] = useState<boolean>();
+  const [sStep, setStep] = useState<number>(0);
+
+  const onChangeAddEthereumNode = (newValue: string) => {
+    console.log('onChangeAddEthereumNode newValue ', newValue);
+  };
+
+  const onStep = (newValue: string) => {
+    console.log('onChangeAddEthereumNode newValue ', newValue);
+    if (newValue === 'next') {
+      // = sign because sStep index starts at 0
+      if (sStep + 1 >= TOTAL_STEPS) {
+        // done
+        onChange('done');
+      } else {
+        setStep(sStep + 1);
+      }
+    } else if (newValue === 'previous') {
+      if (sStep - 1 < 0) {
+        // cancelled
+        onChange('cancel');
+      } else {
+        setStep(sStep - 1);
+      }
+    }
+  };
 
   return (
     <div className={container}>
-      <div className={titleFont}>{t('EthereumNode')}</div>
-      <div className={descriptionFont}>
-        <>{t('AddNodeStepperDescription')}</>
-      </div>
-      <ExternalLink
-        text={t('LearnMoreClientDiversity')}
-        url="https://ethereum.org/en/developers/docs/nodes-and-clients/client-diversity/"
-      />
-      <p className={sectionFont}>Recommended execution client</p>
-      <SpecialSelect onChange={(newEc) => console.log('val', newEc)} />
-      <p className={sectionFont}>Recommended consensus client</p>
-      <SpecialSelect onChange={(newcc) => console.log('val', newcc)} />
-      <p className={sectionFont}>Data location</p>
-      <DropdownLink
-        text={`${sIsOptionsOpen ? 'Hide' : 'Show'} advanced options`}
-        onClick={() => setIsOptionsOpen(!sIsOptionsOpen)}
-        isDown={!sIsOptionsOpen}
-      />
-      {sIsOptionsOpen && (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'flex-start',
-            width: '100%',
-          }}
-        >
-          <span style={{ fontWeight: 600 }}>Network</span>{' '}
-          <div
-            style={{ width: 300, display: 'inline-block', marginLeft: 'auto' }}
-          >
-            <Select onChange={console.log} />
-          </div>
+      <div className={componentContainer}>
+        {/* Step 0 */}
+        <div style={{ display: sStep === 0 ? '' : 'none' }}>
+          <AddEthereumNode onChange={onChangeAddEthereumNode} />
         </div>
-      )}
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-          padding: '0px',
-          gap: '4px',
-          width: '100%',
-        }}
-      >
-        <div style={{ flexGrow: 1 }}>
-          <Input disabled placeholder="files/" />
+
+        {/* Step 1 */}
+        <div style={{ display: sStep === 1 ? '' : 'none' }}>
+          <NodeRequirements
+            nodeRequirements={undefined}
+            systemData={undefined}
+          />
         </div>
-        <Button
-          size="small"
-          label="Change..."
-          onClick={() => electron.openDialogForNodeDataDir('')}
-        />
+
+        {/* Step 2 */}
+        <div style={{ display: sStep === 2 ? '' : 'none' }}>
+          <DockerInstallation onChange={onChangeAddEthereumNode} />
+        </div>
+      </div>
+
+      <div>
+        <Stepper onChange={onStep} />
       </div>
     </div>
   );
diff --git a/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts b/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts
index 8b9c2aefc..765c65571 100644
--- a/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts
+++ b/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts
@@ -2,10 +2,17 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '../../Generics/redesign/theme.css';
 
 export const container = style({
+  height: '100%',
+  width: '100%',
   display: 'flex',
   flexDirection: 'column',
-  alignItems: 'flex-start',
-  gap: 16,
+});
+
+export const componentContainer = style({
+  width: '100%',
+  flexGrow: 1,
+  overflow: 'auto',
+  boxSizing: 'border-box',
 });
 
 export const titleFont = style({
diff --git a/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx b/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx
index a9d56a1b3..f8fa20044 100644
--- a/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx
+++ b/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx
@@ -9,7 +9,7 @@ import {
 } from './dockerInstallation.css';
 import ExternalLink from '../../Generics/redesign/Link/ExternalLink';
 import electron from '../../electronGlobal';
-import { Button } from '../../Generics/redesign/Button/Button';
+import Button from '../../Generics/redesign/Button/Button';
 import ProgressBar from '../../Generics/redesign/ProgressBar/ProgressBar';
 
 export interface DockerInstallationProps {
diff --git a/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx b/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx
index 7bc9c2c5d..79bc989cd 100644
--- a/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx
+++ b/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx
@@ -14,11 +14,11 @@ export interface NodeRequirementsProps {
   /**
    * Node requirements
    */
-  nodeRequirements: SystemRequirements;
+  nodeRequirements?: SystemRequirements;
   /**
    * Title of the checklist
    */
-  systemData: SystemData;
+  systemData?: SystemData;
 }
 
 const NodeRequirements = ({
@@ -47,7 +47,7 @@ const NodeRequirements = ({
     <div className={container}>
       <div className={titleFont}>Node Requirements</div>
       <div className={descriptionFont}>
-        {nodeRequirements.description ? (
+        {nodeRequirements?.description ? (
           nodeRequirements.description
         ) : (
           <>
@@ -56,12 +56,17 @@ const NodeRequirements = ({
           </>
         )}
       </div>
-      {nodeRequirements.documentationUrl && (
+      {nodeRequirements?.documentationUrl && (
         <ExternalLink
           text="Learn more about the requirements"
           url={nodeRequirements.documentationUrl}
         />
       )}
+      {!nodeRequirements && (
+        <>
+          The requirements are unavailable. Please check with the node provider.
+        </>
+      )}
       <Checklist items={sItems} />
     </div>
   );
diff --git a/src/stories/Presentational/AddNodeStepper.stories.tsx b/src/stories/Presentational/AddNodeStepper.stories.tsx
index c86fe24e8..5fa969ecd 100644
--- a/src/stories/Presentational/AddNodeStepper.stories.tsx
+++ b/src/stories/Presentational/AddNodeStepper.stories.tsx
@@ -13,5 +13,5 @@ const Template: ComponentStory<typeof AddNodeStepper> = (args) => <AddNodeSteppe
 
 export const Primary = Template.bind({});
 Primary.args = {
-  onChange: (newValue) => console.log(newValue)
+  onChange: (newValue: string) => console.log(newValue)
 };
diff --git a/src/stories/Presentational/NodeRequirements.stories.tsx b/src/stories/Presentational/NodeRequirements.stories.tsx
index 4b9afc633..bcbf56372 100644
--- a/src/stories/Presentational/NodeRequirements.stories.tsx
+++ b/src/stories/Presentational/NodeRequirements.stories.tsx
@@ -572,3 +572,7 @@ Primary.args = {
     ]
   }
 };
+
+export const NoRequirements = Template.bind({});
+NoRequirements.args = {
+}