diff --git a/design/uiux/prototype/20-당첨자명단관리.html b/design/uiux/prototype/20-당첨자명단관리.html
index 550f303..1e60b22 100644
--- a/design/uiux/prototype/20-당첨자명단관리.html
+++ b/design/uiux/prototype/20-당첨자명단관리.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <title>당첨자 명단 관리 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -615,10 +616,16 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <button class="header__back" aria-label="뒤로 가기">←</button>
-    <h1 class="header__title">당첨자 명단 관리</h1>
-    <button class="header__action" aria-label="새로고침">⟳</button>
+  <header class="app-bar">
+    <div class="app-bar__container">
+      <div class="app-bar__left">
+        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
+      </div>
+      <h1 class="app-bar__title">당첨자 명단 관리</h1>
+      <div class="app-bar__right">
+        <button class="header__action" aria-label="새로고침">⟳</button>
+      </div>
+    </div>
   </header>
 
   <!-- Main -->
@@ -768,7 +775,7 @@
     const emptyState = $('#emptyState');
     const exportBtn = $('#exportBtn');
     const notifyBtn = $('#notifyBtn');
-    const backBtn = $('.header__back');
+    const backBtn = $('.app-bar__back');
     const refreshBtn = $('.header__action');
     const countAll = $('#countAll');
     const countPending = $('#countPending');
diff --git a/design/uiux/prototype/21-실시간대시보드.html b/design/uiux/prototype/21-실시간대시보드.html
index 93ef7ed..f054424 100644
--- a/design/uiux/prototype/21-실시간대시보드.html
+++ b/design/uiux/prototype/21-실시간대시보드.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <title>실시간 대시보드 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -535,14 +536,18 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <button class="header__back" aria-label="뒤로 가기">←</button>
-    <h1 class="header__title">실시간 대시보드</h1>
-    <div class="header__actions">
-      <button class="header__action" id="refreshBtn" aria-label="새로고침">
-        ⟳
-        <span class="refresh-indicator"></span>
-      </button>
+  <header class="app-bar">
+    <div class="app-bar__container">
+      <div class="app-bar__left">
+        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
+      </div>
+      <h1 class="app-bar__title">실시간 대시보드</h1>
+      <div class="app-bar__right">
+        <button class="header__action" id="refreshBtn" aria-label="새로고침">
+          ⟳
+          <span class="refresh-indicator"></span>
+        </button>
+      </div>
     </div>
   </header>
 
@@ -703,7 +708,7 @@
     const activityList = $('#activityList');
     const dateRangeBtns = $$('.date-range__btn');
     const refreshBtn = $('#refreshBtn');
