diff --git a/components/header.js b/components/header.js
new file mode 100644
index 0000000..e51bbfe
--- /dev/null
+++ b/components/header.js
@@ -0,0 +1,68 @@
+import "./link-button/link-button.js";
+
+const template = document.createElement("template");
+template.innerHTML = `
+  <style>
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding: 20px 0;
+      width: 100%;
+      border-bottom: 1px solid #D3D3D3;
+      background-color: rgba(255, 255, 255, 0.8);
+    }
+
+    header {
+      width: 80%;
+      margin: 0 auto;
+      justify-content: space-between;
+      display: flex;
+      align-items: center;
+    }
+
+    .buttons-container {
+      display: flex;
+    }
+
+    a {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      text-decoration: none;
+    }
+
+    a img {
+      width: 45px;
+      height: 22.5px;
+    }
+
+    a span {
+      font-size: 20px;
+      font-weight: 500;
+      color: black;
+    }
+  </style>
+  <header>
+      <a href="/">
+        <img src="images/logo.png" alt="logo" />
+        <span>달레 스터디</span>
+      </a>
+    
+      <div class="buttons-container">
+        <link-button href="#join-instruction-container" size="large" variant="primary">참여방법 안내</link-button>
+        <link-button href="https://discord.gg/43UkheRV" size="large" variant="secondary">디스코드 참여하기</link-button>
+      </div>
+  </header>
+`;
+
+class HeaderComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+customElements.define("header-component", HeaderComponent);
+
diff --git a/index.html b/index.html
index d9c7fe8..c9a08c5 100644
--- a/index.html
+++ b/index.html
@@ -234,16 +234,7 @@
   </head>
 
   <body>
-    <header>
-      <div>
-        <img src="images/logo.png" alt="#" />
-        <span>달레 스터디</span>
-      </div>
-      <div>
-        <link-button size="small" variant="ghost" href="#join-instruction-container">참여방법 안내</link-button>
-        <link-button size="small" variant="secondary" href="https://discord.gg/43UkheRV">디스코드 참여하기</link-button>
-      </div>
-    </header>
+    <header-component></header-component>
 
     <div id="intro-container">
       <div class="hero">
diff --git a/main.js b/main.js
index 16d65c9..ea39064 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,8 @@
 import "./components/divider/divider.js";
 import "./components/footer-link/footer-link.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";
+
