diff --git a/components/hero.js b/components/hero.js
index ea9d86c..4b28ca9 100644
--- a/components/hero.js
+++ b/components/hero.js
@@ -1,24 +1,19 @@
-const template = document.createElement('template');
-template.innerHTML = `
+const html = `
   <style>
     :host {
       display: block;
       font-weight: 500;
-      font-size: 50px; /* Default font size */
+      font-size: 30px;
     }
 
-    @media (max-width: 1024px) {
-      :host {
-        font-size: 40px; /* Tablet font size */
-      }
+    @media only screen and (min-width: 768px) {
+      font-size: 40px;
     }
 
-    @media (max-width: 480px) {
-      :host {
-        font-size: 30px; /* Mobile font size */
-      }
+    @media only screen and (min-width: 1024px) {
+      font-size: 50px;
     }
-
+  
     /* Ensure the <h2> element inherits styles from :host */
     h2 {
       font-weight: inherit;
@@ -30,12 +25,12 @@ template.innerHTML = `
   </h2>
 `;
 
-class HeroComponent extends HTMLElement {
+class DsHero extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.shadowRoot.innerHTML = html;
   }
 }
 
-window.customElements.define('hero-component', HeroComponent);
+customElements.define('ds-hero', DsHero);
diff --git a/index.html b/index.html
index 9e0cde8..a31abf8 100644
--- a/index.html
+++ b/index.html
@@ -238,7 +238,7 @@
 
     <div id="intro-container">
       <div class="hero">
-        <hero-component>해외취업을 위한 커뮤니티 기반 알고리즘 스터디</hero-component>
+        <ds-hero>해외취업을 위한 커뮤니티 기반 알고리즘 스터디</ds-hero>
         <link-button size="big" variant="secondary" href="https://discord.gg/43UkheRV">디스코드 참여하기</link-button>
       </div>
 
@@ -252,14 +252,14 @@
         <img src="images/languages.png" alt="#" />
       </div>
       <div class="hero">
-        <hero-component>지역에 관계없이 다양한 언어로 참여할 수 있어요</hero-component>
+        <ds-hero>지역에 관계없이 다양한 언어로 참여할 수 있어요</ds-hero>
         <link-button size="big" variant="ghost" outline href="#join-instruction-container">참여방법 안내</link-button>
       </div>
     </div>
 
     <div id="review-container">
       <div class="hero">
-        <hero-component>코드리뷰를 통해 새로운 관점을 배울 수 있어요</hero-component>
+        <ds-hero>코드리뷰를 통해 새로운 관점을 배울 수 있어요</ds-hero>
         <link-button size="big" variant="secondary" href="https://discord.gg/43UkheRV">디스코드 참여하기</link-button>
       </div>
       <div class="review-image">