diff --git a/assets/css/cards.css b/assets/css/components/cards.css
similarity index 100%
rename from assets/css/cards.css
rename to assets/css/components/cards.css
diff --git a/assets/css/components/steps.css b/assets/css/components/steps.css
new file mode 100644
index 0000000..680d02d
--- /dev/null
+++ b/assets/css/components/steps.css
@@ -0,0 +1,11 @@
+.steps h3 {
+  counter-increment: step;
+
+  &:before {
+    @apply absolute w-[33px] h-[33px];
+    @apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
+    @apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
+    @apply mt-[3px] ml-[-41px];
+    content: counter(step);
+  }
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 94fe56c..0dc9e3b 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 @import "typography.css";
-@import "cards.css";
+@import "components/cards.css";
+@import "components/steps.css";
 
 html {
   @apply text-base antialiased;
diff --git a/content/docs/components/steps.md b/content/docs/components/steps.md
new file mode 100644
index 0000000..e8835a1
--- /dev/null
+++ b/content/docs/components/steps.md
@@ -0,0 +1,40 @@
+---
+title: Steps
+---
+
+A built-in component to display a series of steps.
+
+## Example
+
+{{< steps >}}
+
+### Step 1
+
+This is the first step.
+
+### Step 2
+
+This is the second step.
+
+### Step 3
+
+This is the third step.
+
+{{< /steps >}}
+
+
+## Usage
+
+Put Markdown h3 header within `steps` shortcode.
+
+```markdown
+{{</* steps */>}}
+### Step 1
+
+This is the first step.
+
+### Step 2
+
+This is the second step.
+{{</* /steps */>}}
+```
diff --git a/data/icons.yaml b/data/icons.yaml
index dbcbd13..b6dc10b 100644
--- a/data/icons.yaml
+++ b/data/icons.yaml
@@ -33,6 +33,6 @@ theme-light: >
 
 theme-dark: <svg fill="none" viewBox="2 2 20 20" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
 
-breadcrumb-delimiter: <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+chevron-right: <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
 
 warning: <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path></svg>
diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
index e7a4e3c..8540d7f 100644
--- a/layouts/partials/breadcrumb.html
+++ b/layouts/partials/breadcrumb.html
@@ -4,7 +4,7 @@
       <div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis">
         <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
       </div>
-      {{ partial "utils/icon.html" (dict "context" . "name" "breadcrumb-delimiter" "attributes" "class=\"w-3.5 shrink-0\"") }}
+      {{ partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0\"") }}
     {{ end }}
   {{ end }}
   <div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">
diff --git a/layouts/shortcodes/steps.html b/layouts/shortcodes/steps.html
new file mode 100644
index 0000000..1f8c84b
--- /dev/null
+++ b/layouts/shortcodes/steps.html
@@ -0,0 +1,3 @@
+<div class="steps ml-4 mb-12 border-l border-gray-200 pl-6 dark:border-neutral-800 [counter-reset:step]">
+  {{ .Inner | markdownify }}
+</div>