diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml
index dfbc54b..0a33090 100644
--- a/src/main/resources/application.yml
+++ b/src/main/resources/application.yml
@@ -228,48 +228,9 @@ page:
           apis:
             name: "API 목록"
             path: "/apis"
-          api_common:
-            name: "API 상세보기"
-            path: "/apis/common"
-          api_KAPAP004U3:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U3"
-          api_KAPAP004U4:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U4"
-          api_KAPAP004U5:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U5"
-          api_KAPAP004U6:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U6"
-          api_KAPAP004U7:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U7"
-          api_KAPAP004U8:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U8"
-          api_KAPAP004U9:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U9"
-          api_KAPAP004U10:
-            name: "API 상세보기"
-            path: "/apis/KAPAP004U10"
-          api_token_spec:
-            name: "API 상세보기"
-            path: "/apis/token-spec"
           api_detail:
             name: "API 상세보기"
             path: "/apis/detail"
-          api_key_new:
-            name: "API 키 신청"
-            path: "/apis/apikey/new"
-          api_key_prod:
-            name: "운영 API 키 신청"
-            path: "/apis/apikey/prod"
-      testbed:
-        name: 테스트 베드
-        path: "/apis/testbed"
       community:
         name: 고객지원
         path: "#"
@@ -305,39 +266,42 @@ page:
           mypage:
             name: "내 정보 관리"
             path: "/mypage"
-          dashboard:
-            name: 대시보드
-            path: "/dashboard"
           user_list:
             name: "이용자 관리"
             path: "/users"
           user_detail:
-            name: "이용자 관리"
+            name: "이용자 정보"
             path: "/users/detail"
-          app_request:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_request/history"
-          app_request_prod:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_request/prod_history"
-          app_request_detail:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_request/detail"
-          app_request_prod_detail:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_request/prod_detail"
           apikey:
             name: "인증키 관리"
             path: "/myapikey"
-          apikey_prod:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_prod_page"
-          apikey_detail:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_detail"
-          apikey_prod_detail:
-            name: "인증키 관리"
-            path: "/myapikey/api_key_prod_detail"
+          app_request_detail:
+            name: "인증키 신청 상세"
+            path: "/myapikey/app_request_detail"
+          credential_detail:
+            name: "인증키 정보"
+            path: "/myapikey/credential_detail"
           change_password:
             name: "비밀번호 변경"
             path: "/change_password"
+          myapikey_register_step1:
+            name: "앱 생성 (기본 정보)"
+            path: "/myapikey/register/step1"
+          myapikey_register_step2:
+            name: "앱 생성 (API 선택)"
+            path: "/myapikey/register/step2"
+          myapikey_register_step3:
+            name: "앱 생성 요청 완료"
+            path: "/myapikey/register/step3"
+          myapikey_modify_step1:
+            name: "앱 수정 (기본 정보)"
+            path: "/myapikey/modify/step1"
+          myapikey_modify_step2:
+            name: "앱 수정 (API 선택)"
+            path: "/myapikey/modify/step2"
+          myapikey_modify_step3:
+            name: "앱 수정 요청 완료"
+            path: "/myapikey/modify/step3"
+          commission:
+            name: "과금 관리"
+            path: "/commission/manage"
diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
index 34d54b5..9c2416b 100644
--- a/src/main/resources/static/css/main.css
+++ b/src/main/resources/static/css/main.css
@@ -6312,6 +6312,194 @@ select.form-control {
   margin-top: 24px;
 }
 