-    const backBtn = $('.header__back');
+    const backBtn = $('.app-bar__back');
 
     // Generate Mock Data
     function generateMockData(range) {
diff --git a/design/uiux/prototype/22-채널별성과분석.html b/design/uiux/prototype/22-채널별성과분석.html
index 91c6291..bb97f09 100644
--- a/design/uiux/prototype/22-채널별성과분석.html
+++ b/design/uiux/prototype/22-채널별성과분석.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <title>채널별 성과 분석 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -491,10 +492,16 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <button class="header__back" aria-label="뒤로 가기">←</button>
-    <h1 class="header__title">채널별 성과 분석</h1>
-    <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
+  <header class="app-bar">
+    <div class="app-bar__container">
+      <div class="app-bar__left">
+        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
+      </div>
+      <h1 class="app-bar__title">채널별 성과 분석</h1>
+      <div class="app-bar__right">
+        <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
+      </div>
+    </div>
   </header>
 
   <!-- Main -->
@@ -605,7 +612,7 @@
     const periodFilterBtns = $$('.period-filter__btn');
     const refreshBtn = $('#refreshBtn');
     const exportBtn = $('#exportBtn');
-    const backBtn = $('.header__back');
+    const backBtn = $('.app-bar__back');
 
     // Generate Mock Channel Data
     function generateChannelData(period) {
diff --git a/design/uiux/prototype/23-ROI분석.html b/design/uiux/prototype/23-ROI분석.html
index 183e0c4..bfd08d9 100644
--- a/design/uiux/prototype/23-ROI분석.html
+++ b/design/uiux/prototype/23-ROI분석.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <title>ROI 분석 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -524,10 +525,16 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <button class="header__back" aria-label="뒤로 가기">←</button>
-    <h1 class="header__title">ROI 분석</h1>
-    <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
+  <header class="app-bar">
+    <div class="app-bar__container">
+      <div class="app-bar__left">
+        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
+      </div>
+      <h1 class="app-bar__title">ROI 분석</h1>
+      <div class="app-bar__right">
+        <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
+      </div>
+    </div>
   </header>
 
   <!-- Main -->
@@ -660,7 +667,7 @@
     const insightsList = $('#insightsList');
     const refreshBtn = $('#refreshBtn');
     const exportBtn = $('#exportBtn');
-    const backBtn = $('.header__back');
+    const backBtn = $('.app-bar__back');
 
     // Generate Mock Data
     function generateROIData() {
diff --git a/design/uiux/prototype/24-분석리포트.html b/design/uiux/prototype/24-분석리포트.html
index 4877710..7635950 100644
--- a/design/uiux/prototype/24-분석리포트.html
+++ b/design/uiux/prototype/24-분석리포트.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <title>분석 리포트 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -548,12 +549,16 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <button class="header__back" aria-label="뒤로 가기">←</button>
-    <h1 class="header__title">분석 리포트</h1>
-    <div class="header__actions">
-      <button class="header__action" id="shareBtn" aria-label="공유하기">📤</button>
-      <button class="header__action" id="printBtn" aria-label="인쇄하기">🖨</button>
+  <header class="app-bar">
+    <div class="app-bar__container">
+      <div class="app-bar__left">
+        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
+      </div>
+      <h1 class="app-bar__title">분석 리포트</h1>
+      <div class="app-bar__right">
+        <button class="header__action" id="shareBtn" aria-label="공유하기">📤</button>
+        <button class="header__action" id="printBtn" aria-label="인쇄하기">🖨</button>
+      </div>
     </div>
   </header>
 
@@ -807,7 +812,7 @@
     const printBtn = $('#printBtn');
     const saveBtn = $('#saveBtn');
     const downloadBtn = $('#downloadBtn');
-    const backBtn = $('.header__back');
+    const backBtn = $('.app-bar__back');
 
     // Format Date
     function formatDate(date) {
diff --git a/design/uiux/prototype/25-이벤트목록.html b/design/uiux/prototype/25-이벤트목록.html
index ae2c745..79a1aa4 100644
--- a/design/uiux/prototype/25-이벤트목록.html
+++ b/design/uiux/prototype/25-이벤트목록.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <title>이벤트 목록 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -487,10 +488,16 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <button class="header__back" aria-label="뒤로 가기">←</button>
-    <h1 class="header__title">이벤트 목록</h1>
-    <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
+  <header class="app-bar">
+    <div class="app-bar__container">
+      <div class="app-bar__left">
+        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
+      </div>
+      <h1 class="app-bar__title">이벤트 목록</h1>
+      <div class="app-bar__right">
+        <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
+      </div>
+    </div>
   </header>
 
   <!-- Main -->
@@ -589,7 +596,7 @@
     const refreshBtn = $('#refreshBtn');
     const fabBtn = $('#fabBtn');
     const emptyCreateBtn = $('#emptyCreateBtn');
-    const backBtn = $('.header__back');
+    const backBtn = $('.app-bar__back');
 
     // Generate Mock Events
     function generateMockEvents() {
diff --git a/design/uiux/prototype/26-마이페이지.html b/design/uiux/prototype/26-마이페이지.html
index 7244726..bf8526c 100644
--- a/design/uiux/prototype/26-마이페이지.html
+++ b/design/uiux/prototype/26-마이페이지.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/components/navigation.css">
   <title>마이페이지 - KT AI 이벤트 플랫폼</title>
   <style>
     /* CSS Reset */
@@ -380,10 +381,16 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <button class="header__back" aria-label="뒤로 가기">←</button>
-    <h1 class="header__title">마이페이지</h1>
-    <button class="header__action" id="settingsBtn" aria-label="설정">⚙️</button>
+  <header class="app-bar">
+    <div class="app-bar__container">
+      <div class="app-bar__left">
+        <button class="app-bar__back" aria-label="뒤로 가기">←</button>
+      </div>
+      <h1 class="app-bar__title">마이페이지</h1>
+      <div class="app-bar__right">
+        <button class="header__action" id="settingsBtn" aria-label="설정">⚙️</button>
+      </div>
+    </div>
   </header>
 
   <!-- Main -->
@@ -609,7 +616,7 @@
     const termsBtn = $('#termsBtn');
     const privacyBtn = $('#privacyBtn');
     const logoutBtn = $('#logoutBtn');
-    const backBtn = $('.header__back');
+    const backBtn = $('.app-bar__back');
 
     // Format Number
     function formatNumber(num) {
