diff --git a/components/step-section.js b/components/step-section.js
index 6215e22..8b6c35d 100644
--- a/components/step-section.js
+++ b/components/step-section.js
@@ -1,6 +1,6 @@
 import { html, css } from "../html-css-utils.js";
 
-class StepSection extends HTMLElement {
+class StepsSection extends HTMLElement {
   constructor() {
     super();
     this.render();
@@ -13,7 +13,7 @@ class StepSection extends HTMLElement {
 
   createCss() {
     return css`
-      .step-section {
+      section {
         width: 80%;
         max-width: 1550px;
         margin: 0 auto;
@@ -27,11 +27,11 @@ class StepSection extends HTMLElement {
 
   createHtml() {
     return html`
-      <section class="step-section">
+      <section>
         <slot></slot>
       </section>
     `;
   }
 }
 
-customElements.define("ds-step-section", StepSection);
+customElements.define("ds-steps-section", StepsSection);
diff --git a/index.html b/index.html
index 041344e..4c377d0 100644
--- a/index.html
+++ b/index.html
@@ -244,7 +244,7 @@
       </div>
     </div>
 
-    <ds-step-section>
+    <ds-steps-section>
       <ds-hero>스터디 참여방법</ds-hero>
       <ds-step-list>
         <ds-step step="1" iconSrc="images/icon_step1.png">
@@ -278,7 +278,7 @@
           </p>
         </ds-step>
       </ds-step-list>
-    </ds-step-section>
+    </ds-steps-section>
 
     <footer>
       <div