diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index df08f2e5..03e130a2 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -34,6 +34,7 @@ const handleTemplateSelect = (e: Event) => {
         <router-link to="/shadow" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-04: Shadow</router-link>
         <router-link to="/settings" style="color: white; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">SCR-07: 캘리브레이션</router-link>
         <router-link to="/templates" style="color: #F1C40F; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">🛠️ 템플릿 갤러리</router-link>
+        <router-link to="/components" style="color: #34D399; text-decoration: none; padding: 4px 8px; font-size: 12px; font-weight: bold;" active-class="bg-blue-600 rounded">🧩 4계층 컴포넌트 쇼케이스</router-link>
       </div>
 
       <!-- 🏛️ OMS·WMS·ERP 11대 표준 업무 템플릿 빠른 메뉴 셀렉터 -->