diff --git a/design/uiux/prototype/07-AI참여방법설계.html b/design/uiux/prototype/07-AI참여방법설계.html
index 759331e..c81de07 100644
--- a/design/uiux/prototype/07-AI참여방법설계.html
+++ b/design/uiux/prototype/07-AI참여방법설계.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI 참여 방법 설계 - KT AI 이벤트 플랫폼</title>
+  <link rel="stylesheet" href="css/components/navigation.css">
   <style>
     /* CSS Reset */
     * {
@@ -444,10 +445,16 @@
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <button class="header__back" onclick="history.back()">←</button>
-    <h1 class="header__title">AI 참여 방법 설계</h1>
-    <p class="header__subtitle">고객이 이벤트에 참여하는 방법을 선택해 주세요</p>
+  <header class="app-bar">
+    <div class="app-bar__container">
+      <div class="app-bar__left">
+        <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
+          <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <h1 class="app-bar__title">AI 참여 방법 설계</h1>
+      <div class="app-bar__right"></div>
+    </div>
   </header>
 
   <!-- Main -->
diff --git a/design/uiux/prototype/08-AI홍보문구생성.html b/design/uiux/prototype/08-AI홍보문구생성.html
index b3c8447..5ddff3b 100644
--- a/design/uiux/prototype/08-AI홍보문구생성.html
+++ b/design/uiux/prototype/08-AI홍보문구생성.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI 홍보 문구 생성 - KT 이벤트 마케팅</title>
+  <link rel="stylesheet" href="css/components/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -578,12 +579,16 @@
 <body>
   <div class="copy-container">
     <!-- Header -->
-    <header class="copy-header">
-      <button class="copy-header__back" onclick="history.back()">
-        ←
-      </button>
-      <h1 class="copy-header__title">AI 홍보 문구 생성</h1>
-      <p class="copy-header__subtitle">AI가 맞춤형 홍보 문구를 생성해 드려요</p>
+    <header class="app-bar">
+      <div class="app-bar__container">
+        <div class="app-bar__left">
+          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
+            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <h1 class="app-bar__title">AI 홍보 문구 생성</h1>
+        <div class="app-bar__right"></div>
+      </div>
     </header>
 
     <!-- Loading State -->
diff --git a/design/uiux/prototype/10-AI영상제작.html b/design/uiux/prototype/10-AI영상제작.html
index ab54082..e2072fd 100644
--- a/design/uiux/prototype/10-AI영상제작.html
+++ b/design/uiux/prototype/10-AI영상제작.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI 영상 제작 - KT 이벤트 마케팅</title>
+  <link rel="stylesheet" href="css/components/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -340,12 +341,16 @@
 <body>
   <div class="video-container">
     <!-- Header -->
-    <header class="video-header">
-      <button class="video-header__back" onclick="history.back()">
-        ←
-      </button>
-      <h1 class="video-header__title">AI 영상 제작</h1>
-      <p class="video-header__subtitle">이벤트 홍보 영상을 자동으로 제작해 드려요</p>
+    <header class="app-bar">
+      <div class="app-bar__container">
+        <div class="app-bar__left">
+          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
+            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <h1 class="app-bar__title">AI 영상 제작</h1>
+        <div class="app-bar__right"></div>
+      </div>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/11-SNS콘텐츠생성.html b/design/uiux/prototype/11-SNS콘텐츠생성.html
index 03d989c..34b6d86 100644
--- a/design/uiux/prototype/11-SNS콘텐츠생성.html
+++ b/design/uiux/prototype/11-SNS콘텐츠생성.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SNS 콘텐츠 생성 - KT 이벤트 마케팅</title>
+  <link rel="stylesheet" href="css/components/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -486,12 +487,16 @@
 <body>
   <div class="sns-container">
     <!-- Header -->
-    <header class="sns-header">
-      <button class="sns-header__back" onclick="history.back()">
-        ←
-      </button>
-      <h1 class="sns-header__title">SNS 콘텐츠 생성</h1>
-      <p class="sns-header__subtitle">각 SNS 플랫폼에 최적화된 콘텐츠를 생성해 드려요</p>
+    <header class="app-bar">
+      <div class="app-bar__container">
+        <div class="app-bar__left">
+          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
+            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <h1 class="app-bar__title">SNS 콘텐츠 생성</h1>
+        <div class="app-bar__right"></div>
+      </div>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/12-QR포스터생성.html b/design/uiux/prototype/12-QR포스터생성.html
index 6c7a6d9..c6aaca9 100644
--- a/design/uiux/prototype/12-QR포스터생성.html
+++ b/design/uiux/prototype/12-QR포스터생성.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>QR 포스터 생성 - KT 이벤트 마케팅</title>
+  <link rel="stylesheet" href="css/components/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -500,12 +501,16 @@
 <body>
   <div class="qr-container">
     <!-- Header -->
-    <header class="qr-header">
-      <button class="qr-header__back" onclick="history.back()">
-        ←
-      </button>
-      <h1 class="qr-header__title">QR 포스터 생성</h1>
-      <p class="qr-header__subtitle">이벤트 QR 코드와 포스터를 자동으로 생성해 드려요</p>
+    <header class="app-bar">
+      <div class="app-bar__container">
+        <div class="app-bar__left">
+          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
+            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <h1 class="app-bar__title">QR 포스터 생성</h1>
+        <div class="app-bar__right"></div>
+      </div>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/12-QR포스터생성선택.html b/design/uiux/prototype/12-QR포스터생성선택.html
index 82e2b12..fb3ab0c 100644
--- a/design/uiux/prototype/12-QR포스터생성선택.html
+++ b/design/uiux/prototype/12-QR포스터생성선택.html
@@ -325,12 +325,16 @@
 <body>
   <div class="poster-container">
     <!-- Header -->
-    <header class="poster-header">
-      <button class="poster-header__back" onclick="history.back()">
-        ←
-      </button>
-      <h1 class="poster-header__title">QR 포스터 생성</h1>
-      <p class="poster-header__subtitle">오프라인 홍보용 QR 포스터를 만들어 보세요</p>
+    <header class="app-bar">
+      <div class="app-bar__container">
+        <div class="app-bar__left">
+          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
+            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <h1 class="app-bar__title">QR 포스터 생성</h1>
+        <div class="app-bar__right"></div>
+      </div>
     </header>
 
     <!-- Content -->
diff --git a/design/uiux/prototype/13-콘텐츠편집.html b/design/uiux/prototype/13-콘텐츠편집.html
index be0d131..3147aad 100644
--- a/design/uiux/prototype/13-콘텐츠편집.html
+++ b/design/uiux/prototype/13-콘텐츠편집.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>콘텐츠 편집 - KT 이벤트 마케팅</title>
+  <link rel="stylesheet" href="css/components/navigation.css">
   <style>
     /* CSS Variables */
     :root {
@@ -433,12 +434,16 @@
 <body>
   <div class="edit-container">
     <!-- Header -->
-    <header class="edit-header">
-      <button class="edit-header__back" onclick="history.back()">
-        ←
-      </button>
-      <h1 class="edit-header__title">콘텐츠 편집</h1>
-      <p class="edit-header__subtitle">생성된 콘텐츠를 검토하고 수정하세요</p>
+    <header class="app-bar">
+      <div class="app-bar__container">
+        <div class="app-bar__left">
+          <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
+            <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <h1 class="app-bar__title">콘텐츠 편집</h1>
+        <div class="app-bar__right"></div>
+      </div>
     </header>
 
     <!-- Content -->
