diff --git a/packages/console/src/pages/Cloud/components/ActionBar/index.module.scss b/packages/console/src/pages/Cloud/components/ActionBar/index.module.scss
index a5fde013d..5c9b84f70 100644
--- a/packages/console/src/pages/Cloud/components/ActionBar/index.module.scss
+++ b/packages/console/src/pages/Cloud/components/ActionBar/index.module.scss
@@ -1,11 +1,15 @@
@use '@/scss/underscore' as _;
.container {
- height: 92px;
- background-color: var(--color-layer-1);
- padding: 0 _.unit(17);
- display: flex;
- align-items: center;
- flex-direction: row-reverse;
- justify-content: space-between;
+ height: 80px;
+
+ .actions {
+ height: 100%;
+ background-color: var(--color-layer-1);
+ padding: 0 _.unit(17);
+ display: flex;
+ align-items: center;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ }
}
diff --git a/packages/console/src/pages/Cloud/components/ActionBar/index.tsx b/packages/console/src/pages/Cloud/components/ActionBar/index.tsx
index ed22bd702..6b7213000 100644
--- a/packages/console/src/pages/Cloud/components/ActionBar/index.tsx
+++ b/packages/console/src/pages/Cloud/components/ActionBar/index.tsx
@@ -1,11 +1,20 @@
import type { ReactNode } from 'react';
+import ProgressBar from '../ProgressBar';
import * as styles from './index.module.scss';
type Props = {
+ step: number;
children: ReactNode;
};
-const ActionBar = ({ children }: Props) =>
{children}
;
+const totalSteps = 4;
+
+const ActionBar = ({ step, children }: Props) => (
+
+);
export default ActionBar;
diff --git a/packages/console/src/pages/Cloud/components/ProgressBar/index.module.scss b/packages/console/src/pages/Cloud/components/ProgressBar/index.module.scss
new file mode 100644
index 000000000..c20f8a3d7
--- /dev/null
+++ b/packages/console/src/pages/Cloud/components/ProgressBar/index.module.scss
@@ -0,0 +1,16 @@
+@use '@/scss/underscore' as _;
+
+.progressBar {
+ display: flex;
+ gap: _.unit(1);
+
+ .stepIndicator {
+ height: 4px;
+ background-color: var(--color-neutral-variant-80);
+ flex: 1;
+
+ &.active {
+ background-color: var(--color-text-link);
+ }
+ }
+}
diff --git a/packages/console/src/pages/Cloud/components/ProgressBar/index.tsx b/packages/console/src/pages/Cloud/components/ProgressBar/index.tsx
new file mode 100644
index 000000000..7d99bdfe9
--- /dev/null
+++ b/packages/console/src/pages/Cloud/components/ProgressBar/index.tsx
@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+ currentStep: number;
+ totalSteps: number;
+};
+
+const ProgressBar = ({ currentStep, totalSteps }: Props) => (
+
+ {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => (
+
+ ))}
+
+);
+
+export default ProgressBar;
diff --git a/packages/console/src/pages/Cloud/pages/About/index.tsx b/packages/console/src/pages/Cloud/pages/About/index.tsx
index a77e48459..99ef15dc9 100644
--- a/packages/console/src/pages/Cloud/pages/About/index.tsx
+++ b/packages/console/src/pages/Cloud/pages/About/index.tsx
@@ -101,7 +101,7 @@ const About = () => {
-
+
diff --git a/packages/console/src/pages/Cloud/pages/Congrats/index.tsx b/packages/console/src/pages/Cloud/pages/Congrats/index.tsx
index 553eec241..3e6b933dc 100644
--- a/packages/console/src/pages/Cloud/pages/Congrats/index.tsx
+++ b/packages/console/src/pages/Cloud/pages/Congrats/index.tsx
@@ -74,7 +74,7 @@ const Congrats = () => {
-
+