diff --git a/components/hero.js b/components/hero.js
deleted file mode 100644
index 0568770..0000000
--- a/components/hero.js
+++ /dev/null
@@ -1,42 +0,0 @@
-const css = `
-  <style>
-  :host {
-    display: block;
-    font-weight: 500;
-    font-size: 30px;
-  }
-
-  h2 {
-    font-weight: inherit;
-    font-size: 30px;
-  }
-
-  @media only screen and (min-width: 768px) {
-    h2 {
-      font-size: 40px;
-    }
-  }
-
-  @media only screen and (min-width: 1024px) {
-    h2 {
-      font-size: 50px;
-    }
-  }
-  </style>
-`;
-
-const html = `
-  <h2>
-    <slot></slot>
-  </h2>
-`;
-
-class Hero extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = css + html;
-  }
-}
-
-customElements.define('ds-hero', Hero);
diff --git a/components/hero/hero.css b/components/hero/hero.css
new file mode 100644
index 0000000..a94d1e5
--- /dev/null
+++ b/components/hero/hero.css
@@ -0,0 +1,4 @@
+.hero-description {
+  font-size: 5rem;
+  font-weight: medium;
+}
diff --git a/components/hero/hero.js b/components/hero/hero.js
new file mode 100644
index 0000000..391a468
--- /dev/null
+++ b/components/hero/hero.js
@@ -0,0 +1,17 @@
+const template = document.createElement('template');
+template.innerHTML = `
+  <link rel="stylesheet" href="./components/hero/hero.css">
+  <p class="hero-description">
+    <slot></slot>
+  </p>
+`;
+
+class Hero extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+window.customElements.define('hero-component', Hero);
diff --git a/index.html b/index.html
index 7b6d190..81db82c 100644
--- a/index.html
+++ b/index.html
@@ -270,8 +270,6 @@
 
     <div id="review-container">
       <div class="hero">
-        <ds-hero>코드리뷰를 통해 새로운 관점을 배울 수 있어요</ds-hero>
-        <link-button size="big" variant="secondary" href="https://discord.gg/43UkheRV">디스코드 참여하기</link-button>
         <p>코드리뷰를 통해 새로운 관점을 배울 수 있어요</p>
         <link-button
           size="big"
diff --git a/main.js b/main.js
index b8ee9eb..351112f 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,6 @@
 import "./components/footer-link/footer-link.js";
-import "./components/header.js"
-import "./components/hero.js";
+import "./components/header.js";
+import "./components/hero/hero.js";
 import "./components/link-button/link-button.js";
 import "./components/review-item/review-item.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";