diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index a994e66..d2c815c 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -10,6 +10,13 @@ function Header({ type }) {
                 <NavLink to="/sessions" className={({ isActive }) => isActive ? styles.active : ''}>Q&A</NavLink>
                 <NavLink to="/curriculum" className={({ isActive }) => isActive ? styles.active : ''}>커리큘럼</NavLink>
             </nav>
+            <button className={styles.logoutBtn} onClick={() => {
+                localStorage.removeItem('token');
+                localStorage.removeItem('role');
+                window.location.href = '/login';
+            }}>
+                로그아웃
+            </button>            
         </header>
     );
 }
diff --git a/frontend/src/components/Header.module.css b/frontend/src/components/Header.module.css
index 585049b..fb275f0 100644
--- a/frontend/src/components/Header.module.css
+++ b/frontend/src/components/Header.module.css
@@ -60,4 +60,18 @@
 .active {
     color: var(--logo-color) !important;
     font-weight: 700;
-}
\ No newline at end of file
+}
+
+.logoutBtn {
+    margin-left: auto;
+    background: transparent;
+    border: none;
+    color: var(--header-color);
+    font-family: var(--font-main);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    opacity: 0.7;
+}
+
+.logoutBtn:hover { opacity: 1; transition: all ease-in-out 0.2s; }
\ No newline at end of file