+.breadcrumb-container {
+  background-color: #e9f8ff;
+  height: 60px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px;
+  width: 100%;
+}
+@media (max-width: 768px) {
+  .breadcrumb {
+    gap: 12px;
+    padding: 0 16px;
+  }
+}
+.breadcrumb-home {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.breadcrumb-home svg {
+  width: 18px;
+  height: 17px;
+  fill: #8c959f;
+  transition: all 0.15s ease;
+}
+.breadcrumb-home:hover svg {
+  fill: #0049b4;
+}
+.breadcrumb-separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.breadcrumb-separator svg {
+  width: 6.5px;
+  height: 12px;
+  fill: #5f666c;
+}
+@media (max-width: 768px) {
+  .breadcrumb-separator {
+    width: 16px;
+    height: 16px;
+  }
+  .breadcrumb-separator svg {
+    width: 5px;
+    height: 10px;
+  }
+}
+.breadcrumb-item {
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1;
+  color: #5f666c;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+}
+.breadcrumb-item:hover {
+  color: #0049b4;
+}
+.breadcrumb-item--active {
+  font-weight: 700;
+  color: #212529;
+}
+.breadcrumb-item--active:hover {
+  color: #212529;
+  cursor: default;
+}
+@media (max-width: 768px) {
+  .breadcrumb-item {
+    font-size: 14px;
+  }
+}
+
+.breadcrumb-nav {
+  background-color: #e9f8ff;
+  height: 60px;
+  width: 100%;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav {
+    height: 48px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 48px;
+  height: 100%;
+  list-style: none;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav .breadcrumb-list {
+    gap: 12px;
+    padding: 0 16px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list-item {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav .breadcrumb-list-item {
+    gap: 12px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list-item:not(:last-child)::after {
+  content: "";
+  display: block;
+  width: 6.5px;
+  height: 12px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%235F666C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav .breadcrumb-list-item:not(:last-child)::after {
+    width: 5px;
+    height: 10px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list-item a {
+  font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1;
+  color: #5f666c;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+}
+.breadcrumb-nav .breadcrumb-list-item a:hover {
+  color: #0049b4;
+}
+@media (max-width: 768px) {
+  .breadcrumb-nav .breadcrumb-list-item a {
+    font-size: 14px;
+  }
+}
+.breadcrumb-nav .breadcrumb-list-item:last-child a {
+  font-weight: 700;
+  color: #212529;
+  pointer-events: none;
+}
+.breadcrumb-nav .breadcrumb-list-item:first-child a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 0;
+}
+.breadcrumb-nav .breadcrumb-list-item:first-child a::before {
+  content: "";
+  display: block;
+  width: 18px;
+  height: 17px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%238C959F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  transition: all 0.15s ease;
+}
+.breadcrumb-nav .breadcrumb-list-item:first-child a:hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%230049B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
 .hero-carousel-section {
   position: relative;
   width: 100%;
diff --git a/src/main/resources/static/sass/components/_breadcrumb.scss b/src/main/resources/static/sass/components/_breadcrumb.scss
new file mode 100644
index 0000000..a844ca0
--- /dev/null
+++ b/src/main/resources/static/sass/components/_breadcrumb.scss
@@ -0,0 +1,212 @@
+// -----------------------------------------------------------------------------
+// Breadcrumb Navigation Component
+// Based on Figma: node 1339-3649
+// Background: #e9f8ff, Height: 60px
+// -----------------------------------------------------------------------------
+
+.breadcrumb-container {
+  background-color: #e9f8ff;
+  height: 60px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  max-width: $container-max-width;
+  margin: 0 auto;
+  padding: 0 $spacing-lg;
+  width: 100%;
+
+  @media (max-width: $breakpoint-sm) {
+    gap: 12px;
+    padding: 0 $spacing-md;
+  }
+
+  // Home icon
+  &-home {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+
+    svg {
+      width: 18px;
+      height: 17px;
+      fill: #8c959f;
+      transition: $transition-fast;
+    }
+
+    &:hover svg {
+      fill: $primary-blue;
+    }
+  }
+
+  // Separator arrow icon
+  &-separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+
+    svg {
+      width: 6.5px;
+      height: 12px;
+      fill: #5f666c;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      width: 16px;
+      height: 16px;
+
+      svg {
+        width: 5px;
+        height: 10px;
+      }
+    }
+  }
+
+  // Breadcrumb item (text link)
+  &-item {
+    font-family: $font-family-primary;
+    font-size: 16px;
+    font-weight: $font-weight-regular;
+    line-height: 1;
+    color: #5f666c;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: $transition-fast;
+
+    &:hover {
+      color: $primary-blue;
+    }
+
+    // Current/Active item (last item)
+    &--active {
+      font-weight: $font-weight-bold;
+      color: #212529;
+
+      &:hover {
+        color: #212529;
+        cursor: default;
+      }
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      font-size: 14px;
+    }
+  }
+}
+
+// Alternative: Using list structure
+.breadcrumb-nav {
+  background-color: #e9f8ff;
+  height: 60px;
+  width: 100%;
+
+  @media (max-width: $breakpoint-sm) {
+    height: 48px;
+  }
+
+  .breadcrumb-list {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    max-width: $container-max-width;
+    margin: 0 auto;
+    padding: 0 $spacing-3xl;
+    height: 100%;
+    list-style: none;
+
+    @media (max-width: $breakpoint-sm) {
+      gap: 12px;
+      padding: 0 $spacing-md;
+    }
+  }
+
+  .breadcrumb-list-item {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+
+    @media (max-width: $breakpoint-sm) {
+      gap: 12px;
+    }
+
+    // Add separator after each item except last
+    &:not(:last-child)::after {
+      content: '';
+      display: block;
+      width: 6.5px;
+      height: 12px;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12' fill='none'%3E%3Cpath d='M1 1L6 6L1 11' stroke='%235F666C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+
+      @media (max-width: $breakpoint-sm) {
+        width: 5px;
+        height: 10px;
+      }
+    }
+
+    a {
+      font-family: $font-family-primary;
+      font-size: 16px;
+      font-weight: $font-weight-regular;
+      line-height: 1;
+      color: #5f666c;
+      text-decoration: none;
+      white-space: nowrap;
+      transition: $transition-fast;
+
+      &:hover {
+        color: $primary-blue;
+      }
+
+      @media (max-width: $breakpoint-sm) {
+        font-size: 14px;
+      }
+    }
+
+    // Current page (last item)
+    &:last-child a {
+      font-weight: $font-weight-bold;
+      color: #212529;
+      pointer-events: none;
+    }
+
+    // Home icon styling
+    &:first-child a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      font-size: 0; // Hide text, show only icon
+
+      &::before {
+        content: '';
+        display: block;
+        width: 18px;
+        height: 17px;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%238C959F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        transition: $transition-fast;
+      }
+
+      &:hover::before {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M1 6.5L9 1L17 6.5V15C17 15.5304 16.7893 16.0391 16.4142 16.4142C16.0391 16.7893 15.5304 17 15 17H3C2.46957 17 1.96086 16.7893 1.58579 16.4142C1.21071 16.0391 1 15.5304 1 15V6.5Z' stroke='%230049B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      }
+    }
+  }
+}
diff --git a/src/main/resources/static/sass/main.scss b/src/main/resources/static/sass/main.scss
index 78dea27..b722f08 100644
--- a/src/main/resources/static/sass/main.scss
+++ b/src/main/resources/static/sass/main.scss
@@ -38,6 +38,7 @@
 @import 'components/page-title-banner';
 @import 'components/alerts';
 @import 'components/pagination';
+@import 'components/breadcrumb';
 
 // 5. Page-specific styles
 @import 'pages/index';
diff --git a/src/main/resources/templates/views/apps/mypage/apiKeyList.html b/src/main/resources/templates/views/apps/mypage/apiKeyList.html
index 2275705..1d137b2 100644
--- a/src/main/resources/templates/views/apps/mypage/apiKeyList.html
+++ b/src/main/resources/templates/views/apps/mypage/apiKeyList.html
@@ -15,7 +15,7 @@
 
     <!-- App List Title Section -->
     <div class="app-list-title-section">
-      <h2 class="app-list-title">앱 목록</h2>
+      <h2 class="app-list-title">인증키 관리</h2>
     </div>
 
     <!-- App List Container -->
diff --git a/src/main/resources/templates/views/apps/mypage/credentialDetail.html b/src/main/resources/templates/views/apps/mypage/credentialDetail.html
index 24d0895..9acb951 100644
--- a/src/main/resources/templates/views/apps/mypage/credentialDetail.html
+++ b/src/main/resources/templates/views/apps/mypage/credentialDetail.html
@@ -18,7 +18,7 @@
 
     <!-- Title Bar -->
     <div class="common-title-bar">
-      <h2 class="common-title">앱 정보</h2>
+      <h2 class="common-title">인증키 정보</h2>
       <span class="common-subtitle">등록된 앱의 상세 정보를 확인할 수 있습니다.</span>
     </div>
 
diff --git a/src/main/resources/templates/views/fragment/kjbank/header_nav.html b/src/main/resources/templates/views/fragment/kjbank/header_nav.html
index 4133285..ae6cd46 100644
--- a/src/main/resources/templates/views/fragment/kjbank/header_nav.html
+++ b/src/main/resources/templates/views/fragment/kjbank/header_nav.html
@@ -7,13 +7,31 @@
 </head>
 
 <body>
-<div th:fragment="headerFragment" class="navigation" id="navigation">
-  <ul class="navigation-area">
-    <li th:each="crumb : ${breadcrumb}">
-      <a th:href="${crumb.path}" class="navigation-button" th:text="${crumb.name}">Unknown Page</a>
+<!-- Breadcrumb Navigation - Figma: node 1339-3649 -->
+<nav th:fragment="headerFragment" class="breadcrumb-nav" id="navigation" aria-label="breadcrumb">
+  <ol class="breadcrumb-list">
+    <!-- Home Icon -->
+    <li class="breadcrumb-list-item">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_1339_3588)">
+          <path d="M10.0001 19V14H14.0001V19C14.0001 19.55 14.4501 20 15.0001 20H18.0001C18.5501 20 19.0001 19.55 19.0001 19V12H20.7001C21.1601 12 21.3801 11.43 21.0301 11.13L12.6701 3.59997C12.2901 3.25997 11.7101 3.25997 11.3301 3.59997L2.9701 11.13C2.6301 11.43 2.8401 12 3.3001 12H5.0001V19C5.0001 19.55 5.4501 20 6.0001 20H9.0001C9.5501 20 10.0001 19.55 10.0001 19Z" fill="#8C959F"/>
+        </g>
+        <defs>
+          <clipPath id="clip0_1339_3588">
+            <rect width="24" height="24" fill="white"/>
+          </clipPath>
+        </defs>
+      </svg>
     </li>
-  </ul>
-</div>
+    <!-- Breadcrumb Items (skip first item - home icon is hardcoded above) -->
+    <li class="breadcrumb-list-item" th:each="crumb, status : ${breadcrumb}" th:if="${status.index > 0}">
+      <a th:href="${crumb.path}"
+         th:text="${crumb.name}"
+         th:classappend="${status.last} ? 'active' : ''"
+         th:attr="aria-current=${status.last} ? 'page' : null">Unknown Page</a>
+    </li>
+  </ol>
+</nav>
 </body>
 
 </html>
diff --git a/src/main/resources/templates/views/layout/kjbank_title_layout.html b/src/main/resources/templates/views/layout/kjbank_title_layout.html
index 3f8e58d..867742c 100644
--- a/src/main/resources/templates/views/layout/kjbank_title_layout.html
+++ b/src/main/resources/templates/views/layout/kjbank_title_layout.html
@@ -12,8 +12,7 @@
     <div class="loading-overlay" style="display: none;">
       <div class="loading-spinner"></div>
     </div>
-    <th:block layout:fragment="title">
-    </th:block>
+    <div class="navigation" th:replace="fragment/kjbank/header_nav :: headerFragment"></div>
     <div class="container">
       <th:block layout:fragment="contentFragment">
       </th:block>