diff --git a/documentation-site/examples/progress-steps/dotted.js b/documentation-site/examples/progress-steps/dotted.js
index 8ed5652eea..8a7d8c5579 100644
--- a/documentation-site/examples/progress-steps/dotted.js
+++ b/documentation-site/examples/progress-steps/dotted.js
@@ -2,19 +2,22 @@
 import * as React from 'react';
 import {useStyletron} from 'baseui';
 import {ProgressSteps, Step} from 'baseui/progress-steps';
-import {Button} from 'baseui/button';
+import {Button, SHAPE, KIND, SIZE} from 'baseui/button';
 import {StatefulSelect, TYPE} from 'baseui/select';
 
 function SpacedButton(props) {
   return (
     <Button
       {...props}
+      shape={SHAPE.pill}
+      kind={KIND.secondary}
+      size={SIZE.compact}
       overrides={{
         BaseButton: {
           style: ({$theme}) => ({
             marginLeft: $theme.sizing.scale200,
             marginRight: $theme.sizing.scale200,
-            marginTop: $theme.sizing.scale200,
+            marginTop: $theme.sizing.scale800,
           }),
         },
       }}
@@ -29,7 +32,12 @@ function ProgressStepsContainer() {
   return (
     <ProgressSteps current={current}>
       <Step title="Create Account">
-        <div className={css({...theme.typography.font300})}>
+        <div
+          className={css({
+            ...theme.typography.ParagraphSmall,
+            marginBottom: '24px',
+          })}
+        >
           Here is some step content
         </div>
         <StatefulSelect
@@ -54,7 +62,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </Step>
       <Step title="Verify Payment">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some more content
         </div>
         <SpacedButton onClick={() => setCurrent(0)}>
@@ -65,7 +73,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </Step>
       <Step title="Add Payment Method">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here too!
         </div>
         <SpacedButton onClick={() => setCurrent(1)}>
diff --git a/documentation-site/examples/progress-steps/dotted.tsx b/documentation-site/examples/progress-steps/dotted.tsx
index 4c25874d19..a73252ca95 100644
--- a/documentation-site/examples/progress-steps/dotted.tsx
+++ b/documentation-site/examples/progress-steps/dotted.tsx
@@ -1,19 +1,28 @@
 import * as React from 'react';
-import {ProgressSteps, Step} from 'baseui/progress-steps';
-import {Button, ButtonProps} from 'baseui/button';
 import {useStyletron} from 'baseui';
+import {ProgressSteps, Step} from 'baseui/progress-steps';
+import {
+  Button,
+  SHAPE,
+  ButtonProps,
+  KIND,
+  SIZE,
+} from 'baseui/button';
 import {StatefulSelect, TYPE} from 'baseui/select';
 
 function SpacedButton(props: ButtonProps) {
   return (
     <Button
       {...props}
+      shape={SHAPE.pill}
+      kind={KIND.secondary}
+      size={SIZE.compact}
       overrides={{
         BaseButton: {
           style: ({$theme}) => ({
             marginLeft: $theme.sizing.scale200,
             marginRight: $theme.sizing.scale200,
-            marginTop: $theme.sizing.scale200,
+            marginTop: $theme.sizing.scale800,
           }),
         },
       }}
@@ -28,7 +37,12 @@ function ProgressStepsContainer() {
   return (
     <ProgressSteps current={current}>
       <Step title="Create Account">
-        <div className={css({...theme.typography.font300})}>
+        <div
+          className={css({
+            ...theme.typography.ParagraphSmall,
+            marginBottom: '24px',
+          })}
+        >
           Here is some step content
         </div>
         <StatefulSelect
@@ -53,8 +67,8 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </Step>
       <Step title="Verify Payment">
-        <div className={css({...theme.typography.font300})}>
-          Here is some some content
+        <div className={css({...theme.typography.ParagraphSmall})}>
+          Here is some more content
         </div>
         <SpacedButton onClick={() => setCurrent(0)}>
           Previous
@@ -64,7 +78,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </Step>
       <Step title="Add Payment Method">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here too!
         </div>
         <SpacedButton onClick={() => setCurrent(1)}>
diff --git a/documentation-site/examples/progress-steps/numbered.js b/documentation-site/examples/progress-steps/numbered.js
index cec40bdd39..80a021b638 100644
--- a/documentation-site/examples/progress-steps/numbered.js
+++ b/documentation-site/examples/progress-steps/numbered.js
@@ -1,19 +1,22 @@
 // @flow
 import * as React from 'react';
 import {ProgressSteps, NumberedStep} from 'baseui/progress-steps';
-import {Button} from 'baseui/button';
+import {Button, SHAPE, KIND, SIZE} from 'baseui/button';
 import {useStyletron} from 'baseui';
 
 function SpacedButton(props) {
   return (
     <Button
       {...props}
+      shape={SHAPE.pill}
+      kind={KIND.secondary}
+      size={SIZE.compact}
       overrides={{
         BaseButton: {
           style: ({$theme}) => ({
             marginLeft: $theme.sizing.scale200,
             marginRight: $theme.sizing.scale200,
-            marginTop: $theme.sizing.scale200,
+            marginTop: $theme.sizing.scale800,
           }),
         },
       }}
@@ -27,7 +30,7 @@ function ProgressStepsContainer() {
   return (
     <ProgressSteps current={current}>
       <NumberedStep title="Create Account">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some step content
         </div>
         <SpacedButton disabled>Previous</SpacedButton>
@@ -36,7 +39,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </NumberedStep>
       <NumberedStep title="Verify Payment">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some more content
         </div>
         <SpacedButton onClick={() => setCurrent(0)}>
@@ -47,7 +50,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </NumberedStep>
       <NumberedStep title="Add Payment Method">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here too!
         </div>
         <SpacedButton onClick={() => setCurrent(1)}>
diff --git a/documentation-site/examples/progress-steps/numbered.tsx b/documentation-site/examples/progress-steps/numbered.tsx
index 4125340705..4894d3d25f 100644
--- a/documentation-site/examples/progress-steps/numbered.tsx
+++ b/documentation-site/examples/progress-steps/numbered.tsx
@@ -1,18 +1,27 @@
 import * as React from 'react';
 import {ProgressSteps, NumberedStep} from 'baseui/progress-steps';
-import {Button, ButtonProps} from 'baseui/button';
+import {
+  Button,
+  SHAPE,
+  ButtonProps,
+  KIND,
+  SIZE,
+} from 'baseui/button';
 import {useStyletron} from 'baseui';
 
 function SpacedButton(props: ButtonProps) {
   return (
     <Button
       {...props}
+      shape={SHAPE.pill}
+      kind={KIND.secondary}
+      size={SIZE.compact}
       overrides={{
         BaseButton: {
           style: ({$theme}) => ({
             marginLeft: $theme.sizing.scale200,
             marginRight: $theme.sizing.scale200,
-            marginTop: $theme.sizing.scale200,
+            marginTop: $theme.sizing.scale800,
           }),
         },
       }}
@@ -26,7 +35,7 @@ function ProgressStepsContainer() {
   return (
     <ProgressSteps current={current}>
       <NumberedStep title="Create Account">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some step content
         </div>
         <SpacedButton disabled>Previous</SpacedButton>
@@ -35,7 +44,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </NumberedStep>
       <NumberedStep title="Verify Payment">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some more content
         </div>
         <SpacedButton onClick={() => setCurrent(0)}>
@@ -46,7 +55,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </NumberedStep>
       <NumberedStep title="Add Payment Method">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here too!
         </div>
         <SpacedButton onClick={() => setCurrent(1)}>
diff --git a/src/progress-steps/__tests__/__snapshots__/numbered-step.test.js.snap b/src/progress-steps/__tests__/__snapshots__/numbered-step.test.js.snap
index 479437ea85..e2c4fd1968 100644
--- a/src/progress-steps/__tests__/__snapshots__/numbered-step.test.js.snap
+++ b/src/progress-steps/__tests__/__snapshots__/numbered-step.test.js.snap
@@ -36,7 +36,7 @@ exports[`NumberedStep applies isCompleted prop correctly 1`] = `
     $isCompleted={true}
   >
     <ForwardRef(Check)
-      size={12}
+      size={28}
     />
   </ForwardRef>
   <ForwardRef
diff --git a/src/progress-steps/__tests__/__snapshots__/step.test.js.snap b/src/progress-steps/__tests__/__snapshots__/step.test.js.snap
index c5dce063b9..076a616645 100644
--- a/src/progress-steps/__tests__/__snapshots__/step.test.js.snap
+++ b/src/progress-steps/__tests__/__snapshots__/step.test.js.snap
@@ -9,7 +9,12 @@ exports[`Step applies isActive prop correctly 1`] = `
     $isActive={true}
     $isCompleted={false}
   >
-    <ForwardRef />
+    <ForwardRef
+      $isActive={true}
+      $isCompleted={false}
+    >
+      <ForwardRef />
+    </ForwardRef>
   </ForwardRef>
   <ForwardRef
     $isActive={true}
@@ -34,7 +39,11 @@ exports[`Step applies isCompleted prop correctly 1`] = `
 >
   <ForwardRef
     $isCompleted={true}
-  />
+  >
+    <ForwardRef
+      $isCompleted={true}
+    />
+  </ForwardRef>
   <ForwardRef
     $isCompleted={true}
   />
@@ -55,7 +64,11 @@ exports[`Step applies isLast prop correctly 1`] = `
 >
   <ForwardRef
     $isCompleted={false}
-  />
+  >
+    <ForwardRef
+      $isCompleted={false}
+    />
+  </ForwardRef>
   <ForwardRef
     $isCompleted={false}
   >
@@ -73,7 +86,11 @@ exports[`Step applies title prop correctly 1`] = `
 >
   <ForwardRef
     $isCompleted={false}
-  />
+  >
+    <ForwardRef
+      $isCompleted={false}
+    />
+  </ForwardRef>
   <ForwardRef
     $isCompleted={false}
   />
@@ -99,7 +116,12 @@ exports[`Step renders children correctly if isActive is provided 1`] = `
     $isActive={true}
     $isCompleted={false}
   >
-    <ForwardRef />
+    <ForwardRef
+      $isActive={true}
+      $isCompleted={false}
+    >
+      <ForwardRef />
+    </ForwardRef>
   </ForwardRef>
   <ForwardRef
     $isActive={true}
diff --git a/src/progress-steps/__tests__/progress-steps-number.scenario.js b/src/progress-steps/__tests__/progress-steps-number.scenario.js
new file mode 100644
index 0000000000..7e3bf25615
--- /dev/null
+++ b/src/progress-steps/__tests__/progress-steps-number.scenario.js
@@ -0,0 +1,58 @@
+/*
+Copyright (c) 2018-2020 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+import {Block} from '../../block/index.js';
+import {Button} from '../../button/index.js';
+import {ProgressSteps, NumberedStep} from '../index.js';
+
+class ProgressStepsNumberContainer extends React.Component<
+  {},
+  {current: number},
+> {
+  state = {current: 0};
+
+  render() {
+    return (
+      <ProgressSteps current={this.state.current}>
+        <NumberedStep title="Create Account">
+          <Block data-e2e="content-1" font="font400">
+            Here is some step content
+          </Block>
+          <Button
+            data-e2e="button-next"
+            onClick={() => this.setState({current: 1})}
+          >
+            Next
+          </Button>
+        </NumberedStep>
+        <NumberedStep title="Verify Payment">
+          <Block data-e2e="content-2" font="font400">
+            Here is some more content
+          </Block>
+          <Button
+            data-e2e="button-previous"
+            onClick={() => this.setState({current: 0})}
+          >
+            Previous
+          </Button>
+          <Button onClick={() => this.setState({current: 2})}>Next</Button>
+        </NumberedStep>
+        <NumberedStep title="Add Payment Method">
+          <Block data-e2e="content-3" font="font400">
+            Here too!
+          </Block>
+          <Button onClick={() => this.setState({current: 1})}>Previous</Button>
+        </NumberedStep>
+      </ProgressSteps>
+    );
+  }
+}
+
+export default ProgressStepsNumberContainer;
diff --git a/src/progress-steps/index.d.ts b/src/progress-steps/index.d.ts
index c6d6b32b3e..46218f9514 100644
--- a/src/progress-steps/index.d.ts
+++ b/src/progress-steps/index.d.ts
@@ -14,6 +14,7 @@ export const ProgressSteps: React.FC<ProgressStepsProps>;
 
 export interface StepOverrides {
   Root?: Override<any>;
+  IconContainer?: Override<any>;
   Icon?: Override<any>;
   InnerIcon?: Override<any>;
   Tail?: Override<any>;
@@ -33,6 +34,7 @@ export const Step: React.FC<StepProps>;
 
 export interface NumberedStepOverrides {
   Root?: Override<any>;
+  IconContainer?: Override<any>;
   Icon?: Override<any>;
   InnerIcon?: Override<any>;
   Tail?: Override<any>;
diff --git a/src/progress-steps/numbered-step.js b/src/progress-steps/numbered-step.js
index 2d04a4c6b8..fb81872e87 100644
--- a/src/progress-steps/numbered-step.js
+++ b/src/progress-steps/numbered-step.js
@@ -59,7 +59,7 @@ function NumberedStep({
     <Root {...sharedProps} {...rootProps}>
       <Icon {...sharedProps} {...iconProps}>
         {!isCompleted && <span>{step}</span>}
-        {isCompleted && <CheckIcon size={12} {...checkIconProps} />}
+        {isCompleted && <CheckIcon size={28} {...checkIconProps} />}
       </Icon>
       {!isLast && <Tail {...sharedProps} {...tailProps} />}
       <Content {...sharedProps} {...contentProps}>
diff --git a/src/progress-steps/step.js b/src/progress-steps/step.js
index 35cc606f99..2edf2c69cf 100644
--- a/src/progress-steps/step.js
+++ b/src/progress-steps/step.js
@@ -11,6 +11,7 @@ import * as React from 'react';
 import {getOverrides} from '../helpers/overrides.js';
 import {
   StyledStep,
+  StyledIconContainer,
   StyledIcon,
   StyledInnerIcon,
   StyledContent,
@@ -30,6 +31,10 @@ function Step({
   children,
 }: StepPropsT) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledStep);
+  const [IconContainer, iconContainerProps] = getOverrides(
+    overrides.IconContainer,
+    StyledIconContainer,
+  );
   const [Icon, iconProps] = getOverrides(overrides.Icon, StyledIcon);
   const [InnerIcon, innerIconProps] = getOverrides(
     overrides.InnerIcon,
@@ -53,9 +58,11 @@ function Step({
 
   return (
     <Root {...sharedProps} {...rootProps}>
-      <Icon {...sharedProps} {...iconProps}>
-        {isActive && <InnerIcon {...innerIconProps} />}
-      </Icon>
+      <IconContainer {...sharedProps} {...iconContainerProps}>
+        <Icon {...sharedProps} {...iconProps}>
+          {isActive && <InnerIcon {...innerIconProps} />}
+        </Icon>
+      </IconContainer>
       {!isLast && <Tail {...sharedProps} {...tailProps} />}
       <Content {...sharedProps} {...contentProps}>
         <Title {...sharedProps} {...titleProps}>
diff --git a/src/progress-steps/styled-components.js b/src/progress-steps/styled-components.js
index 337fe5da32..b75a49e0b6 100644
--- a/src/progress-steps/styled-components.js
+++ b/src/progress-steps/styled-components.js
@@ -17,8 +17,8 @@ export const StyledProgressSteps = styled<{}>('ol', ({$theme}) => {
     marginBottom: 0,
     marginTop: 0,
     paddingTop: $theme.sizing.scale300,
-    paddingRight: $theme.sizing.scale500,
-    paddingLeft: $theme.sizing.scale500,
+    paddingRight: $theme.sizing.scale100,
+    paddingLeft: $theme.sizing.scale100,
     paddingBottom: $theme.sizing.scale300,
   };
 });
@@ -31,38 +31,61 @@ export const StyledStep = styled<StylePropsT>('li', ({$theme}) => {
   };
 });
 
+export const StyledIconContainer = styled<StylePropsT>(
+  'div',
+  ({$theme, $isActive, $isCompleted, $disabled}) => {
+    let currentColor = $theme.colors.backgroundPrimary;
+    let size = $theme.sizing.scale500;
+    let marginLeft = '26px';
+    let marginRight = '26px';
+    let font = $theme.typography.LabelMedium;
+    let titlePad = $theme.sizing.scale800;
+
+    if ($isActive) {
+      size = $theme.sizing.scale700;
+      marginLeft = $theme.sizing.scale750;
+      marginRight = $theme.sizing.scale750;
+    }
+
+    const marginTop = `calc(${titlePad} + (${font.lineHeight} - ${size}) / 2)`;
+    if ($theme.direction === 'rtl') {
+      [marginLeft, marginRight] = [marginRight, marginLeft];
+    }
+
+    return {
+      marginRight,
+      marginLeft,
+      marginTop,
+      width: size,
+      height: size,
+      lineHeight: size,
+      backgroundColor: currentColor,
+      float: $theme.direction === 'rtl' ? 'right' : 'left',
+      textAlign: 'center',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    };
+  },
+);
+
 export const StyledIcon = styled<StylePropsT>(
   'div',
   ({$theme, $isActive, $isCompleted, $disabled}) => {
     let currentColor = $theme.colors.mono400;
     let size = $theme.sizing.scale300;
-    let marginRight = $theme.sizing.scale500;
-    let marginLeft = $theme.sizing.scale100;
-    let font = $theme.typography.font300;
 
     if ($isCompleted) {
       currentColor = $theme.colors.primary;
     } else if ($isActive) {
-      font = $theme.typography.font350;
       currentColor = $theme.colors.progressStepsActiveFill;
     }
 
     if ($isActive) {
       size = $theme.sizing.scale600;
-      marginLeft = 0;
-      marginRight = $theme.sizing.scale300;
-    }
-
-    const marginTop = `calc((${font.lineHeight} - ${size}) / 2)`;
-
-    if ($theme.direction === 'rtl') {
-      [marginLeft, marginRight] = [marginRight, marginLeft];
     }
 
     return {
-      marginRight,
-      marginLeft,
-      marginTop,
       width: size,
       height: size,
       lineHeight: size,
@@ -82,13 +105,13 @@ export const StyledIcon = styled<StylePropsT>(
 
 export const StyledInnerIcon = styled<StylePropsT>('div', ({$theme}) => {
   return {
-    width: $theme.sizing.scale100,
-    height: $theme.sizing.scale100,
-    lineHeight: $theme.sizing.scale100,
-    borderTopLeftRadius: $theme.sizing.scale100,
-    borderTopRightRadius: $theme.sizing.scale100,
-    borderBottomRightRadius: $theme.sizing.scale100,
-    borderBottomLeftRadius: $theme.sizing.scale100,
+    width: $theme.sizing.scale300,
+    height: $theme.sizing.scale300,
+    lineHeight: $theme.sizing.scale300,
+    borderTopLeftRadius: $theme.sizing.scale300,
+    borderTopRightRadius: $theme.sizing.scale300,
+    borderBottomRightRadius: $theme.sizing.scale300,
+    borderBottomLeftRadius: $theme.sizing.scale300,
     backgroundColor: $theme.colors.progressStepsActiveText,
     textAlign: 'center',
   };
@@ -98,24 +121,26 @@ export const StyledContent = styled<StylePropsT>('div', ({$theme}) => {
   const marginDir: string =
     $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return {
-    [marginDir]: $theme.sizing.scale900,
+    [marginDir]: $theme.sizing.scale1600,
   };
 });
 
 export const StyledContentTitle = styled<StylePropsT>(
   'div',
-  ({$theme, $isActive}) => {
-    let color = $theme.colors.contentSecondary;
-    let font = $theme.typography.font300;
-
-    if ($isActive) {
+  ({$theme, $isActive, $isCompleted}) => {
+    let color = $theme.colors.primary400;
+    if ($isCompleted) {
+      color = $theme.colors.contentSecondary;
+    } else if ($isActive) {
       color = $theme.colors.contentPrimary;
-      font = $theme.typography.font350;
     }
+    let font = $theme.typography.LabelMedium;
 
     return {
       ...font,
       color,
+      paddingTop: $theme.sizing.scale800,
+      paddingBottom: $theme.sizing.scale800,
     };
   },
 );
@@ -124,29 +149,28 @@ export const StyledContentTail = styled<StylePropsT>(
   'div',
   ({$theme, $isCompleted, $isActive}) => {
     let currentColor = $theme.colors.mono400;
-    let size = $theme.sizing.scale300;
-    let font = $theme.typography.font300;
+    let size = $theme.sizing.scale500;
+    let font = $theme.typography.LabelMedium;
+    let titlePad = $theme.sizing.scale800;
 
     if ($isActive) {
-      size = $theme.sizing.scale600;
+      size = $theme.sizing.scale700;
     }
 
     if ($isCompleted) {
       currentColor = $theme.colors.primary;
-    } else if (!$isCompleted && $isActive) {
-      font = $theme.typography.font350;
     }
 
     const dir: string = $theme.direction === 'rtl' ? 'right' : 'left';
 
     return {
       position: 'absolute',
-      [dir]: '7px',
+      [dir]: '31px',
       top: 0,
       height: `calc(100% + ${$theme.sizing.scale500})`,
       marginBottom: 0,
       width: $theme.sizing.scale0,
-      marginTop: `calc(${size} + (${font.lineHeight} - ${size}) / 2)`,
+      marginTop: `calc(${titlePad} + (${font.lineHeight} + ${size}) / 2)`,
       display: 'inline-block',
       backgroundColor: currentColor,
     };
@@ -174,24 +198,26 @@ export const StyledNumberIcon = styled<StylePropsT>(
   'div',
   ({$theme, $isActive, $isCompleted, $disabled}) => {
     let backgroundColor = $theme.colors.mono400;
-    let color = $theme.colors.contentSecondary;
-    let size = $theme.sizing.scale800;
-    let marginRight = $theme.sizing.scale300;
-    let font = $theme.typography.font250;
-    let titleFont = $theme.typography.font300;
+    let color = $theme.colors.contentStateDisabled;
+    let size = $theme.sizing.scale950;
+    let font = $theme.typography.ParagraphMedium;
+    let marginLeft = $theme.sizing.scale550;
+    let marginRight = $theme.sizing.scale550;
+    let titlePad = $theme.sizing.scale800;
+    let titleFont = $theme.typography.LabelMedium;
 
     if ($isCompleted) {
       color = $theme.colors.progressStepsCompletedText;
       backgroundColor = $theme.colors.progressStepsCompletedFill;
     } else if ($isActive) {
-      titleFont = $theme.typography.font350;
       color = $theme.colors.progressStepsActiveText;
       backgroundColor = $theme.colors.progressStepsActiveFill;
     }
 
-    const marginTop = `calc((${titleFont.lineHeight} - ${size}) / 2)`;
+    const marginTop = `calc(${titlePad} + (${titleFont.lineHeight} - ${size}) / 2)`;
 
     return {
+      marginLeft,
       marginRight,
       marginTop,
       width: size,
@@ -216,24 +242,23 @@ export const StyledNumberContentTail = styled<StylePropsT>(
   'div',
   ({$theme, $isActive, $isCompleted, $disabled}) => {
     let currentColor = $theme.colors.mono300;
-    let size = $theme.sizing.scale800;
-    let titleFont = $theme.typography.font300;
+    let size = $theme.sizing.scale950;
+    let titleFont = $theme.typography.LabelMedium;
+    let titlePad = $theme.sizing.scale800;
+
     if ($isCompleted) {
       currentColor = $theme.colors.primary;
-    } else if ($isActive) {
-      titleFont = $theme.typography.font350;
     }
-    const marginTop = `calc(${size} + (${titleFont.lineHeight} - ${size}) / 2)`;
-
+    const marginTop = `calc(${titlePad} + ${size} + (${titleFont.lineHeight} - ${size}) / 2)`;
+    const dir: string = $theme.direction === 'rtl' ? 'right' : 'left';
     return {
       position: 'absolute',
-      left: '11px',
+      [dir]: '31px',
       top: 0,
-      height: `calc(100% - ${size})`,
+      height: `calc(100% - ${$theme.sizing.scale500})`,
       paddingBottom: 0,
       marginTop,
       width: $theme.sizing.scale0,
-      paddingTop: $theme.sizing.scale800,
       backgroundColor: currentColor,
       display: 'inline-block',
     };
diff --git a/src/progress-steps/types.js b/src/progress-steps/types.js
index e87dc57199..e548625e82 100644
--- a/src/progress-steps/types.js
+++ b/src/progress-steps/types.js
@@ -13,6 +13,7 @@ import type {OverrideT} from '../helpers/overrides.js';
 export type ProgressStepsOverridesT = {
   Root?: OverrideT,
   StepRoot?: OverrideT,
+  IconContainer?: OverrideT,
   Icon?: OverrideT,
   InnerIcon?: OverrideT,
   Tail?: OverrideT,
@@ -30,6 +31,7 @@ export type ProgressStepsPropsT = {
 
 export type StepOverridesT = {
   Root?: OverrideT,
+  IconContainer?: OverrideT,
   Icon?: OverrideT,
   InnerIcon?: OverrideT,
   Tail?: OverrideT,
@@ -53,6 +55,7 @@ export type StepPropsT = {
 
 export type NumberedStepOverridesT = {
   Root?: OverrideT,
+  IconContainer?: OverrideT,
   Icon?: OverrideT,
   InnerIcon?: OverrideT,
   Tail?: OverrideT,
diff --git a/vrt/__image_snapshots__/numbered-steps__dark-snap.png b/vrt/__image_snapshots__/numbered-steps__dark-snap.png
index b0f53c7673..8583253cf0 100644
Binary files a/vrt/__image_snapshots__/numbered-steps__dark-snap.png and b/vrt/__image_snapshots__/numbered-steps__dark-snap.png differ
diff --git a/vrt/__image_snapshots__/numbered-steps__desktop-snap.png b/vrt/__image_snapshots__/numbered-steps__desktop-snap.png
index c94f12b3a3..aec8f62353 100644
Binary files a/vrt/__image_snapshots__/numbered-steps__desktop-snap.png and b/vrt/__image_snapshots__/numbered-steps__desktop-snap.png differ
diff --git a/vrt/__image_snapshots__/numbered-steps__mobile-snap.png b/vrt/__image_snapshots__/numbered-steps__mobile-snap.png
index 20c0f4ec67..100f1b3a68 100644
Binary files a/vrt/__image_snapshots__/numbered-steps__mobile-snap.png and b/vrt/__image_snapshots__/numbered-steps__mobile-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-step-overrides__dark-snap.png b/vrt/__image_snapshots__/progress-step-overrides__dark-snap.png
index dc4b978d89..48e326d282 100644
Binary files a/vrt/__image_snapshots__/progress-step-overrides__dark-snap.png and b/vrt/__image_snapshots__/progress-step-overrides__dark-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-step-overrides__desktop-snap.png b/vrt/__image_snapshots__/progress-step-overrides__desktop-snap.png
index cbaffbca8f..cff5ae1ccd 100644
Binary files a/vrt/__image_snapshots__/progress-step-overrides__desktop-snap.png and b/vrt/__image_snapshots__/progress-step-overrides__desktop-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-step-overrides__mobile-snap.png b/vrt/__image_snapshots__/progress-step-overrides__mobile-snap.png
index 0bbf5a787f..2b76c94f09 100644
Binary files a/vrt/__image_snapshots__/progress-step-overrides__mobile-snap.png and b/vrt/__image_snapshots__/progress-step-overrides__mobile-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps-isActive__dark-snap.png b/vrt/__image_snapshots__/progress-steps-isActive__dark-snap.png
index 4472ed5a2a..849375836e 100644
Binary files a/vrt/__image_snapshots__/progress-steps-isActive__dark-snap.png and b/vrt/__image_snapshots__/progress-steps-isActive__dark-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps-isActive__desktop-snap.png b/vrt/__image_snapshots__/progress-steps-isActive__desktop-snap.png
index 5a37150958..5ea846f228 100644
Binary files a/vrt/__image_snapshots__/progress-steps-isActive__desktop-snap.png and b/vrt/__image_snapshots__/progress-steps-isActive__desktop-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps-isActive__mobile-snap.png b/vrt/__image_snapshots__/progress-steps-isActive__mobile-snap.png
index 4586568ad5..3d3dc9a688 100644
Binary files a/vrt/__image_snapshots__/progress-steps-isActive__mobile-snap.png and b/vrt/__image_snapshots__/progress-steps-isActive__mobile-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps-number__dark-snap.png b/vrt/__image_snapshots__/progress-steps-number__dark-snap.png
new file mode 100644
index 0000000000..bb90686fab
Binary files /dev/null and b/vrt/__image_snapshots__/progress-steps-number__dark-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps-number__desktop-snap.png b/vrt/__image_snapshots__/progress-steps-number__desktop-snap.png
new file mode 100644
index 0000000000..cda80882a5
Binary files /dev/null and b/vrt/__image_snapshots__/progress-steps-number__desktop-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps-number__mobile-snap.png b/vrt/__image_snapshots__/progress-steps-number__mobile-snap.png
new file mode 100644
index 0000000000..be31efb3ad
Binary files /dev/null and b/vrt/__image_snapshots__/progress-steps-number__mobile-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps-rtl__desktop-snap.png b/vrt/__image_snapshots__/progress-steps-rtl__desktop-snap.png
index 4f27c471bb..32a01b5f9c 100644
Binary files a/vrt/__image_snapshots__/progress-steps-rtl__desktop-snap.png and b/vrt/__image_snapshots__/progress-steps-rtl__desktop-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps-rtl__mobile-snap.png b/vrt/__image_snapshots__/progress-steps-rtl__mobile-snap.png
index 5c549acec9..cb02aad685 100644
Binary files a/vrt/__image_snapshots__/progress-steps-rtl__mobile-snap.png and b/vrt/__image_snapshots__/progress-steps-rtl__mobile-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps__dark-snap.png b/vrt/__image_snapshots__/progress-steps__dark-snap.png
index 1a236a1240..ad50536fb0 100644
Binary files a/vrt/__image_snapshots__/progress-steps__dark-snap.png and b/vrt/__image_snapshots__/progress-steps__dark-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps__desktop-snap.png b/vrt/__image_snapshots__/progress-steps__desktop-snap.png
index 1868cacb29..ecea5c50e2 100644
Binary files a/vrt/__image_snapshots__/progress-steps__desktop-snap.png and b/vrt/__image_snapshots__/progress-steps__desktop-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps__mobile-snap.png b/vrt/__image_snapshots__/progress-steps__mobile-snap.png
index 3079b47b06..43e631fa8f 100644
Binary files a/vrt/__image_snapshots__/progress-steps__mobile-snap.png and b/vrt/__image_snapshots__/progress-steps__mobile-snap.png differ
diff --git a/vrt/__image_snapshots__/progress-steps__triggerNextStep-snap.png b/vrt/__image_snapshots__/progress-steps__triggerNextStep-snap.png
index 6b4c576432..3ad722221d 100644
Binary files a/vrt/__image_snapshots__/progress-steps__triggerNextStep-snap.png and b/vrt/__image_snapshots__/progress-steps__triggerNextStep-snap.png differ