diff --git a/frontend/src/component/onboarding/GenerateApiKey.tsx b/frontend/src/component/onboarding/GenerateApiKey.tsx
index 7da36026d4..256a744650 100644
--- a/frontend/src/component/onboarding/GenerateApiKey.tsx
+++ b/frontend/src/component/onboarding/GenerateApiKey.tsx
@@ -15,8 +15,9 @@ import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigBut
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import { useEffect } from 'react';
-import { SectionHeader } from './SharedComponents';
+import { SectionHeader, StepperBox } from './SharedComponents';
 import { Stepper } from './Stepper';
+import { Badge } from '../common/Badge/Badge';
 
 const ChooseEnvironment = ({
     environments,
@@ -227,7 +228,10 @@ export const GenerateApiKey = ({
     return (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
-            <Stepper active={1} steps={3} />
+            <StepperBox>
+                <Stepper active={1} steps={3} />
+                <Badge color='secondary'>2/3 - Generate API Key</Badge>
+            </StepperBox>
             <Box sx={{ mt: 2 }}>
                 <SectionHeader>Environment</SectionHeader>
                 <SectionDescription>
diff --git a/frontend/src/component/onboarding/SelectSdk.tsx b/frontend/src/component/onboarding/SelectSdk.tsx
index 69047b0564..27a44e5724 100644
--- a/frontend/src/component/onboarding/SelectSdk.tsx
+++ b/frontend/src/component/onboarding/SelectSdk.tsx
@@ -1,9 +1,10 @@
 import { Avatar, Box, Link, styled, Typography } from '@mui/material';
 import type { FC } from 'react';
 import { formatAssetPath } from 'utils/formatPath';
-import { SectionHeader } from './SharedComponents';
+import { SectionHeader, StepperBox } from './SharedComponents';
 import { clientSdks, type Sdk, serverSdks } from './sharedTypes';
 import { Stepper } from './Stepper';
+import { Badge } from '../common/Badge/Badge';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -60,7 +61,11 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
     return (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
-            <Stepper active={0} steps={3} />
+            <StepperBox>
+                <Stepper active={0} steps={3} />
+                <Badge color='secondary'>1/3 - Choose SDK</Badge>
+            </StepperBox>
+
             <Box sx={{ mt: 2 }}>
                 <SectionHeader>Select SDK</SectionHeader>
                 <SecondarySectionHeader>
diff --git a/frontend/src/component/onboarding/SharedComponents.tsx b/frontend/src/component/onboarding/SharedComponents.tsx
index 181f8ebf63..4cb3538d80 100644
--- a/frontend/src/component/onboarding/SharedComponents.tsx
+++ b/frontend/src/component/onboarding/SharedComponents.tsx
@@ -5,3 +5,10 @@ export const SectionHeader = styled('div')(({ theme }) => ({
     marginBottom: theme.spacing(1),
     fontSize: theme.typography.body1.fontSize,
 }));
+
+export const StepperBox = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: theme.spacing(2),
+}));
diff --git a/frontend/src/component/onboarding/Stepper.tsx b/frontend/src/component/onboarding/Stepper.tsx
index 59a61217ee..3ac0892f2b 100644
--- a/frontend/src/component/onboarding/Stepper.tsx
+++ b/frontend/src/component/onboarding/Stepper.tsx
@@ -4,7 +4,6 @@ import type { FC } from 'react';
 const StepContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     gap: theme.spacing(1),
-    marginTop: theme.spacing(2),
 }));
 
 const Step = styled('div')(({ theme }) => ({
diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx
index 1b73e17dc8..20e5368862 100644
--- a/frontend/src/component/onboarding/TestSdkConnection.tsx
+++ b/frontend/src/component/onboarding/TestSdkConnection.tsx
@@ -8,7 +8,7 @@ import {
     Tooltip,
     Typography,
 } from '@mui/material';
-import { SectionHeader } from './SharedComponents';
+import { SectionHeader, StepperBox } from './SharedComponents';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { allSdks, type Sdk } from './sharedTypes';
 import {
@@ -21,6 +21,7 @@ import useToast from 'hooks/useToast';
 import CopyIcon from '@mui/icons-material/FileCopy';
 import { formatAssetPath } from '../../utils/formatPath';
 import { Stepper } from './Stepper';
+import { Badge } from '../common/Badge/Badge';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 2, 8),
@@ -116,7 +117,10 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
     return (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
-            <Stepper active={2} steps={3} />
+            <StepperBox>
+                <Stepper active={2} steps={3} />
+                <Badge color='secondary'>3/3 - Test connection</Badge>
+            </StepperBox>
             <Box sx={{ mt: 2 }}>
                 <ChangeSdk>
                     {sdkIcon ? (