diff --git a/packages/components/src/components/progress-bar-onboarding/index.ts b/packages/components/src/components/progress-bar-onboarding/index.ts
new file mode 100644
index 000000000000..7e9e6421ac6a
--- /dev/null
+++ b/packages/components/src/components/progress-bar-onboarding/index.ts
@@ -0,0 +1,4 @@
+import ProgressBarOnboarding from './progress-bar-onboarding';
+import './progress-bar-onboarding.scss';
+
+export default ProgressBarOnboarding;
diff --git a/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.scss b/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.scss
new file mode 100644
index 000000000000..97eb1005f4da
--- /dev/null
+++ b/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.scss
@@ -0,0 +1,20 @@
+.progress-bar {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+
+    &-rectangle {
+        width: 2.5rem;
+        height: 0.8rem;
+        background-color: $color-red;
+        border-radius: 1rem;
+    }
+
+    &-circle {
+        width: 0.8rem;
+        height: 0.8rem;
+        margin: 0 0.4rem;
+        border-radius: 50%;
+        background-color: $color-grey;
+    }
+}
diff --git a/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.tsx b/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.tsx
new file mode 100644
index 000000000000..a215971114fc
--- /dev/null
+++ b/packages/components/src/components/progress-bar-onboarding/progress-bar-onboarding.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import './progress-bar-onboarding.scss';
+
+type TProgressBarOnboarding = {
+    step: number;
+    amount_of_steps: Array<string>;
+    setStep: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const ProgressBarOnboarding = ({ step, amount_of_steps, setStep }: TProgressBarOnboarding) => {
+    return (
+        <div className='progress-bar'>
+            {amount_of_steps.map((st, index) => {
+                const active = step === index + 1;
+
+                return (
+                    <div
+                        key={st}
+                        onClick={() => setStep(index + 1)}
+                        className={active ? 'progress-bar-rectangle' : 'progress-bar-circle'}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default ProgressBarOnboarding;
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index e661f4553684..b8b94ee52e26 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -82,6 +82,7 @@ export { default as PopoverMobile } from './components/popover-mobile';
 export { default as Popup } from './components/popup';
 export { default as PopoverMessageCheckbox } from './components/popover-message-checkbox';
 export { default as ProgressBar } from './components/progress-bar';
+export { default as ProgressBarOnboarding } from './components/progress-bar-onboarding';
 export { default as ProgressIndicator } from './components/progress-indicator';
 export { default as ProgressSlider } from './components/progress-slider';
 export { default as ProgressSliderMobile } from './components/progress-slider-mobile';