diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index aab2d652..077434d5 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -26,6 +26,7 @@ import {
 import { renderInputs } from './renders/input';
 import { RADIO_OPTIONS } from './renders/radio';
 import { SEGMENTED_CONTROLS_OPTIONS } from './renders/segmentedControls';
+import { renderHorizontalSteps, renderVerticalSteps } from './renders/steps';
 import {
   renderTabWithBadges,
   renderTabs,
@@ -56,6 +57,17 @@ const Page: React.FC = () => {
 
         <div className="w-full h border border-gray-200 px-20 my-10" />
 
+        {/* Steps */}
+        <div className="flex flex-col gap-10 items-center justify-between">
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Steps</h1>
+            <div className="flex flex-col gap-10 items-center justify-center">
+              {renderVerticalSteps()}
+              {renderHorizontalSteps()}
+            </div>
+          </div>
+        </div>
+
         {/* Tag */}
         <div className="flex flex-col gap-10 items-center justify-between">
           <div className="flex flex-col gap-10 items-center justify-between">
diff --git a/packages/frontend/src/pages/components/renders/steps.tsx b/packages/frontend/src/pages/components/renders/steps.tsx
new file mode 100644
index 00000000..2d3f3da5
--- /dev/null
+++ b/packages/frontend/src/pages/components/renders/steps.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Steps } from 'components/shared/Steps';
+
+export const renderVerticalSteps = () => {
+  return (
+    <Steps
+      currentIndex={1}
+      steps={[
+        {
+          label: 'Create repository',
+        },
+        {
+          label: 'Deploy',
+        },
+        {
+          label: `What's next?`,
+        },
+      ]}
+    />
+  );
+};
+
+export const renderHorizontalSteps = () => {
+  return (
+    <Steps
+      orientation="horizontal"
+      currentIndex={1}
+      steps={[
+        {
+          label: 'Create repository',
+        },
+        {
+          label: 'Deploy',
+        },
+        {
+          label: `What's next?`,
+        },
+      ]}
+    />
+  );
+};