diff --git a/frontend/e2e/kbx-models.spec.ts b/frontend/e2e/kbx-models.spec.ts
new file mode 100644
index 00000000..72599035
--- /dev/null
+++ b/frontend/e2e/kbx-models.spec.ts
@@ -0,0 +1,216 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Models (KBX Foundation)', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to models list
+    await page.goto('http://localhost:5173/model-ops/models', {
+      waitUntil: 'networkidle',
+    })
+
+    // Wait for component to hydrate
+    await page.waitForTimeout(500)
+  })
+
+  test('should display models list with grid', async ({ page }) => {
+    // Check page title
+    const title = page.locator('h1')
+    await expect(title).toContainText('Model Management')
+
+    // Check grid visibility
+    const grid = page.locator('.kbx-data-grid')
+    await expect(grid).toBeVisible()
+
+    // Check summary badges
+    const summaryItems = page.locator('[class*="summary"]')
+    await expect(summaryItems).toHaveCount(4)
+  })
+
+  test('should filter models by phase', async ({ page }) => {
+    // Get phase filter select
+    const phaseFilter = page.locator('select.phase-filter')
+    await expect(phaseFilter).toBeVisible()
+
+    // Select a phase
+    await phaseFilter.selectOption('Mature')
+
+    // Wait for filter
+    await page.waitForTimeout(300)
+
+    // Grid should still be visible
+    const grid = page.locator('.kbx-data-grid')
+    await expect(grid).toBeVisible()
+  })
+
+  test('should filter models by active status', async ({ page }) => {
+    // Get active filter select
+    const activeFilter = page.locator('select.active-filter')
+    await expect(activeFilter).toBeVisible()
+
+    // Select active only
+    await activeFilter.selectOption('active')
+
+    // Wait for filter
+    await page.waitForTimeout(300)
+
+    // Grid should update
+    const grid = page.locator('.kbx-data-grid')
+    await expect(grid).toBeVisible()
+  })
+
+  test('should navigate to model detail', async ({ page }) => {
+    // Wait for data
+    await page.waitForTimeout(500)
+
+    // Click first model row
+    const firstRow = page.locator('tbody tr').first()
+    await expect(firstRow).toBeVisible()
+    await firstRow.click()
+
+    // Should navigate to detail page
+    await page.waitForURL('**/models/*', { timeout: 5000 })
+    expect(page.url()).toMatch(/\/model-ops\/models\/.+/)
+
+    // Verify detail page structure
+    const detailHeader = page.locator('.detail-header h1')
+    await expect(detailHeader).toBeVisible()
+  })
+
+  test('should display model activation requirements', async ({ page }) => {
+    // Navigate to detail
+    await page.waitForTimeout(500)
+    const firstRow = page.locator('tbody tr').first()
+    if (await firstRow.isVisible()) {
+      await firstRow.click()
+      await page.waitForURL('**/models/*')
+    }
+
+    // Check requirements section
+    const requirementsSection = page.locator('.requirements-section')
+    await expect(requirementsSection).toBeVisible()
+
+    // Check requirement cards
+    const requirementCards = page.locator('.requirement-card')
+    await expect(requirementCards.first()).toBeVisible()
+  })
+
+  test('should display model lifecycle phases', async ({ page }) => {
+    // Navigate to detail
+    await page.waitForTimeout(500)
+    const firstRow = page.locator('tbody tr').first()
+    if (await firstRow.isVisible()) {
+      await firstRow.click()
+      await page.waitForURL('**/models/*')
+    }
+
+    // Check phase timeline
+    const phaseTimeline = page.locator('.phase-timeline')
+    await expect(phaseTimeline).toBeVisible()
+
+    // Check individual phase items
+    const phaseItems = page.locator('.phase-item')
+    await expect(phaseItems.first()).toBeVisible()
+  })
+
+  test('should display model configuration', async ({ page }) => {
+    // Navigate to detail
+    await page.waitForTimeout(500)
+    const firstRow = page.locator('tbody tr').first()
+    if (await firstRow.isVisible()) {
+      await firstRow.click()
+      await page.waitForURL('**/models/*')
+    }
+
+    // Check config section
+    const configSection = page.locator('.config-section')
+    await expect(configSection).toBeVisible()
+
+    // Check config items
+    const configItems = page.locator('.config-item')
+    await expect(configItems.first()).toBeVisible()
+  })
+
+  test('should display validation history table', async ({ page }) => {
+    // Navigate to detail
+    await page.waitForTimeout(500)
+    const firstRow = page.locator('tbody tr').first()
+    if (await firstRow.isVisible()) {
+      await firstRow.click()
+      await page.waitForURL('**/models/*')
+    }
+
+    // Check history table
+    const historySection = page.locator('.history-section')
+    await expect(historySection).toBeVisible()
+
+    // Check table rows
+    const tableRows = page.locator('.table-row')
+    await expect(tableRows.first()).toBeVisible()
+  })
+
+  test('should use F3 keyboard shortcut for search', async ({ page }) => {
+    const searchInput = page.locator('input[placeholder*="Search"]').first()
+
+    // Press F3
+    await page.keyboard.press('F3')
+
+    // Should trigger search
+    await page.waitForTimeout(300)
+
+    // Verify no error
+    await expect(page).not.toHaveTitle('Error')
+  })
+
+  test('should use Ctrl+N shortcut to create new model', async ({ page }) => {
+    // Press Ctrl+N
+    await page.keyboard.press('Control+N')
+
+    // Should navigate to new model page
+    await page.waitForTimeout(500)
+
+    // Verify navigation occurred
+    await expect(page).not.toHaveTitle('Error')
+  })
+
+  test('should show model status as active or inactive', async ({ page }) => {
+    // Navigate to detail
+    await page.waitForTimeout(500)
+    const firstRow = page.locator('tbody tr').first()
+    if (await firstRow.isVisible()) {
+      await firstRow.click()
+      await page.waitForURL('**/models/*')
+    }
+
+    // Check status display
+    const statusDisplay = page.locator('[class*="active"]').first()
+    await expect(statusDisplay).toBeVisible()
+  })
+
+  test('should display quick filter badges', async ({ page }) => {
+    // Check for quick filters with badges
+    const quickFilters = page.locator('[class*="quick-filter"]')
+    await expect(quickFilters.first()).toBeVisible()
+
+    // Check for badge elements
+    const badges = page.locator('.badge')
+    if (await badges.count() > 0) {
+      await expect(badges.first()).toBeVisible()
+    }
+  })
+
+  test('should navigate back from detail to list', async ({ page }) => {
+    // Navigate to detail
+    await page.waitForTimeout(500)
+    const firstRow = page.locator('tbody tr').first()
+    if (await firstRow.isVisible()) {
+      await firstRow.click()
+      await page.waitForURL('**/models/*')
+
+      // Click back button (Escape key or Back button)
+      await page.keyboard.press('Escape')
+
+      // Should navigate back
+      await page.waitForURL('**/models$', { timeout: 5000 })
+      expect(page.url()).toMatch(/\/model-ops\/models$/)
+    }
+  })
+})
diff --git a/frontend/e2e/kbx-shadow-runs.spec.ts b/frontend/e2e/kbx-shadow-runs.spec.ts
new file mode 100644
index 00000000..93dc6821
--- /dev/null
+++ b/frontend/e2e/kbx-shadow-runs.spec.ts
@@ -0,0 +1,139 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Shadow Runs (KBX Foundation)', () => {
+  test.beforeEach(async ({ page }) => {
+    // Set up auth headers for development mode
+    await page.goto('http://localhost:5173/model-ops/shadow-runs', {
+      waitUntil: 'networkidle',
+    })
+
+    // Wait for component to hydrate
+    await page.waitForTimeout(500)
+  })
+
+  test('should display shadow run list', async ({ page }) => {
+    // Check page title
+    const title = page.locator('h1')
+    await expect(title).toContainText('Shadow Run Validation')
+
+    // Check if grid is present
+    const grid = page.locator('.kbx-data-grid')
+    await expect(grid).toBeVisible()
+
+    // Check if summary items exist
+    const summaryItems = page.locator('[class*="summary"]')
+    await expect(summaryItems).toHaveCount(3)
+  })
+
+  test('should filter shadow runs by status', async ({ page }) => {
+    // Get status filter select
+    const statusFilter = page.locator('select.status-filter')
+    await expect(statusFilter).toBeVisible()
+
+    // Change filter
+    await statusFilter.selectOption('completed')
+
+    // Wait for filter to apply
+    await page.waitForTimeout(500)
+
+    // Check if grid is still visible
+    const grid = page.locator('.kbx-data-grid')
+    await expect(grid).toBeVisible()
+  })
+
+  test('should navigate to shadow run detail', async ({ page }) => {
+    // Wait for data to load
+    await page.waitForTimeout(500)
+
+    // Find first row in grid
+    const firstRow = page.locator('tbody tr').first()
+    await expect(firstRow).toBeVisible()
+
+    // Click row
+    await firstRow.click()
+
+    // Check if we navigated to detail page
+    await page.waitForURL('**/shadow-runs/*', { timeout: 5000 })
+    expect(page.url()).toMatch(/\/model-ops\/shadow-runs\/.+/)
+
+    // Verify detail page loaded
+    const detailHeader = page.locator('.detail-header h1')
+    await expect(detailHeader).toBeVisible()
+  })
+
+  test('should display validation summary', async ({ page }) => {
+    // Navigate to detail
+    await page.waitForTimeout(500)
+    const firstRow = page.locator('tbody tr').first()
+    if (await firstRow.isVisible()) {
+      await firstRow.click()
+      await page.waitForURL('**/shadow-runs/*')
+    }
+
+    // Check validation section
+    const validationSection = page.locator('.validation-summary')
+    await expect(validationSection).toBeVisible()
+
+    // Check metrics cards
+    const metricCards = page.locator('.metric-card')
+    await expect(metricCards.first()).toBeVisible()
+  })
+
+  test('should use F3 keyboard shortcut for search', async ({ page }) => {
+    const searchInput = page.locator('input[placeholder*="Search"]').first()
+    const initialValue = await searchInput.inputValue()
+
+    // Press F3
+    await page.keyboard.press('F3')
+
+    // Should trigger search (component refetch)
+    await page.waitForTimeout(300)
+
+    // Verify search was triggered (mock API will respond)
+    const grid = page.locator('.kbx-data-grid')
+    await expect(grid).toBeVisible()
+  })
+
+  test('should use Ctrl+N shortcut to create new shadow run', async ({ page }) => {
+    // Press Ctrl+N
+    await page.keyboard.press('Control+N')
+
+    // Should navigate to new page (may redirect to home or form)
+    // For now just verify no error occurred
+    await expect(page).not.toHaveTitle('Error')
+  })
+
+  test('should show empty state when no results', async ({ page }) => {
+    // Search for non-existent run
+    const searchInput = page.locator('input[placeholder*="Search"]').first()
+    await searchInput.fill('nonexistent')
+    await searchInput.press('Enter')
+
+    await page.waitForTimeout(500)
+
+    // Should show empty message
+    const emptyState = page.locator('[class*="empty"]')
+    // Note: This depends on actual implementation
+  })
+
+  test('should persist filters across navigation', async ({ page }) => {
+    // Set status filter
+    const statusFilter = page.locator('select.status-filter')
+    await statusFilter.selectOption('completed')
+
+    // Navigate to detail
+    await page.waitForTimeout(300)
+    const firstRow = page.locator('tbody tr').first()
+    if (await firstRow.isVisible()) {
+      await firstRow.click()
+      await page.waitForURL('**/shadow-runs/*')
+
+      // Navigate back
+      await page.goBack()
+      await page.waitForURL('**/shadow-runs$')
+
+      // Filter should be preserved (or reset based on implementation)
+      await expect(statusFilter).toBeVisible()
+    }
+  })
+})
diff --git a/frontend/src/app/router.ts b/frontend/src/app/router.ts
index b67c8524..e5e3ac03 100644
--- a/frontend/src/app/router.ts
+++ b/frontend/src/app/router.ts
@@ -13,6 +13,11 @@ export const router = createRouter({
     { path: '/portfolio/risk', component: () => import('../features/portfolio/pages/RiskDashboard.vue'), meta: { screenId: 'SCR-018', templateId: 'T07', module: 'Portfolio', section: 'Portfolio', title: '포트폴리오 리스크', order: 1, favoriteAllowed: true } },
     { path: '/portfolio/rebalance', component: () => import('../features/portfolio/pages/RebalanceForm.vue'), meta: { screenId: 'SCR-019', templateId: 'T03', module: 'Portfolio', section: 'Portfolio', title: '리밸런싱 제안', order: 2, favoriteAllowed: true } },
     { path: '/internal/ui-standard', component: () => import('../features/ui-standard/pages/UiStandardPage.vue'), meta: { screenId: 'SCR-DEV-001', templateId: 'T01', module: 'Design System', section: 'Design System', title: '컴포넌트 확인', order: 1, favoriteAllowed: false, internalOnly: false } },
-    { path: '/internal/wbs', component: () => import('../features/wbs/pages/WbsWorkspacePage.vue'), meta: { screenId: 'SCR-DEV-002', templateId: 'T01', module: 'Internal', section: 'Internal', title: 'WBS 작업공간', order: 1, favoriteAllowed: false, internalOnly: true } }
+    { path: '/internal/wbs', component: () => import('../features/wbs/pages/WbsWorkspacePage.vue'), meta: { screenId: 'SCR-DEV-002', templateId: 'T01', module: 'Internal', section: 'Internal', title: 'WBS 작업공간', order: 1, favoriteAllowed: false, internalOnly: true } },
+    // KBX Foundation v4 routes (registry-driven)
+    { path: '/model-ops/shadow-runs', component: () => import('../features/shadow-run/pages/ShadowRunList.vue'), meta: { screenId: 'model-ops.shadow-run.list', module: 'ModelOps', title: 'Shadow Run Validation' } },
+    { path: '/model-ops/shadow-runs/:runId', component: () => import('../features/shadow-run/pages/ShadowRunDetail.vue'), meta: { screenId: 'model-ops.shadow-run.detail', module: 'ModelOps', title: 'Shadow Run Details' } },
+    { path: '/model-ops/models', component: () => import('../features/models/pages/ModelsList.vue'), meta: { screenId: 'model-ops.models.list', module: 'ModelOps', title: 'Model Management' } },
+    { path: '/model-ops/models/:modelId', component: () => import('../features/models/pages/ModelDetail.vue'), meta: { screenId: 'model-ops.models.detail', module: 'ModelOps', title: 'Model Details' } }
   ]
 })