From 5bce61b969af5eeada20838140e0d0e4ecc7a549 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Wed, 19 Aug 2026 13:57:31 +0530
Subject: [PATCH 01/12] feat(apicp): enhance theme management and add claude
 skills

---
 .../.claude/oxygen-ui/components.md           | 1431 +++++++++++++++++
 .../.claude/oxygen-ui/migration.md            |  281 ++++
 .../.claude/oxygen-ui/patterns.md             | 1197 ++++++++++++++
 .../.claude/oxygen-ui/theming.md              |  334 ++++
 .../.claude/skills/oxygen-component/SKILL.md  |  147 ++
 .../.claude/skills/oxygen-form/SKILL.md       |  410 +++++
 .../.claude/skills/oxygen-layout/SKILL.md     |  233 +++
 .../.claude/skills/oxygen-migrate/SKILL.md    |  280 ++++
 portals/api-control-plane/CLAUDE.md           |    5 +
 portals/api-control-plane/package-lock.json   | 1188 +++++++++++---
 portals/api-control-plane/package.json        |    9 +-
 .../src/theme/AppThemeProvider.tsx            |   37 +
 .../src/theme/emotionCache.ts                 |   33 +
 portals/api-control-plane/src/theme/index.ts  |   31 +
 .../api-control-plane/src/theme/receipes.ts   |  147 ++
 portals/api-control-plane/src/theme/themes.ts |   28 +
 16 files changed, 5526 insertions(+), 265 deletions(-)
 create mode 100644 portals/api-control-plane/.claude/oxygen-ui/components.md
 create mode 100644 portals/api-control-plane/.claude/oxygen-ui/migration.md
 create mode 100644 portals/api-control-plane/.claude/oxygen-ui/patterns.md
 create mode 100644 portals/api-control-plane/.claude/oxygen-ui/theming.md
 create mode 100644 portals/api-control-plane/.claude/skills/oxygen-component/SKILL.md
 create mode 100644 portals/api-control-plane/.claude/skills/oxygen-form/SKILL.md
 create mode 100644 portals/api-control-plane/.claude/skills/oxygen-layout/SKILL.md
 create mode 100644 portals/api-control-plane/.claude/skills/oxygen-migrate/SKILL.md
 create mode 100644 portals/api-control-plane/CLAUDE.md
 create mode 100644 portals/api-control-plane/src/theme/AppThemeProvider.tsx
 create mode 100644 portals/api-control-plane/src/theme/emotionCache.ts
 create mode 100644 portals/api-control-plane/src/theme/index.ts
 create mode 100644 portals/api-control-plane/src/theme/receipes.ts
 create mode 100644 portals/api-control-plane/src/theme/themes.ts

diff --git a/portals/api-control-plane/.claude/oxygen-ui/components.md b/portals/api-control-plane/.claude/oxygen-ui/components.md
new file mode 100644
index 0000000000..fe912c6f81
--- /dev/null
+++ b/portals/api-control-plane/.claude/oxygen-ui/components.md
@@ -0,0 +1,1431 @@
+# Oxygen UI Component Reference
+
+Complete API reference for custom Oxygen UI components. For MUI components, refer to [Material-UI documentation](https://mui.com/material-ui/).
+
+## Table of Contents
+
+- [OxygenUIThemeProvider](#oxygenuitthemeprovider)
+- [ListingTable](#listingtable)
+- [AppShell](#appshell)
+- [Layout](#layout)
+- [Header](#header)
+- [Sidebar](#sidebar)
+- [Footer](#footer)
+- [UserMenu](#usermenu)
+- [Form](#form)
+- [NotificationPanel](#notificationpanel)
+- [NotificationBanner](#notificationbanner)
+- [ParticleBackground](#particlebackground)
+- [Other Components](#other-components)
+- [MUI X Namespaces](#mui-x-namespaces)
+- [Hooks](#hooks)
+- [Utilities](#utilities)
+
+---
+
+## OxygenUIThemeProvider
+
+Theme provider that wraps your application. Required at the root level.
+
+```tsx
+import { OxygenUIThemeProvider, OxygenTheme } from '@wso2/oxygen-ui';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | required | App content |
+| `theme` | `Theme` | `OxygenTheme` | Single theme (disables switching) |
+| `themes` | `ThemeOption[]` | - | Array of themes (enables switching) |
+| `initialTheme` | `string` | First theme key | Initial theme key |
+
+### ThemeOption Type
+
+```tsx
+interface ThemeOption {
+  key: string;    // Unique identifier
+  label: string;  // Display name
+  theme: Theme;   // MUI Theme object
+}
+```
+
+### Basic Usage
+
+```tsx
+// Single theme (no switching)
+<OxygenUIThemeProvider theme={OxygenTheme}>
+  <App />
+</OxygenUIThemeProvider>
+```
+
+### Theme Switching
+
+```tsx
+import {
+  OxygenUIThemeProvider,
+  OxygenTheme,
+  AcrylicOrangeTheme,
+  AcrylicPurpleTheme,
+} from '@wso2/oxygen-ui';
+
+const themes = [
+  { key: 'default', label: 'Default', theme: OxygenTheme },
+  { key: 'orange', label: 'Orange', theme: AcrylicOrangeTheme },
+  { key: 'purple', label: 'Purple', theme: AcrylicPurpleTheme },
+];
+
+<OxygenUIThemeProvider themes={themes} initialTheme="default">
+  <App />
+</OxygenUIThemeProvider>
+```
+
+---
+
+## ListingTable
+
+Advanced data table with compound component pattern. Supports search, sort, pagination, selection, and bulk actions.
+
+```tsx
+import { ListingTable } from '@wso2/oxygen-ui';
+```
+
+### Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `ListingTable.Provider` | Context provider for state management |
+| `ListingTable.Container` | Paper wrapper with styling |
+| `ListingTable.Toolbar` | Search, filters, and actions bar |
+| `ListingTable.Head` | Table header wrapper |
+| `ListingTable.Body` | Table body wrapper |
+| `ListingTable.Footer` | Table footer (pagination) |
+| `ListingTable.Row` | Table row |
+| `ListingTable.Cell` | Table cell |
+| `ListingTable.SortLabel` | Sortable column header |
+| `ListingTable.DensityControl` | Density toggle button |
+| `ListingTable.EmptyState` | Empty state display |
+| `ListingTable.RowActions` | Row action buttons |
+| `ListingTable.CellIcon` | Icon in cell |
+
+### ListingTable Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'table' \| 'card'` | `'table'` | Display style |
+| `density` | `'compact' \| 'standard' \| 'comfortable'` | `'standard'` | Row padding |
+| `striped` | `boolean` | `false` | Alternating row colors |
+| `bordered` | `boolean` | `false` | Cell borders |
+
+### Provider Props (Context State)
+
+```tsx
+interface ListingTableProviderProps {
+  // Search
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+
+  // Sort
+  sortField?: string;
+  sortDirection?: 'asc' | 'desc';
+  onSortChange?: (field: string, direction: 'asc' | 'desc') => void;
+
+  // Pagination
+  page?: number;                    // 0-indexed
+  rowsPerPage?: number;
+  totalCount?: number;
+  onPageChange?: (page: number) => void;
+  onRowsPerPageChange?: (rowsPerPage: number) => void;
+
+  // Selection
+  selected?: readonly string[];
+  onSelectionChange?: (selected: readonly string[]) => void;
+  onSelectAll?: () => void;
+  onClearSelection?: () => void;
+  isSelected?: (id: string) => boolean;
+
+  // Filters
+  filters?: Record<string, unknown>;
+  onFilterChange?: (key: string, value: unknown) => void;
+  onClearFilters?: () => void;
+
+  // Bulk Actions
+  onBulkDelete?: (ids: readonly string[]) => void;
+  onBulkAction?: (actionId: string, ids: readonly string[]) => void;
+
+  // UI State
+  density?: 'compact' | 'standard' | 'comfortable';
+  onDensityChange?: (density: ListingTableDensity) => void;
+  loading?: boolean;
+}
+```
+
+### Toolbar Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `showSearch` | `boolean` | `false` | Show built-in search |
+| `searchSlot` | `ReactNode` | - | Custom search component |
+| `searchPlaceholder` | `string` | `'Search...'` | Search placeholder |
+| `actions` | `ReactNode` | - | Right-side actions |
+| `children` | `ReactNode` | - | Center content |
+
+### Basic Table
+
+```tsx
+<ListingTable.Container>
+  <ListingTable>
+    <ListingTable.Head>
+      <ListingTable.Row>
+        <ListingTable.Cell>Name</ListingTable.Cell>
+        <ListingTable.Cell>Status</ListingTable.Cell>
+        <ListingTable.Cell>Actions</ListingTable.Cell>
+      </ListingTable.Row>
+    </ListingTable.Head>
+    <ListingTable.Body>
+      {data.map((row) => (
+        <ListingTable.Row key={row.id}>
+          <ListingTable.Cell>{row.name}</ListingTable.Cell>
+          <ListingTable.Cell>{row.status}</ListingTable.Cell>
+          <ListingTable.Cell>
+            <ListingTable.RowActions
+              actions={[
+                { id: 'edit', label: 'Edit', onClick: () => edit(row.id) },
+                { id: 'delete', label: 'Delete', onClick: () => delete(row.id) },
+              ]}
+            />
+          </ListingTable.Cell>
+        </ListingTable.Row>
+      ))}
+    </ListingTable.Body>
+  </ListingTable>
+</ListingTable.Container>
+```
+
+### Full-Featured Table with Context
+
+```tsx
+const [search, setSearch] = useState('');
+const [sortField, setSortField] = useState('name');
+const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+const [page, setPage] = useState(0);
+const [rowsPerPage, setRowsPerPage] = useState(10);
+
+<ListingTable.Provider
+  searchValue={search}
+  onSearchChange={setSearch}
+  sortField={sortField}
+  sortDirection={sortDirection}
+  onSortChange={(field, dir) => {
+    setSortField(field);
+    setSortDirection(dir);
+  }}
+  page={page}
+  rowsPerPage={rowsPerPage}
+  totalCount={data.length}
+  onPageChange={setPage}
+  onRowsPerPageChange={setRowsPerPage}
+>
+  <ListingTable.Container>
+    <ListingTable.Toolbar
+      showSearch
+      actions={<ListingTable.DensityControl />}
+    />
+    <ListingTable variant="card">
+      <ListingTable.Head>
+        <ListingTable.Row>
+          <ListingTable.Cell>
+            <ListingTable.SortLabel field="name">Name</ListingTable.SortLabel>
+          </ListingTable.Cell>
+          <ListingTable.Cell>
+            <ListingTable.SortLabel field="status">Status</ListingTable.SortLabel>
+          </ListingTable.Cell>
+        </ListingTable.Row>
+      </ListingTable.Head>
+      <ListingTable.Body>
+        {paginatedData.map((row) => (
+          <ListingTable.Row key={row.id}>
+            <ListingTable.Cell>{row.name}</ListingTable.Cell>
+            <ListingTable.Cell>{row.status}</ListingTable.Cell>
+          </ListingTable.Row>
+        ))}
+      </ListingTable.Body>
+      <ListingTable.Footer />
+    </ListingTable>
+  </ListingTable.Container>
+</ListingTable.Provider>
+```
+
+---
+
+## AppShell
+
+Application layout wrapper using compound component pattern.
+
+```tsx
+import { AppShell } from '@wso2/oxygen-ui';
+```
+
+### Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `AppShell.Navbar` | Top navigation area (header) |
+| `AppShell.Sidebar` | Left sidebar area |
+| `AppShell.Main` | Main content area |
+| `AppShell.Footer` | Bottom footer area |
+| `AppShell.NotificationPanel` | Overlay notification panel |
+
+### Usage
+
+```tsx
+<AppShell>
+  <AppShell.Navbar>
+    <Header>...</Header>
+  </AppShell.Navbar>
+
+  <AppShell.Sidebar>
+    <Sidebar collapsed={collapsed}>...</Sidebar>
+  </AppShell.Sidebar>
+
+  <AppShell.Main>
+    <Outlet />  {/* React Router outlet */}
+  </AppShell.Main>
+
+  <AppShell.Footer>
+    <Footer companyName="WSO2 LLC" />
+  </AppShell.Footer>
+
+  <AppShell.NotificationPanel>
+    <NotificationPanel open={open} onClose={onClose}>
+      ...
+    </NotificationPanel>
+  </AppShell.NotificationPanel>
+</AppShell>
+```
+
+---
+
+## Layout
+
+Lightweight layout compound component for building flex-based page structures.
+
+```tsx
+import { Layout } from '@wso2/oxygen-ui';
+```
+
+### Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `Layout.Sidebar` | Sidebar area |
+| `Layout.Navbar` | Top navigation area |
+| `Layout.Content` | Main content area |
+| `Layout.Header` | Header area |
+
+### Props
+
+Extends MUI `BoxProps`. The root component renders a flex row container.
+
+### Usage
+
+```tsx
+<Layout>
+  <Layout.Navbar>
+    <Header>...</Header>
+  </Layout.Navbar>
+  <Layout.Sidebar>
+    <Sidebar>...</Sidebar>
+  </Layout.Sidebar>
+  <Layout.Content>
+    {/* Page content */}
+  </Layout.Content>
+</Layout>
+```
+
+---
+
+## Header
+
+Top navigation bar compound component.
+
+```tsx
+import { Header } from '@wso2/oxygen-ui';
+```
+
+### Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `Header.Toggle` | Sidebar collapse toggle button |
+| `Header.Brand` | Logo and title container |
+| `Header.BrandLogo` | Logo image/icon |
+| `Header.BrandTitle` | Application title |
+| `Header.Switchers` | Context switcher container |
+| `Header.Actions` | Right-side action buttons |
+| `Header.Spacer` | Flexible spacer |
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `minimal` | `boolean` | `false` | Hide switchers section |
+| `sx` | `SxProps` | - | Custom styles |
+
+### Usage
+
+```tsx
+<Header>
+  <Header.Toggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
+
+  <Header.Brand>
+    <Header.BrandLogo>
+      <img src="/logo.svg" alt="Logo" />
+    </Header.BrandLogo>
+    <Header.BrandTitle>My Application</Header.BrandTitle>
+  </Header.Brand>
+
+  <Header.Switchers>
+    <OrganizationSwitcher />
+    <ProjectSwitcher />
+  </Header.Switchers>
+
+  <Header.Spacer />
+
+  <Header.Actions>
+    <ColorSchemeToggle />
+    <NotificationButton />
+    <UserMenu user={user} />
+  </Header.Actions>
+</Header>
+```
+
+---
+
+## Sidebar
+
+Collapsible navigation sidebar compound component.
+
+```tsx
+import { Sidebar, SIDEBAR_WIDTH, COLLAPSED_SIDEBAR_WIDTH } from '@wso2/oxygen-ui';
+```
+
+### Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `Sidebar.Nav` | Scrollable navigation container |
+| `Sidebar.Category` | Menu category group |
+| `Sidebar.CategoryLabel` | Category heading text |
+| `Sidebar.Item` | Navigation menu item |
+| `Sidebar.ItemIcon` | Item icon |
+| `Sidebar.ItemLabel` | Item text label |
+| `Sidebar.ItemBadge` | Badge indicator |
+| `Sidebar.Footer` | Fixed bottom section |
+| `Sidebar.User` | User profile section |
+| `Sidebar.UserAvatar` | User avatar |
+| `Sidebar.UserName` | User name text |
+| `Sidebar.UserEmail` | User email text |
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `collapsed` | `boolean` | `false` | Collapsed state |
+| `activeItem` | `string` | - | Active menu item ID |
+| `expandedMenus` | `Record<string, boolean>` | `{}` | Expanded submenu map |
+| `onSelect` | `(id: string) => void` | - | Item selection handler |
+| `onToggleExpand` | `(id: string) => void` | - | Submenu toggle handler |
+| `width` | `number` | `250` | Expanded width (px) |
+| `collapsedWidth` | `number` | `64` | Collapsed width (px) |
+
+### Usage
+
+```tsx
+import { HomeIcon, SettingsIcon } from '@wso2/oxygen-ui-icons-react';
+
+<Sidebar
+  collapsed={collapsed}
+  activeItem={activeId}
+  expandedMenus={expandedMenus}
+  onSelect={setActiveId}
+  onToggleExpand={(id) => toggleExpand(id)}
+>
+  <Sidebar.Nav>
+    <Sidebar.Category>
+      <Sidebar.CategoryLabel>Main</Sidebar.CategoryLabel>
+
+      <Sidebar.Item id="home">
+        <Sidebar.ItemIcon><HomeIcon size={20} /></Sidebar.ItemIcon>
+        <Sidebar.ItemLabel>Home</Sidebar.ItemLabel>
+      </Sidebar.Item>
+
+      <Sidebar.Item id="dashboard">
+        <Sidebar.ItemIcon><DashboardIcon size={20} /></Sidebar.ItemIcon>
+        <Sidebar.ItemLabel>Dashboard</Sidebar.ItemLabel>
+        <Sidebar.ItemBadge>5</Sidebar.ItemBadge>
+      </Sidebar.Item>
+    </Sidebar.Category>
+  </Sidebar.Nav>
+
+  <Sidebar.Footer>
+    <Sidebar.Item id="settings">
+      <Sidebar.ItemIcon><SettingsIcon size={20} /></Sidebar.ItemIcon>
+      <Sidebar.ItemLabel>Settings</Sidebar.ItemLabel>
+    </Sidebar.Item>
+  </Sidebar.Footer>
+</Sidebar>
+```
+
+---
+
+## Form
+
+Form components namespace for building forms with card-based layouts and wizards.
+
+```tsx
+import { Form } from '@wso2/oxygen-ui';
+```
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `Form.CardButton` | Clickable card button for selection |
+| `Form.DisappearingCardButtonContent` | Content that fades when card is selected |
+| `Form.CardHeader` | Card header section |
+| `Form.CardContent` | Card content section |
+| `Form.CardActions` | Card action buttons section |
+| `Form.CardMedia` | Card media/image section |
+| `Form.Stack` | Form field stack layout |
+| `Form.Header` | Section header text |
+| `Form.Subheader` | Section subheader text |
+| `Form.Body` | Section body text |
+| `Form.Section` | Form section with heading |
+| `Form.Wizard` | Multi-step form wizard |
+| `Form.ElementWrapper` | Wrapper for form elements |
+
+### Wizard Props
+
+```tsx
+interface WizardStep {
+  id: string;
+  label: string;
+  content: ReactNode;
+  optional?: boolean;
+}
+
+interface WizardProps {
+  steps: WizardStep[];
+  activeStep: number;
+  onStepChange: (step: number) => void;
+  onComplete?: () => void;
+}
+```
+
+### Usage
+
+```tsx
+// Card-based selection form
+<Form.Stack spacing={2}>
+  <Form.CardButton selected={selected === 'option1'} onClick={() => setSelected('option1')}>
+    <Form.CardHeader title="Option 1" />
+    <Form.CardContent>
+      <Form.Body>Description of option 1</Form.Body>
+    </Form.CardContent>
+  </Form.CardButton>
+
+  <Form.CardButton selected={selected === 'option2'} onClick={() => setSelected('option2')}>
+    <Form.CardHeader title="Option 2" />
+    <Form.CardContent>
+      <Form.Body>Description of option 2</Form.Body>
+    </Form.CardContent>
+  </Form.CardButton>
+</Form.Stack>
+
+// Section with typography
+<Form.Section>
+  <Form.Header>User Details</Form.Header>
+  <Form.Subheader>Enter your information</Form.Subheader>
+  <Form.Body>Additional context about the form section.</Form.Body>
+</Form.Section>
+```
+
+---
+
+## NotificationPanel
+
+Slide-out notification panel with tabs and compound component pattern.
+
+```tsx
+import { NotificationPanel } from '@wso2/oxygen-ui';
+```
+
+### Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `NotificationPanel.Header` | Panel header container |
+| `NotificationPanel.HeaderIcon` | Header icon |
+| `NotificationPanel.HeaderTitle` | Header title text |
+| `NotificationPanel.HeaderBadge` | Unread count badge |
+| `NotificationPanel.HeaderClose` | Close button |
+| `NotificationPanel.Tabs` | Tab navigation |
+| `NotificationPanel.Actions` | Action buttons container |
+| `NotificationPanel.List` | Notification list container |
+| `NotificationPanel.Item` | Individual notification item |
+| `NotificationPanel.ItemAvatar` | Item avatar |
+| `NotificationPanel.ItemTitle` | Item title |
+| `NotificationPanel.ItemMessage` | Item message text |
+| `NotificationPanel.ItemTimestamp` | Item timestamp |
+| `NotificationPanel.ItemAction` | Item action button |
+| `NotificationPanel.EmptyState` | Empty state display |
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | required | Panel visibility |
+| `onClose` | `() => void` | required | Close handler |
+
+### Tabs Props
+
+```tsx
+interface NotificationTabConfig {
+  id: string;
+  label: string;
+  badge?: number;
+}
+
+interface NotificationTabsProps {
+  tabs: NotificationTabConfig[];
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+}
+```
+
+### Usage
+
+```tsx
+<NotificationPanel open={open} onClose={() => setOpen(false)}>
+  <NotificationPanel.Header>
+    <NotificationPanel.HeaderIcon />
+    <NotificationPanel.HeaderTitle>Notifications</NotificationPanel.HeaderTitle>
+    <NotificationPanel.HeaderBadge count={unreadCount} />
+    <NotificationPanel.HeaderClose />
+  </NotificationPanel.Header>
+
+  <NotificationPanel.Tabs
+    tabs={[
+      { id: 'all', label: 'All' },
+      { id: 'unread', label: 'Unread', badge: 3 },
+    ]}
+    activeTab={activeTab}
+    onTabChange={setActiveTab}
+  />
+
+  <NotificationPanel.Actions>
+    <Button onClick={markAllRead}>Mark all read</Button>
+  </NotificationPanel.Actions>
+
+  <NotificationPanel.List>
+    {notifications.map((n) => (
+      <NotificationPanel.Item key={n.id}>
+        <NotificationPanel.ItemAvatar src={n.avatar} />
+        <NotificationPanel.ItemTitle>{n.title}</NotificationPanel.ItemTitle>
+        <NotificationPanel.ItemMessage>{n.message}</NotificationPanel.ItemMessage>
+        <NotificationPanel.ItemTimestamp>{n.timestamp}</NotificationPanel.ItemTimestamp>
+        <NotificationPanel.ItemAction onClick={() => handleAction(n.id)}>
+          View
+        </NotificationPanel.ItemAction>
+      </NotificationPanel.Item>
+    ))}
+  </NotificationPanel.List>
+
+  {notifications.length === 0 && (
+    <NotificationPanel.EmptyState message="No notifications" />
+  )}
+</NotificationPanel>
+```
+
+### Hooks
+
+```tsx
+import { useNotificationPanel } from '@wso2/oxygen-ui';
+
+// Access panel context inside NotificationPanel
+const { open, onClose } = useNotificationPanel();
+```
+
+---
+
+## SearchBar
+
+Search input components with optional advanced filtering.
+
+```tsx
+import { SearchBar, SearchBarWithAdvancedFilter } from '@wso2/oxygen-ui';
+```
+
+### SearchBar Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | Search input value |
+| `onChange` | `(value: string) => void` | - | Change handler |
+| `placeholder` | `string` | `'Search...'` | Placeholder text |
+
+### SearchBarWithAdvancedFilter Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | - | Search input value |
+| `onChange` | `(value: string) => void` | - | Change handler |
+| `advancedFilters` | `AdvancedFilterState` | - | Filter state |
+| `onAdvancedFilterChange` | `(filters: AdvancedFilterState) => void` | - | Filter change handler |
+
+### Usage
+
+```tsx
+// Basic search
+<SearchBar
+  value={search}
+  onChange={setSearch}
+  placeholder="Search users..."
+/>
+
+// With advanced filters
+<SearchBarWithAdvancedFilter
+  value={search}
+  onChange={setSearch}
+  advancedFilters={filters}
+  onAdvancedFilterChange={setFilters}
+/>
+```
+
+---
+
+## StatCard
+
+Statistics display card for dashboards.
+
+```tsx
+import { StatCard } from '@wso2/oxygen-ui';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | required | Stat label |
+| `value` | `string \| number` | required | Stat value |
+| `icon` | `ReactNode` | - | Optional icon |
+| `change` | `number` | - | Percentage change |
+| `trend` | `'up' \| 'down'` | - | Trend direction |
+
+### Usage
+
+```tsx
+<StatCard
+  title="Total Users"
+  value="12,345"
+  change={12.5}
+  trend="up"
+/>
+```
+
+---
+
+## PageContent
+
+Page content wrapper with consistent padding and max-width.
+
+```tsx
+import { PageContent } from '@wso2/oxygen-ui';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | required | Page content |
+| `maxWidth` | `string \| number` | - | Maximum width |
+
+### Usage
+
+```tsx
+<PageContent>
+  <PageTitle>Dashboard</PageTitle>
+  {/* Page content */}
+</PageContent>
+```
+
+---
+
+## ComplexSelect
+
+Enhanced select component with search and multi-select capabilities.
+
+```tsx
+import { ComplexSelect } from '@wso2/oxygen-ui';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `Option[]` | required | Select options |
+| `value` | `string \| string[]` | - | Selected value(s) |
+| `onChange` | `(value) => void` | - | Change handler |
+| `multiple` | `boolean` | `false` | Enable multi-select |
+| `searchable` | `boolean` | `false` | Enable search |
+
+### Usage
+
+```tsx
+<ComplexSelect
+  options={[
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' },
+    { value: 'ca', label: 'Canada' },
+  ]}
+  value={country}
+  onChange={setCountry}
+  searchable
+/>
+```
+
+---
+
+## NotificationBanner
+
+Dismissible system alert banner for top-level announcements.
+
+```tsx
+import { NotificationBanner } from '@wso2/oxygen-ui';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `visible` | `boolean` | `true` | Whether the banner is visible |
+| `severity` | `'info' \| 'warning' \| 'error' \| 'success'` | `'info'` | Banner severity/type |
+| `title` | `string` | - | Optional banner title |
+| `message` | `string` | required | Banner message text |
+| `actionLabel` | `string` | - | Optional action button label |
+| `onAction` | `() => void` | - | Action button callback |
+| `onDismiss` | `() => void` | - | Dismiss callback |
+| `sx` | `SxProps` | - | Custom styles |
+
+### Usage
+
+```tsx
+<NotificationBanner
+  visible={showBanner}
+  severity="info"
+  title="Scheduled Maintenance"
+  message="The system will be undergoing maintenance on Dec 20th."
+  actionLabel="Learn More"
+  onAction={() => openMaintenanceInfo()}
+  onDismiss={() => setShowBanner(false)}
+/>
+```
+
+---
+
+## ParticleBackground
+
+Animated particle canvas background with mouse interaction. Adapts to light/dark color scheme.
+
+```tsx
+import { ParticleBackground } from '@wso2/oxygen-ui';
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `opacity` | `number` | `0.5` | Canvas opacity |
+| `baseDensity` | `number` | `0.12` | Particles per 10,000 px² |
+| `maxSpeed` | `number` | `0.3` | Maximum speed in px per frame |
+| `radius` | `[number, number]` | `[2.0, 3.2]` | Min and max particle radius |
+| `linkDist` | `number` | `210` | Maximum distance to draw lines between particles |
+| `linkAlpha` | `number` | `0.2` | Base opacity of the lines |
+| `mouseInfluence` | `number` | `110` | Radius of mouse influence |
+| `repelStrength` | `number` | `0.35` | Strength of the repel effect |
+| `clickBurst` | `number` | `120` | Impulse on click |
+
+### Usage
+
+```tsx
+// Fixed background behind content
+<ParticleBackground opacity={0.3} />
+
+// Higher density with stronger interaction
+<ParticleBackground
+  baseDensity={0.2}
+  mouseInfluence={150}
+  repelStrength={0.5}
+/>
+```
+
+---
+
+## Other Components
+
+### ColorSchemeToggle
+
+Dark/light mode toggle button.
+
+```tsx
+import { ColorSchemeToggle } from '@wso2/oxygen-ui';
+
+<ColorSchemeToggle />
+```
+
+### ThemeSwitcher
+
+Theme selection UI component.
+
+```tsx
+import { ThemeSwitcher } from '@wso2/oxygen-ui';
+
+<ThemeSwitcher />  // Requires OxygenUIThemeProvider with themes
+```
+
+---
+
+## Footer
+
+Application footer compound component with composition pattern.
+
+```tsx
+import { Footer } from '@wso2/oxygen-ui';
+```
+
+### Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `Footer.Copyright` | Copyright text display |
+| `Footer.Version` | Version number display (monospace, muted) |
+| `Footer.Link` | Footer link (auto-placed in right section) |
+| `Footer.Divider` | Visual divider between footer items |
+
+### Footer Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | required | Footer sub-components |
+| `sx` | `SxProps` | - | Custom styles |
+
+### Usage
+
+```tsx
+<Footer>
+  <Footer.Copyright>© 2025 WSO2 LLC. All rights reserved.</Footer.Copyright>
+  <Footer.Divider />
+  <Footer.Version>v2.1.0</Footer.Version>
+  <Footer.Link href="/terms">Terms & Conditions</Footer.Link>
+  <Footer.Link href="/privacy">Privacy Policy</Footer.Link>
+</Footer>
+```
+
+> **Note:** `Footer.Copyright`, `Footer.Version`, and `Footer.Divider` are placed in the left section. `Footer.Link` elements are placed in the right section. Layout is responsive (stacks on mobile).
+
+---
+
+## UserMenu
+
+User profile dropdown menu compound component.
+
+```tsx
+import { UserMenu } from '@wso2/oxygen-ui';
+```
+
+### Sub-components
+
+| Component | Description |
+|-----------|-------------|
+| `UserMenu.Trigger` | Avatar button that opens the menu |
+| `UserMenu.Header` | User info section (name, email, avatar, role badge) |
+| `UserMenu.Item` | Menu item with icon, label, and optional badge |
+| `UserMenu.Logout` | Destructive logout menu item |
+| `UserMenu.Divider` | Menu divider |
+
+### UserMenu Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | required | Menu sub-components |
+
+### UserMenuTrigger Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | required | User display name |
+| `avatar` | `string \| null` | - | Avatar image URL |
+| `showName` | `boolean` | `false` | Show name text after avatar |
+
+### UserMenuHeader Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | required | User display name |
+| `email` | `string` | required | User email address |
+| `avatar` | `string \| null` | - | Avatar image URL |
+| `role` | `string` | - | Role badge text (e.g., "Pro", "Admin") |
+
+### UserMenuItem Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `ReactNode` | - | Left-side icon |
+| `label` | `string` | required | Item label text |
+| `badge` | `string` | - | Right-side badge/chip |
+| `onClick` | `() => void` | - | Click handler |
+
+### UserMenuLogout Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `ReactNode` | - | Left-side icon |
+| `label` | `string` | `'Log out'` | Item label text |
+| `onClick` | `() => void` | - | Click handler |
+
+### UserMenuUser Type
+
+```tsx
+interface UserMenuUser {
+  name: string;
+  email: string;
+  avatar?: string;
+  role?: string;
+}
+```
+
+### Usage
+
+```tsx
+import { UserMenu } from '@wso2/oxygen-ui';
+import { UserIcon, SettingsIcon, LogOutIcon } from '@wso2/oxygen-ui-icons-react';
+
+<UserMenu>
+  <UserMenu.Trigger name="John Doe" avatar="/avatar.png" />
+  <UserMenu.Header name="John Doe" email="john@example.com" role="Admin" />
+  <UserMenu.Item icon={<UserIcon size={20} />} label="Profile" onClick={() => {}} />
+  <UserMenu.Item icon={<SettingsIcon size={20} />} label="Settings" onClick={() => {}} />
+  <UserMenu.Divider />
+  <UserMenu.Logout icon={<LogOutIcon size={20} />} onClick={() => signOut()} />
+</UserMenu>
+```
+
+### PageTitle
+
+Page header with avatar and breadcrumb support.
+
+```tsx
+import { PageTitle } from '@wso2/oxygen-ui';
+
+<PageTitle>
+  <PageTitle.Avatar><UserIcon /></PageTitle.Avatar>
+  <PageTitle.Header>Dashboard</PageTitle.Header>
+  <PageTitle.SubHeader>Overview of your projects</PageTitle.SubHeader>
+</PageTitle>
+```
+
+### CodeBlock
+
+Syntax-highlighted code display.
+
+```tsx
+import { CodeBlock } from '@wso2/oxygen-ui';
+
+<CodeBlock language="typescript">
+  {`const greeting = "Hello, World!";`}
+</CodeBlock>
+```
+
+---
+
+## MUI X Namespaces
+
+MUI X components are exported as namespaces to avoid naming conflicts.
+
+```tsx
+import { DataGrid, DatePickers, TreeView, AdapterDateFns } from '@wso2/oxygen-ui';
+```
+
+> **Note:** Charts are available in a separate package `@wso2/oxygen-ui-charts-react` built on Recharts.
+
+### DataGrid
+
+```tsx
+<DataGrid.DataGrid
+  rows={rows}
+  columns={columns}
+  pageSize={10}
+  checkboxSelection
+/>
+
+<DataGrid.DataGridPro
+  rows={rows}
+  columns={columns}
+  treeData
+/>
+```
+
+### DatePickers
+
+```tsx
+<DatePickers.LocalizationProvider dateAdapter={AdapterDateFns}>
+  <DatePickers.DatePicker
+    value={date}
+    onChange={setDate}
+    label="Select date"
+  />
+
+  <DatePickers.DateTimePicker
+    value={dateTime}
+    onChange={setDateTime}
+  />
+
+  <DatePickers.DateRangePicker
+    value={range}
+    onChange={setRange}
+  />
+</DatePickers.LocalizationProvider>
+```
+
+### TreeView
+
+```tsx
+<TreeView.SimpleTreeView>
+  <TreeView.TreeItem itemId="1" label="Parent">
+    <TreeView.TreeItem itemId="2" label="Child 1" />
+    <TreeView.TreeItem itemId="3" label="Child 2" />
+  </TreeView.TreeItem>
+</TreeView.SimpleTreeView>
+
+<TreeView.RichTreeView
+  items={treeData}
+  multiSelect
+/>
+```
+
+---
+
+## Hooks
+
+### useThemeSwitcher
+
+Access theme switching context.
+
+```tsx
+import { useThemeSwitcher } from '@wso2/oxygen-ui';
+
+function ThemeSelector() {
+  const { currentTheme, themes, setTheme, isActive } = useThemeSwitcher();
+
+  return (
+    <Select value={currentTheme} onChange={(e) => setTheme(e.target.value)}>
+      {themes.map((t) => (
+        <MenuItem key={t.key} value={t.key}>{t.label}</MenuItem>
+      ))}
+    </Select>
+  );
+}
+```
+
+### useThemeContent
+
+Get content based on current color scheme (light/dark).
+
+```tsx
+import { useThemeContent } from '@wso2/oxygen-ui';
+
+function AdaptiveContent() {
+  const content = useThemeContent({
+    light: 'Light mode content',
+    dark: 'Dark mode content',
+  });
+
+  return <Typography>{content}</Typography>;
+}
+```
+
+### useAppShell
+
+Manage AppShell state (sidebar collapsed, notifications open, etc.).
+
+```tsx
+import { useAppShell } from '@wso2/oxygen-ui';
+
+function MyComponent() {
+  const {
+    sidebarCollapsed,
+    setSidebarCollapsed,
+    notificationPanelOpen,
+    setNotificationPanelOpen,
+  } = useAppShell();
+
+  return (
+    <Button onClick={() => setSidebarCollapsed(!sidebarCollapsed)}>
+      Toggle Sidebar
+    </Button>
+  );
+}
+```
+
+### useNotifications
+
+Manage notification state and actions.
+
+```tsx
+import { useNotifications } from '@wso2/oxygen-ui';
+
+function NotificationManager() {
+  const {
+    notifications,
+    unreadCount,
+    addNotification,
+    markAsRead,
+    markAllAsRead,
+    removeNotification,
+  } = useNotifications();
+
+  return (
+    <Badge badgeContent={unreadCount}>
+      <NotificationIcon />
+    </Badge>
+  );
+}
+```
+
+### useListingTable
+
+Access ListingTable context (returns null outside Provider).
+
+```tsx
+import { useListingTable } from '@wso2/oxygen-ui';
+
+function CustomFilter() {
+  const context = useListingTable();
+  if (!context) return null;
+
+  return (
+    <TextField
+      value={context.searchValue}
+      onChange={(e) => context.onSearchChange?.(e.target.value)}
+    />
+  );
+}
+```
+
+### useListingTableRequired
+
+Access ListingTable context (throws if outside Provider).
+
+```tsx
+import { useListingTableRequired } from '@wso2/oxygen-ui';
+
+function TableControls() {
+  const { density, onDensityChange } = useListingTableRequired();
+  // ...
+}
+```
+
+### Component Context Hooks
+
+```tsx
+// Header context
+import { useHeader } from '@wso2/oxygen-ui';
+const headerContext = useHeader();
+
+// Sidebar context
+import { useSidebar } from '@wso2/oxygen-ui';
+const sidebarContext = useSidebar();
+
+// NotificationPanel context
+import { useNotificationPanel } from '@wso2/oxygen-ui';
+const panelContext = useNotificationPanel();
+```
+
+---
+
+## Utilities
+
+### formatRelativeTime
+
+Format a date as a relative time string.
+
+```tsx
+import { formatRelativeTime } from '@wso2/oxygen-ui';
+
+formatRelativeTime(new Date(Date.now() - 1000 * 60 * 5));
+// Returns: "5 minutes ago"
+
+formatRelativeTime(new Date(Date.now() - 1000 * 60 * 60 * 2));
+// Returns: "2 hours ago"
+```
+
+Returns: `"Just now"` | `"X minute(s) ago"` | `"X hour(s) ago"` | `"X day(s) ago"` | locale date string (after 7 days).
+
+### pxToRem
+
+Convert pixel values to rem based on 14px base font size.
+
+```tsx
+import { pxToRem } from '@wso2/oxygen-ui';
+
+pxToRem(14); // "1rem"
+pxToRem(28); // "2rem"
+pxToRem(7);  // "0.5rem"
+```
+
+---
+
+## Type Exports
+
+Import types for TypeScript usage:
+
+```tsx
+import type {
+  // Theme
+  ThemeOption,
+  ThemeSwitcherContextValue,
+
+  // ListingTable
+  ListingTableProps,
+  ListingTableContainerProps,
+  ListingTableHeadProps,
+  ListingTableBodyProps,
+  ListingTableFooterProps,
+  ListingTableRowProps,
+  ListingTableCellProps,
+  ListingTableProviderProps,
+  ListingTableContextValue,
+  ListingTableToolbarProps,
+  ListingTableEmptyStateProps,
+  ListingTableDensityControlProps,
+  ListingTableSortLabelProps,
+  ListingTableRowActionsProps,
+  ListingTableCellIconProps,
+  ListingTableDensity,
+  ListingTableVariant,
+  ListingTableSortDirection,
+  ListingSortDirection,
+
+  // AppShell
+  AppShellProps,
+  AppShellNavbarProps,
+  AppShellSidebarProps,
+  AppShellMainProps,
+  AppShellFooterProps,
+  AppShellNotificationPanelProps,
+
+  // Header
+  HeaderProps,
+  HeaderSpacerProps,
+  HeaderToggleProps,
+  HeaderBrandProps,
+  HeaderBrandLogoProps,
+  HeaderBrandTitleProps,
+  HeaderSwitchersProps,
+  HeaderActionsProps,
+  HeaderContextValue,
+
+  // Sidebar
+  SidebarProps,
+  SidebarNavProps,
+  SidebarCategoryProps,
+  SidebarCategoryLabelProps,
+  SidebarItemProps,
+  SidebarItemIconProps,
+  SidebarItemLabelProps,
+  SidebarItemBadgeProps,
+  SidebarFooterProps,
+  SidebarUserProps,
+  SidebarUserAvatarProps,
+  SidebarUserNameProps,
+  SidebarUserEmailProps,
+  SidebarContextValue,
+  SidebarItemContextValue,
+
+  // NotificationPanel
+  NotificationPanelProps,
+  NotificationHeaderProps,
+  NotificationHeaderIconProps,
+  NotificationHeaderTitleProps,
+  NotificationHeaderBadgeProps,
+  NotificationHeaderCloseProps,
+  NotificationTabsProps,
+  NotificationTabConfig,
+  NotificationActionsProps,
+  NotificationListProps,
+  NotificationItemProps,
+  NotificationItemAvatarProps,
+  NotificationItemTitleProps,
+  NotificationItemMessageProps,
+  NotificationItemTimestampProps,
+  NotificationItemActionProps,
+  NotificationItemContextValue,
+  NotificationEmptyStateProps,
+  NotificationPanelContextValue,
+  NotificationType,
+  NotificationTypeProps,
+
+  // Footer
+  FooterProps,
+  FooterCopyrightProps,
+  FooterVersionProps,
+  FooterLinkProps,
+
+  // UserMenu
+  UserMenuProps,
+  UserMenuUser,
+  UserMenuTriggerProps,
+  UserMenuHeaderProps,
+  UserMenuItemProps,
+  UserMenuLogoutProps,
+
+  // NotificationBanner
+  NotificationBannerProps,
+
+  // ParticleBackground
+  ParticleBackgroundProps,
+
+  // Other components
+  CodeBlockProps,
+  ColorSchemeImageProps,
+  ColorSchemeImageAttribute,
+  ComplexSelectProps,
+  PageContentProps,
+  PageTitleProps,
+  PageTitleAvatarProps,
+  PageTitleHeaderProps,
+  PageTitleSubHeaderProps,
+  PageTitleLinkProps,
+  StatCardProps,
+  ThemeSwitcherProps,
+  ThemeSelectProps,
+  SearchBarProps,
+  SearchBarWithAdvancedFilterProps,
+  AdvancedFilterState,
+
+  // Form
+  WizardProps,
+  WizardStep,
+
+  // Hooks
+  AppShellState,
+  AppShellActions,
+  UseAppShellOptions,
+  UseAppShellReturn,
+  NotificationItem,
+  NotificationActions,
+  UseNotificationsOptions,
+  UseNotificationsReturn,
+} from '@wso2/oxygen-ui';
+```
diff --git a/portals/api-control-plane/.claude/oxygen-ui/migration.md b/portals/api-control-plane/.claude/oxygen-ui/migration.md
new file mode 100644
index 0000000000..fc10ed5e88
--- /dev/null
+++ b/portals/api-control-plane/.claude/oxygen-ui/migration.md
@@ -0,0 +1,281 @@
+# Migration Guide to Oxygen UI
+
+## Table of Contents
+- [Overview](#overview)
+- [Install Packages](#install-packages)
+- [Update Imports](#update-imports)
+- [ESLint Plugin Setup](#eslint-plugin-setup)
+- [Common Patterns](#common-patterns)
+
+---
+
+## Overview
+
+Migrating to Oxygen UI involves:
+1. Installing Oxygen UI packages
+2. Replacing direct `@mui/*` imports with `@wso2/oxygen-ui`
+3. Replacing `lucide-react` imports with `@wso2/oxygen-ui-icons-react`
+4. Wrapping app with `OxygenUIThemeProvider`
+5. Setting up ESLint plugin to prevent regressions
+
+---
+
+## Install Packages
+
+```bash
+# Add Oxygen UI packages
+pnpm add @wso2/oxygen-ui @wso2/oxygen-ui-icons-react
+
+# Add ESLint plugin (dev dependency)
+pnpm add -D @wso2/eslint-plugin-oxygen-ui
+
+# Ensure peer dependencies
+pnpm add @emotion/react @emotion/styled date-fns
+```
+
+---
+
+## Update Imports
+
+### MUI Components
+
+**Before:**
+```tsx
+import { Box, Stack, Button } from '@mui/material';
+import Typography from '@mui/material/Typography';
+```
+
+**After:**
+```tsx
+import { Box, Stack, Button, Typography } from '@wso2/oxygen-ui';
+```
+
+### MUI X Components
+
+**Before:**
+```tsx
+import { DataGrid } from '@mui/x-data-grid';
+import { DatePicker } from '@mui/x-date-pickers';
+import { BarChart } from '@mui/x-charts';
+```
+
+**After:**
+```tsx
+import { DataGrid, DatePickers } from '@wso2/oxygen-ui';
+
+const { DataGrid: DataGridComponent } = DataGrid;
+const { DatePicker } = DatePickers;
+
+// For Charts, use the separate package
+import { BarChart } from '@wso2/oxygen-ui-charts-react';
+```
+
+### Icons
+
+**Before:**
+```tsx
+import { Settings, Bell, User } from 'lucide-react';
+```
+
+**After:**
+```tsx
+import { Settings, Bell, User } from '@wso2/oxygen-ui-icons-react';
+```
+
+### Theme Provider
+
+**Before:**
+```tsx
+import { ThemeProvider, createTheme } from '@mui/material';
+
+const theme = createTheme({ ... });
+
+<ThemeProvider theme={theme}>
+  <App />
+</ThemeProvider>
+```
+
+**After:**
+```tsx
+import { OxygenUIThemeProvider } from '@wso2/oxygen-ui';
+
+<OxygenUIThemeProvider>
+  <App />
+</OxygenUIThemeProvider>
+```
+
+---
+
+## ESLint Plugin Setup
+
+### ESLint 9+ (Flat Config)
+
+```js
+// eslint.config.js
+import oxygenUIPlugin from '@wso2/eslint-plugin-oxygen-ui';
+
+export default [
+  oxygenUIPlugin.configs.recommended,
+  // ... other configs
+];
+```
+
+### Custom Configuration
+
+```js
+// eslint.config.js
+import oxygenUIPlugin from '@wso2/eslint-plugin-oxygen-ui';
+
+export default [
+  {
+    plugins: {
+      '@wso2/oxygen-ui': oxygenUIPlugin,
+    },
+    rules: {
+      '@wso2/oxygen-ui/no-direct-mui-imports': ['error', {
+        suggestedPackage: '@wso2/oxygen-ui',
+        allowedPackages: [], // Temporarily allow specific MUI packages during migration
+      }],
+      '@wso2/oxygen-ui/no-direct-lucide-imports': ['error', {
+        suggestedPackage: '@wso2/oxygen-ui-icons-react',
+      }],
+    },
+  },
+];
+```
+
+### Auto-fix Imports
+
+```bash
+# Find violations
+pnpm eslint src/
+
+# Auto-fix imports
+pnpm eslint src/ --fix
+```
+
+### Gradual Migration
+
+During migration, temporarily allow specific MUI packages:
+
+```js
+'@wso2/oxygen-ui/no-direct-mui-imports': ['warn', {
+  allowedPackages: ['@mui/x-data-grid', '@mui/x-date-pickers'],
+}],
+```
+
+---
+
+## Common Patterns
+
+### Layout Migration
+
+**Before (custom layout):**
+```tsx
+<Box sx={{ display: 'flex' }}>
+  <AppBar>...</AppBar>
+  <Drawer>...</Drawer>
+  <Box component="main">...</Box>
+</Box>
+```
+
+**After (Oxygen AppShell):**
+```tsx
+import { AppShell, Header, Sidebar } from '@wso2/oxygen-ui';
+
+<AppShell>
+  <AppShell.Navbar>
+    <Header>...</Header>
+  </AppShell.Navbar>
+  <AppShell.Sidebar>
+    <Sidebar>...</Sidebar>
+  </AppShell.Sidebar>
+  <AppShell.Main>...</AppShell.Main>
+</AppShell>
+```
+
+### Theme Customization Migration
+
+**Before:**
+```tsx
+const theme = createTheme({
+  palette: {
+    primary: { main: '#1976d2' },
+  },
+});
+```
+
+**After:**
+```tsx
+import { extendTheme } from '@mui/material/styles';
+import { OxygenThemeBase, OxygenUIThemeProvider } from '@wso2/oxygen-ui';
+
+const customTheme = extendTheme({
+  ...OxygenThemeBase,
+  colorSchemes: {
+    light: {
+      palette: { primary: { main: '#1976d2' } },
+    },
+  },
+});
+
+<OxygenUIThemeProvider theme={customTheme}>
+  <App />
+</OxygenUIThemeProvider>
+```
+
+### Icon Button Migration
+
+**Before:**
+```tsx
+import IconButton from '@mui/material/IconButton';
+import SettingsIcon from '@mui/icons-material/Settings';
+
+<IconButton><SettingsIcon /></IconButton>
+```
+
+**After:**
+```tsx
+import { IconButton } from '@wso2/oxygen-ui';
+import { Settings } from '@wso2/oxygen-ui-icons-react';
+
+<IconButton><Settings size={20} /></IconButton>
+```
+
+### Color Mode Migration
+
+**Before:**
+```tsx
+import { useColorScheme } from '@mui/material';
+
+const { mode, setMode } = useColorScheme();
+```
+
+**After:**
+```tsx
+import { ColorSchemeToggle, useThemeContent } from '@wso2/oxygen-ui';
+
+// Simple toggle
+<ColorSchemeToggle />
+
+// Conditional content
+const content = useThemeContent({
+  light: 'Light content',
+  dark: 'Dark content',
+});
+```
+
+---
+
+## Migration Checklist
+
+- [ ] Install `@wso2/oxygen-ui` and `@wso2/oxygen-ui-icons-react`
+- [ ] Install peer dependencies (`@emotion/react`, `@emotion/styled`, `date-fns`)
+- [ ] Wrap root component with `OxygenUIThemeProvider`
+- [ ] Replace `@mui/material` imports with `@wso2/oxygen-ui`
+- [ ] Replace `@mui/icons-material` or `lucide-react` with `@wso2/oxygen-ui-icons-react`
+- [ ] Update MUI X imports to use namespaced exports
+- [ ] Install and configure `@wso2/eslint-plugin-oxygen-ui`
+- [ ] Run ESLint with `--fix` to auto-correct remaining imports
+- [ ] Test light/dark mode functionality
+- [ ] Verify theme styling matches expectations
diff --git a/portals/api-control-plane/.claude/oxygen-ui/patterns.md b/portals/api-control-plane/.claude/oxygen-ui/patterns.md
new file mode 100644
index 0000000000..a2f48cc0ce
--- /dev/null
+++ b/portals/api-control-plane/.claude/oxygen-ui/patterns.md
@@ -0,0 +1,1197 @@
+# Oxygen UI Common Patterns
+
+Ready-to-use UI patterns for common application scenarios.
+
+## Table of Contents
+
+- [App Shell Layout](#app-shell-layout)
+- [Authentication Forms](#authentication-forms)
+- [Dashboard Layout](#dashboard-layout)
+- [Data Tables](#data-tables)
+- [Modal Dialogs](#modal-dialogs)
+- [Error States](#error-states)
+- [Form Patterns](#form-patterns)
+- [Navigation Patterns](#navigation-patterns)
+- [Theme Switching](#theme-switching)
+
+---
+
+## App Shell Layout
+
+Complete application shell with header, sidebar, and content area.
+
+```tsx
+import { useState } from 'react';
+import {
+  OxygenUIThemeProvider,
+  OxygenTheme,
+  AppShell,
+  Header,
+  Sidebar,
+  Footer,
+  ColorSchemeToggle,
+  UserMenu,
+} from '@wso2/oxygen-ui';
+import { HomeIcon, DashboardIcon, SettingsIcon } from '@wso2/oxygen-ui-icons-react';
+
+function App() {
+  const [collapsed, setCollapsed] = useState(false);
+  const [activeItem, setActiveItem] = useState('home');
+
+  return (
+    <OxygenUIThemeProvider theme={OxygenTheme}>
+      <AppShell>
+        <AppShell.Navbar>
+          <Header>
+            <Header.Toggle
+              collapsed={collapsed}
+              onToggle={() => setCollapsed(!collapsed)}
+            />
+            <Header.Brand>
+              <Header.BrandLogo>
+                <img src="/logo.svg" alt="Logo" height={32} />
+              </Header.BrandLogo>
+              <Header.BrandTitle>My App</Header.BrandTitle>
+            </Header.Brand>
+            <Header.Spacer />
+            <Header.Actions>
+              <ColorSchemeToggle />
+              <UserMenu>
+                <UserMenu.Trigger name="John Doe" />
+              </UserMenu>
+            </Header.Actions>
+          </Header>
+        </AppShell.Navbar>
+
+        <AppShell.Sidebar>
+          <Sidebar
+            collapsed={collapsed}
+            activeItem={activeItem}
+            onSelect={setActiveItem}
+          >
+            <Sidebar.Nav>
+              <Sidebar.Category>
+                <Sidebar.CategoryLabel>Main</Sidebar.CategoryLabel>
+                <Sidebar.Item id="home">
+                  <Sidebar.ItemIcon><HomeIcon size={20} /></Sidebar.ItemIcon>
+                  <Sidebar.ItemLabel>Home</Sidebar.ItemLabel>
+                </Sidebar.Item>
+                <Sidebar.Item id="dashboard">
+                  <Sidebar.ItemIcon><DashboardIcon size={20} /></Sidebar.ItemIcon>
+                  <Sidebar.ItemLabel>Dashboard</Sidebar.ItemLabel>
+                </Sidebar.Item>
+              </Sidebar.Category>
+            </Sidebar.Nav>
+            <Sidebar.Footer>
+              <Sidebar.Item id="settings">
+                <Sidebar.ItemIcon><SettingsIcon size={20} /></Sidebar.ItemIcon>
+                <Sidebar.ItemLabel>Settings</Sidebar.ItemLabel>
+              </Sidebar.Item>
+            </Sidebar.Footer>
+          </Sidebar>
+        </AppShell.Sidebar>
+
+        <AppShell.Main>
+          <Box sx={{ p: 3 }}>
+            {/* Page content goes here */}
+          </Box>
+        </AppShell.Main>
+
+        <AppShell.Footer>
+          <Footer>
+            <Footer.Copyright>© 2025 WSO2 LLC. All rights reserved.</Footer.Copyright>
+          </Footer>
+        </AppShell.Footer>
+      </AppShell>
+    </OxygenUIThemeProvider>
+  );
+}
+```
+
+---
+
+## Authentication Forms
+
+### Login Form
+
+```tsx
+import { useState } from 'react';
+import {
+  Box,
+  Paper,
+  Typography,
+  TextField,
+  Button,
+  Link,
+  Divider,
+  Alert,
+} from '@wso2/oxygen-ui';
+
+function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      // Login logic here
+    } catch (err) {
+      setError('Invalid credentials');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bgcolor: 'background.default',
+      }}
+    >
+      <Paper sx={{ p: 4, maxWidth: 400, width: '100%' }}>
+        <Typography variant="h5" gutterBottom align="center">
+          Sign In
+        </Typography>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {error}
+          </Alert>
+        )}
+
+        <Box component="form" onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            margin="normal"
+            required
+          />
+
+          <TextField
+            fullWidth
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            margin="normal"
+            required
+          />
+
+          <Button
+            fullWidth
+            type="submit"
+            variant="contained"
+            disabled={loading}
+            sx={{ mt: 3, mb: 2 }}
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </Button>
+
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Link href="/forgot-password" variant="body2">
+              Forgot password?
+            </Link>
+            <Link href="/register" variant="body2">
+              Create account
+            </Link>
+          </Box>
+
+          <Divider sx={{ my: 3 }}>or</Divider>
+
+          <Button fullWidth variant="outlined" startIcon={<GoogleIcon />}>
+            Continue with Google
+          </Button>
+        </Box>
+      </Paper>
+    </Box>
+  );
+}
+```
+
+### Password Reset Form
+
+```tsx
+import { useState } from 'react';
+import {
+  Box,
+  Paper,
+  Typography,
+  TextField,
+  Button,
+  Alert,
+} from '@wso2/oxygen-ui';
+
+function PasswordResetForm() {
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Send reset email
+    setSubmitted(true);
+  };
+
+  if (submitted) {
+    return (
+      <Paper sx={{ p: 4, maxWidth: 400 }}>
+        <Alert severity="success">
+          If an account exists for {email}, you will receive a password reset link.
+        </Alert>
+        <Button href="/login" sx={{ mt: 2 }}>
+          Back to Login
+        </Button>
+      </Paper>
+    );
+  }
+
+  return (
+    <Paper sx={{ p: 4, maxWidth: 400 }}>
+      <Typography variant="h5" gutterBottom>
+        Reset Password
+      </Typography>
+      <Typography color="text.secondary" sx={{ mb: 3 }}>
+        Enter your email address and we'll send you a reset link.
+      </Typography>
+
+      <Box component="form" onSubmit={handleSubmit}>
+        <TextField
+          fullWidth
+          label="Email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+        <Button fullWidth type="submit" variant="contained" sx={{ mt: 3 }}>
+          Send Reset Link
+        </Button>
+      </Box>
+    </Paper>
+  );
+}
+```
+
+---
+
+## Dashboard Layout
+
+### Stats Cards
+
+```tsx
+import { Grid, Paper, Typography, Box } from '@wso2/oxygen-ui';
+import { TrendingUpIcon, TrendingDownIcon } from '@wso2/oxygen-ui-icons-react';
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  change?: number;
+  icon?: React.ReactNode;
+}
+
+function StatCard({ title, value, change, icon }: StatCardProps) {
+  const isPositive = change && change > 0;
+
+  return (
+    <Paper sx={{ p: 3 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+        <Typography color="text.secondary" variant="body2">
+          {title}
+        </Typography>
+        {icon}
+      </Box>
+
+      <Typography variant="h4" fontWeight="bold">
+        {value}
+      </Typography>
+
+      {change !== undefined && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mt: 1,
+            color: isPositive ? 'success.main' : 'error.main',
+          }}
+        >
+          {isPositive ? <TrendingUpIcon size={16} /> : <TrendingDownIcon size={16} />}
+          <Typography variant="body2" sx={{ ml: 0.5 }}>
+            {Math.abs(change)}% from last month
+          </Typography>
+        </Box>
+      )}
+    </Paper>
+  );
+}
+
+function Dashboard() {
+  return (
+    <Box sx={{ p: 3 }}>
+      <Typography variant="h4" gutterBottom>
+        Dashboard
+      </Typography>
+
+      <Grid container spacing={3}>
+        <Grid item xs={12} sm={6} md={3}>
+          <StatCard title="Total Users" value="12,345" change={12.5} />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <StatCard title="Revenue" value="$45,678" change={8.2} />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <StatCard title="Active Sessions" value="1,234" change={-3.1} />
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <StatCard title="Conversion Rate" value="3.2%" change={0.8} />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+```
+
+### Dashboard with Charts
+
+> **Note:** Charts are available in a separate package `@wso2/oxygen-ui-charts-react` built on Recharts.
+
+```tsx
+import { Grid, Paper, Typography, Box } from '@wso2/oxygen-ui';
+import { LineChart, PieChart } from '@wso2/oxygen-ui-charts-react';
+
+function DashboardCharts() {
+  const salesData = [
+    { month: 'Jan', sales: 4000, orders: 240 },
+    { month: 'Feb', sales: 3000, orders: 139 },
+    { month: 'Mar', sales: 2000, orders: 980 },
+    { month: 'Apr', sales: 2780, orders: 390 },
+    { month: 'May', sales: 1890, orders: 480 },
+    { month: 'Jun', sales: 2390, orders: 380 },
+  ];
+
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={12} md={8}>
+        <Paper sx={{ p: 3 }}>
+          <Typography variant="h6" gutterBottom>
+            Sales Overview
+          </Typography>
+          <LineChart
+            height={300}
+            series={[
+              { data: salesData.map((d) => d.sales), label: 'Sales' },
+              { data: salesData.map((d) => d.orders), label: 'Orders' },
+            ]}
+            xAxis={[{ data: salesData.map((d) => d.month), scaleType: 'band' }]}
+          />
+        </Paper>
+      </Grid>
+
+      <Grid item xs={12} md={4}>
+        <Paper sx={{ p: 3 }}>
+          <Typography variant="h6" gutterBottom>
+            Traffic Sources
+          </Typography>
+          <PieChart
+            height={300}
+            series={[
+              {
+                data: [
+                  { value: 45, label: 'Organic' },
+                  { value: 30, label: 'Direct' },
+                  { value: 15, label: 'Referral' },
+                  { value: 10, label: 'Social' },
+                ],
+              },
+            ]}
+          />
+        </Paper>
+      </Grid>
+    </Grid>
+  );
+}
+```
+
+---
+
+## Data Tables
+
+### Basic Data Table
+
+```tsx
+import { useState, useMemo } from 'react';
+import { ListingTable, Button, IconButton, Chip } from '@wso2/oxygen-ui';
+import { EditIcon, TrashIcon, MoreVerticalIcon } from '@wso2/oxygen-ui-icons-react';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+}
+
+function UsersTable({ users }: { users: User[] }) {
+  const [search, setSearch] = useState('');
+  const [sortField, setSortField] = useState('name');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const filteredData = useMemo(() => {
+    let result = [...users];
+
+    // Filter by search
+    if (search) {
+      result = result.filter(
+        (u) =>
+          u.name.toLowerCase().includes(search.toLowerCase()) ||
+          u.email.toLowerCase().includes(search.toLowerCase())
+      );
+    }
+
+    // Sort
+    result.sort((a, b) => {
+      const aVal = a[sortField as keyof User];
+      const bVal = b[sortField as keyof User];
+      const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+      return sortDirection === 'asc' ? cmp : -cmp;
+    });
+
+    return result;
+  }, [users, search, sortField, sortDirection]);
+
+  const paginatedData = filteredData.slice(
+    page * rowsPerPage,
+    page * rowsPerPage + rowsPerPage
+  );
+
+  return (
+    <ListingTable.Provider
+      searchValue={search}
+      onSearchChange={setSearch}
+      sortField={sortField}
+      sortDirection={sortDirection}
+      onSortChange={(field, dir) => {
+        setSortField(field);
+        setSortDirection(dir);
+      }}
+      page={page}
+      rowsPerPage={rowsPerPage}
+      totalCount={filteredData.length}
+      onPageChange={setPage}
+      onRowsPerPageChange={setRowsPerPage}
+    >
+      <ListingTable.Container>
+        <ListingTable.Toolbar
+          showSearch
+          searchPlaceholder="Search users..."
+          actions={
+            <Button variant="contained" size="small">
+              Add User
+            </Button>
+          }
+        />
+
+        <ListingTable>
+          <ListingTable.Head>
+            <ListingTable.Row>
+              <ListingTable.Cell>
+                <ListingTable.SortLabel field="name">Name</ListingTable.SortLabel>
+              </ListingTable.Cell>
+              <ListingTable.Cell>
+                <ListingTable.SortLabel field="email">Email</ListingTable.SortLabel>
+              </ListingTable.Cell>
+              <ListingTable.Cell>Role</ListingTable.Cell>
+              <ListingTable.Cell>Status</ListingTable.Cell>
+              <ListingTable.Cell align="right">Actions</ListingTable.Cell>
+            </ListingTable.Row>
+          </ListingTable.Head>
+
+          <ListingTable.Body>
+            {paginatedData.length === 0 ? (
+              <ListingTable.Row>
+                <ListingTable.Cell colSpan={5}>
+                  <ListingTable.EmptyState message="No users found" />
+                </ListingTable.Cell>
+              </ListingTable.Row>
+            ) : (
+              paginatedData.map((user) => (
+                <ListingTable.Row key={user.id}>
+                  <ListingTable.Cell>{user.name}</ListingTable.Cell>
+                  <ListingTable.Cell>{user.email}</ListingTable.Cell>
+                  <ListingTable.Cell>{user.role}</ListingTable.Cell>
+                  <ListingTable.Cell>
+                    <Chip
+                      label={user.status}
+                      color={user.status === 'active' ? 'success' : 'default'}
+                      size="small"
+                    />
+                  </ListingTable.Cell>
+                  <ListingTable.Cell align="right">
+                    <IconButton size="small">
+                      <EditIcon size={18} />
+                    </IconButton>
+                    <IconButton size="small" color="error">
+                      <TrashIcon size={18} />
+                    </IconButton>
+                  </ListingTable.Cell>
+                </ListingTable.Row>
+              ))
+            )}
+          </ListingTable.Body>
+
+          <ListingTable.Footer />
+        </ListingTable>
+      </ListingTable.Container>
+    </ListingTable.Provider>
+  );
+}
+```
+
+### Card Variant Table
+
+```tsx
+<ListingTable variant="card" density="comfortable">
+  <ListingTable.Head>
+    <ListingTable.Row>
+      <ListingTable.Cell>Project</ListingTable.Cell>
+      <ListingTable.Cell>Status</ListingTable.Cell>
+      <ListingTable.Cell>Last Updated</ListingTable.Cell>
+      <ListingTable.Cell align="right">Actions</ListingTable.Cell>
+    </ListingTable.Row>
+  </ListingTable.Head>
+  <ListingTable.Body>
+    {projects.map((project) => (
+      <ListingTable.Row key={project.id}>
+        <ListingTable.Cell>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <ListingTable.CellIcon>
+              <FolderIcon />
+            </ListingTable.CellIcon>
+            <Box>
+              <Typography fontWeight="medium">{project.name}</Typography>
+              <Typography variant="body2" color="text.secondary">
+                {project.description}
+              </Typography>
+            </Box>
+          </Box>
+        </ListingTable.Cell>
+        <ListingTable.Cell>
+          <Chip label={project.status} size="small" />
+        </ListingTable.Cell>
+        <ListingTable.Cell>{project.updatedAt}</ListingTable.Cell>
+        <ListingTable.Cell align="right">
+          <ListingTable.RowActions
+            actions={[
+              { id: 'view', label: 'View', onClick: () => {} },
+              { id: 'edit', label: 'Edit', onClick: () => {} },
+              { id: 'delete', label: 'Delete', onClick: () => {}, color: 'error' },
+            ]}
+          />
+        </ListingTable.Cell>
+      </ListingTable.Row>
+    ))}
+  </ListingTable.Body>
+</ListingTable>
+```
+
+---
+
+## Modal Dialogs
+
+### Confirmation Dialog
+
+```tsx
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+} from '@wso2/oxygen-ui';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  loading?: boolean;
+  destructive?: boolean;
+}
+
+function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel,
+  loading = false,
+  destructive = false,
+}: ConfirmDialogProps) {
+  return (
+    <Dialog open={open} onClose={onCancel} maxWidth="xs" fullWidth>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{message}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onCancel} disabled={loading}>
+          {cancelLabel}
+        </Button>
+        <Button
+          onClick={onConfirm}
+          variant="contained"
+          color={destructive ? 'error' : 'primary'}
+          disabled={loading}
+        >
+          {loading ? 'Processing...' : confirmLabel}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+// Usage
+<ConfirmDialog
+  open={deleteDialogOpen}
+  title="Delete User"
+  message="Are you sure you want to delete this user? This action cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={handleDelete}
+  onCancel={() => setDeleteDialogOpen(false)}
+  destructive
+/>
+```
+
+### Form Dialog
+
+```tsx
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  Box,
+} from '@wso2/oxygen-ui';
+
+function CreateUserDialog({ open, onClose, onSubmit }) {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+
+  const handleSubmit = () => {
+    onSubmit({ name, email });
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>Create User</DialogTitle>
+      <DialogContent>
+        <Box sx={{ pt: 1 }}>
+          <TextField
+            fullWidth
+            label="Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            margin="normal"
+            required
+          />
+          <TextField
+            fullWidth
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            margin="normal"
+            required
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={handleSubmit} variant="contained">
+          Create
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+```
+
+---
+
+## Error States
+
+### 404 Page
+
+```tsx
+import { Box, Typography, Button } from '@wso2/oxygen-ui';
+
+function NotFoundPage() {
+  return (
+    <Box
+      sx={{
+        minHeight: '60vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        p: 3,
+      }}
+    >
+      <Typography variant="h1" sx={{ fontSize: '6rem', fontWeight: 'bold', color: 'text.secondary' }}>
+        404
+      </Typography>
+      <Typography variant="h5" gutterBottom>
+        Page not found
+      </Typography>
+      <Typography color="text.secondary" sx={{ mb: 4, maxWidth: 400 }}>
+        The page you're looking for doesn't exist or has been moved.
+      </Typography>
+      <Button variant="contained" href="/">
+        Go to Home
+      </Button>
+    </Box>
+  );
+}
+```
+
+### Error Boundary Fallback
+
+```tsx
+import { Box, Typography, Button, Paper } from '@wso2/oxygen-ui';
+import { AlertTriangleIcon } from '@wso2/oxygen-ui-icons-react';
+
+function ErrorFallback({ error, resetError }) {
+  return (
+    <Box
+      sx={{
+        minHeight: '60vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 3,
+      }}
+    >
+      <Paper sx={{ p: 4, maxWidth: 500, textAlign: 'center' }}>
+        <AlertTriangleIcon size={48} color="error" />
+        <Typography variant="h5" sx={{ mt: 2 }} gutterBottom>
+          Something went wrong
+        </Typography>
+        <Typography color="text.secondary" sx={{ mb: 3 }}>
+          {error?.message || 'An unexpected error occurred'}
+        </Typography>
+        <Button variant="contained" onClick={resetError}>
+          Try Again
+        </Button>
+      </Paper>
+    </Box>
+  );
+}
+```
+
+### Empty State
+
+```tsx
+import { Box, Typography, Button } from '@wso2/oxygen-ui';
+import { InboxIcon } from '@wso2/oxygen-ui-icons-react';
+
+function EmptyState({
+  icon = <InboxIcon size={48} />,
+  title,
+  description,
+  action,
+  actionLabel,
+}) {
+  return (
+    <Box
+      sx={{
+        py: 8,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        textAlign: 'center',
+      }}
+    >
+      <Box sx={{ color: 'text.secondary', mb: 2 }}>{icon}</Box>
+      <Typography variant="h6" gutterBottom>
+        {title}
+      </Typography>
+      {description && (
+        <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 400 }}>
+          {description}
+        </Typography>
+      )}
+      {action && actionLabel && (
+        <Button variant="contained" onClick={action}>
+          {actionLabel}
+        </Button>
+      )}
+    </Box>
+  );
+}
+
+// Usage
+<EmptyState
+  title="No projects yet"
+  description="Create your first project to get started"
+  actionLabel="Create Project"
+  action={() => setCreateDialogOpen(true)}
+/>
+```
+
+---
+
+## Form Patterns
+
+### Multi-Step Wizard
+
+```tsx
+import { useState } from 'react';
+import {
+  Box,
+  Paper,
+  Stepper,
+  Step,
+  StepLabel,
+  Button,
+  Typography,
+  TextField,
+} from '@wso2/oxygen-ui';
+
+const steps = ['Account', 'Profile', 'Preferences'];
+
+function RegistrationWizard() {
+  const [activeStep, setActiveStep] = useState(0);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    name: '',
+    company: '',
+    notifications: true,
+  });
+
+  const handleNext = () => {
+    setActiveStep((prev) => prev + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prev) => prev - 1);
+  };
+
+  const handleSubmit = () => {
+    console.log('Form submitted:', formData);
+  };
+
+  const renderStepContent = (step: number) => {
+    switch (step) {
+      case 0:
+        return (
+          <>
+            <TextField
+              fullWidth
+              label="Email"
+              type="email"
+              value={formData.email}
+              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              margin="normal"
+            />
+            <TextField
+              fullWidth
+              label="Password"
+              type="password"
+              value={formData.password}
+              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              margin="normal"
+            />
+          </>
+        );
+      case 1:
+        return (
+          <>
+            <TextField
+              fullWidth
+              label="Full Name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              margin="normal"
+            />
+            <TextField
+              fullWidth
+              label="Company"
+              value={formData.company}
+              onChange={(e) => setFormData({ ...formData, company: e.target.value })}
+              margin="normal"
+            />
+          </>
+        );
+      case 2:
+        return (
+          <Typography>
+            Review your information and click Submit to complete registration.
+          </Typography>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Paper sx={{ p: 4, maxWidth: 600, mx: 'auto' }}>
+      <Stepper activeStep={activeStep} sx={{ mb: 4 }}>
+        {steps.map((label) => (
+          <Step key={label}>
+            <StepLabel>{label}</StepLabel>
+          </Step>
+        ))}
+      </Stepper>
+
+      <Box sx={{ minHeight: 200 }}>{renderStepContent(activeStep)}</Box>
+
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 4 }}>
+        <Button disabled={activeStep === 0} onClick={handleBack}>
+          Back
+        </Button>
+        {activeStep === steps.length - 1 ? (
+          <Button variant="contained" onClick={handleSubmit}>
+            Submit
+          </Button>
+        ) : (
+          <Button variant="contained" onClick={handleNext}>
+            Next
+          </Button>
+        )}
+      </Box>
+    </Paper>
+  );
+}
+```
+
+### Form with Validation
+
+```tsx
+import { useState } from 'react';
+import { Box, TextField, Button, Alert } from '@wso2/oxygen-ui';
+
+interface FormErrors {
+  [key: string]: string;
+}
+
+function ValidatedForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  const validate = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (!email) {
+      newErrors.email = 'Email is required';
+    } else if (!/\S+@\S+\.\S+/.test(email)) {
+      newErrors.email = 'Invalid email format';
+    }
+
+    if (!password) {
+      newErrors.password = 'Password is required';
+    } else if (password.length < 8) {
+      newErrors.password = 'Password must be at least 8 characters';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (validate()) {
+      // Submit form
+    }
+  };
+
+  return (
+    <Box component="form" onSubmit={handleSubmit}>
+      <TextField
+        fullWidth
+        label="Email"
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        error={!!errors.email}
+        helperText={errors.email}
+        margin="normal"
+      />
+
+      <TextField
+        fullWidth
+        label="Password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        error={!!errors.password}
+        helperText={errors.password}
+        margin="normal"
+      />
+
+      <Button type="submit" variant="contained" sx={{ mt: 2 }}>
+        Submit
+      </Button>
+    </Box>
+  );
+}
+```
+
+---
+
+## Navigation Patterns
+
+### Breadcrumbs
+
+```tsx
+import { Breadcrumbs, Link, Typography } from '@wso2/oxygen-ui';
+import { ChevronRightIcon } from '@wso2/oxygen-ui-icons-react';
+
+function PageBreadcrumbs({ items }: { items: { label: string; href?: string }[] }) {
+  return (
+    <Breadcrumbs
+      separator={<ChevronRightIcon size={16} />}
+      sx={{ mb: 2 }}
+    >
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        return isLast ? (
+          <Typography key={item.label} color="text.primary">
+            {item.label}
+          </Typography>
+        ) : (
+          <Link key={item.label} href={item.href} color="inherit" underline="hover">
+            {item.label}
+          </Link>
+        );
+      })}
+    </Breadcrumbs>
+  );
+}
+
+// Usage
+<PageBreadcrumbs
+  items={[
+    { label: 'Home', href: '/' },
+    { label: 'Users', href: '/users' },
+    { label: 'John Doe' },
+  ]}
+/>
+```
+
+### Tab Navigation
+
+```tsx
+import { useState } from 'react';
+import { Tabs, Tab, Box } from '@wso2/oxygen-ui';
+
+function TabNavigation() {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Box>
+      <Tabs value={value} onChange={(_, newValue) => setValue(newValue)}>
+        <Tab label="Overview" />
+        <Tab label="Settings" />
+        <Tab label="Members" />
+      </Tabs>
+
+      <Box sx={{ p: 3 }}>
+        {value === 0 && <div>Overview content</div>}
+        {value === 1 && <div>Settings content</div>}
+        {value === 2 && <div>Members content</div>}
+      </Box>
+    </Box>
+  );
+}
+```
+
+---
+
+## Theme Switching
+
+### Complete Theme Switcher Setup
+
+```tsx
+import {
+  OxygenUIThemeProvider,
+  OxygenTheme,
+  AcrylicOrangeTheme,
+  AcrylicPurpleTheme,
+  ChoreoTheme,
+  ClassicTheme,
+  HighContrastTheme,
+  PaleBaseTheme,
+  PaleGrayTheme,
+  PaleIndigoTheme,
+  useThemeSwitcher,
+  Select,
+  MenuItem,
+} from '@wso2/oxygen-ui';
+
+const themes = [
+  { key: 'default', label: 'Default', theme: OxygenTheme },
+  { key: 'orange', label: 'Acrylic Orange', theme: AcrylicOrangeTheme },
+  { key: 'purple', label: 'Acrylic Purple', theme: AcrylicPurpleTheme },
+  { key: 'choreo', label: 'Choreo', theme: ChoreoTheme },
+  { key: 'classic', label: 'Classic', theme: ClassicTheme },
+  { key: 'highContrast', label: 'High Contrast', theme: HighContrastTheme },
+  { key: 'paleBase', label: 'Pale Base', theme: PaleBaseTheme },
+  { key: 'paleGray', label: 'Pale Gray', theme: PaleGrayTheme },
+  { key: 'paleIndigo', label: 'Pale Indigo', theme: PaleIndigoTheme },
+];
+
+function ThemeSelector() {
+  const { currentTheme, themes, setTheme } = useThemeSwitcher();
+
+  return (
+    <Select
+      value={currentTheme}
+      onChange={(e) => setTheme(e.target.value as string)}
+      size="small"
+    >
+      {themes.map((t) => (
+        <MenuItem key={t.key} value={t.key}>
+          {t.label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}
+
+function App() {
+  return (
+    <OxygenUIThemeProvider themes={themes} initialTheme="default">
+      <Header>
+        <Header.Actions>
+          <ThemeSelector />
+          <ColorSchemeToggle />
+        </Header.Actions>
+      </Header>
+      {/* Rest of app */}
+    </OxygenUIThemeProvider>
+  );
+}
+```
diff --git a/portals/api-control-plane/.claude/oxygen-ui/theming.md b/portals/api-control-plane/.claude/oxygen-ui/theming.md
new file mode 100644
index 0000000000..6894d10dba
--- /dev/null
+++ b/portals/api-control-plane/.claude/oxygen-ui/theming.md
@@ -0,0 +1,334 @@
+# Oxygen UI Theming Guide
+
+## Table of Contents
+- [Available Themes](#available-themes)
+- [Theme Provider](#theme-provider)
+- [Theme Properties](#theme-properties)
+- [Dark Mode](#dark-mode)
+- [CSS Variables](#css-variables)
+- [Custom Themes](#custom-themes)
+
+---
+
+## Available Themes
+
+| Theme | Import | Description |
+|-------|--------|-------------|
+| OxygenTheme | `OxygenTheme` | Default theme (Acrylic Base) |
+| Acrylic Orange | `AcrylicOrangeTheme` | Glass-morphism effects, orange primary |
+| Acrylic Purple | `AcrylicPurpleTheme` | Glass-morphism with purple accents |
+| Choreo | `ChoreoTheme` | Choreo product theme (indigo-violet gradient) |
+| Classic | `ClassicTheme` | Standard flat design |
+| High Contrast | `HighContrastTheme` | Accessibility-focused with high contrast colors |
+| Pale Base | `PaleBaseTheme` | Minimal color palette for subtle interfaces |
+| Pale Gray | `PaleGrayTheme` | Soft gray tones for a muted appearance |
+| Pale Indigo | `PaleIndigoTheme` | Soft indigo tones for a calm interface |
+
+```tsx
+import {
+  OxygenTheme,
+  AcrylicOrangeTheme,
+  AcrylicPurpleTheme,
+  ChoreoTheme,
+  ClassicTheme,
+  HighContrastTheme,
+  PaleBaseTheme,
+  PaleGrayTheme,
+  PaleIndigoTheme,
+} from '@wso2/oxygen-ui';
+```
+
+---
+
+## Theme Provider
+
+### Single Theme (Default)
+```tsx
+import { OxygenUIThemeProvider } from '@wso2/oxygen-ui';
+
+<OxygenUIThemeProvider>
+  <App />
+</OxygenUIThemeProvider>
+```
+
+### Single Custom Theme
+```tsx
+import { OxygenUIThemeProvider, ClassicTheme } from '@wso2/oxygen-ui';
+
+<OxygenUIThemeProvider theme={ClassicTheme}>
+  <App />
+</OxygenUIThemeProvider>
+```
+
+### Multiple Themes with Switching
+```tsx
+import {
+  OxygenUIThemeProvider,
+  OxygenTheme,
+  AcrylicOrangeTheme,
+  AcrylicPurpleTheme,
+  ChoreoTheme,
+  ClassicTheme,
+  HighContrastTheme,
+  PaleBaseTheme,
+  PaleGrayTheme,
+  PaleIndigoTheme,
+} from '@wso2/oxygen-ui';
+
+<OxygenUIThemeProvider
+  themes={[
+    { key: 'default', label: 'Default', theme: OxygenTheme },
+    { key: 'orange', label: 'Acrylic Orange', theme: AcrylicOrangeTheme },
+    { key: 'purple', label: 'Acrylic Purple', theme: AcrylicPurpleTheme },
+    { key: 'choreo', label: 'Choreo', theme: ChoreoTheme },
+    { key: 'classic', label: 'Classic', theme: ClassicTheme },
+    { key: 'highContrast', label: 'High Contrast', theme: HighContrastTheme },
+    { key: 'paleBase', label: 'Pale Base', theme: PaleBaseTheme },
+    { key: 'paleGray', label: 'Pale Gray', theme: PaleGrayTheme },
+    { key: 'paleIndigo', label: 'Pale Indigo', theme: PaleIndigoTheme },
+  ]}
+  initialTheme="default"
+>
+  <App />
+</OxygenUIThemeProvider>
+```
+
+### Provider Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `theme` | `Theme` | Single theme object |
+| `themes` | `ThemeOption[]` | Array of theme options for switching |
+| `initialTheme` | `string` | Initial theme key (when using `themes`) |
+
+---
+
+## Theme Properties
+
+### Color Palette
+```tsx
+// Primary colors (orange gradient)
+theme.palette.primary.main     // #fa7b3f
+theme.palette.primary.light
+theme.palette.primary.dark
+
+// Secondary, error, warning, info, success
+theme.palette.secondary.main
+theme.palette.error.main
+theme.palette.warning.main
+theme.palette.info.main
+theme.palette.success.main
+
+// Background
+theme.palette.background.default
+theme.palette.background.paper
+```
+
+### Typography
+Font: **Inter Variable** (auto-bundled, no setup required)
+
+```tsx
+theme.typography.fontFamily     // 'Inter Variable', sans-serif
+theme.typography.fontSize       // 14 (base)
+
+// Heading variants
+theme.typography.h1             // 36px, bold
+theme.typography.h2             // 30px
+theme.typography.h3             // 24px
+theme.typography.h4             // 20px
+theme.typography.h5             // 16px
+theme.typography.h6             // 14px
+
+// Body variants
+theme.typography.body1          // 14px
+theme.typography.body2          // 12px
+theme.typography.caption        // 12px
+```
+
+### Custom Oxygen Properties
+```tsx
+// Glass-morphism blur effects
+theme.oxygen.blur.light         // 4px
+theme.oxygen.blur.medium        // 8px
+theme.oxygen.blur.heavy         // 16px
+
+// Border settings
+theme.oxygen.border.width       // '1px'
+theme.oxygen.border.style       // 'solid'
+
+// Gradient
+theme.oxygen.gradient.primary   // linear-gradient(135deg, #e74420 0%, #fa7b3f 100%)
+
+// Transparent paper (for glass effects)
+theme.oxygen.paperTransparent.light  // rgba(255,255,255,0.7)
+theme.oxygen.paperTransparent.dark   // rgba(0,0,0,0.5)
+
+// Syntax highlighting colors
+theme.oxygen.syntax.light.keyword
+theme.oxygen.syntax.dark.keyword
+```
+
+---
+
+## Dark Mode
+
+### Color Scheme Toggle
+```tsx
+import { ColorSchemeToggle } from '@wso2/oxygen-ui';
+
+// Cycles through: light → dark → system
+<ColorSchemeToggle />
+```
+
+### Adaptive Images
+```tsx
+import { ColorSchemeImage } from '@wso2/oxygen-ui';
+
+<ColorSchemeImage
+  light="/images/logo.svg"
+  dark="/images/logo-dark.svg"
+  alt="Company Logo"
+/>
+```
+
+### Programmatic Mode Access
+```tsx
+import { useTheme } from '@wso2/oxygen-ui';
+
+const theme = useTheme();
+const isDark = theme.palette.mode === 'dark';
+```
+
+### useThemeContent Hook
+```tsx
+import { useThemeContent } from '@wso2/oxygen-ui';
+
+const content = useThemeContent({
+  light: 'Show this in light mode',
+  dark: 'Show this in dark mode'
+});
+```
+
+---
+
+## CSS Variables
+
+Oxygen UI uses CSS variables with the `--oxygen` prefix.
+
+### Key Variables
+```css
+/* Colors */
+--oxygen-palette-primary-main
+--oxygen-palette-background-default
+--oxygen-palette-background-paper
+--oxygen-palette-text-primary
+
+/* Typography */
+--oxygen-typography-fontFamily
+--oxygen-typography-fontSize
+
+/* Shadows (disabled by default) */
+--oxygen-shadows-0
+```
+
+### Accessing in Styles
+```tsx
+<Box
+  sx={{
+    backgroundColor: 'var(--oxygen-palette-background-paper)',
+    color: 'var(--oxygen-palette-text-primary)',
+  }}
+/>
+```
+
+### Color Scheme Selector
+The theme uses `data-color-scheme` attribute for mode switching:
+
+```css
+[data-color-scheme="light"] {
+  --oxygen-palette-background-default: #ffffff;
+}
+
+[data-color-scheme="dark"] {
+  --oxygen-palette-background-default: #121212;
+}
+```
+
+---
+
+## Custom Themes
+
+### Extending Base Theme
+```tsx
+import { extendTheme } from '@mui/material/styles';
+import { OxygenThemeBase } from '@wso2/oxygen-ui';
+
+const customTheme = extendTheme({
+  ...OxygenThemeBase,
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: {
+          main: '#1976d2', // Custom blue
+        },
+      },
+    },
+    dark: {
+      palette: {
+        primary: {
+          main: '#90caf9',
+        },
+      },
+    },
+  },
+});
+
+<OxygenUIThemeProvider theme={customTheme}>
+  <App />
+</OxygenUIThemeProvider>
+```
+
+### Component Overrides
+```tsx
+const customTheme = extendTheme({
+  ...OxygenThemeBase,
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          textTransform: 'none',
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          backdropFilter: 'blur(8px)',
+        },
+      },
+    },
+  },
+});
+```
+
+### Theme Switching in Components
+```tsx
+import { useThemeSwitcher } from '@wso2/oxygen-ui';
+
+function ThemeSelector() {
+  const { currentTheme, setTheme, themes } = useThemeSwitcher();
+
+  return (
+    <Select value={currentTheme} onChange={(e) => setTheme(e.target.value)}>
+      {themes.map((t) => (
+        <MenuItem key={t.key} value={t.key}>
+          {t.label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+}
+```
+
+### LocalStorage Persistence
+Theme selection is automatically persisted to localStorage with the key `oxygen-theme`. The provider reads the saved theme on mount and applies it.
diff --git a/portals/api-control-plane/.claude/skills/oxygen-component/SKILL.md b/portals/api-control-plane/.claude/skills/oxygen-component/SKILL.md
new file mode 100644
index 0000000000..a88c11a321
--- /dev/null
+++ b/portals/api-control-plane/.claude/skills/oxygen-component/SKILL.md
@@ -0,0 +1,147 @@
+---
+name: oxygen-component
+description: Generate Oxygen UI React components following best practices. Use when creating new components, data tables, cards, or UI elements with the Oxygen UI library.
+---
+
+# Generate Oxygen UI Component
+
+## Instructions
+
+1. Read `.claude/oxygen-ui/CLAUDE.md` for critical rules
+2. Read `.claude/oxygen-ui/components.md` for API reference
+3. Generate component using Oxygen UI patterns
+
+## Critical Rules
+
+- Import ALL components from `@wso2/oxygen-ui` (never from `@mui/material`)
+- Import icons from `@wso2/oxygen-ui-icons-react`
+- Use theme tokens via `sx` prop (e.g., `p: 2`, `bgcolor: 'background.paper'`)
+- Never hardcode colors or spacing values
+- For data tables, prefer `ListingTable` over MUI's `Table`
+- For layouts, use `AppShell`, `Header`, `Sidebar`
+
+## Component Template
+
+```tsx
+import { Box, Typography, Button } from '@wso2/oxygen-ui';
+import { IconName } from '@wso2/oxygen-ui-icons-react';
+
+interface MyComponentProps {
+  // Define props
+}
+
+function MyComponent({ ...props }: MyComponentProps) {
+  return (
+    <Box sx={{ p: 2, bgcolor: 'background.paper' }}>
+      {/* Component content */}
+    </Box>
+  );
+}
+
+export default MyComponent;
+```
+
+## Common Patterns
+
+### Data Table Component
+
+```tsx
+import { ListingTable, Chip, IconButton } from '@wso2/oxygen-ui';
+import { EditIcon, TrashIcon } from '@wso2/oxygen-ui-icons-react';
+
+<ListingTable.Container>
+  <ListingTable.Toolbar showSearch actions={<Button>Add Item</Button>} />
+  <ListingTable variant="card">
+    <ListingTable.Head>
+      <ListingTable.Row>
+        <ListingTable.Cell>Name</ListingTable.Cell>
+        <ListingTable.Cell>Status</ListingTable.Cell>
+        <ListingTable.Cell align="right">Actions</ListingTable.Cell>
+      </ListingTable.Row>
+    </ListingTable.Head>
+    <ListingTable.Body>
+      {data.map((item) => (
+        <ListingTable.Row key={item.id}>
+          <ListingTable.Cell>{item.name}</ListingTable.Cell>
+          <ListingTable.Cell>
+            <Chip label={item.status} color="success" size="small" />
+          </ListingTable.Cell>
+          <ListingTable.Cell align="right">
+            <IconButton size="small"><EditIcon size={18} /></IconButton>
+            <IconButton size="small" color="error"><TrashIcon size={18} /></IconButton>
+          </ListingTable.Cell>
+        </ListingTable.Row>
+      ))}
+    </ListingTable.Body>
+  </ListingTable>
+</ListingTable.Container>
+```
+
+### Card Component
+
+```tsx
+import { Paper, Typography, Box, Button } from '@wso2/oxygen-ui';
+
+<Paper sx={{ p: 3 }}>
+  <Typography variant="h6" gutterBottom>Card Title</Typography>
+  <Typography color="text.secondary" sx={{ mb: 2 }}>
+    Card description text
+  </Typography>
+  <Box sx={{ display: 'flex', gap: 1 }}>
+    <Button variant="contained">Primary</Button>
+    <Button variant="outlined">Secondary</Button>
+  </Box>
+</Paper>
+```
+
+### Dialog Component
+
+```tsx
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+} from '@wso2/oxygen-ui';
+
+<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+  <DialogTitle>Dialog Title</DialogTitle>
+  <DialogContent>
+    <DialogContentText>Dialog content goes here.</DialogContentText>
+  </DialogContent>
+  <DialogActions>
+    <Button onClick={onClose}>Cancel</Button>
+    <Button variant="contained" onClick={onConfirm}>Confirm</Button>
+  </DialogActions>
+</Dialog>
+```
+
+## MUI X Components (Use Namespaces)
+
+```tsx
+import { DataGrid, DatePickers, TreeView } from '@wso2/oxygen-ui';
+
+// DataGrid
+<DataGrid.DataGrid rows={rows} columns={columns} />
+
+// DatePickers
+<DatePickers.DatePicker value={date} onChange={setDate} />
+
+// TreeView
+<TreeView.SimpleTreeView>
+  <TreeView.TreeItem itemId="1" label="Item 1" />
+</TreeView.SimpleTreeView>
+```
+
+## Charts (Separate Package)
+
+```tsx
+// Charts are in a separate package built on Recharts
+import { LineChart, BarChart, PieChart } from '@wso2/oxygen-ui-charts-react';
+
+<LineChart series={series} />
+<BarChart series={series} />
+<PieChart series={series} />
+```
diff --git a/portals/api-control-plane/.claude/skills/oxygen-form/SKILL.md b/portals/api-control-plane/.claude/skills/oxygen-form/SKILL.md
new file mode 100644
index 0000000000..e9fb243eba
--- /dev/null
+++ b/portals/api-control-plane/.claude/skills/oxygen-form/SKILL.md
@@ -0,0 +1,410 @@
+---
+name: oxygen-form
+description: Generate forms with Form.* components and validation. Use when creating input forms, multi-step wizards, or form validation.
+---
+
+# Generate Oxygen UI Form
+
+## Instructions
+
+1. Read `.claude/oxygen-ui/components.md` for Form.* API
+2. Use `Form.Section` for grouping fields
+3. Use `Form.Stack` for field layout
+4. Add validation with `error` and `helperText` props
+
+## Critical Rules
+
+- Import form components from `@wso2/oxygen-ui`
+- Use controlled components with state
+- Show validation errors with `error` and `helperText` props
+- Use theme tokens for spacing
+
+## Basic Form
+
+```tsx
+import { useState } from 'react';
+import { Box, TextField, Button, Alert } from '@wso2/oxygen-ui';
+
+function BasicForm() {
+  const [formData, setFormData] = useState({ name: '', email: '' });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validate = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.name) {
+      newErrors.name = 'Name is required';
+    }
+
+    if (!formData.email) {
+      newErrors.email = 'Email is required';
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = 'Invalid email format';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (validate()) {
+      console.log('Form submitted:', formData);
+    }
+  };
+
+  return (
+    <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400 }}>
+      <TextField
+        fullWidth
+        label="Name"
+        value={formData.name}
+        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+        error={!!errors.name}
+        helperText={errors.name}
+        margin="normal"
+        required
+      />
+
+      <TextField
+        fullWidth
+        label="Email"
+        type="email"
+        value={formData.email}
+        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+        error={!!errors.email}
+        helperText={errors.email}
+        margin="normal"
+        required
+      />
+
+      <Button type="submit" variant="contained" sx={{ mt: 2 }}>
+        Submit
+      </Button>
+    </Box>
+  );
+}
+```
+
+## Form with Sections
+
+```tsx
+import { Form, TextField, Button, Box } from '@wso2/oxygen-ui';
+
+function SectionedForm() {
+  return (
+    <Box sx={{ maxWidth: 600 }}>
+      <Form.Section>
+        <Form.Header>Personal Information</Form.Header>
+        <Form.Subheader>Enter your basic details</Form.Subheader>
+
+        <Form.Stack spacing={2}>
+          <Form.TextInput label="First Name" required />
+          <Form.TextInput label="Last Name" required />
+          <Form.TextInput label="Email" type="email" required />
+        </Form.Stack>
+      </Form.Section>
+
+      <Form.Section>
+        <Form.Header>Company Details</Form.Header>
+        <Form.Subheader>Optional information about your organization</Form.Subheader>
+
+        <Form.Stack spacing={2}>
+          <Form.TextInput label="Company Name" />
+          <Form.SelectInput label="Role">
+            <Form.MenuItem value="developer">Developer</Form.MenuItem>
+            <Form.MenuItem value="designer">Designer</Form.MenuItem>
+            <Form.MenuItem value="manager">Manager</Form.MenuItem>
+          </Form.SelectInput>
+        </Form.Stack>
+      </Form.Section>
+
+      <Box sx={{ mt: 3, display: 'flex', gap: 2 }}>
+        <Button variant="outlined">Cancel</Button>
+        <Button variant="contained">Save</Button>
+      </Box>
+    </Box>
+  );
+}
+```
+
+## Login Form
+
+```tsx
+import { useState } from 'react';
+import {
+  Box,
+  Paper,
+  Typography,
+  TextField,
+  Button,
+  Link,
+  Divider,
+  Alert,
+} from '@wso2/oxygen-ui';
+
+function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      // Login logic here
+      await login(email, password);
+    } catch (err) {
+      setError('Invalid credentials');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bgcolor: 'background.default',
+      }}
+    >
+      <Paper sx={{ p: 4, maxWidth: 400, width: '100%' }}>
+        <Typography variant="h5" gutterBottom align="center">
+          Sign In
+        </Typography>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {error}
+          </Alert>
+        )}
+
+        <Box component="form" onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            margin="normal"
+            required
+          />
+
+          <TextField
+            fullWidth
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            margin="normal"
+            required
+          />
+
+          <Button
+            fullWidth
+            type="submit"
+            variant="contained"
+            disabled={loading}
+            sx={{ mt: 3, mb: 2 }}
+          >
+            {loading ? 'Signing in...' : 'Sign In'}
+          </Button>
+
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Link href="/forgot-password" variant="body2">
+              Forgot password?
+            </Link>
+            <Link href="/register" variant="body2">
+              Create account
+            </Link>
+          </Box>
+        </Box>
+      </Paper>
+    </Box>
+  );
+}
+```
+
+## Multi-Step Wizard
+
+```tsx
+import { useState } from 'react';
+import {
+  Box,
+  Paper,
+  Stepper,
+  Step,
+  StepLabel,
+  Button,
+  Typography,
+  TextField,
+} from '@wso2/oxygen-ui';
+
+const steps = ['Account', 'Profile', 'Review'];
+
+function RegistrationWizard() {
+  const [activeStep, setActiveStep] = useState(0);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    name: '',
+    company: '',
+  });
+
+  const handleNext = () => setActiveStep((prev) => prev + 1);
+  const handleBack = () => setActiveStep((prev) => prev - 1);
+
+  const handleSubmit = () => {
+    console.log('Form submitted:', formData);
+  };
+
+  const renderStepContent = (step: number) => {
+    switch (step) {
+      case 0:
+        return (
+          <>
+            <TextField
+              fullWidth
+              label="Email"
+              type="email"
+              value={formData.email}
+              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              margin="normal"
+            />
+            <TextField
+              fullWidth
+              label="Password"
+              type="password"
+              value={formData.password}
+              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              margin="normal"
+            />
+          </>
+        );
+      case 1:
+        return (
+          <>
+            <TextField
+              fullWidth
+              label="Full Name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              margin="normal"
+            />
+            <TextField
+              fullWidth
+              label="Company"
+              value={formData.company}
+              onChange={(e) => setFormData({ ...formData, company: e.target.value })}
+              margin="normal"
+            />
+          </>
+        );
+      case 2:
+        return (
+          <Box>
+            <Typography variant="body1" gutterBottom>
+              <strong>Email:</strong> {formData.email}
+            </Typography>
+            <Typography variant="body1" gutterBottom>
+              <strong>Name:</strong> {formData.name}
+            </Typography>
+            <Typography variant="body1" gutterBottom>
+              <strong>Company:</strong> {formData.company}
+            </Typography>
+          </Box>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Paper sx={{ p: 4, maxWidth: 600, mx: 'auto' }}>
+      <Stepper activeStep={activeStep} sx={{ mb: 4 }}>
+        {steps.map((label) => (
+          <Step key={label}>
+            <StepLabel>{label}</StepLabel>
+          </Step>
+        ))}
+      </Stepper>
+
+      <Box sx={{ minHeight: 200 }}>{renderStepContent(activeStep)}</Box>
+
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 4 }}>
+        <Button disabled={activeStep === 0} onClick={handleBack}>
+          Back
+        </Button>
+        {activeStep === steps.length - 1 ? (
+          <Button variant="contained" onClick={handleSubmit}>
+            Submit
+          </Button>
+        ) : (
+          <Button variant="contained" onClick={handleNext}>
+            Next
+          </Button>
+        )}
+      </Box>
+    </Paper>
+  );
+}
+```
+
+## Form with Select and Autocomplete
+
+```tsx
+import { useState } from 'react';
+import { Box, TextField, Button, MenuItem, Autocomplete } from '@wso2/oxygen-ui';
+
+const countries = [
+  { label: 'United States', code: 'US' },
+  { label: 'United Kingdom', code: 'UK' },
+  { label: 'Canada', code: 'CA' },
+  // ...more
+];
+
+function AddressForm() {
+  const [country, setCountry] = useState<typeof countries[0] | null>(null);
+  const [state, setState] = useState('');
+
+  return (
+    <Box sx={{ maxWidth: 400 }}>
+      <Autocomplete
+        options={countries}
+        value={country}
+        onChange={(_, newValue) => setCountry(newValue)}
+        renderInput={(params) => (
+          <TextField {...params} label="Country" margin="normal" />
+        )}
+      />
+
+      <TextField
+        fullWidth
+        select
+        label="State"
+        value={state}
+        onChange={(e) => setState(e.target.value)}
+        margin="normal"
+      >
+        <MenuItem value="ca">California</MenuItem>
+        <MenuItem value="ny">New York</MenuItem>
+        <MenuItem value="tx">Texas</MenuItem>
+      </TextField>
+
+      <TextField fullWidth label="City" margin="normal" />
+      <TextField fullWidth label="Address" margin="normal" multiline rows={2} />
+      <TextField fullWidth label="Zip Code" margin="normal" />
+
+      <Button variant="contained" sx={{ mt: 2 }}>
+        Save Address
+      </Button>
+    </Box>
+  );
+}
+```
diff --git a/portals/api-control-plane/.claude/skills/oxygen-layout/SKILL.md b/portals/api-control-plane/.claude/skills/oxygen-layout/SKILL.md
new file mode 100644
index 0000000000..bdf8fce9f1
--- /dev/null
+++ b/portals/api-control-plane/.claude/skills/oxygen-layout/SKILL.md
@@ -0,0 +1,233 @@
+---
+name: oxygen-layout
+description: Generate application layouts with AppShell, Header, and Sidebar. Use when creating app shells, navigation structures, or dashboard layouts.
+---
+
+# Generate Oxygen UI Layout
+
+## Instructions
+
+1. Read `.claude/oxygen-ui/patterns.md` for layout patterns
+2. Use `AppShell` as the main wrapper
+3. Configure `Header` with navigation
+4. Set up `Sidebar` with menu items
+
+## Critical Rules
+
+- Always use `OxygenUIThemeProvider` at the root
+- Use compound component pattern for `AppShell`, `Header`, `Sidebar`
+- Import icons from `@wso2/oxygen-ui-icons-react`
+- Use theme tokens for all styling
+
+## Complete App Shell Layout
+
+```tsx
+import { useState } from 'react';
+import {
+  OxygenUIThemeProvider,
+  OxygenTheme,
+  AppShell,
+  Header,
+  Sidebar,
+  Footer,
+  Box,
+  ColorSchemeToggle,
+  UserMenu,
+} from '@wso2/oxygen-ui';
+import {
+  HomeIcon,
+  DashboardIcon,
+  SettingsIcon,
+  UsersIcon,
+  FileIcon,
+} from '@wso2/oxygen-ui-icons-react';
+
+function App() {
+  const [collapsed, setCollapsed] = useState(false);
+  const [activeItem, setActiveItem] = useState('home');
+
+  return (
+    <OxygenUIThemeProvider theme={OxygenTheme}>
+      <AppShell>
+        <AppShell.Navbar>
+          <Header>
+            <Header.Toggle
+              collapsed={collapsed}
+              onToggle={() => setCollapsed(!collapsed)}
+            />
+            <Header.Brand>
+              <Header.BrandLogo>
+                <img src="/logo.svg" alt="Logo" height={32} />
+              </Header.BrandLogo>
+              <Header.BrandTitle>My Application</Header.BrandTitle>
+            </Header.Brand>
+            <Header.Spacer />
+            <Header.Actions>
+              <ColorSchemeToggle />
+              <UserMenu
+                user={{ name: 'John Doe', email: 'john@example.com' }}
+                onSignOut={() => console.log('Sign out')}
+              />
+            </Header.Actions>
+          </Header>
+        </AppShell.Navbar>
+
+        <AppShell.Sidebar>
+          <Sidebar
+            collapsed={collapsed}
+            activeItem={activeItem}
+            onSelect={setActiveItem}
+          >
+            <Sidebar.Nav>
+              <Sidebar.Category>
+                <Sidebar.CategoryLabel>Main</Sidebar.CategoryLabel>
+                <Sidebar.Item id="home">
+                  <Sidebar.ItemIcon><HomeIcon size={20} /></Sidebar.ItemIcon>
+                  <Sidebar.ItemLabel>Home</Sidebar.ItemLabel>
+                </Sidebar.Item>
+                <Sidebar.Item id="dashboard">
+                  <Sidebar.ItemIcon><DashboardIcon size={20} /></Sidebar.ItemIcon>
+                  <Sidebar.ItemLabel>Dashboard</Sidebar.ItemLabel>
+                </Sidebar.Item>
+              </Sidebar.Category>
+
+              <Sidebar.Category>
+                <Sidebar.CategoryLabel>Management</Sidebar.CategoryLabel>
+                <Sidebar.Item id="users">
+                  <Sidebar.ItemIcon><UsersIcon size={20} /></Sidebar.ItemIcon>
+                  <Sidebar.ItemLabel>Users</Sidebar.ItemLabel>
+                  <Sidebar.ItemBadge>12</Sidebar.ItemBadge>
+                </Sidebar.Item>
+                <Sidebar.Item id="files">
+                  <Sidebar.ItemIcon><FileIcon size={20} /></Sidebar.ItemIcon>
+                  <Sidebar.ItemLabel>Files</Sidebar.ItemLabel>
+                </Sidebar.Item>
+              </Sidebar.Category>
+            </Sidebar.Nav>
+
+            <Sidebar.Footer>
+              <Sidebar.Item id="settings">
+                <Sidebar.ItemIcon><SettingsIcon size={20} /></Sidebar.ItemIcon>
+                <Sidebar.ItemLabel>Settings</Sidebar.ItemLabel>
+              </Sidebar.Item>
+            </Sidebar.Footer>
+          </Sidebar>
+        </AppShell.Sidebar>
+
+        <AppShell.Main>
+          <Box sx={{ p: 3 }}>
+            {/* Page content goes here */}
+            <h1>Welcome</h1>
+          </Box>
+        </AppShell.Main>
+
+        <AppShell.Footer>
+          <Footer companyName="WSO2 LLC" />
+        </AppShell.Footer>
+      </AppShell>
+    </OxygenUIThemeProvider>
+  );
+}
+
+export default App;
+```
+
+## Header with Context Switchers
+
+```tsx
+<Header>
+  <Header.Toggle collapsed={collapsed} onToggle={toggleSidebar} />
+  <Header.Brand>
+    <Header.BrandLogo><Logo /></Header.BrandLogo>
+    <Header.BrandTitle>App Name</Header.BrandTitle>
+  </Header.Brand>
+
+  <Header.Switchers>
+    <OrganizationSwitcher />
+    <ProjectSwitcher />
+  </Header.Switchers>
+
+  <Header.Spacer />
+
+  <Header.Actions>
+    <SearchBar />
+    <NotificationButton />
+    <ColorSchemeToggle />
+    <UserMenu user={user} />
+  </Header.Actions>
+</Header>
+```
+
+## Minimal Header (No Switchers)
+
+```tsx
+<Header minimal>
+  <Header.Brand>
+    <Header.BrandTitle>Simple App</Header.BrandTitle>
+  </Header.Brand>
+  <Header.Spacer />
+  <Header.Actions>
+    <ColorSchemeToggle />
+  </Header.Actions>
+</Header>
+```
+
+## Sidebar with Nested Items
+
+```tsx
+<Sidebar
+  collapsed={collapsed}
+  activeItem={activeItem}
+  expandedMenus={expandedMenus}
+  onSelect={setActiveItem}
+  onToggleExpand={toggleExpand}
+>
+  <Sidebar.Nav>
+    <Sidebar.Item id="parent" hasChildren>
+      <Sidebar.ItemIcon><FolderIcon size={20} /></Sidebar.ItemIcon>
+      <Sidebar.ItemLabel>Parent Item</Sidebar.ItemLabel>
+    </Sidebar.Item>
+
+    {expandedMenus['parent'] && (
+      <>
+        <Sidebar.Item id="child1" nested>
+          <Sidebar.ItemLabel>Child 1</Sidebar.ItemLabel>
+        </Sidebar.Item>
+        <Sidebar.Item id="child2" nested>
+          <Sidebar.ItemLabel>Child 2</Sidebar.ItemLabel>
+        </Sidebar.Item>
+      </>
+    )}
+  </Sidebar.Nav>
+</Sidebar>
+```
+
+## Dashboard Layout with Stats
+
+```tsx
+import { Grid, Paper, Typography, Box } from '@wso2/oxygen-ui';
+
+function DashboardContent() {
+  return (
+    <Box sx={{ p: 3 }}>
+      <Typography variant="h4" gutterBottom>Dashboard</Typography>
+
+      <Grid container spacing={3}>
+        <Grid item xs={12} sm={6} md={3}>
+          <Paper sx={{ p: 3 }}>
+            <Typography color="text.secondary" variant="body2">Total Users</Typography>
+            <Typography variant="h4" fontWeight="bold">12,345</Typography>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} sm={6} md={3}>
+          <Paper sx={{ p: 3 }}>
+            <Typography color="text.secondary" variant="body2">Revenue</Typography>
+            <Typography variant="h4" fontWeight="bold">$45,678</Typography>
+          </Paper>
+        </Grid>
+        {/* More stats... */}
+      </Grid>
+    </Box>
+  );
+}
+```
diff --git a/portals/api-control-plane/.claude/skills/oxygen-migrate/SKILL.md b/portals/api-control-plane/.claude/skills/oxygen-migrate/SKILL.md
new file mode 100644
index 0000000000..ae093fb3f2
--- /dev/null
+++ b/portals/api-control-plane/.claude/skills/oxygen-migrate/SKILL.md
@@ -0,0 +1,280 @@
+---
+name: oxygen-migrate
+description: Migrate existing MUI code to Oxygen UI patterns. Use when converting @mui/material imports, replacing MUI components, or updating to Oxygen UI conventions.
+---
+
+# Migrate to Oxygen UI
+
+## Instructions
+
+1. Read `.claude/oxygen-ui/migration.md` for full guide
+2. Update imports from `@mui/*` to `@wso2/oxygen-ui`
+3. Replace `lucide-react` icons with `@wso2/oxygen-ui-icons-react`
+4. Add `OxygenUIThemeProvider` wrapper
+
+## Migration Checklist
+
+- [ ] Replace `@mui/material` imports with `@wso2/oxygen-ui`
+- [ ] Replace `@mui/icons-material` or `lucide-react` with `@wso2/oxygen-ui-icons-react`
+- [ ] Update MUI X imports to use namespaced exports
+- [ ] Wrap root with `OxygenUIThemeProvider`
+- [ ] Replace `ThemeProvider` with `OxygenUIThemeProvider`
+- [ ] Update custom theme to use `OxygenThemeBase`
+
+## Import Migration
+
+### MUI Components
+
+**Before:**
+```tsx
+import { Box, Stack, Button } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+```
+
+**After:**
+```tsx
+import { Box, Stack, Button, Typography, styled } from '@wso2/oxygen-ui';
+```
+
+### Icons
+
+**Before (MUI Icons):**
+```tsx
+import SettingsIcon from '@mui/icons-material/Settings';
+import HomeIcon from '@mui/icons-material/Home';
+import DeleteIcon from '@mui/icons-material/Delete';
+```
+
+**Before (Lucide React):**
+```tsx
+import { Settings, Home, Trash2 } from 'lucide-react';
+```
+
+**After:**
+```tsx
+import { SettingsIcon, HomeIcon, TrashIcon } from '@wso2/oxygen-ui-icons-react';
+```
+
+### MUI X Components
+
+**Before:**
+```tsx
+import { DataGrid } from '@mui/x-data-grid';
+import { DatePicker } from '@mui/x-date-pickers';
+import { BarChart } from '@mui/x-charts';
+import { SimpleTreeView } from '@mui/x-tree-view';
+```
+
+**After:**
+```tsx
+import { DataGrid, DatePickers, TreeView } from '@wso2/oxygen-ui';
+
+// Use as namespaces
+<DataGrid.DataGrid rows={rows} columns={columns} />
+<DatePickers.DatePicker value={date} onChange={setDate} />
+<TreeView.SimpleTreeView items={items} />
+
+// For Charts, use the separate package
+import { BarChart } from '@wso2/oxygen-ui-charts-react';
+<BarChart series={series} />
+```
+
+## Theme Provider Migration
+
+**Before:**
+```tsx
+import { ThemeProvider, createTheme } from '@mui/material';
+
+const theme = createTheme({
+  palette: {
+    primary: { main: '#1976d2' },
+  },
+});
+
+<ThemeProvider theme={theme}>
+  <App />
+</ThemeProvider>
+```
+
+**After:**
+```tsx
+import { OxygenUIThemeProvider, OxygenTheme } from '@wso2/oxygen-ui';
+
+// Use default theme
+<OxygenUIThemeProvider theme={OxygenTheme}>
+  <App />
+</OxygenUIThemeProvider>
+
+// Or with custom theme
+import { extendTheme } from '@mui/material/styles';
+import { OxygenThemeBase } from '@wso2/oxygen-ui';
+
+const customTheme = extendTheme({
+  ...OxygenThemeBase,
+  colorSchemes: {
+    light: {
+      palette: { primary: { main: '#1976d2' } },
+    },
+  },
+});
+
+<OxygenUIThemeProvider theme={customTheme}>
+  <App />
+</OxygenUIThemeProvider>
+```
+
+## Layout Migration
+
+**Before (Custom Layout):**
+```tsx
+import { AppBar, Toolbar, Drawer, Box } from '@mui/material';
+
+<Box sx={{ display: 'flex' }}>
+  <AppBar position="fixed">
+    <Toolbar>
+      <Typography>My App</Typography>
+    </Toolbar>
+  </AppBar>
+  <Drawer variant="permanent">
+    {/* Menu items */}
+  </Drawer>
+  <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+    {/* Content */}
+  </Box>
+</Box>
+```
+
+**After (Oxygen AppShell):**
+```tsx
+import { AppShell, Header, Sidebar, Footer } from '@wso2/oxygen-ui';
+
+<AppShell>
+  <AppShell.Navbar>
+    <Header>
+      <Header.Brand>
+        <Header.BrandTitle>My App</Header.BrandTitle>
+      </Header.Brand>
+    </Header>
+  </AppShell.Navbar>
+
+  <AppShell.Sidebar>
+    <Sidebar>
+      <Sidebar.Nav>
+        {/* Menu items */}
+      </Sidebar.Nav>
+    </Sidebar>
+  </AppShell.Sidebar>
+
+  <AppShell.Main>
+    {/* Content */}
+  </AppShell.Main>
+
+  <AppShell.Footer>
+    <Footer companyName="WSO2 LLC" />
+  </AppShell.Footer>
+</AppShell>
+```
+
+## Table Migration
+
+**Before (MUI Table):**
+```tsx
+import {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+  Paper,
+} from '@mui/material';
+
+<Paper>
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell>Name</TableCell>
+        <TableCell>Status</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {data.map((row) => (
+        <TableRow key={row.id}>
+          <TableCell>{row.name}</TableCell>
+          <TableCell>{row.status}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+</Paper>
+```
+
+**After (Oxygen ListingTable):**
+```tsx
+import { ListingTable } from '@wso2/oxygen-ui';
+
+<ListingTable.Container>
+  <ListingTable.Toolbar showSearch />
+  <ListingTable>
+    <ListingTable.Head>
+      <ListingTable.Row>
+        <ListingTable.Cell>Name</ListingTable.Cell>
+        <ListingTable.Cell>Status</ListingTable.Cell>
+      </ListingTable.Row>
+    </ListingTable.Head>
+    <ListingTable.Body>
+      {data.map((row) => (
+        <ListingTable.Row key={row.id}>
+          <ListingTable.Cell>{row.name}</ListingTable.Cell>
+          <ListingTable.Cell>{row.status}</ListingTable.Cell>
+        </ListingTable.Row>
+      ))}
+    </ListingTable.Body>
+    <ListingTable.Footer />
+  </ListingTable>
+</ListingTable.Container>
+```
+
+## Color Mode Migration
+
+**Before:**
+```tsx
+import { useColorScheme } from '@mui/material';
+
+const { mode, setMode } = useColorScheme();
+```
+
+**After:**
+```tsx
+import { ColorSchemeToggle, useTheme } from '@wso2/oxygen-ui';
+
+// Simple toggle component
+<ColorSchemeToggle />
+
+// Check current mode
+const theme = useTheme();
+const isDark = theme.palette.mode === 'dark';
+```
+
+## ESLint Plugin Setup
+
+After migration, add the ESLint plugin to prevent regressions:
+
+```bash
+pnpm add -D @wso2/eslint-plugin-oxygen-ui
+```
+
+```js
+// eslint.config.js
+import oxygenUIPlugin from '@wso2/eslint-plugin-oxygen-ui';
+
+export default [
+  oxygenUIPlugin.configs.recommended,
+  // ... other configs
+];
+```
+
+This will:
+- Error on direct `@mui/material` imports
+- Error on direct `lucide-react` imports
+- Auto-fix imports with `eslint --fix`
diff --git a/portals/api-control-plane/CLAUDE.md b/portals/api-control-plane/CLAUDE.md
new file mode 100644
index 0000000000..23c155d894
--- /dev/null
+++ b/portals/api-control-plane/CLAUDE.md
@@ -0,0 +1,5 @@
+# Project Guidelines
+
+## Oxygen UI
+
+For Oxygen UI component guidelines and patterns, see [.claude/oxygen-ui/CLAUDE.md](.claude/oxygen-ui/CLAUDE.md).
diff --git a/portals/api-control-plane/package-lock.json b/portals/api-control-plane/package-lock.json
index b8e5b3c40f..3da7a22de3 100644
--- a/portals/api-control-plane/package-lock.json
+++ b/portals/api-control-plane/package-lock.json
@@ -9,9 +9,14 @@
       "version": "0.1.0",
       "dependencies": {
         "@babel/runtime-corejs3": "7.29.7",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@mui/material": "^9.3.1",
+        "@mui/x-data-grid": "^9.11.0",
+        "@mui/x-date-pickers": "^9.11.0",
         "@tanstack/react-query": "5.101.0",
-        "@wso2/oxygen-ui": "0.11.0",
-        "@wso2/oxygen-ui-icons-react": "0.11.0",
+        "@wso2/oxygen-ui": "^0.13.1",
+        "@wso2/oxygen-ui-icons-react": "^0.13.1",
         "axios": "1.19.0",
         "js-yaml": "4.1.0",
         "react": "19.2.3",
@@ -354,6 +359,9 @@
     },
     "node_modules/@base-ui-components/utils": {
       "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@base-ui-components/utils/-/utils-0.1.2.tgz",
+      "integrity": "sha512-aEitDGpMsYO2qnSpYOwZNykn9Rzn2ioyEVk2fyDRH7t+TIHVKpp9CeV7SPTq43M9mMSDxQ+7UeZJVkrj2dCVIQ==",
+      "deprecated": "Package was renamed to @base-ui/utils",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.28.4",
@@ -372,6 +380,28 @@
         }
       }
     },
+    "node_modules/@base-ui/utils": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.3.2.tgz",
+      "integrity": "sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@floating-ui/utils": "^0.2.12",
+        "reselect": "^5.2.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17 || ^18 || ^19",
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@bcoe/v8-coverage": {
       "version": "0.2.3",
       "dev": true,
@@ -531,6 +561,8 @@
     },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
@@ -548,10 +580,14 @@
     },
     "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
       "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
     "node_modules/@emotion/cache": {
       "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
       "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.9.0",
@@ -563,10 +599,14 @@
     },
     "node_modules/@emotion/hash": {
       "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
       "license": "MIT"
     },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
+      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
       "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.9.0"
@@ -574,10 +614,14 @@
     },
     "node_modules/@emotion/memoize": {
       "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
       "license": "MIT"
     },
     "node_modules/@emotion/react": {
       "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
@@ -600,6 +644,8 @@
     },
     "node_modules/@emotion/serialize": {
       "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
       "license": "MIT",
       "dependencies": {
         "@emotion/hash": "^0.9.2",
@@ -611,10 +657,14 @@
     },
     "node_modules/@emotion/sheet": {
       "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
       "license": "MIT"
     },
     "node_modules/@emotion/styled": {
       "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
+      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
@@ -636,10 +686,14 @@
     },
     "node_modules/@emotion/unitless": {
       "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
       "license": "MIT"
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
       "license": "MIT",
       "peerDependencies": {
         "react": ">=16.8.0"
@@ -647,10 +701,14 @@
     },
     "node_modules/@emotion/utils": {
       "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
       "license": "MIT"
     },
     "node_modules/@emotion/weak-memoize": {
       "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
       "license": "MIT"
     },
     "node_modules/@esbuild/aix-ppc64": {
@@ -1194,10 +1252,14 @@
     },
     "node_modules/@floating-ui/utils": {
       "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
       "license": "MIT"
     },
     "node_modules/@fontsource-variable/inter": {
       "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
@@ -1811,7 +1873,9 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "7.3.11",
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.3.1.tgz",
+      "integrity": "sha512-IAyAFNQbT7hysJ9HXphiOmWJF7G1OglzHanqCgvQgH9LA2ydxtmaTBDbcBqw6euZesyShiwvpvbnYO1GY1AyXQ==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -1819,20 +1883,22 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "7.3.4",
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.3.1.tgz",
+      "integrity": "sha512-NahAEGIXqS1K0bA4th1jeFxBguS59NOcLbMA0vU+fSaPWKjtwGBGGHeTwlc9PSmzMjOZKceeFWESB8fVHr31hA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@mui/core-downloads-tracker": "^7.3.4",
-        "@mui/system": "^7.3.3",
-        "@mui/types": "^7.4.7",
-        "@mui/utils": "^7.3.3",
+        "@babel/runtime": "^7.29.7",
+        "@mui/core-downloads-tracker": "^9.3.1",
+        "@mui/system": "^9.3.0",
+        "@mui/types": "^9.3.0",
+        "@mui/utils": "^9.3.0",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.12",
         "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
+        "csstype": "^3.2.3",
         "prop-types": "^15.8.1",
-        "react-is": "^19.1.1",
+        "react-is": "^19.2.8",
         "react-transition-group": "^4.4.5"
       },
       "engines": {
@@ -1845,7 +1911,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^7.3.3",
+        "@mui/material-pigment-css": "^9.3.0",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1865,40 +1931,14 @@
         }
       }
     },
-    "node_modules/@mui/material/node_modules/@mui/utils": {
-      "version": "7.3.11",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.6",
-        "@mui/types": "^7.4.12",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.3"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/private-theming": {
-      "version": "7.3.11",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.3.0.tgz",
+      "integrity": "sha512-ERvqk5pejf9aRnQcDILSWGtFmsEMiVxlQ4+xsVCjsEvmK0fV9BiVP/cQwAF5dwyDFbve4lTrlcgeFEecVzTNiA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
-        "@mui/utils": "^7.3.11",
+        "@babel/runtime": "^7.29.7",
+        "@mui/utils": "^9.3.0",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1918,39 +1958,13 @@
         }
       }
     },
-    "node_modules/@mui/private-theming/node_modules/@mui/utils": {
-      "version": "7.3.11",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.6",
-        "@mui/types": "^7.4.12",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.3"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/styled-engine": {
-      "version": "7.3.10",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.3.0.tgz",
+      "integrity": "sha512-x9+KYxhjoHYZ4nioxdKnvQWdw0RScbhoZfQ4tv3Db742683U3wlYSp6zV6Us78dMFnKnyTrPTkQKyutp14gnKA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
+        "@babel/runtime": "^7.29.7",
         "@emotion/cache": "^11.14.0",
         "@emotion/serialize": "^1.3.3",
         "@emotion/sheet": "^1.4.0",
@@ -1979,14 +1993,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "7.3.11",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.3.0.tgz",
+      "integrity": "sha512-0l4LqHJxZj65xSrioniGsxm7VNoGXonPo203oZjhBUvIDPeBqRTb7Mqc45Qxs6sO6WGR7WE/9cJ6lb4lkvHkjg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
-        "@mui/private-theming": "^7.3.11",
-        "@mui/styled-engine": "^7.3.10",
-        "@mui/types": "^7.4.12",
-        "@mui/utils": "^7.3.11",
+        "@babel/runtime": "^7.29.7",
+        "@mui/private-theming": "^9.3.0",
+        "@mui/styled-engine": "^9.3.0",
+        "@mui/types": "^9.3.0",
+        "@mui/utils": "^9.3.0",
         "clsx": "^2.1.1",
         "csstype": "^3.2.3",
         "prop-types": "^15.8.1"
@@ -2016,39 +2032,13 @@
         }
       }
     },
-    "node_modules/@mui/system/node_modules/@mui/utils": {
-      "version": "7.3.11",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.6",
-        "@mui/types": "^7.4.12",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.3"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/types": {
-      "version": "7.4.12",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.3.0.tgz",
+      "integrity": "sha512-2JSxyfpEFWNUB2vKs/T1BvkfyNisMHWph8bLMj8T0uHwmLl/0qfAwQkfwMT6kxLXN9uIum9AEbECXU8er3amIg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6"
+        "@babel/runtime": "^7.29.7"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2060,15 +2050,17 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "9.0.0",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.3.0.tgz",
+      "integrity": "sha512-2HZdHwWJ6eB+7lVGSOHsByGw8jeRulT4g0NZ608Wb8Q57DE2jbNqrWPFuJsvkQQiBiTmlpvQL3i+/62zsiPrkw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.29.2",
-        "@mui/types": "^9.0.0",
+        "@babel/runtime": "^7.29.7",
+        "@mui/types": "^9.3.0",
         "@types/prop-types": "^15.7.15",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^19.2.4"
+        "react-is": "^19.2.8"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2087,29 +2079,17 @@
         }
       }
     },
-    "node_modules/@mui/utils/node_modules/@mui/types": {
-      "version": "9.1.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.29.2"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/x-data-grid": {
-      "version": "8.16.0",
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-9.11.0.tgz",
+      "integrity": "sha512-p/KHQSMOl+gV2lfkUXUSeNLnfXiQ3pUqJQ9oHLvNPdvauw87apx0o9iPiohCyw7WOeaqtosNLWCsbBkCy1YQpQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@mui/utils": "^7.3.3",
-        "@mui/x-internals": "8.16.0",
-        "@mui/x-virtualizer": "0.2.6",
+        "@babel/runtime": "^7.29.7",
+        "@base-ui/utils": "^0.3.1",
+        "@mui/utils": "^9.3.0",
+        "@mui/x-internals": "^9.11.0",
+        "@mui/x-virtualizer": "0.6.3",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
         "use-sync-external-store": "^1.6.0"
@@ -2124,8 +2104,8 @@
       "peerDependencies": {
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
-        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/material": "^7.3.0 || ^9.0.0",
+        "@mui/system": "^7.3.0 || ^9.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -2138,16 +2118,17 @@
         }
       }
     },
-    "node_modules/@mui/x-data-grid/node_modules/@mui/utils": {
-      "version": "7.3.11",
+    "node_modules/@mui/x-data-grid/node_modules/@mui/x-internals": {
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-9.11.0.tgz",
+      "integrity": "sha512-JjKe9k1+gVWNPwMTZLNSc92eVmoZqP5Xq3Ui6mJkstotUrbWIZC0o9+4AfTR1lYqWwnKmqm+VtLLVCa7MEBXWQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
-        "@mui/types": "^7.4.12",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.3"
+        "@babel/runtime": "^7.29.7",
+        "@base-ui/utils": "^0.3.1",
+        "@mui/utils": "^9.3.0",
+        "reselect": "^5.2.0",
+        "use-sync-external-store": "^1.6.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2157,22 +2138,41 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-data-grid/node_modules/@mui/x-virtualizer": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@mui/x-virtualizer/-/x-virtualizer-0.6.3.tgz",
+      "integrity": "sha512-12EEt7/qG7/6YGmzjcqDRzDkYnTSELoQxOrTf30XLWxhIdkYn1uygZzSPG+fg811ZzbF301HodEVY05GMLCQmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7",
+        "@base-ui/utils": "^0.3.1",
+        "@mui/utils": "^9.3.0",
+        "@mui/x-internals": "^9.11.0"
       },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/@mui/x-date-pickers": {
-      "version": "8.16.0",
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-9.11.0.tgz",
+      "integrity": "sha512-3vLmkn1wG+hNBaGobnk/9R8APCRhOiAXBTC78m7wZ2OWZ2NoMqi+O09HwTGlIgK6mScZZCeCQTSj5phNLrK1hw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@mui/utils": "^7.3.3",
-        "@mui/x-internals": "8.16.0",
+        "@babel/runtime": "^7.29.7",
+        "@mui/utils": "^9.3.0",
+        "@mui/x-internals": "^9.11.0",
         "@types/react-transition-group": "^4.4.12",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
@@ -2188,8 +2188,8 @@
       "peerDependencies": {
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
-        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/material": "^7.3.0 || ^9.0.0",
+        "@mui/system": "^7.3.0 || ^9.0.0",
         "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
         "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
         "dayjs": "^1.10.7",
@@ -2230,16 +2230,17 @@
         }
       }
     },
-    "node_modules/@mui/x-date-pickers/node_modules/@mui/utils": {
-      "version": "7.3.11",
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/x-internals": {
+      "version": "9.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-9.11.0.tgz",
+      "integrity": "sha512-JjKe9k1+gVWNPwMTZLNSc92eVmoZqP5Xq3Ui6mJkstotUrbWIZC0o9+4AfTR1lYqWwnKmqm+VtLLVCa7MEBXWQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.6",
-        "@mui/types": "^7.4.12",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.3"
+        "@babel/runtime": "^7.29.7",
+        "@base-ui/utils": "^0.3.1",
+        "@mui/utils": "^9.3.0",
+        "reselect": "^5.2.0",
+        "use-sync-external-store": "^1.6.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2249,17 +2250,13 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
       }
     },
     "node_modules/@mui/x-internals": {
       "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.16.0.tgz",
+      "integrity": "sha512-JR53WOFqmQYQzurOpB0H91K7/9uMcte1ooxHxTLGB+97PgB+rKY6siRWvUALGS56XyPV+1a2ALI33hd2E7+Rgg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.28.4",
@@ -2278,8 +2275,27 @@
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@mui/x-internals/node_modules/@mui/types": {
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/x-internals/node_modules/@mui/utils": {
       "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.28.6",
@@ -2306,18 +2322,15 @@
         }
       }
     },
-    "node_modules/@mui/x-tree-view": {
-      "version": "8.14.0",
+    "node_modules/@mui/x-virtualizer": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/x-virtualizer/-/x-virtualizer-0.2.6.tgz",
+      "integrity": "sha512-t45EHhD9kStSwIYMkqYYQIFbZNVQws9LRANktf0e/+j+MxsRTFk41r0rgiazMSOSugJlCuSh/H8xUUuMCZdtow==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.28.4",
-        "@base-ui-components/utils": "0.1.2",
         "@mui/utils": "^7.3.3",
-        "@mui/x-internals": "8.14.0",
-        "@types/react-transition-group": "^4.4.12",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-transition-group": "^4.4.5"
+        "@mui/x-internals": "8.16.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2327,24 +2340,31 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@emotion/react": "^11.9.0",
-        "@emotion/styled": "^11.8.1",
-        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@mui/x-virtualizer/node_modules/@mui/types": {
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
-        "@emotion/react": {
-          "optional": true
-        },
-        "@emotion/styled": {
+        "@types/react": {
           "optional": true
         }
       }
     },
-    "node_modules/@mui/x-tree-view/node_modules/@mui/utils": {
+    "node_modules/@mui/x-virtualizer/node_modules/@mui/utils": {
       "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.28.6",
@@ -2371,87 +2391,19 @@
         }
       }
     },
-    "node_modules/@mui/x-tree-view/node_modules/@mui/x-internals": {
-      "version": "8.14.0",
+    "node_modules/@nestjs/common": {
+      "version": "8.4.4",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@mui/utils": "^7.3.3",
-        "reselect": "^5.1.1",
-        "use-sync-external-store": "^1.6.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
+        "axios": "0.26.1",
+        "iterare": "1.2.1",
+        "tslib": "2.3.1",
+        "uuid": "8.3.2"
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@mui/x-virtualizer": {
-      "version": "0.2.6",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.4",
-        "@mui/utils": "^7.3.3",
-        "@mui/x-internals": "8.16.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@mui/x-virtualizer/node_modules/@mui/utils": {
-      "version": "7.3.11",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.28.6",
-        "@mui/types": "^7.4.12",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.2.3"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@nestjs/common": {
-      "version": "8.4.4",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "axios": "0.26.1",
-        "iterare": "1.2.1",
-        "tslib": "2.3.1",
-        "uuid": "8.3.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/nest"
+        "url": "https://opencollective.com/nest"
       },
       "peerDependencies": {
         "cache-manager": "*",
@@ -2640,6 +2592,8 @@
     },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -3324,6 +3278,8 @@
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
       "license": "MIT"
     },
     "node_modules/@types/picomatch": {
@@ -3335,6 +3291,8 @@
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
@@ -3354,6 +3312,8 @@
     },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "*"
@@ -3763,9 +3723,12 @@
       }
     },
     "node_modules/@wso2/oxygen-ui": {
-      "version": "0.11.0",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/@wso2/oxygen-ui/-/oxygen-ui-0.13.1.tgz",
+      "integrity": "sha512-naLAZdIBBYS76Rx9cncLquyLZHrXxMym9CXO+W+CZn5YWnYQWxsE+0IIW03Ap/eF0JNX+d/AJVlENA/+WE9WoQ==",
       "license": "Apache-2.0",
       "dependencies": {
+        "@emotion/cache": "11.14.0",
         "@emotion/react": "11.14.0",
         "@emotion/styled": "11.14.1",
         "@fontsource-variable/inter": "5.2.8",
@@ -3787,7 +3750,9 @@
       }
     },
     "node_modules/@wso2/oxygen-ui-icons-react": {
-      "version": "0.11.0",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/@wso2/oxygen-ui-icons-react/-/oxygen-ui-icons-react-0.13.1.tgz",
+      "integrity": "sha512-F4TbWA/u9Ov1sSUhA7Ze7TREKuqAG0vDaeQvjeLGTuU2gNYFkQgKvvLDztAtIwxsyiN39Jb1KWf6q/RCncsq1Q==",
       "license": "Apache-2.0",
       "dependencies": {
         "lucide-react": "1.16.0"
@@ -3796,6 +3761,643 @@
         "react": "19.2.3"
       }
     },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/core-downloads-tracker": {
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.11.tgz",
+      "integrity": "sha512-a7I/b/nBTdXYz2cOSlEmkQ9WWE1x8FHpqMhFPp+Y1VPFxcOw91G5ELOHARQAGSPy5V+UCgJua6K/1x70bAtQPw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/material": {
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.4.tgz",
+      "integrity": "sha512-gEQL9pbJZZHT7lYJBKQCS723v1MGys2IFc94COXbUIyCTWa+qC77a7hUax4Yjd5ggEm35dk4AyYABpKKWC4MLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@mui/core-downloads-tracker": "^7.3.4",
+        "@mui/system": "^7.3.3",
+        "@mui/types": "^7.4.7",
+        "@mui/utils": "^7.3.3",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.1.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^7.3.3",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/material/node_modules/@mui/types": {
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/material/node_modules/@mui/utils": {
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/types": "^7.4.12",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/private-theming": {
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.11.tgz",
+      "integrity": "sha512-9B+YKms0fRHbNrqp9tOT/DNbNnU5gyvJ1o3qAGXfq8GmZcbJnE3At9x07Zr/o0pkhzg4aDdwXVqe4+AcgtOCPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/utils": "^7.3.11",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/private-theming/node_modules/@mui/types": {
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/private-theming/node_modules/@mui/utils": {
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/types": "^7.4.12",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/styled-engine": {
+      "version": "7.3.10",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.10.tgz",
+      "integrity": "sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/system": {
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.11.tgz",
+      "integrity": "sha512-7izwGWdNawAKpBKcRlx7f2gFnAAjmASBWvMcyX4YYEeLOFsbfGRbUYGInvnAcUeql3rPxI7F9Ft4oY2OLRz44g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/private-theming": "^7.3.11",
+        "@mui/styled-engine": "^7.3.10",
+        "@mui/types": "^7.4.12",
+        "@mui/utils": "^7.3.11",
+        "clsx": "^2.1.1",
+        "csstype": "^3.2.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/system/node_modules/@mui/types": {
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/system/node_modules/@mui/utils": {
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/types": "^7.4.12",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/utils": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.0.0.tgz",
+      "integrity": "sha512-bQcqyg/gjULUqTuyUjSAFr6LQGLvtkNtDbJerAtoUn9kGZ0hg5QJiN1PLHMLbeFpe3te1831uq7GFl2ITokGdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "@mui/types": "^9.0.0",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-data-grid": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-8.16.0.tgz",
+      "integrity": "sha512-yJ+v+E1yI1HxrEUdOfgrUTCxobAFvotGggU6cy6MnM7c7/TPPg9d5mDzjzxb0imOCJ6WyiM/vtd5WKbY/5sUNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@mui/utils": "^7.3.3",
+        "@mui/x-internals": "8.16.0",
+        "@mui/x-virtualizer": "0.2.6",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-data-grid/node_modules/@mui/types": {
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-data-grid/node_modules/@mui/utils": {
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/types": "^7.4.12",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-date-pickers": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-8.16.0.tgz",
+      "integrity": "sha512-zvUoO9ImWiKRaOWvQVbB1vCa6aUQIX5GM0tJ+nAyNNIVV0VqpXz3CvkRR6ovBBFzIcChc7FXlqrMKcJ//EhePQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@mui/utils": "^7.3.3",
+        "@mui/x-internals": "8.16.0",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
+        "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2 || ^3.0.0",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-date-pickers/node_modules/@mui/types": {
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-date-pickers/node_modules/@mui/utils": {
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/types": "^7.4.12",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-tree-view": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-8.14.0.tgz",
+      "integrity": "sha512-LyB48R6ANSY/1nP84Qw1AEdEAjsMM6iCxPtCpUqO1GVJSFNP3Jy2xZuPkTO9Ilsd2Ud1p2sjy7AtQVpMRsDTyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@base-ui-components/utils": "0.1.2",
+        "@mui/utils": "^7.3.3",
+        "@mui/x-internals": "8.14.0",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-tree-view/node_modules/@mui/types": {
+      "version": "7.4.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz",
+      "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-tree-view/node_modules/@mui/utils": {
+      "version": "7.3.11",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz",
+      "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "@mui/types": "^7.4.12",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.2.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@wso2/oxygen-ui/node_modules/@mui/x-tree-view/node_modules/@mui/x-internals": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.14.0.tgz",
+      "integrity": "sha512-esYyl61nuuFXiN631TWuPh2tqdoyTdBI/4UXgwH3rytF8jiWvy6prPBPRHEH1nvW3fgw9FoBI48FlOO+yEI8xg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@mui/utils": "^7.3.3",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "2.0.0",
       "dev": true,
@@ -4006,6 +4608,8 @@
     },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -4373,6 +4977,8 @@
     },
     "node_modules/clsx": {
       "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -4577,6 +5183,8 @@
     },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
       "license": "MIT",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
@@ -4642,6 +5250,8 @@
     },
     "node_modules/date-fns": {
       "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -4740,6 +5350,8 @@
     },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.7",
@@ -4807,6 +5419,8 @@
     },
     "node_modules/error-ex": {
       "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
       "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
@@ -5409,6 +6023,8 @@
     },
     "node_modules/find-root": {
       "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
       "license": "MIT"
     },
     "node_modules/find-up": {
@@ -5739,6 +6355,8 @@
     },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "react-is": "^16.7.0"
@@ -5746,6 +6364,8 @@
     },
     "node_modules/hoist-non-react-statics/node_modules/react-is": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
     "node_modules/hono": {
@@ -5973,10 +6593,14 @@
     },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "license": "MIT"
     },
     "node_modules/is-core-module": {
       "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.3"
@@ -6215,6 +6839,8 @@
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
@@ -6306,6 +6932,8 @@
     },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -6349,6 +6977,8 @@
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -6372,6 +7002,8 @@
     },
     "node_modules/lucide-react": {
       "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.16.0.tgz",
+      "integrity": "sha512-dYwyPzb4MEKpGUmNYk3WKWPnMrHs3FKM+q94kAnJrcDIqqn1hq2xY8scaS2ovsOCM5D51ey2gaRG3PBb1vgoYQ==",
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -6965,6 +7597,8 @@
     },
     "node_modules/parse-json": {
       "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
@@ -7024,6 +7658,8 @@
     },
     "node_modules/path-parse": {
       "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -7053,6 +7689,8 @@
     },
     "node_modules/path-type": {
       "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7168,6 +7806,8 @@
     },
     "node_modules/prismjs": {
       "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -7175,6 +7815,8 @@
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -7184,6 +7826,8 @@
     },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
     "node_modules/proxy-addr": {
@@ -7332,6 +7976,8 @@
     },
     "node_modules/react-is": {
       "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.8.tgz",
+      "integrity": "sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==",
       "license": "MIT"
     },
     "node_modules/react-refresh": {
@@ -7389,6 +8035,8 @@
     },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/runtime": "^7.5.5",
@@ -7454,10 +8102,14 @@
     },
     "node_modules/reselect": {
       "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.2.0.tgz",
+      "integrity": "sha512-AgZ3UOZm3YndfrJ4OYjgrT7bmCm/1iqkjvEfH/oYjzh6PD2qw4QuT3jjnXIrpdt4MTpMXclMT3lXbmRY+XRakw==",
       "license": "MIT"
     },
     "node_modules/resolve": {
       "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -7845,6 +8497,8 @@
     },
     "node_modules/source-map": {
       "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -7967,6 +8621,8 @@
     },
     "node_modules/stylis": {
       "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
       "license": "MIT"
     },
     "node_modules/supports-color": {
@@ -7982,6 +8638,8 @@
     },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -8376,6 +9034,8 @@
     },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -8730,6 +9390,8 @@
     },
     "node_modules/yaml": {
       "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
       "license": "ISC",
       "engines": {
         "node": ">= 6"
diff --git a/portals/api-control-plane/package.json b/portals/api-control-plane/package.json
index e1f2c6cd62..3529f252b0 100644
--- a/portals/api-control-plane/package.json
+++ b/portals/api-control-plane/package.json
@@ -38,9 +38,14 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "7.29.7",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^9.3.1",
+    "@mui/x-data-grid": "^9.11.0",
+    "@mui/x-date-pickers": "^9.11.0",
     "@tanstack/react-query": "5.101.0",
-    "@wso2/oxygen-ui": "0.11.0",
-    "@wso2/oxygen-ui-icons-react": "0.11.0",
+    "@wso2/oxygen-ui": "^0.13.1",
+    "@wso2/oxygen-ui-icons-react": "^0.13.1",
     "axios": "1.19.0",
     "js-yaml": "4.1.0",
     "react": "19.2.3",
diff --git a/portals/api-control-plane/src/theme/AppThemeProvider.tsx b/portals/api-control-plane/src/theme/AppThemeProvider.tsx
new file mode 100644
index 0000000000..ed0223f696
--- /dev/null
+++ b/portals/api-control-plane/src/theme/AppThemeProvider.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// src/theme/AppThemeProvider.tsx
+import { PropsWithChildren } from 'react';
+import { OxygenUIThemeProvider, CssBaseline } from '@wso2/oxygen-ui';
+import { appEmotionCache } from './emotionCache';
+import { themeRegistry, INITIAL_THEME } from './themes';
+
+export function AppThemeProvider({ children }: PropsWithChildren) {
+  return (
+    <OxygenUIThemeProvider
+      themes={themeRegistry}
+      initialTheme={INITIAL_THEME}
+      emotionCache={appEmotionCache}
+    >
+      {/* Normalizes browser styles using theme tokens */}
+      <CssBaseline />
+      {children}
+    </OxygenUIThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/portals/api-control-plane/src/theme/emotionCache.ts b/portals/api-control-plane/src/theme/emotionCache.ts
new file mode 100644
index 0000000000..dfa827ff27
--- /dev/null
+++ b/portals/api-control-plane/src/theme/emotionCache.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// src/theme/emotionCache.ts
+import { createEmotionCache } from '@wso2/oxygen-ui';
+
+// If you enforce a CSP, read the per-request nonce from a meta tag
+// (see §10). Otherwise this can be omitted.
+const nonce =
+  document
+    .querySelector<HTMLMetaElement>('meta[property="csp-nonce"]')
+    ?.nonce ?? undefined;
+
+export const appEmotionCache = createEmotionCache({
+  key: 'css',
+  prepend: true, // keep Oxygen styles first so app styles can override
+  nonce,
+});
\ No newline at end of file
diff --git a/portals/api-control-plane/src/theme/index.ts b/portals/api-control-plane/src/theme/index.ts
new file mode 100644
index 0000000000..eb366236a7
--- /dev/null
+++ b/portals/api-control-plane/src/theme/index.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AppThemeProvider } from './AppThemeProvider';
+import {
+  glassSurfaceSx,
+  interactiveCardSx,
+  stickyBottomBarSx,
+} from './receipes';
+
+export {
+  AppThemeProvider,
+  glassSurfaceSx,
+  interactiveCardSx,
+  stickyBottomBarSx,
+};
\ No newline at end of file
diff --git a/portals/api-control-plane/src/theme/receipes.ts b/portals/api-control-plane/src/theme/receipes.ts
new file mode 100644
index 0000000000..e89564132e
--- /dev/null
+++ b/portals/api-control-plane/src/theme/receipes.ts
@@ -0,0 +1,147 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// src/theme/recipes.ts
+//
+// Shared style recipes — the middle tier between the Oxygen theme and one-off
+// layout `sx`.
+//
+//   1. Theme      — global design decisions, owned by @wso2/oxygen-ui (and any
+//                   app-level override registered in ./themes).
+//   2. Recipes    — repeated multi-property treatments that are too
+//                   instance-specific to be a global component override. THIS
+//                   FILE. One definition, imported by every call site.
+//   3. Local `sx` — layout only (flex, gap, grid columns, min/max sizing).
+//
+// Everything here resolves through theme tokens. No colour, radius, blur or
+// border literals belong in this file or in any call site.
+
+import { alpha, type Theme } from '@wso2/oxygen-ui';
+
+/**
+ * The `border` shorthand for a one-pixel rule, from `theme.border` rather than
+ * a `'1px solid'` literal. Pair it with a `borderColor` token — the colour is
+ * the part that actually varies between light, dark and high-contrast themes.
+ */
+export const hairline = (theme: Theme) =>
+  `${theme.border.width} ${theme.border.style}`;
+
+/**
+ * Square metadata chip used across the API and gateway card family. A function
+ * of the theme so the border comes from `theme.border` rather than a literal —
+ * compose it as `sx={(theme) => ({ ...chipSx(theme), ...overrides })}`.
+ */
+export const chipSx = (theme: Theme) =>
+  ({
+    alignItems: 'center',
+    bgcolor: 'action.hover',
+    border: hairline(theme),
+    borderColor: 'divider',
+    borderRadius: 1,
+    color: 'text.secondary',
+    display: 'inline-flex',
+    fontSize: 12,
+    fontWeight: 500,
+    gap: 0.75,
+    px: 1.25,
+    py: 0.5,
+  }) as const;
+
+/**
+ * The same chip tinted with the brand colour — the "kind" chip on API cards.
+ * Pass straight through as `sx={tintedChipSx}`.
+ */
+export const tintedChipSx = (theme: Theme) => ({
+  ...chipSx(theme),
+  bgcolor: alpha(theme.palette.primary.main, 0.14),
+  borderColor: alpha(theme.palette.primary.main, 0.3),
+  color: 'primary.main',
+  fontWeight: 600,
+});
+
+/** Blur radius behind a glass surface. One value, so every pane matches. */
+const GLASS_BLUR = '14px';
+
+/**
+ * Translucent "glass" surface: what sits behind the element shows through,
+ * blurred, instead of the flat `background.paper` fill.
+ *
+ * Both gradient stops derive from `background.paper`, so the sheen that makes
+ * it read as glass stays correct in light, dark and high-contrast themes
+ * without branching on the palette mode. Compose it as
+ * `sx={(theme) => ({ ...glassSurfaceSx(theme), ...layout })}`.
+ */
+export const glassSurfaceSx = (theme: Theme) =>
+  ({
+    backdropFilter: `blur(${GLASS_BLUR})`,
+    WebkitBackdropFilter: `blur(${GLASS_BLUR})`,
+    backgroundColor: 'transparent',
+    backgroundImage: `linear-gradient(135deg, ${alpha(
+      theme.palette.background.paper,
+      0.6
+    )}, ${alpha(theme.palette.background.paper, 0.25)})`,
+    border: hairline(theme),
+    borderColor: alpha(theme.palette.divider, 0.6),
+    borderRadius: 1,
+  }) as const;
+
+/**
+ * Hover treatment for a card that behaves as a button (the whole surface
+ * navigates). Deliberately NOT a global `MuiCard` override: non-interactive
+ * cards — the tab shell, the save bar, the Explore More panel — must not lift
+ * under the cursor.
+ */
+export const interactiveCardSx = {
+  cursor: 'pointer',
+  transition:
+    'transform .18s ease, border-color .18s ease, box-shadow .18s ease',
+  '&:hover': {
+    borderColor: 'primary.main',
+    boxShadow: 4,
+    transform: 'translateY(-3px)',
+  },
+} as const;
+
+/**
+ * Upward elevation for a bar that floats over scrolling content (the develop
+ * tabs' sticky save bar). `theme.shadows` is entirely downward-casting, and the
+ * duplicated @mui/material install blocks adding a typed custom theme token, so
+ * this lives here as the single definition rather than inline at the call site.
+ */
+export const overlayBarShadow = '0 -2px 10px rgba(0, 0, 0, 0.16)';
+
+/**
+ * A bar pinned to the bottom of a page's scroll area — the develop tabs' save
+ * bar, a list page's pagination row.
+ *
+ * Blurred, bordered and shadowed upward so the content scrolling underneath
+ * stays readable behind it instead of colliding with it. It deliberately does
+ * **not** set a `bottom` offset: the app footer shares this scroll area, so each
+ * call site pairs this with `bottom: useFooterHeight()` rather than 0, or the bar
+ * ends up behind the footer.
+ */
+export const stickyBottomBarSx = (theme: Theme) =>
+  ({
+    backdropFilter: 'blur(10px)',
+    WebkitBackdropFilter: 'blur(10px)',
+    borderColor: 'divider',
+    borderTop: hairline(theme),
+    boxShadow: overlayBarShadow,
+    position: 'sticky',
+    zIndex: theme.zIndex.appBar,
+  }) as const;
diff --git a/portals/api-control-plane/src/theme/themes.ts b/portals/api-control-plane/src/theme/themes.ts
new file mode 100644
index 0000000000..3cf7d866af
--- /dev/null
+++ b/portals/api-control-plane/src/theme/themes.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// src/theme/themes.ts
+import { AcrylicOrangeTheme } from '@wso2/oxygen-ui';
+
+// Use the library-defined AcrylicOrangeTheme
+export const  themeRegistry = [
+  { key: 'acrylicOrange', label: 'Acrylic Orange', theme: AcrylicOrangeTheme },
+];
+
+export type ThemeKey = (typeof themeRegistry)[number]['key'];
+export const INITIAL_THEME: ThemeKey = 'acrylicOrange';
\ No newline at end of file

From 90dbc1c830b8bf1b874213b661cd04fd2e3dcf2f Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Wed, 19 Aug 2026 14:42:29 +0530
Subject: [PATCH 02/12] enhance(apicp): restructure the pages, hooks, contexts

- Restructure the pages, components, hooks and contexts.
- Restructure pages, components, hooks, and contexts
- Fix issues introduced by the restructuring
- Enhance project listing with pagination, sorting, and improved UI
- Add an index to the project API resource section
- Add form controls to project-related forms
- Temporarily make the app sidebar static
---
 .../api-control-plane/src/App.smoke.test.tsx  |  11 +
 portals/api-control-plane/src/App.tsx         |  10 +-
 .../src/api/core/http.test.ts                 |   2 +-
 .../api-control-plane/src/api/core/http.ts    |   2 +-
 .../api/organizations/organizationClient.ts   |   2 +-
 .../src/api/platform/platformClient.test.ts   |   2 +-
 .../src/api/platform/platformClient.ts        |   2 +-
 .../src/api/resources/projects/index.ts       |  53 ++
 .../api/resources/projects/projects.hooks.ts  |  14 +-
 .../src/components/ConfirmDialog.tsx          |  88 ++--
 .../src/components/cards/ProjectCard.tsx      | 251 +++++----
 .../src/components/cards/ProjectsGrid.tsx     |  81 ---
 .../auth/AuthProvider.test.tsx                |   0
 .../auth/AuthProvider.tsx                     |   0
 .../auth/AuthStateContext.ts                  |   0
 .../auth/authConstants.ts                     |   0
 .../{features => contexts}/auth/authTypes.ts  |   0
 .../src/features/apis/ApiDetailPage.tsx       |  67 ---
 .../features/projects/NewProjectDialog.tsx    | 148 ------
 .../projects/ProjectListPage.test.tsx         | 121 -----
 .../src/features/projects/ProjectListPage.tsx | 192 -------
 .../billing => hooks}/ProductActivation.tsx   |   4 +-
 .../src/i18n/messages/en.json                 | 137 ++++-
 .../src/navigation/useNavigationItems.ts      |  20 +-
 .../{layouts => pages/appShell}/AppHeader.tsx |   6 +-
 .../{layouts => pages/appShell}/AppLayout.tsx |   8 +-
 .../appShell}/AppSidebar.tsx                  |   2 +-
 .../appShell}/appLayoutConstants.ts           |   0
 .../apis/ApiCreatePage.test.tsx               |   2 +-
 .../appShellPages}/apis/ApiCreatePage.tsx     |   8 +-
 .../apis/ApiDetailPage.test.tsx               |   8 +-
 .../appShellPages/apis/ApiDetailPage.tsx      | 212 ++++++++
 .../appShellPages}/apis/ApiListPage.test.tsx  |  10 +-
 .../appShellPages}/apis/ApiListPage.tsx       |  18 +-
 .../apis/apiCapabilities.test.ts              |   2 +-
 .../appShellPages}/apis/apiCapabilities.ts    |   2 +-
 .../apis/develop/AttachedPolicyList.tsx       |   2 +-
 .../apis/develop/AvailablePoliciesPanel.tsx   |   8 +-
 .../apis/develop/DocumentsTab.tsx             |   2 +-
 .../apis/develop/PolicyConfigDrawer.tsx       |  10 +-
 .../appShellPages}/apis/develop/PolicyTab.tsx |  10 +-
 .../apis/develop/RoutingTab.test.tsx          |   6 +-
 .../apis/develop/RoutingTab.tsx               |   8 +-
 .../appShellPages}/apis/develop/SaveBar.tsx   |  45 +-
 .../apis/develop/SchemaField.tsx              |   2 +-
 .../apis/develop/backendDiscovery.test.ts     |   2 +-
 .../apis/develop/backendDiscovery.ts          |   0
 .../apis/develop/developEdit.test.ts          |   2 +-
 .../apis/develop/developEdit.ts               |   2 +-
 .../apis/develop/policyDnd.test.ts            |   0
 .../appShellPages}/apis/develop/policyDnd.ts  |   2 +-
 .../apis/overview/ApiKeysPanel.tsx            |   6 +-
 .../apis/overview/InvokeUrlPanel.tsx          |   4 +-
 .../apis/overview/OverviewTab.test.tsx        |   8 +-
 .../apis/overview/OverviewTab.tsx             |   4 +-
 .../apis/overview/ProgressBanner.tsx          |   4 +-
 .../apis/overview/ResourcesPanel.tsx          |   2 +-
 .../appShellPages}/deploy/DeployPage.test.tsx |   8 +-
 .../appShellPages}/deploy/DeployPage.tsx      |   6 +-
 .../deploy/GatewayDeployCard.tsx              |   6 +-
 .../deploy/GatewayDeployEnvCard.tsx           |   8 +-
 .../deploy/GatewayDeploymentHistory.tsx       |   6 +-
 .../deploy/GatewayDeploymentRow.tsx           |   4 +-
 .../deploy/GatewayDeploymentSelector.tsx      |   8 +-
 .../deploy/gatewayDeployUtils.ts              |   2 +-
 .../gateways/CopyableCommand.tsx              |   0
 .../gateways/GatewayCreatePage.tsx            |   8 +-
 .../gateways/GatewayDetailPage.tsx            |  14 +-
 .../appShellPages}/gateways/GatewaysPage.tsx  |  10 +-
 .../gateways/gatewayEnvironments.test.ts      |   2 +-
 .../gateways/gatewayEnvironments.ts           |   2 +-
 .../appShellPages}/gateways/gatewaysUi.css    |   0
 .../appShellPages}/logs/RuntimeLogsPage.tsx   |   0
 .../appShellPages}/manage/ManagePage.tsx      |   4 +-
 .../organizations/ExploreMoreCard.tsx         | 150 ++++++
 .../organizations/OrganizationHomePage.tsx    |  28 +-
 .../projects/NewProjectDialog.test.tsx        |  71 ++-
 .../projects/NewProjectDialog.tsx             | 167 ++++++
 .../projects/ProjectHomePage.tsx              |  16 +-
 .../projects/ProjectListPage.test.tsx         | 207 ++++++++
 .../projects/ProjectListPage.tsx              | 483 ++++++++++++++++++
 .../appShellPages/projects/ProjectsGrid.tsx   |  67 +++
 .../appShellPages}/settings/SettingsPage.tsx  |   0
 .../appShellPages}/system/SystemPages.tsx     |   8 +-
 .../appShell/appShellPages}/test/TestPage.tsx |   4 +-
 .../src/pages/appShell/useFooterHeight.ts     |  53 ++
 .../auth/AuthCallbackPage.tsx                 |   0
 .../{features => pages}/auth/LoginPage.tsx    |   2 +-
 .../src/routes/AppRoutes.tsx                  |  36 +-
 .../src/routes/ProtectedRoute.tsx             |   2 +-
 .../src/scope/ConsoleScopeContext.ts          |   2 +-
 .../src/scope/ConsoleScopeProvider.tsx        |   4 +-
 .../src/test/mockAuthState.ts                 |   2 +-
 .../api-control-plane/src/test/mockScope.ts   |   2 +-
 portals/api-control-plane/src/test/utils.tsx  |   4 +-
 95 files changed, 2008 insertions(+), 1002 deletions(-)
 create mode 100644 portals/api-control-plane/src/api/resources/projects/index.ts
 delete mode 100644 portals/api-control-plane/src/components/cards/ProjectsGrid.tsx
 rename portals/api-control-plane/src/{features => contexts}/auth/AuthProvider.test.tsx (100%)
 rename portals/api-control-plane/src/{features => contexts}/auth/AuthProvider.tsx (100%)
 rename portals/api-control-plane/src/{features => contexts}/auth/AuthStateContext.ts (100%)
 rename portals/api-control-plane/src/{features => contexts}/auth/authConstants.ts (100%)
 rename portals/api-control-plane/src/{features => contexts}/auth/authTypes.ts (100%)
 delete mode 100644 portals/api-control-plane/src/features/apis/ApiDetailPage.tsx
 delete mode 100644 portals/api-control-plane/src/features/projects/NewProjectDialog.tsx
 delete mode 100644 portals/api-control-plane/src/features/projects/ProjectListPage.test.tsx
 delete mode 100644 portals/api-control-plane/src/features/projects/ProjectListPage.tsx
 rename portals/api-control-plane/src/{features/billing => hooks}/ProductActivation.tsx (95%)
 rename portals/api-control-plane/src/{layouts => pages/appShell}/AppHeader.tsx (96%)
 rename portals/api-control-plane/src/{layouts => pages/appShell}/AppLayout.tsx (94%)
 rename portals/api-control-plane/src/{layouts => pages/appShell}/AppSidebar.tsx (95%)
 rename portals/api-control-plane/src/{layouts => pages/appShell}/appLayoutConstants.ts (100%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/ApiCreatePage.test.tsx (97%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/ApiCreatePage.tsx (99%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/ApiDetailPage.test.tsx (91%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/ApiListPage.test.tsx (91%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/ApiListPage.tsx (92%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/apiCapabilities.test.ts (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/apiCapabilities.ts (97%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/AttachedPolicyList.tsx (98%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/AvailablePoliciesPanel.tsx (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/DocumentsTab.tsx (92%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/PolicyConfigDrawer.tsx (94%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/PolicyTab.tsx (97%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/RoutingTab.test.tsx (94%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/RoutingTab.tsx (99%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/SaveBar.tsx (51%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/SchemaField.tsx (99%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/backendDiscovery.test.ts (98%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/backendDiscovery.ts (100%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/developEdit.test.ts (98%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/developEdit.ts (99%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/policyDnd.test.ts (100%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/develop/policyDnd.ts (95%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/overview/ApiKeysPanel.tsx (98%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/overview/InvokeUrlPanel.tsx (97%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/overview/OverviewTab.test.tsx (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/overview/OverviewTab.tsx (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/overview/ProgressBanner.tsx (98%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/apis/overview/ResourcesPanel.tsx (98%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/deploy/DeployPage.test.tsx (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/deploy/DeployPage.tsx (97%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/deploy/GatewayDeployCard.tsx (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/deploy/GatewayDeployEnvCard.tsx (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/deploy/GatewayDeploymentHistory.tsx (94%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/deploy/GatewayDeploymentRow.tsx (97%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/deploy/GatewayDeploymentSelector.tsx (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/deploy/gatewayDeployUtils.ts (97%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/gateways/CopyableCommand.tsx (100%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/gateways/GatewayCreatePage.tsx (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/gateways/GatewayDetailPage.tsx (95%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/gateways/GatewaysPage.tsx (97%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/gateways/gatewayEnvironments.test.ts (96%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/gateways/gatewayEnvironments.ts (97%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/gateways/gatewaysUi.css (100%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/logs/RuntimeLogsPage.tsx (100%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/manage/ManagePage.tsx (92%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/organizations/ExploreMoreCard.tsx
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/organizations/OrganizationHomePage.tsx (84%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/projects/NewProjectDialog.test.tsx (54%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/projects/NewProjectDialog.tsx
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/projects/ProjectHomePage.tsx (91%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.test.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectsGrid.tsx
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/settings/SettingsPage.tsx (100%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/system/SystemPages.tsx (92%)
 rename portals/api-control-plane/src/{features => pages/appShell/appShellPages}/test/TestPage.tsx (91%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/useFooterHeight.ts
 rename portals/api-control-plane/src/{features => pages}/auth/AuthCallbackPage.tsx (100%)
 rename portals/api-control-plane/src/{features => pages}/auth/LoginPage.tsx (99%)

diff --git a/portals/api-control-plane/src/App.smoke.test.tsx b/portals/api-control-plane/src/App.smoke.test.tsx
index 8eff14c1b3..f324f29b8f 100644
--- a/portals/api-control-plane/src/App.smoke.test.tsx
+++ b/portals/api-control-plane/src/App.smoke.test.tsx
@@ -19,7 +19,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { AppRoutes } from './routes/AppRoutes';
+import { aProject, collection } from './test/msw';
 import { authStatePresets } from './test/mockAuthState';
+import { server } from './test/server';
 import { renderWithProviders, screen } from './test/utils';
 
 // Smoke test: render the REAL route tree (ProtectedRoute → ConsoleScopeProvider
@@ -45,6 +47,15 @@ describe('App smoke (mock mode, authenticated)', () => {
   });
 
   it('navigates to the projects list and renders project cards', async () => {
+    // The project list reads through the resource hooks, which always go to the
+    // real transport — `VITE_USE_MOCK_API` only governs the legacy client, so
+    // these endpoints are stubbed at the network layer instead.
+    server.use(
+      collection('/projects', [
+        aProject({ id: 'retail', displayName: 'Retail APIs' }),
+      ]),
+      collection('/rest-apis', [])
+    );
     renderWithProviders(<AppRoutes />, {
       route: '/organizations/api-platform-demo/projects',
       authState: authStatePresets.authenticated(),
diff --git a/portals/api-control-plane/src/App.tsx b/portals/api-control-plane/src/App.tsx
index 03b5c0cafa..e78a2dcdb3 100644
--- a/portals/api-control-plane/src/App.tsx
+++ b/portals/api-control-plane/src/App.tsx
@@ -18,7 +18,6 @@
 
 import { type ReactNode, useState } from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { OxygenUIThemeProvider, OxygenTheme } from '@wso2/oxygen-ui';
 import { BrowserRouter } from 'react-router-dom';
 
 import { ApiClientProvider } from './api/ApiClientProvider';
@@ -26,14 +25,15 @@ import { createQueryClient } from './api/core/queryClient';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { NotificationProvider, useNotifications } from './components/Notifications';
 import { runtimeConfig } from './config/runtime';
-import { AuthProvider } from './features/auth/AuthProvider';
-import { ProductActivation } from './features/billing/ProductActivation';
+import { AuthProvider } from './contexts/auth/AuthProvider';
+import { ProductActivation } from './hooks/ProductActivation';
 import { AppRoutes } from './routes/AppRoutes';
 import {
   ExtensionsProvider,
   type ApiControlPlaneExtension,
 } from './extensions';
 import { I18nProvider } from './i18n';
+import { AppThemeProvider } from './theme/AppThemeProvider';
 
 /**
  * Builds the app's QueryClient with the notification handler already attached,
@@ -69,7 +69,7 @@ export default function App({ extensions = [] }: AppProps) {
   return (
 
     <I18nProvider>
-      <OxygenUIThemeProvider theme={OxygenTheme}>
+      <AppThemeProvider>
         <NotificationProvider>
           <AppQueryProvider>
             <ApiClientProvider>
@@ -86,7 +86,7 @@ export default function App({ extensions = [] }: AppProps) {
             </ApiClientProvider>
           </AppQueryProvider>
         </NotificationProvider>
-      </OxygenUIThemeProvider>
+      </AppThemeProvider>
     </I18nProvider>
   );
 }
diff --git a/portals/api-control-plane/src/api/core/http.test.ts b/portals/api-control-plane/src/api/core/http.test.ts
index 368e563ae6..d44a3acd53 100644
--- a/portals/api-control-plane/src/api/core/http.test.ts
+++ b/portals/api-control-plane/src/api/core/http.test.ts
@@ -24,7 +24,7 @@ import {
 } from 'msw';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { CSRF_HEADER, CSRF_HEADER_VALUE } from '../../features/auth/authConstants';
+import { CSRF_HEADER, CSRF_HEADER_VALUE } from '../../contexts/auth/authConstants';
 import { server } from '../../test/server';
 import { ApiError, ClientErrorCode, ErrorCode } from './errors';
 import {
diff --git a/portals/api-control-plane/src/api/core/http.ts b/portals/api-control-plane/src/api/core/http.ts
index f9fc71327d..48749dd115 100644
--- a/portals/api-control-plane/src/api/core/http.ts
+++ b/portals/api-control-plane/src/api/core/http.ts
@@ -28,7 +28,7 @@ import { runtimeConfig } from '../../config/runtime';
 import {
   CSRF_HEADER,
   CSRF_HEADER_VALUE,
-} from '../../features/auth/authConstants';
+} from '../../contexts/auth/authConstants';
 import { ApiErrorKind, platformErrorFromBody, platformErrorFromTransport } from './errors';
 import { notifySessionExpired } from './sessionEvents';
 
diff --git a/portals/api-control-plane/src/api/organizations/organizationClient.ts b/portals/api-control-plane/src/api/organizations/organizationClient.ts
index dcb9c0c396..fa5fbb1e26 100644
--- a/portals/api-control-plane/src/api/organizations/organizationClient.ts
+++ b/portals/api-control-plane/src/api/organizations/organizationClient.ts
@@ -17,7 +17,7 @@
  */
 
 import { runtimeConfig } from '../../config/runtime';
-import type { AuthUser } from '../../features/auth/authTypes';
+import type { AuthUser } from '../../contexts/auth/authTypes';
 import type { Organization } from '../../types/domain';
 import { toOrganization } from '../adapters';
 import { getJson } from '../client';
diff --git a/portals/api-control-plane/src/api/platform/platformClient.test.ts b/portals/api-control-plane/src/api/platform/platformClient.test.ts
index e91bef3768..7b71b25a7e 100644
--- a/portals/api-control-plane/src/api/platform/platformClient.test.ts
+++ b/portals/api-control-plane/src/api/platform/platformClient.test.ts
@@ -19,7 +19,7 @@
 import { http, HttpResponse } from 'msw';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { CSRF_HEADER, CSRF_HEADER_VALUE } from '../../features/auth/authConstants';
+import { CSRF_HEADER, CSRF_HEADER_VALUE } from '../../contexts/auth/authConstants';
 import { server } from '../../test/server';
 
 const BASE = 'http://platform.test';
diff --git a/portals/api-control-plane/src/api/platform/platformClient.ts b/portals/api-control-plane/src/api/platform/platformClient.ts
index 9bee2df51b..fe73384a36 100644
--- a/portals/api-control-plane/src/api/platform/platformClient.ts
+++ b/portals/api-control-plane/src/api/platform/platformClient.ts
@@ -17,7 +17,7 @@
  */
 
 import { runtimeConfig } from '../../config/runtime';
-import { CSRF_HEADER, CSRF_HEADER_VALUE } from '../../features/auth/authConstants';
+import { CSRF_HEADER, CSRF_HEADER_VALUE } from '../../contexts/auth/authConstants';
 import { ApiError, type ApiErrorCode } from '../types/errors';
 
 /** True when read flows should go to platform-api REST (via BML). */
diff --git a/portals/api-control-plane/src/api/resources/projects/index.ts b/portals/api-control-plane/src/api/resources/projects/index.ts
new file mode 100644
index 0000000000..181eb03b4a
--- /dev/null
+++ b/portals/api-control-plane/src/api/resources/projects/index.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type {
+    Project,
+    ProjectListResponse,
+    ListProjectsQuery,
+    CreateProjectBody,
+    UpdateProjectBody
+} from './projects.endpoints';
+import {
+    useProjects,
+    useProject,
+    useCreateProject,
+    useUpdateProject,
+    useDeleteProject,
+    useProjectOptions,
+} from './projects.hooks';
+
+import type { ProjectListFilters } from './projects.hooks';
+
+export type {
+    Project,
+    ProjectListResponse,
+    ListProjectsQuery,
+    CreateProjectBody,
+    UpdateProjectBody,
+    ProjectListFilters
+};
+
+export {
+    useProjects,
+    useProject,
+    useCreateProject,
+    useUpdateProject,
+    useDeleteProject,
+    useProjectOptions,
+};
\ No newline at end of file
diff --git a/portals/api-control-plane/src/api/resources/projects/projects.hooks.ts b/portals/api-control-plane/src/api/resources/projects/projects.hooks.ts
index 5f98b365a3..97b74e556e 100644
--- a/portals/api-control-plane/src/api/resources/projects/projects.hooks.ts
+++ b/portals/api-control-plane/src/api/resources/projects/projects.hooks.ts
@@ -16,7 +16,12 @@
  * under the License.
  */
 
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
 
 import type { ApiError } from '../../core/errors';
 import { requireOrgScope, useApiScope } from '../../core/scope';
@@ -54,6 +59,12 @@ export type ProjectListFilters = ListProjectsQuery;
  * The query does not run until the organization is known, so this never fires a
  * request the server would reject — and, critically, never writes into a cache
  * entry keyed by an empty scope.
+ *
+ * `keepPreviousData` is the one pagination-specific exception the query client
+ * deliberately leaves to individual list queries: paging or searching changes
+ * the key, and without it the grid would unmount into a loading state on every
+ * page change. The previous page stays on screen (flagged by
+ * `isPlaceholderData`) until the next one arrives.
  */
 export const useProjects = (
   filters: ProjectListFilters = {},
@@ -64,6 +75,7 @@ export const useProjects = (
   return useQuery({
     ...projectQueries.list(org!, filters),
     enabled: Boolean(org),
+    placeholderData: keepPreviousData,
   });
 };
 
diff --git a/portals/api-control-plane/src/components/ConfirmDialog.tsx b/portals/api-control-plane/src/components/ConfirmDialog.tsx
index 17f56676a4..671eb8a035 100644
--- a/portals/api-control-plane/src/components/ConfirmDialog.tsx
+++ b/portals/api-control-plane/src/components/ConfirmDialog.tsx
@@ -16,15 +16,17 @@
  * under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState, type FormEvent } from 'react';
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
-  TextField,
+  Form,
+  OutlinedInput,
 } from '@wso2/oxygen-ui';
 
 export type ConfirmDialogProps = {
@@ -62,6 +64,10 @@ export function ConfirmDialog({
   onCancel,
 }: ConfirmDialogProps) {
   const [typed, setTyped] = useState('');
+  // Generated rather than a constant: this dialog is rendered by several pages,
+  // and two mounted at once would otherwise share one id, pointing both labels
+  // at whichever input the DOM saw first.
+  const fieldId = useId();
 
   // Reset the typed phrase whenever the dialog opens/closes.
   useEffect(() => {
@@ -71,40 +77,56 @@ export function ConfirmDialog({
   const matched = !confirmPhrase || typed === confirmPhrase;
   const canConfirm = matched && !loading;
 
+  // A real `form` element, so Enter in the phrase field confirms the way a form
+  // is expected to — no key handler duplicating the browser's own behaviour.
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    if (canConfirm) onConfirm();
+  };
+
   return (
     <Dialog fullWidth maxWidth="xs" onClose={onCancel} open={open}>
       <DialogTitle>{title}</DialogTitle>
-      <DialogContent>
-        <DialogContentText>{message}</DialogContentText>
-        {confirmPhrase && (
-          <TextField
-            autoFocus
-            fullWidth
-            label={confirmInputLabel ?? `Type "${confirmPhrase}" to confirm`}
-            onChange={(event) => setTyped(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' && canConfirm) onConfirm();
-            }}
-            placeholder={confirmPhrase}
-            size="small"
-            sx={{ mt: 2 }}
-            value={typed}
-          />
-        )}
-      </DialogContent>
-      <DialogActions>
-        <Button color="inherit" disabled={loading} onClick={onCancel}>
-          {cancelLabel}
-        </Button>
-        <Button
-          color={destructive ? 'error' : 'primary'}
-          disabled={!canConfirm}
-          onClick={onConfirm}
-          variant="contained"
-        >
-          {confirmLabel}
-        </Button>
-      </DialogActions>
+      <Box component="form" noValidate onSubmit={handleSubmit}>
+        <DialogContent>
+          <Form.Stack spacing={2}>
+            <DialogContentText>{message}</DialogContentText>
+            {confirmPhrase && (
+              // `ElementWrapper` is the Oxygen form primitive for exactly this:
+              // a full-width `FormControl` with its `FormLabel` bound to the
+              // control by id. It carries no `required`/`error` of its own, which
+              // is why it suits this field — the phrase is validated by matching,
+              // not by field state, so there is nothing to propagate.
+              <Form.ElementWrapper
+                label={confirmInputLabel ?? `Type "${confirmPhrase}" to confirm`}
+                name={fieldId}
+              >
+                <OutlinedInput
+                  autoFocus
+                  id={fieldId}
+                  onChange={(event) => setTyped(event.target.value)}
+                  placeholder={confirmPhrase}
+                  size="small"
+                  value={typed}
+                />
+              </Form.ElementWrapper>
+            )}
+          </Form.Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button color="inherit" disabled={loading} onClick={onCancel}>
+            {cancelLabel}
+          </Button>
+          <Button
+            color={destructive ? 'error' : 'primary'}
+            disabled={!canConfirm}
+            type="submit"
+            variant="contained"
+          >
+            {confirmLabel}
+          </Button>
+        </DialogActions>
+      </Box>
     </Dialog>
   );
 }
diff --git a/portals/api-control-plane/src/components/cards/ProjectCard.tsx b/portals/api-control-plane/src/components/cards/ProjectCard.tsx
index 67c9bace63..dd5050533b 100644
--- a/portals/api-control-plane/src/components/cards/ProjectCard.tsx
+++ b/portals/api-control-plane/src/components/cards/ProjectCard.tsx
@@ -18,8 +18,9 @@
 
 import { useState, type MouseEvent } from 'react';
 import {
+  alpha,
   Box,
-  Button,
+  Card,
   Chip,
   IconButton,
   ListItemIcon,
@@ -31,21 +32,22 @@ import {
   Typography,
 } from '@wso2/oxygen-ui';
 import {
-  ArrowRight,
   Boxes,
   Clock,
-  GitBranch,
+  Layers,
   MoreVertical,
   Rocket,
   Settings,
   Trash2,
 } from '@wso2/oxygen-ui-icons-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { useApis } from '../../api/hooks/useMvpQueries';
+import { useRestApis } from '../../api/resources/restApis/restApis.hooks';
+import type { Project } from '../../api/resources/projects';
 import { routes } from '../../routes/paths';
-import type { Project } from '../../types/domain';
 import { relativeTime } from '../../utils/relativeTime';
+import {interactiveCardSx } from '../../theme';
 
 type ProjectCardProps = {
   project: Project;
@@ -54,17 +56,70 @@ type ProjectCardProps = {
   onDelete?: (project: Project) => void;
 };
 
-// Decorative brand accents (read on both light and dark surfaces): WSO2 orange
-// for regular projects, a cyan tone for the default project.
-const ORANGE_ACCENT = 'linear-gradient(90deg, #F47B20, #EF4223)';
-const CYAN_ACCENT = 'linear-gradient(90deg, #3AA0D6, #5CD1FF)';
+/**
+ * Tint strength of the metadata strip, per color scheme.
+ *
+ * Two factors rather than one because the strip is tinted with opposite ink in
+ * each scheme — black over a light card, white over a dark one — and the two
+ * need different strengths to read as the same depth of recess. They are applied
+ * to `common.black`/`common.white`, which are identical in both schemes, so the
+ * value is never taken from the wrong scheme's palette.
+ */
+const METADATA_TINT = { dark: 0.08, light: 0.06 } as const;
 
-const repoTypeLabel = (type: Project['type']) =>
-  type === 'MONO_REPO'
-    ? 'Mono repo'
-    : type === 'MULTI_REPO'
-      ? 'Multi repo'
-      : undefined;
+const messages = defineMessages({
+  actionsLabel: {
+    id: 'project.card.actionsLabel',
+    defaultMessage: 'Project actions',
+    description: 'Accessible label for the button opening the card overflow menu.',
+  },
+  apiCount: {
+    id: 'project.card.apiCount',
+    defaultMessage: '{count, plural, one {# API} other {# APIs}}',
+  },
+  apiCountLoading: {
+    id: 'project.card.apiCountLoading',
+    defaultMessage: '… APIs',
+    description: 'Placeholder shown while the API count is still loading.',
+  },
+  defaultBadge: {
+    id: 'project.card.defaultBadge',
+    defaultMessage: 'DEFAULT',
+    description: 'Badge marking the organization’s default project.',
+  },
+  delete: {
+    id: 'project.card.delete',
+    defaultMessage: 'Delete',
+  },
+  deployedCount: {
+    id: 'project.card.deployedCount',
+    defaultMessage: '{count} deployed',
+  },
+  deployedCountLoading: {
+    id: 'project.card.deployedCountLoading',
+    defaultMessage: '… deployed',
+    description: 'Placeholder shown while the deployed count is still loading.',
+  },
+  fallbackDescription: {
+    id: 'project.card.fallbackDescription',
+    defaultMessage: 'Project workspace',
+    description: 'Shown in place of a description when the project has none.',
+  },
+  neverUpdated: {
+    id: 'project.card.neverUpdated',
+    defaultMessage: 'Not updated yet',
+  },
+  settingsLabel: {
+    id: 'project.card.settingsLabel',
+    defaultMessage: 'Project settings',
+  },
+  updatedAt: {
+    id: 'project.card.updatedAt',
+    defaultMessage: 'Updated {relative}',
+    description:
+      'Footer timestamp; {relative} is a phrase such as "3 hours ago".',
+  },
+});
 
 export function ProjectCard({
   project,
@@ -72,6 +127,7 @@ export function ProjectCard({
   onOpen,
   onDelete,
 }: ProjectCardProps) {
+  const intl = useIntl();
   const stopCardClick = (event: MouseEvent) => event.stopPropagation();
   const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
 
@@ -80,71 +136,55 @@ export function ProjectCard({
     setMenuAnchor(null);
   };
   const isDefault =
-    project.handler === 'default' || project.name.toLowerCase() === 'default';
-  const accent = isDefault ? CYAN_ACCENT : ORANGE_ACCENT;
-  const iconTint = isDefault ? 'rgba(92,209,255,0.14)' : 'rgba(255,115,0,0.14)';
-  const iconColor = isDefault ? '#3AA0D6' : '#FF7300';
-  const repoLabel = repoTypeLabel(project.type);
+    project.id === 'default' || project.displayName.toLowerCase() === 'default';
 
-  const apisQuery = useApis(orgHandle, project.handler);
-  const apiCount = apisQuery.data?.length;
-  const deployedCount = apisQuery.data?.filter(
-    (api) => api.status === 'ACTIVE'
+  // Scoped to this card's project rather than the route's, so the counts belong
+  // to the card the user is looking at and not the project they are currently in.
+  const apisQuery = useRestApis({}, { projectId: project.id });
+  const apiCount = apisQuery.data?.pagination?.total ?? apisQuery.data?.count;
+  const deployedCount = apisQuery.data?.list?.filter(
+    (api) => api.lifeCycleStatus === 'PUBLISHED'
   ).length;
 
   return (
-    <Box
+    <Card
+      // elevation={0}
       onClick={() => onOpen(project)}
-      sx={{
-        bgcolor: 'background.paper',
-        border: '1px solid',
-        borderColor: 'divider',
-        borderRadius: 1,
-        cursor: 'pointer',
+      sx={() => ({
+        ...interactiveCardSx,
         display: 'flex',
         flexDirection: 'column',
         height: '100%',
         overflow: 'hidden',
-        transition:
-          'transform .18s ease, border-color .18s ease, box-shadow .18s ease',
-        '&:hover': {
-          borderColor: 'primary.main',
-          boxShadow: 4,
-          transform: 'translateY(-3px)',
-        },
-      }}
+      })}
     >
-      {/* accent strip */}
-      <Box sx={{ background: accent, height: 4 }} />
 
       <Box sx={{ flexGrow: 1, p: 2.5 }}>
-        <Stack alignItems="flex-start" direction="row" spacing={1.75}>
+        <Stack alignItems="center" direction="row" spacing={1.75}>
           <Box
-            sx={{
+            sx={() => ({
               alignItems: 'center',
-              bgcolor: iconTint,
-              border: '1px solid',
-              borderColor: 'divider',
-              borderRadius: 1,
-              color: iconColor,
+              bgcolor: `primary.light`,
+              color: `primary.contrastText`,
+              borderRadius: 2,
               display: 'flex',
               flex: 'none',
               height: 46,
               justifyContent: 'center',
               width: 46,
-            }}
+            })}
           >
-            <Boxes size={22} />
+            <Layers size={22} />
           </Box>
           <Box sx={{ minWidth: 0 }}>
             <Stack alignItems="center" direction="row" spacing={1}>
               <Typography noWrap sx={{ fontWeight: 600 }} variant="subtitle1">
-                {project.name}
+                {project.displayName}
               </Typography>
               {isDefault && (
                 <Chip
                   color="info"
-                  label="DEFAULT"
+                  label={intl.formatMessage(messages.defaultBadge)}
                   size="small"
                   sx={{ fontSize: 10, fontWeight: 600, height: 20 }}
                   variant="outlined"
@@ -154,10 +194,12 @@ export function ProjectCard({
             <Typography
               color="text.secondary"
               noWrap
-              sx={{ mt: 0.25 }}
+              sx={{ mt: 0.25, fontSize: '0.7rem' }}
               variant="body2"
             >
-              {project.description || 'Project workspace'}
+              {project.description || (
+                <FormattedMessage {...messages.fallbackDescription} />
+              )}
             </Typography>
           </Box>
         </Stack>
@@ -166,17 +208,24 @@ export function ProjectCard({
         <Stack
           direction="row"
           spacing={2}
-          sx={{
-            alignItems: 'center',
-            bgcolor: 'action.hover',
-            border: '1px solid',
-            borderColor: 'divider',
-            borderRadius: 1,
-            color: 'text.secondary',
-            mt: 2.25,
-            px: 1.75,
-            py: 1.25,
-          }}
+          sx={[
+            (theme) => ({
+              alignItems: 'center',
+              bgcolor: alpha(theme.palette.common.black, METADATA_TINT.light),
+              borderRadius: 1,
+              color: 'text.secondary',
+              mt: 2.25,
+              px: 1.75,
+              py: 1.25,
+            }),
+            // Emitted under the dark color-scheme selector, so it follows the
+            // theme the user is actually on. Must come last in the array —
+            // `applyStyles` returns a nested selector, not a flat value.
+            (theme) =>
+              theme.applyStyles('dark', {
+                bgcolor: alpha(theme.palette.common.white, METADATA_TINT.dark),
+              }),
+          ]}
         >
           <Stack
             alignItems="center"
@@ -186,9 +235,14 @@ export function ProjectCard({
           >
             <Boxes size={16} />
             <Typography noWrap variant="body2">
-              {apisQuery.isLoading
-                ? '… APIs'
-                : `${apiCount ?? 0} ${apiCount === 1 ? 'API' : 'APIs'}`}
+              {apisQuery.isLoading ? (
+                <FormattedMessage {...messages.apiCountLoading} />
+              ) : (
+                <FormattedMessage
+                  {...messages.apiCount}
+                  values={{ count: apiCount ?? 0 }}
+                />
+              )}
             </Typography>
           </Stack>
           <Stack
@@ -199,19 +253,16 @@ export function ProjectCard({
           >
             <Rocket size={16} />
             <Typography noWrap variant="body2">
-              {apisQuery.isLoading
-                ? '… deployed'
-                : `${deployedCount ?? 0} deployed`}
+              {apisQuery.isLoading ? (
+                <FormattedMessage {...messages.deployedCountLoading} />
+              ) : (
+                <FormattedMessage
+                  {...messages.deployedCount}
+                  values={{ count: deployedCount ?? 0 }}
+                />
+              )}
             </Typography>
           </Stack>
-          {repoLabel && (
-            <Stack alignItems="center" direction="row" spacing={0.75}>
-              <GitBranch size={16} />
-              <Typography noWrap variant="body2">
-                {repoLabel}
-              </Typography>
-            </Stack>
-          )}
         </Stack>
       </Box>
 
@@ -219,9 +270,6 @@ export function ProjectCard({
       <Box
         sx={{
           alignItems: 'center',
-          bgcolor: 'action.hover',
-          borderColor: 'divider',
-          borderTop: '1px solid',
           display: 'flex',
           gap: 1,
           px: 2,
@@ -230,27 +278,32 @@ export function ProjectCard({
       >
         <Clock size={14} />
         <Typography color="text.secondary" variant="caption">
-          {project.updatedAt
-            ? `Updated ${relativeTime(project.updatedAt)}`
-            : 'Not updated yet'}
+          {project.updatedAt ? (
+            <FormattedMessage
+              {...messages.updatedAt}
+              values={{ relative: relativeTime(project.updatedAt) }}
+            />
+          ) : (
+            <FormattedMessage {...messages.neverUpdated} />
+          )}
         </Typography>
         <Box sx={{ flex: 1 }} />
-        <Tooltip title="Project settings">
+        <Tooltip title={intl.formatMessage(messages.settingsLabel)}>
           <IconButton
-            aria-label="Project settings"
+            aria-label={intl.formatMessage(messages.settingsLabel)}
             component={Link}
             onClick={stopCardClick}
             size="small"
-            to={routes.settings(orgHandle, project.handler)}
+            to={routes.settings(orgHandle, project.id)}
           >
             <Settings size={16} />
           </IconButton>
         </Tooltip>
         {onDelete && (
           <>
-            <Tooltip title="Project actions">
+            <Tooltip title={intl.formatMessage(messages.actionsLabel)}>
               <IconButton
-                aria-label="Project actions"
+                aria-label={intl.formatMessage(messages.actionsLabel)}
                 onClick={(event) => {
                   event.stopPropagation();
                   setMenuAnchor(event.currentTarget);
@@ -276,24 +329,14 @@ export function ProjectCard({
                 <ListItemIcon sx={{ color: 'inherit' }}>
                   <Trash2 size={16} />
                 </ListItemIcon>
-                <ListItemText>Delete</ListItemText>
+                <ListItemText>
+                  <FormattedMessage {...messages.delete} />
+                </ListItemText>
               </MenuItem>
             </Menu>
           </>
         )}
-        <Button
-          endIcon={<ArrowRight size={14} />}
-          onClick={(event) => {
-            stopCardClick(event);
-            onOpen(project);
-          }}
-          size="small"
-          sx={{ borderRadius: 5 }}
-          variant="outlined"
-        >
-          Open
-        </Button>
       </Box>
-    </Box>
+    </Card>
   );
 }
diff --git a/portals/api-control-plane/src/components/cards/ProjectsGrid.tsx b/portals/api-control-plane/src/components/cards/ProjectsGrid.tsx
deleted file mode 100644
index 52af5baea9..0000000000
--- a/portals/api-control-plane/src/components/cards/ProjectsGrid.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { useState } from 'react';
-import { Box, TablePagination } from '@wso2/oxygen-ui';
-
-import type { Project } from '../../types/domain';
-import { ProjectCard } from './ProjectCard';
-
-type ProjectsGridProps = {
-  projects: Project[];
-  orgHandle: string;
-  onOpen: (project: Project) => void;
-  onDelete?: (project: Project) => void;
-};
-
-export function ProjectsGrid({
-  projects,
-  orgHandle,
-  onOpen,
-  onDelete,
-}: ProjectsGridProps) {
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(12);
-  const paged = projects.slice(
-    page * rowsPerPage,
-    page * rowsPerPage + rowsPerPage
-  );
-
-  return (
-    <>
-      <Box
-        sx={{
-          display: 'grid',
-          gap: 2.5,
-          gridTemplateColumns: 'repeat(auto-fill, minmax(330px, 1fr))',
-        }}
-      >
-        {paged.map((project) => (
-          <ProjectCard
-            key={project.id}
-            onDelete={onDelete}
-            onOpen={onOpen}
-            orgHandle={orgHandle}
-            project={project}
-          />
-        ))}
-      </Box>
-      {projects.length > rowsPerPage && (
-        <TablePagination
-          component="div"
-          count={projects.length}
-          onPageChange={(_event, nextPage) => setPage(nextPage)}
-          onRowsPerPageChange={(event) => {
-            setRowsPerPage(parseInt(event.target.value, 10));
-            setPage(0);
-          }}
-          page={page}
-          rowsPerPage={rowsPerPage}
-          rowsPerPageOptions={[12, 24, 48]}
-          sx={{ mt: 2 }}
-        />
-      )}
-    </>
-  );
-}
diff --git a/portals/api-control-plane/src/features/auth/AuthProvider.test.tsx b/portals/api-control-plane/src/contexts/auth/AuthProvider.test.tsx
similarity index 100%
rename from portals/api-control-plane/src/features/auth/AuthProvider.test.tsx
rename to portals/api-control-plane/src/contexts/auth/AuthProvider.test.tsx
diff --git a/portals/api-control-plane/src/features/auth/AuthProvider.tsx b/portals/api-control-plane/src/contexts/auth/AuthProvider.tsx
similarity index 100%
rename from portals/api-control-plane/src/features/auth/AuthProvider.tsx
rename to portals/api-control-plane/src/contexts/auth/AuthProvider.tsx
diff --git a/portals/api-control-plane/src/features/auth/AuthStateContext.ts b/portals/api-control-plane/src/contexts/auth/AuthStateContext.ts
similarity index 100%
rename from portals/api-control-plane/src/features/auth/AuthStateContext.ts
rename to portals/api-control-plane/src/contexts/auth/AuthStateContext.ts
diff --git a/portals/api-control-plane/src/features/auth/authConstants.ts b/portals/api-control-plane/src/contexts/auth/authConstants.ts
similarity index 100%
rename from portals/api-control-plane/src/features/auth/authConstants.ts
rename to portals/api-control-plane/src/contexts/auth/authConstants.ts
diff --git a/portals/api-control-plane/src/features/auth/authTypes.ts b/portals/api-control-plane/src/contexts/auth/authTypes.ts
similarity index 100%
rename from portals/api-control-plane/src/features/auth/authTypes.ts
rename to portals/api-control-plane/src/contexts/auth/authTypes.ts
diff --git a/portals/api-control-plane/src/features/apis/ApiDetailPage.tsx b/portals/api-control-plane/src/features/apis/ApiDetailPage.tsx
deleted file mode 100644
index ee8e571d3d..0000000000
--- a/portals/api-control-plane/src/features/apis/ApiDetailPage.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { useState } from 'react';
-import { PageContent, PageTitle, Tab, Tabs } from '@wso2/oxygen-ui';
-
-import { useApiDetail } from '../../api/hooks/useMvpQueries';
-import { ErrorState, LoadingState } from '../../components/StateViews';
-import { DocumentsTab } from './develop/DocumentsTab';
-import { PolicyTab } from './develop/PolicyTab';
-import { RoutingTab } from './develop/RoutingTab';
-import { OverviewTab } from './overview/OverviewTab';
-
-export function ApiDetailPage() {
-  const detailQuery = useApiDetail();
-  const [tab, setTab] = useState(0);
-
-  if (detailQuery.isLoading) return <LoadingState label="Loading API" />;
-  if (detailQuery.error || !detailQuery.data) {
-    return <ErrorState title="API not found" />;
-  }
-
-  const detail = detailQuery.data;
-
-  // Develop tab set mirrors the product: Overview, then Policy/Routing/Documents.
-  const tabs = ['Overview', 'Policy', 'Routing', 'Documents'] as const;
-  const active = tabs[tab] ?? 'Overview';
-
-  return (
-    <PageContent fullWidth>
-      <PageTitle>
-        <PageTitle.Header>{detail.displayName}</PageTitle.Header>
-        <PageTitle.SubHeader>{detail.description}</PageTitle.SubHeader>
-      </PageTitle>
-
-      <Tabs
-        onChange={(_event, value) => setTab(value)}
-        sx={{ mb: 3 }}
-        value={tab}
-      >
-        {tabs.map((label) => (
-          <Tab key={label} label={label} />
-        ))}
-      </Tabs>
-
-      {active === 'Overview' && <OverviewTab detail={detail} />}
-      {active === 'Policy' && <PolicyTab detail={detail} />}
-      {active === 'Routing' && <RoutingTab detail={detail} />}
-      {active === 'Documents' && <DocumentsTab />}
-    </PageContent>
-  );
-}
diff --git a/portals/api-control-plane/src/features/projects/NewProjectDialog.tsx b/portals/api-control-plane/src/features/projects/NewProjectDialog.tsx
deleted file mode 100644
index e58072df01..0000000000
--- a/portals/api-control-plane/src/features/projects/NewProjectDialog.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Stack,
-  TextField,
-} from '@wso2/oxygen-ui';
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useCreateProject } from '../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../components/Notifications';
-import { routes } from '../../routes/paths';
-
-const NAME_MAX = 120;
-
-export type NewProjectDialogProps = {
-  open: boolean;
-  orgHandle: string;
-  onClose: () => void;
-};
-
-/**
- * Create a project (platform-api `POST /api/v1/projects`). The backend persists
- * only name + description — the organization comes from the bearer token — so
- * the form is intentionally minimal. On success it navigates to the new
- * project's home.
- */
-export function NewProjectDialog({
-  open,
-  orgHandle,
-  onClose,
-}: NewProjectDialogProps) {
-  const navigate = useNavigate();
-  const { notify } = useNotifications();
-  const mutation = useCreateProject(orgHandle);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-
-  // Reset fields each time the dialog opens.
-  useEffect(() => {
-    if (open) {
-      setName('');
-      setDescription('');
-    }
-  }, [open]);
-
-  const trimmedName = name.trim();
-  const canSubmit = trimmedName.length > 0 && !mutation.isPending;
-
-  const handleSubmit = async () => {
-    if (!canSubmit) return;
-    try {
-      const project = await mutation.mutateAsync({
-        name: trimmedName,
-        description: description.trim() || undefined,
-      });
-      notify('Project created', 'success');
-      onClose();
-      navigate(routes.projectHome(orgHandle, project.handler));
-    } catch (error) {
-      notify(
-        error instanceof Error ? error.message : 'Failed to create project',
-        'error'
-      );
-    }
-  };
-
-  return (
-    <Dialog
-      fullWidth
-      maxWidth="sm"
-      onClose={mutation.isPending ? undefined : onClose}
-      open={open}
-    >
-      <DialogTitle>Create project</DialogTitle>
-      <DialogContent>
-        <Stack spacing={2.5} sx={{ mt: 1 }}>
-          <TextField
-            autoFocus
-            error={trimmedName.length > NAME_MAX}
-            fullWidth
-            helperText={
-              trimmedName.length > NAME_MAX
-                ? `Name must be ${NAME_MAX} characters or fewer.`
-                : 'A unique name for the project within this organization.'
-            }
-            label="Name"
-            onChange={(event) => setName(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' && canSubmit) handleSubmit();
-            }}
-            placeholder="e.g. Retail APIs"
-            required
-            size="small"
-            value={name}
-          />
-          <TextField
-            fullWidth
-            label="Description"
-            minRows={2}
-            multiline
-            onChange={(event) => setDescription(event.target.value)}
-            placeholder="What this project is for (optional)"
-            size="small"
-            value={description}
-          />
-        </Stack>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          color="inherit"
-          disabled={mutation.isPending}
-          onClick={onClose}
-        >
-          Cancel
-        </Button>
-        <Button
-          disabled={!canSubmit || trimmedName.length > NAME_MAX}
-          onClick={handleSubmit}
-          variant="contained"
-        >
-          {mutation.isPending ? 'Creating…' : 'Create'}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
diff --git a/portals/api-control-plane/src/features/projects/ProjectListPage.test.tsx b/portals/api-control-plane/src/features/projects/ProjectListPage.test.tsx
deleted file mode 100644
index c1cff68293..0000000000
--- a/portals/api-control-plane/src/features/projects/ProjectListPage.test.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Route, Routes } from 'react-router-dom';
-import type { UseQueryResult } from '@tanstack/react-query';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { projects as mockProjects } from '../../api/mocks/data';
-import type { ApiClient } from '../../api/ApiClientProvider';
-import { renderWithProviders, screen, waitFor, within } from '../../test/utils';
-import { makeConsoleScope } from '../../test/mockScope';
-import type { Project } from '../../types/domain';
-
-vi.mock('../../api/hooks/useMvpQueries', async (importActual) => ({
-  ...(await importActual<typeof import('../../api/hooks/useMvpQueries')>()),
-  useProjects: vi.fn(),
-}));
-
-import { useProjects } from '../../api/hooks/useMvpQueries';
-import { ProjectListPage } from './ProjectListPage';
-
-const ORG = 'api-platform-demo';
-
-// Minimal cast helper for the bits of the query result the page reads.
-const queryResult = (overrides: Partial<UseQueryResult<Project[], Error>>) =>
-  overrides as UseQueryResult<Project[], Error>;
-
-function renderPage(apiClient?: Partial<ApiClient>) {
-  return renderWithProviders(
-    <Routes>
-      <Route
-        path="/organizations/:orgHandle/projects"
-        element={<ProjectListPage />}
-      />
-    </Routes>,
-    {
-      route: `/organizations/${ORG}/projects`,
-      scope: makeConsoleScope(),
-      apiClient,
-    }
-  );
-}
-
-describe('ProjectListPage', () => {
-  beforeEach(() => vi.clearAllMocks());
-
-  it('shows the loading state', () => {
-    vi.mocked(useProjects).mockReturnValue(queryResult({ isLoading: true }));
-    renderPage();
-    expect(screen.getByText('Loading projects')).toBeInTheDocument();
-  });
-
-  it('shows an error state with the message', () => {
-    vi.mocked(useProjects).mockReturnValue(
-      queryResult({ isLoading: false, error: new Error('boom') })
-    );
-    renderPage();
-    expect(screen.getByText(/Unable to load projects\. boom/)).toBeInTheDocument();
-  });
-
-  it('shows the empty state when there are no projects', () => {
-    vi.mocked(useProjects).mockReturnValue(
-      queryResult({ isLoading: false, data: [] })
-    );
-    renderPage();
-    expect(screen.getByText('No projects found')).toBeInTheDocument();
-  });
-
-  it('renders the projects and filters by search', async () => {
-    vi.mocked(useProjects).mockReturnValue(
-      queryResult({ isLoading: false, data: mockProjects })
-    );
-    const { user } = renderPage();
-
-    expect(screen.getByText('Retail APIs')).toBeInTheDocument();
-    expect(screen.getByText('Internal Tools')).toBeInTheDocument();
-
-    await user.type(screen.getByPlaceholderText('Search projects'), 'internal');
-
-    expect(screen.queryByText('Retail APIs')).not.toBeInTheDocument();
-    expect(screen.getByText('Internal Tools')).toBeInTheDocument();
-  });
-
-  it('deletes a project after type-to-confirm', async () => {
-    vi.mocked(useProjects).mockReturnValue(
-      queryResult({ isLoading: false, data: mockProjects })
-    );
-    const deleteProject = vi.fn().mockResolvedValue(undefined);
-    const { user } = renderPage({ deleteProject });
-
-    // Open the actions menu on the first card (Retail APIs) and choose Delete.
-    await user.click(screen.getAllByLabelText('Project actions')[0]);
-    await user.click(screen.getByRole('menuitem', { name: /Delete/ }));
-
-    // Type-to-confirm guards the irreversible delete.
-    const dialog = screen.getByRole('dialog');
-    const confirmButton = within(dialog).getByRole('button', { name: 'Delete' });
-    expect(confirmButton).toBeDisabled();
-
-    await user.type(within(dialog).getByRole('textbox'), 'Retail APIs');
-    await user.click(confirmButton);
-
-    await waitFor(() => expect(deleteProject).toHaveBeenCalledTimes(1));
-    expect(deleteProject.mock.calls[0][1]).toMatchObject({ name: 'Retail APIs' });
-  });
-});
diff --git a/portals/api-control-plane/src/features/projects/ProjectListPage.tsx b/portals/api-control-plane/src/features/projects/ProjectListPage.tsx
deleted file mode 100644
index 68adf63aed..0000000000
--- a/portals/api-control-plane/src/features/projects/ProjectListPage.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {
-  Box,
-  Button,
-  InputAdornment,
-  PageContent,
-  PageTitle,
-  Stack,
-  TextField,
-  Typography,
-} from '@wso2/oxygen-ui';
-import { Plus, Search } from '@wso2/oxygen-ui-icons-react';
-import { useMemo, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import { useDeleteProject, useProjects } from '../../api/hooks/useMvpQueries';
-import { ProjectsGrid } from '../../components/cards/ProjectsGrid';
-import { ConfirmDialog } from '../../components/ConfirmDialog';
-import { useNotifications } from '../../components/Notifications';
-import { EmptyState, ErrorState, LoadingState } from '../../components/StateViews';
-import { routes } from '../../routes/paths';
-import { useConsoleScope } from '../../scope/ConsoleScopeProvider';
-import type { Project } from '../../types/domain';
-import { NewProjectDialog } from './NewProjectDialog';
-
-export function ProjectListPage() {
-  const { orgHandle = '' } = useParams();
-  const navigate = useNavigate();
-  const { organization } = useConsoleScope();
-  const { notify } = useNotifications();
-  const [search, setSearch] = useState('');
-  const [createOpen, setCreateOpen] = useState(false);
-  const [toDelete, setToDelete] = useState<Project | null>(null);
-  const projectsQuery = useProjects();
-  const deleteProjectMutation = useDeleteProject();
-  const projects = projectsQuery.data || [];
-
-  const confirmDelete = () => {
-    if (!toDelete) return;
-    deleteProjectMutation.mutate(toDelete, {
-      onSuccess: () => {
-        notify(`Deleted "${toDelete.name}".`, 'success');
-        setToDelete(null);
-      },
-      onError: (error) =>
-        notify(
-          error instanceof Error ? error.message : 'Delete failed',
-          'error'
-        ),
-    });
-  };
-
-  const filteredProjects = useMemo(() => {
-    const term = search.trim().toLowerCase();
-    if (!term) return projects;
-    return projects.filter((project) =>
-      [project.name, project.handler, project.region, project.description]
-        .filter(Boolean)
-        .some((field) => field!.toLowerCase().includes(term))
-    );
-  }, [projects, search]);
-
-  const openProject = (project: Project) =>
-    navigate(routes.projectHome(orgHandle, project.handler));
-
-  if (projectsQuery.isLoading) return <LoadingState label="Loading projects" />;
-  if (projectsQuery.error) {
-    return (
-      <ErrorState
-        message={`Unable to load projects. ${projectsQuery.error.message}`}
-      />
-    );
-  }
-
-  return (
-    <PageContent fullWidth>
-      <PageTitle>
-        <PageTitle.Header>Projects</PageTitle.Header>
-        <PageTitle.SubHeader>
-          {organization?.name
-            ? `Project workspaces in ${organization.name}.`
-            : 'Select a project to manage APIs.'}
-        </PageTitle.SubHeader>
-        <PageTitle.Actions>
-          <Button
-            onClick={() => setCreateOpen(true)}
-            startIcon={<Plus />}
-            sx={{ borderRadius: 5 }}
-            variant="contained"
-          >
-            New project
-          </Button>
-        </PageTitle.Actions>
-      </PageTitle>
-
-      {projects.length === 0 ? (
-        <EmptyState
-          actionLabel="Create project"
-          onAction={() => setCreateOpen(true)}
-          title="No projects found"
-          description="Create a project to organize and manage your APIs."
-        />
-      ) : (
-        <Stack spacing={2}>
-          <Box
-            sx={{
-              alignItems: 'center',
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: 2,
-              justifyContent: 'space-between',
-            }}
-          >
-            <Typography variant="h6">
-              {filteredProjects.length} project
-              {filteredProjects.length === 1 ? '' : 's'}
-            </Typography>
-            <TextField
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder="Search projects"
-              size="small"
-              slotProps={{
-                input: {
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <Search size={18} />
-                    </InputAdornment>
-                  ),
-                },
-              }}
-              sx={{ minWidth: 260 }}
-              value={search}
-            />
-          </Box>
-          {filteredProjects.length === 0 ? (
-            <EmptyState
-              title="No matching projects"
-              description="Try a different project name, handler, region, or description."
-            />
-          ) : (
-            <ProjectsGrid
-              onDelete={setToDelete}
-              onOpen={openProject}
-              orgHandle={orgHandle}
-              projects={filteredProjects}
-            />
-          )}
-        </Stack>
-      )}
-
-      <NewProjectDialog
-        onClose={() => setCreateOpen(false)}
-        open={createOpen}
-        orgHandle={orgHandle}
-      />
-
-      <ConfirmDialog
-        confirmInputLabel={`Type "${toDelete?.name ?? ''}" to confirm`}
-        confirmLabel="Delete"
-        confirmPhrase={toDelete?.name ?? ''}
-        destructive
-        loading={deleteProjectMutation.isPending}
-        message={
-          toDelete
-            ? `This permanently deletes the project "${toDelete.name}" and its configuration. A project that still has APIs cannot be deleted. This action is irreversible.`
-            : ''
-        }
-        onCancel={() => setToDelete(null)}
-        onConfirm={confirmDelete}
-        open={toDelete !== null}
-        title="Delete project"
-      />
-    </PageContent>
-  );
-}
diff --git a/portals/api-control-plane/src/features/billing/ProductActivation.tsx b/portals/api-control-plane/src/hooks/ProductActivation.tsx
similarity index 95%
rename from portals/api-control-plane/src/features/billing/ProductActivation.tsx
rename to portals/api-control-plane/src/hooks/ProductActivation.tsx
index 384f065def..fa0b7e4344 100644
--- a/portals/api-control-plane/src/features/billing/ProductActivation.tsx
+++ b/portals/api-control-plane/src/hooks/ProductActivation.tsx
@@ -18,8 +18,8 @@
 
 import { useEffect, useRef } from 'react';
 
-import { runtimeConfig } from '../../config/runtime';
-import { useAuth } from '../auth/AuthProvider';
+import { runtimeConfig } from '../config/runtime';
+import { useAuth } from '../contexts/auth/AuthProvider';
 
 // Product code this console activates on first login. Must match the billing
 // product whose subscription drives APIP gateway provisioning.
diff --git a/portals/api-control-plane/src/i18n/messages/en.json b/portals/api-control-plane/src/i18n/messages/en.json
index 0967ef424b..3dbbfaa067 100644
--- a/portals/api-control-plane/src/i18n/messages/en.json
+++ b/portals/api-control-plane/src/i18n/messages/en.json
@@ -1 +1,136 @@
-{}
+{
+  "aiWorkspace.pages.appShell.appShellPages.projects.ExploreMoreCard.explore.more": {
+    "defaultMessage": "Explore More"
+  },
+  "aiWorkspace.pages.appShell.appShellPages.proxies.LLMProxyOverview.context.label": {
+    "defaultMessage": "Context :"
+  },
+  "aiWorkspace.pages.appShell.appShellPages.proxies.LLMProxyOverview.last.updated": {
+    "defaultMessage": "Last updated :"
+  },
+  "organization.home.getStarted": {
+    "defaultMessage": "Get started",
+    "description": "Organization home page get started section title"
+  },
+  "project.card.actionsLabel": {
+    "defaultMessage": "Project actions",
+    "description": "Accessible label for the button opening the card overflow menu."
+  },
+  "project.card.apiCount": {
+    "defaultMessage": "{count, plural, one {# API} other {# APIs}}"
+  },
+  "project.card.apiCountLoading": {
+    "defaultMessage": "… APIs",
+    "description": "Placeholder shown while the API count is still loading."
+  },
+  "project.card.defaultBadge": {
+    "defaultMessage": "DEFAULT",
+    "description": "Badge marking the organization’s default project."
+  },
+  "project.card.delete": {
+    "defaultMessage": "Delete"
+  },
+  "project.card.deployedCount": {
+    "defaultMessage": "{count} deployed"
+  },
+  "project.card.deployedCountLoading": {
+    "defaultMessage": "… deployed",
+    "description": "Placeholder shown while the deployed count is still loading."
+  },
+  "project.card.fallbackDescription": {
+    "defaultMessage": "Project workspace",
+    "description": "Shown in place of a description when the project has none."
+  },
+  "project.card.neverUpdated": {
+    "defaultMessage": "Not updated yet"
+  },
+  "project.card.settingsLabel": {
+    "defaultMessage": "Project settings"
+  },
+  "project.card.updatedAt": {
+    "defaultMessage": "Updated {relative}",
+    "description": "Footer timestamp; {relative} is a phrase such as \"3 hours ago\"."
+  },
+  "project.list.count": {
+    "defaultMessage": "{count, plural, one {# project} other {# projects}}"
+  },
+  "project.list.createProjectButton": {
+    "defaultMessage": "Create Project"
+  },
+  "project.list.delete.confirmInputLabel": {
+    "defaultMessage": "Type \"{name}\" to confirm",
+    "description": "Label for the type-to-confirm field guarding an irreversible delete."
+  },
+  "project.list.delete.confirmLabel": {
+    "defaultMessage": "Delete"
+  },
+  "project.list.delete.failed": {
+    "defaultMessage": "Delete failed",
+    "description": "Fallback toast when the server gives no reason for a failure."
+  },
+  "project.list.delete.message": {
+    "defaultMessage": "This permanently deletes the project \"{name}\" and its configuration. A project that still has APIs cannot be deleted. This action is irreversible."
+  },
+  "project.list.delete.succeeded": {
+    "defaultMessage": "Deleted \"{name}\"."
+  },
+  "project.list.delete.title": {
+    "defaultMessage": "Delete project"
+  },
+  "project.list.empty.action": {
+    "defaultMessage": "Create project"
+  },
+  "project.list.empty.description": {
+    "defaultMessage": "Create a project to organize and manage your APIs."
+  },
+  "project.list.empty.title": {
+    "defaultMessage": "No projects found"
+  },
+  "project.list.error.message": {
+    "defaultMessage": "Unable to load projects. {reason}"
+  },
+  "project.list.loading": {
+    "defaultMessage": "Loading projects"
+  },
+  "project.list.noMatches.description": {
+    "defaultMessage": "Try a different project name or handle."
+  },
+  "project.list.noMatches.title": {
+    "defaultMessage": "No matching projects"
+  },
+  "project.list.rowsPerPage": {
+    "defaultMessage": "Projects per page"
+  },
+  "project.list.searchPlaceholder": {
+    "defaultMessage": "Search projects"
+  },
+  "project.list.sort.nameAscending": {
+    "defaultMessage": "Name (A–Z)",
+    "description": "Sort option: alphabetical by project name, ascending."
+  },
+  "project.list.sort.nameDescending": {
+    "defaultMessage": "Name (Z–A)",
+    "description": "Sort option: alphabetical by project name, descending."
+  },
+  "project.list.sort.newest": {
+    "defaultMessage": "Newest first",
+    "description": "Sort option: by creation date, most recent project first."
+  },
+  "project.list.sort.oldest": {
+    "defaultMessage": "Oldest first",
+    "description": "Sort option: by creation date, earliest project first."
+  },
+  "project.list.sortLabel": {
+    "defaultMessage": "Sort by",
+    "description": "Label for the control choosing the project list order."
+  },
+  "project.list.subHeader.default": {
+    "defaultMessage": "Select a project to manage APIs."
+  },
+  "project.list.subHeader.withOrganization": {
+    "defaultMessage": "Project workspaces in {organizationName}."
+  },
+  "project.list.title": {
+    "defaultMessage": "Projects"
+  }
+}
diff --git a/portals/api-control-plane/src/navigation/useNavigationItems.ts b/portals/api-control-plane/src/navigation/useNavigationItems.ts
index 31bf338ba0..bd7c5b2027 100644
--- a/portals/api-control-plane/src/navigation/useNavigationItems.ts
+++ b/portals/api-control-plane/src/navigation/useNavigationItems.ts
@@ -30,14 +30,14 @@ import {
   type NavigationItem,
 } from './navigationTypes';
 
-const isLevelAvailable = (
-  definition: NavigationDefinition,
-  scope: ReturnType<typeof useConsoleScope>
-) => {
-  if (definition.level === 'organization') return scope.isOrganizationScope;
-  if (definition.level === 'project') return scope.isProjectScope;
-  return scope.isApiScope;
-};
+// const isLevelAvailable = (
+//   definition: NavigationDefinition,
+//   scope: ReturnType<typeof useConsoleScope>
+// ) => {
+//   if (definition.level === 'organization') return scope.isOrganizationScope;
+//   if (definition.level === 'project') return scope.isProjectScope;
+//   return scope.isApiScope;
+// };
 
 const isFeatureEnabled = (definition: NavigationDefinition) =>
   !definition.featureKey ||
@@ -95,12 +95,12 @@ export const useNavigationItems = (): NavigationItem[] => {
     const combinedRegistry = [...navigationRegistry, ...extensionDefinitions];
 
     return combinedRegistry
-      .filter((definition) => isLevelAvailable(definition, scope))
+      // .filter((definition) => isLevelAvailable(definition, scope))
       .filter(isFeatureEnabled)
       .filter((definition) => definition.isVisible?.(scope) ?? true)
       .map((definition) => {
         const to = definition.to(scope);
-        if (!to) return undefined;
+        // if (!to) return undefined;
         return {
           group: definition.group ?? NAVIGATION_GROUP_BY_LEVEL[definition.level],
           icon: definition.icon,
diff --git a/portals/api-control-plane/src/layouts/AppHeader.tsx b/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
similarity index 96%
rename from portals/api-control-plane/src/layouts/AppHeader.tsx
rename to portals/api-control-plane/src/pages/appShell/AppHeader.tsx
index 3d6bb7ceab..76b8f13160 100644
--- a/portals/api-control-plane/src/layouts/AppHeader.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
@@ -29,9 +29,9 @@ import {
 import { Bell, Boxes, Building2, LogOut, WSO2 } from '@wso2/oxygen-ui-icons-react';
 import { useNavigate } from 'react-router-dom';
 
-import { useAuth } from '../features/auth/AuthProvider';
-import { routes } from '../routes/paths';
-import { useConsoleScope } from '../scope/ConsoleScopeProvider';
+import { useAuth } from '../../contexts/auth/AuthProvider';
+import { routes } from '../../routes/paths';
+import { useConsoleScope } from '../../scope/ConsoleScopeProvider';
 
 export function AppHeader() {
   const navigate = useNavigate();
diff --git a/portals/api-control-plane/src/layouts/AppLayout.tsx b/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
similarity index 94%
rename from portals/api-control-plane/src/layouts/AppLayout.tsx
rename to portals/api-control-plane/src/pages/appShell/AppLayout.tsx
index 9ae307a555..4db03b5c6c 100644
--- a/portals/api-control-plane/src/layouts/AppLayout.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
@@ -28,10 +28,10 @@ import { Bell } from '@wso2/oxygen-ui-icons-react';
 import { Suspense } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
 
-import { LoadingState } from '../components/StateViews';
-import { runtimeConfig } from '../config/runtime';
-import { routes } from '../routes/paths';
-import { useConsoleScope } from '../scope/ConsoleScopeProvider';
+import { LoadingState } from '../../components/StateViews';
+import { runtimeConfig } from '../../config/runtime';
+import { routes } from '../../routes/paths';
+import { useConsoleScope } from '../../scope/ConsoleScopeProvider';
 import { AppHeader } from './AppHeader';
 import { APP_FOOTER_ID } from './appLayoutConstants';
 import { AppSidebar } from './AppSidebar';
diff --git a/portals/api-control-plane/src/layouts/AppSidebar.tsx b/portals/api-control-plane/src/pages/appShell/AppSidebar.tsx
similarity index 95%
rename from portals/api-control-plane/src/layouts/AppSidebar.tsx
rename to portals/api-control-plane/src/pages/appShell/AppSidebar.tsx
index 49837f0263..2795e1d47c 100644
--- a/portals/api-control-plane/src/layouts/AppSidebar.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppSidebar.tsx
@@ -19,7 +19,7 @@
 import { Sidebar, useAppShell } from '@wso2/oxygen-ui';
 import { Link } from 'react-router-dom';
 
-import { useNavigationGroups } from '../navigation/useNavigationItems';
+import { useNavigationGroups } from '../../navigation/useNavigationItems';
 
 export function AppSidebar() {
   const groups = useNavigationGroups();
diff --git a/portals/api-control-plane/src/layouts/appLayoutConstants.ts b/portals/api-control-plane/src/pages/appShell/appLayoutConstants.ts
similarity index 100%
rename from portals/api-control-plane/src/layouts/appLayoutConstants.ts
rename to portals/api-control-plane/src/pages/appShell/appLayoutConstants.ts
diff --git a/portals/api-control-plane/src/features/apis/ApiCreatePage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.test.tsx
similarity index 97%
rename from portals/api-control-plane/src/features/apis/ApiCreatePage.test.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.test.tsx
index 0f21a35159..bc8aee7cb1 100644
--- a/portals/api-control-plane/src/features/apis/ApiCreatePage.test.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.test.tsx
@@ -19,7 +19,7 @@
 import { Route, Routes } from 'react-router-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { renderWithProviders, screen, waitFor } from '../../test/utils';
+import { renderWithProviders, screen, waitFor } from '../../../../test/utils';
 
 // Capture the create mutation so we can assert the submitted input.
 const { mutateAsync } = vi.hoisted(() => ({ mutateAsync: vi.fn() }));
diff --git a/portals/api-control-plane/src/features/apis/ApiCreatePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.tsx
similarity index 99%
rename from portals/api-control-plane/src/features/apis/ApiCreatePage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.tsx
index 77c650cb0a..361f5214c1 100644
--- a/portals/api-control-plane/src/features/apis/ApiCreatePage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.tsx
@@ -58,16 +58,16 @@ import {
 import yaml from 'js-yaml';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { useCreateApi } from '../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../components/Notifications';
-import { routes } from '../../routes/paths';
+import { useCreateApi } from '../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../components/Notifications';
+import { routes } from '../../../../routes/paths';
 import type {
   ApiOperation,
   CreateApiInput,
   CreateApiSource,
   HttpMethod,
   UpstreamAuth,
-} from '../../types/domain';
+} from '../../../../types/domain';
 import { isValidUrl, methodColor } from './develop/developEdit';
 
 const OAS_METHODS = [
diff --git a/portals/api-control-plane/src/features/apis/ApiDetailPage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.test.tsx
similarity index 91%
rename from portals/api-control-plane/src/features/apis/ApiDetailPage.test.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.test.tsx
index 117dc9e259..db0a18d484 100644
--- a/portals/api-control-plane/src/features/apis/ApiDetailPage.test.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.test.tsx
@@ -20,13 +20,13 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import { Route, Routes } from 'react-router-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { useApiDetail } from '../../api/hooks/useMvpQueries';
-import { renderWithProviders, screen } from '../../test/utils';
-import type { ApiDetail } from '../../types/domain';
+import { useApiDetail } from '../../../../api/hooks/useMvpQueries';
+import { renderWithProviders, screen } from '../../../../test/utils';
+import type { ApiDetail } from '../../../../types/domain';
 import { ApiDetailPage } from './ApiDetailPage';
 
 vi.mock('../../api/hooks/useMvpQueries', async (importActual) => ({
-  ...(await importActual<typeof import('../../api/hooks/useMvpQueries')>()),
+  ...(await importActual<typeof import('../../../../api/hooks/useMvpQueries')>()),
   useApiDetail: vi.fn(),
 }));
 
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
new file mode 100644
index 0000000000..aeb7f2d99f
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
@@ -0,0 +1,212 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useState } from 'react';
+import { Avatar, Box, Button, Card, Chip, PageContent, Stack, Tab, Tabs, Typography } from '@wso2/oxygen-ui';
+
+import { useApiDetail } from '../../../../api/hooks/useMvpQueries';
+import { ErrorState, LoadingState } from '../../../../components/StateViews';
+import { DocumentsTab } from './develop/DocumentsTab';
+import { PolicyTab } from './develop/PolicyTab';
+import { RoutingTab } from './develop/RoutingTab';
+import { OverviewTab } from './overview/OverviewTab';
+import { FormattedMessage } from 'react-intl';
+
+export function ApiDetailPage() {
+  const detailQuery = useApiDetail();
+  const [tab, setTab] = useState(0);
+
+  if (detailQuery.isLoading) return <LoadingState label="Loading API" />;
+  if (detailQuery.error || !detailQuery.data) {
+    return <ErrorState title="API not found" />;
+  }
+
+  const detail = detailQuery.data;
+
+  // Develop tab set mirrors the product: Overview, then Policy/Routing/Documents.
+  const tabs = ['Overview', 'Policy', 'Routing', 'Documents'] as const;
+  const active = tabs[tab] ?? 'Overview';
+
+  const truncateProviderDisplayName = (
+  name?: string | null,
+  maxLength = 30
+): string => {
+  const normalizedName = name?.trim() ?? '';
+  if (normalizedName.length <= maxLength) {
+    return normalizedName;
+  }
+
+  return `${normalizedName.slice(0, maxLength).trim()}…`;
+};
+
+  return (
+    <PageContent fullWidth>
+      <Stack spacing={3} sx={{ mb: 3 }}>
+      
+         {/* Header card with editable fields */}
+        <Card>
+          <Box sx={{ p: 2 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'stretch',
+                justifyContent: 'space-between',
+                gap: 2,
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  gap: 2,
+                  minWidth: 0,
+                }}
+              >
+                <Avatar
+                  color="secondary"
+                  sx={{
+                    width: 70,
+                    height: 70,
+                    backgroundColor: 'primary.light',
+                    color: 'primary.contrastText',
+                    fontSize: 32,
+                  }}
+                >
+                  {(detail.displayName || '\u2014').trim().slice(0, 2).toUpperCase()}
+                </Avatar>
+
+                <Box sx={{ minWidth: 0 }}>
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    alignItems="center"
+                    flexWrap="wrap"
+                  >
+                    <Typography variant="h3">
+                      {truncateProviderDisplayName(detail.displayName || '\u2014')}
+                    </Typography>
+                    <Chip
+                      label={`${detail.version || '1.0'}`}
+                      size="small"
+                      variant="outlined"
+                      color="primary"
+                    />
+                    {/* Edit page (name/version/context/description). Enabled even
+                        for gateway-created proxies — the page keeps the runtime
+                        fields read-only and allows only the description. */}
+                      {/* <Tooltip
+                        title={
+                          canUpdateProxy ? 'Edit Proxy' : NO_PERMISSION_TOOLTIP
+                        }
+                      >
+                        <Box component="span">
+                          <IconButton
+                            component={RouterLink}
+                            to={`${proxiesPath}/${detail.id}/edit`}
+                            size="small"
+                            disabled={!canUpdateProxy}
+                            sx={DISABLED_ACTION_SX}
+                          >
+                            <Edit size={16} />
+                          </IconButton>
+                        </Box>
+                      </Tooltip> */}
+                  </Stack>
+                  <Stack spacing={0.1} sx={{ mt: 1 }}>
+                    <Stack direction="row" alignItems="center" gap={2}>
+                      <Typography variant="caption" color="text.secondary">
+                        <FormattedMessage
+                          id="aiWorkspace.pages.appShell.appShellPages.proxies.LLMProxyOverview.context.label"
+                          defaultMessage="Context :"
+                        />
+                      </Typography>
+                      <Typography variant="body2">
+                        {detail.context || '/'}
+                      </Typography>
+                    </Stack>
+                    <Stack direction="row" alignItems="center" gap={2}>
+                      <Typography variant="caption" color="text.secondary">
+                        <FormattedMessage
+                          id="aiWorkspace.pages.appShell.appShellPages.proxies.LLMProxyOverview.last.updated"
+                          defaultMessage={'Last updated :'}
+                        />
+                      </Typography>
+                      <Typography variant="body2">
+                        {detail.updatedAt}
+                      </Typography>
+                    </Stack>
+                  </Stack>
+                </Box>
+              </Box>
+
+              <Stack
+                direction="column"
+                justifyContent="space-between"
+                alignItems="flex-end"
+                sx={{ alignSelf: 'stretch' }}
+              >
+                {/* Deployments remain viewable for gateway-created proxies (deploy/
+                    redeploy/restore/undeploy are disabled on the page itself), so the
+                    button navigates but is relabelled "View Deployments". */}
+                <Button
+                  variant="contained"
+                  // component={RouterLink}
+                  // to={`${proxiesPath}/${detail.id}/deploy`}
+                >
+                  {/* {isReadOnlyProxy ? 'View Deployments' : 'Deploy to Gateway'} */}
+                  Deploy to Gateway
+                </Button>
+                {/* <DisabledActionTooltip
+                  disabled={!canDeleteProxy || Boolean(deleteBlockedReason)}
+                  title={
+                    !canDeleteProxy ? NO_PERMISSION_TOOLTIP : deleteBlockedReason
+                  }
+                >
+                  <IconButton
+                    color="error"
+                    disabled={!canDeleteProxy || Boolean(deleteBlockedReason)}
+                    onClick={() => setDeleteDialogOpen(true)}
+                    aria-label="Delete proxy"
+                  >
+                    <Trash2 size={16} />
+                  </IconButton>
+                </DisabledActionTooltip> */}
+              </Stack>
+            </Box>
+          </Box>
+        </Card>
+      
+      </Stack>
+
+      <Tabs
+        onChange={(_event, value) => setTab(value)}
+        sx={{ mb: 3 }}
+        value={tab}
+      >
+        {tabs.map((label) => (
+          <Tab key={label} label={label} />
+        ))}
+      </Tabs>
+
+      {active === 'Overview' && <OverviewTab detail={detail} />}
+      {active === 'Policy' && <PolicyTab detail={detail} />}
+      {active === 'Routing' && <RoutingTab detail={detail} />}
+      {active === 'Documents' && <DocumentsTab />}
+    </PageContent>
+  );
+}
diff --git a/portals/api-control-plane/src/features/apis/ApiListPage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx
similarity index 91%
rename from portals/api-control-plane/src/features/apis/ApiListPage.test.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx
index 22e5d7139b..8ad80528af 100644
--- a/portals/api-control-plane/src/features/apis/ApiListPage.test.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx
@@ -20,17 +20,17 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import { Route, Routes } from 'react-router-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { components as mockComponents } from '../../api/mocks/data';
-import { renderWithProviders, screen } from '../../test/utils';
-import type { Api } from '../../types/domain';
+import { components as mockComponents } from '../../../../api/mocks/data';
+import { renderWithProviders, screen } from '../../../../test/utils';
+import type { Api } from '../../../../types/domain';
 
 vi.mock('../../api/hooks/useMvpQueries', async (importActual) => ({
-  ...(await importActual<typeof import('../../api/hooks/useMvpQueries')>()),
+  ...(await importActual<typeof import('../../../../api/hooks/useMvpQueries')>()),
   useApis: vi.fn(),
   useDeleteApi: vi.fn(),
 }));
 
-import { useApis, useDeleteApi } from '../../api/hooks/useMvpQueries';
+import { useApis, useDeleteApi } from '../../../../api/hooks/useMvpQueries';
 import { ApiListPage } from './ApiListPage';
 
 const ROUTE = '/organizations/acme/projects/retail/apis';
diff --git a/portals/api-control-plane/src/features/apis/ApiListPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.tsx
similarity index 92%
rename from portals/api-control-plane/src/features/apis/ApiListPage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.tsx
index 5c89ff4c3e..91d21a9287 100644
--- a/portals/api-control-plane/src/features/apis/ApiListPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.tsx
@@ -39,19 +39,19 @@ import {
 } from '@wso2/oxygen-ui-icons-react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { useApis, useDeleteApi } from '../../api/hooks/useMvpQueries';
-import { ApiCardGrid } from '../../components/cards/ApiCardGrid';
-import { filterApis, groupApisByKind } from '../../components/cards/apiDisplay';
-import { ApiListView } from '../../components/cards/ApiListView';
-import { ConfirmDialog } from '../../components/ConfirmDialog';
-import { useNotifications } from '../../components/Notifications';
+import { useApis, useDeleteApi } from '../../../../api/hooks/useMvpQueries';
+import { ApiCardGrid } from '../../../../components/cards/ApiCardGrid';
+import { filterApis, groupApisByKind } from '../../../../components/cards/apiDisplay';
+import { ApiListView } from '../../../../components/cards/ApiListView';
+import { ConfirmDialog } from '../../../../components/ConfirmDialog';
+import { useNotifications } from '../../../../components/Notifications';
 import {
   EmptyState,
   ErrorState,
   LoadingState,
-} from '../../components/StateViews';
-import { routes } from '../../routes/paths';
-import type { Api } from '../../types/domain';
+} from '../../../../components/StateViews';
+import { routes } from '../../../../routes/paths';
+import type { Api } from '../../../../types/domain';
 
 type ViewMode = 'grid' | 'list';
 
diff --git a/portals/api-control-plane/src/features/apis/apiCapabilities.test.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.test.ts
similarity index 96%
rename from portals/api-control-plane/src/features/apis/apiCapabilities.test.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.test.ts
index cee82a6cfe..23e81354c4 100644
--- a/portals/api-control-plane/src/features/apis/apiCapabilities.test.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.test.ts
@@ -18,7 +18,7 @@
 
 import { describe, expect, it } from 'vitest';
 
-import type { Api } from '../../types/domain';
+import type { Api } from '../../../../types/domain';
 import { getApiCapabilities } from './apiCapabilities';
 
 const baseApi: Api = {
diff --git a/portals/api-control-plane/src/features/apis/apiCapabilities.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.ts
similarity index 97%
rename from portals/api-control-plane/src/features/apis/apiCapabilities.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.ts
index 79d9e08b09..e72e866293 100644
--- a/portals/api-control-plane/src/features/apis/apiCapabilities.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type { Api } from '../../types/domain';
+import type { Api } from '../../../../types/domain';
 
 export type ApiTestMode = 'curl' | 'none';
 
diff --git a/portals/api-control-plane/src/features/apis/develop/AttachedPolicyList.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/AttachedPolicyList.tsx
similarity index 98%
rename from portals/api-control-plane/src/features/apis/develop/AttachedPolicyList.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/AttachedPolicyList.tsx
index 2b0b401efb..80cb37dac0 100644
--- a/portals/api-control-plane/src/features/apis/develop/AttachedPolicyList.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/AttachedPolicyList.tsx
@@ -28,7 +28,7 @@ import {
 import { GripVertical, Pencil, Plus, Shield, Trash2 } from '@wso2/oxygen-ui-icons-react';
 import { useState } from 'react';
 
-import type { ApiPolicy } from '../../../types/domain';
+import type { ApiPolicy } from '../../../../../types/domain';
 
 /**
  * Renders a flat, ordered list of attached policies (the Hybrid-style policy
diff --git a/portals/api-control-plane/src/features/apis/develop/AvailablePoliciesPanel.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/AvailablePoliciesPanel.tsx
similarity index 96%
rename from portals/api-control-plane/src/features/apis/develop/AvailablePoliciesPanel.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/AvailablePoliciesPanel.tsx
index dff8f23e28..648c4bafc8 100644
--- a/portals/api-control-plane/src/features/apis/develop/AvailablePoliciesPanel.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/AvailablePoliciesPanel.tsx
@@ -30,13 +30,13 @@ import {
 import { ExternalLink, GripVertical, Search, Shield } from '@wso2/oxygen-ui-icons-react';
 import { useMemo, useState } from 'react';
 
-import type { PolicySummary } from '../../../api/policyHub/policyHubClient';
+import type { PolicySummary } from '../../../../../api/policyHub/policyHubClient';
 import {
   usePolicyHubCategories,
   usePolicyHubPolicies,
-} from '../../../api/policyHub/usePolicyHub';
-import { EmptyState, ErrorState } from '../../../components/StateViews';
-import { runtimeConfig } from '../../../config/runtime';
+} from '../../../../../api/policyHub/usePolicyHub';
+import { EmptyState, ErrorState } from '../../../../../components/StateViews';
+import { runtimeConfig } from '../../../../../config/runtime';
 import { POLICY_DND_MIME, setDraggedPolicy } from './policyDnd';
 
 const PAGE_SIZE = 20;
diff --git a/portals/api-control-plane/src/features/apis/develop/DocumentsTab.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DocumentsTab.tsx
similarity index 92%
rename from portals/api-control-plane/src/features/apis/develop/DocumentsTab.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DocumentsTab.tsx
index d799365747..3b7650bd85 100644
--- a/portals/api-control-plane/src/features/apis/develop/DocumentsTab.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DocumentsTab.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { EmptyState } from '../../../components/StateViews';
+import { EmptyState } from '../../../../../components/StateViews';
 
 export function DocumentsTab() {
   return (
diff --git a/portals/api-control-plane/src/features/apis/develop/PolicyConfigDrawer.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyConfigDrawer.tsx
similarity index 94%
rename from portals/api-control-plane/src/features/apis/develop/PolicyConfigDrawer.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyConfigDrawer.tsx
index 9a04657fb6..76453d4674 100644
--- a/portals/api-control-plane/src/features/apis/develop/PolicyConfigDrawer.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyConfigDrawer.tsx
@@ -28,7 +28,7 @@ import {
 import { ChevronLeft, X } from '@wso2/oxygen-ui-icons-react';
 import { useMemo, useState } from 'react';
 
-import type { PolicySummary } from '../../../api/policyHub/policyHubClient';
+import type { PolicySummary } from '../../../../../api/policyHub/policyHubClient';
 import {
   getByPath,
   initValues,
@@ -36,10 +36,10 @@ import {
   type ParameterValues,
   setByPath,
   topLevelRequiredMissing,
-} from '../../../api/policyHub/policySchema';
-import { usePolicyDefinition } from '../../../api/policyHub/usePolicyHub';
-import { ErrorState } from '../../../components/StateViews';
-import type { ApiPolicy } from '../../../types/domain';
+} from '../../../../../api/policyHub/policySchema';
+import { usePolicyDefinition } from '../../../../../api/policyHub/usePolicyHub';
+import { ErrorState } from '../../../../../components/StateViews';
+import type { ApiPolicy } from '../../../../../types/domain';
 import { defaultForSchema, SchemaField } from './SchemaField';
 
 /** Minimal reference needed to load a policy's definition. */
diff --git a/portals/api-control-plane/src/features/apis/develop/PolicyTab.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyTab.tsx
similarity index 97%
rename from portals/api-control-plane/src/features/apis/develop/PolicyTab.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyTab.tsx
index edf12bff3c..49d337b401 100644
--- a/portals/api-control-plane/src/features/apis/develop/PolicyTab.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyTab.tsx
@@ -31,15 +31,15 @@ import {
 import { ChevronDown, Globe } from '@wso2/oxygen-ui-icons-react';
 import { useState } from 'react';
 
-import { useUpdateApi } from '../../../api/hooks/useMvpQueries';
-import type { PolicySummary } from '../../../api/policyHub/policyHubClient';
-import { usePolicyHub } from '../../../api/policyHub/usePolicyHub';
-import { useNotifications } from '../../../components/Notifications';
+import { useUpdateApi } from '../../../../../api/hooks/useMvpQueries';
+import type { PolicySummary } from '../../../../../api/policyHub/policyHubClient';
+import { usePolicyHub } from '../../../../../api/policyHub/usePolicyHub';
+import { useNotifications } from '../../../../../components/Notifications';
 import type {
   ApiOperation,
   ApiPolicy,
   ApiDetail,
-} from '../../../types/domain';
+} from '../../../../../types/domain';
 import { AttachedPolicyList } from './AttachedPolicyList';
 import { AvailablePoliciesPanel } from './AvailablePoliciesPanel';
 import { SaveBar } from './SaveBar';
diff --git a/portals/api-control-plane/src/features/apis/develop/RoutingTab.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.test.tsx
similarity index 94%
rename from portals/api-control-plane/src/features/apis/develop/RoutingTab.test.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.test.tsx
index 3943d1bb23..634a2a40bf 100644
--- a/portals/api-control-plane/src/features/apis/develop/RoutingTab.test.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.test.tsx
@@ -19,9 +19,9 @@
 import { http, HttpResponse } from 'msw';
 import { describe, expect, it } from 'vitest';
 
-import { server } from '../../../test/server';
-import { renderWithProviders, screen } from '../../../test/utils';
-import type { ApiDetail } from '../../../types/domain';
+import { server } from '../../../../../test/server';
+import { renderWithProviders, screen } from '../../../../../test/utils';
+import type { ApiDetail } from '../../../../../types/domain';
 import { RoutingTab } from './RoutingTab';
 
 const detail: ApiDetail = {
diff --git a/portals/api-control-plane/src/features/apis/develop/RoutingTab.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.tsx
similarity index 99%
rename from portals/api-control-plane/src/features/apis/develop/RoutingTab.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.tsx
index 3ea5771def..6664f04622 100644
--- a/portals/api-control-plane/src/features/apis/develop/RoutingTab.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.tsx
@@ -46,10 +46,10 @@ import {
   X,
 } from '@wso2/oxygen-ui-icons-react';
 
-import { useUpdateApi } from '../../../api/hooks/useMvpQueries';
-import { ConfirmDialog } from '../../../components/ConfirmDialog';
-import { useNotifications } from '../../../components/Notifications';
-import type { ApiOperation, ApiDetail } from '../../../types/domain';
+import { useUpdateApi } from '../../../../../api/hooks/useMvpQueries';
+import { ConfirmDialog } from '../../../../../components/ConfirmDialog';
+import { useNotifications } from '../../../../../components/Notifications';
+import type { ApiOperation, ApiDetail } from '../../../../../types/domain';
 import {
   type BackendResource,
   discoverBackendResources,
diff --git a/portals/api-control-plane/src/features/apis/develop/SaveBar.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/SaveBar.tsx
similarity index 51%
rename from portals/api-control-plane/src/features/apis/develop/SaveBar.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/SaveBar.tsx
index 133f735cd5..0e5233a5e7 100644
--- a/portals/api-control-plane/src/features/apis/develop/SaveBar.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/SaveBar.tsx
@@ -17,30 +17,17 @@
  */
 
 import { Box, Button } from '@wso2/oxygen-ui';
-import { useEffect, useState } from 'react';
 
-import { APP_FOOTER_ID } from '../../../layouts/appLayoutConstants';
+import { useFooterHeight } from '../../../../appShell/useFooterHeight';
+import { stickyBottomBarSx } from '../../../../../theme';
 
-/**
- * Upward elevation shadow for the bottom action bar. Kept as a named token
- * (theme.shadows are all downward) rather than an inline magic value.
- */
-const SAVE_BAR_SHADOW = '0 -2px 10px rgba(0, 0, 0, 0.16)';
-
-/** Static styles for the sticky save bar, kept out of JSX (theme-token based). */
-const saveBarBaseSx = {
-  // alignItems: 'center',
-  // Solid surface (palette token) so scrolling content never shows through.
-  borderColor: 'divider',
-  borderTop: '1px solid',
-  boxShadow: SAVE_BAR_SHADOW,
+/** Layout for the save bar's own content; the sticky treatment is shared. */
+const saveBarLayoutSx = {
   display: 'flex',
   gap: 1,
   justifyContent: 'flex-end',
   mt: 1,
-  position: 'sticky',
   py: 1.5,
-  backdropFilter: 'blur(10px)',
 } as const;
 
 type SaveBarProps = {
@@ -53,25 +40,7 @@ type SaveBarProps = {
 };
 
 /**
- * Measures the app footer's height (it sits at the bottom of the same scroll
- * area this bar sticks to). Returns 0 when the footer is absent (e.g. in tests).
- */
-function useFooterHeight(): number {
-  const [height, setHeight] = useState(0);
-  useEffect(() => {
-    const el = document.getElementById(APP_FOOTER_ID);
-    if (!el) return;
-    const update = () => setHeight(el.offsetHeight);
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-  return height;
-}
-
-/**
- * Solid save action bar pinned to the bottom of a develop tab's scroll area
+ * Save action bar pinned to the bottom of a develop tab's scroll area
  * (`position: sticky`), offset above the app footer so it is never covered.
  */
 export function SaveBar({ disabled, saving, onSave, label = 'Save changes' }: SaveBarProps) {
@@ -79,9 +48,9 @@ export function SaveBar({ disabled, saving, onSave, label = 'Save changes' }: Sa
   return (
     <Box
       sx={[
-        saveBarBaseSx,
+        stickyBottomBarSx,
+        saveBarLayoutSx,
         { bottom: `${footerHeight}px` },
-        (theme) => ({ zIndex: theme.zIndex.appBar }),
       ]}
     >
       <Button disabled={disabled || saving} onClick={onSave} variant="contained">
diff --git a/portals/api-control-plane/src/features/apis/develop/SchemaField.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/SchemaField.tsx
similarity index 99%
rename from portals/api-control-plane/src/features/apis/develop/SchemaField.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/SchemaField.tsx
index 3e7ac2881d..ad0157b986 100644
--- a/portals/api-control-plane/src/features/apis/develop/SchemaField.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/SchemaField.tsx
@@ -36,7 +36,7 @@ import {
   defaultForSchema,
   getByPath,
   type ParameterSchema,
-} from '../../../api/policyHub/policySchema';
+} from '../../../../../api/policyHub/policySchema';
 
 type FieldProps = {
   schema: ParameterSchema;
diff --git a/portals/api-control-plane/src/features/apis/develop/backendDiscovery.test.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/backendDiscovery.test.ts
similarity index 98%
rename from portals/api-control-plane/src/features/apis/develop/backendDiscovery.test.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/backendDiscovery.test.ts
index c5043b05ad..05338df217 100644
--- a/portals/api-control-plane/src/features/apis/develop/backendDiscovery.test.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/backendDiscovery.test.ts
@@ -19,7 +19,7 @@
 import { http, HttpResponse } from 'msw';
 import { describe, expect, it } from 'vitest';
 
-import { server } from '../../../test/server';
+import { server } from '../../../../../test/server';
 import {
   contractCandidates,
   discoverBackendResources,
diff --git a/portals/api-control-plane/src/features/apis/develop/backendDiscovery.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/backendDiscovery.ts
similarity index 100%
rename from portals/api-control-plane/src/features/apis/develop/backendDiscovery.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/backendDiscovery.ts
diff --git a/portals/api-control-plane/src/features/apis/develop/developEdit.test.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/developEdit.test.ts
similarity index 98%
rename from portals/api-control-plane/src/features/apis/develop/developEdit.test.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/developEdit.test.ts
index 02dc4da58c..4d39fa704c 100644
--- a/portals/api-control-plane/src/features/apis/develop/developEdit.test.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/developEdit.test.ts
@@ -18,7 +18,7 @@
 
 import { describe, expect, it } from 'vitest';
 
-import type { ApiOperation, ApiPolicy } from '../../../types/domain';
+import type { ApiOperation, ApiPolicy } from '../../../../../types/domain';
 import {
   addOperation,
   addPolicy,
diff --git a/portals/api-control-plane/src/features/apis/develop/developEdit.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/developEdit.ts
similarity index 99%
rename from portals/api-control-plane/src/features/apis/develop/developEdit.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/developEdit.ts
index d784b3ceac..6a5c87bbef 100644
--- a/portals/api-control-plane/src/features/apis/develop/developEdit.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/developEdit.ts
@@ -21,7 +21,7 @@ import type {
   ApiPolicy,
   ApiDetail,
   HttpMethod,
-} from '../../../types/domain';
+} from '../../../../../types/domain';
 
 export const HTTP_METHODS: HttpMethod[] = [
   'GET',
diff --git a/portals/api-control-plane/src/features/apis/develop/policyDnd.test.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/policyDnd.test.ts
similarity index 100%
rename from portals/api-control-plane/src/features/apis/develop/policyDnd.test.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/policyDnd.test.ts
diff --git a/portals/api-control-plane/src/features/apis/develop/policyDnd.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/policyDnd.ts
similarity index 95%
rename from portals/api-control-plane/src/features/apis/develop/policyDnd.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/policyDnd.ts
index 56c9812ad9..05dad43872 100644
--- a/portals/api-control-plane/src/features/apis/develop/policyDnd.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/policyDnd.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type { PolicySummary } from '../../../api/policyHub/policyHubClient';
+import type { PolicySummary } from '../../../../../api/policyHub/policyHubClient';
 
 /**
  * Native HTML5 drag-and-drop for the policy workspace. The catalog (right panel)
diff --git a/portals/api-control-plane/src/features/apis/overview/ApiKeysPanel.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ApiKeysPanel.tsx
similarity index 98%
rename from portals/api-control-plane/src/features/apis/overview/ApiKeysPanel.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ApiKeysPanel.tsx
index 49fce195a1..3fd533907c 100644
--- a/portals/api-control-plane/src/features/apis/overview/ApiKeysPanel.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ApiKeysPanel.tsx
@@ -40,9 +40,9 @@ import {
   useApiKeys,
   useCreateApiKey,
   useRevokeApiKey,
-} from '../../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../../components/Notifications';
-import type { Api } from '../../../types/domain';
+} from '../../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../../components/Notifications';
+import type { Api } from '../../../../../types/domain';
 
 const formatDate = (value?: string): string => {
   if (!value) return '-';
diff --git a/portals/api-control-plane/src/features/apis/overview/InvokeUrlPanel.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/InvokeUrlPanel.tsx
similarity index 97%
rename from portals/api-control-plane/src/features/apis/overview/InvokeUrlPanel.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/InvokeUrlPanel.tsx
index 44a5b7fb87..0719cf5118 100644
--- a/portals/api-control-plane/src/features/apis/overview/InvokeUrlPanel.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/InvokeUrlPanel.tsx
@@ -33,8 +33,8 @@ import {
 } from '@wso2/oxygen-ui';
 import { Copy } from '@wso2/oxygen-ui-icons-react';
 
-import { useNotifications } from '../../../components/Notifications';
-import type { Gateway } from '../../../types/domain';
+import { useNotifications } from '../../../../../components/Notifications';
+import type { Gateway } from '../../../../../types/domain';
 
 /** `{endpoint}{context}` with a scheme ensured and slashes normalised. */
 export const buildInvokeUrl = (endpoint: string, context?: string): string => {
diff --git a/portals/api-control-plane/src/features/apis/overview/OverviewTab.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.test.tsx
similarity index 96%
rename from portals/api-control-plane/src/features/apis/overview/OverviewTab.test.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.test.tsx
index cde5bb3f0a..da76d9acbc 100644
--- a/portals/api-control-plane/src/features/apis/overview/OverviewTab.test.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.test.tsx
@@ -25,18 +25,18 @@ import {
   useGatewayDeployments,
   useGateways,
   useRevokeApiKey,
-} from '../../../api/hooks/useMvpQueries';
-import { renderWithProviders, screen } from '../../../test/utils';
+} from '../../../../../api/hooks/useMvpQueries';
+import { renderWithProviders, screen } from '../../../../../test/utils';
 import type {
   ApiDetail,
   ApiKeySummary,
   Gateway,
   GatewayDeployment,
-} from '../../../types/domain';
+} from '../../../../../types/domain';
 import { OverviewTab } from './OverviewTab';
 
 vi.mock('../../../api/hooks/useMvpQueries', async (importActual) => ({
-  ...(await importActual<typeof import('../../../api/hooks/useMvpQueries')>()),
+  ...(await importActual<typeof import('../../../../../api/hooks/useMvpQueries')>()),
   useGateways: vi.fn(),
   useGatewayDeployments: vi.fn(),
   useApiKeys: vi.fn(),
diff --git a/portals/api-control-plane/src/features/apis/overview/OverviewTab.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.tsx
similarity index 96%
rename from portals/api-control-plane/src/features/apis/overview/OverviewTab.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.tsx
index 8b5ecc9e93..4c18e57cbc 100644
--- a/portals/api-control-plane/src/features/apis/overview/OverviewTab.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.tsx
@@ -22,8 +22,8 @@ import { Box, Divider, Stack } from '@wso2/oxygen-ui';
 import {
   useGatewayDeployments,
   useGateways,
-} from '../../../api/hooks/useMvpQueries';
-import type { ApiDetail, Gateway } from '../../../types/domain';
+} from '../../../../../api/hooks/useMvpQueries';
+import type { ApiDetail, Gateway } from '../../../../../types/domain';
 import { ApiKeysPanel } from './ApiKeysPanel';
 import { InvokeUrlPanel } from './InvokeUrlPanel';
 import { ProgressBanner } from './ProgressBanner';
diff --git a/portals/api-control-plane/src/features/apis/overview/ProgressBanner.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ProgressBanner.tsx
similarity index 98%
rename from portals/api-control-plane/src/features/apis/overview/ProgressBanner.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ProgressBanner.tsx
index eea52daab5..b18d3ac6ae 100644
--- a/portals/api-control-plane/src/features/apis/overview/ProgressBanner.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ProgressBanner.tsx
@@ -33,8 +33,8 @@ import {
 } from '@wso2/oxygen-ui-icons-react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { routes } from '../../../routes/paths';
-import type { ApiDetail } from '../../../types/domain';
+import { routes } from '../../../../../routes/paths';
+import type { ApiDetail } from '../../../../../types/domain';
 
 type StepState = 'complete' | 'active' | 'upcoming';
 
diff --git a/portals/api-control-plane/src/features/apis/overview/ResourcesPanel.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ResourcesPanel.tsx
similarity index 98%
rename from portals/api-control-plane/src/features/apis/overview/ResourcesPanel.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ResourcesPanel.tsx
index 2f7b287041..ffa5c3ab9b 100644
--- a/portals/api-control-plane/src/features/apis/overview/ResourcesPanel.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ResourcesPanel.tsx
@@ -19,7 +19,7 @@
 import { Box, Chip, Stack, Typography } from '@wso2/oxygen-ui';
 import { PackageSearch } from '@wso2/oxygen-ui-icons-react';
 
-import type { ApiDetail } from '../../../types/domain';
+import type { ApiDetail } from '../../../../../types/domain';
 import { methodColor } from '../develop/developEdit';
 
 function EmptyResources({ label }: { label: string }) {
diff --git a/portals/api-control-plane/src/features/deploy/DeployPage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.test.tsx
similarity index 96%
rename from portals/api-control-plane/src/features/deploy/DeployPage.test.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.test.tsx
index 5f4e6c9e30..d4062ff542 100644
--- a/portals/api-control-plane/src/features/deploy/DeployPage.test.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.test.tsx
@@ -28,13 +28,13 @@ import {
   useGateways,
   useRestoreGatewayDeployment,
   useUndeployGatewayDeployment,
-} from '../../api/hooks/useMvpQueries';
-import { renderWithProviders, screen } from '../../test/utils';
-import type { Api, Gateway, GatewayDeployment } from '../../types/domain';
+} from '../../../../api/hooks/useMvpQueries';
+import { renderWithProviders, screen } from '../../../../test/utils';
+import type { Api, Gateway, GatewayDeployment } from '../../../../types/domain';
 import { DeployPage } from './DeployPage';
 
 vi.mock('../../api/hooks/useMvpQueries', async (importActual) => ({
-  ...(await importActual<typeof import('../../api/hooks/useMvpQueries')>()),
+  ...(await importActual<typeof import('../../../../api/hooks/useMvpQueries')>()),
   useApi: vi.fn(),
   useGateways: vi.fn(),
   useGatewayDeployments: vi.fn(),
diff --git a/portals/api-control-plane/src/features/deploy/DeployPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.tsx
similarity index 97%
rename from portals/api-control-plane/src/features/deploy/DeployPage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.tsx
index 5ad679aab9..82445bcc8f 100644
--- a/portals/api-control-plane/src/features/deploy/DeployPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.tsx
@@ -30,13 +30,13 @@ import {
   useApi,
   useGatewayDeployments,
   useGateways,
-} from '../../api/hooks/useMvpQueries';
+} from '../../../../api/hooks/useMvpQueries';
 import {
   EmptyState,
   ErrorState,
   LoadingState,
-} from '../../components/StateViews';
-import { routes } from '../../routes/paths';
+} from '../../../../components/StateViews';
+import { routes } from '../../../../routes/paths';
 import { GatewayDeployCard } from './GatewayDeployCard';
 
 /**
diff --git a/portals/api-control-plane/src/features/deploy/GatewayDeployCard.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployCard.tsx
similarity index 96%
rename from portals/api-control-plane/src/features/deploy/GatewayDeployCard.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployCard.tsx
index 860550224d..1e7fc56131 100644
--- a/portals/api-control-plane/src/features/deploy/GatewayDeployCard.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployCard.tsx
@@ -29,9 +29,9 @@ import {
 } from '@wso2/oxygen-ui';
 import { ChevronDown } from '@wso2/oxygen-ui-icons-react';
 
-import { useDeployApi } from '../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../components/Notifications';
-import type { Api, Gateway, GatewayDeployment } from '../../types/domain';
+import { useDeployApi } from '../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../components/Notifications';
+import type { Api, Gateway, GatewayDeployment } from '../../../../types/domain';
 import { GatewayDeployEnvCard } from './GatewayDeployEnvCard';
 import { GatewayDeploymentHistory } from './GatewayDeploymentHistory';
 import {
diff --git a/portals/api-control-plane/src/features/deploy/GatewayDeployEnvCard.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployEnvCard.tsx
similarity index 96%
rename from portals/api-control-plane/src/features/deploy/GatewayDeployEnvCard.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployEnvCard.tsx
index e9198b09b4..c54546eb78 100644
--- a/portals/api-control-plane/src/features/deploy/GatewayDeployEnvCard.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployEnvCard.tsx
@@ -30,10 +30,10 @@ import { PackageOpen, SquarePen } from '@wso2/oxygen-ui-icons-react';
 import {
   useRestoreGatewayDeployment,
   useUndeployGatewayDeployment,
-} from '../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../components/Notifications';
-import type { Api, Gateway, GatewayDeployment } from '../../types/domain';
-import { relativeTime } from '../../utils/relativeTime';
+} from '../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../components/Notifications';
+import type { Api, Gateway, GatewayDeployment } from '../../../../types/domain';
+import { relativeTime } from '../../../../utils/relativeTime';
 import { GatewayDeploymentSelector } from './GatewayDeploymentSelector';
 
 const STATUS_REASON_MESSAGES: Record<string, string> = {
diff --git a/portals/api-control-plane/src/features/deploy/GatewayDeploymentHistory.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentHistory.tsx
similarity index 94%
rename from portals/api-control-plane/src/features/deploy/GatewayDeploymentHistory.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentHistory.tsx
index dae1e13f9e..e09c06c273 100644
--- a/portals/api-control-plane/src/features/deploy/GatewayDeploymentHistory.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentHistory.tsx
@@ -20,9 +20,9 @@ import { useState } from 'react';
 import { Box, Button, Drawer, IconButton, Typography } from '@wso2/oxygen-ui';
 import { RefreshCw } from '@wso2/oxygen-ui-icons-react';
 
-import { useDeleteGatewayDeployment } from '../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../components/Notifications';
-import type { Api, GatewayDeployment } from '../../types/domain';
+import { useDeleteGatewayDeployment } from '../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../components/Notifications';
+import type { Api, GatewayDeployment } from '../../../../types/domain';
 import { GatewayDeploymentRow } from './GatewayDeploymentRow';
 
 type GatewayDeploymentHistoryProps = {
diff --git a/portals/api-control-plane/src/features/deploy/GatewayDeploymentRow.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentRow.tsx
similarity index 97%
rename from portals/api-control-plane/src/features/deploy/GatewayDeploymentRow.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentRow.tsx
index 27d5de26ec..3315238c9c 100644
--- a/portals/api-control-plane/src/features/deploy/GatewayDeploymentRow.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentRow.tsx
@@ -22,8 +22,8 @@ import { XCircle } from '@wso2/oxygen-ui-icons-react';
 import type {
   GatewayDeployment,
   GatewayDeploymentStatus,
-} from '../../types/domain';
-import { relativeTime } from '../../utils/relativeTime';
+} from '../../../../types/domain';
+import { relativeTime } from '../../../../utils/relativeTime';
 
 const STATUS_CHIP: Record<
   GatewayDeploymentStatus,
diff --git a/portals/api-control-plane/src/features/deploy/GatewayDeploymentSelector.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentSelector.tsx
similarity index 96%
rename from portals/api-control-plane/src/features/deploy/GatewayDeploymentSelector.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentSelector.tsx
index 062fa72ef1..8f2cc7c6e1 100644
--- a/portals/api-control-plane/src/features/deploy/GatewayDeploymentSelector.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentSelector.tsx
@@ -30,10 +30,10 @@ import {
 } from '@wso2/oxygen-ui';
 import { ChevronLeft } from '@wso2/oxygen-ui-icons-react';
 
-import { useRestoreGatewayDeployment } from '../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../components/Notifications';
-import type { Api, GatewayDeployment } from '../../types/domain';
-import { relativeTime } from '../../utils/relativeTime';
+import { useRestoreGatewayDeployment } from '../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../components/Notifications';
+import type { Api, GatewayDeployment } from '../../../../types/domain';
+import { relativeTime } from '../../../../utils/relativeTime';
 import { DeploymentStatusChip } from './GatewayDeploymentRow';
 
 type GatewayDeploymentSelectorProps = {
diff --git a/portals/api-control-plane/src/features/deploy/gatewayDeployUtils.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/gatewayDeployUtils.ts
similarity index 97%
rename from portals/api-control-plane/src/features/deploy/gatewayDeployUtils.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/gatewayDeployUtils.ts
index 8e082e08b5..939d6ea030 100644
--- a/portals/api-control-plane/src/features/deploy/gatewayDeployUtils.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/gatewayDeployUtils.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type { Gateway, GatewayDeployment } from '../../types/domain';
+import type { Gateway, GatewayDeployment } from '../../../../types/domain';
 
 /** Newest-first by createdAt (platform stamps it on every deployment). */
 export const byNewestFirst = (a: GatewayDeployment, b: GatewayDeployment) => {
diff --git a/portals/api-control-plane/src/features/gateways/CopyableCommand.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/CopyableCommand.tsx
similarity index 100%
rename from portals/api-control-plane/src/features/gateways/CopyableCommand.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/gateways/CopyableCommand.tsx
diff --git a/portals/api-control-plane/src/features/gateways/GatewayCreatePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayCreatePage.tsx
similarity index 96%
rename from portals/api-control-plane/src/features/gateways/GatewayCreatePage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayCreatePage.tsx
index 83957c069d..4b096b3a81 100644
--- a/portals/api-control-plane/src/features/gateways/GatewayCreatePage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayCreatePage.tsx
@@ -35,10 +35,10 @@ import {
 import { Network, Sparkles, Zap } from '@wso2/oxygen-ui-icons-react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 
-import { useCreateGateway } from '../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../components/Notifications';
-import { routes } from '../../routes/paths';
-import type { GatewayFunctionalityType } from '../../types/domain';
+import { useCreateGateway } from '../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../components/Notifications';
+import { routes } from '../../../../routes/paths';
+import type { GatewayFunctionalityType } from '../../../../types/domain';
 
 const NAME_PATTERN = /^[a-z0-9-]{3,64}$/;
 
diff --git a/portals/api-control-plane/src/features/gateways/GatewayDetailPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayDetailPage.tsx
similarity index 95%
rename from portals/api-control-plane/src/features/gateways/GatewayDetailPage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayDetailPage.tsx
index bfaa75173a..c2b90945c0 100644
--- a/portals/api-control-plane/src/features/gateways/GatewayDetailPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayDetailPage.tsx
@@ -39,13 +39,13 @@ import { Link, useParams } from 'react-router-dom';
 import {
   useCreateGatewayToken,
   useGateway,
-} from '../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../components/Notifications';
-import { ErrorState, LoadingState } from '../../components/StateViews';
-import { runtimeConfig } from '../../config/runtime';
-import { routes } from '../../routes/paths';
-import type { Gateway } from '../../types/domain';
-import { relativeTime } from '../../utils/relativeTime';
+} from '../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../components/Notifications';
+import { ErrorState, LoadingState } from '../../../../components/StateViews';
+import { runtimeConfig } from '../../../../config/runtime';
+import { routes } from '../../../../routes/paths';
+import type { Gateway } from '../../../../types/domain';
+import { relativeTime } from '../../../../utils/relativeTime';
 import { CopyableCommand } from './CopyableCommand';
 
 const TOKEN_PLACEHOLDER = '<your-gateway-token>';
diff --git a/portals/api-control-plane/src/features/gateways/GatewaysPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewaysPage.tsx
similarity index 97%
rename from portals/api-control-plane/src/features/gateways/GatewaysPage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewaysPage.tsx
index 6e5497456b..ca4029638b 100644
--- a/portals/api-control-plane/src/features/gateways/GatewaysPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewaysPage.tsx
@@ -45,15 +45,15 @@ import {
 } from '@wso2/oxygen-ui-icons-react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { useGateways } from '../../api/hooks/useMvpQueries';
+import { useGateways } from '../../../../api/hooks/useMvpQueries';
 import {
   EmptyState,
   ErrorState,
   LoadingState,
-} from '../../components/StateViews';
-import { routes } from '../../routes/paths';
-import type { Gateway } from '../../types/domain';
-import { relativeTime } from '../../utils/relativeTime';
+} from '../../../../components/StateViews';
+import { routes } from '../../../../routes/paths';
+import type { Gateway } from '../../../../types/domain';
+import { relativeTime } from '../../../../utils/relativeTime';
 import { groupGatewaysByEnvironment } from './gatewayEnvironments';
 import './gatewaysUi.css';
 
diff --git a/portals/api-control-plane/src/features/gateways/gatewayEnvironments.test.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/gatewayEnvironments.test.ts
similarity index 96%
rename from portals/api-control-plane/src/features/gateways/gatewayEnvironments.test.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/gateways/gatewayEnvironments.test.ts
index 1222d6a42b..262259f839 100644
--- a/portals/api-control-plane/src/features/gateways/gatewayEnvironments.test.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/gatewayEnvironments.test.ts
@@ -18,7 +18,7 @@
 
 import { describe, expect, it } from 'vitest';
 
-import type { Gateway } from '../../types/domain';
+import type { Gateway } from '../../../../types/domain';
 import {
   environmentForGateway,
   groupGatewaysByEnvironment,
diff --git a/portals/api-control-plane/src/features/gateways/gatewayEnvironments.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/gatewayEnvironments.ts
similarity index 97%
rename from portals/api-control-plane/src/features/gateways/gatewayEnvironments.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/gateways/gatewayEnvironments.ts
index f378427e5b..42d044028d 100644
--- a/portals/api-control-plane/src/features/gateways/gatewayEnvironments.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/gatewayEnvironments.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type { Gateway } from '../../types/domain';
+import type { Gateway } from '../../../../types/domain';
 
 /**
  * Client-side mock environments. Until the dedicated environment service exists,
diff --git a/portals/api-control-plane/src/features/gateways/gatewaysUi.css b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/gatewaysUi.css
similarity index 100%
rename from portals/api-control-plane/src/features/gateways/gatewaysUi.css
rename to portals/api-control-plane/src/pages/appShell/appShellPages/gateways/gatewaysUi.css
diff --git a/portals/api-control-plane/src/features/logs/RuntimeLogsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/logs/RuntimeLogsPage.tsx
similarity index 100%
rename from portals/api-control-plane/src/features/logs/RuntimeLogsPage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/logs/RuntimeLogsPage.tsx
diff --git a/portals/api-control-plane/src/features/manage/ManagePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/manage/ManagePage.tsx
similarity index 92%
rename from portals/api-control-plane/src/features/manage/ManagePage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/manage/ManagePage.tsx
index 7104c9d343..3556050501 100644
--- a/portals/api-control-plane/src/features/manage/ManagePage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/manage/ManagePage.tsx
@@ -18,8 +18,8 @@
 
 import { Button, Card, CardContent, Stack, TextField, PageContent, PageTitle } from '@wso2/oxygen-ui';
 
-import { useApi } from '../../api/hooks/useMvpQueries';
-import { ErrorState, LoadingState } from '../../components/StateViews';
+import { useApi } from '../../../../api/hooks/useMvpQueries';
+import { ErrorState, LoadingState } from '../../../../components/StateViews';
 
 export function ManagePage() {
   const apiQuery = useApi();
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/ExploreMoreCard.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/ExploreMoreCard.tsx
new file mode 100644
index 0000000000..cd5c413c21
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/ExploreMoreCard.tsx
@@ -0,0 +1,150 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Grid,
+  Stack,
+  Typography,
+} from '@wso2/oxygen-ui';
+import {
+  ArrowRight,
+  BookOpen,
+  Network,
+  Server,
+} from '@wso2/oxygen-ui-icons-react';
+import { FormattedMessage } from 'react-intl';
+
+export default function ExploreMoreCard() {
+  const sections = [
+    {
+      title: 'Quick Start ',
+      subtitle: 'Start with AI Workspace basics and set up your first AI Gateway.',
+      icon: BookOpen,
+      links: [
+        {
+          label: 'AI Workspace Getting Started Guide',
+          href: 'https://wso2.com/api-platform/docs/next/ai-workspace/getting-started/',
+        },
+        {
+          label: 'Set Up and Configure an AI Gateway',
+          href: 'https://wso2.com/api-platform/docs/next/ai-workspace/ai-gateways/setting-up/',
+        },
+      ],
+    },
+    {
+      title: 'LLM Provider Integration',
+      subtitle:
+        'Connect, configure, and maintain model providers for your workspace.',
+      icon: Server,
+      links: [
+        {
+          label: 'LLM Providers Overview',
+          href: 'https://wso2.com/api-platform/docs/next/ai-workspace/llm-providers/overview/',
+        },
+        {
+          label: 'Configure a New LLM Provider',
+          href: 'https://wso2.com/api-platform/docs/next/ai-workspace/llm-providers/configure-provider/',
+        },
+        {
+          label: 'Manage Existing LLM Providers',
+          href: 'https://wso2.com/api-platform/docs/next/ai-workspace/llm-providers/manage-provider/',
+        },
+      ],
+    },
+    {
+      title: 'App LLM Proxy Management',
+      subtitle: 'Create and operate App LLM Proxies for secure and governed access.',
+      icon: Network,
+      links: [
+        {
+          label: 'App LLM Proxies Overview',
+          href: 'https://wso2.com/api-platform/docs/next/ai-workspace/llm-proxies/overview/',
+        },
+        {
+          label: 'Create a New App LLM Proxy',
+          href: 'https://wso2.com/api-platform/docs/next/ai-workspace/llm-proxies/configure-proxy/',
+        },
+        {
+          label: 'Manage Existing App LLM Proxies',
+          href: 'https://wso2.com/api-platform/docs/next/ai-workspace/llm-proxies/manage-proxy/',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <Box>
+      <Typography variant="h6" sx={{ mb: 1.5 }}>
+        <FormattedMessage
+          id="aiWorkspace.pages.appShell.appShellPages.projects.ExploreMoreCard.explore.more"
+          defaultMessage={'Explore More'}
+        />
+      </Typography>
+      <Card sx={{ width: '100%' }}>
+        <CardContent>
+          <Grid container spacing={3} sx={{ m: 0, width: '100%' }}>
+            {sections.map((section) => {
+              const Icon = section.icon;
+              return (
+                <Grid key={section.title} size={{ xs: 12, md: 4 }}>
+                  <Stack spacing={1.2}>
+                    <Stack direction="row" spacing={1} alignItems="center">
+                      <Icon size={24} color="#f36822" />
+                      <Box>
+                        <Typography variant="body1" sx={{ fontWeight: 600 }}>
+                          {section.title}
+                        </Typography>
+                      </Box>
+                    </Stack>
+                    <Stack spacing={0.5}>
+                      {section.links.map((link) => (
+                        <Box
+                          key={link.label}
+                          component="a"
+                          href={link.href}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          sx={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 0.5,
+                            color: 'text.secondary',
+                            textDecoration: 'none',
+                            fontSize: '0.82rem',
+                            '&:hover': { color: 'primary.main' },
+                          }}
+                        >
+                          <ArrowRight size={14} />
+                          <span>{link.label}</span>
+                        </Box>
+                      ))}
+                    </Stack>
+                  </Stack>
+                </Grid>
+              );
+            })}
+          </Grid>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}
diff --git a/portals/api-control-plane/src/features/organizations/OrganizationHomePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/OrganizationHomePage.tsx
similarity index 84%
rename from portals/api-control-plane/src/features/organizations/OrganizationHomePage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/organizations/OrganizationHomePage.tsx
index 94809bf121..d97c3fcabb 100644
--- a/portals/api-control-plane/src/features/organizations/OrganizationHomePage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/OrganizationHomePage.tsx
@@ -29,17 +29,19 @@ import { Boxes, Layers } from '@wso2/oxygen-ui-icons-react';
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useOrganization } from '../../api/hooks/useMvpQueries';
-import { QuickStartBanner } from '../../components/cards/QuickStartBanner';
+import { useOrganization } from '../../../../api/hooks/useMvpQueries';
+import { QuickStartBanner } from '../../../../components/cards/QuickStartBanner';
 import {
   SummaryCardSection,
   type SummaryRow,
-} from '../../components/cards/SummaryCardSection';
-import { ErrorState, LoadingState } from '../../components/StateViews';
-import { routes } from '../../routes/paths';
-import { useConsoleScope } from '../../scope/ConsoleScopeProvider';
-import { relativeTime } from '../../utils/relativeTime';
+} from '../../../../components/cards/SummaryCardSection';
+import { ErrorState, LoadingState } from '../../../../components/StateViews';
+import { routes } from '../../../../routes/paths';
+import { useConsoleScope } from '../../../../scope/ConsoleScopeProvider';
+import { relativeTime } from '../../../../utils/relativeTime';
 import { NewProjectDialog } from '../projects/NewProjectDialog';
+import { FormattedMessage } from 'react-intl';
+import ExploreMoreCard from './ExploreMoreCard';
 
 const GETTING_STARTED = [
   {
@@ -134,7 +136,11 @@ export function OrganizationHomePage() {
           <Card sx={{ height: '100%', minHeight: 300 }}>
             <CardContent>
               <Typography sx={{ fontWeight: 700 }} variant="h6">
-                Getting started
+                <FormattedMessage
+                  id="organization.home.getStarted"
+                  defaultMessage="Get started"
+                  description="Organization home page get started section title"
+                />  
               </Typography>
               <Stack spacing={2} sx={{ mt: 2 }}>
                 {GETTING_STARTED.map((step) => (
@@ -149,8 +155,14 @@ export function OrganizationHomePage() {
             </CardContent>
           </Card>
         </Grid>
+
+        <Grid size={{ xs: 12 }}>
+          <ExploreMoreCard />
+        </Grid>
       </Grid>
 
+      
+
       <NewProjectDialog
         onClose={() => setCreateOpen(false)}
         open={createOpen}
diff --git a/portals/api-control-plane/src/features/projects/NewProjectDialog.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/NewProjectDialog.test.tsx
similarity index 54%
rename from portals/api-control-plane/src/features/projects/NewProjectDialog.test.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/projects/NewProjectDialog.test.tsx
index f9cf6bfb90..ebe2489797 100644
--- a/portals/api-control-plane/src/features/projects/NewProjectDialog.test.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/NewProjectDialog.test.tsx
@@ -16,30 +16,43 @@
  * under the License.
  */
 
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { renderWithProviders, screen, waitFor } from '../../test/utils';
-import type { Project } from '../../types/domain';
+import { ApiScopeProvider } from '../../../../api/core/ApiScopeProvider';
+import { resetHttpClient } from '../../../../api/core/http';
+import {
+  accepts,
+  aProject,
+  failure,
+  recorder,
+  type Recorder,
+} from '../../../../test/msw';
+import { server } from '../../../../test/server';
+import { renderWithProviders, screen, waitFor } from '../../../../test/utils';
 import { NewProjectDialog } from './NewProjectDialog';
 
 const ORG = 'api-platform-demo';
 
-const created: Project = {
-  id: 'proj-new',
-  orgId: 'org-1',
-  name: 'Billing',
-  handler: 'proj-new',
-};
+let requests: Recorder;
 
-function setup(
-  createProject = vi.fn().mockResolvedValue(created)
-) {
+beforeEach(() => {
+  requests = recorder();
+  resetHttpClient();
+});
+
+/**
+ * The dialog takes its organization from `ApiScopeContext` rather than its
+ * `orgHandle` prop (which only builds the post-create redirect), so the scope
+ * provider has to be mounted for the create to be allowed out at all.
+ */
+function setup() {
   const onClose = vi.fn();
   const utils = renderWithProviders(
-    <NewProjectDialog onClose={onClose} open orgHandle={ORG} />,
-    { apiClient: { createProject } }
+    <ApiScopeProvider orgId={ORG}>
+      <NewProjectDialog onClose={onClose} open orgHandle={ORG} />
+    </ApiScopeProvider>
   );
-  return { ...utils, createProject, onClose };
+  return { ...utils, onClose };
 }
 
 describe('NewProjectDialog', () => {
@@ -49,26 +62,32 @@ describe('NewProjectDialog', () => {
   });
 
   it('creates a project with name + description, then closes', async () => {
-    const { user, createProject, onClose } = setup();
+    server.use(
+      accepts('post', '/projects', aProject({ id: 'billing' }), {
+        record: requests,
+      })
+    );
+    const { user, onClose } = setup();
 
     await user.type(screen.getByLabelText(/Name/), 'Billing');
     await user.type(screen.getByLabelText(/Description/), 'Invoices');
     await user.click(screen.getByRole('button', { name: 'Create' }));
 
-    await waitFor(() =>
-      expect(createProject).toHaveBeenCalledWith(ORG, {
-        name: 'Billing',
-        description: 'Invoices',
-      })
-    );
+    await waitFor(() => expect(requests.count()).toBe(1));
+    expect(JSON.parse(requests.last()!.body)).toEqual({
+      displayName: 'Billing',
+      description: 'Invoices',
+    });
     await waitFor(() => expect(onClose).toHaveBeenCalled());
   });
 
   it('keeps the dialog open and surfaces the error message on failure', async () => {
-    const failing = vi
-      .fn()
-      .mockRejectedValue(new Error('Project already exists in organization'));
-    const { user, onClose } = setup(failing);
+    server.use(
+      failure('post', '/projects', 409, 'PROJECT_ALREADY_EXISTS', {
+        message: 'Project already exists in organization',
+      })
+    );
+    const { user, onClose } = setup();
 
     await user.type(screen.getByLabelText(/Name/), 'Retail APIs');
     await user.click(screen.getByRole('button', { name: 'Create' }));
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/NewProjectDialog.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/NewProjectDialog.tsx
new file mode 100644
index 0000000000..b391703df8
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/NewProjectDialog.tsx
@@ -0,0 +1,167 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  OutlinedInput,
+} from '@wso2/oxygen-ui';
+import { useEffect, useState, type FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useCreateProject } from '../../../../api/resources/projects';
+import { useNotifications } from '../../../../components/Notifications';
+import { routes } from '../../../../routes/paths';
+
+const NAME_MAX = 120;
+
+/**
+ * Field ids, shared by each control and the label/helper text that describe it.
+ * Named constants rather than inline strings because a typo between `htmlFor`
+ * and `id` silently breaks the label-to-input association — which looks fine and
+ * is invisible to everything except a screen reader.
+ */
+const NAME_FIELD = 'new-project-name';
+const DESCRIPTION_FIELD = 'new-project-description';
+
+export type NewProjectDialogProps = {
+  open: boolean;
+  orgHandle: string;
+  onClose: () => void;
+};
+
+/**
+ * Create a project (platform-api `POST /api/v1/projects`). The backend persists
+ * only name + description — the organization comes from the bearer token — so
+ * the form is intentionally minimal. On success it navigates to the new
+ * project's home.
+ *
+ * Each field is a `FormControl` owning its own `FormLabel`, input and
+ * `FormHelperText`: `required` and `error` are declared once on the control and
+ * reach all three through context, instead of being repeated on each part where
+ * they could disagree.
+ */
+export function NewProjectDialog({
+  open,
+  orgHandle,
+  onClose,
+}: NewProjectDialogProps) {
+  const navigate = useNavigate();
+  const { notify } = useNotifications();
+  // Scope comes from the route via `ApiScopeProvider`; `orgHandle` is only
+  // needed to build the redirect once the project exists.
+  const mutation = useCreateProject();
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+
+  // Reset fields each time the dialog opens.
+  useEffect(() => {
+    if (open) {
+      setName('');
+      setDescription('');
+    }
+  }, [open]);
+
+  const trimmedName = name.trim();
+  const isTooLong = trimmedName.length > NAME_MAX;
+  const canSubmit = trimmedName.length > 0 && !isTooLong && !mutation.isPending;
+
+  const handleSubmit = async (event: FormEvent) => {
+    // A real `form` element, so Enter in the name field submits the way a form
+    // is expected to — no key handler second-guessing the browser.
+    event.preventDefault();
+    if (!canSubmit) return;
+    try {
+      const project = await mutation.mutateAsync({
+        displayName: trimmedName,
+        description: description.trim() || undefined,
+      });
+      notify('Project created', 'success');
+      onClose();
+      navigate(routes.projectHome(orgHandle, project.id));
+    } catch (error) {
+      notify(
+        error instanceof Error ? error.message : 'Failed to create project',
+        'error'
+      );
+    }
+  };
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="sm"
+      onClose={mutation.isPending ? undefined : onClose}
+      open={open}
+    >
+      <DialogTitle>Create project</DialogTitle>
+      <Box component="form" noValidate onSubmit={handleSubmit}>
+        <DialogContent>
+          <Form.Stack spacing={2.5} sx={{ mt: 1 }}>
+            <FormControl error={isTooLong} fullWidth required>
+              <FormLabel htmlFor={NAME_FIELD}>Name</FormLabel>
+              <OutlinedInput
+                autoFocus
+                id={NAME_FIELD}
+                aria-describedby={`${NAME_FIELD}-helper-text`}
+                onChange={(event) => setName(event.target.value)}
+                placeholder="e.g. Retail APIs"
+                size="small"
+                value={name}
+              />
+              <FormHelperText id={`${NAME_FIELD}-helper-text`}>
+                {isTooLong
+                  ? `Name must be ${NAME_MAX} characters or fewer.`
+                  : 'A unique name for the project within this organization.'}
+              </FormHelperText>
+            </FormControl>
+
+            <FormControl fullWidth>
+              <FormLabel htmlFor={DESCRIPTION_FIELD}>Description</FormLabel>
+              <OutlinedInput
+                id={DESCRIPTION_FIELD}
+                minRows={2}
+                multiline
+                onChange={(event) => setDescription(event.target.value)}
+                placeholder="What this project is for (optional)"
+                size="small"
+                value={description}
+              />
+            </FormControl>
+          </Form.Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button color="inherit" disabled={mutation.isPending} onClick={onClose}>
+            Cancel
+          </Button>
+          <Button disabled={!canSubmit} type="submit" variant="contained">
+            {mutation.isPending ? 'Creating…' : 'Create'}
+          </Button>
+        </DialogActions>
+      </Box>
+    </Dialog>
+  );
+}
diff --git a/portals/api-control-plane/src/features/projects/ProjectHomePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectHomePage.tsx
similarity index 91%
rename from portals/api-control-plane/src/features/projects/ProjectHomePage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectHomePage.tsx
index bf8b7495db..e9adfd3435 100644
--- a/portals/api-control-plane/src/features/projects/ProjectHomePage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectHomePage.tsx
@@ -30,17 +30,17 @@ import { Boxes, Rocket } from '@wso2/oxygen-ui-icons-react';
 import { useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { useApis, useProject } from '../../api/hooks/useMvpQueries';
-import { groupApisByKind } from '../../components/cards/apiDisplay';
-import { QuickStartBanner } from '../../components/cards/QuickStartBanner';
+import { useApis, useProject } from '../../../../api/hooks/useMvpQueries';
+import { groupApisByKind } from '../../../../components/cards/apiDisplay';
+import { QuickStartBanner } from '../../../../components/cards/QuickStartBanner';
 import {
   SummaryCardSection,
   type SummaryRow,
-} from '../../components/cards/SummaryCardSection';
-import { ErrorState, LoadingState } from '../../components/StateViews';
-import { routes } from '../../routes/paths';
-import type { Api } from '../../types/domain';
-import { relativeTime } from '../../utils/relativeTime';
+} from '../../../../components/cards/SummaryCardSection';
+import { ErrorState, LoadingState } from '../../../../components/StateViews';
+import { routes } from '../../../../routes/paths';
+import type { Api } from '../../../../types/domain';
+import { relativeTime } from '../../../../utils/relativeTime';
 
 export function ProjectHomePage() {
   const { orgHandle = '', projectHandler = '' } = useParams();
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.test.tsx
new file mode 100644
index 0000000000..76160eb60a
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.test.tsx
@@ -0,0 +1,207 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Route, Routes } from 'react-router-dom';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ApiScopeProvider } from '../../../../api/core/ApiScopeProvider';
+import { resetHttpClient } from '../../../../api/core/http';
+import {
+  aProject,
+  collection,
+  failure,
+  noContent,
+  recorder,
+  type ProjectFixture,
+  type Recorder,
+} from '../../../../test/msw';
+import { server } from '../../../../test/server';
+import {
+  renderWithProviders,
+  screen,
+  waitFor,
+  within,
+} from '../../../../test/utils';
+import { makeConsoleScope } from '../../../../test/mockScope';
+import { ProjectListPage } from './ProjectListPage';
+
+const ORG = 'api-platform-demo';
+
+const projectFixtures: ProjectFixture[] = [
+  aProject({ id: 'retail', displayName: 'Retail APIs' }),
+  aProject({ id: 'internal-tools', displayName: 'Internal Tools' }),
+];
+
+/** Enough projects to force a second page at the default size of 12. */
+const manyProjects = Array.from({ length: 14 }, (_, index) =>
+  aProject({
+    id: `project-${index + 1}`,
+    displayName: `Project ${index + 1}`,
+  })
+);
+
+let requests: Recorder;
+
+/**
+ * The page's hooks read `ApiScopeContext`, not the console scope, so the
+ * provider has to be mounted here — without it every query stays `enabled:
+ * false` and the page renders its loading state forever.
+ */
+function renderPage() {
+  return renderWithProviders(
+    <ApiScopeProvider orgId={ORG}>
+      <Routes>
+        <Route
+          path="/organizations/:orgHandle/projects"
+          element={<ProjectListPage />}
+        />
+      </Routes>
+    </ApiScopeProvider>,
+    {
+      route: `/organizations/${ORG}/projects`,
+      scope: makeConsoleScope(),
+    }
+  );
+}
+
+beforeEach(() => {
+  requests = recorder();
+  resetHttpClient();
+  // Cards count the APIs in their project; every card issues one of these.
+  server.use(collection('/rest-apis', []));
+});
+
+describe('ProjectListPage', () => {
+  it('shows the loading state before the first response lands', () => {
+    server.use(collection('/projects', projectFixtures));
+    renderPage();
+    expect(screen.getByText('Loading projects')).toBeInTheDocument();
+  });
+
+  it('shows an error state with the reason', async () => {
+    server.use(
+      failure('get', '/projects', 500, 'INTERNAL_SERVER_ERROR', {
+        message: 'boom',
+      })
+    );
+    renderPage();
+    expect(
+      await screen.findByText(/Unable to load projects\./)
+    ).toBeInTheDocument();
+  });
+
+  it('shows the empty state when the organization has no projects', async () => {
+    server.use(collection('/projects', []));
+    renderPage();
+    expect(await screen.findByText('No projects found')).toBeInTheDocument();
+  });
+
+  it('renders the first page and asks the server for the paging window', async () => {
+    server.use(collection('/projects', projectFixtures, { record: requests }));
+    renderPage();
+
+    expect(await screen.findByText('Retail APIs')).toBeInTheDocument();
+    expect(screen.getByText('Internal Tools')).toBeInTheDocument();
+    expect(requests.last()?.params.get('limit')).toBe('12');
+    expect(requests.last()?.params.get('offset')).toBe('0');
+  });
+
+  it('searches server-side rather than filtering the current page', async () => {
+    server.use(collection('/projects', projectFixtures, { record: requests }));
+    const { user } = renderPage();
+
+    await screen.findByText('Retail APIs');
+    await user.type(screen.getByPlaceholderText('Search projects'), 'internal');
+
+    await waitFor(() =>
+      expect(requests.last()?.params.get('query')).toBe('internal')
+    );
+    await waitFor(() =>
+      expect(screen.queryByText('Retail APIs')).not.toBeInTheDocument()
+    );
+    expect(screen.getByText('Internal Tools')).toBeInTheDocument();
+  });
+
+  it('defaults to newest-first and sends the chosen order to the server', async () => {
+    server.use(collection('/projects', projectFixtures, { record: requests }));
+    const { user } = renderPage();
+
+    await screen.findByText('Retail APIs');
+    expect(requests.last()?.params.get('sortBy')).toBe('createdAt');
+    expect(requests.last()?.params.get('sortOrder')).toBe('desc');
+
+    await user.click(screen.getByRole('combobox', { name: 'Sort by' }));
+    await user.click(screen.getByRole('option', { name: 'Name (A–Z)' }));
+
+    await waitFor(() => {
+      expect(requests.last()?.params.get('sortBy')).toBe('name');
+      expect(requests.last()?.params.get('sortOrder')).toBe('asc');
+    });
+  });
+
+  it('returns to the first page when the sort order changes', async () => {
+    server.use(collection('/projects', manyProjects, { record: requests }));
+    const { user } = renderPage();
+
+    await screen.findByText('Project 1');
+    await user.click(screen.getByRole('button', { name: /next page/i }));
+    await waitFor(() => expect(requests.last()?.params.get('offset')).toBe('12'));
+
+    await user.click(screen.getByRole('combobox', { name: 'Sort by' }));
+    await user.click(screen.getByRole('option', { name: 'Oldest first' }));
+
+    await waitFor(() => expect(requests.last()?.params.get('offset')).toBe('0'));
+  });
+
+  it('requests the next page when the pagination control advances', async () => {
+    server.use(collection('/projects', manyProjects, { record: requests }));
+    const { user } = renderPage();
+
+    await screen.findByText('Project 1');
+    expect(screen.queryByText('Project 13')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /next page/i }));
+
+    await waitFor(() => expect(requests.last()?.params.get('offset')).toBe('12'));
+    expect(await screen.findByText('Project 13')).toBeInTheDocument();
+  });
+
+  it('deletes a project after type-to-confirm', async () => {
+    server.use(
+      collection('/projects', projectFixtures),
+      noContent('delete', '/projects/:projectId', { record: requests })
+    );
+    const { user } = renderPage();
+
+    await screen.findByText('Retail APIs');
+    // Open the actions menu on the first card (Retail APIs) and choose Delete.
+    await user.click(screen.getAllByLabelText('Project actions')[0]);
+    await user.click(screen.getByRole('menuitem', { name: /Delete/ }));
+
+    // Type-to-confirm guards the irreversible delete.
+    const dialog = screen.getByRole('dialog');
+    const confirmButton = within(dialog).getByRole('button', { name: 'Delete' });
+    expect(confirmButton).toBeDisabled();
+
+    await user.type(within(dialog).getByRole('textbox'), 'Retail APIs');
+    await user.click(confirmButton);
+
+    await waitFor(() => expect(requests.count()).toBe(1));
+    expect(requests.last()?.url.pathname).toMatch(/\/projects\/retail$/);
+  });
+});
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx
new file mode 100644
index 0000000000..f003f6039e
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx
@@ -0,0 +1,483 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  Box,
+  Button,
+  InputAdornment,
+  MenuItem,
+  PageContent,
+  PageTitle,
+  Stack,
+  TablePagination,
+  TextField,
+  Typography,
+} from '@wso2/oxygen-ui';
+import { Plus, Search } from '@wso2/oxygen-ui-icons-react';
+import { useEffect, useState } from 'react';
+import {
+  defineMessages,
+  FormattedMessage,
+  useIntl,
+  type MessageDescriptor,
+} from 'react-intl';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import type { Project } from '../../../../api/resources/projects';
+import {
+  useDeleteProject,
+  useProjects,
+  type ProjectListFilters,
+} from '../../../../api/resources/projects';
+import { ProjectsGrid } from './ProjectsGrid';
+import { ConfirmDialog } from '../../../../components/ConfirmDialog';
+import { useNotifications } from '../../../../components/Notifications';
+import { EmptyState, ErrorState, LoadingState } from '../../../../components/StateViews';
+import { routes } from '../../../../routes/paths';
+import { useConsoleScope } from '../../../../scope/ConsoleScopeProvider';
+import { useFooterHeight } from '../../useFooterHeight';
+import { NewProjectDialog } from './NewProjectDialog';
+
+const PAGE_SIZE_OPTIONS = [12, 24, 48];
+const SEARCH_DEBOUNCE_MS = 300;
+
+/**
+ * Server-side sort is limited to `name | createdAt` and `asc | desc`.
+ */
+type SortBy = NonNullable<ProjectListFilters['sortBy']>;
+type SortOrder = NonNullable<ProjectListFilters['sortOrder']>;
+
+
+const messages = defineMessages({
+  createProject: {
+    id: 'project.list.createProjectButton',
+    defaultMessage: 'Create Project',
+  },
+  deleteConfirmInputLabel: {
+    id: 'project.list.delete.confirmInputLabel',
+    defaultMessage: 'Type "{name}" to confirm',
+    description:
+      'Label for the type-to-confirm field guarding an irreversible delete.',
+  },
+  deleteConfirm: {
+    id: 'project.list.delete.confirmLabel',
+    defaultMessage: 'Delete',
+  },
+  deleteFailed: {
+    id: 'project.list.delete.failed',
+    defaultMessage: 'Delete failed',
+    description: 'Fallback toast when the server gives no reason for a failure.',
+  },
+  deleteMessage: {
+    id: 'project.list.delete.message',
+    defaultMessage:
+      'This permanently deletes the project "{name}" and its configuration. A project that still has APIs cannot be deleted. This action is irreversible.',
+  },
+  deleteSucceeded: {
+    id: 'project.list.delete.succeeded',
+    defaultMessage: 'Deleted "{name}".',
+  },
+  deleteTitle: {
+    id: 'project.list.delete.title',
+    defaultMessage: 'Delete project',
+  },
+  emptyAction: {
+    id: 'project.list.empty.action',
+    defaultMessage: 'Create project',
+  },
+  emptyDescription: {
+    id: 'project.list.empty.description',
+    defaultMessage: 'Create a project to organize and manage your APIs.',
+  },
+  emptyTitle: {
+    id: 'project.list.empty.title',
+    defaultMessage: 'No projects found',
+  },
+  errorMessage: {
+    id: 'project.list.error.message',
+    defaultMessage: 'Unable to load projects. {reason}',
+  },
+  loading: {
+    id: 'project.list.loading',
+    defaultMessage: 'Loading projects',
+  },
+  noMatchesDescription: {
+    id: 'project.list.noMatches.description',
+    defaultMessage: 'Try a different project name or handle.',
+  },
+  noMatchesTitle: {
+    id: 'project.list.noMatches.title',
+    defaultMessage: 'No matching projects',
+  },
+  projectCount: {
+    id: 'project.list.count',
+    defaultMessage: '{count, plural, one {# project} other {# projects}}',
+  },
+  rowsPerPage: {
+    id: 'project.list.rowsPerPage',
+    defaultMessage: 'Projects per page',
+  },
+  searchPlaceholder: {
+    id: 'project.list.searchPlaceholder',
+    defaultMessage: 'Search projects',
+  },
+  sortLabel: {
+    id: 'project.list.sortLabel',
+    defaultMessage: 'Sort by',
+    description: 'Label for the control choosing the project list order.',
+  },
+  sortNameAscending: {
+    id: 'project.list.sort.nameAscending',
+    defaultMessage: 'Name (A–Z)',
+    description: 'Sort option: alphabetical by project name, ascending.',
+  },
+  sortNameDescending: {
+    id: 'project.list.sort.nameDescending',
+    defaultMessage: 'Name (Z–A)',
+    description: 'Sort option: alphabetical by project name, descending.',
+  },
+  sortNewest: {
+    id: 'project.list.sort.newest',
+    defaultMessage: 'Newest first',
+    description: 'Sort option: by creation date, most recent project first.',
+  },
+  sortOldest: {
+    id: 'project.list.sort.oldest',
+    defaultMessage: 'Oldest first',
+    description: 'Sort option: by creation date, earliest project first.',
+  },
+});
+
+/**
+ * Sort options with both field and direction.
+ */
+const SORT_OPTIONS = [
+  {
+    label: messages.sortNewest,
+    sortBy: 'createdAt',
+    sortOrder: 'desc',
+    value: 'createdAt:desc',
+  },
+  {
+    label: messages.sortOldest,
+    sortBy: 'createdAt',
+    sortOrder: 'asc',
+    value: 'createdAt:asc',
+  },
+  {
+    label: messages.sortNameAscending,
+    sortBy: 'name',
+    sortOrder: 'asc',
+    value: 'name:asc',
+  },
+  {
+    label: messages.sortNameDescending,
+    sortBy: 'name',
+    sortOrder: 'desc',
+    value: 'name:desc',
+  },
+] as const satisfies readonly {
+  label: MessageDescriptor;
+  sortBy: SortBy;
+  sortOrder: SortOrder;
+  value: string;
+}[];
+
+type SortOption = (typeof SORT_OPTIONS)[number];
+
+/**
+ * Delays a fast-changing value so it can drive a request. Typing updates the
+ * field on every keystroke; the query only follows once the user pauses.
+ */
+function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+
+  return debounced;
+}
+
+export function ProjectListPage() {
+  const { orgHandle = '' } = useParams();
+  const navigate = useNavigate();
+  const intl = useIntl();
+  const { organization } = useConsoleScope();
+  const { notify } = useNotifications();
+  // The app footer shares this scroll area, so the sticky bar sits above it.
+  const footerHeight = useFooterHeight();
+
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(PAGE_SIZE_OPTIONS[0]);
+  const [sort, setSort] = useState<SortOption>(SORT_OPTIONS[0]);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [toDelete, setToDelete] = useState<Project | null>(null);
+
+  const debouncedSearch = useDebouncedValue(search.trim(), SEARCH_DEBOUNCE_MS);
+
+  // Page 1 is the only page that still means anything once the filter or the
+  // order changes — the row that was at offset 24 is somewhere else now.
+  useEffect(() => setPage(0), [debouncedSearch, sort.value]);
+
+  const projectsQuery = useProjects({
+    limit: rowsPerPage,
+    offset: page * rowsPerPage,
+    query: debouncedSearch || undefined,
+    sortBy: sort.sortBy,
+    sortOrder: sort.sortOrder,
+  });
+  const deleteProjectMutation = useDeleteProject();
+
+  const projects = projectsQuery.data?.list ?? [];
+  const total = projectsQuery.data?.pagination?.total ?? projects.length;
+  const lastPage = Math.max(0, Math.ceil(total / rowsPerPage) - 1);
+  // Deleting the last row of the last page leaves `page` past the end. Render
+  // the clamped value (an out-of-range `page` makes TablePagination complain),
+  // and correct the state so the next request asks for a window that exists.
+  const currentPage = Math.min(page, lastPage);
+  const isSearching = debouncedSearch.length > 0;
+
+  useEffect(() => {
+    if (page > lastPage) setPage(lastPage);
+  }, [page, lastPage]);
+
+  const confirmDelete = () => {
+    if (!toDelete) return;
+    const { displayName } = toDelete;
+    deleteProjectMutation.mutate(
+      { projectId: toDelete.id },
+      {
+        onSuccess: () => {
+          notify(
+            intl.formatMessage(messages.deleteSucceeded, { name: displayName }),
+            'success'
+          );
+          setToDelete(null);
+        },
+        onError: (error) =>
+          notify(
+            error.message || intl.formatMessage(messages.deleteFailed),
+            'error'
+          ),
+      }
+    );
+  };
+
+  const openProject = (project: Project) =>
+    navigate(routes.projectHome(orgHandle, project.id));
+
+  if (projectsQuery.isLoading) {
+    return <LoadingState label={intl.formatMessage(messages.loading)} />;
+  }
+  if (projectsQuery.error) {
+    return (
+      <ErrorState
+        message={intl.formatMessage(messages.errorMessage, {
+          reason: projectsQuery.error.message,
+        })}
+      />
+    );
+  }
+
+  return (
+    // A flex column at least as tall as the scroll area, so the results section
+    // below can claim the leftover height and hold the pagination bar down at the
+    // bottom edge instead of letting it ride up under a short grid.
+    <PageContent
+      fullWidth
+      sx={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}
+    >
+      <PageTitle>
+        <PageTitle.Header>
+          <FormattedMessage
+            id="project.list.title"
+            defaultMessage="Projects"
+            />
+        </PageTitle.Header>
+        <PageTitle.SubHeader>
+          {organization?.name
+            ? (
+              <FormattedMessage
+                defaultMessage="Project workspaces in {organizationName}."
+                id="project.list.subHeader.withOrganization"
+                values={{ organizationName: organization.name }}
+              />
+            )
+            : (
+              <FormattedMessage
+                defaultMessage="Select a project to manage APIs."
+                id="project.list.subHeader.default"
+              />
+            )}
+        </PageTitle.SubHeader>
+        <PageTitle.Actions>
+          <Button
+            onClick={() => setCreateOpen(true)}
+            startIcon={<Plus />}
+            sx={{ borderRadius: 5 }}
+            variant="contained"
+          >
+            <FormattedMessage {...messages.createProject} />
+          </Button>
+        </PageTitle.Actions>
+      </PageTitle>
+
+      {total === 0 && !isSearching ? (
+        <EmptyState
+          actionLabel={intl.formatMessage(messages.emptyAction)}
+          onAction={() => setCreateOpen(true)}
+          title={intl.formatMessage(messages.emptyTitle)}
+          description={intl.formatMessage(messages.emptyDescription)}
+        />
+      ) : (
+        <Stack spacing={2} sx={{ flexGrow: 1 }}>
+          {/* Full-bleed search: the field owns its own row across the page. */}
+          <TextField
+            fullWidth
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={intl.formatMessage(messages.searchPlaceholder)}
+            size="small"
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search size={18} />
+                  </InputAdornment>
+                ),
+              },
+            }}
+            value={search}
+          />
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 2,
+              justifyContent: 'space-between',
+            }}
+          >
+            <Typography variant="h6">
+              <FormattedMessage
+                {...messages.projectCount}
+                values={{ count: total }}
+              />
+            </Typography>
+            <TextField
+              label={intl.formatMessage(messages.sortLabel)}
+              onChange={(event) => {
+                const next = SORT_OPTIONS.find(
+                  (option) => option.value === event.target.value
+                );
+                if (next) setSort(next);
+              }}
+              select
+              size="small"
+              sx={{ minWidth: 200 }}
+              value={sort.value}
+            >
+              {SORT_OPTIONS.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {intl.formatMessage(option.label)}
+                </MenuItem>
+              ))}
+            </TextField>
+          </Box>
+          {projects.length === 0 ? (
+            <EmptyState
+              title={intl.formatMessage(messages.noMatchesTitle)}
+              description={intl.formatMessage(messages.noMatchesDescription)}
+            />
+          ) : (
+            <>
+              {/* Takes the column's leftover height, which is what keeps the
+                  pagination bar at the bottom on a half-empty page. Dimmed
+                  rather than unmounted while the next page is in flight, so the
+                  grid keeps its height and the page does not jump. */}
+              <Box
+                sx={{
+                  flexGrow: 1,
+                  opacity: projectsQuery.isPlaceholderData ? 0.6 : 1,
+                  transition: 'opacity .15s ease',
+                }}
+              >
+                <ProjectsGrid
+                  onDelete={setToDelete}
+                  onOpen={openProject}
+                  orgHandle={orgHandle}
+                  projects={projects}
+                />
+              </Box>
+              {total > PAGE_SIZE_OPTIONS[0] && (
+                <Box
+                  sx={[
+                    { bottom: `${footerHeight}px`, mx: -8, px: 8 },
+                  ]}
+                >
+                  <TablePagination
+                    component="div"
+                    count={total}
+                    labelRowsPerPage={intl.formatMessage(messages.rowsPerPage)}
+                    onPageChange={(_event, nextPage) => setPage(nextPage)}
+                    onRowsPerPageChange={(event) => {
+                      setRowsPerPage(parseInt(event.target.value, 10));
+                      setPage(0);
+                    }}
+                    page={currentPage}
+                    rowsPerPage={rowsPerPage}
+                    rowsPerPageOptions={PAGE_SIZE_OPTIONS}
+                  />
+                </Box>
+              )}
+            </>
+          )}
+        </Stack>
+      )}
+
+      <NewProjectDialog
+        onClose={() => setCreateOpen(false)}
+        open={createOpen}
+        orgHandle={orgHandle}
+      />
+
+      <ConfirmDialog
+        confirmInputLabel={intl.formatMessage(messages.deleteConfirmInputLabel, {
+          name: toDelete?.displayName ?? '',
+        })}
+        confirmLabel={intl.formatMessage(messages.deleteConfirm)}
+        confirmPhrase={toDelete?.displayName ?? ''}
+        destructive
+        loading={deleteProjectMutation.isPending}
+        message={
+          toDelete
+            ? intl.formatMessage(messages.deleteMessage, {
+                name: toDelete.displayName,
+              })
+            : ''
+        }
+        onCancel={() => setToDelete(null)}
+        onConfirm={confirmDelete}
+        open={toDelete !== null}
+        title={intl.formatMessage(messages.deleteTitle)}
+      />
+    </PageContent>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectsGrid.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectsGrid.tsx
new file mode 100644
index 0000000000..1837508beb
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectsGrid.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Box } from '@wso2/oxygen-ui';
+
+import type { Project } from '../../../../api/resources/projects';
+import { ProjectCard } from '../../../../components/cards/ProjectCard';
+
+type ProjectsGridProps = {
+  projects: Project[];
+  orgHandle: string;
+  onOpen: (project: Project) => void;
+  onDelete?: (project: Project) => void;
+};
+
+/**
+ * Renders exactly the projects it is given. Paging lives on the page, which
+ * owns the request — slicing here as well would page an already-paged response.
+ */
+export function ProjectsGrid({
+  projects,
+  orgHandle,
+  onOpen,
+  onDelete,
+}: ProjectsGridProps) {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gap: 2.5,
+        gridTemplateColumns: {
+          xs: '1fr',
+          sm: 'repeat(2, 1fr)',
+          md: 'repeat(3, 1fr)',
+          lg: 'repeat(4, 1fr)',
+        },
+        // Allow cards to shrink so long text does not widen the grid.
+        '& > *': { minWidth: 0 },
+      }}
+    >
+      {projects.map((project) => (
+        <ProjectCard
+          key={project.id}
+          onDelete={onDelete}
+          onOpen={onOpen}
+          orgHandle={orgHandle}
+          project={project}
+        />
+      ))}
+    </Box>
+  );
+}
diff --git a/portals/api-control-plane/src/features/settings/SettingsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
similarity index 100%
rename from portals/api-control-plane/src/features/settings/SettingsPage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
diff --git a/portals/api-control-plane/src/features/system/SystemPages.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/system/SystemPages.tsx
similarity index 92%
rename from portals/api-control-plane/src/features/system/SystemPages.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/system/SystemPages.tsx
index df1f05c388..542ee1833c 100644
--- a/portals/api-control-plane/src/features/system/SystemPages.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/system/SystemPages.tsx
@@ -19,10 +19,10 @@
 import { Button, PageContent, PageTitle, Stack, Typography } from '@wso2/oxygen-ui';
 import { Navigate, useNavigate } from 'react-router-dom';
 
-import { useOrganizations } from '../../api/hooks/useMvpQueries';
-import { EmptyState, ErrorState, LoadingState } from '../../components/StateViews';
-import { routes } from '../../routes/paths';
-import { useAuth } from '../auth/AuthProvider';
+import { useOrganizations } from '../../../../api/hooks/useMvpQueries';
+import { EmptyState, ErrorState, LoadingState } from '../../../../components/StateViews';
+import { routes } from '../../../../routes/paths';
+import { useAuth } from '../../../../contexts/auth/AuthProvider';
 
 export function OrganizationRedirectPage() {
   const organizationsQuery = useOrganizations();
diff --git a/portals/api-control-plane/src/features/test/TestPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/test/TestPage.tsx
similarity index 91%
rename from portals/api-control-plane/src/features/test/TestPage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/test/TestPage.tsx
index a04744dbc0..91acb2af2e 100644
--- a/portals/api-control-plane/src/features/test/TestPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/test/TestPage.tsx
@@ -24,8 +24,8 @@ import {
   PageTitle,
 } from '@wso2/oxygen-ui';
 
-import { useApiProxy, useApi } from '../../api/hooks/useMvpQueries';
-import { ErrorState, LoadingState } from '../../components/StateViews';
+import { useApiProxy, useApi } from '../../../../api/hooks/useMvpQueries';
+import { ErrorState, LoadingState } from '../../../../components/StateViews';
 
 export function TestPage() {
   const apiQuery = useApi();
diff --git a/portals/api-control-plane/src/pages/appShell/useFooterHeight.ts b/portals/api-control-plane/src/pages/appShell/useFooterHeight.ts
new file mode 100644
index 0000000000..cda18af72e
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/useFooterHeight.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useState } from 'react';
+
+import { APP_FOOTER_ID } from './appLayoutConstants';
+
+/**
+ * Measures the app footer's height.
+ *
+ * The footer sits at the bottom of the same scroll area a sticky bottom bar
+ * (`stickyBottomBarSx`) sticks to, so `bottom: 0` would leave the bar underneath
+ * it. Every such bar offsets by this value instead of a hardcoded one, because
+ * the footer's height depends on the theme's spacing and on whether its links
+ * wrap on a narrow viewport.
+ *
+ * Returns 0 when the footer is absent — a page rendered outside the app shell,
+ * or a test — which degrades to `bottom: 0` rather than throwing.
+ */
+export function useFooterHeight(): number {
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    const element = document.getElementById(APP_FOOTER_ID);
+    if (!element) return;
+
+    const update = () => setHeight(element.offsetHeight);
+    update();
+
+    // The footer reflows on viewport resize (its links wrap), so a one-off
+    // measurement would leave the bar overlapping it at that width.
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  return height;
+}
diff --git a/portals/api-control-plane/src/features/auth/AuthCallbackPage.tsx b/portals/api-control-plane/src/pages/auth/AuthCallbackPage.tsx
similarity index 100%
rename from portals/api-control-plane/src/features/auth/AuthCallbackPage.tsx
rename to portals/api-control-plane/src/pages/auth/AuthCallbackPage.tsx
diff --git a/portals/api-control-plane/src/features/auth/LoginPage.tsx b/portals/api-control-plane/src/pages/auth/LoginPage.tsx
similarity index 99%
rename from portals/api-control-plane/src/features/auth/LoginPage.tsx
rename to portals/api-control-plane/src/pages/auth/LoginPage.tsx
index 9c1ff7081f..d17fd4393d 100644
--- a/portals/api-control-plane/src/features/auth/LoginPage.tsx
+++ b/portals/api-control-plane/src/pages/auth/LoginPage.tsx
@@ -30,7 +30,7 @@ import { ChangeEvent, KeyboardEvent, useEffect, useMemo, useRef, useState } from
 import { Navigate, useLocation } from 'react-router-dom';
 
 import { runtimeConfig } from '../../config/runtime';
-import { useAuth } from './AuthProvider';
+import { useAuth } from '../../contexts/auth/AuthProvider';
 
 type LoginLocationState = {
   confirmationKey?: string;
diff --git a/portals/api-control-plane/src/routes/AppRoutes.tsx b/portals/api-control-plane/src/routes/AppRoutes.tsx
index cffdcd5bab..1e4c039342 100644
--- a/portals/api-control-plane/src/routes/AppRoutes.tsx
+++ b/portals/api-control-plane/src/routes/AppRoutes.tsx
@@ -19,17 +19,17 @@
 import { lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-import { AuthCallbackPage } from '../features/auth/AuthCallbackPage';
-import { LoginPage } from '../features/auth/LoginPage';
+import { AuthCallbackPage } from '../pages/auth/AuthCallbackPage';
+import { LoginPage } from '../pages/auth/LoginPage';
 import {
   NotFoundPage,
   OrganizationRedirectPage,
   ServerErrorPage,
   SessionExpiredPage,
   UnauthorizedPage,
-} from '../features/system/SystemPages';
+} from '../pages/appShell/appShellPages/system/SystemPages';
 import { ConsoleScopeProvider } from '../scope/ConsoleScopeProvider';
-import AppLayout from '../layouts/AppLayout';
+import AppLayout from '../pages/appShell/AppLayout';
 import {
   buildScopedExtensionPath,
   type ApiControlPlaneExtension,
@@ -40,66 +40,66 @@ import { routes } from './paths';
 // Code-split the authenticated feature pages so they are not pulled into the
 // initial (login) bundle.
 const OrganizationHomePage = lazy(() =>
-  import('../features/organizations/OrganizationHomePage').then((m) => ({
+  import('../pages/appShell/appShellPages/organizations/OrganizationHomePage').then((m) => ({
     default: m.OrganizationHomePage,
   }))
 );
 const ProjectListPage = lazy(() =>
-  import('../features/projects/ProjectListPage').then((m) => ({
+  import('../pages/appShell/appShellPages/projects/ProjectListPage').then((m) => ({
     default: m.ProjectListPage,
   }))
 );
 const GatewaysPage = lazy(() =>
-  import('../features/gateways/GatewaysPage').then((m) => ({
+  import('../pages/appShell/appShellPages/gateways/GatewaysPage').then((m) => ({
     default: m.GatewaysPage,
   }))
 );
 const GatewayCreatePage = lazy(() =>
-  import('../features/gateways/GatewayCreatePage').then((m) => ({
+  import('../pages/appShell/appShellPages/gateways/GatewayCreatePage').then((m) => ({
     default: m.GatewayCreatePage,
   }))
 );
 const GatewayDetailPage = lazy(() =>
-  import('../features/gateways/GatewayDetailPage').then((m) => ({
+  import('../pages/appShell/appShellPages/gateways/GatewayDetailPage').then((m) => ({
     default: m.GatewayDetailPage,
   }))
 );
 const ProjectHomePage = lazy(() =>
-  import('../features/projects/ProjectHomePage').then((m) => ({
+  import('../pages/appShell/appShellPages/projects/ProjectHomePage').then((m) => ({
     default: m.ProjectHomePage,
   }))
 );
 const ApiListPage = lazy(() =>
-  import('../features/apis/ApiListPage').then((m) => ({
+  import('../pages/appShell/appShellPages/apis/ApiListPage').then((m) => ({
     default: m.ApiListPage,
   }))
 );
 const ApiCreatePage = lazy(() =>
-  import('../features/apis/ApiCreatePage').then((m) => ({
+  import('../pages/appShell/appShellPages/apis/ApiCreatePage').then((m) => ({
     default: m.ApiCreatePage,
   }))
 );
 const ApiDetailPage = lazy(() =>
-  import('../features/apis/ApiDetailPage').then((m) => ({
+  import('../pages/appShell/appShellPages/apis/ApiDetailPage').then((m) => ({
     default: m.ApiDetailPage,
   }))
 );
 const DeployPage = lazy(() =>
-  import('../features/deploy/DeployPage').then((m) => ({ default: m.DeployPage }))
+  import('../pages/appShell/appShellPages/deploy/DeployPage').then((m) => ({ default: m.DeployPage }))
 );
 const TestPage = lazy(() =>
-  import('../features/test/TestPage').then((m) => ({ default: m.TestPage }))
+  import('../pages/appShell/appShellPages/test/TestPage').then((m) => ({ default: m.TestPage }))
 );
 const ManagePage = lazy(() =>
-  import('../features/manage/ManagePage').then((m) => ({ default: m.ManagePage }))
+  import('../pages/appShell/appShellPages/manage/ManagePage').then((m) => ({ default: m.ManagePage }))
 );
 const RuntimeLogsPage = lazy(() =>
-  import('../features/logs/RuntimeLogsPage').then((m) => ({
+  import('../pages/appShell/appShellPages/logs/RuntimeLogsPage').then((m) => ({
     default: m.RuntimeLogsPage,
   }))
 );
 const SettingsPage = lazy(() =>
-  import('../features/settings/SettingsPage').then((m) => ({
+  import('../pages/appShell/appShellPages/settings/SettingsPage').then((m) => ({
     default: m.SettingsPage,
   }))
 );
diff --git a/portals/api-control-plane/src/routes/ProtectedRoute.tsx b/portals/api-control-plane/src/routes/ProtectedRoute.tsx
index fc00136e8d..8296e283be 100644
--- a/portals/api-control-plane/src/routes/ProtectedRoute.tsx
+++ b/portals/api-control-plane/src/routes/ProtectedRoute.tsx
@@ -19,7 +19,7 @@
 import { Navigate, Outlet, useLocation } from 'react-router-dom';
 
 import { LoadingState } from '../components/StateViews';
-import { useAuth } from '../features/auth/AuthProvider';
+import { useAuth } from '../contexts/auth/AuthProvider';
 import { routes } from './paths';
 
 export function ProtectedRoute() {
diff --git a/portals/api-control-plane/src/scope/ConsoleScopeContext.ts b/portals/api-control-plane/src/scope/ConsoleScopeContext.ts
index 587127b8a0..c68564cc89 100644
--- a/portals/api-control-plane/src/scope/ConsoleScopeContext.ts
+++ b/portals/api-control-plane/src/scope/ConsoleScopeContext.ts
@@ -18,7 +18,7 @@
 
 import { createContext, useContext } from 'react';
 
-import type { ApiCapabilities } from '../features/apis/apiCapabilities';
+import type { ApiCapabilities } from '../pages/appShell/appShellPages/apis/apiCapabilities';
 import type { Api, Organization, Project } from '../types/domain';
 
 export type ConsoleRouteParams = {
diff --git a/portals/api-control-plane/src/scope/ConsoleScopeProvider.tsx b/portals/api-control-plane/src/scope/ConsoleScopeProvider.tsx
index eddd2b2f18..f3c633859c 100644
--- a/portals/api-control-plane/src/scope/ConsoleScopeProvider.tsx
+++ b/portals/api-control-plane/src/scope/ConsoleScopeProvider.tsx
@@ -26,8 +26,8 @@ import {
   useProjects,
 } from '../api/hooks/useMvpQueries';
 import { ApiScopeProvider } from '../api/core/ApiScopeProvider';
-import { useAuth } from '../features/auth/AuthProvider';
-import { getApiCapabilities } from '../features/apis/apiCapabilities';
+import { useAuth } from '../contexts/auth/AuthProvider';
+import { getApiCapabilities } from '../pages/appShell/appShellPages/apis/apiCapabilities';
 import {
   ConsoleScopeContext,
   type ConsoleRouteParams,
diff --git a/portals/api-control-plane/src/test/mockAuthState.ts b/portals/api-control-plane/src/test/mockAuthState.ts
index 8f2cafbade..d6bfd9918f 100644
--- a/portals/api-control-plane/src/test/mockAuthState.ts
+++ b/portals/api-control-plane/src/test/mockAuthState.ts
@@ -18,7 +18,7 @@
 
 import { vi } from 'vitest';
 
-import type { AuthState, AuthStatus } from '../features/auth/authTypes';
+import type { AuthState, AuthStatus } from '../contexts/auth/authTypes';
 
 /**
  * Builds a complete `AuthState` for tests, with every callback as a `vi.fn()`
diff --git a/portals/api-control-plane/src/test/mockScope.ts b/portals/api-control-plane/src/test/mockScope.ts
index d389969e89..4c950666d8 100644
--- a/portals/api-control-plane/src/test/mockScope.ts
+++ b/portals/api-control-plane/src/test/mockScope.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { getApiCapabilities } from '../features/apis/apiCapabilities';
+import { getApiCapabilities } from '../pages/appShell/appShellPages/apis/apiCapabilities';
 import { organizations, projects } from '../api/mocks/data';
 import type { ConsoleScope } from '../scope/ConsoleScopeProvider';
 
diff --git a/portals/api-control-plane/src/test/utils.tsx b/portals/api-control-plane/src/test/utils.tsx
index 896d95496a..d9594c015b 100644
--- a/portals/api-control-plane/src/test/utils.tsx
+++ b/portals/api-control-plane/src/test/utils.tsx
@@ -30,8 +30,8 @@ import {
   type ApiClient,
 } from '../api/ApiClientProvider';
 import { NotificationProvider } from '../components/Notifications';
-import { AuthStateContext } from '../features/auth/AuthStateContext';
-import type { AuthState } from '../features/auth/authTypes';
+import { AuthStateContext } from '../contexts/auth/AuthStateContext';
+import type { AuthState } from '../contexts/auth/authTypes';
 import {
   ConsoleScopeContext,
   type ConsoleScope,

From b326824c058f7d339540efbec438e5b172041247 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Fri, 21 Aug 2026 11:24:21 +0530
Subject: [PATCH 03/12] feat(apicp): enhance the app shell to be consistent
 with bijira and some restructuring

- Make the App Side Bar and Header consistent with the bijira.
- Updated projectPath and apiPath functions to manage unresolved project and API scopes.
- Refactored routes to utilize new path builders for project and API-level pages.
- Improved ConsoleScopeContext and ConsoleScopeProvider to handle new API capabilities and project management.
- Added ScopeGate component to manage access to pages based on selected scopes.
---
 .../api-control-plane/src/api/mocks/data.ts   |  34 +-
 .../src/api/mocks/handlers.ts                 |   4 +-
 .../src/api/projects/projectClient.ts         |  18 +-
 .../src/api/resources/apiKeys/index.ts        |  51 ++
 .../src/api/resources/gateways/index.ts       |   0
 .../src/api/resources/organizations/index.ts  |  45 ++
 .../src/api/resources/restApis/index.ts       |  56 ++
 .../src/components/ComingSoon.tsx             | 140 +++++
 .../src/components/cards/ApiCard.tsx          | 259 ----------
 .../src/components/cards/ProjectCard.tsx      |   2 +-
 .../components/cards/SummaryCardSection.tsx   |  20 +-
 .../common/SearchableComplexSelect.tsx        | 282 ++++++++++
 portals/api-control-plane/src/extensions.tsx  |  48 +-
 .../src/i18n/messages/en.json                 | 250 ++++++++-
 .../src/navigation/navigationRegistry.test.ts | 364 +++++++++++--
 .../src/navigation/navigationRegistry.tsx     | 486 +++++++++++++-----
 .../src/navigation/navigationTypes.ts         |  45 +-
 .../navigation/useNavigationItems.test.tsx    | 139 +++++
 .../src/navigation/useNavigationItems.ts      | 155 +++---
 .../src/pages/appShell/APIQuickSelector.tsx   | 191 +++++++
 .../src/pages/appShell/AppHeader.tsx          | 309 +++++++++--
 .../src/pages/appShell/AppLayout.tsx          |  40 +-
 .../src/pages/appShell/AppSidebar.test.tsx    | 108 ++++
 .../src/pages/appShell/AppSidebar.tsx         | 106 +++-
 .../pages/appShell/ProjectQuickSelector.tsx   | 191 +++++++
 .../src/pages/appShell/appLayoutConstants.ts  |   2 +-
 .../appShellPages/admin/AdminPage.tsx         |  38 ++
 .../appShellPages/apis}/ApiCardGrid.tsx       |  34 +-
 .../appShellPages/apis/ApiDetailPage.tsx      |   8 +-
 .../appShellPages/apis/ApiListPage.test.tsx   | 119 ++++-
 .../appShellPages/apis/ApiListPage.tsx        | 190 +++----
 .../appShellPages/apis}/ApiListView.tsx       |  79 +--
 .../appShellPages/apis/components/ApiCard.tsx | 225 ++++++++
 .../apis/components/RestApiChips.tsx          | 158 ++++++
 .../appShellPages/apis/develop/PolicyTab.tsx  |   2 +-
 .../appShellPages/apis/develop/RoutingTab.tsx |   2 +-
 .../apis/develop/{ => components}/SaveBar.tsx |   4 +-
 .../apis/overview/ProgressBanner.tsx          |   4 +-
 .../appShellPages/apis/restApiDisplay.ts      | 189 +++++++
 .../apis/{ => utils}/apiCapabilities.test.ts  |  43 +-
 .../apis/{ => utils}/apiCapabilities.ts       |  19 +-
 .../appShellPages/deploy/DeployPage.tsx       |  42 +-
 .../deploy/GatewayDeploymentHistory.tsx       |   2 +-
 .../{ => components}/GatewayDeployCard.tsx    |  10 +-
 .../{ => components}/GatewayDeployEnvCard.tsx |   8 +-
 .../{ => components}/GatewayDeploymentRow.tsx |   4 +-
 .../GatewayDeploymentSelector.tsx             |   8 +-
 .../deploy/{ => utils}/gatewayDeployUtils.ts  |   2 +-
 .../gateways/GatewayDetailPage.tsx            |   2 +-
 .../appShellPages/gateways/GatewaysPage.tsx   |  35 +-
 .../{ => components}/CopyableCommand.tsx      |   0
 .../appShellPages/insights/CompliancePage.tsx |  38 ++
 .../appShellPages/insights/InsightsPage.tsx   |  38 ++
 .../appShellPages/manage/LifeCyclePage.tsx    |  38 ++
 .../appShellPages/manage/ManagePage.tsx       |  48 --
 .../appShellPages/manage/MonetizePage.tsx     |  38 ++
 .../observability/AlertsPage.tsx              |  38 ++
 .../observability/MetricsPage.tsx             |  38 ++
 .../RuntimeLogsPage.tsx                       |  41 +-
 .../organizations/OrganizationHomePage.tsx    |  71 +--
 .../projects/ProjectHomePage.tsx              |  25 +-
 .../projects/ProjectListPage.tsx              |  15 +-
 .../appShellPages/settings/SettingsPage.tsx   |  14 +-
 .../appShellPages/test/ApiChatPage.tsx        |  38 ++
 .../appShellPages/test/ApiConsolePage.tsx     |  38 ++
 .../appShell/appShellPages/test/TestPage.tsx  |  35 +-
 .../src/routes/AppRoutes.tsx                  | 131 ++++-
 .../src/routes/paths.test.ts                  | 128 +++++
 portals/api-control-plane/src/routes/paths.ts | 274 +++++++++-
 .../src/scope/ConsoleScopeContext.ts          |   8 +-
 .../src/scope/ConsoleScopeProvider.tsx        |  62 +--
 .../src/scope/ScopeGate.test.tsx              | 211 ++++++++
 .../api-control-plane/src/scope/ScopeGate.tsx | 336 ++++++++++++
 .../src/scope/consoleRouteParams.ts           |  63 +++
 .../api-control-plane/src/test/mockScope.ts   |   8 +-
 portals/api-control-plane/src/theme/index.ts  |   2 +
 .../api-control-plane/src/theme/receipes.ts   |  33 --
 77 files changed, 5248 insertions(+), 1133 deletions(-)
 create mode 100644 portals/api-control-plane/src/api/resources/apiKeys/index.ts
 create mode 100644 portals/api-control-plane/src/api/resources/gateways/index.ts
 create mode 100644 portals/api-control-plane/src/api/resources/organizations/index.ts
 create mode 100644 portals/api-control-plane/src/api/resources/restApis/index.ts
 create mode 100644 portals/api-control-plane/src/components/ComingSoon.tsx
 delete mode 100644 portals/api-control-plane/src/components/cards/ApiCard.tsx
 create mode 100644 portals/api-control-plane/src/components/common/SearchableComplexSelect.tsx
 create mode 100644 portals/api-control-plane/src/navigation/useNavigationItems.test.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/APIQuickSelector.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/AppSidebar.test.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/ProjectQuickSelector.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/admin/AdminPage.tsx
 rename portals/api-control-plane/src/{components/cards => pages/appShell/appShellPages/apis}/ApiCardGrid.tsx (58%)
 rename portals/api-control-plane/src/{components/cards => pages/appShell/appShellPages/apis}/ApiListView.tsx (71%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/components/ApiCard.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/components/RestApiChips.tsx
 rename portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/{ => components}/SaveBar.tsx (92%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/restApiDisplay.ts
 rename portals/api-control-plane/src/pages/appShell/appShellPages/apis/{ => utils}/apiCapabilities.test.ts (51%)
 rename portals/api-control-plane/src/pages/appShell/appShellPages/apis/{ => utils}/apiCapabilities.ts (67%)
 rename portals/api-control-plane/src/pages/appShell/appShellPages/deploy/{ => components}/GatewayDeployCard.tsx (96%)
 rename portals/api-control-plane/src/pages/appShell/appShellPages/deploy/{ => components}/GatewayDeployEnvCard.tsx (97%)
 rename portals/api-control-plane/src/pages/appShell/appShellPages/deploy/{ => components}/GatewayDeploymentRow.tsx (97%)
 rename portals/api-control-plane/src/pages/appShell/appShellPages/deploy/{ => components}/GatewayDeploymentSelector.tsx (96%)
 rename portals/api-control-plane/src/pages/appShell/appShellPages/deploy/{ => utils}/gatewayDeployUtils.ts (97%)
 rename portals/api-control-plane/src/pages/appShell/appShellPages/gateways/{ => components}/CopyableCommand.tsx (100%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/insights/CompliancePage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/insights/InsightsPage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/manage/LifeCyclePage.tsx
 delete mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/manage/ManagePage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/manage/MonetizePage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/observability/AlertsPage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/observability/MetricsPage.tsx
 rename portals/api-control-plane/src/pages/appShell/appShellPages/{logs => observability}/RuntimeLogsPage.tsx (50%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/test/ApiChatPage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/test/ApiConsolePage.tsx
 create mode 100644 portals/api-control-plane/src/routes/paths.test.ts
 create mode 100644 portals/api-control-plane/src/scope/ScopeGate.test.tsx
 create mode 100644 portals/api-control-plane/src/scope/ScopeGate.tsx
 create mode 100644 portals/api-control-plane/src/scope/consoleRouteParams.ts

diff --git a/portals/api-control-plane/src/api/mocks/data.ts b/portals/api-control-plane/src/api/mocks/data.ts
index 8e681eff29..0a749a3b56 100644
--- a/portals/api-control-plane/src/api/mocks/data.ts
+++ b/portals/api-control-plane/src/api/mocks/data.ts
@@ -22,49 +22,33 @@ import type {
   Deployment,
   Environment,
   Gateway,
-  Organization,
-  Project,
 } from '../../types/domain';
 
+import type { Organization } from "../../api/resources/organizations";
+import type { Project } from "../../api/resources/projects";
+
 export const organizations: Organization[] = [
   {
     id: 'org-1',
-    uuid: '783c6c4d-8b9b-4190-b70a-e717ab1ee739',
-    name: 'API Platform Demo',
-    handle: 'api-platform-demo',
-    description: 'Demo organization for API Platform development',
-    status: 'ACTIVE',
+    displayName: 'API Platform Demo',
+    region: 'us-east-1',
   },
 ];
 
 export const projects: Project[] = [
   {
     id: 'project-1',
-    orgId: 'org-1',
-    name: 'Retail APIs',
-    handler: 'retail-apis',
+    organizationId: 'org-1',
+    displayName: 'Retail APIs',
     description: 'Core APIs for retail services',
-    region: 'us-east-1',
-    version: '1.0.0',
-    createdDate: '2026-05-20T08:00:00.000Z',
     updatedAt: '2026-06-01T08:00:00.000Z',
-    type: 'MULTI_REPO',
-    gitProvider: 'github',
-    repository: 'api-platform-demo/retail-apis',
   },
   {
     id: 'project-2',
-    orgId: 'org-1',
-    name: 'Internal Tools',
-    handler: 'internal-tools',
+    organizationId: 'org-1',
+    displayName : 'Internal Tools',
     description: 'Operations and internal integration services',
-    region: 'us-east-1',
-    version: '1.0.0',
-    createdDate: '2026-05-28T08:00:00.000Z',
     updatedAt: '2026-06-10T08:00:00.000Z',
-    type: 'MONO_REPO',
-    gitProvider: 'github',
-    repository: 'api-platform-demo/internal-tools',
   },
 ];
 
diff --git a/portals/api-control-plane/src/api/mocks/handlers.ts b/portals/api-control-plane/src/api/mocks/handlers.ts
index a774a76efa..736a5e59d7 100644
--- a/portals/api-control-plane/src/api/mocks/handlers.ts
+++ b/portals/api-control-plane/src/api/mocks/handlers.ts
@@ -52,12 +52,12 @@ export const handlers = [
   graphql.query('OxygenProjects', ({ variables }) => {
     const projectVariables = variables as ProjectVariables;
     const organization = organizations.find(
-      (item) => item.handle === projectVariables.orgHandle
+      (item) => item.id === projectVariables.orgHandle
     );
     return HttpResponse.json({
       data: {
         projects: projects.filter(
-          (project) => project.orgId === organization?.id
+          (project) => project.organizationId === organization?.id
         ),
       },
     });
diff --git a/portals/api-control-plane/src/api/projects/projectClient.ts b/portals/api-control-plane/src/api/projects/projectClient.ts
index 4f1856e308..39fe3166d0 100644
--- a/portals/api-control-plane/src/api/projects/projectClient.ts
+++ b/portals/api-control-plane/src/api/projects/projectClient.ts
@@ -48,9 +48,9 @@ const findOrganization = async (orgHandle: string) => {
 export async function listProjects(orgHandle: string): Promise<Project[]> {
   if (useMockApi()) {
     await delay();
-    const org = organizations.find((item) => item.handle === orgHandle);
+    const org = organizations.find((item) => item.id === orgHandle);
     return projects
-      .filter((project) => project.orgId === org?.id)
+      .filter((project) => project.organizationId === org?.id)
       .map(toProject);
   }
 
@@ -141,8 +141,8 @@ export async function createProject(
 
   if (useMockApi()) {
     await delay();
-    const org = organizations.find((item) => item.handle === orgHandle);
-    if (projects.some((p) => p.orgId === org?.id && p.name === name)) {
+    const org = organizations.find((item) => item.id === orgHandle);
+    if (projects.some((p) => p.organizationId === org?.id && p.displayName === name)) {
       throw new ApiError(
         'Project already exists in organization',
         'CONFLICT',
@@ -160,7 +160,11 @@ export async function createProject(
       createdDate: now,
       updatedAt: now,
     };
-    projects.push(project);
+    projects.push({
+      ...project,
+      organizationId: org?.id || '',
+      displayName: name,
+    });
     return toProject(project);
   }
 
@@ -194,8 +198,8 @@ export async function deleteProject(
 ): Promise<void> {
   if (useMockApi()) {
     await delay();
-    const org = organizations.find((item) => item.handle === orgHandle);
-    const orgProjects = projects.filter((p) => p.orgId === org?.id);
+    const org = organizations.find((item) => item.id === orgHandle);
+    const orgProjects = projects.filter((p) => p.organizationId === org?.id);
     // Mirror the platform-api delete guards (last project / has APIs) so the
     // mock surfaces the same blocking errors the real backend returns.
     if (orgProjects.length <= 1) {
diff --git a/portals/api-control-plane/src/api/resources/apiKeys/index.ts b/portals/api-control-plane/src/api/resources/apiKeys/index.ts
new file mode 100644
index 0000000000..2c79863d34
--- /dev/null
+++ b/portals/api-control-plane/src/api/resources/apiKeys/index.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type {
+        ListMyApiKeysQuery,
+        CreateApiKeyBody,
+        UpdateApiKeyBody,
+        UserApiKeyListResponse,
+        CreateApiKeyResponse,
+        UpdateApiKeyResponse,
+        ApiKeyArtifactType
+} from './apiKeys.endpoints';
+
+import {
+    useMyApiKeys,
+    useCreateApiKey,
+    useUpdateApiKey,
+    useRevokeApiKey,
+} from './apiKeys.hooks';
+
+export type {
+    ListMyApiKeysQuery,
+    CreateApiKeyBody,
+    UpdateApiKeyBody,
+    UserApiKeyListResponse,
+    CreateApiKeyResponse,
+    UpdateApiKeyResponse,
+    ApiKeyArtifactType
+}
+
+export {
+    useMyApiKeys,
+    useCreateApiKey,
+    useUpdateApiKey,
+    useRevokeApiKey,
+}
\ No newline at end of file
diff --git a/portals/api-control-plane/src/api/resources/gateways/index.ts b/portals/api-control-plane/src/api/resources/gateways/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/portals/api-control-plane/src/api/resources/organizations/index.ts b/portals/api-control-plane/src/api/resources/organizations/index.ts
new file mode 100644
index 0000000000..b7dd426143
--- /dev/null
+++ b/portals/api-control-plane/src/api/resources/organizations/index.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type {
+    Organization,
+    OrganizationListResponse,
+    ListOrganizationsQuery,
+    RegisterOrganizationBody
+} from './organizations.endpoints';
+
+import {
+    useOrganizations,
+    useOrganization,
+    useRegisterOrganization,
+    useOrganizationOptions
+} from './organizations.hooks';
+
+export type {
+    Organization,
+    OrganizationListResponse,
+    ListOrganizationsQuery,
+    RegisterOrganizationBody
+};
+
+export {
+    useOrganizations,
+    useOrganization,
+    useRegisterOrganization,
+    useOrganizationOptions
+};
\ No newline at end of file
diff --git a/portals/api-control-plane/src/api/resources/restApis/index.ts b/portals/api-control-plane/src/api/resources/restApis/index.ts
new file mode 100644
index 0000000000..ea03397b8b
--- /dev/null
+++ b/portals/api-control-plane/src/api/resources/restApis/index.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type {
+    RestApi,
+    RestApiListResponse,
+    ListRestApisQuery,
+    CreateRestApiBody,
+    UpdateRestApiBody
+} from './restApis.endpoints';
+
+import type {
+    RestApiListFilters
+} from './restApis.hooks';
+
+import {
+    useRestApis,
+    useRestApi,
+    useCreateRestApi,
+    useUpdateRestApi,
+    useDeleteRestApi,
+    useRestApiOptions
+} from './restApis.hooks'
+
+export type {
+    RestApi,
+    RestApiListResponse,
+    ListRestApisQuery,
+    CreateRestApiBody,
+    UpdateRestApiBody,
+    RestApiListFilters
+}
+    
+export {
+    useRestApis,
+    useRestApi,
+    useCreateRestApi,
+    useUpdateRestApi,
+    useDeleteRestApi,
+    useRestApiOptions
+}
\ No newline at end of file
diff --git a/portals/api-control-plane/src/components/ComingSoon.tsx b/portals/api-control-plane/src/components/ComingSoon.tsx
new file mode 100644
index 0000000000..429e8e1e1b
--- /dev/null
+++ b/portals/api-control-plane/src/components/ComingSoon.tsx
@@ -0,0 +1,140 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { ReactNode } from 'react';
+import { Box, Button, ColorSchemeSVG, Stack, Typography } from '@wso2/oxygen-ui';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+/**
+ * The roadworks barricade, drawn through Oxygen's `ColorSchemeSVG` so its fills
+ * and strokes resolve to theme colours rather than hard-coded hex — the console
+ * has a light/dark toggle, and a fixed-colour illustration would go muddy in
+ * dark mode.
+ */
+function BarricadeIllustration() {
+  return (
+    <ColorSchemeSVG width={268} height={210} viewBox="0 0 268 210">
+      {/* Soft blob behind the barricade. */}
+      <path
+        fill="surface"
+        d="M46 92c-14-42 18-84 66-88 44-4 68 16 102 22 30 6 52 30 50 62-2 34-26 52-58 62-36 12-70 20-104 8C64 146 56 122 46 92Z"
+      />
+
+      {/* Two angled boards, each with its own diagonal stripes. */}
+      <g stroke="border" strokeWidth="1.5" fill="background">
+        <path d="M56 62h84l-14 46H42Z" />
+        <path d="M146 62h84l-14 46h-84Z" />
+      </g>
+      <g fill="warning">
+        <path d="M74 64h26l-14 42H60Z" />
+        <path d="M112 64h24l-14 42H98Z" />
+        <path d="M158 64h26l-14 42h-26Z" />
+        <path d="M198 64h22l-14 42h-22Z" />
+      </g>
+      <g stroke="border" strokeWidth="1.5" fill="none">
+        <path d="M56 62h84l-14 46H42Z" />
+        <path d="M146 62h84l-14 46h-84Z" />
+      </g>
+
+      {/* Legs and the ground line they stand on. */}
+      <g stroke="border" strokeWidth="1.5" strokeLinecap="round">
+        <path d="M92 108v56M186 108v56" />
+        <path d="M42 164h96M158 164h72" />
+      </g>
+
+      {/* Warning lamps, one at each end. */}
+      <g fill="warning">
+        <circle cx="66" cy="48" r="5" />
+        <circle cx="222" cy="48" r="5" />
+      </g>
+      <g stroke="warning" strokeWidth="1.5" strokeLinecap="round">
+        <path d="M58 36l-4-6M66 34v-7M74 36l4-6" />
+        <path d="M214 36l-4-6M222 34v-7M230 36l4-6" />
+      </g>
+    </ColorSchemeSVG>
+  );
+}
+
+export type ComingSoonProps = {
+  /**
+   * The feature's own name, interpolated into the message — pass a
+   * `<FormattedMessage>` so the page keeps owning its own translation.
+   */
+  feature: ReactNode;
+  /** An extra line under the first, e.g. where to go in the meantime. */
+  detail?: ReactNode;
+  /** Somewhere to go instead. Omitted when there is no alternative yet. */
+  action?: { label: ReactNode; to: string };
+};
+
+/**
+ * Placeholder for a page whose feature is not built yet.
+ *
+ * Distinct from `EmptyState` in `StateViews`: that one says "nothing here yet,
+ * add something", which invites an action the user *can* take. This says "not
+ * here yet at all", so it never implies the page will fill up on its own.
+ */
+export function ComingSoon({ action, detail, feature }: ComingSoonProps) {
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        // Fills the content area so the block sits optically centred rather than
+        // hugging the top of the page.
+        minHeight: '60vh',
+        px: 3,
+        py: 6,
+      }}
+    >
+      <Stack alignItems="center" spacing={1} sx={{ maxWidth: 520 }}>
+        <BarricadeIllustration />
+        <Typography sx={{ fontWeight: 700, pt: 1 }} variant="h4">
+          <FormattedMessage
+            id="components.comingSoon.title"
+            defaultMessage="Coming Soon"
+          />
+        </Typography>
+        <Typography color="text.secondary" sx={{ textAlign: 'center' }}>
+          <FormattedMessage
+            id="components.comingSoon.body"
+            defaultMessage="{feature} will be available soon."
+            values={{ feature }}
+          />
+        </Typography>
+        {detail && (
+          <Typography color="text.secondary" sx={{ textAlign: 'center' }}>
+            {detail}
+          </Typography>
+        )}
+        {action && (
+          <Button
+            component={Link}
+            sx={{ mt: 2 }}
+            to={action.to}
+            variant="contained"
+          >
+            {action.label}
+          </Button>
+        )}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/portals/api-control-plane/src/components/cards/ApiCard.tsx b/portals/api-control-plane/src/components/cards/ApiCard.tsx
deleted file mode 100644
index a4942ce22a..0000000000
--- a/portals/api-control-plane/src/components/cards/ApiCard.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { useState } from 'react';
-import {
-  alpha,
-  Avatar,
-  Box,
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  Stack,
-  Typography,
-} from '@wso2/oxygen-ui';
-import {
-  Boxes,
-  Clock,
-  MoreVertical,
-  Trash2,
-} from '@wso2/oxygen-ui-icons-react';
-
-import type { Api, ApiStatus } from '../../types/domain';
-import { relativeTime } from '../../utils/relativeTime';
-import { COMPONENT_KIND_LABEL, componentStatusColor } from './apiDisplay';
-import { EnvStatusChips } from './EnvStatusChips';
-import { KindIconTile } from './KindIconTile';
-
-const STATUS_LABEL: Record<ApiStatus, string> = {
-  ACTIVE: 'Active',
-  PENDING: 'Pending',
-  FAILED: 'Failed',
-  DRAFT: 'Draft',
-};
-
-/** Shared square-chip styling from the gateway card. */
-const chipSx = {
-  alignItems: 'center',
-  bgcolor: 'action.hover',
-  border: '1px solid',
-  borderColor: 'divider',
-  borderRadius: 1,
-  color: 'text.secondary',
-  display: 'inline-flex',
-  fontSize: 12,
-  fontWeight: 500,
-  gap: 0.75,
-  px: 1.25,
-  py: 0.5,
-} as const;
-
-type ApiCardProps = {
-  component: Api;
-  onOpen: (component: Api) => void;
-  onDelete?: (component: Api) => void;
-};
-
-/** API card styled to match the gateway card family (GatewaysPage). */
-export function ApiCard({ component, onOpen, onDelete }: ApiCardProps) {
-  const updated = component.updatedAt || component.createdAt;
-  const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
-
-  const statusColor = componentStatusColor(component.status);
-  const statusMain =
-    statusColor === 'default' ? 'text.disabled' : `${statusColor}.main`;
-
-  const closeMenu = (event?: React.MouseEvent) => {
-    event?.stopPropagation();
-    setMenuAnchor(null);
-  };
-
-  return (
-    <Box
-      onClick={() => onOpen(component)}
-      sx={{
-        bgcolor: 'background.paper',
-        border: '1px solid',
-        borderColor: 'divider',
-        borderRadius: 2,
-        cursor: 'pointer',
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        p: 2.5,
-        transition: 'border-color .2s, box-shadow .2s, transform .2s',
-        '&:hover': {
-          borderColor: 'primary.main',
-          boxShadow: 3,
-          transform: 'translateY(-2px)',
-        },
-      }}
-    >
-      {/* Header: kind tile, name + handler, actions menu */}
-      <Stack direction="row" spacing={1.75}>
-        <KindIconTile size={46} />
-        <Box sx={{ flex: 1, minWidth: 0 }}>
-          <Typography noWrap sx={{ fontWeight: 600 }} variant="subtitle1">
-            {component.displayName}
-          </Typography>
-          <Typography
-            noWrap
-            sx={{
-              color: 'text.secondary',
-              fontFamily: 'monospace',
-              fontSize: 12.5,
-              mt: 0.25,
-            }}
-          >
-            {component.handler}
-          </Typography>
-        </Box>
-        {onDelete && (
-          <>
-            <IconButton
-              aria-label="API actions"
-              onClick={(event) => {
-                event.stopPropagation();
-                setMenuAnchor(event.currentTarget);
-              }}
-              size="small"
-              sx={{ alignSelf: 'flex-start', mr: -0.5, mt: -0.5 }}
-            >
-              <MoreVertical size={16} />
-            </IconButton>
-            <Menu
-              anchorEl={menuAnchor}
-              onClose={() => closeMenu()}
-              open={Boolean(menuAnchor)}
-            >
-              <MenuItem
-                onClick={(event) => {
-                  closeMenu(event);
-                  onDelete(component);
-                }}
-                sx={{ color: 'error.main' }}
-              >
-                <ListItemIcon sx={{ color: 'inherit' }}>
-                  <Trash2 size={16} />
-                </ListItemIcon>
-                <ListItemText>Delete</ListItemText>
-              </MenuItem>
-            </Menu>
-          </>
-        )}
-      </Stack>
-
-      {/* Two-line clamped description with reserved space so cards align */}
-      <Typography
-        color="text.secondary"
-        sx={{
-          display: '-webkit-box',
-          fontSize: 12,
-          lineHeight: 1.5,
-          minHeight: 36,
-          mt: 1.5,
-          overflow: 'hidden',
-          WebkitBoxOrient: 'vertical',
-          WebkitLineClamp: 2,
-        }}
-        variant="body2"
-      >
-        {component.description || ''}
-      </Typography>
-
-      {/* Chips: tinted kind chip, version, per-environment dots */}
-      <Stack direction="row" sx={{ flexWrap: 'wrap', gap: 1, mb: 2, mt: 2 }}>
-        <Box
-          sx={{
-            ...chipSx,
-            bgcolor: (theme) => alpha(theme.palette.primary.main, 0.14),
-            borderColor: (theme) => alpha(theme.palette.primary.main, 0.3),
-            color: 'primary.main',
-            fontWeight: 600,
-          }}
-        >
-          <Boxes size={13} />
-          {COMPONENT_KIND_LABEL[component.kind]}
-        </Box>
-        {component.version && <Box sx={chipSx}>v{component.version}</Box>}
-        <EnvStatusChips componentId={component.id} />
-      </Stack>
-
-      {/* Footer: status dot, owner, updated time */}
-      <Stack
-        alignItems="center"
-        direction="row"
-        justifyContent="space-between"
-        sx={{
-          borderColor: 'divider',
-          borderTop: '1px solid',
-          mt: 'auto',
-          pt: 1.75,
-        }}
-      >
-        <Stack
-          alignItems="center"
-          direction="row"
-          spacing={0.875}
-          sx={{ color: statusMain }}
-        >
-          <Box
-            sx={{
-              bgcolor: statusMain,
-              borderRadius: '50%',
-              height: 8,
-              width: 8,
-            }}
-          />
-          <Typography sx={{ fontSize: 12.5, fontWeight: 500 }}>
-            {STATUS_LABEL[component.status]}
-          </Typography>
-        </Stack>
-        <Stack
-          alignItems="center"
-          direction="row"
-          spacing={1.5}
-          sx={{ color: 'text.disabled' }}
-        >
-          {component.owner && (
-            <Stack alignItems="center" direction="row" spacing={0.625}>
-              <Avatar
-                sx={{ fontSize: 9, fontWeight: 600, height: 18, width: 18 }}
-              >
-                {component.owner.charAt(0).toUpperCase()}
-              </Avatar>
-              <Typography noWrap sx={{ fontSize: 12 }}>
-                {component.owner}
-              </Typography>
-            </Stack>
-          )}
-          {updated && (
-            <Stack alignItems="center" direction="row" spacing={0.625}>
-              <Clock size={13} />
-              <Typography sx={{ fontSize: 12 }}>
-                {relativeTime(updated)}
-              </Typography>
-            </Stack>
-          )}
-        </Stack>
-      </Stack>
-    </Box>
-  );
-}
diff --git a/portals/api-control-plane/src/components/cards/ProjectCard.tsx b/portals/api-control-plane/src/components/cards/ProjectCard.tsx
index dd5050533b..c1278a8997 100644
--- a/portals/api-control-plane/src/components/cards/ProjectCard.tsx
+++ b/portals/api-control-plane/src/components/cards/ProjectCard.tsx
@@ -294,7 +294,7 @@ export function ProjectCard({
             component={Link}
             onClick={stopCardClick}
             size="small"
-            to={routes.settings(orgHandle, project.id)}
+            to={routes.projectSettings(orgHandle, project.id)}
           >
             <Settings size={16} />
           </IconButton>
diff --git a/portals/api-control-plane/src/components/cards/SummaryCardSection.tsx b/portals/api-control-plane/src/components/cards/SummaryCardSection.tsx
index 7ab745bf2a..d6a17b74e5 100644
--- a/portals/api-control-plane/src/components/cards/SummaryCardSection.tsx
+++ b/portals/api-control-plane/src/components/cards/SummaryCardSection.tsx
@@ -31,6 +31,7 @@ import {
   Typography,
 } from '@wso2/oxygen-ui';
 import { Plus } from '@wso2/oxygen-ui-icons-react';
+import { FormattedMessage } from 'react-intl';
 
 export type SummaryRow = {
   id: string;
@@ -103,7 +104,10 @@ export function SummaryCardSection({
               )}
               {onSeeMore && totalCount > visible.length && (
                 <Button onClick={onSeeMore} size="small">
-                  See more
+                  <FormattedMessage
+                    id="summary.card.see.more"
+                    defaultMessage="See more"
+                  />
                 </Button>
               )}
             </Stack>
@@ -142,13 +146,21 @@ export function SummaryCardSection({
             action={
               onRetry ? (
                 <Button color="inherit" onClick={onRetry} size="small">
-                  Retry
+                  <FormattedMessage
+                    id="summary.card.retry"
+                    defaultMessage="Retry"
+                  />
                 </Button>
               ) : undefined
             }
             severity="error"
           >
-            {error.message || 'Unable to load.'}
+            {error.message || 
+            <FormattedMessage
+              id="summary.card.error"
+              defaultMessage='Unable to load.'
+            />
+            }
           </Alert>
         ) : isEmpty ? (
           <Stack
@@ -216,7 +228,7 @@ export function SummaryCardSection({
                 >
                   {item.icon ||
                     item.avatarText ||
-                    item.title.charAt(0).toUpperCase()}
+                    item?.title.charAt(0).toUpperCase()}
                 </Avatar>
                 <Box sx={{ minWidth: 0 }}>
                   <Typography noWrap sx={{ fontWeight: 600 }} variant="body1">
diff --git a/portals/api-control-plane/src/components/common/SearchableComplexSelect.tsx b/portals/api-control-plane/src/components/common/SearchableComplexSelect.tsx
new file mode 100644
index 0000000000..e7a4f86dc4
--- /dev/null
+++ b/portals/api-control-plane/src/components/common/SearchableComplexSelect.tsx
@@ -0,0 +1,282 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { ReactNode, useEffect, useMemo, useState } from 'react';
+import {
+  Box,
+  ComplexSelect,
+  InputAdornment,
+  ListSubheader,
+  SxProps,
+  TextField,
+  Theme,
+} from '@wso2/oxygen-ui';
+import { Search } from '@wso2/oxygen-ui-icons-react';
+import { useIntl } from 'react-intl';
+
+const DEFAULT_MENU_MAX_HEIGHT = 320;
+const DEFAULT_MENU_MAX_WIDTH = 320;
+
+export type SearchableComplexSelectOption = {
+  id: string;
+  name: string;
+  description?: string;
+};
+
+type Props<T extends SearchableComplexSelectOption> = {
+  value: string;
+  selectedOption: T | null;
+  options: T[];
+  label: string;
+  onChange: (value: string) => void | Promise<void>;
+  renderOptionContent: (option: T) => ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+  error?: unknown;
+  emptyMessage: string;
+  errorMessage?: string;
+  noResultsMessage?: string;
+  loadingMessage?: string;
+  searchPlaceholder?: string;
+  menuMaxHeight?: number;
+  menuMaxWidth?: number;
+  sx?: SxProps<Theme>;
+  getSearchText?: (option: T) => string;
+  openOnFieldClick?: boolean;
+  onFieldClick?: () => void;
+  fieldClickAriaLabel?: string;
+  dropdownClickAriaLabel?: string;
+};
+
+export default function SearchableComplexSelect<
+  T extends SearchableComplexSelectOption,
+>({
+  value,
+  selectedOption,
+  options,
+  label,
+  onChange,
+  renderOptionContent,
+  disabled = false,
+  loading = false,
+  error,
+  emptyMessage,
+  errorMessage = 'Failed to load items',
+  noResultsMessage = 'No matching results',
+  loadingMessage = 'Loading...',
+  searchPlaceholder = 'Search',
+  menuMaxHeight = DEFAULT_MENU_MAX_HEIGHT,
+  menuMaxWidth = DEFAULT_MENU_MAX_WIDTH,
+  sx,
+  getSearchText,
+  openOnFieldClick = true,
+  onFieldClick,
+  fieldClickAriaLabel,
+  dropdownClickAriaLabel,
+}: Props<T>) {
+  const intl = useIntl();
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredOptions = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+
+    if (!query) {
+      return options;
+    }
+
+    return options.filter((option) => {
+      const haystack = getSearchText
+        ? getSearchText(option)
+        : [option.name, option.description, option.id].filter(Boolean).join(' ');
+
+      return haystack.toLowerCase().includes(query);
+    });
+  }, [getSearchText, options, searchQuery]);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setSearchQuery('');
+  };
+
+  useEffect(() => {
+    if (!disabled) {
+      return;
+    }
+
+    setIsOpen(false);
+    setSearchQuery('');
+  }, [disabled]);
+
+  const canSearch = !loading && options.length > 0;
+  const effectiveValue = loading ? '__loading__' : value;
+  const isSelectedOptionFilteredOut =
+    Boolean(value) &&
+    Boolean(selectedOption) &&
+    !filteredOptions.some((option) => option.id === value);
+  const usesSplitTrigger = !disabled && (!openOnFieldClick || Boolean(onFieldClick));
+
+  const selectNode = (
+    <ComplexSelect
+      value={effectiveValue}
+      onChange={(event) => onChange(event.target.value as string)}
+      onOpen={openOnFieldClick ? () => setIsOpen(true) : undefined}
+      onClose={handleClose}
+      open={isOpen}
+      size="small"
+      sx={sx}
+      label={label}
+      disabled={disabled}
+      MenuProps={{
+        autoFocus: false,
+        disableAutoFocusItem: true,
+        slotProps: {
+          paper: {
+            sx: {
+              maxHeight: menuMaxHeight,
+              // Keeps the menu from stretching to the widest option, so option
+              // text can ellipsize instead of pushing the paper off-screen.
+              maxWidth: menuMaxWidth,
+            },
+          },
+        },
+      }}
+    >
+      {isSelectedOptionFilteredOut && selectedOption ? (
+        <ComplexSelect.MenuItem value={selectedOption.id} sx={{ display: 'none' }} aria-hidden>
+          {renderOptionContent(selectedOption)}
+        </ComplexSelect.MenuItem>
+      ) : null}
+
+      {canSearch ? (
+        <ListSubheader
+          component="div"
+          sx={{
+            py: 1,
+            px: 1,
+            bgcolor: 'background.paper',
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+            zIndex: 1,
+          }}
+        >
+          <TextField
+            size="small"
+            fullWidth
+            autoFocus
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            onChange={(event) => setSearchQuery(event.target.value)}
+            onKeyDown={(event) => event.stopPropagation()}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search size={16} />
+                  </InputAdornment>
+                ),
+              },
+            }}
+          />
+        </ListSubheader>
+      ) : null}
+
+      {loading ? (
+        <ComplexSelect.MenuItem value="__loading__" disabled>
+          <ComplexSelect.MenuItem.Text primary={loadingMessage} />
+        </ComplexSelect.MenuItem>
+      ) : options.length === 0 ? (
+        <ComplexSelect.MenuItem value="" disabled>
+          <ComplexSelect.MenuItem.Text
+            primary={error ? errorMessage : emptyMessage}
+            secondary={error ? String(error) : undefined}
+          />
+        </ComplexSelect.MenuItem>
+      ) : filteredOptions.length === 0 ? (
+        <ComplexSelect.MenuItem value="__no_results__" disabled>
+          <ComplexSelect.MenuItem.Text primary={noResultsMessage} />
+        </ComplexSelect.MenuItem>
+      ) : (
+        filteredOptions.map((option) => (
+          <ComplexSelect.MenuItem key={option.id} value={option.id}>
+            {renderOptionContent(option)}
+          </ComplexSelect.MenuItem>
+        ))
+      )}
+    </ComplexSelect>
+  );
+
+  if (!usesSplitTrigger) {
+    return selectNode;
+  }
+
+  return (
+    <Box sx={{ position: 'relative', minWidth: 'fit-content' }}>
+      {selectNode}
+      <Box
+        component="button"
+        type="button"
+        aria-label={fieldClickAriaLabel ?? label}
+        onClick={() => onFieldClick?.()}
+        sx={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 40,
+          bottom: 0,
+          border: 0,
+          p: 0,
+          m: 0,
+          bgcolor: 'transparent',
+          cursor: onFieldClick ? 'pointer' : 'default',
+          borderRadius: 1,
+          zIndex: 1,
+        }}
+      />
+      <Box
+        component="button"
+        type="button"
+        aria-label={
+          dropdownClickAriaLabel ??
+          intl.formatMessage(
+            {
+              id: 'components.common.searchableComplexSelect.dropdownClickAriaLabel',
+              defaultMessage: 'Open {label}',
+            },
+            { label },
+          )
+        }
+        onClick={() => setIsOpen(true)}
+        sx={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          width: 40,
+          bottom: 0,
+          border: 0,
+          p: 0,
+          m: 0,
+          bgcolor: 'transparent',
+          cursor: 'pointer',
+          borderRadius: 1,
+          zIndex: 1,
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/portals/api-control-plane/src/extensions.tsx b/portals/api-control-plane/src/extensions.tsx
index 0ed969124b..b64dd3452a 100644
--- a/portals/api-control-plane/src/extensions.tsx
+++ b/portals/api-control-plane/src/extensions.tsx
@@ -18,6 +18,7 @@
 
 import { createContext, useContext, type ReactNode } from 'react';
 
+import { apiPath, projectPath, type ScopeHandle } from './routes/paths';
 import type { ConsoleScope } from './scope/ConsoleScopeProvider';
 import type { NavigationLevel } from './navigation/navigationTypes';
 
@@ -69,17 +70,58 @@ export function useExtensions(): readonly ApiControlPlaneExtension[] {
  * (organization/project/api), so both `AppRoutes` (route patterns, `orgHandle`
  * etc. as `:param` placeholders) and the nav pipeline (concrete scope values)
  * build the same URL shape from one place.
+ *
+ * A `null` project/API handle drops that scope's segments, exactly as it does
+ * for the built-in `routes.*` builders — see `ScopeHandle` in `routes/paths.ts`.
+ * That is what lets an extension page be reached from a shallower scope and
+ * render `ScopeGate` to ask for the rest.
  */
 export function buildScopedExtensionPath(
   level: NavigationLevel,
   routeSuffix: string,
-  params: { orgHandle: string; projectHandler?: string; apiHandler?: string }
+  params: {
+    orgHandle: string;
+    projectHandler?: ScopeHandle;
+    apiHandler?: ScopeHandle;
+  }
 ): string {
   if (level === 'organization') {
     return `/organizations/${params.orgHandle}/${routeSuffix}`;
   }
   if (level === 'project') {
-    return `/organizations/${params.orgHandle}/projects/${params.projectHandler}/${routeSuffix}`;
+    return projectPath(params.orgHandle, params.projectHandler ?? null, routeSuffix);
+  }
+  return apiPath(
+    params.orgHandle,
+    params.projectHandler ?? null,
+    params.apiHandler ?? null,
+    routeSuffix
+  );
+}
+
+/**
+ * Every route pattern an extension page answers on: its fully-scoped path plus
+ * the scope-less aliases for whichever scopes its level requires. Mirrors
+ * `projectScopedPaths`/`apiScopedPaths` for the built-in pages.
+ */
+export function extensionScopedPaths(
+  level: NavigationLevel,
+  routeSuffix: string
+): string[] {
+  const build = (projectHandler: ScopeHandle, apiHandler: ScopeHandle) =>
+    buildScopedExtensionPath(level, routeSuffix, {
+      apiHandler,
+      orgHandle: ':orgHandle',
+      projectHandler,
+    });
+
+  if (level === 'organization') return [build(null, null)];
+  if (level === 'project') {
+    return [build(':projectHandler', null), build(null, null)];
   }
-  return `/organizations/${params.orgHandle}/projects/${params.projectHandler}/apis/${params.apiHandler}/${routeSuffix}`;
+  return [
+    build(':projectHandler', ':apiHandler'),
+    build(':projectHandler', null),
+    build(null, null),
+  ];
 }
diff --git a/portals/api-control-plane/src/i18n/messages/en.json b/portals/api-control-plane/src/i18n/messages/en.json
index 3dbbfaa067..cf602ac6cc 100644
--- a/portals/api-control-plane/src/i18n/messages/en.json
+++ b/portals/api-control-plane/src/i18n/messages/en.json
@@ -1,4 +1,28 @@
 {
+  "aiWorkspace.pages.appShell.APIQuickSelector.apis": {
+    "defaultMessage": "APIs"
+  },
+  "aiWorkspace.pages.appShell.APIQuickSelector.failed.to.load.apis": {
+    "defaultMessage": "Failed to load APIs"
+  },
+  "aiWorkspace.pages.appShell.APIQuickSelector.loading": {
+    "defaultMessage": "Loading..."
+  },
+  "aiWorkspace.pages.appShell.APIQuickSelector.no.apis.available": {
+    "defaultMessage": "No APIs available"
+  },
+  "aiWorkspace.pages.appShell.ProjectQuickSelector.failed.to.load.projects": {
+    "defaultMessage": "Failed to load projects"
+  },
+  "aiWorkspace.pages.appShell.ProjectQuickSelector.loading": {
+    "defaultMessage": "Loading..."
+  },
+  "aiWorkspace.pages.appShell.ProjectQuickSelector.no.projects.available": {
+    "defaultMessage": "No projects available"
+  },
+  "aiWorkspace.pages.appShell.ProjectQuickSelector.projects": {
+    "defaultMessage": "Projects"
+  },
   "aiWorkspace.pages.appShell.appShellPages.projects.ExploreMoreCard.explore.more": {
     "defaultMessage": "Explore More"
   },
@@ -8,9 +32,187 @@
   "aiWorkspace.pages.appShell.appShellPages.proxies.LLMProxyOverview.last.updated": {
     "defaultMessage": "Last updated :"
   },
-  "organization.home.getStarted": {
-    "defaultMessage": "Get started",
-    "description": "Organization home page get started section title"
+  "apiCard.delete": {
+    "defaultMessage": "Delete {apiName}",
+    "description": "Accessible label for deleting an API from API card"
+  },
+  "apiCard.updated": {
+    "defaultMessage": "Updated {relative}",
+    "description": "Card footer timestamp; {relative} is a phrase such as \"3 hours ago\"."
+  },
+  "apiListPage.createApiButton": {
+    "defaultMessage": "Create API",
+    "description": "Button label for creating a new API"
+  },
+  "apiListPage.subHeader": {
+    "defaultMessage": "REST APIs in this project.",
+    "description": "Sub header for the API list page"
+  },
+  "apiListPage.title": {
+    "defaultMessage": "APIs",
+    "description": "Page title for the API list page"
+  },
+  "appLayout.footer.privacyPolicy": {
+    "defaultMessage": "Privacy Policy",
+    "description": "Footer link to the Privacy Policy page"
+  },
+  "appLayout.footer.termsOfUse": {
+    "defaultMessage": "Terms of Use",
+    "description": "Footer link to the Terms of Use page"
+  },
+  "appLayout.notificationPanel.headerTitle": {
+    "defaultMessage": "Notifications",
+    "description": "Header title for the notification panel"
+  },
+  "appShell.adminPage.feature": {
+    "defaultMessage": "Administration for this API"
+  },
+  "appShell.alertsPage.feature": {
+    "defaultMessage": "Observability alerts for this API"
+  },
+  "appShell.apiChatPage.feature": {
+    "defaultMessage": "Testing this API through chat"
+  },
+  "appShell.apiConsolePage.feature": {
+    "defaultMessage": "An interactive API console"
+  },
+  "appShell.compliancePage.feature": {
+    "defaultMessage": "Compliance reporting for this API"
+  },
+  "appShell.deployPage.header": {
+    "defaultMessage": "Deploy {apiName}"
+  },
+  "appShell.deployPage.noGatewaysMatchSearch": {
+    "defaultMessage": "No gateways match your search"
+  },
+  "appShell.deployPage.subHeader": {
+    "defaultMessage": "Deploy the current working copy to a gateway, and manage existing deployments."
+  },
+  "appShell.header.api.aria": {
+    "defaultMessage": "APIs"
+  },
+  "appShell.header.api.empty": {
+    "defaultMessage": "No APIs found"
+  },
+  "appShell.header.api.goToApiLevel": {
+    "defaultMessage": "Go to API level"
+  },
+  "appShell.header.api.label": {
+    "defaultMessage": "APIs"
+  },
+  "appShell.header.api.noResults": {
+    "defaultMessage": "No matching APIs"
+  },
+  "appShell.header.api.placeholder": {
+    "defaultMessage": "Search APIs..."
+  },
+  "appShell.header.api.search": {
+    "defaultMessage": "Search"
+  },
+  "appShell.header.api.select": {
+    "defaultMessage": "Select API"
+  },
+  "appShell.header.notifications": {
+    "defaultMessage": "Notifications"
+  },
+  "appShell.header.org.aria": {
+    "defaultMessage": "Organizations"
+  },
+  "appShell.header.org.empty": {
+    "defaultMessage": "No organizations found"
+  },
+  "appShell.header.org.label": {
+    "defaultMessage": "Organizations"
+  },
+  "appShell.header.org.noResults": {
+    "defaultMessage": "No matching organizations"
+  },
+  "appShell.header.org.placeholder": {
+    "defaultMessage": "Search organizations..."
+  },
+  "appShell.header.project.aria": {
+    "defaultMessage": "Projects"
+  },
+  "appShell.header.project.empty": {
+    "defaultMessage": "No projects found"
+  },
+  "appShell.header.project.goToOrganization": {
+    "defaultMessage": "Go to organization level"
+  },
+  "appShell.header.project.label": {
+    "defaultMessage": "Projects"
+  },
+  "appShell.header.project.noResults": {
+    "defaultMessage": "No matching projects"
+  },
+  "appShell.header.project.placeholder": {
+    "defaultMessage": "Search projects..."
+  },
+  "appShell.header.project.select": {
+    "defaultMessage": "Select Project"
+  },
+  "appShell.header.title": {
+    "defaultMessage": "API Platform"
+  },
+  "appShell.insightsPage.feature": {
+    "defaultMessage": "API insights"
+  },
+  "appShell.lifeCyclePage.feature": {
+    "defaultMessage": "Lifecycle management for this API"
+  },
+  "appShell.metricsPage.feature": {
+    "defaultMessage": "Observability metrics for this API"
+  },
+  "appShell.monetizePage.feature": {
+    "defaultMessage": "Monetization for this API"
+  },
+  "appShell.projectHomePage.noAdditionalMetadata": {
+    "defaultMessage": "No additional project metadata available."
+  },
+  "appShell.projectHomePage.projectDetails": {
+    "defaultMessage": "Project details"
+  },
+  "appShell.projectHomePage.viewAllAPIs": {
+    "defaultMessage": "View all APIs ({count})"
+  },
+  "appShell.runtimeLogsPage.header": {
+    "defaultMessage": "Observability"
+  },
+  "appShell.runtimeLogsPage.subHeader": {
+    "defaultMessage": "Runtime logs for {apiHandler}."
+  },
+  "appShell.testPage.header": {
+    "defaultMessage": "Test {apiName}"
+  },
+  "appShell.testPage.subHeader": {
+    "defaultMessage": "Use the following curl command to test the API."
+  },
+  "components.comingSoon.body": {
+    "defaultMessage": "{feature} will be available soon."
+  },
+  "components.comingSoon.title": {
+    "defaultMessage": "Coming Soon"
+  },
+  "components.common.searchableComplexSelect.dropdownClickAriaLabel": {
+    "defaultMessage": "Open {label}"
+  },
+  "gateways.filter.all": {
+    "defaultMessage": "All"
+  },
+  "gateways.filter.managed": {
+    "defaultMessage": "Managed"
+  },
+  "gateways.filter.self": {
+    "defaultMessage": "Self-hosted"
+  },
+  "gateways.provisionButton": {
+    "defaultMessage": "Provision gateway"
+  },
+  "gateways.subtitle": {
+    "defaultMessage": "Provision and manage self-hosted or WSO2-managed gateways to expose your APIs to clients."
+  },
+  "gateways.title": {
+    "defaultMessage": "Gateways"
   },
   "project.card.actionsLabel": {
     "defaultMessage": "Project actions",
@@ -132,5 +334,47 @@
   },
   "project.list.title": {
     "defaultMessage": "Projects"
+  },
+  "scopeGate.api": {
+    "defaultMessage": "API"
+  },
+  "scopeGate.goToApiLevel": {
+    "defaultMessage": "Go to API Level"
+  },
+  "scopeGate.goToProjectLevel": {
+    "defaultMessage": "Go to Project Level"
+  },
+  "scopeGate.goToProjects": {
+    "defaultMessage": "Go to Projects"
+  },
+  "scopeGate.loadingApis": {
+    "defaultMessage": "Loading APIs..."
+  },
+  "scopeGate.loadingProjects": {
+    "defaultMessage": "Loading projects..."
+  },
+  "scopeGate.noApis": {
+    "defaultMessage": "This project has no APIs yet. Create an API to continue."
+  },
+  "scopeGate.noProjects": {
+    "defaultMessage": "No projects available"
+  },
+  "scopeGate.project": {
+    "defaultMessage": "Project"
+  },
+  "scopeGate.selectProject": {
+    "defaultMessage": "Select a project to switch to project level and continue."
+  },
+  "scopeGate.selectProjectAndApi": {
+    "defaultMessage": "Select a project and an API to switch to API level and continue."
+  },
+  "summary.card.error": {
+    "defaultMessage": "Unable to load."
+  },
+  "summary.card.retry": {
+    "defaultMessage": "Retry"
+  },
+  "summary.card.see.more": {
+    "defaultMessage": "See more"
   }
 }
diff --git a/portals/api-control-plane/src/navigation/navigationRegistry.test.ts b/portals/api-control-plane/src/navigation/navigationRegistry.test.ts
index b7c4ea8cd8..0d383cefe0 100644
--- a/portals/api-control-plane/src/navigation/navigationRegistry.test.ts
+++ b/portals/api-control-plane/src/navigation/navigationRegistry.test.ts
@@ -18,57 +18,357 @@
 
 import { describe, expect, it } from 'vitest';
 
+import { organizations, projects } from '../api/mocks/data';
+import { routes } from '../routes/paths';
+import { makeConsoleScope } from '../test/mockScope';
 import { navigationRegistry } from './navigationRegistry';
 
-const matcherFor = (id: string) => {
+const definitionFor = (id: string) => {
   const item = navigationRegistry.find((entry) => entry.id === id);
-  if (!item?.match) throw new Error(`No match predicate for ${id}`);
-  return item.match;
+  if (!item) throw new Error(`No navigation item ${id}`);
+  return item;
 };
 
-const ORG = '/organizations/acme';
-const PROJECT = `${ORG}/projects/orders`;
+const matcherFor = (id: string) => {
+  const { match } = definitionFor(id);
+  if (!match) throw new Error(`No match predicate for ${id}`);
+  return match;
+};
+
+const ORG = `/organizations/${organizations[0].id}`;
+const PROJECT = `${ORG}/projects/${projects[0].id}`;
 const API = `${PROJECT}/apis/api-1`;
+const SELECT = `${ORG}/select-scope`;
+
+/** Scope as the shell sees it at each depth, for exercising `to`. */
+const atOrg = () =>
+  makeConsoleScope({
+    isApiScope: false,
+    isProjectScope: false,
+    params: { orgHandle: organizations[0].id },
+    project: undefined,
+  });
+const atProject = () => makeConsoleScope();
+const atApi = () =>
+  makeConsoleScope({
+    isApiScope: true,
+    params: {
+      apiHandler: 'api-1',
+      orgHandle: organizations[0].id,
+      projectHandler: projects[0].id,
+    },
+  });
 
-describe('navigation match predicates', () => {
-  it('matches    home only at the org home path', () => {
-    const match = matcherFor('organization-home');
-    expect(match(`${ORG}/home`)).toBe(true);
-    expect(match(`${PROJECT}/home`)).toBe(false);
+/*
+ * The sidebar has one item per *concern*, not per scope: Overview is the summary
+ * of wherever you are, and the API-level items follow the API you're in. These
+ * tests cover the two halves that makes possible — `to` picking the right page
+ * for the current scope, and `match` keeping the item highlighted on every page
+ * it can reach.
+ */
+describe('Overview adapts to the deepest scope', () => {
+  it('links to the organization home when nothing deeper is selected', () => {
+    expect(definitionFor('overview').to(atOrg())).toBe(`${ORG}/home`);
   });
 
-  it('requires the org prefix for project home', () => {
-    const match = matcherFor('project-home');
-    expect(match(`${PROJECT}/home`)).toBe(true);
-    // A bare /projects/x/home without the org segment must not match.
-    expect(match('/projects/orders/home')).toBe(false);
+  it('links to the project home once a project is selected', () => {
+    expect(definitionFor('overview').to(atProject())).toBe(`${PROJECT}/home`);
   });
 
-  it('anchors settings to the end of the path', () => {
-    const match = matcherFor('settings');
-    expect(match(`${PROJECT}/settings`)).toBe(true);
-    expect(match(`${PROJECT}/settings/advanced`)).toBe(false);
-    expect(match(`${ORG}/projects/settings/home`)).toBe(false);
+  it('links to the API overview once an API is open', () => {
+    expect(definitionFor('overview').to(atApi())).toBe(API);
   });
 
-  it('matches runtime logs only at the runtimelogs path', () => {
-    const match = matcherFor('runtime-logs');
-    expect(match(`${PROJECT}/observe/runtimelogs`)).toBe(true);
-    expect(match(`${PROJECT}/observe/runtimelogs/x`)).toBe(false);
+  // Opening a project or an API navigates into a deeper tier of this same item,
+  // so Overview has to stay lit rather than handing off to another item.
+  it.each([
+    ['organization home', `${ORG}/home`],
+    ['project home', `${PROJECT}/home`],
+    ['api overview', API],
+  ])('stays active on the %s page', (_name, pathname) => {
+    expect(matcherFor('overview')(pathname)).toBe(true);
   });
 
-  it.each(['deploy', 'test', 'manage'])(
-    'anchors the %s api tab',
+  it('does not light up for pages belonging to other items', () => {
+    const match = matcherFor('overview');
+    expect(match(`${ORG}/projects`)).toBe(false);
+    expect(match(`${ORG}/gateways`)).toBe(false);
+    expect(match(`${API}/deploy`)).toBe(false);
+    expect(match(`${PROJECT}/apis`)).toBe(false);
+  });
+
+  // Its shallowest tier is the organization, which the shell always has — so
+  // unlike the API-level items it never needs a scope picker to fall back on.
+  it('never needs a scope-less alias', () => {
+    for (const scope of [atOrg(), atProject(), atApi()]) {
+      expect(definitionFor('overview').to(scope)).not.toContain('select-scope');
+    }
+  });
+});
+
+describe('scope visibility', () => {
+  it('hides Projects inside a project, where Overview already covers it', () => {
+    const { isVisible } = definitionFor('projects');
+    expect(isVisible?.(atOrg())).toBe(true);
+    expect(isVisible?.(atProject())).toBe(false);
+    expect(isVisible?.(atApi())).toBe(false);
+  });
+
+  // Capability gating applies only once an API is loaded: with none, every
+  // capability reads false, which would hide these items in exactly the state
+  // where they are the way in.
+  it.each(['test', 'deploy', 'manage'])(
+    'keeps %s visible out of API scope and lets the capability decide within it',
     (id) => {
+      const { isVisible } = definitionFor(id);
+      expect(isVisible?.(atOrg())).toBe(true);
+      expect(isVisible?.(atProject())).toBe(true);
+      expect(isVisible?.(atApi())).toBe(false); // no component loaded -> unsupported
+    }
+  );
+
+  // `hasUsageInsights`/`hasRuntimeLogs` are false for API_PROXY, the dominant
+  // kind here, so gating on them would hide these on the APIs they are for.
+  it.each(['insights', 'observability', 'admin'])(
+    '%s is not capability-gated',
+    (id) => {
+      expect(definitionFor(id).isVisible).toBeUndefined();
+    }
+  );
+});
+
+describe('API-level items', () => {
+  // Items that are pages in their own right, as opposed to submenu parents.
+  const LEAF_ITEMS: [string, string][] = [
+    ['deploy', 'deploy'],
+    ['admin', 'admin'],
+  ];
+
+  it.each(LEAF_ITEMS)('%s anchors to its own scoped path', (id, suffix) => {
+    const match = matcherFor(id);
+    expect(match(`${API}/${suffix}`)).toBe(true);
+    expect(match(`${API}/${suffix}/extra`)).toBe(false);
+    expect(match(`/${suffix}`)).toBe(false);
+  });
+
+  // Clicked from a shallower scope, these link to the page's scope-less alias so
+  // its `ScopeGate` can ask for what's missing — and stay highlighted there.
+  it.each(LEAF_ITEMS)('%s links to, and matches, its aliases', (id, suffix) => {
+    const { match, to } = definitionFor(id);
+    expect(to(atOrg())).toBe(`${SELECT}/${suffix}`);
+    expect(to(atProject())).toBe(`${PROJECT}/select-scope/${suffix}`);
+    expect(to(atApi())).toBe(`${API}/${suffix}`);
+    expect(match?.(`${SELECT}/${suffix}`)).toBe(true);
+    expect(match?.(`${PROJECT}/select-scope/${suffix}`)).toBe(true);
+  });
+
+  // Dropping `apis/<handle>` as a pair is what keeps an API whose handle matches
+  // a page suffix reachable: `.../apis/deploy` is that API, not the Deploy page.
+  it('leaves an API handled like a page suffix reachable', () => {
+    expect(matcherFor('overview')(`${PROJECT}/apis/deploy`)).toBe(true);
+    expect(matcherFor('deploy')(`${PROJECT}/apis/deploy`)).toBe(false);
+  });
+});
+
+/*
+ * Test, Observability and Manage have no page of their own: in API scope they
+ * open a submenu, and outside it they lead to the first child's `ScopeGate`. The
+ * split of responsibilities that makes that work is what these tests pin —
+ * the parent owns the scope-less aliases, each child owns its scoped path, and
+ * the two never claim active at the same time.
+ */
+describe('submenu parents', () => {
+  const SUBMENUS: [string, string, [string, string][]][] = [
+    [
+      'test',
+      'test',
+      [
+        ['test-console', 'console'],
+        ['test-curl', 'curl'],
+        ['test-chat', 'chat'],
+      ],
+    ],
+    [
+      'observability',
+      'observability',
+      [
+        ['observability-alerts', 'alerts'],
+        ['observability-metrics', 'metrics'],
+        ['observability-logs', 'logs'],
+      ],
+    ],
+    [
+      'insights',
+      'insights',
+      [
+        ['insights-api', 'api'],
+        ['insights-compliance', 'compliance'],
+      ],
+    ],
+    [
+      'manage',
+      'manage',
+      [
+        ['manage-monetize', 'monetize'],
+        ['manage-lifecycle', 'lifecycle'],
+      ],
+    ],
+  ];
+
+  it.each(SUBMENUS)('%s lists its children in order', (id, _base, children) => {
+    expect(definitionFor(id).children?.map((child) => child.id)).toEqual(
+      children.map(([childId]) => childId)
+    );
+  });
+
+  it.each(SUBMENUS)('%s only offers them in API scope', (id) => {
+    expect(definitionFor(id).requires).toBe('api');
+  });
+
+  // The parent is a link only until scope resolves; in API scope the sidebar
+  // drops the link and a click expands instead, so this target stops being used.
+  it.each(SUBMENUS)(
+    '%s links to its first child while out of scope',
+    (id, base, children) => {
+      const [, firstSuffix] = children[0];
+      const { to } = definitionFor(id);
+      expect(to(atOrg())).toBe(`${SELECT}/${base}/${firstSuffix}`);
+      expect(to(atProject())).toBe(
+        `${PROJECT}/select-scope/${base}/${firstSuffix}`
+      );
+    }
+  );
+
+  // Highlighted while the ScopeGate is asking, and only then: once scope
+  // resolves the child takes over, which is also what Oxygen expects — it leaves
+  // an expanded parent unhighlighted and marks the active child instead.
+  it.each(SUBMENUS)(
+    '%s matches every child alias and no scoped page',
+    (id, base, children) => {
       const match = matcherFor(id);
-      expect(match(`${API}/${id}`)).toBe(true);
-      expect(match(`${API}/${id}/extra`)).toBe(false);
+      for (const [, suffix] of children) {
+        expect(match(`${SELECT}/${base}/${suffix}`)).toBe(true);
+        expect(match(`${PROJECT}/select-scope/${base}/${suffix}`)).toBe(true);
+        expect(match(`${API}/${base}/${suffix}`)).toBe(false);
+      }
     }
   );
 
-  it('matches api overview but not its sub-tabs', () => {
-    const match = matcherFor('api-overview');
-    expect(match(API)).toBe(true);
-    expect(match(`${API}/deploy`)).toBe(false);
+  it.each(SUBMENUS)('%s children own their scoped path alone', (id, base, children) => {
+    const parent = definitionFor(id);
+    for (const [childId, suffix] of children) {
+      const child = parent.children?.find((entry) => entry.id === childId);
+      expect(child, `${id} has no child ${childId}`).toBeDefined();
+      expect(child?.to(atApi())).toBe(`${API}/${base}/${suffix}`);
+      expect(child?.match?.(`${API}/${base}/${suffix}`)).toBe(true);
+      // The parent covers the aliases; a child claiming them too would light
+      // both rows up at once on the scope-gate page.
+      expect(child?.match?.(`${SELECT}/${base}/${suffix}`)).toBe(false);
+      expect(child?.match?.(`${API}/${base}/${suffix}/extra`)).toBe(false);
+    }
+  });
+
+  it('keeps children out of the top-level list', () => {
+    const topLevel = navigationRegistry.map((item) => item.id);
+    for (const [, , children] of SUBMENUS) {
+      for (const [childId] of children) {
+        expect(topLevel).not.toContain(childId);
+      }
+    }
+  });
+
+  it('gives every item and sub-item a unique id', () => {
+    const ids = navigationRegistry.flatMap((item) => [
+      item.id,
+      ...(item.children ?? []).map((child) => child.id),
+    ]);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+});
+
+describe('organization-level items', () => {
+  it('anchors Projects to the list, and to a project it links into', () => {
+    const match = matcherFor('projects');
+    expect(match(`${ORG}/projects`)).toBe(true);
+    // Clicking a card navigates to the project home; the item stays lit until
+    // `isVisible` drops it at project scope.
+    expect(match(`${PROJECT}/home`)).toBe(true);
+    expect(match('/projects')).toBe(false);
+  });
+
+  it('covers the gateway list, create and detail pages', () => {
+    const match = matcherFor('gateways');
+    expect(match(`${ORG}/gateways`)).toBe(true);
+    expect(match(`${ORG}/gateways/new`)).toBe(true);
+    expect(match(`${ORG}/gateways/gw-1`)).toBe(true);
+    expect(match(`${ORG}/gateways/gw-1/extra`)).toBe(false);
+  });
+
+  // Settings is the one page with no scope requirement: the sidebar links to the
+  // org-level path, and a project card's gear deep-links the same page.
+  it('lights Settings up at either of its entry points, whatever the scope', () => {
+    const { match, to } = definitionFor('settings');
+    expect(to(atOrg())).toBe(`${ORG}/settings`);
+    expect(to(atApi())).toBe(`${ORG}/settings`);
+    expect(match?.(`${ORG}/settings`)).toBe(true);
+    expect(match?.(`${PROJECT}/settings`)).toBe(true);
+    expect(match?.(`${API}/settings`)).toBe(false);
+  });
+});
+
+describe('sidebar structure', () => {
+  it('carries no section headings, only divider clusters', () => {
+    // Clusters separate; they are never rendered as text (see
+    // NavigationDefinition.group), so they are keys, not labels.
+    expect(new Set(navigationRegistry.map((item) => item.group))).toEqual(
+      new Set(['place', 'api', 'global'])
+    );
+  });
+
+  it('orders items so clusters come out contiguous', () => {
+    const byOrder = [...navigationRegistry].sort((a, b) => a.order - b.order);
+    const clusterRun = byOrder
+      .map((item) => item.group)
+      .filter((group, index, all) => group !== all[index - 1]);
+
+    expect(clusterRun).toEqual(['place', 'api', 'global']);
+  });
+
+  it('leaves `level` to extensions, which need it for path building', () => {
+    expect(navigationRegistry.every((item) => item.level === undefined)).toBe(
+      true
+    );
+  });
+
+  it('gives every item a route builder and a matcher', () => {
+    for (const item of navigationRegistry) {
+      expect(item.match, `${item.id} has no match`).toBeTypeOf('function');
+      expect(item.to(atApi()), `${item.id} has no target`).toBeTruthy();
+    }
+  });
+});
+
+describe('every page routes.* builds is anchored, not a bare suffix', () => {
+  it('requires the org prefix everywhere', () => {
+    for (const item of navigationRegistry) {
+      const target = item.to(atApi());
+      expect(target?.startsWith('/organizations/')).toBe(true);
+      // A matcher must not fire on the same path without its org/project prefix.
+      expect(item.match?.(target!.replace(ORG, ''))).toBe(false);
+    }
+  });
+
+  // The create page sits in the `:apiHandler` slot (`.../apis/new`), so
+  // Overview's API tier claims it — which reads correctly in the sidebar, since
+  // creating an API belongs to the API area and lands on its overview. Worth
+  // pinning: it is a consequence of the URL shape, not a decision, and the same
+  // overlap makes every API-level item treat `new` as a handle.
+  it('leaves the new-api page under Overview', () => {
+    const newApi = routes.newApi(organizations[0].id, projects[0].id);
+    const owners = navigationRegistry
+      .filter((item) => item.match?.(newApi))
+      .map((item) => item.id);
+
+    expect(owners).toEqual(['overview']);
   });
 });
diff --git a/portals/api-control-plane/src/navigation/navigationRegistry.tsx b/portals/api-control-plane/src/navigation/navigationRegistry.tsx
index 7b728cddd6..9fb4fc8bef 100644
--- a/portals/api-control-plane/src/navigation/navigationRegistry.tsx
+++ b/portals/api-control-plane/src/navigation/navigationRegistry.tsx
@@ -16,165 +16,411 @@
  * under the License.
  */
 
+import type { ReactNode } from 'react';
 import {
-  Boxes,
+  Activity,
+  BellRing,
+  ChartColumn,
+  ChartLine,
+  CircleDollarSign,
   ClipboardList,
+  FileCheck,
+  Gauge,
+  GitBranch,
   Home,
+  Layers,
+  MessagesSquare,
   Network,
   Rocket,
+  ScrollText,
   Settings,
+  ShieldCheck,
+  SquareTerminal,
   Terminal,
 } from '@wso2/oxygen-ui-icons-react';
 
-import { routes } from '../routes/paths';
-import type { NavigationDefinition } from './navigationTypes';
+import type { ApiCapabilities } from '../pages/appShell/appShellPages/apis/utils/apiCapabilities';
+import {
+  apiScopeSelectPaths,
+  apiScopedPaths,
+  routes,
+  type ApiPathBuilder,
+  type ScopedPathBuilder,
+} from '../routes/paths';
+import type { ConsoleRouteParams } from '../scope/ConsoleScopeContext';
+import type { NavigationDefinition, NavigationLevel } from './navigationTypes';
+
+/**
+ * Divider-separated clusters, in sidebar order. Keys are never displayed — the
+ * sidebar renders no headings (see `NavigationDefinition.group`).
+ */
+const CLUSTER = {
+  /** Where you are and what's alongside it: Overview, Projects, Gateways. */
+  place: 'place',
+  /** What you can do to the API you're in. */
+  api: 'api',
+  /** Reachable at any scope. */
+  global: 'global',
+} as const;
+
+/**
+ * Turns a route pattern into an anchored full-path regex: regex metacharacters
+ * are escaped, then each `:param` becomes a single-segment wildcard. So
+ * `/organizations/:orgHandle/projects/:projectHandler/settings` yields
+ * `^/organizations/[^/]+/projects/[^/]+/settings$`.
+ */
+const toRouteRegex = (pattern: string): RegExp =>
+  new RegExp(
+    `^${pattern
+      .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      .replace(/:[A-Za-z][A-Za-z0-9]*/g, '[^/]+')}$`
+  );
+
+/**
+ * Builds a `match` predicate from the same `routes.*` builders an item links to,
+ * called with their `:param` defaults.
+ *
+ * Hand-writing `match` alongside `to` means maintaining the same path twice, and
+ * the two had already drifted: `settings` matched a bare `/\/settings$/`, so any
+ * future org- or api-level settings page would light up the *project* Settings
+ * item, and `runtime-logs` matched `/\/observe\/runtimelogs$/` with no
+ * org/project segments at all. Deriving both from one builder makes that class
+ * of drift impossible — a renamed route updates the highlight for free.
+ */
+const matchRoutes = (...patterns: string[]) => {
+  const regexes = patterns.map(toRouteRegex);
+  return (pathname: string) => regexes.some((regex) => regex.test(pathname));
+};
+
+/** `to` for an org-level item — always linkable inside the app shell. */
+const orgLevelTo =
+  (build: (orgHandle: string) => string): NavigationDefinition['to'] =>
+  ({ params }) =>
+    params.orgHandle ? build(params.orgHandle) : undefined;
+
+/**
+ * `to` for an API-level item, falling back to the page's scope-less alias when
+ * the project or API is missing.
+ *
+ * The item stays clickable at every scope: the alias mounts the same page, whose
+ * `ScopeGate` prompts for the missing handles and then navigates to the fully
+ * scoped URL. Returning `undefined` — the old behaviour, paired with a filter
+ * that hid the item — meant an org-level page offered no route into any
+ * API-level feature at all.
+ */
+const apiLevelTo =
+  (build: ApiPathBuilder): NavigationDefinition['to'] =>
+  ({ params }) =>
+    params.orgHandle
+      ? build(
+          params.orgHandle,
+          params.projectHandler ?? null,
+          params.apiHandler ?? null
+        )
+      : undefined;
+
+/** One entry in a submenu: its own id, label, icon and page. */
+type SubItem = {
+  icon: ReactNode;
+  id: string;
+  label: string;
+  to: ApiPathBuilder;
+};
+
+/**
+ * A child of a submenu parent: an ordinary API-level item, one nesting level down.
+ *
+ * `match` is the fully-scoped path only. The parent owns the scope-less aliases
+ * (see `submenu` below), so exactly one of the two is ever active.
+ */
+const subItem = ({ icon, id, label, to }: SubItem): NavigationDefinition => ({
+  icon,
+  id,
+  label,
+  // Children render in the order their parent lists them; `order` only sorts
+  // top-level items, so it plays no part here.
+  order: 0,
+  to: apiLevelTo(to),
+  match: matchRoutes(to(':orgHandle', ':projectHandler', ':apiHandler')),
+});
+
+/**
+ * The `to`/`match`/`children` of a submenu parent — an item that opens rather
+ * than navigates.
+ *
+ * A parent has no page of its own, so:
+ *
+ * - `to` is its **first child's** target. In API scope the sidebar drops the link
+ *   entirely and a click expands instead (Oxygen's `Sidebar.Item` switches to
+ *   `onToggleExpand` as soon as it has nested children), so this only ever
+ *   resolves out of scope — where it points at that child's scope-less alias and
+ *   the child page's `ScopeGate` asks for an API.
+ * - `match` covers every child's aliases and nothing else, so the parent stays
+ *   highlighted on the scope-gate page and hands the highlight to the child once
+ *   scope resolves. Oxygen leaves an expanded parent unhighlighted by design.
+ */
+const submenu = (
+  items: SubItem[]
+): Pick<NavigationDefinition, 'children' | 'match' | 'requires' | 'to'> => ({
+  children: items.map(subItem),
+  match: matchRoutes(...items.flatMap((item) => apiScopeSelectPaths(item.to))),
+  requires: 'api',
+  to: apiLevelTo(items[0].to),
+});
+
+/** One page an adaptive item points at, plus the scope that page needs. */
+type ScopeTier = { level: NavigationLevel; to: ScopedPathBuilder };
+
+const LEVEL_DEPTH: Record<NavigationLevel, number> = {
+  organization: 0,
+  project: 1,
+  api: 2,
+};
+
+const isLevelInScope = (level: NavigationLevel, params: ConsoleRouteParams) => {
+  if (level === 'api') return Boolean(params.projectHandler && params.apiHandler);
+  if (level === 'project') return Boolean(params.projectHandler);
+  return Boolean(params.orgHandle);
+};
+
+/** The tier's route pattern, calling its builder with the handles its level takes. */
+const tierPattern = ({ level, to }: ScopeTier): string => {
+  if (level === 'api') return to(':orgHandle', ':projectHandler', ':apiHandler');
+  if (level === 'project') return to(':orgHandle', ':projectHandler');
+  return to(':orgHandle');
+};
+
+/**
+ * One sidebar item pointing at a different page per scope: the deepest tier the
+ * route can satisfy wins.
+ *
+ * This is what lets a single **Overview** item mean "the summary of wherever you
+ * are" — the organization at org scope, the project once you pick one, the API
+ * once you open one. Clicking a project card or an API card navigates into the
+ * deeper tier, and because `match` covers every tier, Overview simply stays
+ * highlighted rather than handing off to a different item.
+ *
+ * Note what it does *not* do: an adaptive item whose shallowest tier is
+ * `organization` never needs a `ScopeGate`, because there is always some tier it
+ * can satisfy. It degrades instead of prompting. Tiers are only ever called with
+ * handles the route already has, which is why `ScopedPathBuilder` takes no
+ * `null`.
+ *
+ * Returns both `to` and `match` so a spread wires them together and they can't
+ * drift apart:
+ *
+ * ```tsx
+ * { id: 'overview', ...adaptive([{ level: 'api', to: routes.api }, ...]) }
+ * ```
+ */
+const adaptive = (
+  tiers: ScopeTier[]
+): Pick<NavigationDefinition, 'match' | 'to'> => {
+  const deepestFirst = [...tiers].sort(
+    (left, right) => LEVEL_DEPTH[right.level] - LEVEL_DEPTH[left.level]
+  );
+
+  return {
+    match: matchRoutes(...tiers.map(tierPattern)),
+    to: ({ params }) => {
+      if (!params.orgHandle) return undefined;
+      const tier = deepestFirst.find((candidate) =>
+        isLevelInScope(candidate.level, params)
+      );
+      return tier?.to(
+        params.orgHandle,
+        params.projectHandler,
+        params.apiHandler
+      );
+    },
+  };
+};
+
+
+/**
+ * Capability gating for an API-level item, applied only once an API is actually
+ * in scope.
+ *
+ * With no API loaded every capability is `false` (see `getApiCapabilities`), so
+ * a bare `({ capabilities }) => capabilities.canDeploy` would hide Deploy/Test/
+ * Manage from the sidebar in exactly the state where the user needs them as a
+ * way in. Out of API scope the item shows and leads to the scope picker; in API
+ * scope the capability still decides, so an API that can't be deployed has no
+ * Deploy item.
+ */
+const apiCapability =
+  (
+    isSupported: (capabilities: ApiCapabilities) => boolean
+  ): NonNullable<NavigationDefinition['isVisible']> =>
+  ({ capabilities, isApiScope }) =>
+    !isApiScope || isSupported(capabilities);
 
 export const navigationRegistry: NavigationDefinition[] = [
   {
-    id: 'organization-home',
-    label: 'Home',
-    level: 'organization',
+    id: 'overview',
+    label: 'Overview',
+    group: CLUSTER.place,
     order: 10,
     icon: <Home />,
-    to: ({ params }) =>
-      params.orgHandle ? routes.organizationHome(params.orgHandle) : undefined,
-    match: (pathname) => /\/organizations\/[^/]+\/home$/.test(pathname),
+    // The summary of wherever you are. Opening a project or an API navigates
+    // into a deeper tier of this same item rather than to a different one.
+    ...adaptive([
+      { level: 'api', to: routes.api },
+      { level: 'project', to: routes.projectHome },
+      { level: 'organization', to: routes.organizationHome },
+    ]),
   },
   {
     id: 'projects',
     label: 'Projects',
-    level: 'organization',
+    group: CLUSTER.place,
     order: 20,
-    icon: <Boxes />,
-    to: ({ params }) =>
-      params.orgHandle ? routes.projects(params.orgHandle) : undefined,
-    match: (pathname) => /\/organizations\/[^/]+\/projects$/.test(pathname),
+    icon: <Layers />,
+    // Inside a project this is redundant with Overview, and switching projects
+    // is the header switcher's job.
+    isVisible: ({ isProjectScope }) => !isProjectScope,
+    to: orgLevelTo(routes.projects),
+    match: matchRoutes(routes.projects(), routes.projectHome()),
   },
   {
     id: 'gateways',
     label: 'API Gateways',
-    level: 'organization',
+    group: CLUSTER.place,
     order: 30,
     icon: <Network />,
-    to: ({ params }) =>
-      params.orgHandle ? routes.gateways(params.orgHandle) : undefined,
-    match: (pathname) => /\/organizations\/[^/]+\/gateways(\/[^/]+)?$/.test(pathname),
-  },
-  {
-    id: 'project-home',
-    label: 'Project Home',
-    level: 'project',
-    order: 100,
-    icon: <Home />,
-    to: ({ params }) =>
-      params.orgHandle && params.projectHandler
-        ? routes.projectHome(params.orgHandle, params.projectHandler)
-        : undefined,
-    match: (pathname) =>
-      /\/organizations\/[^/]+\/projects\/[^/]+\/home$/.test(pathname),
-  },
-  {
-    id: 'apis',
-    label: 'APIs',
-    level: 'project',
-    order: 110,
-    icon: <Boxes />,
-    to: ({ params }) =>
-      params.orgHandle && params.projectHandler
-        ? routes.apis(params.orgHandle, params.projectHandler)
-        : undefined,
-    match: (pathname) =>
-      /\/projects\/[^/]+\/apis(\/new)?$/.test(pathname),
+    to: orgLevelTo(routes.gateways),
+    match: matchRoutes(routes.gateways(), routes.newGateway(), routes.gateway()),
   },
   {
-    id: 'runtime-logs',
-    label: 'Runtime Logs',
-    level: 'project',
-    order: 120,
+    id: 'test',
+    label: 'Test',
+    group: CLUSTER.api,
+    order: 40,
     icon: <Terminal />,
-    to: ({ params }) =>
-      params.orgHandle && params.projectHandler
-        ? routes.runtimeLogs(params.orgHandle, params.projectHandler)
-        : undefined,
-    match: (pathname) => /\/observe\/runtimelogs$/.test(pathname),
-  },
-  {
-    id: 'settings',
-    label: 'Settings',
-    level: 'project',
-    order: 130,
-    icon: <Settings />,
-    to: ({ params }) =>
-      params.orgHandle && params.projectHandler
-        ? routes.settings(params.orgHandle, params.projectHandler)
-        : undefined,
-    match: (pathname) => /\/settings$/.test(pathname),
-  },
-  {
-    id: 'api-overview',
-    label: 'API Overview',
-    level: 'api',
-    order: 200,
-    icon: <Boxes />,
-    to: ({ params }) =>
-      params.orgHandle && params.projectHandler && params.apiHandler
-        ? routes.api(
-            params.orgHandle,
-            params.projectHandler,
-            params.apiHandler
-          )
-        : undefined,
-    match: (pathname) => /\/apis\/[^/]+$/.test(pathname),
+    isVisible: apiCapability(({ canTest }) => canTest),
+    ...submenu([
+      {
+        icon: <SquareTerminal />,
+        id: 'test-console',
+        label: 'API Console',
+        to: routes.apiTestConsole,
+      },
+      {
+        icon: <Terminal />,
+        id: 'test-curl',
+        label: 'Curl',
+        to: routes.apiTestCurl,
+      },
+      {
+        icon: <MessagesSquare />,
+        id: 'test-chat',
+        label: 'API Chat',
+        to: routes.apiTestChat,
+      },
+    ]),
   },
   {
     id: 'deploy',
     label: 'Deploy',
-    level: 'api',
-    order: 210,
+    group: CLUSTER.api,
+    order: 50,
     icon: <Rocket />,
-    isVisible: ({ capabilities }) => capabilities.canDeploy,
-    to: ({ params }) =>
-      params.orgHandle && params.projectHandler && params.apiHandler
-        ? routes.apiDeploy(
-            params.orgHandle,
-            params.projectHandler,
-            params.apiHandler
-          )
-        : undefined,
-    match: (pathname) => /\/deploy$/.test(pathname),
+    isVisible: apiCapability(({ canDeploy }) => canDeploy),
+    to: apiLevelTo(routes.apiDeploy),
+    match: matchRoutes(...apiScopedPaths(routes.apiDeploy)),
   },
   {
-    id: 'test',
-    label: 'Test',
-    level: 'api',
-    order: 220,
-    icon: <Terminal />,
-    isVisible: ({ capabilities }) => capabilities.canTest,
-    to: ({ params }) =>
-      params.orgHandle && params.projectHandler && params.apiHandler
-        ? routes.apiTest(
-            params.orgHandle,
-            params.projectHandler,
-            params.apiHandler
-          )
-        : undefined,
-    match: (pathname) => /\/test$/.test(pathname),
+    // No capability gate, unlike its neighbours: `hasUsageInsights` is false for
+    // kinds this console shows by default, so gating on it would hide Insights on
+    // exactly the APIs it is meant for. Same for Observability below.
+    id: 'insights',
+    label: 'Insights',
+    group: CLUSTER.api,
+    order: 60,
+    icon: <ChartColumn />,
+    ...submenu([
+      {
+        icon: <ChartLine />,
+        id: 'insights-api',
+        label: 'API Insights',
+        to: routes.apiInsightsApi,
+      },
+      {
+        icon: <FileCheck />,
+        id: 'insights-compliance',
+        label: 'Compliance',
+        to: routes.apiInsightsCompliance,
+      },
+    ]),
+  },
+  {
+    id: 'observability',
+    label: 'Observability',
+    group: CLUSTER.api,
+    order: 70,
+    icon: <Activity />,
+    ...submenu([
+      {
+        icon: <BellRing />,
+        id: 'observability-alerts',
+        label: 'Alert',
+        to: routes.apiObservabilityAlerts,
+      },
+      {
+        icon: <Gauge />,
+        id: 'observability-metrics',
+        label: 'Metrics',
+        to: routes.apiObservabilityMetrics,
+      },
+      {
+        icon: <ScrollText />,
+        id: 'observability-logs',
+        label: 'Logs',
+        to: routes.apiObservabilityLogs,
+      },
+    ]),
   },
   {
     id: 'manage',
     label: 'Manage',
-    level: 'api',
-    order: 230,
+    group: CLUSTER.api,
+    order: 80,
     icon: <ClipboardList />,
-    isVisible: ({ capabilities }) => capabilities.canManage,
-    to: ({ params }) =>
-      params.orgHandle && params.projectHandler && params.apiHandler
-        ? routes.apiManage(
-            params.orgHandle,
-            params.projectHandler,
-            params.apiHandler
-          )
-        : undefined,
-    match: (pathname) => /\/manage$/.test(pathname),
+    isVisible: apiCapability(({ canManage }) => canManage),
+    ...submenu([
+      {
+        icon: <CircleDollarSign />,
+        id: 'manage-monetize',
+        label: 'Monetize',
+        to: routes.apiManageMonetize,
+      },
+      {
+        icon: <GitBranch />,
+        id: 'manage-lifecycle',
+        label: 'LifeCycle',
+        to: routes.apiManageLifecycle,
+      },
+    ]),
+  },
+  {
+    id: 'admin',
+    label: 'Admin',
+    group: CLUSTER.api,
+    order: 90,
+    icon: <ShieldCheck />,
+    to: apiLevelTo(routes.apiAdmin),
+    match: matchRoutes(...apiScopedPaths(routes.apiAdmin)),
+  },
+  {
+    // The one page with no scope requirement at all, hence its own cluster.
+    id: 'settings',
+    label: 'Settings',
+    group: CLUSTER.global,
+    order: 100,
+    icon: <Settings />,
+    to: orgLevelTo(routes.settings),
+    // Both entry points light this item up: the sidebar's own org-level path and
+    // the per-project deep link from a project card.
+    match: matchRoutes(routes.settings(), routes.projectSettings()),
   },
 ];
diff --git a/portals/api-control-plane/src/navigation/navigationTypes.ts b/portals/api-control-plane/src/navigation/navigationTypes.ts
index 9a57b5e293..f87cfc7982 100644
--- a/portals/api-control-plane/src/navigation/navigationTypes.ts
+++ b/portals/api-control-plane/src/navigation/navigationTypes.ts
@@ -19,40 +19,55 @@
 import type { ReactNode } from 'react';
 
 import type { ConsoleScope } from '../scope/ConsoleScopeProvider';
+import type { RequiredScope } from '../scope/ScopeGate';
 
 export type NavigationLevel = 'organization' | 'project' | 'api';
 
 export type NavigationDefinition = {
   featureKey?: string;
-  /** Sidebar section heading this item is grouped under. */
+  /**
+    * Divider-separated cluster for sidebar grouping.
+   */
   group?: string;
   icon: ReactNode;
   id: string;
   isVisible?: (scope: ConsoleScope) => boolean;
   label: string;
-  level: NavigationLevel;
+  /**
+   * Extensions only, where it decides the URL shape of the injected page (see
+   * `buildScopedExtensionPath`). Built-in items leave it unset — a scope-adaptive
+   * item spans several levels at once, and nothing else reads it.
+   */
+  level?: NavigationLevel;
   match?: (pathname: string) => boolean;
   order: number;
   to: (scope: ConsoleScope) => string | undefined;
+  /**
+   * Sub-items, offered only once `requires` is satisfied.
+   *
+   * A parent with children showing is a disclosure, not a link — the sidebar
+   * omits its `link` so a click expands instead of navigating. Out of scope the
+   * children are withheld and the parent behaves as an ordinary link into its
+   * first child's page, where `ScopeGate` asks for what's missing.
+   */
+  children?: NavigationDefinition[];
+  /**
+   * Scope this item's children need. Shares `ScopeGate`'s own union so the
+   * sidebar and the page it opens can never disagree about what "in scope" means.
+   */
+  requires?: RequiredScope;
 };
 
 export type NavigationItem = {
-  group: string;
+  group?: string;
   icon: ReactNode;
   id: string;
   isActive: boolean;
   label: string;
+  /**
+   * Where the item leads. A parent rendering `children` keeps its first child's
+   * target here but the sidebar does not link it — see `children` above.
+   */
   to: string;
-};
-
-/** A sidebar section: a heading plus the nav items under it (order preserved). */
-export type NavigationGroup = {
-  label: string;
-  items: NavigationItem[];
-};
-
-export const NAVIGATION_GROUP_BY_LEVEL: Record<NavigationLevel, string> = {
-  organization: 'Organization',
-  project: 'Project',
-  api: 'API',
+  children?: NavigationItem[];
 };
diff --git a/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx b/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx
new file mode 100644
index 0000000000..cd7a6eb5de
--- /dev/null
+++ b/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx
@@ -0,0 +1,139 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
+
+import type { RestApi } from '../api/resources/restApis';
+import { organizations, projects } from '../api/mocks/data';
+import { routes } from '../routes/paths';
+import {
+  ConsoleScopeContext,
+  type ConsoleScope,
+} from '../scope/ConsoleScopeContext';
+import { makeConsoleScope } from '../test/mockScope';
+import { renderHook } from '../test/utils';
+import { useNavigationItems } from './useNavigationItems';
+
+const ORG = organizations[0].id;
+const PROJECT = projects[0].id;
+const API = 'api-1';
+
+// A REST API that supports every capability the API-level items gate on, so a
+// hidden item in these tests means the scope rules hid it — not the fixture.
+// Lowercase transports, as the spec documents them — see AppSidebar.test.tsx.
+const COMPONENT = {
+  displayName: 'Orders API',
+  id: API,
+  kind: 'RestApi',
+  transport: ['http', 'https'],
+} as RestApi;
+
+const atOrg = () =>
+  makeConsoleScope({
+    component: COMPONENT,
+    isApiScope: false,
+    isProjectScope: false,
+    params: { orgHandle: ORG },
+    project: undefined,
+  });
+
+const atApi = () =>
+  makeConsoleScope({
+    component: COMPONENT,
+    isApiScope: true,
+    params: { apiHandler: API, orgHandle: ORG, projectHandler: PROJECT },
+  });
+
+const itemsAt = (scope: ConsoleScope, route: string) => {
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <MemoryRouter initialEntries={[route]}>
+      <ConsoleScopeContext.Provider value={scope}>
+        {children}
+      </ConsoleScopeContext.Provider>
+    </MemoryRouter>
+  );
+  const { result } = renderHook(() => useNavigationItems(), { wrapper });
+  return result.current;
+};
+
+const itemFor = (scope: ConsoleScope, route: string, id: string) => {
+  const item = itemsAt(scope, route).find((entry) => entry.id === id);
+  if (!item) throw new Error(`No item ${id} at ${route}`);
+  return item;
+};
+
+/*
+ * A submenu parent is two different things depending on scope, and the switch
+ * lives here rather than in the sidebar: withholding `children` is what makes
+ * Oxygen treat the row as a link instead of a disclosure.
+ */
+describe('submenu children follow API scope', () => {
+  it.each(['test', 'insights', 'observability', 'manage'])(
+    '%s offers its children once an API is in scope',
+    (id) => {
+      const item = itemFor(atApi(), routes.api(ORG, PROJECT, API), id);
+
+      expect(item.children?.length).toBeGreaterThan(0);
+      // Each child points at its own page under the API.
+      for (const child of item.children ?? []) {
+        expect(child.to).toContain(`/apis/${API}/`);
+      }
+    }
+  );
+
+  it.each(['test', 'insights', 'observability', 'manage'])(
+    '%s withholds them outside API scope, and links to the first instead',
+    (id) => {
+      const item = itemFor(atOrg(), routes.organizationHome(ORG), id);
+
+      expect(item.children).toBeUndefined();
+      // The scope-less alias of the first child — where its ScopeGate prompts.
+      expect(item.to).toContain('/select-scope/');
+    }
+  );
+
+  it('marks the child of the open page active, not its parent', () => {
+    const route = routes.apiObservabilityLogs(ORG, PROJECT, API);
+    const parent = itemFor(atApi(), route, 'observability');
+
+    expect(parent.isActive).toBe(false);
+    expect(
+      parent.children?.find((child) => child.id === 'observability-logs')
+        ?.isActive
+    ).toBe(true);
+  });
+
+  it('marks the parent active while its scope gate is open', () => {
+    const route = routes.apiObservabilityAlerts(ORG, null, null);
+    const parent = itemFor(atOrg(), route, 'observability');
+
+    expect(parent.isActive).toBe(true);
+    expect(parent.children).toBeUndefined();
+  });
+
+  it('leaves items without children untouched', () => {
+    const items = itemsAt(atApi(), routes.api(ORG, PROJECT, API));
+    const leaves = ['overview', 'gateways', 'deploy', 'admin'];
+
+    for (const id of leaves) {
+      expect(items.find((item) => item.id === id)?.children).toBeUndefined();
+    }
+  });
+});
diff --git a/portals/api-control-plane/src/navigation/useNavigationItems.ts b/portals/api-control-plane/src/navigation/useNavigationItems.ts
index bd7c5b2027..4b8f938e76 100644
--- a/portals/api-control-plane/src/navigation/useNavigationItems.ts
+++ b/portals/api-control-plane/src/navigation/useNavigationItems.ts
@@ -20,29 +20,36 @@ import { useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { runtimeConfig } from '../config/runtime';
-import { useConsoleScope } from '../scope/ConsoleScopeProvider';
+import {
+  useConsoleScope,
+  type ConsoleScope,
+} from '../scope/ConsoleScopeProvider';
 import { buildScopedExtensionPath, useExtensions } from '../extensions';
 import { navigationRegistry } from './navigationRegistry';
 import {
-  NAVIGATION_GROUP_BY_LEVEL,
   type NavigationDefinition,
-  type NavigationGroup,
   type NavigationItem,
 } from './navigationTypes';
 
-// const isLevelAvailable = (
-//   definition: NavigationDefinition,
-//   scope: ReturnType<typeof useConsoleScope>
-// ) => {
-//   if (definition.level === 'organization') return scope.isOrganizationScope;
-//   if (definition.level === 'project') return scope.isProjectScope;
-//   return scope.isApiScope;
-// };
-
 const isFeatureEnabled = (definition: NavigationDefinition) =>
   !definition.featureKey ||
   runtimeConfig.featureFlags.includes(definition.featureKey);
 
+/**
+ * Whether an item's `requires` scope holds — the gate on offering its children.
+ *
+ * An item with no `requires` has no scope condition and is treated as satisfied,
+ * so only submenu parents ever consult this.
+ */
+const isScopeSatisfied = (
+  definition: NavigationDefinition,
+  scope: ConsoleScope
+) => {
+  if (definition.requires === 'api') return scope.isApiScope;
+  if (definition.requires === 'project') return scope.isProjectScope;
+  return true;
+};
+
 export const useNavigationItems = (): NavigationItem[] => {
   const scope = useConsoleScope();
   const location = useLocation();
@@ -73,45 +80,70 @@ export const useNavigationItems = (): NavigationItem[] => {
             return charAfter === undefined || (isDescendantRoute && charAfter === '/');
           },
           order: extension.order,
-          to: (navScope) => {
-            const { orgHandle, projectHandler, apiHandler } = navScope.params;
-            if (!orgHandle) return undefined;
-            if (extension.level === 'project' && !projectHandler) return undefined;
-            if (
-              extension.level === 'api' &&
-              (!projectHandler || !apiHandler)
-            ) {
-              return undefined;
-            }
-            return buildScopedExtensionPath(extension.level, routeSuffix, {
-              apiHandler,
-              orgHandle,
-              projectHandler,
-            });
-          },
+          // A missing project/API no longer makes the item unlinkable: the path
+          // degrades to the extension page's scope-less alias, where its own
+          // `ScopeGate` collects what's missing. Only a route with no
+          // organization has nothing to link to.
+          to: ({ params }) =>
+            params.orgHandle
+              ? buildScopedExtensionPath(extension.level, routeSuffix, {
+                  apiHandler: params.apiHandler ?? null,
+                  orgHandle: params.orgHandle,
+                  projectHandler: params.projectHandler ?? null,
+                })
+              : undefined,
         };
       }
     );
     const combinedRegistry = [...navigationRegistry, ...extensionDefinitions];
 
+    // A definition becomes an item unless it has no target at all. Children go
+    // through the very same resolution — feature flag, visibility, `to`,
+    // `isActive` — one level down, so a submenu entry can be flagged off or
+    // capability-hidden exactly like a top-level one.
+    const resolve = (
+      definition: NavigationDefinition
+    ): NavigationItem | undefined => {
+      if (!isFeatureEnabled(definition)) return undefined;
+      if (!(definition.isVisible?.(scope) ?? true)) return undefined;
+
+      const to = definition.to(scope);
+      if (!to) return undefined;
+
+      // Children are withheld until their scope holds. That is what makes a
+      // parent behave as two different things: a disclosure in scope (the
+      // sidebar drops its link once children are present) and an ordinary link
+      // to its first child's `ScopeGate` outside it.
+      const children =
+        definition.children && isScopeSatisfied(definition, scope)
+          ? definition.children.reduce<NavigationItem[]>((kept, child) => {
+              const item = resolve(child);
+              if (item) kept.push(item);
+              return kept;
+            }, [])
+          : undefined;
+
+      return {
+        group: definition.group,
+        icon: definition.icon,
+        id: definition.id,
+        isActive: definition.match
+          ? definition.match(location.pathname)
+          : location.pathname === to,
+        label: definition.label,
+        to,
+        ...(children?.length ? { children } : {}),
+      };
+    };
+
+    // Items are not filtered by level. An API-level item stays in the sidebar at
+    // every scope, linking to its page's scope-less alias so the page's
+    // `ScopeGate` can prompt for the missing project/API; a scope-adaptive item
+    // links to the deepest tier the route satisfies. The only remaining reason
+    // `to` comes back undefined is a route with no organization at all (`/`,
+    // `/organizations`), which has nothing to link to yet.
     return combinedRegistry
-      // .filter((definition) => isLevelAvailable(definition, scope))
-      .filter(isFeatureEnabled)
-      .filter((definition) => definition.isVisible?.(scope) ?? true)
-      .map((definition) => {
-        const to = definition.to(scope);
-        // if (!to) return undefined;
-        return {
-          group: definition.group ?? NAVIGATION_GROUP_BY_LEVEL[definition.level],
-          icon: definition.icon,
-          id: definition.id,
-          isActive: definition.match
-            ? definition.match(location.pathname)
-            : location.pathname === to,
-          label: definition.label,
-          to,
-        };
-      })
+      .map(resolve)
       .filter(Boolean)
       .sort((left, right) => {
         const leftOrder =
@@ -124,27 +156,34 @@ export const useNavigationItems = (): NavigationItem[] => {
 };
 
 /**
- * Same items as `useNavigationItems`, bucketed into ordered sidebar sections by
- * their `group`. Group order follows first appearance in the (order-sorted)
- * item list, so Organization → Project → Api falls out naturally.
+ * The same items, bucketed into the divider-separated clusters the sidebar
+ * renders. Cluster order follows first appearance in the (order-sorted) item
+ * list, so the registry's `order` alone decides both item and cluster order.
+ *
+ * No labels: the clusters exist to separate, not to title. See
+ * `NavigationDefinition.group` for why an item can no longer carry a scope
+ * heading.
  */
-export const useNavigationGroups = (): NavigationGroup[] => {
+export const useNavigationClusters = (): NavigationItem[][] => {
   const items = useNavigationItems();
 
   return useMemo(() => {
-    const groups: NavigationGroup[] = [];
-    const byLabel = new Map<string, NavigationGroup>();
+    const clusters: NavigationItem[][] = [];
+    const byKey = new Map<string, NavigationItem[]>();
 
     for (const item of items) {
-      let group = byLabel.get(item.group);
-      if (!group) {
-        group = { label: item.group, items: [] };
-        byLabel.set(item.group, group);
-        groups.push(group);
+      // Items with no cluster of their own share one, rather than each becoming
+      // a divider of its own.
+      const key = item.group ?? '';
+      let cluster = byKey.get(key);
+      if (!cluster) {
+        cluster = [];
+        byKey.set(key, cluster);
+        clusters.push(cluster);
       }
-      group.items.push(item);
+      cluster.push(item);
     }
 
-    return groups;
+    return clusters;
   }, [items]);
 };
diff --git a/portals/api-control-plane/src/pages/appShell/APIQuickSelector.tsx b/portals/api-control-plane/src/pages/appShell/APIQuickSelector.tsx
new file mode 100644
index 0000000000..aa3dbe2367
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/APIQuickSelector.tsx
@@ -0,0 +1,191 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Box,
+  Divider,
+  IconButton,
+  InputAdornment,
+  Menu,
+  MenuItem,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@wso2/oxygen-ui';
+import { ChevronRight, Search } from '@wso2/oxygen-ui-icons-react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+type SelectableApi = {
+  id: string;
+  name: string;
+  description?: string;
+};
+
+type Props = {
+  disabled: boolean;
+  isApisLoading: boolean;
+  apisError?: unknown;
+  apiOptions: SelectableApi[];
+  onSelectApi: (apiId: string) => void;
+};
+
+export default function APIQuickSelector({
+  disabled,
+  isApisLoading,
+  apisError,
+  apiOptions,
+  onSelectApi,
+}: Props) {
+  const intl = useIntl();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const open = Boolean(anchorEl);
+
+  useEffect(() => {
+    if (!disabled) return;
+    setAnchorEl(null);
+    setSearchQuery('');
+  }, [disabled]);
+
+  const filteredApis = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return apiOptions;
+    return apiOptions.filter((api) => {
+      const haystack = [api.name, api.description]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return haystack.includes(query);
+    });
+  }, [apiOptions, searchQuery]);
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setSearchQuery('');
+  };
+
+  return (
+    <>
+      <Tooltip title={intl.formatMessage({ id: 'appShell.header.api.select', defaultMessage: 'Select API' })}>
+        <span>
+          <IconButton
+            size="small"
+            aria-label={intl.formatMessage({ id: 'appShell.header.api.select', defaultMessage: 'Select API' })}
+            disabled={disabled}
+            onClick={(event) => setAnchorEl(event.currentTarget)}
+            sx={{
+              width: 32,
+              height: 32,
+              border: '1px solid',
+              borderColor: 'divider',
+              // borderRadius: 1,
+            }}
+          >
+            <ChevronRight size={16} />
+          </IconButton>
+        </span>
+      </Tooltip>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        slotProps={{
+          paper: {
+            sx: {
+              mt: 1,
+              width: 280,
+              borderRadius: 1,
+            },
+          },
+        }}
+      >
+        <Box sx={{ px: 1.5, pt: 1.2, pb: 1 }}>
+          <Typography
+            variant="caption"
+            sx={{ color: 'primary.main', display: 'block', mb: 1 }}
+          >
+            <FormattedMessage
+              id="aiWorkspace.pages.appShell.APIQuickSelector.apis"
+              defaultMessage="APIs"
+            />
+          </Typography>
+          <TextField
+            size="small"
+            fullWidth
+            autoFocus
+            placeholder={intl.formatMessage({ id: 'appShell.header.api.search', defaultMessage: 'Search' })}
+            value={searchQuery}
+            onChange={(event) => setSearchQuery(event.target.value)}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search size={16} />
+                  </InputAdornment>
+                ),
+              },
+            }}
+          />
+        </Box>
+        <Divider />
+        <Box sx={{ maxHeight: 260, overflowY: 'auto', pb: 0.5 }}>
+          {isApisLoading ? (
+            <MenuItem disabled>
+              <FormattedMessage
+                id="aiWorkspace.pages.appShell.APIQuickSelector.loading"
+                defaultMessage='Loading...'
+              />
+            </MenuItem>
+          ) : apisError ? (
+            <MenuItem disabled>
+              <FormattedMessage
+                id="aiWorkspace.pages.appShell.APIQuickSelector.failed.to.load.apis"
+                defaultMessage='Failed to load APIs'
+              />
+            </MenuItem>
+          ) : 
+          (filteredApis.length === 0 ? (
+            <MenuItem disabled>
+              <FormattedMessage
+                id="aiWorkspace.pages.appShell.APIQuickSelector.no.apis.available"
+                defaultMessage='No APIs available'
+              />
+            </MenuItem>
+          ) : (
+            filteredApis.map(api => (
+                <MenuItem
+                key={api.id}
+                onClick={() => {
+                  handleClose();
+                  onSelectApi(api.id);
+                }}
+              >
+                {api.name}
+              </MenuItem>
+            ))
+          ))}
+        </Box>
+      </Menu>
+    </>
+  );
+}
+
diff --git a/portals/api-control-plane/src/pages/appShell/AppHeader.tsx b/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
index 76b8f13160..6f10bde92b 100644
--- a/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
@@ -18,6 +18,7 @@
 
 import {
   Badge,
+  Box,
   ColorSchemeToggle,
   ComplexSelect,
   Header,
@@ -26,17 +27,32 @@ import {
   UserMenu,
   useAppShell,
 } from '@wso2/oxygen-ui';
-import { Bell, Boxes, Building2, LogOut, WSO2 } from '@wso2/oxygen-ui-icons-react';
+import { Bell, Boxes, Building, Layers, LogOut, WSO2, X } from '@wso2/oxygen-ui-icons-react';
 import { useNavigate } from 'react-router-dom';
 
+import { useRestApis } from '../../api/resources/restApis';
 import { useAuth } from '../../contexts/auth/AuthProvider';
 import { routes } from '../../routes/paths';
 import { useConsoleScope } from '../../scope/ConsoleScopeProvider';
+import { FormattedMessage, useIntl } from 'react-intl';
+import ProjectQuickSelector from './ProjectQuickSelector';
+import APIQuickSelector from './APIQuickSelector';
+import SearchableComplexSelect from '../../components/common/SearchableComplexSelect';
+
+// Switcher options can carry long display names/handles; bound the trigger width
+// and let the option text ellipsize instead of overflowing the header.
+const SWITCHER_SELECT_SX = { minWidth: 220, maxWidth: 260 };
+
+const TRUNCATED_OPTION_TEXT_SLOT_PROPS = {
+  primary: { noWrap: true },
+  secondary: { variant: 'caption' as const, noWrap: true },
+};
 
 export function AppHeader() {
   const navigate = useNavigate();
+  const intl = useIntl();
   const { actions } = useAppShell();
-  const { organization, organizations, params, project, projects } =
+  const { organization, organizations, params, project, projects, isLoading, projectsError } =
     useConsoleScope();
   const auth = useAuth();
 
@@ -53,16 +69,55 @@ export function AppHeader() {
     navigate(routes.projectHome(params.orgHandle, projectHandler));
   };
 
+  const changeApi = (apiHandler: string) => {
+    if (!params.orgHandle || !params.projectHandler || !apiHandler) return;
+    navigate(
+      routes.api(params.orgHandle, params.projectHandler, apiHandler)
+    );
+  }
+
+  const clearProjectSelection = () => {
+    if (!params.orgHandle) return;
+    navigate(routes.organizationHome(params.orgHandle));
+  };
+
+  const clearApiSelection = () => {
+    if (!params.orgHandle || !params.projectHandler) return;
+    navigate(routes.projectHome(params.orgHandle, params.projectHandler));
+  };
+
   // organizations may not be loaded yet on first paint; keep the current org
   // selectable so the switcher never renders an out-of-range value.
   const orgOptions: { handle: string; name: string }[] =
     organizations.length > 0
-      ? organizations
+      ? organizations.map((org) => ({ handle: org.id, name: org.displayName || org.id }))
       : params.orgHandle
-        ? [{ handle: params.orgHandle, name: organization?.name || params.orgHandle }]
+        ? [{ handle: params.orgHandle, name: organization?.displayName || params.orgHandle }]
         : [];
+
   const projectOptions: { handler: string; name: string }[] =
-    projects.length > 0 ? projects : project ? [project] : [];
+    projects.length > 0 
+      ? projects.map((project) => ({ handler: project.id, name: project.displayName || project.id })) 
+      : params.projectHandler && project ? [{ handler: params.projectHandler, name: project.displayName || params.projectHandler }] 
+        : [];
+
+  const apisQuery = useRestApis(
+    {},
+    { projectId: project?.id, orgId: organization?.id }
+  );
+  const apis = apisQuery.data?.list ?? [];
+  const apiOptions: { handler: string; name: string }[] =
+    (projects.length > 0 && project) ?
+    apis
+      .filter(
+        (
+          api
+        ): api is NonNullable<typeof api> & { id: string; displayName?: string } =>
+          typeof api?.id === 'string' && api.id.length > 0
+      )
+      .map((api) => ({ handler: api.id, name: api.displayName ?? api.id }))
+    : [];
+
 
   return (
     <Header>
@@ -71,55 +126,207 @@ export function AppHeader() {
         <Header.BrandLogo>
           <WSO2 style={{ height: 26, width: 26 }} />
         </Header.BrandLogo>
-        <Header.BrandTitle>API Platform</Header.BrandTitle>
+        <Header.BrandTitle>
+          <FormattedMessage
+            id="appShell.header.title"
+            defaultMessage="API Platform"
+          />
+        </Header.BrandTitle>
       </Header.Brand>
 
       {params.orgHandle && (
-        <Header.Switchers showDivider>
-          <ComplexSelect
-            aria-label="Organization"
-            label="Organization"
-            labelAnchor="inside"
-            size="small"
-            value={params.orgHandle}
-            onChange={(event) => changeOrganization(String(event.target.value))}
-            sx={{ minWidth: 220 }}
-          >
-            {orgOptions.map((item) => (
-              <ComplexSelect.MenuItem key={item.handle} value={item.handle}>
-                <ComplexSelect.MenuItem.Icon>
-                  <Building2 size={18} />
-                </ComplexSelect.MenuItem.Icon>
-                <ComplexSelect.MenuItem.Text
-                  primary={item.name}
-                  secondary={item.handle}
-                />
-              </ComplexSelect.MenuItem>
-            ))}
-          </ComplexSelect>
+        <Header.Switchers showDivider={false}>
+          <SearchableComplexSelect
+                aria-label={intl.formatMessage({ id: 'appShell.header.org.aria', defaultMessage: 'Organizations' })}
+                label={intl.formatMessage({ id: 'appShell.header.org.label', defaultMessage: 'Organizations' })}
+                value={params.orgHandle}
+                selectedOption={orgOptions.filter((item) => item.handle === params.orgHandle).map(item => ({
+                  id: item.handle,
+                  handler: item.handle,
+                  name: item.name,
+                }))[0] || undefined}
+                onChange={(id) => {
+                  changeOrganization(id);
+                }}
+                options={orgOptions.map((item) => ({
+                  id: item.handle,
+                  handler: item.handle,
+                  name: item.name,
+                }))}
+                renderOptionContent={(option) => (
+                  <>
+                    <ComplexSelect.MenuItem.Icon>
+                      <Building size={18} />
+                    </ComplexSelect.MenuItem.Icon>
+                    <ComplexSelect.MenuItem.Text
+                      primary={option.name}
+                      secondary={option.id}
+                      slotProps={TRUNCATED_OPTION_TEXT_SLOT_PROPS}
+                    />
+                  </>
+                )}
+                searchPlaceholder={intl.formatMessage({ id: 'appShell.header.org.placeholder', defaultMessage: 'Search organizations...' })}
+                emptyMessage={intl.formatMessage({ id: 'appShell.header.org.empty', defaultMessage: 'No organizations found' })}
+                noResultsMessage={intl.formatMessage({ id: 'appShell.header.org.noResults', defaultMessage: 'No matching organizations' })}
+                sx={SWITCHER_SELECT_SX}
+              />
 
           {params.projectHandler && (
-            <ComplexSelect
-              aria-label="Project"
-              label="Project"
-              labelAnchor="inside"
-              size="small"
-              value={params.projectHandler}
-              onChange={(event) => changeProject(String(event.target.value))}
-              sx={{ minWidth: 220 }}
-            >
-              {projectOptions.map((item) => (
-                <ComplexSelect.MenuItem key={item.handler} value={item.handler}>
-                  <ComplexSelect.MenuItem.Icon>
-                    <Boxes size={18} />
-                  </ComplexSelect.MenuItem.Icon>
-                  <ComplexSelect.MenuItem.Text
-                    primary={item.name}
-                    secondary={item.handler}
-                  />
-                </ComplexSelect.MenuItem>
-              ))}
-            </ComplexSelect>
+            <Box sx={{position: 'relative'}}>
+              <SearchableComplexSelect
+                aria-label={intl.formatMessage({ id: 'appShell.header.project.aria', defaultMessage: 'Projects' })}
+                label={intl.formatMessage({ id: 'appShell.header.project.label', defaultMessage: 'Projects' })}
+                value={params.projectHandler}
+                selectedOption={projectOptions.filter((item) => item.handler === params.projectHandler).map(item => ({
+                  id: item.handler,
+                  handler: item.handler,
+                  name: item.name,
+                }))[0] || undefined}
+                onChange={(id) => {
+                  changeProject(id);
+                }}
+                options={projectOptions.map((item) => ({
+                  id: item.handler,
+                  handler: item.handler,
+                  name: item.name,
+                }))}
+                renderOptionContent={(option) => (
+                  <>
+                    <ComplexSelect.MenuItem.Icon>
+                      <Layers size={18} />
+                    </ComplexSelect.MenuItem.Icon>
+                    <ComplexSelect.MenuItem.Text
+                      primary={option.name}
+                      secondary={option.id}
+                      slotProps={TRUNCATED_OPTION_TEXT_SLOT_PROPS}
+                    />
+                  </>
+                )}
+                searchPlaceholder={intl.formatMessage({ id: 'appShell.header.project.placeholder', defaultMessage: 'Search projects...' })}
+                emptyMessage={intl.formatMessage({ id: 'appShell.header.project.empty', defaultMessage: 'No projects found' })}
+                noResultsMessage={intl.formatMessage({ id: 'appShell.header.project.noResults', defaultMessage: 'No matching projects' })}
+                sx={SWITCHER_SELECT_SX}
+              />
+
+              <IconButton
+                size="small"
+                aria-label={intl.formatMessage({ id: 'appShell.header.project.goToOrganization', defaultMessage: 'Go to organization level' })}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                }}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  clearProjectSelection();
+                }}
+                sx={{
+                  position: "absolute",
+                  top: 6,
+                  right: 2,
+                  zIndex: 1,
+                  width: 20,
+                  height: 10,
+                }}
+              >
+                <X size={14} />
+              </IconButton>
+            </Box>
+          )}
+
+          {!params.projectHandler && (
+            <ProjectQuickSelector
+              disabled={!params.orgHandle}
+              isProjectsLoading={isLoading || projectsError !== undefined}
+              projectsError={projectsError}
+              projectOptions={projectOptions.map((item) => ({
+                id: item.handler,
+                handler: item.handler,
+                name: item.name,
+              }))}
+              onSelectProject={(projectHandler) => {
+                changeProject(projectHandler);
+              }}
+            />
+          )}
+
+          {params.apiHandler && (
+            <Box sx={{position: 'relative'}}>
+              <SearchableComplexSelect
+                aria-label={intl.formatMessage({ id: 'appShell.header.api.aria', defaultMessage: 'APIs' })}
+                label={intl.formatMessage({ id: 'appShell.header.api.label', defaultMessage: 'APIs' })}
+                value={params.apiHandler}
+                selectedOption={apiOptions.filter((item) => item.handler === params.apiHandler).map(item => ({
+                  id: item.handler,
+                  handler: item.handler,
+                  name: item.name,
+                }))[0] || undefined}
+                onChange={(id) => {
+                  changeApi(id);
+                }}
+                options={apiOptions.map((item) => ({
+                  id: item.handler,
+                  handler: item.handler,
+                  name: item.name,
+                }))}
+                renderOptionContent={(option) => (
+                  <>
+                    <ComplexSelect.MenuItem.Icon>
+                      <Boxes size={18} />
+                    </ComplexSelect.MenuItem.Icon>
+                    <ComplexSelect.MenuItem.Text
+                      primary={option.name}
+                      secondary={option.id}
+                      slotProps={TRUNCATED_OPTION_TEXT_SLOT_PROPS}
+                    />
+                  </>
+                )}
+                searchPlaceholder={intl.formatMessage({ id: 'appShell.header.api.placeholder', defaultMessage: 'Search APIs...' })}
+                emptyMessage={intl.formatMessage({ id: 'appShell.header.api.empty', defaultMessage: 'No APIs found' })}
+                noResultsMessage={intl.formatMessage({ id: 'appShell.header.api.noResults', defaultMessage: 'No matching APIs' })}
+                sx={SWITCHER_SELECT_SX}
+              />
+
+              <IconButton
+                size="small"
+                aria-label={intl.formatMessage({ id: 'appShell.header.api.goToApiLevel', defaultMessage: 'Go to API level' })}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                }}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  clearApiSelection();
+                }}
+                sx={{
+                  position: "absolute",
+                  top: 6,
+                  right: 2,
+                  zIndex: 1,
+                  width: 20,
+                  height: 10,
+                }}
+              >
+                <X size={14} />
+              </IconButton>
+            </Box>
+          )}
+
+          {!params.apiHandler && params.projectHandler && (
+            <APIQuickSelector
+              disabled={!params.projectHandler}
+              isApisLoading={apisQuery.isLoading}
+              apisError={apisQuery.error}
+              apiOptions={apiOptions.map((item) => ({
+                id: item.handler,
+                handler: item.handler,
+                name: item.name,
+              }))}
+              onSelectApi={(apiHandler) => {
+                changeApi(apiHandler);
+              }}
+            />
           )}
         </Header.Switchers>
       )}
@@ -128,9 +335,9 @@ export function AppHeader() {
 
       <Header.Actions>
         <ColorSchemeToggle />
-        <Tooltip title="Notifications">
+        <Tooltip title={intl.formatMessage({ id: 'appShell.header.notifications', defaultMessage: 'Notifications' })}>
           <IconButton
-            aria-label="Notifications"
+            aria-label={intl.formatMessage({ id: 'appShell.header.notifications', defaultMessage: 'Notifications' })}
             onClick={actions.toggleNotificationPanel}
             size="small"
           >
diff --git a/portals/api-control-plane/src/pages/appShell/AppLayout.tsx b/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
index 4db03b5c6c..09e98d321c 100644
--- a/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
@@ -22,6 +22,8 @@ import {
   Box,
   Footer,
   NotificationPanel,
+  PageContent,
+  Stack,
 } from '@wso2/oxygen-ui';
 import type { BreadcrumbItem } from '@wso2/oxygen-ui';
 import { Bell } from '@wso2/oxygen-ui-icons-react';
@@ -35,6 +37,7 @@ import { useConsoleScope } from '../../scope/ConsoleScopeProvider';
 import { AppHeader } from './AppHeader';
 import { APP_FOOTER_ID } from './appLayoutConstants';
 import { AppSidebar } from './AppSidebar';
+import { FormattedMessage } from 'react-intl';
 
 export default function AppLayout() {
   const navigate = useNavigate();
@@ -44,14 +47,14 @@ export default function AppLayout() {
   if (params.orgHandle) {
     crumbs.push({
       key: 'org',
-      label: organization?.name || params.orgHandle,
+      label: organization?.displayName || params.orgHandle,
       onClick: () => navigate(routes.organizationHome(params.orgHandle!)),
     });
   }
   if (params.orgHandle && params.projectHandler) {
     crumbs.push({
       key: 'project',
-      label: project?.name || params.projectHandler,
+      label: project?.displayName || params.projectHandler,
       onClick: () =>
         navigate(routes.projectHome(params.orgHandle!, params.projectHandler!)),
     });
@@ -86,12 +89,17 @@ export default function AppLayout() {
       </AppShell.Sidebar>
 
       <AppShell.Main>
-        <Box sx={{ minWidth: 0, width: '100%' }}>
-          {breadcrumbItems.length > 1 && (
-            <AppBreadcrumbs items={breadcrumbItems} sx={{ mb: 2 }} />
-          )}
+        <Box sx={{ minWidth: 0, width: '100%', p: 1 }}>
+          
           <Suspense fallback={<LoadingState label="Loading" />}>
-            <Outlet />
+            <PageContent fullWidth>
+                <Stack spacing={1}>
+                    {breadcrumbItems.length > 1 && (
+                      <AppBreadcrumbs items={breadcrumbItems} />
+                    )}
+                  <Outlet />
+                </Stack>
+            </PageContent>
           </Suspense>
         </Box>
       </AppShell.Main>
@@ -106,10 +114,18 @@ export default function AppLayout() {
             </Footer.Copyright>
             <Footer.Version>{runtimeConfig.environmentName}</Footer.Version>
             <Footer.Link href={runtimeConfig.termsOfUseLink}>
-              Terms of Use
+              <FormattedMessage
+                id="appLayout.footer.termsOfUse"
+                defaultMessage="Terms of Use"
+                description="Footer link to the Terms of Use page"
+              />
             </Footer.Link>
             <Footer.Link href={runtimeConfig.privacyPolicyLink}>
-              Privacy Policy
+              <FormattedMessage
+                id="appLayout.footer.privacyPolicy"
+                defaultMessage="Privacy Policy"
+                description="Footer link to the Privacy Policy page"
+              />
             </Footer.Link>
           </Footer>
         </Box>
@@ -122,7 +138,11 @@ export default function AppLayout() {
               <Bell size={18} />
             </NotificationPanel.HeaderIcon>
             <NotificationPanel.HeaderTitle>
-              Notifications
+              <FormattedMessage
+                id="appLayout.notificationPanel.headerTitle"
+                defaultMessage="Notifications"
+                description="Header title for the notification panel"
+              />
             </NotificationPanel.HeaderTitle>
             <NotificationPanel.HeaderClose />
           </NotificationPanel.Header>
diff --git a/portals/api-control-plane/src/pages/appShell/AppSidebar.test.tsx b/portals/api-control-plane/src/pages/appShell/AppSidebar.test.tsx
new file mode 100644
index 0000000000..3152aa89e9
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/AppSidebar.test.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AppShell } from '@wso2/oxygen-ui';
+import { describe, expect, it } from 'vitest';
+
+import type { RestApi } from '../../api/resources/restApis';
+import { organizations, projects } from '../../api/mocks/data';
+import { routes } from '../../routes/paths';
+import { makeConsoleScope } from '../../test/mockScope';
+import { renderWithProviders, screen } from '../../test/utils';
+import { AppSidebar } from './AppSidebar';
+
+const ORG = organizations[0].id;
+const PROJECT = projects[0].id;
+const API = 'api-1';
+
+// Lowercase transports, exactly as the API sends them: an upper-case-only
+// reachability check made `canTest` false and hid the whole Test menu once the
+// scope gate had been passed. Keeping the fixture in the spec's casing means
+// these tests fail if that returns.
+const COMPONENT = {
+  displayName: 'Orders API',
+  id: API,
+  kind: 'RestApi',
+  transport: ['http', 'https'],
+} as RestApi;
+
+const renderSidebar = (route: string, isApiScope: boolean) =>
+  renderWithProviders(
+    <AppShell>
+      <AppShell.Sidebar>
+        <AppSidebar />
+      </AppShell.Sidebar>
+    </AppShell>,
+    {
+      route,
+      scope: makeConsoleScope({
+        component: COMPONENT,
+        isApiScope,
+        isProjectScope: isApiScope,
+        params: isApiScope
+          ? { apiHandler: API, orgHandle: ORG, projectHandler: PROJECT }
+          : { orgHandle: ORG },
+        // Left unset either way: the sidebar reads scope from the flags and
+        // params above, never from the loaded project object.
+        project: undefined,
+      }),
+    }
+  );
+
+/*
+ * The two halves of a submenu parent, as the user meets them. Which one applies
+ * is decided entirely by whether the item has children — see `renderItem`.
+ */
+describe('AppSidebar submenus', () => {
+  it('opens Test as a submenu in API scope rather than navigating', async () => {
+    const { user } = renderSidebar(routes.api(ORG, PROJECT, API), true);
+
+    const test = screen.getByRole('button', { name: /^Test$/ });
+    // A disclosure, not a link: no href to follow.
+    expect(test.closest('a')).toBeNull();
+    expect(test).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(test);
+
+    expect(test).toHaveAttribute('aria-expanded', 'true');
+    for (const label of ['API Console', 'Curl', 'API Chat']) {
+      expect(screen.getByText(label)).toBeInTheDocument();
+    }
+  });
+
+  it('links Test at its first child scope gate when no API is open', () => {
+    renderSidebar(routes.organizationHome(ORG), false);
+
+    const link = screen.getByRole('button', { name: /^Test$/ }).closest('a');
+    expect(link).toHaveAttribute(
+      'href',
+      routes.apiTestConsole(ORG, null, null)
+    );
+    // Nothing to disclose, so no submenu entries and no chevron state.
+    expect(screen.queryByText('API Console')).not.toBeInTheDocument();
+  });
+
+  it('auto-opens the submenu holding the active page', () => {
+    renderSidebar(routes.apiObservabilityLogs(ORG, PROJECT, API), true);
+
+    expect(
+      screen.getByRole('button', { name: /^Observability$/ })
+    ).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Logs')).toBeInTheDocument();
+  });
+});
diff --git a/portals/api-control-plane/src/pages/appShell/AppSidebar.tsx b/portals/api-control-plane/src/pages/appShell/AppSidebar.tsx
index 2795e1d47c..cc64a004b1 100644
--- a/portals/api-control-plane/src/pages/appShell/AppSidebar.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppSidebar.tsx
@@ -16,34 +16,98 @@
  * under the License.
  */
 
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Sidebar, useAppShell } from '@wso2/oxygen-ui';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
-import { useNavigationGroups } from '../../navigation/useNavigationItems';
+import { useNavigationClusters } from '../../navigation/useNavigationItems';
+import type { NavigationItem } from '../../navigation/navigationTypes';
+
+/** Every item and sub-item, depth-first — the order the sidebar renders them. */
+const flatten = (items: NavigationItem[]): NavigationItem[] =>
+  items.flatMap((item) => [item, ...flatten(item.children ?? [])]);
 
 export function AppSidebar() {
-  const groups = useNavigationGroups();
+  const clusters = useNavigationClusters();
   const { state } = useAppShell();
-  const activeItem = groups
-    .flatMap((group) => group.items)
-    .find((item) => item.isActive)?.id;
+  const navigate = useNavigate();
+  const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>(
+    {}
+  );
+
+  const items = useMemo(() => clusters.flat(), [clusters]);
+  const allItems = useMemo(() => flatten(items), [items]);
+  const activeItem = allItems.find((item) => item.isActive)?.id;
+
+  // A parent whose child is active opens itself, so landing on a submenu page —
+  // by deep link, by browser Back, or after a ScopeGate resolves — shows where
+  // you are. Only this parent is forced; anything the user opened by hand stays
+  // as they left it.
+  const activeParent = items.find((item) =>
+    item.children?.some((child) => child.id === activeItem)
+  )?.id;
+  useEffect(() => {
+    if (!activeParent) return;
+    setExpandedMenus((previous) =>
+      previous[activeParent] ? previous : { ...previous, [activeParent]: true }
+    );
+  }, [activeParent]);
+
+  const toggleMenu = useCallback((id: string) => {
+    setExpandedMenus((previous) => ({ ...previous, [id]: !previous[id] }));
+  }, []);
+
+  // Collapsed to the icon rail, Oxygen renders a submenu as a popover whose
+  // entries call `onSelect` and ignore each child's `link` — so without this,
+  // sub-items would be unreachable in the collapsed sidebar. Navigating to the
+  // item's own target is idempotent for the expanded case, where the `link` has
+  // already taken the user there.
+  const selectItem = useCallback(
+    (id: string) => {
+      const target = allItems.find((item) => item.id === id)?.to;
+      if (target) navigate(target);
+    },
+    [allItems, navigate]
+  );
+
+  const renderItem = (item: NavigationItem) => {
+    const children = item.children ?? [];
+    return (
+      <Sidebar.Item
+        key={item.id}
+        id={item.id}
+        // A parent showing children is a disclosure, not a link: Oxygen turns a
+        // click into `onToggleExpand` as soon as an item has nested children, so
+        // linking it too would navigate *and* expand. Out of scope the children
+        // are withheld and this is an ordinary link into the first child's page,
+        // where `ScopeGate` asks for the missing API.
+        link={children.length ? undefined : <Link to={item.to} />}
+      >
+        <Sidebar.ItemIcon>{item.icon}</Sidebar.ItemIcon>
+        <Sidebar.ItemLabel>{item.label}</Sidebar.ItemLabel>
+        {children.map(renderItem)}
+      </Sidebar.Item>
+    );
+  };
 
   return (
-    <Sidebar activeItem={activeItem} collapsed={state.sidebarCollapsed}>
-      <Sidebar.Nav>
-        {groups.map((group) => (
-          <Sidebar.Category key={group.label}>
-            <Sidebar.CategoryLabel>{group.label}</Sidebar.CategoryLabel>
-            {group.items.map((item) => (
-              <Sidebar.Item
-                key={item.id}
-                id={item.id}
-                link={<Link to={item.to} />}
-              >
-                <Sidebar.ItemIcon>{item.icon}</Sidebar.ItemIcon>
-                <Sidebar.ItemLabel>{item.label}</Sidebar.ItemLabel>
-              </Sidebar.Item>
-            ))}
+    <Sidebar
+      activeItem={activeItem}
+      collapsed={state.sidebarCollapsed}
+      expandedMenus={expandedMenus}
+      onSelect={selectItem}
+      onToggleExpand={toggleMenu}
+    >
+      {/*
+        `showDividers` and label-less categories: the sidebar separates its
+        clusters with a rule rather than a heading, because an item is no longer
+        tied to one scope — Overview follows you from organization to project to
+        API, so no single section title fits it.
+      */}
+      <Sidebar.Nav showDividers>
+        {clusters.map((clusterItems) => (
+          <Sidebar.Category key={clusterItems[0].id}>
+            {clusterItems.map(renderItem)}
           </Sidebar.Category>
         ))}
       </Sidebar.Nav>
diff --git a/portals/api-control-plane/src/pages/appShell/ProjectQuickSelector.tsx b/portals/api-control-plane/src/pages/appShell/ProjectQuickSelector.tsx
new file mode 100644
index 0000000000..35b0db3c43
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/ProjectQuickSelector.tsx
@@ -0,0 +1,191 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Box,
+  Divider,
+  IconButton,
+  InputAdornment,
+  Menu,
+  MenuItem,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@wso2/oxygen-ui';
+import { ChevronRight, Search } from '@wso2/oxygen-ui-icons-react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+type SelectableProject = {
+  id: string;
+  name: string;
+  description?: string;
+};
+
+type Props = {
+  disabled: boolean;
+  isProjectsLoading: boolean;
+  projectsError?: unknown;
+  projectOptions: SelectableProject[];
+  onSelectProject: (projectId: string) => void;
+};
+
+export default function ProjectQuickSelector({
+  disabled,
+  isProjectsLoading,
+  projectsError,
+  projectOptions,
+  onSelectProject,
+}: Props) {
+  const intl = useIntl();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const open = Boolean(anchorEl);
+
+  useEffect(() => {
+    if (!disabled) return;
+    setAnchorEl(null);
+    setSearchQuery('');
+  }, [disabled]);
+
+  const filteredProjects = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return projectOptions;
+    return projectOptions.filter((project) => {
+      const haystack = [project.name, project.description]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return haystack.includes(query);
+    });
+  }, [projectOptions, searchQuery]);
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setSearchQuery('');
+  };
+
+  return (
+    <>
+      <Tooltip title={intl.formatMessage({ id: 'appShell.header.project.select', defaultMessage: 'Select Project' })}>
+        <span>
+          <IconButton
+            size="small"
+            aria-label={intl.formatMessage({ id: 'appShell.header.project.select', defaultMessage: 'Select Project' })}
+            // disabled={disabled}
+            onClick={(event) => setAnchorEl(event.currentTarget)}
+            sx={{
+              width: 32,
+              height: 32,
+              border: '1px solid',
+              borderColor: 'divider',
+            }}
+          >
+            <ChevronRight size={16} />
+          </IconButton>
+        </span>
+      </Tooltip>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        slotProps={{
+          paper: {
+            sx: {
+              mt: 1,
+              maxWidth: 280,
+              borderRadius: 1,
+            },
+          },
+        }}
+      >
+        <Box sx={{ px: 1.5, pt: 1.2, pb: 1 }}>
+          <Typography
+            variant="caption"
+            sx={{ color: 'primary.main', display: 'block', mb: 1 }}
+          >
+            <FormattedMessage
+              id="aiWorkspace.pages.appShell.ProjectQuickSelector.projects"
+              defaultMessage="Projects"
+            />
+          </Typography>
+          <TextField
+            size="small"
+            fullWidth
+            autoFocus
+            placeholder="Search"
+            value={searchQuery}
+            onChange={(event) => setSearchQuery(event.target.value)}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search size={16} />
+                  </InputAdornment>
+                ),
+              },
+            }}
+          />
+        </Box>
+        <Divider />
+        <Box sx={{ maxHeight: 260, overflowY: 'auto', pb: 0.5}}>
+          {isProjectsLoading ? (
+            <MenuItem disabled>
+              <FormattedMessage
+                id="aiWorkspace.pages.appShell.ProjectQuickSelector.loading"
+                defaultMessage='Loading...'
+              />
+            </MenuItem>
+          ) : projectsError ? (
+            <MenuItem disabled>
+              <FormattedMessage
+                id="aiWorkspace.pages.appShell.ProjectQuickSelector.failed.to.load.projects"
+                defaultMessage='Failed to load projects'
+              />
+            </MenuItem>
+          ) : 
+          (filteredProjects.length === 0 ? (
+            <MenuItem disabled>
+              <FormattedMessage
+                id="aiWorkspace.pages.appShell.ProjectQuickSelector.no.projects.available"
+                defaultMessage='No projects available'
+              />
+            </MenuItem>
+          ) : (
+            filteredProjects.map(project => (
+                <MenuItem
+                 key={project.id}
+                 onClick={() => {
+                   handleClose();
+                   onSelectProject(project.id);
+                 }}
+              >
+                {project.name}
+              </MenuItem>
+            ))
+          ))
+          }
+        </Box>
+      </Menu>
+    </>
+  );
+}
+
diff --git a/portals/api-control-plane/src/pages/appShell/appLayoutConstants.ts b/portals/api-control-plane/src/pages/appShell/appLayoutConstants.ts
index dd86d59e69..66575ac143 100644
--- a/portals/api-control-plane/src/pages/appShell/appLayoutConstants.ts
+++ b/portals/api-control-plane/src/pages/appShell/appLayoutConstants.ts
@@ -18,4 +18,4 @@
 
 /** DOM id on the app footer wrapper, used to measure its height so sticky
  * action bars (e.g. develop tabs' SaveBar) can offset above it. */
-export const APP_FOOTER_ID = 'apim-app-footer';
+export const APP_FOOTER_ID = 'API Platform Footer';
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/admin/AdminPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/admin/AdminPage.tsx
new file mode 100644
index 0000000000..90f5c6e9aa
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/admin/AdminPage.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormattedMessage } from 'react-intl';
+
+import { ComingSoon } from '../../../../components/ComingSoon';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+
+export function AdminPage() {
+  return (
+    <ScopeGate prompt="Administration is scoped to a single API." requires="api" to={routes.apiAdmin}>
+      <ComingSoon
+        feature={
+          <FormattedMessage
+            id="appShell.adminPage.feature"
+            defaultMessage="Administration for this API"
+          />
+        }
+      />
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/components/cards/ApiCardGrid.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCardGrid.tsx
similarity index 58%
rename from portals/api-control-plane/src/components/cards/ApiCardGrid.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCardGrid.tsx
index 2190fd1bff..2de6da2a3b 100644
--- a/portals/api-control-plane/src/components/cards/ApiCardGrid.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCardGrid.tsx
@@ -18,36 +18,34 @@
 
 import { Box } from '@wso2/oxygen-ui';
 
-import type { Api } from '../../types/domain';
-import { ApiCard } from './ApiCard';
+import type { RestApi } from '../../../../api/resources/restApis';
+import { ApiCard } from './components/ApiCard';
 
 type ApiCardGridProps = {
-  components: Api[];
-  onOpen: (component: Api) => void;
-  onDelete?: (component: Api) => void;
+  apis: RestApi[];
+  onOpen: (api: RestApi) => void;
+  onDelete?: (api: RestApi) => void;
 };
 
 /** Auto-fill card grid, same density as the gateways page. */
-export function ApiCardGrid({
-  components,
-  onOpen,
-  onDelete,
-}: ApiCardGridProps) {
+export function ApiCardGrid({ apis, onOpen, onDelete }: ApiCardGridProps) {
   return (
     <Box
       sx={{
         display: 'grid',
         gap: 2.5,
-        gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))',
+        gridTemplateColumns: {
+          xs: '1fr',
+          sm: 'repeat(2, 1fr)',
+          md: 'repeat(3, 1fr)',
+          lg: 'repeat(4, 1fr)',
+        },
+        // Allow cards to shrink so long text does not widen the grid.
+        '& > *': { minWidth: 0 },
       }}
     >
-      {components.map((component) => (
-        <ApiCard
-          component={component}
-          key={component.id}
-          onDelete={onDelete}
-          onOpen={onOpen}
-        />
+      {apis.map((api) => (
+        <ApiCard api={api} key={api.id} onDelete={onDelete} onOpen={onOpen} />
       ))}
     </Box>
   );
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
index aeb7f2d99f..2a37782f26 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
@@ -17,7 +17,7 @@
  */
 
 import { useState } from 'react';
-import { Avatar, Box, Button, Card, Chip, PageContent, Stack, Tab, Tabs, Typography } from '@wso2/oxygen-ui';
+import { Avatar, Box, Button, Card, Chip, Stack, Tab, Tabs, Typography } from '@wso2/oxygen-ui';
 
 import { useApiDetail } from '../../../../api/hooks/useMvpQueries';
 import { ErrorState, LoadingState } from '../../../../components/StateViews';
@@ -27,6 +27,8 @@ import { RoutingTab } from './develop/RoutingTab';
 import { OverviewTab } from './overview/OverviewTab';
 import { FormattedMessage } from 'react-intl';
 
+// No `ScopeGate`: this page is the API tier of the sidebar's Overview item, which
+// degrades to a shallower tier rather than linking here without an API.
 export function ApiDetailPage() {
   const detailQuery = useApiDetail();
   const [tab, setTab] = useState(0);
@@ -55,7 +57,7 @@ export function ApiDetailPage() {
 };
 
   return (
-    <PageContent fullWidth>
+    <>
       <Stack spacing={3} sx={{ mb: 3 }}>
       
          {/* Header card with editable fields */}
@@ -207,6 +209,6 @@ export function ApiDetailPage() {
       {active === 'Policy' && <PolicyTab detail={detail} />}
       {active === 'Routing' && <RoutingTab detail={detail} />}
       {active === 'Documents' && <DocumentsTab />}
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx
index 8ad80528af..822f8667a8 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx
@@ -20,23 +20,60 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import { Route, Routes } from 'react-router-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { components as mockComponents } from '../../../../api/mocks/data';
+import type { ApiError } from '../../../../api/core/errors';
+import type {
+  RestApi,
+  RestApiListResponse,
+} from '../../../../api/resources/restApis';
+import { makeConsoleScope } from '../../../../test/mockScope';
 import { renderWithProviders, screen } from '../../../../test/utils';
-import type { Api } from '../../../../types/domain';
 
-vi.mock('../../api/hooks/useMvpQueries', async (importActual) => ({
-  ...(await importActual<typeof import('../../../../api/hooks/useMvpQueries')>()),
-  useApis: vi.fn(),
-  useDeleteApi: vi.fn(),
+vi.mock('../../../../api/resources/restApis', async (importActual) => ({
+  ...(await importActual<typeof import('../../../../api/resources/restApis')>()),
+  useRestApis: vi.fn(),
+  useDeleteRestApi: vi.fn(),
 }));
 
-import { useApis, useDeleteApi } from '../../../../api/hooks/useMvpQueries';
+import {
+  useDeleteRestApi,
+  useRestApis,
+} from '../../../../api/resources/restApis';
 import { ApiListPage } from './ApiListPage';
 
 const ROUTE = '/organizations/acme/projects/retail/apis';
 
-const queryResult = (overrides: Partial<UseQueryResult<Api[], Error>>) =>
-  overrides as UseQueryResult<Api[], Error>;
+const restApi = (overrides: Partial<RestApi>): RestApi => ({
+  context: '/orders',
+  displayName: 'Orders API',
+  id: 'orders-api',
+  kind: 'RestApi',
+  lifeCycleStatus: 'PUBLISHED',
+  projectId: 'retail',
+  transport: ['http', 'https'],
+  upstream: { main: { url: 'https://backend.example.com' } },
+  version: '1.0.0',
+  ...overrides,
+});
+
+const API_LIST: RestApi[] = [
+  restApi({}),
+  restApi({
+    context: '/payments',
+    displayName: 'Payments API',
+    id: 'payments-api',
+  }),
+];
+
+const listResponse = (list: RestApi[]): RestApiListResponse =>
+  ({
+    count: list.length,
+    list,
+    pagination: { limit: 25, offset: 0, total: list.length },
+  }) as RestApiListResponse;
+
+const queryResult = (
+  overrides: Partial<UseQueryResult<RestApiListResponse, ApiError>>
+) => overrides as UseQueryResult<RestApiListResponse, ApiError>;
 
 function renderPage() {
   return renderWithProviders(
@@ -46,7 +83,13 @@ function renderPage() {
         element={<ApiListPage />}
       />
     </Routes>,
-    { route: ROUTE }
+    {
+      route: ROUTE,
+      // The page's `ScopeGate` reads console scope to decide between the API
+      // list and a project picker; the default mock scope is inside a project,
+      // which is the case these tests exercise.
+      scope: makeConsoleScope(),
+    }
   );
 }
 
@@ -54,45 +97,51 @@ describe('ApiListPage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     // Most tests don't exercise delete; provide a default mutation.
-    vi.mocked(useDeleteApi).mockReturnValue({
+    vi.mocked(useDeleteRestApi).mockReturnValue({
       mutate: vi.fn(),
       isPending: false,
-    } as unknown as ReturnType<typeof useDeleteApi>);
+    } as unknown as ReturnType<typeof useDeleteRestApi>);
   });
 
   it('shows the loading state', () => {
-    vi.mocked(useApis).mockReturnValue(queryResult({ isLoading: true }));
+    vi.mocked(useRestApis).mockReturnValue(queryResult({ isPending: true }));
     renderPage();
     expect(screen.getByText('Loading APIs')).toBeInTheDocument();
   });
 
   it('shows the error state', () => {
-    vi.mocked(useApis).mockReturnValue(
-      queryResult({ isLoading: false, error: new Error('x') })
+    vi.mocked(useRestApis).mockReturnValue(
+      queryResult({ isPending: false, error: { message: 'x' } as ApiError })
     );
     renderPage();
     expect(screen.getByText('Unable to load APIs')).toBeInTheDocument();
   });
 
   it('shows the empty state', () => {
-    vi.mocked(useApis).mockReturnValue(
-      queryResult({ isLoading: false, data: [] })
+    vi.mocked(useRestApis).mockReturnValue(
+      queryResult({ isPending: false, data: listResponse([]) })
     );
     renderPage();
     expect(screen.getByText('No APIs yet')).toBeInTheDocument();
   });
 
-  it('renders the API Proxies section and filters by search', async () => {
-    vi.mocked(useApis).mockReturnValue(
-      queryResult({ isLoading: false, data: mockComponents })
+  it('renders the API cards and filters by search', async () => {
+    vi.mocked(useRestApis).mockReturnValue(
+      queryResult({ isPending: false, data: listResponse(API_LIST) })
     );
     const { user } = renderPage();
 
-    expect(screen.getByText('API Proxies')).toBeInTheDocument();
     expect(screen.getByText('Orders API')).toBeInTheDocument();
+    expect(screen.getByText('Payments API')).toBeInTheDocument();
+    // Card details come straight from the spec shape.
+    expect(screen.getAllByText('v1.0.0').length).toBe(2);
+    // Transports render as one Chip each, labelled in upper case.
+    expect(screen.getAllByText('HTTP').length).toBe(2);
+    expect(screen.getAllByText('HTTPS').length).toBe(2);
 
     await user.type(screen.getByPlaceholderText('Search APIs'), 'orders');
     expect(screen.getByText('Orders API')).toBeInTheDocument();
+    expect(screen.queryByText('Payments API')).not.toBeInTheDocument();
 
     await user.clear(screen.getByPlaceholderText('Search APIs'));
     await user.type(screen.getByPlaceholderText('Search APIs'), 'nomatch');
@@ -100,17 +149,39 @@ describe('ApiListPage', () => {
     expect(screen.getByText('No matching APIs')).toBeInTheDocument();
   });
 
+  it('deletes from the card action instead of an overflow menu', async () => {
+    vi.mocked(useRestApis).mockReturnValue(
+      queryResult({ isPending: false, data: listResponse(API_LIST) })
+    );
+    const { user } = renderPage();
+
+    expect(
+      screen.queryByRole('button', { name: 'API actions' })
+    ).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Delete Orders API' }));
+
+    // Confirmation opens, and the click never reached the card underneath —
+    // which would have navigated away from the list.
+    expect(
+      screen.getByText(/permanently deletes the API "Orders API"/)
+    ).toBeInTheDocument();
+    expect(screen.getByText('Payments API')).toBeInTheDocument();
+  });
+
   it('switches between grid and list views', async () => {
-    vi.mocked(useApis).mockReturnValue(
-      queryResult({ isLoading: false, data: mockComponents })
+    vi.mocked(useRestApis).mockReturnValue(
+      queryResult({ isPending: false, data: listResponse(API_LIST) })
     );
     const { user } = renderPage();
 
     expect(screen.queryByTestId('api-list-view')).not.toBeInTheDocument();
     await user.click(screen.getByRole('button', { name: 'List view' }));
     expect(screen.getAllByTestId('api-list-view').length).toBeGreaterThan(0);
-    // Rows still open the API and show status.
+    // Rows still open the API and show context plus lifecycle.
     expect(screen.getByText('Orders API')).toBeInTheDocument();
+    expect(screen.getByText(/\/orders/)).toBeInTheDocument();
+    expect(screen.getAllByText('Published').length).toBe(2);
 
     await user.click(screen.getByRole('button', { name: 'Grid view' }));
     expect(screen.queryByTestId('api-list-view')).not.toBeInTheDocument();
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.tsx
index 91d21a9287..c61b7cab0a 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.tsx
@@ -20,29 +20,24 @@ import { useMemo, useState } from 'react';
 import {
   Box,
   Button,
-  Chip,
   InputAdornment,
-  PageContent,
   PageTitle,
   Stack,
   TextField,
   ToggleButton,
   ToggleButtonGroup,
-  Typography,
 } from '@wso2/oxygen-ui';
-import {
-  Boxes,
-  LayoutGrid,
-  List,
-  Plus,
-  Search,
-} from '@wso2/oxygen-ui-icons-react';
+import { LayoutGrid, List, Plus, Search } from '@wso2/oxygen-ui-icons-react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { useApis, useDeleteApi } from '../../../../api/hooks/useMvpQueries';
-import { ApiCardGrid } from '../../../../components/cards/ApiCardGrid';
-import { filterApis, groupApisByKind } from '../../../../components/cards/apiDisplay';
-import { ApiListView } from '../../../../components/cards/ApiListView';
+import {
+  useDeleteRestApi,
+  useRestApis,
+  type RestApi,
+} from '../../../../api/resources/restApis';
+import { ApiCardGrid } from './ApiCardGrid';
+import { ApiListView } from './ApiListView';
+import { filterRestApis } from './restApiDisplay';
 import { ConfirmDialog } from '../../../../components/ConfirmDialog';
 import { useNotifications } from '../../../../components/Notifications';
 import {
@@ -51,111 +46,97 @@ import {
   LoadingState,
 } from '../../../../components/StateViews';
 import { routes } from '../../../../routes/paths';
-import type { Api } from '../../../../types/domain';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+import { FormattedMessage } from 'react-intl';
 
 type ViewMode = 'grid' | 'list';
 
-function ApiSection({
-  title,
-  icon,
-  components,
-  view,
-  onOpen,
-  onDelete,
-}: {
-  title: string;
-  icon: React.ReactNode;
-  components: Api[];
-  view: ViewMode;
-  onOpen: (component: Api) => void;
-  onDelete: (component: Api) => void;
-}) {
-  if (components.length === 0) return null;
+export function ApiListPage() {
+  // Gating the whole body, not just the JSX: out of project scope `useRestApis`
+  // stays disabled and `isPending` never clears, so the loading branch below
+  // would sit there forever instead of the scope prompt showing.
   return (
-    <Stack spacing={1.5}>
-      <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
-        <Box sx={{ color: 'text.secondary', display: 'inline-flex' }}>
-          {icon}
-        </Box>
-        <Typography variant="h6">{title}</Typography>
-        <Chip label={components.length} size="small" />
-        <Box sx={{ bgcolor: 'divider', flex: 1, height: '1px', ml: 1 }} />
-      </Box>
-      {view === 'grid' ? (
-        <ApiCardGrid
-          components={components}
-          onDelete={onDelete}
-          onOpen={onOpen}
-        />
-      ) : (
-        <ApiListView
-          components={components}
-          onDelete={onDelete}
-          onOpen={onOpen}
-        />
-      )}
-    </Stack>
+    <ScopeGate
+      prompt="APIs are created and managed at the project level."
+      requires="project"
+      to={routes.apis}
+    >
+      <ApiList />
+    </ScopeGate>
   );
 }
 
-export function ApiListPage() {
+function ApiList() {
   const { orgHandle = '', projectHandler = '' } = useParams();
   const navigate = useNavigate();
-  const apisQuery = useApis();
-  const deleteApiMutation = useDeleteApi();
+  const apisQuery = useRestApis();
+  const deleteApiMutation = useDeleteRestApi();
   const { notify } = useNotifications();
   const [search, setSearch] = useState('');
   const [view, setView] = useState<ViewMode>('grid');
-  const [toDelete, setToDelete] = useState<Api | null>(null);
+  const [toDelete, setToDelete] = useState<RestApi | null>(null);
+
+  const apis = useMemo(() => apisQuery.data?.list ?? [], [apisQuery.data]);
+  const searched = useMemo(() => filterRestApis(apis, search), [apis, search]);
 
   const confirmDelete = () => {
-    if (!toDelete) return;
-    deleteApiMutation.mutate(toDelete, {
-      onSuccess: () => {
-        notify(`Deleted "${toDelete.displayName}".`, 'success');
-        setToDelete(null);
-      },
-      onError: (error) =>
-        notify(
-          error instanceof Error ? error.message : 'Delete failed',
-          'error'
-        ),
-    });
+    if (!toDelete?.id) return;
+    deleteApiMutation.mutate(
+      { restApiId: toDelete.id },
+      {
+        onSuccess: () => {
+          notify(`Deleted "${toDelete.displayName}".`, 'success');
+          setToDelete(null);
+        },
+        onError: (error) => notify(error.message || 'Delete failed', 'error'),
+      }
+    );
   };
 
-  const components = useMemo(() => apisQuery.data || [], [apisQuery.data]);
-  const searched = useMemo(
-    () => filterApis(components, search),
-    [components, search]
-  );
-  const groups = useMemo(() => groupApisByKind(searched), [searched]);
-  const matchCount = groups.apiProxies.length + groups.others.length;
-
-  const openApi = (component: Api) =>
-    navigate(routes.api(orgHandle, projectHandler, component.handler));
+  const openApi = (api: RestApi) =>
+    navigate(routes.api(orgHandle, projectHandler, api.id ?? ''));
   const createApi = () => navigate(routes.newApi(orgHandle, projectHandler));
 
-  if (apisQuery.isLoading) return <LoadingState label="Loading APIs" />;
+  // `isPending` rather than `isLoading`: the query stays disabled until the
+  // route's org/project resolve, and in that window `isLoading` is already
+  // false with no data — which would flash the "No APIs yet" empty state.
+  if (apisQuery.isPending) return <LoadingState label="Loading APIs" />;
   if (apisQuery.error) {
     return <ErrorState message="Unable to load APIs" />;
   }
 
   return (
-    <PageContent fullWidth>
+    <>
       <PageTitle>
-        <PageTitle.Header>APIs</PageTitle.Header>
-        <PageTitle.SubHeader>API proxies in this project.</PageTitle.SubHeader>
+        <PageTitle.Header>
+          <FormattedMessage
+            id="apiListPage.title"
+            defaultMessage="APIs"
+            description="Page title for the API list page"
+          />
+        </PageTitle.Header>
+        <PageTitle.SubHeader>
+          <FormattedMessage
+            id="apiListPage.subHeader"
+            defaultMessage="REST APIs in this project."
+            description="Sub header for the API list page"
+          />
+        </PageTitle.SubHeader>
         <PageTitle.Actions>
           <Button onClick={createApi} startIcon={<Plus />} variant="contained">
-            Create API
+            <FormattedMessage
+              id="apiListPage.createApiButton"
+              defaultMessage="Create API"
+              description="Button label for creating a new API"
+            />
           </Button>
         </PageTitle.Actions>
       </PageTitle>
 
-      {components.length === 0 ? (
+      {apis.length === 0 ? (
         <EmptyState
           actionLabel="Create API"
-          description="Create an API Proxy to get started."
+          description="Create a REST API to get started."
           onAction={createApi}
           title="No APIs yet"
         />
@@ -203,30 +184,23 @@ export function ApiListPage() {
             </ToggleButtonGroup>
           </Box>
 
-          {matchCount === 0 ? (
+          {searched.length === 0 ? (
             <EmptyState
               title="No matching APIs"
               description="Try a different API name or clear the filters."
             />
+          ) : view === 'grid' ? (
+            <ApiCardGrid
+              apis={searched}
+              onDelete={setToDelete}
+              onOpen={openApi}
+            />
           ) : (
-            <Stack spacing={4}>
-              <ApiSection
-                components={groups.apiProxies}
-                icon={<Boxes size={16} />}
-                onDelete={setToDelete}
-                onOpen={openApi}
-                title="API Proxies"
-                view={view}
-              />
-              <ApiSection
-                components={groups.others}
-                icon={<Boxes size={16} />}
-                onDelete={setToDelete}
-                onOpen={openApi}
-                title="Other APIs"
-                view={view}
-              />
-            </Stack>
+            <ApiListView
+              apis={searched}
+              onDelete={setToDelete}
+              onOpen={openApi}
+            />
           )}
         </Stack>
       )}
@@ -239,7 +213,7 @@ export function ApiListPage() {
         loading={deleteApiMutation.isPending}
         message={
           toDelete
-            ? `This permanently deletes the API proxy "${toDelete.displayName}" ` +
+            ? `This permanently deletes the API "${toDelete.displayName}" ` +
               'and all related details. This action is irreversible.'
             : ''
         }
@@ -248,6 +222,6 @@ export function ApiListPage() {
         open={toDelete !== null}
         title="Delete API"
       />
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/components/cards/ApiListView.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListView.tsx
similarity index 71%
rename from portals/api-control-plane/src/components/cards/ApiListView.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListView.tsx
index 80fe9dca1e..f312effc10 100644
--- a/portals/api-control-plane/src/components/cards/ApiListView.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListView.tsx
@@ -26,26 +26,32 @@ import {
   ListItemText,
   Menu,
   MenuItem,
+  Tooltip,
   Typography,
 } from '@wso2/oxygen-ui';
 import { Clock, MoreVertical, Trash2 } from '@wso2/oxygen-ui-icons-react';
 
-import type { Api } from '../../types/domain';
-import { relativeTime } from '../../utils/relativeTime';
-import { COMPONENT_KIND_LABEL } from './apiDisplay';
-import { EnvStatusChips } from './EnvStatusChips';
-import { KindIconTile } from './KindIconTile';
-import { StatusPill } from './StatusPill';
+import type { RestApi } from '../../../../api/resources/restApis';
+import { relativeTime } from '../../../../utils/relativeTime';
+import { KindIconTile } from '../../../../components/cards/KindIconTile';
+import {
+  DeploymentStateLabel,
+  GatewayChips,
+  LifecycleChip,
+} from './components/RestApiChips';
+import { apiKindLabel, useApiDeploymentState } from './restApiDisplay';
 
 type ApiRowProps = {
-  component: Api;
-  onOpen: (component: Api) => void;
-  onDelete?: (component: Api) => void;
+  api: RestApi;
+  onOpen: (api: RestApi) => void;
+  onDelete?: (api: RestApi) => void;
 };
 
-function ApiRow({ component, onOpen, onDelete }: ApiRowProps) {
-  const updated = component.updatedAt || component.createdAt;
+function ApiRow({ api, onOpen, onDelete }: ApiRowProps) {
   const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
+  const { gatewayIds, state } = useApiDeploymentState(api.id);
+
+  const updated = api.updatedAt || api.createdAt;
 
   const closeMenu = (event?: React.MouseEvent) => {
     event?.stopPropagation();
@@ -54,10 +60,10 @@ function ApiRow({ component, onOpen, onDelete }: ApiRowProps) {
 
   return (
     <Box
-      onClick={() => onOpen(component)}
-      sx={{
+      onClick={() => onOpen(api)}
+      sx={(theme) => ({
         alignItems: 'center',
-        borderBottom: '1px solid',
+        borderBottom: `${theme.border.width} ${theme.border.style}`,
         borderColor: 'divider',
         cursor: 'pointer',
         display: 'flex',
@@ -67,12 +73,16 @@ function ApiRow({ component, onOpen, onDelete }: ApiRowProps) {
         transition: 'background-color 250ms',
         '&:hover': { bgcolor: 'action.hover' },
         '&:last-of-type': { borderBottom: 0 },
-      }}
+      })}
     >
-      <KindIconTile />
+      <Tooltip placement="left" title={apiKindLabel(api.kind)}>
+        <Box sx={{ display: 'inline-flex' }}>
+          <KindIconTile />
+        </Box>
+      </Tooltip>
       <Box sx={{ flex: 1, minWidth: 140 }}>
         <Typography noWrap sx={{ fontWeight: 500 }} variant="subtitle2">
-          {component.displayName}
+          {api.displayName}
         </Typography>
         <Typography
           color="text.secondary"
@@ -81,11 +91,11 @@ function ApiRow({ component, onOpen, onDelete }: ApiRowProps) {
           sx={{ fontFamily: 'monospace' }}
           variant="caption"
         >
-          {COMPONENT_KIND_LABEL[component.kind]}
-          {component.version ? ` · v${component.version}` : ''}
+          {api.context}
+          {api.version ? ` · v${api.version}` : ''}
         </Typography>
       </Box>
-      <StatusPill status={component.status} />
+      <LifecycleChip status={api.lifeCycleStatus} />
       <Box
         sx={{
           alignItems: 'center',
@@ -94,7 +104,8 @@ function ApiRow({ component, onOpen, onDelete }: ApiRowProps) {
           gap: 1,
         }}
       >
-        <EnvStatusChips componentId={component.id} />
+        <DeploymentStateLabel state={state} />
+        <GatewayChips gatewayIds={gatewayIds} />
       </Box>
       <Box
         sx={{
@@ -106,15 +117,15 @@ function ApiRow({ component, onOpen, onDelete }: ApiRowProps) {
           ml: 'auto',
         }}
       >
-        {component.owner && (
+        {api.createdBy && (
           <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
             <Avatar
               sx={{ fontSize: 10, fontWeight: 600, height: 20, width: 20 }}
             >
-              {component.owner.charAt(0).toUpperCase()}
+              {api.createdBy.charAt(0).toUpperCase()}
             </Avatar>
             <Typography color="text.secondary" noWrap variant="caption">
-              {component.owner}
+              {api.createdBy}
             </Typography>
           </Box>
         )}
@@ -146,7 +157,7 @@ function ApiRow({ component, onOpen, onDelete }: ApiRowProps) {
             <MenuItem
               onClick={(event) => {
                 closeMenu(event);
-                onDelete(component);
+                onDelete(api);
               }}
               sx={{ color: 'error.main' }}
             >
@@ -163,23 +174,19 @@ function ApiRow({ component, onOpen, onDelete }: ApiRowProps) {
 }
 
 type ApiListViewProps = {
-  components: Api[];
-  onOpen: (component: Api) => void;
-  onDelete?: (component: Api) => void;
+  apis: RestApi[];
+  onOpen: (api: RestApi) => void;
+  onDelete?: (api: RestApi) => void;
 };
 
 /** Compact row layout for APIs — the list-view counterpart of ApiCardGrid. */
-export function ApiListView({
-  components,
-  onOpen,
-  onDelete,
-}: ApiListViewProps) {
+export function ApiListView({ apis, onOpen, onDelete }: ApiListViewProps) {
   return (
     <Card data-testid="api-list-view" variant="outlined">
-      {components.map((component) => (
+      {apis.map((api) => (
         <ApiRow
-          component={component}
-          key={component.id}
+          api={api}
+          key={api.id}
           onDelete={onDelete}
           onOpen={onOpen}
         />
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/components/ApiCard.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/components/ApiCard.tsx
new file mode 100644
index 0000000000..152fc1e6b0
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/components/ApiCard.tsx
@@ -0,0 +1,225 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  Avatar,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Chip,
+  Divider,
+  IconButton,
+  Stack,
+  Tooltip,
+  Typography,
+} from '@wso2/oxygen-ui';
+import { Boxes, Clock, Lock, Trash2 } from '@wso2/oxygen-ui-icons-react';
+import { useIntl } from 'react-intl';
+
+import type { RestApi } from '../../../../../api/resources/restApis';
+import { relativeTime } from '../../../../../utils/relativeTime';
+import { interactiveCardSx } from '../../../../../theme';
+import { TransportChips, VersionChip } from './RestApiChips';
+import { apiKindLabel } from '../restApiDisplay';
+
+type ApiCardProps = {
+  api: RestApi;
+  onOpen: (api: RestApi) => void;
+  onDelete?: (api: RestApi) => void;
+};
+
+/**
+ * Marks the delete button so the card can reveal it on hover. One constant, so
+ * the selector below and the button it targets can never drift apart.
+ */
+const DELETE_CLASS = 'ApiCard-delete';
+
+/** Edge of the square kind tile, and the icon sitting inside it. */
+const AVATAR_SIZE = 56;
+const AVATAR_ICON_SIZE = 32;
+
+/**
+ * API card for the grid view, rendering the spec's `RESTAPI` shape.
+ *
+ * Built from the Card family Oxygen re-exports — `CardHeader` for the
+ * monogram/name/version band, `CardContent` for the description, `CardActions`
+ * for the footer — so padding, dividers, chip and avatar treatments all come
+ * from the theme rather than from `sx` literals here. What is left in `sx` is
+ * layout only: the flex column that lets equal-height cards sit in a grid.
+ *
+ * Deliberately sparse: name, version, what it speaks, where it is live and when
+ * it last changed. Context, operation count and lifecycle status live on the
+ * API's own page — a grid is for finding an API, and per-card status marks
+ * compete with that at a dozen cards on screen.
+ */
+export function ApiCard({ api, onOpen, onDelete }: ApiCardProps) {
+  const { formatMessage } = useIntl();
+  const updated = api.updatedAt || api.createdAt;
+  const transports = api.transport ?? [];
+
+  return (
+    <Card
+      onClick={() => onOpen(api)}
+      sx={{
+        ...interactiveCardSx,
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        // Hide delete until hover; `focus-within` keeps it keyboard-reachable.
+        [`&:hover .${DELETE_CLASS}, &:focus-within .${DELETE_CLASS}`]: {
+          opacity: 1,
+        },
+      }}
+    >
+      <CardHeader
+        avatar={
+          <Tooltip placement="left" title={apiKindLabel(api.kind)}>
+            <Avatar
+              sx={() => ({
+                bgcolor: 'primary.light',
+                color: 'primary.contrastText',
+                height: AVATAR_SIZE,
+                width: AVATAR_SIZE,
+              })}
+              variant="rounded"
+            >
+              <Boxes size={AVATAR_ICON_SIZE} />
+            </Avatar>
+          </Tooltip>
+        }
+        slotProps={{
+          // `content` has no min-width of its own, so a long name would widen
+          // the card instead of truncating. Both slots render a Stack, which
+          // cannot legally sit inside the default `span`.
+          content: { sx: { minWidth: 0 } },
+          subheader: { component: 'div' },
+          title: { component: 'div', sx: { mb: 1 } },
+        }}
+        subheader={
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{ flexWrap: 'wrap', gap: 1 }}
+            useFlexGap
+          >
+            <TransportChips transports={transports} />
+            {api.readOnly && (
+              <Tooltip title="Discovered from a data-plane gateway — read-only here">
+                <Chip
+                  icon={<Lock size={12} />}
+                  label="Gateway-managed"
+                  size="small"
+                  variant="outlined"
+                />
+              </Tooltip>
+            )}
+          </Stack>
+        }
+        sx={{ alignItems: 'flex-start' }}
+        title={
+          <Stack
+            alignItems="center"
+            direction="row"
+            spacing={1}
+            sx={{ minWidth: 0 }}
+          >
+            <Typography component="span" noWrap variant="h5" sx={{ fontWeight: 600}}>
+              {api.displayName}
+            </Typography>
+            <VersionChip version={api.version} />
+          </Stack>
+        }
+      />
+
+      {/* Two-line clamped description; the flex grow is what keeps every
+          card's footer on the same line across the grid. */}
+      <CardContent sx={{ flex: 1, pt: 0 }}>
+        <Typography
+          color="text.secondary"
+          sx={{
+            display: '-webkit-box',
+            overflow: 'hidden',
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: 2,
+            fontSize: "0.7rem"
+          }}
+          variant="body2"
+        >
+          {api.description || ''}
+        </Typography>
+      </CardContent>
+
+      <Divider />
+
+      {/* Footer: when it last changed, and the one destructive action. */}
+      <CardActions sx={{ justifyContent: 'space-between', px: 2 }}>
+        <Stack
+          alignItems="center"
+          direction="row"
+          spacing={1}
+          sx={{ color: 'text.secondary' }}
+        >
+          {updated && (
+            <>
+              <Clock size={16} />
+              <Typography color="text.secondary" variant="caption">
+                {formatMessage(
+                  {
+                    id: 'apiCard.updated',
+                    defaultMessage: 'Updated {relative}',
+                    description:
+                      'Card footer timestamp; {relative} is a phrase such as "3 hours ago".',
+                  },
+                  { relative: relativeTime(updated) }
+                )}
+              </Typography>
+            </>
+          )}
+        </Stack>
+        {onDelete && (
+          <Tooltip title="Delete">
+            <IconButton
+              aria-label={formatMessage(
+                {
+                  id: 'apiCard.delete',
+                  defaultMessage: 'Delete {apiName}',
+                  description: 'Accessible label for deleting an API from API card',
+                },
+                { apiName: api.displayName }
+              )}
+              className={DELETE_CLASS}
+              onClick={(event) => {
+                event.stopPropagation();
+                onDelete(api);
+              }}
+              size="small"
+              sx={(theme) => ({
+                opacity: 0,
+                transition: theme.transitions.create(['opacity', 'color']),
+                '&:hover': { color: 'error.main' },
+              })}
+            >
+              <Trash2 size={18} />
+            </IconButton>
+          </Tooltip>
+        )}
+      </CardActions>
+    </Card>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/components/RestApiChips.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/components/RestApiChips.tsx
new file mode 100644
index 0000000000..e8450ffa83
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/components/RestApiChips.tsx
@@ -0,0 +1,158 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Box, Chip, Stack, Typography, useTheme } from '@wso2/oxygen-ui';
+import type { Theme } from '@wso2/oxygen-ui';
+import { Globe, Lock } from '@wso2/oxygen-ui-icons-react';
+
+import {
+  deploymentMeta,
+  lifecycleMeta,
+  type ApiDeploymentState,
+  type ChipColor,
+  type LifeCycleStatus,
+} from '../restApiDisplay';
+
+/**
+ * The status marks shared by the API card (grid) and the API row (list), so the
+ * two views can never drift on what "Published" or "Active" looks like.
+ */
+
+/**
+ * Metadata chips run a step smaller than MUI's `size="small"`, which is scaled
+ * for chips you click. These are read-only marks sitting under a card title, so
+ * they take the theme's `caption` scale — one definition, applied by every chip
+ * here, and no font-size literal.
+ */
+const metaChipSx = { typography: 'caption' } as const;
+
+/** Resolves a semantic chip colour to the palette; `default` stays neutral. */
+const tone = (theme: Theme, color: ChipColor): string =>
+  color === 'default' ? theme.palette.text.secondary : theme.palette[color].main;
+
+/** Lifecycle of the API definition itself — Published, Created, Deprecated… */
+export function LifecycleChip({ status }: { status?: LifeCycleStatus }) {
+  const { color, label } = lifecycleMeta(status);
+
+  return (
+    <Chip
+      color={color}
+      label={label}
+      size="small"
+      sx={{ ...metaChipSx, flexShrink: 0 }}
+      variant="outlined"
+    />
+  );
+}
+
+/**
+ * The API's version, beside its name. Monospace so digits line up down a column
+ * of cards; the chip's size, radius and border are the theme's.
+ */
+export function VersionChip({ version }: { version?: string }) {
+  if (!version) return null;
+
+  return (
+    <Chip
+      label={`v${version}`}
+      size="small"
+      sx={{ flexShrink: 0, fontFamily: 'monospace', fontSize: "0.7rem" }}
+      variant="outlined"
+    />
+  );
+}
+
+/**
+ * Icons per transport. `https` earns the padlock because the distinction the
+ * user cares about is whether the hop is encrypted; anything the gateway
+ * reports that we have no icon for falls back to the neutral globe rather than
+ * rendering an iconless odd-one-out.
+ */
+const TRANSPORT_ICON: Record<string, typeof Globe> = {
+  http: Globe,
+  https: Lock,
+};
+
+/** Protocols the API is exposed over — `HTTP`, `HTTPS`. */
+export function TransportChips({ transports }: { transports: string[] }) {
+  return (
+    <>
+      {transports.map((transport) => {
+        const Icon = TRANSPORT_ICON[transport.toLowerCase()] ?? Globe;
+        return (
+          <Chip
+            icon={<Icon size={12} />}
+            key={transport}
+            label={transport.toUpperCase()}
+            size="small"
+            sx={{ ...metaChipSx, fontSize: "0.7rem" }}
+            variant="filled"
+          />
+        );
+      })}
+    </>
+  );
+}
+
+/**
+ * Runtime state across the API's gateways — a dot plus a word, deliberately
+ * quieter than the lifecycle chip since it sits in the card footer.
+ */
+export function DeploymentStateLabel({ state }: { state: ApiDeploymentState }) {
+  const theme = useTheme();
+  const { color, label } = deploymentMeta(state);
+  const main =
+    color === 'default' ? theme.palette.text.disabled : tone(theme, color);
+
+  return (
+    <Stack
+      alignItems="center"
+      direction="row"
+      spacing={0.875}
+      sx={{ color: main, flexShrink: 0 }}
+    >
+      <Box
+        sx={{ bgcolor: main, borderRadius: '50%', height: 8, width: 8 }}
+      />
+      <Typography sx={{ fontSize: 12.5, fontWeight: 500 }}>{label}</Typography>
+    </Stack>
+  );
+}
+
+/**
+ * Gateways the API is live on, labelled by gateway handle. Renders nothing when
+ * it is deployed nowhere — an empty rail reads as a loading glitch, and the
+ * neighbouring state label already says "Not deployed".
+ */
+export function GatewayChips({ gatewayIds }: { gatewayIds: string[] }) {
+  if (gatewayIds.length === 0) return null;
+
+  return (
+    <>
+      {gatewayIds.map((gatewayId) => (
+        <Chip
+          key={gatewayId}
+          label={gatewayId}
+          size="small"
+          sx={metaChipSx}
+          variant="outlined"
+        />
+      ))}
+    </>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyTab.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyTab.tsx
index 49d337b401..2403923aef 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyTab.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PolicyTab.tsx
@@ -42,7 +42,7 @@ import type {
 } from '../../../../../types/domain';
 import { AttachedPolicyList } from './AttachedPolicyList';
 import { AvailablePoliciesPanel } from './AvailablePoliciesPanel';
-import { SaveBar } from './SaveBar';
+import { SaveBar } from './components/SaveBar';
 import { methodColor, reorderPolicies } from './developEdit';
 import {
   getDraggedPolicy,
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.tsx
index 6664f04622..47dd844d35 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingTab.tsx
@@ -66,7 +66,7 @@ import {
   updateOperation,
   withRoutingEdits,
 } from './developEdit';
-import { SaveBar } from './SaveBar';
+import { SaveBar } from './components/SaveBar';
 
 // --- canvas geometry (fixed coords → SVG links need no DOM measurement) ---
 const OP_X = 4;
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/SaveBar.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/components/SaveBar.tsx
similarity index 92%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/SaveBar.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/components/SaveBar.tsx
index 0e5233a5e7..c64f058adf 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/SaveBar.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/components/SaveBar.tsx
@@ -18,8 +18,8 @@
 
 import { Box, Button } from '@wso2/oxygen-ui';
 
-import { useFooterHeight } from '../../../../appShell/useFooterHeight';
-import { stickyBottomBarSx } from '../../../../../theme';
+import { useFooterHeight } from '../../../../useFooterHeight';
+import { stickyBottomBarSx } from '../../../../../../theme';
 
 /** Layout for the save bar's own content; the sticky treatment is shared. */
 const saveBarLayoutSx = {
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ProgressBanner.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ProgressBanner.tsx
index b18d3ac6ae..74065b746a 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ProgressBanner.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/ProgressBanner.tsx
@@ -92,7 +92,7 @@ export function ProgressBanner({
       Icon: FlaskConical,
       complete: testComplete,
       onClick: () =>
-        navigate(routes.apiTest(orgHandle, projectHandler, apiHandler)),
+        navigate(routes.apiTestConsole(orgHandle, projectHandler, apiHandler)),
     },
     {
       key: 'publish',
@@ -100,7 +100,7 @@ export function ProgressBanner({
       Icon: Globe,
       complete: published,
       onClick: () =>
-        navigate(routes.apiManage(orgHandle, projectHandler, apiHandler)),
+        navigate(routes.apiManageLifecycle(orgHandle, projectHandler, apiHandler)),
     },
   ];
 
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/restApiDisplay.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/restApiDisplay.ts
new file mode 100644
index 0000000000..e1f232f215
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/restApiDisplay.ts
@@ -0,0 +1,189 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { RestApi } from '../../../../api/resources/restApis';
+import { useDeployments } from '../../../../api/resources/restApis/deployments/deployments.hooks';
+
+/**
+ * Display helpers for the spec's `RESTAPI` shape — the presentation half of
+ * `api/resources/restApis`, kept out of the resource layer so that layer stays
+ * transport + cache only.
+ *
+ * Everything here is derived from spec fields (`kind`, `lifeCycleStatus`,
+ * `operations`, `readOnly`) or from the API's deployments, so a spec change
+ * surfaces as a typecheck failure here rather than as a wrong label.
+ */
+
+export type ChipColor =
+  | 'default'
+  | 'error'
+  | 'info'
+  | 'secondary'
+  | 'success'
+  | 'warning';
+
+/* -------------------------------------------------------------------------- */
+/* Kind                                                                       */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * `kind` is an open string in the spec (default `RestApi`), not an enum, so this
+ * is a lookup with a humanizing fallback rather than an exhaustive record — a
+ * kind the console has never heard of still renders as words, not as raw
+ * PascalCase.
+ */
+const KIND_LABEL: Record<string, string> = {
+  AsyncApi: 'Async API',
+  GraphQL: 'GraphQL API',
+  LlmProxy: 'LLM Proxy',
+  McpProxy: 'MCP Proxy',
+  RestApi: 'REST API',
+};
+
+export const apiKindLabel = (kind?: string): string => {
+  if (!kind) return 'API';
+  return KIND_LABEL[kind] ?? kind.replace(/([a-z0-9])([A-Z])/g, '$1 $2');
+};
+
+/**
+ * Monogram for the card avatar: the first two letters of the API's name.
+ *
+ * Deliberately not word initials — "Echo Header API" reads as `EC`, not `EHA`.
+ * Two adjacent letters of the actual name are easier to match back to the title
+ * underneath it, and every API has at least one word while few have three.
+ */
+export const apiInitials = (displayName?: string): string =>
+  (displayName ?? '').replace(/[^\p{L}\p{N}]/gu, '').slice(0, 2).toUpperCase();
+
+/* -------------------------------------------------------------------------- */
+/* Lifecycle                                                                  */
+/* -------------------------------------------------------------------------- */
+
+export type LifeCycleStatus = NonNullable<RestApi['lifeCycleStatus']>;
+
+/**
+ * One tone per lifecycle state, so the chip's colour carries the status on its
+ * own — scanning a grid should not require reading every label.
+ *
+ * The tones follow the palette's own semantics rather than being picked by
+ * hue: `info` for the neutral-but-live states before publication, `success`
+ * once traffic is served, `warning` for a state callers must migrate off,
+ * `error` where calls are refused. `RETIRED` is the deliberate exception and
+ * stays neutral — an end-of-life API should recede, and a sixth saturated tone
+ * would compete with the states that still need attention.
+ */
+const LIFECYCLE_META: Record<
+  LifeCycleStatus,
+  { color: ChipColor; label: string }
+> = {
+  BLOCKED: { color: 'error', label: 'Blocked' },
+  CREATED: { color: 'info', label: 'Created' },
+  DEPRECATED: { color: 'warning', label: 'Deprecated' },
+  PUBLISHED: { color: 'success', label: 'Published' },
+  RETIRED: { color: 'default', label: 'Retired' },
+  STAGED: { color: 'secondary', label: 'Staged' },
+};
+
+export const lifecycleMeta = (
+  status?: LifeCycleStatus
+): { color: ChipColor; label: string } =>
+  status ? LIFECYCLE_META[status] : { color: 'default', label: 'Unknown' };
+
+/* -------------------------------------------------------------------------- */
+/* Deployment state                                                           */
+/* -------------------------------------------------------------------------- */
+
+export type ApiDeploymentState = 'ACTIVE' | 'SETTLING' | 'FAILED' | 'NONE';
+
+const DEPLOYMENT_META: Record<
+  ApiDeploymentState,
+  { color: ChipColor; label: string }
+> = {
+  ACTIVE: { color: 'success', label: 'Active' },
+  FAILED: { color: 'error', label: 'Failed' },
+  NONE: { color: 'default', label: 'Not deployed' },
+  SETTLING: { color: 'warning', label: 'Deploying' },
+};
+
+export const deploymentMeta = (
+  state: ApiDeploymentState
+): { color: ChipColor; label: string } => DEPLOYMENT_META[state];
+
+/**
+ * Runtime state of one API, derived from its deployments.
+ *
+ * A transition outranks a live deployment: an API that is deployed on one
+ * gateway while a second is still settling reads as "Deploying", because that
+ * is the state the user is waiting on. The underlying query polls itself until
+ * nothing is transitioning, so the card settles without the caller doing
+ * anything.
+ */
+export const useApiDeploymentState = (
+  restApiId?: string
+): {
+  gatewayIds: string[];
+  isPending: boolean;
+  state: ApiDeploymentState;
+} => {
+  const query = useDeployments(restApiId);
+  const deployments = query.data?.list ?? [];
+
+  const deployed = deployments.filter(
+    (deployment) => deployment.status === 'DEPLOYED'
+  );
+  const settling = deployments.some(
+    (deployment) =>
+      deployment.status === 'DEPLOYING' || deployment.status === 'UNDEPLOYING'
+  );
+  const failed = deployments.some(
+    (deployment) => deployment.status === 'FAILED'
+  );
+
+  const state: ApiDeploymentState = settling
+    ? 'SETTLING'
+    : deployed.length > 0
+      ? 'ACTIVE'
+      : failed
+        ? 'FAILED'
+        : 'NONE';
+
+  return {
+    gatewayIds: [...new Set(deployed.map((deployment) => deployment.gatewayId))],
+    isPending: query.isPending,
+    state,
+  };
+};
+
+/* -------------------------------------------------------------------------- */
+/* Search                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Client-side search over the fields a user would type: name, handle, context
+ * and description. The list endpoint has no query filter, so this narrows the
+ * page already in cache rather than issuing a request per keystroke.
+ */
+export const filterRestApis = (apis: RestApi[], search: string): RestApi[] => {
+  const term = search.trim().toLowerCase();
+  if (!term) return apis;
+  return apis.filter((api) =>
+    [api.displayName, api.id, api.context, api.description].some((field) =>
+      field?.toLowerCase().includes(term)
+    )
+  );
+};
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.test.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/utils/apiCapabilities.test.ts
similarity index 51%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.test.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/utils/apiCapabilities.test.ts
index 23e81354c4..6bd4535018 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.test.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/utils/apiCapabilities.test.ts
@@ -18,18 +18,27 @@
 
 import { describe, expect, it } from 'vitest';
 
-import type { Api } from '../../../../types/domain';
 import { getApiCapabilities } from './apiCapabilities';
+import { RestApi } from '../../../../../api/resources/restApis';
 
-const baseApi: Api = {
+const baseApi: RestApi = {
   id: 'component-1',
   projectId: 'project-1',
-  name: 'orders-api',
   displayName: 'Orders API',
-  handler: 'orders-api',
-  kind: 'API_PROXY',
-  status: 'ACTIVE',
-  httpBased: true,
+  // The spec's own kind and transport casing — `RestApi`, lowercase transports.
+  // `API_PROXY` was the pre-migration domain name and matched nothing.
+  kind: 'RestApi',
+  transport: ['http', 'https'],
+  description: 'API proxy for the Orders service',
+  context: '/orders',
+  version: '1.0.0',
+  createdAt: '2023-01-01T00:00:00Z',
+  updatedAt: '2023-01-02T00:00:00Z',
+  upstream: {
+    main: {
+      url: 'https://api.example.com/orders',
+    }
+  },
 };
 
 describe('getApiCapabilities', () => {
@@ -41,6 +50,26 @@ describe('getApiCapabilities', () => {
     expect(capabilities.testMode).toBe('curl');
   });
 
+  // The regression that hid the entire Test menu: `transport` arrives lowercase
+  // per the spec, and was being compared against upper-case constants, so
+  // `canTest` came back false for every API.
+  it.each([
+    ['lowercase, as the spec documents', ['http', 'https']],
+    ['upper-case', ['HTTP', 'HTTPS']],
+    ['mixed', ['Https']],
+  ])('treats %s transports as HTTP-reachable', (_name, transport) => {
+    expect(getApiCapabilities({ ...baseApi, transport }).canTest).toBe(true);
+  });
+
+  it('is not HTTP-reachable when no HTTP transport is offered', () => {
+    expect(getApiCapabilities({ ...baseApi, transport: ['ws'] }).canTest).toBe(
+      false
+    );
+    expect(getApiCapabilities({ ...baseApi, transport: [] }).testMode).toBe(
+      'none'
+    );
+  });
+
   it('disables component scoped entries without component data', () => {
     const capabilities = getApiCapabilities();
 
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/utils/apiCapabilities.ts
similarity index 67%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/apis/utils/apiCapabilities.ts
index e72e866293..e932d6fe3c 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/apiCapabilities.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/utils/apiCapabilities.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type { Api } from '../../../../types/domain';
+import { RestApi } from '../../../../../api/resources/restApis';
 
 export type ApiTestMode = 'curl' | 'none';
 
@@ -31,7 +31,8 @@ export type ApiCapabilities = {
   testMode: ApiTestMode;
 };
 
-export const getApiCapabilities = (component?: Api): ApiCapabilities => {
+export const getApiCapabilities = (component?: RestApi
+): ApiCapabilities => {
   if (!component) {
     return {
       canBuild: false,
@@ -45,10 +46,20 @@ export const getApiCapabilities = (component?: Api): ApiCapabilities => {
     };
   }
 
-  const isApiProxy = component.kind === 'API_PROXY';
+  const isApiProxy = component.kind === 'RestApi';
   const isService = component.kind === 'SERVICE';
   const isWebApp = component.kind === 'WEB_APP';
-  const isHttpReachable = component.httpBased !== false;
+  // Normalised before comparing, never compared raw: the spec documents
+  // `transport` in lowercase (`["http", "https"]`) while these constants are
+  // upper, so a raw `includes('HTTP')` never matched real data — which silently
+  // made `canTest` false for every API and hid the whole Test menu from the
+  // sidebar. Server-supplied tokens get normalised at the boundary, the same way
+  // HTTP methods do elsewhere in this repo.
+  const transports = (component.transport ?? []).map((value) =>
+    value.toUpperCase()
+  );
+  const isHttpReachable =
+    transports.includes('HTTP') || transports.includes('HTTPS');
 
   return {
     canBuild: isService || isWebApp,
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.tsx
index 82445bcc8f..bfa2db53cc 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.tsx
@@ -19,7 +19,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Box,
-  PageContent,
   PageTitle,
   TextField,
   Typography,
@@ -37,13 +36,27 @@ import {
   LoadingState,
 } from '../../../../components/StateViews';
 import { routes } from '../../../../routes/paths';
-import { GatewayDeployCard } from './GatewayDeployCard';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+import { GatewayDeployCard } from './components/GatewayDeployCard';
+import { FormattedMessage } from 'react-intl';
 
 /**
  * The deploy path, ai-workspace style: one expandable card per gateway with
  * a one-click Deploy (auto-named), per-gateway status and history.
  */
 export function DeployPage() {
+  return (
+    <ScopeGate
+      prompt="Deployments are made for a single API."
+      requires="api"
+      to={routes.apiDeploy}
+    >
+      <Deploy />
+    </ScopeGate>
+  );
+}
+
+function Deploy() {
   const { orgHandle = '' } = useParams();
   const navigate = useNavigate();
   const apiQuery = useApi();
@@ -100,12 +113,20 @@ export function DeployPage() {
   };
 
   return (
-    <PageContent>
+    <>
       <PageTitle>
-        <PageTitle.Header>Deploy {api.displayName}</PageTitle.Header>
+        <PageTitle.Header>
+          <FormattedMessage
+            id="appShell.deployPage.header"
+            defaultMessage='Deploy {apiName}'
+            values={{ apiName: api.displayName }}
+          />
+        </PageTitle.Header>
         <PageTitle.SubHeader>
-          Deploy the current working copy to a gateway, and manage existing
-          deployments.
+          <FormattedMessage
+            id="appShell.deployPage.subHeader"
+            defaultMessage='Deploy the current working copy to a gateway, and manage existing deployments.'
+          />
         </PageTitle.SubHeader>
       </PageTitle>
 
@@ -131,7 +152,12 @@ export function DeployPage() {
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
             {filteredGateways.length === 0 ? (
               <Box sx={{ color: 'text.secondary', p: 6, textAlign: 'center' }}>
-                <Typography>No gateways match your search</Typography>
+                <Typography>
+                  <FormattedMessage
+                    id="appShell.deployPage.noGatewaysMatchSearch"
+                    defaultMessage="No gateways match your search"
+                  />
+                </Typography>
               </Box>
             ) : (
               filteredGateways.map((gateway) => (
@@ -152,6 +178,6 @@ export function DeployPage() {
           </Box>
         </>
       )}
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentHistory.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentHistory.tsx
index e09c06c273..64ec99877f 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentHistory.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentHistory.tsx
@@ -23,7 +23,7 @@ import { RefreshCw } from '@wso2/oxygen-ui-icons-react';
 import { useDeleteGatewayDeployment } from '../../../../api/hooks/useMvpQueries';
 import { useNotifications } from '../../../../components/Notifications';
 import type { Api, GatewayDeployment } from '../../../../types/domain';
-import { GatewayDeploymentRow } from './GatewayDeploymentRow';
+import { GatewayDeploymentRow } from './components/GatewayDeploymentRow';
 
 type GatewayDeploymentHistoryProps = {
   api: Api;
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployCard.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeployCard.tsx
similarity index 96%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployCard.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeployCard.tsx
index 1e7fc56131..6ba5c2e53f 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployCard.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeployCard.tsx
@@ -29,16 +29,16 @@ import {
 } from '@wso2/oxygen-ui';
 import { ChevronDown } from '@wso2/oxygen-ui-icons-react';
 
-import { useDeployApi } from '../../../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../../../components/Notifications';
-import type { Api, Gateway, GatewayDeployment } from '../../../../types/domain';
+import { useDeployApi } from '../../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../../components/Notifications';
+import type { Api, Gateway, GatewayDeployment } from '../../../../../types/domain';
 import { GatewayDeployEnvCard } from './GatewayDeployEnvCard';
-import { GatewayDeploymentHistory } from './GatewayDeploymentHistory';
+import { GatewayDeploymentHistory } from '../GatewayDeploymentHistory';
 import {
   currentDeploymentFor,
   deploymentsForGateway,
   nextDeploymentName,
-} from './gatewayDeployUtils';
+} from '../utils/gatewayDeployUtils';
 
 type GatewayDeployCardProps = {
   api: Api;
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployEnvCard.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeployEnvCard.tsx
similarity index 97%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployEnvCard.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeployEnvCard.tsx
index c54546eb78..0b961eef87 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeployEnvCard.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeployEnvCard.tsx
@@ -30,10 +30,10 @@ import { PackageOpen, SquarePen } from '@wso2/oxygen-ui-icons-react';
 import {
   useRestoreGatewayDeployment,
   useUndeployGatewayDeployment,
-} from '../../../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../../../components/Notifications';
-import type { Api, Gateway, GatewayDeployment } from '../../../../types/domain';
-import { relativeTime } from '../../../../utils/relativeTime';
+} from '../../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../../components/Notifications';
+import type { Api, Gateway, GatewayDeployment } from '../../../../../types/domain';
+import { relativeTime } from '../../../../../utils/relativeTime';
 import { GatewayDeploymentSelector } from './GatewayDeploymentSelector';
 
 const STATUS_REASON_MESSAGES: Record<string, string> = {
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentRow.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeploymentRow.tsx
similarity index 97%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentRow.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeploymentRow.tsx
index 3315238c9c..481969f882 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentRow.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeploymentRow.tsx
@@ -22,8 +22,8 @@ import { XCircle } from '@wso2/oxygen-ui-icons-react';
 import type {
   GatewayDeployment,
   GatewayDeploymentStatus,
-} from '../../../../types/domain';
-import { relativeTime } from '../../../../utils/relativeTime';
+} from '../../../../../types/domain';
+import { relativeTime } from '../../../../../utils/relativeTime';
 
 const STATUS_CHIP: Record<
   GatewayDeploymentStatus,
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentSelector.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeploymentSelector.tsx
similarity index 96%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentSelector.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeploymentSelector.tsx
index 8f2cc7c6e1..cd0b6b6f60 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/GatewayDeploymentSelector.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/components/GatewayDeploymentSelector.tsx
@@ -30,10 +30,10 @@ import {
 } from '@wso2/oxygen-ui';
 import { ChevronLeft } from '@wso2/oxygen-ui-icons-react';
 
-import { useRestoreGatewayDeployment } from '../../../../api/hooks/useMvpQueries';
-import { useNotifications } from '../../../../components/Notifications';
-import type { Api, GatewayDeployment } from '../../../../types/domain';
-import { relativeTime } from '../../../../utils/relativeTime';
+import { useRestoreGatewayDeployment } from '../../../../../api/hooks/useMvpQueries';
+import { useNotifications } from '../../../../../components/Notifications';
+import type { Api, GatewayDeployment } from '../../../../../types/domain';
+import { relativeTime } from '../../../../../utils/relativeTime';
 import { DeploymentStatusChip } from './GatewayDeploymentRow';
 
 type GatewayDeploymentSelectorProps = {
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/gatewayDeployUtils.ts b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/utils/gatewayDeployUtils.ts
similarity index 97%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/deploy/gatewayDeployUtils.ts
rename to portals/api-control-plane/src/pages/appShell/appShellPages/deploy/utils/gatewayDeployUtils.ts
index 939d6ea030..e0098d5d39 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/gatewayDeployUtils.ts
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/utils/gatewayDeployUtils.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import type { Gateway, GatewayDeployment } from '../../../../types/domain';
+import type { Gateway, GatewayDeployment } from '../../../../../types/domain';
 
 /** Newest-first by createdAt (platform stamps it on every deployment). */
 export const byNewestFirst = (a: GatewayDeployment, b: GatewayDeployment) => {
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayDetailPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayDetailPage.tsx
index c2b90945c0..6a0ab47201 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayDetailPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewayDetailPage.tsx
@@ -46,7 +46,7 @@ import { runtimeConfig } from '../../../../config/runtime';
 import { routes } from '../../../../routes/paths';
 import type { Gateway } from '../../../../types/domain';
 import { relativeTime } from '../../../../utils/relativeTime';
-import { CopyableCommand } from './CopyableCommand';
+import { CopyableCommand } from './components/CopyableCommand';
 
 const TOKEN_PLACEHOLDER = '<your-gateway-token>';
 const ZIP = 'wso2apip-api-gateway';
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewaysPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewaysPage.tsx
index ca4029638b..21b4307397 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewaysPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/GatewaysPage.tsx
@@ -23,7 +23,6 @@ import {
   Button,
   IconButton,
   InputAdornment,
-  PageContent,
   PageTitle,
   Stack,
   TextField,
@@ -56,6 +55,7 @@ import type { Gateway } from '../../../../types/domain';
 import { relativeTime } from '../../../../utils/relativeTime';
 import { groupGatewaysByEnvironment } from './gatewayEnvironments';
 import './gatewaysUi.css';
+import { FormattedMessage } from 'react-intl';
 
 const MODE_LABEL: Record<Gateway['mode'], string> = {
   'self-hosted': 'Self-hosted',
@@ -314,11 +314,19 @@ export function GatewaysPage() {
   const groups = groupGatewaysByEnvironment(filtered);
 
   return (
-    <PageContent fullWidth>
+    <>
       <PageTitle>
-        <PageTitle.Header>API Gateways</PageTitle.Header>
+        <PageTitle.Header>
+          <FormattedMessage
+            id="gateways.title"
+            defaultMessage="Gateways"
+          />
+        </PageTitle.Header>
         <PageTitle.SubHeader>
-          Provision and manage the gateways that expose your APIs.
+          <FormattedMessage
+            id="gateways.subtitle"
+            defaultMessage="Provision and manage self-hosted or WSO2-managed gateways to expose your APIs to clients."
+          />
         </PageTitle.SubHeader>
         <PageTitle.Actions>
           <Button
@@ -327,7 +335,10 @@ export function GatewaysPage() {
             sx={{ borderRadius: 5 }}
             variant="contained"
           >
-            Provision gateway
+            <FormattedMessage
+              id="gateways.provisionButton"
+              defaultMessage="Provision gateway"
+            />
           </Button>
         </PageTitle.Actions>
       </PageTitle>
@@ -406,9 +417,15 @@ export function GatewaysPage() {
               size="small"
               value={filter}
             >
-              <ToggleButton value="all">All</ToggleButton>
-              <ToggleButton value="managed">Managed</ToggleButton>
-              <ToggleButton value="self">Self-hosted</ToggleButton>
+              <ToggleButton value="all">
+                <FormattedMessage id="gateways.filter.all" defaultMessage="All" />
+              </ToggleButton>
+              <ToggleButton value="managed">
+                <FormattedMessage id="gateways.filter.managed" defaultMessage="Managed" />
+              </ToggleButton>
+              <ToggleButton value="self">
+                <FormattedMessage id="gateways.filter.self" defaultMessage="Self-hosted" />
+              </ToggleButton>
             </ToggleButtonGroup>
           </Stack>
 
@@ -470,6 +487,6 @@ export function GatewaysPage() {
           )}
         </Stack>
       )}
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/CopyableCommand.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/gateways/components/CopyableCommand.tsx
similarity index 100%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/gateways/CopyableCommand.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/gateways/components/CopyableCommand.tsx
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/insights/CompliancePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/insights/CompliancePage.tsx
new file mode 100644
index 0000000000..d6f8063337
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/insights/CompliancePage.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormattedMessage } from 'react-intl';
+
+import { ComingSoon } from '../../../../components/ComingSoon';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+
+export function CompliancePage() {
+  return (
+    <ScopeGate prompt="Compliance is assessed per API." requires="api" to={routes.apiInsightsCompliance}>
+      <ComingSoon
+        feature={
+          <FormattedMessage
+            id="appShell.compliancePage.feature"
+            defaultMessage="Compliance reporting for this API"
+          />
+        }
+      />
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/insights/InsightsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/insights/InsightsPage.tsx
new file mode 100644
index 0000000000..a8f4535585
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/insights/InsightsPage.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormattedMessage } from 'react-intl';
+
+import { ComingSoon } from '../../../../components/ComingSoon';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+
+export function InsightsPage() {
+  return (
+    <ScopeGate prompt="Insights are reported per API." requires="api" to={routes.apiInsightsApi}>
+      <ComingSoon
+        feature={
+          <FormattedMessage
+            id="appShell.insightsPage.feature"
+            defaultMessage="API insights"
+          />
+        }
+      />
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/manage/LifeCyclePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/manage/LifeCyclePage.tsx
new file mode 100644
index 0000000000..0cfcab66e1
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/manage/LifeCyclePage.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormattedMessage } from 'react-intl';
+
+import { ComingSoon } from '../../../../components/ComingSoon';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+
+export function LifeCyclePage() {
+  return (
+    <ScopeGate prompt="The lifecycle applies to a single API." requires="api" to={routes.apiManageLifecycle}>
+      <ComingSoon
+        feature={
+          <FormattedMessage
+            id="appShell.lifeCyclePage.feature"
+            defaultMessage="Lifecycle management for this API"
+          />
+        }
+      />
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/manage/ManagePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/manage/ManagePage.tsx
deleted file mode 100644
index 3556050501..0000000000
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/manage/ManagePage.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Button, Card, CardContent, Stack, TextField, PageContent, PageTitle } from '@wso2/oxygen-ui';
-
-import { useApi } from '../../../../api/hooks/useMvpQueries';
-import { ErrorState, LoadingState } from '../../../../components/StateViews';
-
-export function ManagePage() {
-  const apiQuery = useApi();
-
-  if (apiQuery.isLoading) return <LoadingState label="Loading manage view" />;
-  if (!apiQuery.data) return <ErrorState title="API not found" />;
-
-  return (
-    <PageContent>
-      <PageTitle>
-        <PageTitle.Header>Manage {apiQuery.data.displayName}</PageTitle.Header>
-        <PageTitle.SubHeader>Core editable metadata only for MVP.</PageTitle.SubHeader>
-      </PageTitle>
-      <Card variant="outlined">
-        <CardContent>
-          <Stack spacing={3}>
-            <TextField disabled label="Display name" value={apiQuery.data.displayName} />
-            <TextField disabled label="Description" multiline minRows={3} value={apiQuery.data.description || ''} />
-            <TextField disabled label="Visibility" value={apiQuery.data.httpBased ? 'HTTP based' : 'Internal'} />
-            <Button disabled variant="contained">Save changes</Button>
-          </Stack>
-        </CardContent>
-      </Card>
-    </PageContent>
-  );
-}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/manage/MonetizePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/manage/MonetizePage.tsx
new file mode 100644
index 0000000000..b56cccc9ee
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/manage/MonetizePage.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormattedMessage } from 'react-intl';
+
+import { ComingSoon } from '../../../../components/ComingSoon';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+
+export function MonetizePage() {
+  return (
+    <ScopeGate prompt="Monetization is configured per API." requires="api" to={routes.apiManageMonetize}>
+      <ComingSoon
+        feature={
+          <FormattedMessage
+            id="appShell.monetizePage.feature"
+            defaultMessage="Monetization for this API"
+          />
+        }
+      />
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/observability/AlertsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/observability/AlertsPage.tsx
new file mode 100644
index 0000000000..17fa922639
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/observability/AlertsPage.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormattedMessage } from 'react-intl';
+
+import { ComingSoon } from '../../../../components/ComingSoon';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+
+export function AlertsPage() {
+  return (
+    <ScopeGate prompt="Alerts are configured per API." requires="api" to={routes.apiObservabilityAlerts}>
+      <ComingSoon
+        feature={
+          <FormattedMessage
+            id="appShell.alertsPage.feature"
+            defaultMessage="Observability alerts for this API"
+          />
+        }
+      />
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/observability/MetricsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/observability/MetricsPage.tsx
new file mode 100644
index 0000000000..f0302a480d
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/observability/MetricsPage.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormattedMessage } from 'react-intl';
+
+import { ComingSoon } from '../../../../components/ComingSoon';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+
+export function MetricsPage() {
+  return (
+    <ScopeGate prompt="Metrics are reported per API." requires="api" to={routes.apiObservabilityMetrics}>
+      <ComingSoon
+        feature={
+          <FormattedMessage
+            id="appShell.metricsPage.feature"
+            defaultMessage="Observability metrics for this API"
+          />
+        }
+      />
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/logs/RuntimeLogsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/observability/RuntimeLogsPage.tsx
similarity index 50%
rename from portals/api-control-plane/src/pages/appShell/appShellPages/logs/RuntimeLogsPage.tsx
rename to portals/api-control-plane/src/pages/appShell/appShellPages/observability/RuntimeLogsPage.tsx
index f14b702594..37a3227ed1 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/logs/RuntimeLogsPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/observability/RuntimeLogsPage.tsx
@@ -16,27 +16,54 @@
  * under the License.
  */
 
-import { Card, CardContent, CodeBlock, PageContent, PageTitle } from '@wso2/oxygen-ui';
+import { Card, CardContent, CodeBlock, PageTitle } from '@wso2/oxygen-ui';
 import { useParams } from 'react-router-dom';
 
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+import { FormattedMessage } from 'react-intl';
+
 export function RuntimeLogsPage() {
-  const { projectHandler } = useParams();
+  return (
+    <ScopeGate
+      prompt="Runtime logs are streamed per API."
+      requires="api"
+      to={routes.apiObservabilityLogs}
+    >
+      <RuntimeLogs />
+    </ScopeGate>
+  );
+}
+
+function RuntimeLogs() {
+  const { apiHandler } = useParams();
 
   return (
-    <PageContent>
+    <>
       <PageTitle>
-        <PageTitle.Header>Runtime logs</PageTitle.Header>
-        <PageTitle.SubHeader>Project-level logs entry for {projectHandler}.</PageTitle.SubHeader>
+        <PageTitle.Header>
+          <FormattedMessage
+            id="appShell.runtimeLogsPage.header"
+            defaultMessage="Observability"
+          />
+        </PageTitle.Header>
+        <PageTitle.SubHeader>
+          <FormattedMessage
+            id="appShell.runtimeLogsPage.subHeader"
+            defaultMessage="Runtime logs for {apiHandler}."
+            values={{ apiHandler }}
+          />
+        </PageTitle.SubHeader>
       </PageTitle>
       <Card variant="outlined">
         <CardContent>
           <CodeBlock
             language="bash"
             code={`[info] Runtime log streaming integration point
-[info] Advanced filters and live tail are deferred from the MVP`}
+            [info] Advanced filters and live tail are deferred from the MVP`}
           />
         </CardContent>
       </Card>
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/OrganizationHomePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/OrganizationHomePage.tsx
index d97c3fcabb..d12bdab678 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/OrganizationHomePage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/OrganizationHomePage.tsx
@@ -17,19 +17,13 @@
  */
 
 import {
-  Box,
-  Card,
-  CardContent,
   Grid,
-  PageContent,
-  Stack,
-  Typography,
 } from '@wso2/oxygen-ui';
 import { Boxes, Layers } from '@wso2/oxygen-ui-icons-react';
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useOrganization } from '../../../../api/hooks/useMvpQueries';
+import {useOrganization} from '../../../../api/resources/organizations';
 import { QuickStartBanner } from '../../../../components/cards/QuickStartBanner';
 import {
   SummaryCardSection,
@@ -40,31 +34,15 @@ import { routes } from '../../../../routes/paths';
 import { useConsoleScope } from '../../../../scope/ConsoleScopeProvider';
 import { relativeTime } from '../../../../utils/relativeTime';
 import { NewProjectDialog } from '../projects/NewProjectDialog';
-import { FormattedMessage } from 'react-intl';
 import ExploreMoreCard from './ExploreMoreCard';
 
-const GETTING_STARTED = [
-  {
-    title: '1. Open a project',
-    description: 'Projects group the APIs you build and operate.',
-  },
-  {
-    title: '2. Create APIs',
-    description: 'Add APIs inside a project.',
-  },
-  {
-    title: '3. Deploy, test & observe',
-    description: 'Use deploy, test, manage, and runtime logs per API.',
-  },
-];
-
 export function OrganizationHomePage() {
   const navigate = useNavigate();
   const { isLoading, organization, organizations, params, projects, projectsError } =
     useConsoleScope();
   const orgHandle = params.orgHandle || '';
   const [createOpen, setCreateOpen] = useState(false);
-  const organizationQuery = useOrganization();
+  const organizationQuery = useOrganization(orgHandle);
   const currentOrganization =
     organizationQuery.data || organization || organizations[0];
 
@@ -77,11 +55,9 @@ export function OrganizationHomePage() {
             new Date(left.updatedAt || 0).getTime()
         )
         .map((project) => ({
-          id: project.handler,
-          title: project.name,
-          description: project.region
-            ? `@${project.handler} · ${project.region}`
-            : `@${project.handler}`,
+          id: project.id,
+          title: project.displayName || project.id,
+          description: project.description,
           meta: project.updatedAt ? relativeTime(project.updatedAt) : undefined,
         })),
     [projects]
@@ -97,23 +73,21 @@ export function OrganizationHomePage() {
   }
 
   return (
-    <PageContent fullWidth>
+    <>
       <Grid container spacing={3} sx={{ m: 0, width: '100%' }}>
         <Grid size={{ xs: 12 }}>
           <QuickStartBanner
             actionLabel="View projects"
             description={
-              currentOrganization.description ||
               'Projects organize the APIs you build.'
             }
             icon={<Layers size={22} />}
             onAction={() => navigate(routes.projects(orgHandle))}
-            title={`Welcome to ${currentOrganization.name}`}
+            title={`Welcome to ${currentOrganization.displayName}`}
           />
         </Grid>
-
-        <Grid size={{ xs: 12, md: 7 }}>
-          <SummaryCardSection
+          
+        <SummaryCardSection
             addLabel="New project"
             emptyActionLabel="Create project"
             emptyDescription="Create a project to organize and manage your APIs."
@@ -130,31 +104,6 @@ export function OrganizationHomePage() {
             title="Projects"
             totalCount={projects.length}
           />
-        </Grid>
-
-        <Grid size={{ xs: 12, md: 5 }}>
-          <Card sx={{ height: '100%', minHeight: 300 }}>
-            <CardContent>
-              <Typography sx={{ fontWeight: 700 }} variant="h6">
-                <FormattedMessage
-                  id="organization.home.getStarted"
-                  defaultMessage="Get started"
-                  description="Organization home page get started section title"
-                />  
-              </Typography>
-              <Stack spacing={2} sx={{ mt: 2 }}>
-                {GETTING_STARTED.map((step) => (
-                  <Box key={step.title}>
-                    <Typography sx={{ fontWeight: 600 }}>{step.title}</Typography>
-                    <Typography color="text.secondary" variant="body2">
-                      {step.description}
-                    </Typography>
-                  </Box>
-                ))}
-              </Stack>
-            </CardContent>
-          </Card>
-        </Grid>
 
         <Grid size={{ xs: 12 }}>
           <ExploreMoreCard />
@@ -168,6 +117,6 @@ export function OrganizationHomePage() {
         open={createOpen}
         orgHandle={orgHandle}
       />
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectHomePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectHomePage.tsx
index e9adfd3435..af071c5f5e 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectHomePage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectHomePage.tsx
@@ -22,7 +22,6 @@ import {
   CardContent,
   Chip,
   Grid,
-  PageContent,
   Stack,
   Typography,
 } from '@wso2/oxygen-ui';
@@ -41,7 +40,11 @@ import { ErrorState, LoadingState } from '../../../../components/StateViews';
 import { routes } from '../../../../routes/paths';
 import type { Api } from '../../../../types/domain';
 import { relativeTime } from '../../../../utils/relativeTime';
+import { FormattedMessage } from 'react-intl';
 
+// No `ScopeGate`: this page is the project tier of the sidebar's Overview item,
+// which degrades to the organization tier rather than linking here without a
+// project — so it is never reached out of scope.
 export function ProjectHomePage() {
   const { orgHandle = '', projectHandler = '' } = useParams();
   const navigate = useNavigate();
@@ -78,7 +81,7 @@ export function ProjectHomePage() {
   const project = projectQuery.data;
 
   return (
-    <PageContent fullWidth>
+    <>
       <Grid container spacing={3} sx={{ m: 0, width: '100%' }}>
         <Grid size={{ xs: 12 }}>
           <QuickStartBanner
@@ -116,7 +119,10 @@ export function ProjectHomePage() {
           <Card sx={{ width: '100%' }}>
             <CardContent>
               <Typography sx={{ fontWeight: 700 }} variant="h6">
-                Project details
+                <FormattedMessage
+                  id="appShell.projectHomePage.projectDetails"
+                  defaultMessage="Project details"
+                />
               </Typography>
               <Stack direction="row" sx={{ flexWrap: 'wrap', gap: 1, mt: 2 }}>
                 <Chip label={`@${project.handler}`} size="small" variant="outlined" />
@@ -147,7 +153,10 @@ export function ProjectHomePage() {
                 !project.repository &&
                 !project.createdDate && (
                   <Typography color="text.secondary" sx={{ mt: 1 }} variant="body2">
-                    No additional project metadata available.
+                    <FormattedMessage
+                      id="appShell.projectHomePage.noAdditionalMetadata"
+                      defaultMessage="No additional project metadata available."
+                    />
                   </Typography>
                 )}
               <Box sx={{ mt: 2 }}>
@@ -159,13 +168,17 @@ export function ProjectHomePage() {
                   sx={{ cursor: 'pointer', display: 'inline-block', fontWeight: 600 }}
                   variant="body2"
                 >
-                  View all APIs ({components.length})
+                  <FormattedMessage
+                    id="appShell.projectHomePage.viewAllAPIs"
+                    defaultMessage="View all APIs ({count})"
+                    values={{ count: components.length }}
+                  />
                 </Typography>
               </Box>
             </CardContent>
           </Card>
         </Grid>
       </Grid>
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx
index f003f6039e..a265563c9d 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx
@@ -21,7 +21,6 @@ import {
   Button,
   InputAdornment,
   MenuItem,
-  PageContent,
   PageTitle,
   Stack,
   TablePagination,
@@ -298,13 +297,7 @@ export function ProjectListPage() {
   }
 
   return (
-    // A flex column at least as tall as the scroll area, so the results section
-    // below can claim the leftover height and hold the pagination bar down at the
-    // bottom edge instead of letting it ride up under a short grid.
-    <PageContent
-      fullWidth
-      sx={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}
-    >
+    <>
       <PageTitle>
         <PageTitle.Header>
           <FormattedMessage
@@ -313,12 +306,12 @@ export function ProjectListPage() {
             />
         </PageTitle.Header>
         <PageTitle.SubHeader>
-          {organization?.name
+          {organization?.displayName
             ? (
               <FormattedMessage
                 defaultMessage="Project workspaces in {organizationName}."
                 id="project.list.subHeader.withOrganization"
-                values={{ organizationName: organization.name }}
+                values={{ organizationName: organization.displayName }}
               />
             )
             : (
@@ -478,6 +471,6 @@ export function ProjectListPage() {
         open={toDelete !== null}
         title={intl.formatMessage(messages.deleteTitle)}
       />
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
index 7bf121d030..e0ea9f54bd 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
@@ -16,17 +16,21 @@
  * under the License.
  */
 
-import { Card, CardContent, PageContent, PageTitle, Typography } from '@wso2/oxygen-ui';
+import { Card, CardContent, PageTitle, Typography } from '@wso2/oxygen-ui';
 import { useParams } from 'react-router-dom';
 
+
+// No `ScopeGate`: Settings is the one page with no scope requirement. The sidebar
+// links to the organization-level path, and a project card's gear deep-links the
+// same page for one project — so it renders at whatever scope it is reached in.
 export function SettingsPage() {
-  const { projectHandler } = useParams();
+  const { orgHandle, projectHandler } = useParams();
 
   return (
-    <PageContent>
+    <>
       <PageTitle>
         <PageTitle.Header>Settings</PageTitle.Header>
-        <PageTitle.SubHeader>Minimal settings overview for {projectHandler}.</PageTitle.SubHeader>
+        <PageTitle.SubHeader>Minimal settings overview for {projectHandler ?? orgHandle}.</PageTitle.SubHeader>
       </PageTitle>
       <Card variant="outlined">
         <CardContent>
@@ -37,6 +41,6 @@ export function SettingsPage() {
           </Typography>
         </CardContent>
       </Card>
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/test/ApiChatPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/test/ApiChatPage.tsx
new file mode 100644
index 0000000000..bf07ff9a12
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/test/ApiChatPage.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormattedMessage } from 'react-intl';
+
+import { ComingSoon } from '../../../../components/ComingSoon';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+
+export function ApiChatPage() {
+  return (
+    <ScopeGate prompt="API chat runs against a single API." requires="api" to={routes.apiTestChat}>
+      <ComingSoon
+        feature={
+          <FormattedMessage
+            id="appShell.apiChatPage.feature"
+            defaultMessage="Testing this API through chat"
+          />
+        }
+      />
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/test/ApiConsolePage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/test/ApiConsolePage.tsx
new file mode 100644
index 0000000000..a28b7d522d
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/test/ApiConsolePage.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FormattedMessage } from 'react-intl';
+
+import { ComingSoon } from '../../../../components/ComingSoon';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+
+export function ApiConsolePage() {
+  return (
+    <ScopeGate prompt="The API console runs against a single API." requires="api" to={routes.apiTestConsole}>
+      <ComingSoon
+        feature={
+          <FormattedMessage
+            id="appShell.apiConsolePage.feature"
+            defaultMessage="An interactive API console"
+          />
+        }
+      />
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/test/TestPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/test/TestPage.tsx
index 91acb2af2e..b8a2b29608 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/test/TestPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/test/TestPage.tsx
@@ -20,14 +20,28 @@ import {
   Card,
   CardContent,
   CodeBlock,
-  PageContent,
   PageTitle,
 } from '@wso2/oxygen-ui';
 
 import { useApiProxy, useApi } from '../../../../api/hooks/useMvpQueries';
 import { ErrorState, LoadingState } from '../../../../components/StateViews';
+import { routes } from '../../../../routes/paths';
+import { ScopeGate } from '../../../../scope/ScopeGate';
+import { FormattedMessage } from 'react-intl';
 
 export function TestPage() {
+  return (
+    <ScopeGate
+      prompt="The curl console runs against a single API."
+      requires="api"
+      to={routes.apiTestCurl}
+    >
+      <Test />
+    </ScopeGate>
+  );
+}
+
+function Test() {
   const apiQuery = useApi();
   const apiProxyQuery = useApiProxy(apiQuery.data?.id);
 
@@ -37,11 +51,20 @@ export function TestPage() {
   const context = apiProxyQuery.data?.context || `/${apiQuery.data.name}`;
 
   return (
-    <PageContent>
+    <>
       <PageTitle>
-        <PageTitle.Header>Test {apiQuery.data.displayName}</PageTitle.Header>
+        <PageTitle.Header>
+          <FormattedMessage
+            id="appShell.testPage.header"
+            defaultMessage="Test {apiName}"
+            values={{ apiName: apiQuery.data.displayName }}
+          /> 
+        </PageTitle.Header>
         <PageTitle.SubHeader>
-          cURL test console for HTTP/API proxies
+          <FormattedMessage
+            id="appShell.testPage.subHeader"
+            defaultMessage="Use the following curl command to test the API."
+          />
         </PageTitle.SubHeader>
       </PageTitle>
       <Card variant="outlined">
@@ -49,10 +72,10 @@ export function TestPage() {
           <CodeBlock
             language="bash"
             code={`curl -X GET "$API_BASE_URL${context}" \\
-  -H "Authorization: Bearer <token>"`}
+            -H "Authorization: Bearer <token>"`}
           />
         </CardContent>
       </Card>
-    </PageContent>
+    </>
   );
 }
diff --git a/portals/api-control-plane/src/routes/AppRoutes.tsx b/portals/api-control-plane/src/routes/AppRoutes.tsx
index 1e4c039342..134da25c14 100644
--- a/portals/api-control-plane/src/routes/AppRoutes.tsx
+++ b/portals/api-control-plane/src/routes/AppRoutes.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { lazy } from 'react';
+import { lazy, type ReactNode } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import { AuthCallbackPage } from '../pages/auth/AuthCallbackPage';
@@ -31,11 +31,11 @@ import {
 import { ConsoleScopeProvider } from '../scope/ConsoleScopeProvider';
 import AppLayout from '../pages/appShell/AppLayout';
 import {
-  buildScopedExtensionPath,
+  extensionScopedPaths,
   type ApiControlPlaneExtension,
 } from '../extensions';
 import { ProtectedRoute } from './ProtectedRoute';
-import { routes } from './paths';
+import { apiScopedPaths, projectScopedPaths, routes } from './paths';
 
 // Code-split the authenticated feature pages so they are not pulled into the
 // initial (login) bundle.
@@ -90,11 +90,53 @@ const DeployPage = lazy(() =>
 const TestPage = lazy(() =>
   import('../pages/appShell/appShellPages/test/TestPage').then((m) => ({ default: m.TestPage }))
 );
-const ManagePage = lazy(() =>
-  import('../pages/appShell/appShellPages/manage/ManagePage').then((m) => ({ default: m.ManagePage }))
+const ApiConsolePage = lazy(() =>
+  import('../pages/appShell/appShellPages/test/ApiConsolePage').then((m) => ({
+    default: m.ApiConsolePage,
+  }))
+);
+const ApiChatPage = lazy(() =>
+  import('../pages/appShell/appShellPages/test/ApiChatPage').then((m) => ({
+    default: m.ApiChatPage,
+  }))
+);
+const AlertsPage = lazy(() =>
+  import('../pages/appShell/appShellPages/observability/AlertsPage').then((m) => ({
+    default: m.AlertsPage,
+  }))
+);
+const MetricsPage = lazy(() =>
+  import('../pages/appShell/appShellPages/observability/MetricsPage').then((m) => ({
+    default: m.MetricsPage,
+  }))
+);
+const MonetizePage = lazy(() =>
+  import('../pages/appShell/appShellPages/manage/MonetizePage').then((m) => ({
+    default: m.MonetizePage,
+  }))
+);
+const LifeCyclePage = lazy(() =>
+  import('../pages/appShell/appShellPages/manage/LifeCyclePage').then((m) => ({
+    default: m.LifeCyclePage,
+  }))
+);
+const InsightsPage = lazy(() =>
+  import('../pages/appShell/appShellPages/insights/InsightsPage').then((m) => ({
+    default: m.InsightsPage,
+  }))
+);
+const CompliancePage = lazy(() =>
+  import('../pages/appShell/appShellPages/insights/CompliancePage').then((m) => ({
+    default: m.CompliancePage,
+  }))
+);
+const AdminPage = lazy(() =>
+  import('../pages/appShell/appShellPages/admin/AdminPage').then((m) => ({
+    default: m.AdminPage,
+  }))
 );
 const RuntimeLogsPage = lazy(() =>
-  import('../pages/appShell/appShellPages/logs/RuntimeLogsPage').then((m) => ({
+  import('../pages/appShell/appShellPages/observability/RuntimeLogsPage').then((m) => ({
     default: m.RuntimeLogsPage,
   }))
 );
@@ -108,18 +150,21 @@ export type AppRoutesProps = {
   extensions?: readonly ApiControlPlaneExtension[];
 };
 
+/**
+ * One `<Route>` per path a scoped page answers on — its fully-scoped path plus
+ * the scope-less aliases the sidebar links to when the project (or API) isn't
+ * selected yet. The same element renders at all of them; the `ScopeGate` inside
+ * it shows a picker instead of the page body until scope is complete.
+ */
+const scopedRoutes = (paths: string[], element: ReactNode) =>
+  paths.map((path) => <Route key={path} path={path} element={element} />);
+
 export function AppRoutes({ extensions = [] }: AppRoutesProps) {
-  const extensionRoutes = extensions.map((extension) => (
-    <Route
-      key={extension.id}
-      path={buildScopedExtensionPath(extension.level, extension.routePath, {
-        apiHandler: ':apiHandler',
-        orgHandle: ':orgHandle',
-        projectHandler: ':projectHandler',
-      })}
-      element={extension.element}
-    />
-  ));
+  const extensionRoutes = extensions.flatMap((extension) =>
+    extensionScopedPaths(extension.level, extension.routePath).map((path) => (
+      <Route key={path} path={path} element={extension.element} />
+    ))
+  );
 
   return (
     <Routes>
@@ -144,15 +189,55 @@ export function AppRoutes({ extensions = [] }: AppRoutesProps) {
           <Route path={routes.gateways()} element={<GatewaysPage />} />
           <Route path={routes.newGateway()} element={<GatewayCreatePage />} />
           <Route path={routes.gateway()} element={<GatewayDetailPage />} />
+          {/*
+            Project and API overview take a single fully-scoped path each: they
+            are the deeper tiers of the sidebar's Overview item, which degrades
+            to a shallower tier instead of linking here un-scoped, so there is no
+            alias to register.
+          */}
           <Route path={routes.projectHome()} element={<ProjectHomePage />} />
-          <Route path={routes.apis()} element={<ApiListPage />} />
-          <Route path={routes.newApi()} element={<ApiCreatePage />} />
           <Route path={routes.api()} element={<ApiDetailPage />} />
-          <Route path={routes.apiDeploy()} element={<DeployPage />} />
-          <Route path={routes.apiTest()} element={<TestPage />} />
-          <Route path={routes.apiManage()} element={<ManagePage />} />
-          <Route path={routes.runtimeLogs()} element={<RuntimeLogsPage />} />
+          {scopedRoutes(projectScopedPaths(routes.apis), <ApiListPage />)}
+          <Route path={routes.newApi()} element={<ApiCreatePage />} />
+          {/*
+            Test, Observability and Manage are sidebar parents with no page of
+            their own — only their children are routed. Out of API scope a parent
+            links to its first child's alias, so `.../test` and friends are never
+            produced and are not registered.
+          */}
+          {scopedRoutes(apiScopedPaths(routes.apiTestConsole), <ApiConsolePage />)}
+          {scopedRoutes(apiScopedPaths(routes.apiTestCurl), <TestPage />)}
+          {scopedRoutes(apiScopedPaths(routes.apiTestChat), <ApiChatPage />)}
+          {scopedRoutes(apiScopedPaths(routes.apiDeploy), <DeployPage />)}
+          {scopedRoutes(apiScopedPaths(routes.apiInsightsApi), <InsightsPage />)}
+          {scopedRoutes(
+            apiScopedPaths(routes.apiInsightsCompliance),
+            <CompliancePage />
+          )}
+          {scopedRoutes(
+            apiScopedPaths(routes.apiObservabilityAlerts),
+            <AlertsPage />
+          )}
+          {scopedRoutes(
+            apiScopedPaths(routes.apiObservabilityMetrics),
+            <MetricsPage />
+          )}
+          {scopedRoutes(
+            apiScopedPaths(routes.apiObservabilityLogs),
+            <RuntimeLogsPage />
+          )}
+          {scopedRoutes(
+            apiScopedPaths(routes.apiManageMonetize),
+            <MonetizePage />
+          )}
+          {scopedRoutes(
+            apiScopedPaths(routes.apiManageLifecycle),
+            <LifeCyclePage />
+          )}
+          {scopedRoutes(apiScopedPaths(routes.apiAdmin), <AdminPage />)}
+          {/* Two entry points, one page, no scope requirement either way. */}
           <Route path={routes.settings()} element={<SettingsPage />} />
+          <Route path={routes.projectSettings()} element={<SettingsPage />} />
           {extensionRoutes}
           <Route path="*" element={<NotFoundPage />} />
         </Route>
diff --git a/portals/api-control-plane/src/routes/paths.test.ts b/portals/api-control-plane/src/routes/paths.test.ts
new file mode 100644
index 0000000000..62d2b7e511
--- /dev/null
+++ b/portals/api-control-plane/src/routes/paths.test.ts
@@ -0,0 +1,128 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { describe, expect, it } from 'vitest';
+
+import { getRouteParamsFromPathname } from '../scope/consoleRouteParams';
+import { routes, type ApiPathBuilder, type ProjectPathBuilder } from './paths';
+
+const ORG = 'acme';
+const PROJECT = 'orders';
+const API = 'api-1';
+
+// Only the pages whose scope-less aliases `AppRoutes` actually registers, i.e.
+// the ones a sidebar item can link to before its scope is known. Overview's own
+// tiers (`projectHome`, `api`) are absent deliberately: that item degrades to a
+// shallower tier instead of linking un-scoped, so those aliases don't exist.
+const PROJECT_LEVEL: [string, ProjectPathBuilder][] = [
+  ['apis', routes.apis],
+];
+
+const API_LEVEL: [string, ApiPathBuilder][] = [
+  ['apiTestConsole', routes.apiTestConsole],
+  ['apiTestCurl', routes.apiTestCurl],
+  ['apiTestChat', routes.apiTestChat],
+  ['apiDeploy', routes.apiDeploy],
+  ['apiInsightsApi', routes.apiInsightsApi],
+  ['apiInsightsCompliance', routes.apiInsightsCompliance],
+  ['apiObservabilityAlerts', routes.apiObservabilityAlerts],
+  ['apiObservabilityMetrics', routes.apiObservabilityMetrics],
+  ['apiObservabilityLogs', routes.apiObservabilityLogs],
+  ['apiManageMonetize', routes.apiManageMonetize],
+  ['apiManageLifecycle', routes.apiManageLifecycle],
+  ['apiAdmin', routes.apiAdmin],
+];
+
+/*
+ * `ConsoleScopeProvider` reads scope back out of the pathname, and the sidebar's
+ * scope-less aliases are URLs it has to read as "no project/API selected". If an
+ * alias left a `projects` or `apis` segment with the page's suffix behind it, the
+ * suffix would come back as a handle, `ScopeGate` would think scope was complete,
+ * and the page would query a project that doesn't exist. These tests hold the two
+ * halves — builder and parser — to that contract.
+ */
+describe('scope-less aliases round-trip through the scope parser', () => {
+  it.each(PROJECT_LEVEL)('%s: a project-less alias has no handles', (_id, build) => {
+    const params = getRouteParamsFromPathname(build(ORG, null));
+
+    expect(params.orgHandle).toBe(ORG);
+    expect(params.projectHandler).toBeUndefined();
+    expect(params.apiHandler).toBeUndefined();
+  });
+
+  it.each(PROJECT_LEVEL)('%s: the scoped path still yields its project', (_id, build) => {
+    expect(getRouteParamsFromPathname(build(ORG, PROJECT))).toMatchObject({
+      orgHandle: ORG,
+      projectHandler: PROJECT,
+    });
+  });
+
+  it.each(API_LEVEL)('%s: an api-less alias keeps the project only', (_id, build) => {
+    const params = getRouteParamsFromPathname(build(ORG, PROJECT, null));
+
+    expect(params.projectHandler).toBe(PROJECT);
+    expect(params.apiHandler).toBeUndefined();
+  });
+
+  it.each(API_LEVEL)('%s: a fully scope-less alias has no handles', (_id, build) => {
+    const params = getRouteParamsFromPathname(build(ORG, null, null));
+
+    expect(params.projectHandler).toBeUndefined();
+    expect(params.apiHandler).toBeUndefined();
+  });
+
+  it.each(API_LEVEL)('%s: the scoped path still yields both handles', (_id, build) => {
+    expect(
+      getRouteParamsFromPathname(build(ORG, PROJECT, API))
+    ).toMatchObject({ apiHandler: API, orgHandle: ORG, projectHandler: PROJECT });
+  });
+});
+
+describe('path builders', () => {
+  it('keeps every alias distinct from every other page at the same scope', () => {
+    const aliases = [
+      ...PROJECT_LEVEL.map(([, build]) => build(ORG, null)),
+      ...API_LEVEL.flatMap(([, build]) => [
+        build(ORG, PROJECT, null),
+        build(ORG, null, null),
+      ]),
+      // Pages that keep a fully-scoped path of their own.
+      routes.organizationHome(ORG),
+      routes.projects(ORG),
+      routes.gateways(ORG),
+      routes.settings(ORG),
+      routes.projectSettings(ORG, PROJECT),
+      routes.projectHome(ORG, PROJECT),
+      routes.api(ORG, PROJECT, API),
+      ...PROJECT_LEVEL.map(([, build]) => build(ORG, PROJECT)),
+      ...API_LEVEL.map(([, build]) => build(ORG, PROJECT, API)),
+      routes.newApi(ORG, PROJECT),
+    ];
+
+    expect(new Set(aliases).size).toBe(aliases.length);
+  });
+
+  it('does not put a page suffix where an API handle is read', () => {
+    // `.../apis/deploy` must stay the detail path of an API handled `deploy`,
+    // never the Deploy page awaiting an API.
+    expect(routes.apiDeploy(ORG, PROJECT, null)).not.toContain('/apis/');
+    expect(routes.api(ORG, PROJECT, 'deploy')).toBe(
+      `/organizations/${ORG}/projects/${PROJECT}/apis/deploy`
+    );
+  });
+});
diff --git a/portals/api-control-plane/src/routes/paths.ts b/portals/api-control-plane/src/routes/paths.ts
index 313aad8df6..314bee61b6 100644
--- a/portals/api-control-plane/src/routes/paths.ts
+++ b/portals/api-control-plane/src/routes/paths.ts
@@ -16,6 +16,102 @@
  * under the License.
  */
 
+/**
+ * A project or API handle for a path builder.
+ *
+ * `null` means "this scope is not selected yet". The builder then replaces the
+ * unresolved scope's segments with `SELECT_SCOPE_SEGMENT`, producing the
+ * **scope-less alias** of the same page — the URL the sidebar links to when the
+ * user clicks, say, Deploy while no API is in scope. The page still mounts at
+ * that URL; its `ScopeGate` renders a scope picker instead of the page body
+ * until the handle is filled in.
+ *
+ * Omitting the argument entirely keeps the `:param` placeholder, which is what
+ * route registration and the sidebar's `match` predicates want.
+ */
+export type ScopeHandle = string | null;
+
+/**
+ * Marks where a page's path runs out of resolved scope.
+ *
+ * Reserved: no organization, project or API handle may take this value, and no
+ * page suffix may start with it.
+ */
+export const SELECT_SCOPE_SEGMENT = 'select-scope';
+
+const join = (...segments: (string | undefined)[]) =>
+  `/${segments.filter(Boolean).join('/')}`;
+
+/**
+ * Builds a **project-level** page's path, marking an unresolved project:
+ *
+ * ```
+ * projectPath('acme', 'orders', 'apis') -> /organizations/acme/projects/orders/apis
+ * projectPath('acme', null,     'apis') -> /organizations/acme/select-scope/apis
+ * ```
+ *
+ * The marker earns its place by keeping the alias unambiguous in both
+ * directions:
+ *
+ * - `ConsoleScopeProvider` reads scope back out of the pathname positionally —
+ *   the segment after `projects` is the project handle, the one after `apis` is
+ *   the API handle. Merely dropping the handle would leave
+ *   `/organizations/acme/projects/apis`, read as *project `apis`*, so the gate
+ *   would believe a project was selected and the page would query one that
+ *   doesn't exist. The marker keeps `projects`/`apis` out of the alias entirely,
+ *   so those lookups correctly find nothing.
+ * - Nothing can collide. Dropping the segments instead would put project
+ *   Settings at `/organizations/:orgHandle/settings` and project Home at
+ *   `/organizations/:orgHandle/home`, which is `organizationHome`.
+ */
+export const projectPath = (
+  orgHandle: string,
+  projectHandler: ScopeHandle,
+  suffix?: string
+): string =>
+  projectHandler
+    ? join('organizations', orgHandle, 'projects', projectHandler, suffix)
+    : join('organizations', orgHandle, SELECT_SCOPE_SEGMENT, suffix);
+
+/**
+ * Builds an **API-level** page's path. The marker replaces whichever scope runs
+ * out first, so one alias covers "no project yet" and another "project known,
+ * API still to pick":
+ *
+ * ```
+ * apiPath('acme', 'orders', 'a-1', 'deploy') -> /organizations/acme/projects/orders/apis/a-1/deploy
+ * apiPath('acme', 'orders', null,  'deploy') -> /organizations/acme/projects/orders/select-scope/deploy
+ * apiPath('acme', null,     null,  'deploy') -> /organizations/acme/select-scope/deploy
+ * ```
+ */
+export const apiPath = (
+  orgHandle: string,
+  projectHandler: ScopeHandle,
+  apiHandler: ScopeHandle,
+  suffix?: string
+): string => {
+  if (!projectHandler) return projectPath(orgHandle, null, suffix);
+  if (!apiHandler) {
+    return join(
+      'organizations',
+      orgHandle,
+      'projects',
+      projectHandler,
+      SELECT_SCOPE_SEGMENT,
+      suffix
+    );
+  }
+  return join(
+    'organizations',
+    orgHandle,
+    'projects',
+    projectHandler,
+    'apis',
+    apiHandler,
+    suffix
+  );
+};
+
 export const routes = {
   login: '/login',
   authCallback: '/login/callback',
@@ -34,40 +130,166 @@ export const routes = {
     `/organizations/${orgHandle}/gateways/new`,
   gateway: (orgHandle = ':orgHandle', gatewayId = ':gatewayId') =>
     `/organizations/${orgHandle}/gateways/${gatewayId}`,
+  // Project and API overview are the deeper tiers of the sidebar's Overview
+  // item, which degrades to a shallower tier rather than gating (see
+  // `adaptive` in navigation/navigationRegistry.tsx) — so neither is ever built
+  // without its handle, and neither needs a scope-less alias.
   projectHome: (orgHandle = ':orgHandle', projectHandler = ':projectHandler') =>
-    `/organizations/${orgHandle}/projects/${projectHandler}/home`,
-  apis: (orgHandle = ':orgHandle', projectHandler = ':projectHandler') =>
-    `/organizations/${orgHandle}/projects/${projectHandler}/apis`,
-  newApi: (
+    projectPath(orgHandle, projectHandler, 'home'),
+  apis: (
     orgHandle = ':orgHandle',
-    projectHandler = ':projectHandler'
-  ) => `/organizations/${orgHandle}/projects/${projectHandler}/apis/new`,
+    projectHandler: ScopeHandle = ':projectHandler'
+  ) => projectPath(orgHandle, projectHandler, 'apis'),
+  // Only reachable from inside a project (the APIs page's own create button),
+  // so it has no scope-less alias.
+  newApi: (orgHandle = ':orgHandle', projectHandler = ':projectHandler') =>
+    projectPath(orgHandle, projectHandler, 'apis/new'),
   api: (
     orgHandle = ':orgHandle',
     projectHandler = ':projectHandler',
     apiHandler = ':apiHandler'
-  ) =>
-    `/organizations/${orgHandle}/projects/${projectHandler}/apis/${apiHandler}`,
+  ) => apiPath(orgHandle, projectHandler, apiHandler),
   apiDeploy: (
     orgHandle = ':orgHandle',
-    projectHandler = ':projectHandler',
-    apiHandler = ':apiHandler'
-  ) =>
-    `/organizations/${orgHandle}/projects/${projectHandler}/apis/${apiHandler}/deploy`,
-  apiTest: (
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'deploy'),
+  // Test, Observability and Manage are sidebar *parents*: in API scope they open
+  // a submenu rather than a page, so only their children have paths. There is no
+  // bare `.../test` route — nothing links to one.
+  apiTestConsole: (
     orgHandle = ':orgHandle',
-    projectHandler = ':projectHandler',
-    apiHandler = ':apiHandler'
-  ) =>
-    `/organizations/${orgHandle}/projects/${projectHandler}/apis/${apiHandler}/test`,
-  apiManage: (
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'test/console'),
+  apiTestCurl: (
     orgHandle = ':orgHandle',
-    projectHandler = ':projectHandler',
-    apiHandler = ':apiHandler'
-  ) =>
-    `/organizations/${orgHandle}/projects/${projectHandler}/apis/${apiHandler}/manage`,
-  runtimeLogs: (orgHandle = ':orgHandle', projectHandler = ':projectHandler') =>
-    `/organizations/${orgHandle}/projects/${projectHandler}/observe/runtimelogs`,
-  settings: (orgHandle = ':orgHandle', projectHandler = ':projectHandler') =>
-    `/organizations/${orgHandle}/projects/${projectHandler}/settings`,
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'test/curl'),
+  apiTestChat: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'test/chat'),
+  apiManageMonetize: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'manage/monetize'),
+  apiManageLifecycle: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'manage/lifecycle'),
+  // The doubled `api` is the child's own label ("API Insights") under the
+  // Insights parent, not a stutter in the naming scheme.
+  apiInsightsApi: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'insights/api'),
+  apiInsightsCompliance: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'insights/compliance'),
+  apiObservabilityAlerts: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'observability/alerts'),
+  apiObservabilityMetrics: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'observability/metrics'),
+  // Runtime logs, scoped to one API. Was project-wide (`observe/runtimelogs`)
+  // when the sidebar had a project section; it now sits under Observability.
+  apiObservabilityLogs: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'observability/logs'),
+  apiAdmin: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'admin'),
+  // Settings is the one page with no scope requirement, so the sidebar links to
+  // the organization-level path and it renders whatever the scope. It needs no
+  // scope-less alias for the same reason: there is nothing to select.
+  settings: (orgHandle = ':orgHandle') => `/organizations/${orgHandle}/settings`,
+  // The same page, deep-linked for one project — the gear on a project card.
+  // Kept as its own builder rather than a `ScopeHandle` on `settings` because
+  // these two are alternative entry points, not a scoped/scope-less pair.
+  projectSettings: (
+    orgHandle = ':orgHandle',
+    projectHandler = ':projectHandler'
+  ) => projectPath(orgHandle, projectHandler, 'settings'),
 };
+
+export type ProjectPathBuilder = (
+  orgHandle: string,
+  projectHandler: ScopeHandle
+) => string;
+
+export type ApiPathBuilder = (
+  orgHandle: string,
+  projectHandler: ScopeHandle,
+  apiHandler: ScopeHandle
+) => string;
+
+/**
+ * Any `routes.*` page builder, whatever depth it takes — an org-level one
+ * ignores the trailing arguments.
+ *
+ * This is the shape the sidebar's scope-adaptive items need: one item pointing at
+ * an org-, project- and API-level page, each called with as many handles as its
+ * own level takes. Deliberately `string | undefined` rather than `ScopeHandle`:
+ * every builder here accepts it, and the adaptive item only ever calls a tier
+ * whose handles it already has, so `null` never comes up.
+ */
+export type ScopedPathBuilder = (
+  orgHandle: string,
+  projectHandler?: string,
+  apiHandler?: string
+) => string;
+
+/**
+ * Every route pattern a project-level page answers on: its fully-scoped path
+ * plus the scope-less alias the sidebar links to when no project is selected.
+ *
+ * `AppRoutes` registers these and `navigationRegistry` matches against them, so
+ * the route table and the sidebar highlight can't drift apart — both are
+ * generated from the same builder.
+ */
+export const projectScopedPaths = (build: ProjectPathBuilder): string[] => [
+  build(':orgHandle', ':projectHandler'),
+  build(':orgHandle', null),
+];
+
+/**
+ * Same as `projectScopedPaths`, for API-level pages. Three patterns, because an
+ * API-level page can be missing the API alone or both the API and the project.
+ */
+export const apiScopedPaths = (build: ApiPathBuilder): string[] => [
+  build(':orgHandle', ':projectHandler', ':apiHandler'),
+  ...apiScopeSelectPaths(build),
+];
+
+/**
+ * Just the scope-less aliases of an API-level page — `apiScopedPaths` without the
+ * fully-scoped path.
+ *
+ * This is what a submenu *parent* matches on. A parent has no page of its own, so
+ * out of API scope it links to its first child's alias, and matching those
+ * aliases is what keeps it highlighted while the `ScopeGate` asks for an API.
+ * Deliberately not the fully-scoped path: once scope resolves, the child owns the
+ * highlight (Oxygen leaves an expanded parent unhighlighted by design), and
+ * matching both would make parent and child claim active at once.
+ */
+export const apiScopeSelectPaths = (build: ApiPathBuilder): string[] => [
+  build(':orgHandle', ':projectHandler', null),
+  build(':orgHandle', null, null),
+];
diff --git a/portals/api-control-plane/src/scope/ConsoleScopeContext.ts b/portals/api-control-plane/src/scope/ConsoleScopeContext.ts
index c68564cc89..13ae68702d 100644
--- a/portals/api-control-plane/src/scope/ConsoleScopeContext.ts
+++ b/portals/api-control-plane/src/scope/ConsoleScopeContext.ts
@@ -18,8 +18,10 @@
 
 import { createContext, useContext } from 'react';
 
-import type { ApiCapabilities } from '../pages/appShell/appShellPages/apis/apiCapabilities';
-import type { Api, Organization, Project } from '../types/domain';
+import type { ApiCapabilities } from '../pages/appShell/appShellPages/apis/utils/apiCapabilities';
+import { RestApi } from '../api/resources/restApis';
+import { Organization } from '../api/resources/organizations';
+import { Project } from '../api/resources/projects';
 
 export type ConsoleRouteParams = {
   apiHandler?: string;
@@ -44,7 +46,7 @@ export type ActiveScope = {
 export type ConsoleScope = {
   activeScope: ActiveScope;
   capabilities: ApiCapabilities;
-  component?: Api;
+  component?: RestApi;
   isApiScope: boolean;
   isLoading: boolean;
   isOrganizationScope: boolean;
diff --git a/portals/api-control-plane/src/scope/ConsoleScopeProvider.tsx b/portals/api-control-plane/src/scope/ConsoleScopeProvider.tsx
index f3c633859c..32b4dbf1b6 100644
--- a/portals/api-control-plane/src/scope/ConsoleScopeProvider.tsx
+++ b/portals/api-control-plane/src/scope/ConsoleScopeProvider.tsx
@@ -19,20 +19,18 @@
 import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 
-import {
-  useApi,
-  useOrganizations,
-  useProject,
-  useProjects,
-} from '../api/hooks/useMvpQueries';
 import { ApiScopeProvider } from '../api/core/ApiScopeProvider';
 import { useAuth } from '../contexts/auth/AuthProvider';
-import { getApiCapabilities } from '../pages/appShell/appShellPages/apis/apiCapabilities';
+import { getApiCapabilities } from '../pages/appShell/appShellPages/apis/utils/apiCapabilities';
 import {
   ConsoleScopeContext,
   type ConsoleRouteParams,
   type ConsoleScope,
 } from './ConsoleScopeContext';
+import { getRouteParamsFromPathname } from './consoleRouteParams';
+import { useRestApi } from '../api/resources/restApis';
+import { useOrganizations } from '../api/resources/organizations';
+import { useProject, useProjects } from '../api/resources/projects';
 
 // Re-export so existing imports from this module keep working.
 export {
@@ -42,34 +40,6 @@ export {
   type ConsoleScope,
 } from './ConsoleScopeContext';
 
-const getRouteParamsFromPathname = (pathname: string): ConsoleRouteParams => {
-  const segments = pathname.split('/').filter(Boolean);
-  const organizationsIndex = segments.indexOf('organizations');
-  if (organizationsIndex < 0) return {};
-
-  const orgHandle = segments[organizationsIndex + 1];
-  const projectsIndex = segments.indexOf('projects');
-  const projectHandler =
-    projectsIndex >= 0 ? segments[projectsIndex + 1] : undefined;
-  const apisIndex = segments.indexOf('apis');
-  const apiHandler =
-    apisIndex >= 0 ? segments[apisIndex + 1] : undefined;
-  const environmentsIndex = segments.indexOf('environments');
-  const environmentId =
-    environmentsIndex >= 0 ? segments[environmentsIndex + 1] : undefined;
-  const deploymentsIndex = segments.indexOf('deployments');
-  const deploymentId =
-    deploymentsIndex >= 0 ? segments[deploymentsIndex + 1] : undefined;
-
-  return {
-    apiHandler,
-    deploymentId,
-    environmentId,
-    orgHandle,
-    projectHandler,
-  };
-};
-
 export function ConsoleScopeProvider({ children }: { children: ReactNode }) {
   const routeParams = useParams<ConsoleRouteParams>();
   const location = useLocation();
@@ -144,24 +114,22 @@ export function ConsoleScopeProvider({ children }: { children: ReactNode }) {
 
   const queryOrgHandle =
     tokenReadyOrgHandle === params.orgHandle ? params.orgHandle : undefined;
+
+  const apiQuery = useRestApi(params.apiHandler, {orgId: queryOrgHandle });
   const organizationsQuery = useOrganizations();
-  const projectsQuery = useProjects(queryOrgHandle);
-  const projectQuery = useProject(queryOrgHandle, params.projectHandler);
-  const apiQuery = useApi(
-    queryOrgHandle,
-    params.projectHandler,
-    params.apiHandler
-  );
+  const projectsQuery = useProjects({}, {orgId: queryOrgHandle });
+  const projectQuery = useProject(params.projectHandler, {orgId: queryOrgHandle });
 
   const organization = useMemo(
     () =>
-      organizationsQuery.data?.find((item) => item.handle === params.orgHandle),
-    [organizationsQuery.data, params.orgHandle]
+      organizationsQuery.data?.list?.find((item) => item.id === params.orgHandle),
+    [organizationsQuery.data?.list, params.orgHandle]
   );
 
   const project =
     projectQuery.data ||
-    projectsQuery.data?.find((item) => item.handler === params.projectHandler);
+    projectsQuery.data?.list?.find((item) => item.id === params.projectHandler);
+
   const component = apiQuery.data;
   const capabilities = useMemo(
     () => getApiCapabilities(component),
@@ -190,10 +158,10 @@ export function ConsoleScopeProvider({ children }: { children: ReactNode }) {
       isOrganizationScope: Boolean(params.orgHandle),
       isProjectScope: Boolean(params.projectHandler),
       organization,
-      organizations: organizationsQuery.data || [],
+      organizations: organizationsQuery.data?.list || [],
       params,
       project,
-      projects: projectsQuery.data || [],
+      projects: projectsQuery.data?.list || [],
       projectsError: orgTokenError || projectsQuery.error || undefined,
     }),
     [
diff --git a/portals/api-control-plane/src/scope/ScopeGate.test.tsx b/portals/api-control-plane/src/scope/ScopeGate.test.tsx
new file mode 100644
index 0000000000..adf68cfaa9
--- /dev/null
+++ b/portals/api-control-plane/src/scope/ScopeGate.test.tsx
@@ -0,0 +1,211 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { UseQueryResult } from '@tanstack/react-query';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { ApiError } from '../api/core/errors';
+import { organizations } from '../api/mocks/data';
+import type {
+  RestApi,
+  RestApiListResponse,
+} from '../api/resources/restApis';
+import { routes } from '../routes/paths';
+import { makeConsoleScope } from '../test/mockScope';
+import { renderWithProviders, screen } from '../test/utils';
+
+vi.mock('../api/resources/restApis', async (importActual) => ({
+  ...(await importActual<typeof import('../api/resources/restApis')>()),
+  useRestApis: vi.fn(),
+}));
+
+import { useRestApis } from '../api/resources/restApis';
+import { ScopeGate } from './ScopeGate';
+
+const API_LIST = [
+  {
+    context: '/orders',
+    displayName: 'Orders API',
+    id: 'orders-api',
+    projectId: 'retail-apis',
+    upstream: { main: { url: 'https://backend.example.com' } },
+    version: '1.0.0',
+  },
+] as RestApi[];
+
+const listQuery = (list: RestApi[]) =>
+  ({
+    data: { count: list.length, list },
+    isPending: false,
+  }) as UseQueryResult<RestApiListResponse, ApiError>;
+
+// `makeConsoleScope` seeds itself from these fixtures, and `ScopeGate` reads the
+// org handle from scope rather than from the URL — so the routes under test have
+// to be built from the same handles.
+const ORG = organizations[0].id;
+
+/*
+ * The project list is supplied by the test rather than taken from
+ * `makeConsoleScope`'s defaults, because the picker reads `displayName`/`id` (the
+ * generated shape) while `api/mocks/data` still carries `name`/`handler`. Pinning
+ * it here keeps these tests about the gate rather than about which fixture shape
+ * happens to be current.
+ */
+const PROJECT_OPTION = { displayName: 'Retail APIs', id: 'retail-apis' };
+const PROJECT = PROJECT_OPTION.id;
+const projectScope = () =>
+  makeConsoleScope({
+    isProjectScope: false,
+    project: undefined,
+    projects: [PROJECT_OPTION] as ReturnType<
+      typeof makeConsoleScope
+    >['projects'],
+  });
+
+/** The select's own control — `getByLabelText` also matches the visible label. */
+const selectFor = (name: string) => screen.getByRole('combobox', { name });
+
+/**
+ * An option inside an open select. Matched by role rather than text: once a
+ * value is chosen the select renders it again in its own display, so plain text
+ * matches two nodes.
+ */
+const optionFor = (name: RegExp) => screen.getByRole('option', { name });
+
+/** Renders the current pathname so a test can assert where submitting landed. */
+function Located() {
+  return <span>{`at ${useLocation().pathname}`}</span>;
+}
+
+describe('ScopeGate', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useRestApis).mockReturnValue(listQuery(API_LIST));
+  });
+
+  const renderGate = (
+    route: string,
+    gate: React.ReactNode,
+    scope: ReturnType<typeof makeConsoleScope>
+  ) =>
+    renderWithProviders(
+      <Routes>
+        <Route path="*" element={gate} />
+      </Routes>,
+      { route, scope }
+    );
+
+  it('renders the page once the required scope is on the route', () => {
+    renderGate(
+      routes.apis(ORG, PROJECT),
+      <ScopeGate requires="project" to={routes.apis}>
+        <span>page body</span>
+      </ScopeGate>,
+      makeConsoleScope()
+    );
+
+    expect(screen.getByText('page body')).toBeInTheDocument();
+  });
+
+  it('prompts for a project instead of the page when none is selected', () => {
+    renderGate(
+      routes.apis(ORG, null),
+      <ScopeGate
+        prompt="APIs are created and managed at the project level."
+        requires="project"
+        to={routes.apis}
+      >
+        <span>page body</span>
+      </ScopeGate>,
+      projectScope()
+    );
+
+    expect(
+      screen.getByText('APIs are created and managed at the project level.')
+    ).toBeInTheDocument();
+    expect(screen.queryByText('page body')).not.toBeInTheDocument();
+  });
+
+  it('navigates to the fully scoped page after picking a project', async () => {
+    const { user } = renderGate(
+      routes.apis(ORG, null),
+      <>
+        <ScopeGate requires="project" to={routes.apis}>
+          <span>page body</span>
+        </ScopeGate>
+        <Located />
+      </>,
+      projectScope()
+    );
+
+    await user.click(selectFor('Project'));
+    await user.click(optionFor(/Retail APIs/));
+    await user.click(screen.getByRole('button', { name: 'Go to Project Level' }));
+
+    expect(
+      screen.getByText(`at ${routes.apis(ORG, PROJECT)}`)
+    ).toBeInTheDocument();
+  });
+
+  it('asks for both handles on an api-level page outside any project', async () => {
+    const { user } = renderGate(
+      routes.apiDeploy(ORG, null, null),
+      <>
+        <ScopeGate requires="api" to={routes.apiDeploy}>
+          <span>page body</span>
+        </ScopeGate>
+        <Located />
+      </>,
+      projectScope()
+    );
+
+    // Disabled until a project narrows the API list.
+    const continueButton = screen.getByRole('button', {
+      name: 'Go to API Level',
+    });
+    expect(continueButton).toBeDisabled();
+
+    await user.click(selectFor('Project'));
+    await user.click(optionFor(/Retail APIs/));
+    await user.click(selectFor('API'));
+    await user.click(optionFor(/Orders API/));
+    await user.click(continueButton);
+
+    expect(
+      screen.getByText(
+        `at ${routes.apiDeploy(ORG, PROJECT, 'orders-api')}`
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('asks only for the API when the route already has a project', () => {
+    renderGate(
+      routes.apiDeploy(ORG, PROJECT, null),
+      <ScopeGate requires="api" to={routes.apiDeploy}>
+        <span>page body</span>
+      </ScopeGate>,
+      makeConsoleScope()
+    );
+
+    expect(selectFor('API')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('combobox', { name: 'Project' })
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/portals/api-control-plane/src/scope/ScopeGate.tsx b/portals/api-control-plane/src/scope/ScopeGate.tsx
new file mode 100644
index 0000000000..687c1db627
--- /dev/null
+++ b/portals/api-control-plane/src/scope/ScopeGate.tsx
@@ -0,0 +1,336 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useState, type ReactNode } from 'react';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  ComplexSelect,
+  FormControl,
+  FormLabel,
+  MenuItem,
+  PageContent,
+  Select,
+  Stack,
+  Typography,
+} from '@wso2/oxygen-ui';
+import { Boxes, Layers } from '@wso2/oxygen-ui-icons-react';
+import { useNavigate } from 'react-router-dom';
+
+import { useRestApis } from '../api/resources/restApis';
+import { ErrorState, LoadingState } from '../components/StateViews';
+import { routes, type ApiPathBuilder } from '../routes/paths';
+import { useConsoleScope } from './ConsoleScopeContext';
+import { FormattedMessage } from 'react-intl';
+
+/** The scope a page needs before it can render anything meaningful. */
+export type RequiredScope = 'project' | 'api';
+
+export type ScopeGateProps = {
+  children: ReactNode;
+  /**
+   * Sentence naming what this page manages and at which level, e.g.
+   * `"APIs are created and managed at the project level."` Supplied per page so
+   * the copy reads naturally (a generated one can't get singular/plural right).
+   */
+  prompt?: string;
+  /** Scope the page needs. */
+  requires: RequiredScope;
+  /**
+   * This page's own path builder —> pass the `routes.*` function the page is
+   * registered under (e.g. `routes.apiDeploy`). Called with the handles the
+   * user picks, so submitting lands on this same page, now fully scoped.
+   */
+  to: ApiPathBuilder;
+};
+
+/**
+ * Renders `children` only once the route carries the scope the page needs,
+ * and a scope picker until then.
+ *
+ * Every sidebar item is always visible, including ones for pages that live
+ * deeper than the current scope — clicking Deploy from an org-level page is a
+ * normal thing to do. Those items link to the page's *scope-less alias* (see
+ * `ScopeHandle` in `routes/paths.ts`), so the page mounts, this gate takes
+ * over, and picking a project (and API) navigates to the fully-scoped URL
+ * where `children` render. The alternative — hiding the item until scope
+ * happens to be right — leaves the user with no way to reach the page at all.
+ */
+export function ScopeGate({ children, prompt, requires, to }: ScopeGateProps) {
+  const { isApiScope, isProjectScope } = useConsoleScope();
+  const satisfied = requires === 'api' ? isApiScope : isProjectScope;
+
+  // Picker in separate component so API-list query only mounts when gate is closed.
+  if (satisfied) return <>{children}</>;
+  return <ScopeSelection prompt={prompt} requires={requires} to={to} />;
+}
+
+const DEFAULT_PROMPT: Record<RequiredScope, string> = {
+  api: 'This page is available at the API level.',
+  project: 'This page is available at the project level.',
+};
+
+function ScopeSelection({
+  prompt,
+  requires,
+  to,
+}: Omit<ScopeGateProps, 'children'>) {
+  const navigate = useNavigate();
+  const { isLoading, isProjectScope, params, projects, projectsError, organization, organizations } =
+    useConsoleScope();
+  // When only the API is missing, the project stays fixed at the route's own,
+  // switching project is the header switcher's job, not this card's.
+  const [chosenProject, setChosenProject] = useState(
+    params.projectHandler ?? ''
+  );
+  const [chosenApi, setChosenApi] = useState('');
+
+  const needsApi = requires === 'api';
+  const apisQuery = useRestApis(
+    {},
+    { projectId: needsApi ? chosenProject || undefined : undefined }
+  );
+  const apis = apisQuery.data?.list ?? [];
+
+  if (projectsError) {
+    return (
+      <PageContent>
+        <ErrorState message="Unable to load projects" />
+      </PageContent>
+    );
+  }
+  if (isLoading && projects.length === 0) {
+    return <LoadingState label="Loading projects" />;
+  }
+
+  const orgHandle = params.orgHandle ?? '';
+  const canContinue = Boolean(chosenProject && (!needsApi || chosenApi));
+  const submit = () => {
+    if (!canContinue) return;
+    // `replace` keeps Back on the previous page.
+    navigate(to(orgHandle, chosenProject, chosenApi || null), {
+      replace: true,
+    });
+  };
+
+  return (
+    <>
+      <Card variant="outlined" sx={{ maxWidth: 920 }}>
+        <CardContent sx={{ p: 3 }}>
+          <Stack spacing={2}>
+            <Box>
+              <Typography variant="h5" sx={{ fontWeight: 600 }}>
+                {prompt ?? DEFAULT_PROMPT[requires]}
+              </Typography>
+              <Typography color="text.secondary">
+                {needsApi
+                  ? <FormattedMessage
+                      id="scopeGate.selectProjectAndApi"
+                      defaultMessage='Select a project and an API to switch to API level and continue.'
+                      />
+                  : <FormattedMessage
+                      id="scopeGate.selectProject"
+                      defaultMessage='Select a project to switch to project level and continue.'
+                    />}
+              </Typography>
+            </Box>
+          
+
+          {projects.length === 0 ? (
+            <Box sx={{ mt: 3 }}>
+              <Typography color="text.secondary">
+                <FormattedMessage
+                  id="scopeGate.noProjects"
+                  defaultMessage="You have no projects yet. Create a project to continue."
+                />
+              </Typography>
+              <Button
+                variant="contained"
+                sx={{ mt: 2 }}
+                onClick={() => navigate(routes.projects(orgHandle))}
+              >
+                <FormattedMessage
+                  id="scopeGate.goToProjects"
+                  defaultMessage="Go to Projects"
+                />
+              </Button>
+            </Box>
+          ) : (
+            <Stack
+              spacing={1.5}
+              sx={{ ml: 'auto', flexShrink: 0 }}
+              direction={{ xs: 'column', sm: 'row' }}
+              alignItems={{ xs: 'stretch', sm: 'flex-end' }}
+            >
+              {!isProjectScope && (
+                <FormControl fullWidth sx={{ maxWidth: 400 }}>
+                    {/*
+                      `id` here and `labelId` below: a bare FormLabel is not
+                      associated with the Select, which leaves the combobox with
+                      no accessible name for screen readers (and nothing for a
+                      test to query it by).
+                    */}
+                    <FormLabel id="scope-gate-project-label">
+                      <FormattedMessage
+                        id="scopeGate.project"
+                        defaultMessage="Project"
+                        />
+                    </FormLabel>
+                    <Select
+                      labelId="scope-gate-project-label"
+                      value={
+                        chosenProject || '__loading__'
+                      }
+                      onChange={(event) => {
+                        setChosenProject(String(event.target.value));
+                        // The previous pick belongs to the previous project.
+                        setChosenApi('');
+                      }}
+                      displayEmpty
+                      disabled={
+                        isLoading ||
+                        !organization ||
+                        organizations.length === 0
+                      }
+                      MenuProps={{ PaperProps: { sx: { maxHeight: 300 } } }}
+                    >
+                      {isLoading ? (
+                        <MenuItem value="__loading__" disabled>
+                          <FormattedMessage
+                            id="scopeGate.loadingProjects"
+                            defaultMessage="Loading projects..."
+                          />
+                        </MenuItem>
+                      ) : projects.length === 0 ? (
+                        <MenuItem value="" disabled>
+                          <FormattedMessage
+                            id="scopeGate.noProjects"
+                            defaultMessage="No projects available"
+                          />
+                        </MenuItem>
+                      ) : (projects.map((project) => (
+                          <ComplexSelect.MenuItem
+                            key={project.id}
+                            value={project.id}
+                          >
+                            <Stack direction="row" alignItems="center" spacing={1}>
+                              <ComplexSelect.MenuItem.Icon>
+                                <Layers size={18} />
+                              </ComplexSelect.MenuItem.Icon>
+                              <ComplexSelect.MenuItem.Text
+                                primary={project.displayName}
+                                secondary={project.id}
+                              />
+                            </Stack>
+                          </ComplexSelect.MenuItem>
+                      )))
+                    }
+                    </Select>
+                </FormControl>
+                
+              )}
+
+              {needsApi && (
+                <FormControl fullWidth sx={{ maxWidth: 300 }}>
+                    <FormLabel id="scope-gate-api-label">
+                      <FormattedMessage
+                        id="scopeGate.api"
+                        defaultMessage="API"
+                      />
+                    </FormLabel>
+                    <Select
+                      labelId="scope-gate-api-label"
+                      value={chosenApi || '__loading__'}
+                      onChange={(event) => setChosenApi(String(event.target.value))}
+                      displayEmpty
+                      disabled={!chosenProject || apisQuery.isPending}
+                      MenuProps={{ PaperProps: { sx: { maxHeight: 300 } } }}
+                    >
+                      {apisQuery.isPending ? (
+                        <MenuItem value="__loading__" disabled>
+                          <FormattedMessage
+                            id="scopeGate.loadingApis"
+                            defaultMessage="Loading APIs..."
+                          />
+                        </MenuItem>
+                      ) : apis.length === 0 ? (
+                        <MenuItem value="" disabled>
+                          <FormattedMessage
+                            id="scopeGate.noApis"
+                            defaultMessage="No APIs available"
+                          />
+                        </MenuItem>
+                      ) : (
+                        apis.map((api) => (
+                          <ComplexSelect.MenuItem key={api.id} value={api.id ?? ''}>
+                            <Stack direction="row" alignItems="center" spacing={1}>
+                              <ComplexSelect.MenuItem.Icon>
+                                <Boxes size={18} />
+                              </ComplexSelect.MenuItem.Icon>
+                            <ComplexSelect.MenuItem.Text
+                              primary={api.displayName}
+                              secondary={api.version} /> 
+                            </Stack>
+                          </ComplexSelect.MenuItem>
+                        ))
+                      )}
+                    </Select>
+                </FormControl>
+              )}
+
+              <Button
+                sx={{ height: '100%'}}
+                variant="contained"
+                disabled={!canContinue}
+                onClick={submit}
+              >
+                {needsApi ? (
+                  <FormattedMessage
+                    id="scopeGate.goToApiLevel"
+                    defaultMessage="Go to API Level"
+                  />
+                ) : (
+                  <FormattedMessage
+                    id="scopeGate.goToProjectLevel"
+                    defaultMessage="Go to Project Level"
+                  />
+                )}
+              </Button>
+            </Stack>
+          )}
+          </Stack>
+            
+
+          {needsApi &&
+            chosenProject &&
+            !apisQuery.isPending &&
+            apis.length === 0 && (
+              <Typography color="text.secondary" sx={{ mt: 2 }}>
+                <FormattedMessage
+                  id="scopeGate.noApis"
+                  defaultMessage="This project has no APIs yet. Create an API to continue."
+                />
+              </Typography>
+            )}
+        </CardContent>
+      </Card>
+    </>
+  );
+}
diff --git a/portals/api-control-plane/src/scope/consoleRouteParams.ts b/portals/api-control-plane/src/scope/consoleRouteParams.ts
new file mode 100644
index 0000000000..81df612161
--- /dev/null
+++ b/portals/api-control-plane/src/scope/consoleRouteParams.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { ConsoleRouteParams } from './ConsoleScopeContext';
+
+/**
+ * Reads scope handles out of a pathname positionally: the segment after
+ * `organizations` is the org handle, the one after `projects` the project, the
+ * one after `apis` the API.
+ *
+ * `ConsoleScopeProvider` needs this because it is mounted as a pathless layout
+ * route, where `useParams()` sees only the params of the branch matched so far —
+ * not the leaf page's `:projectHandler`/`:apiHandler`.
+ *
+ * Being positional, it also constrains what a URL may look like: a page's
+ * scope-less alias must not leave a `projects`/`apis` segment with the page's own
+ * suffix behind it, or that suffix is read back as a handle. This is exactly why
+ * those aliases carry `SELECT_SCOPE_SEGMENT` instead of dropping segments — see
+ * `projectPath` in `routes/paths.ts`, and the round-trip test beside it.
+ */
+export const getRouteParamsFromPathname = (
+  pathname: string
+): ConsoleRouteParams => {
+  const segments = pathname.split('/').filter(Boolean);
+  const organizationsIndex = segments.indexOf('organizations');
+  if (organizationsIndex < 0) return {};
+
+  const orgHandle = segments[organizationsIndex + 1];
+  const projectsIndex = segments.indexOf('projects');
+  const projectHandler =
+    projectsIndex >= 0 ? segments[projectsIndex + 1] : undefined;
+  const apisIndex = segments.indexOf('apis');
+  const apiHandler = apisIndex >= 0 ? segments[apisIndex + 1] : undefined;
+  const environmentsIndex = segments.indexOf('environments');
+  const environmentId =
+    environmentsIndex >= 0 ? segments[environmentsIndex + 1] : undefined;
+  const deploymentsIndex = segments.indexOf('deployments');
+  const deploymentId =
+    deploymentsIndex >= 0 ? segments[deploymentsIndex + 1] : undefined;
+
+  return {
+    apiHandler,
+    deploymentId,
+    environmentId,
+    orgHandle,
+    projectHandler,
+  };
+};
diff --git a/portals/api-control-plane/src/test/mockScope.ts b/portals/api-control-plane/src/test/mockScope.ts
index 4c950666d8..007a34a67a 100644
--- a/portals/api-control-plane/src/test/mockScope.ts
+++ b/portals/api-control-plane/src/test/mockScope.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { getApiCapabilities } from '../pages/appShell/appShellPages/apis/apiCapabilities';
+import { getApiCapabilities } from '../pages/appShell/appShellPages/apis/utils/apiCapabilities';
 import { organizations, projects } from '../api/mocks/data';
 import type { ConsoleScope } from '../scope/ConsoleScopeProvider';
 
@@ -32,8 +32,8 @@ export function makeConsoleScope(
   const project = overrides.project ?? projects[0];
   const component = overrides.component;
   const params = {
-    orgHandle: organization?.handle,
-    projectHandler: project?.handler,
+    orgHandle: organization?.id,
+    projectHandler: project?.id,
     ...overrides.params,
   };
   return {
@@ -42,7 +42,7 @@ export function makeConsoleScope(
     activeScope: {
       orgHandle: params.orgHandle,
       projectHandler: params.projectHandler,
-      apiHandler: params.apiHandler ?? component?.handler,
+      apiHandler: params.apiHandler ?? component?.id,
     },
     capabilities: getApiCapabilities(component),
     component,
diff --git a/portals/api-control-plane/src/theme/index.ts b/portals/api-control-plane/src/theme/index.ts
index eb366236a7..46c340e050 100644
--- a/portals/api-control-plane/src/theme/index.ts
+++ b/portals/api-control-plane/src/theme/index.ts
@@ -19,6 +19,7 @@
 import { AppThemeProvider } from './AppThemeProvider';
 import {
   glassSurfaceSx,
+  hairline,
   interactiveCardSx,
   stickyBottomBarSx,
 } from './receipes';
@@ -26,6 +27,7 @@ import {
 export {
   AppThemeProvider,
   glassSurfaceSx,
+  hairline,
   interactiveCardSx,
   stickyBottomBarSx,
 };
\ No newline at end of file
diff --git a/portals/api-control-plane/src/theme/receipes.ts b/portals/api-control-plane/src/theme/receipes.ts
index e89564132e..09e73803ac 100644
--- a/portals/api-control-plane/src/theme/receipes.ts
+++ b/portals/api-control-plane/src/theme/receipes.ts
@@ -41,39 +41,6 @@ import { alpha, type Theme } from '@wso2/oxygen-ui';
 export const hairline = (theme: Theme) =>
   `${theme.border.width} ${theme.border.style}`;
 
-/**
- * Square metadata chip used across the API and gateway card family. A function
- * of the theme so the border comes from `theme.border` rather than a literal —
- * compose it as `sx={(theme) => ({ ...chipSx(theme), ...overrides })}`.
- */
-export const chipSx = (theme: Theme) =>
-  ({
-    alignItems: 'center',
-    bgcolor: 'action.hover',
-    border: hairline(theme),
-    borderColor: 'divider',
-    borderRadius: 1,
-    color: 'text.secondary',
-    display: 'inline-flex',
-    fontSize: 12,
-    fontWeight: 500,
-    gap: 0.75,
-    px: 1.25,
-    py: 0.5,
-  }) as const;
-
-/**
- * The same chip tinted with the brand colour — the "kind" chip on API cards.
- * Pass straight through as `sx={tintedChipSx}`.
- */
-export const tintedChipSx = (theme: Theme) => ({
-  ...chipSx(theme),
-  bgcolor: alpha(theme.palette.primary.main, 0.14),
-  borderColor: alpha(theme.palette.primary.main, 0.3),
-  color: 'primary.main',
-  fontWeight: 600,
-});
-
 /** Blur radius behind a glass surface. One value, so every pane matches. */
 const GLASS_BLUR = '14px';
 

From 3572c881c4024cffcaeffa871bab69a4d17cbc92 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Fri, 21 Aug 2026 16:09:48 +0530
Subject: [PATCH 04/12] refactor: add single claude skill for apicp portal dev 
 and update api resource exporting

---
 .../.claude/oxygen-ui/components.md           | 1431 -----------------
 .../.claude/oxygen-ui/migration.md            |  281 ----
 .../.claude/oxygen-ui/patterns.md             | 1197 --------------
 .../.claude/oxygen-ui/theming.md              |  334 ----
 .../.claude/skills/apicp-ui/SKILL.md          |  386 +++++
 .../.claude/skills/oxygen-component/SKILL.md  |  147 --
 .../.claude/skills/oxygen-form/SKILL.md       |  410 -----
 .../.claude/skills/oxygen-layout/SKILL.md     |  233 ---
 .../.claude/skills/oxygen-migrate/SKILL.md    |  280 ----
 portals/api-control-plane/CLAUDE.md           |   12 +-
 .../src/api/resources/apiKeys/index.ts        |   51 +-
 .../src/api/resources/applications/index.ts   |   61 +
 .../resources/gatewayCustomPolicies/index.ts  |   44 +
 .../src/api/resources/gateways/index.ts       |   37 +
 .../src/api/resources/organizations/index.ts  |   42 +-
 .../src/api/resources/projects/index.ts       |   53 +-
 .../src/api/resources/restApis/index.ts       |   56 +-
 .../src/api/resources/secrets/index.ts        |   52 +
 .../api/resources/subscriptionPlans/index.ts  |   46 +
 .../src/api/resources/subscriptions/index.ts  |   46 +
 20 files changed, 771 insertions(+), 4428 deletions(-)
 delete mode 100644 portals/api-control-plane/.claude/oxygen-ui/components.md
 delete mode 100644 portals/api-control-plane/.claude/oxygen-ui/migration.md
 delete mode 100644 portals/api-control-plane/.claude/oxygen-ui/patterns.md
 delete mode 100644 portals/api-control-plane/.claude/oxygen-ui/theming.md
 create mode 100644 portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md
 delete mode 100644 portals/api-control-plane/.claude/skills/oxygen-component/SKILL.md
 delete mode 100644 portals/api-control-plane/.claude/skills/oxygen-form/SKILL.md
 delete mode 100644 portals/api-control-plane/.claude/skills/oxygen-layout/SKILL.md
 delete mode 100644 portals/api-control-plane/.claude/skills/oxygen-migrate/SKILL.md
 create mode 100644 portals/api-control-plane/src/api/resources/applications/index.ts
 create mode 100644 portals/api-control-plane/src/api/resources/gatewayCustomPolicies/index.ts
 create mode 100644 portals/api-control-plane/src/api/resources/secrets/index.ts
 create mode 100644 portals/api-control-plane/src/api/resources/subscriptionPlans/index.ts
 create mode 100644 portals/api-control-plane/src/api/resources/subscriptions/index.ts

diff --git a/portals/api-control-plane/.claude/oxygen-ui/components.md b/portals/api-control-plane/.claude/oxygen-ui/components.md
deleted file mode 100644
index fe912c6f81..0000000000
--- a/portals/api-control-plane/.claude/oxygen-ui/components.md
+++ /dev/null
@@ -1,1431 +0,0 @@
-# Oxygen UI Component Reference
-
-Complete API reference for custom Oxygen UI components. For MUI components, refer to [Material-UI documentation](https://mui.com/material-ui/).
-
-## Table of Contents
-
-- [OxygenUIThemeProvider](#oxygenuitthemeprovider)
-- [ListingTable](#listingtable)
-- [AppShell](#appshell)
-- [Layout](#layout)
-- [Header](#header)
-- [Sidebar](#sidebar)
-- [Footer](#footer)
-- [UserMenu](#usermenu)
-- [Form](#form)
-- [NotificationPanel](#notificationpanel)
-- [NotificationBanner](#notificationbanner)
-- [ParticleBackground](#particlebackground)
-- [Other Components](#other-components)
-- [MUI X Namespaces](#mui-x-namespaces)
-- [Hooks](#hooks)
-- [Utilities](#utilities)
-
----
-
-## OxygenUIThemeProvider
-
-Theme provider that wraps your application. Required at the root level.
-
-```tsx
-import { OxygenUIThemeProvider, OxygenTheme } from '@wso2/oxygen-ui';
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | required | App content |
-| `theme` | `Theme` | `OxygenTheme` | Single theme (disables switching) |
-| `themes` | `ThemeOption[]` | - | Array of themes (enables switching) |
-| `initialTheme` | `string` | First theme key | Initial theme key |
-
-### ThemeOption Type
-
-```tsx
-interface ThemeOption {
-  key: string;    // Unique identifier
-  label: string;  // Display name
-  theme: Theme;   // MUI Theme object
-}
-```
-
-### Basic Usage
-
-```tsx
-// Single theme (no switching)
-<OxygenUIThemeProvider theme={OxygenTheme}>
-  <App />
-</OxygenUIThemeProvider>
-```
-
-### Theme Switching
-
-```tsx
-import {
-  OxygenUIThemeProvider,
-  OxygenTheme,
-  AcrylicOrangeTheme,
-  AcrylicPurpleTheme,
-} from '@wso2/oxygen-ui';
-
-const themes = [
-  { key: 'default', label: 'Default', theme: OxygenTheme },
-  { key: 'orange', label: 'Orange', theme: AcrylicOrangeTheme },
-  { key: 'purple', label: 'Purple', theme: AcrylicPurpleTheme },
-];
-
-<OxygenUIThemeProvider themes={themes} initialTheme="default">
-  <App />
-</OxygenUIThemeProvider>
-```
-
----
-
-## ListingTable
-
-Advanced data table with compound component pattern. Supports search, sort, pagination, selection, and bulk actions.
-
-```tsx
-import { ListingTable } from '@wso2/oxygen-ui';
-```
-
-### Sub-components
-
-| Component | Description |
-|-----------|-------------|
-| `ListingTable.Provider` | Context provider for state management |
-| `ListingTable.Container` | Paper wrapper with styling |
-| `ListingTable.Toolbar` | Search, filters, and actions bar |
-| `ListingTable.Head` | Table header wrapper |
-| `ListingTable.Body` | Table body wrapper |
-| `ListingTable.Footer` | Table footer (pagination) |
-| `ListingTable.Row` | Table row |
-| `ListingTable.Cell` | Table cell |
-| `ListingTable.SortLabel` | Sortable column header |
-| `ListingTable.DensityControl` | Density toggle button |
-| `ListingTable.EmptyState` | Empty state display |
-| `ListingTable.RowActions` | Row action buttons |
-| `ListingTable.CellIcon` | Icon in cell |
-
-### ListingTable Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'table' \| 'card'` | `'table'` | Display style |
-| `density` | `'compact' \| 'standard' \| 'comfortable'` | `'standard'` | Row padding |
-| `striped` | `boolean` | `false` | Alternating row colors |
-| `bordered` | `boolean` | `false` | Cell borders |
-
-### Provider Props (Context State)
-
-```tsx
-interface ListingTableProviderProps {
-  // Search
-  searchValue?: string;
-  onSearchChange?: (value: string) => void;
-
-  // Sort
-  sortField?: string;
-  sortDirection?: 'asc' | 'desc';
-  onSortChange?: (field: string, direction: 'asc' | 'desc') => void;
-
-  // Pagination
-  page?: number;                    // 0-indexed
-  rowsPerPage?: number;
-  totalCount?: number;
-  onPageChange?: (page: number) => void;
-  onRowsPerPageChange?: (rowsPerPage: number) => void;
-
-  // Selection
-  selected?: readonly string[];
-  onSelectionChange?: (selected: readonly string[]) => void;
-  onSelectAll?: () => void;
-  onClearSelection?: () => void;
-  isSelected?: (id: string) => boolean;
-
-  // Filters
-  filters?: Record<string, unknown>;
-  onFilterChange?: (key: string, value: unknown) => void;
-  onClearFilters?: () => void;
-
-  // Bulk Actions
-  onBulkDelete?: (ids: readonly string[]) => void;
-  onBulkAction?: (actionId: string, ids: readonly string[]) => void;
-
-  // UI State
-  density?: 'compact' | 'standard' | 'comfortable';
-  onDensityChange?: (density: ListingTableDensity) => void;
-  loading?: boolean;
-}
-```
-
-### Toolbar Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `showSearch` | `boolean` | `false` | Show built-in search |
-| `searchSlot` | `ReactNode` | - | Custom search component |
-| `searchPlaceholder` | `string` | `'Search...'` | Search placeholder |
-| `actions` | `ReactNode` | - | Right-side actions |
-| `children` | `ReactNode` | - | Center content |
-
-### Basic Table
-
-```tsx
-<ListingTable.Container>
-  <ListingTable>
-    <ListingTable.Head>
-      <ListingTable.Row>
-        <ListingTable.Cell>Name</ListingTable.Cell>
-        <ListingTable.Cell>Status</ListingTable.Cell>
-        <ListingTable.Cell>Actions</ListingTable.Cell>
-      </ListingTable.Row>
-    </ListingTable.Head>
-    <ListingTable.Body>
-      {data.map((row) => (
-        <ListingTable.Row key={row.id}>
-          <ListingTable.Cell>{row.name}</ListingTable.Cell>
-          <ListingTable.Cell>{row.status}</ListingTable.Cell>
-          <ListingTable.Cell>
-            <ListingTable.RowActions
-              actions={[
-                { id: 'edit', label: 'Edit', onClick: () => edit(row.id) },
-                { id: 'delete', label: 'Delete', onClick: () => delete(row.id) },
-              ]}
-            />
-          </ListingTable.Cell>
-        </ListingTable.Row>
-      ))}
-    </ListingTable.Body>
-  </ListingTable>
-</ListingTable.Container>
-```
-
-### Full-Featured Table with Context
-
-```tsx
-const [search, setSearch] = useState('');
-const [sortField, setSortField] = useState('name');
-const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
-const [page, setPage] = useState(0);
-const [rowsPerPage, setRowsPerPage] = useState(10);
-
-<ListingTable.Provider
-  searchValue={search}
-  onSearchChange={setSearch}
-  sortField={sortField}
-  sortDirection={sortDirection}
-  onSortChange={(field, dir) => {
-    setSortField(field);
-    setSortDirection(dir);
-  }}
-  page={page}
-  rowsPerPage={rowsPerPage}
-  totalCount={data.length}
-  onPageChange={setPage}
-  onRowsPerPageChange={setRowsPerPage}
->
-  <ListingTable.Container>
-    <ListingTable.Toolbar
-      showSearch
-      actions={<ListingTable.DensityControl />}
-    />
-    <ListingTable variant="card">
-      <ListingTable.Head>
-        <ListingTable.Row>
-          <ListingTable.Cell>
-            <ListingTable.SortLabel field="name">Name</ListingTable.SortLabel>
-          </ListingTable.Cell>
-          <ListingTable.Cell>
-            <ListingTable.SortLabel field="status">Status</ListingTable.SortLabel>
-          </ListingTable.Cell>
-        </ListingTable.Row>
-      </ListingTable.Head>
-      <ListingTable.Body>
-        {paginatedData.map((row) => (
-          <ListingTable.Row key={row.id}>
-            <ListingTable.Cell>{row.name}</ListingTable.Cell>
-            <ListingTable.Cell>{row.status}</ListingTable.Cell>
-          </ListingTable.Row>
-        ))}
-      </ListingTable.Body>
-      <ListingTable.Footer />
-    </ListingTable>
-  </ListingTable.Container>
-</ListingTable.Provider>
-```
-
----
-
-## AppShell
-
-Application layout wrapper using compound component pattern.
-
-```tsx
-import { AppShell } from '@wso2/oxygen-ui';
-```
-
-### Sub-components
-
-| Component | Description |
-|-----------|-------------|
-| `AppShell.Navbar` | Top navigation area (header) |
-| `AppShell.Sidebar` | Left sidebar area |
-| `AppShell.Main` | Main content area |
-| `AppShell.Footer` | Bottom footer area |
-| `AppShell.NotificationPanel` | Overlay notification panel |
-
-### Usage
-
-```tsx
-<AppShell>
-  <AppShell.Navbar>
-    <Header>...</Header>
-  </AppShell.Navbar>
-
-  <AppShell.Sidebar>
-    <Sidebar collapsed={collapsed}>...</Sidebar>
-  </AppShell.Sidebar>
-
-  <AppShell.Main>
-    <Outlet />  {/* React Router outlet */}
-  </AppShell.Main>
-
-  <AppShell.Footer>
-    <Footer companyName="WSO2 LLC" />
-  </AppShell.Footer>
-
-  <AppShell.NotificationPanel>
-    <NotificationPanel open={open} onClose={onClose}>
-      ...
-    </NotificationPanel>
-  </AppShell.NotificationPanel>
-</AppShell>
-```
-
----
-
-## Layout
-
-Lightweight layout compound component for building flex-based page structures.
-
-```tsx
-import { Layout } from '@wso2/oxygen-ui';
-```
-
-### Sub-components
-
-| Component | Description |
-|-----------|-------------|
-| `Layout.Sidebar` | Sidebar area |
-| `Layout.Navbar` | Top navigation area |
-| `Layout.Content` | Main content area |
-| `Layout.Header` | Header area |
-
-### Props
-
-Extends MUI `BoxProps`. The root component renders a flex row container.
-
-### Usage
-
-```tsx
-<Layout>
-  <Layout.Navbar>
-    <Header>...</Header>
-  </Layout.Navbar>
-  <Layout.Sidebar>
-    <Sidebar>...</Sidebar>
-  </Layout.Sidebar>
-  <Layout.Content>
-    {/* Page content */}
-  </Layout.Content>
-</Layout>
-```
-
----
-
-## Header
-
-Top navigation bar compound component.
-
-```tsx
-import { Header } from '@wso2/oxygen-ui';
-```
-
-### Sub-components
-
-| Component | Description |
-|-----------|-------------|
-| `Header.Toggle` | Sidebar collapse toggle button |
-| `Header.Brand` | Logo and title container |
-| `Header.BrandLogo` | Logo image/icon |
-| `Header.BrandTitle` | Application title |
-| `Header.Switchers` | Context switcher container |
-| `Header.Actions` | Right-side action buttons |
-| `Header.Spacer` | Flexible spacer |
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `minimal` | `boolean` | `false` | Hide switchers section |
-| `sx` | `SxProps` | - | Custom styles |
-
-### Usage
-
-```tsx
-<Header>
-  <Header.Toggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
-
-  <Header.Brand>
-    <Header.BrandLogo>
-      <img src="/logo.svg" alt="Logo" />
-    </Header.BrandLogo>
-    <Header.BrandTitle>My Application</Header.BrandTitle>
-  </Header.Brand>
-
-  <Header.Switchers>
-    <OrganizationSwitcher />
-    <ProjectSwitcher />
-  </Header.Switchers>
-
-  <Header.Spacer />
-
-  <Header.Actions>
-    <ColorSchemeToggle />
-    <NotificationButton />
-    <UserMenu user={user} />
-  </Header.Actions>
-</Header>
-```
-
----
-
-## Sidebar
-
-Collapsible navigation sidebar compound component.
-
-```tsx
-import { Sidebar, SIDEBAR_WIDTH, COLLAPSED_SIDEBAR_WIDTH } from '@wso2/oxygen-ui';
-```
-
-### Sub-components
-
-| Component | Description |
-|-----------|-------------|
-| `Sidebar.Nav` | Scrollable navigation container |
-| `Sidebar.Category` | Menu category group |
-| `Sidebar.CategoryLabel` | Category heading text |
-| `Sidebar.Item` | Navigation menu item |
-| `Sidebar.ItemIcon` | Item icon |
-| `Sidebar.ItemLabel` | Item text label |
-| `Sidebar.ItemBadge` | Badge indicator |
-| `Sidebar.Footer` | Fixed bottom section |
-| `Sidebar.User` | User profile section |
-| `Sidebar.UserAvatar` | User avatar |
-| `Sidebar.UserName` | User name text |
-| `Sidebar.UserEmail` | User email text |
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `collapsed` | `boolean` | `false` | Collapsed state |
-| `activeItem` | `string` | - | Active menu item ID |
-| `expandedMenus` | `Record<string, boolean>` | `{}` | Expanded submenu map |
-| `onSelect` | `(id: string) => void` | - | Item selection handler |
-| `onToggleExpand` | `(id: string) => void` | - | Submenu toggle handler |
-| `width` | `number` | `250` | Expanded width (px) |
-| `collapsedWidth` | `number` | `64` | Collapsed width (px) |
-
-### Usage
-
-```tsx
-import { HomeIcon, SettingsIcon } from '@wso2/oxygen-ui-icons-react';
-
-<Sidebar
-  collapsed={collapsed}
-  activeItem={activeId}
-  expandedMenus={expandedMenus}
-  onSelect={setActiveId}
-  onToggleExpand={(id) => toggleExpand(id)}
->
-  <Sidebar.Nav>
-    <Sidebar.Category>
-      <Sidebar.CategoryLabel>Main</Sidebar.CategoryLabel>
-
-      <Sidebar.Item id="home">
-        <Sidebar.ItemIcon><HomeIcon size={20} /></Sidebar.ItemIcon>
-        <Sidebar.ItemLabel>Home</Sidebar.ItemLabel>
-      </Sidebar.Item>
-
-      <Sidebar.Item id="dashboard">
-        <Sidebar.ItemIcon><DashboardIcon size={20} /></Sidebar.ItemIcon>
-        <Sidebar.ItemLabel>Dashboard</Sidebar.ItemLabel>
-        <Sidebar.ItemBadge>5</Sidebar.ItemBadge>
-      </Sidebar.Item>
-    </Sidebar.Category>
-  </Sidebar.Nav>
-
-  <Sidebar.Footer>
-    <Sidebar.Item id="settings">
-      <Sidebar.ItemIcon><SettingsIcon size={20} /></Sidebar.ItemIcon>
-      <Sidebar.ItemLabel>Settings</Sidebar.ItemLabel>
-    </Sidebar.Item>
-  </Sidebar.Footer>
-</Sidebar>
-```
-
----
-
-## Form
-
-Form components namespace for building forms with card-based layouts and wizards.
-
-```tsx
-import { Form } from '@wso2/oxygen-ui';
-```
-
-### Components
-
-| Component | Description |
-|-----------|-------------|
-| `Form.CardButton` | Clickable card button for selection |
-| `Form.DisappearingCardButtonContent` | Content that fades when card is selected |
-| `Form.CardHeader` | Card header section |
-| `Form.CardContent` | Card content section |
-| `Form.CardActions` | Card action buttons section |
-| `Form.CardMedia` | Card media/image section |
-| `Form.Stack` | Form field stack layout |
-| `Form.Header` | Section header text |
-| `Form.Subheader` | Section subheader text |
-| `Form.Body` | Section body text |
-| `Form.Section` | Form section with heading |
-| `Form.Wizard` | Multi-step form wizard |
-| `Form.ElementWrapper` | Wrapper for form elements |
-
-### Wizard Props
-
-```tsx
-interface WizardStep {
-  id: string;
-  label: string;
-  content: ReactNode;
-  optional?: boolean;
-}
-
-interface WizardProps {
-  steps: WizardStep[];
-  activeStep: number;
-  onStepChange: (step: number) => void;
-  onComplete?: () => void;
-}
-```
-
-### Usage
-
-```tsx
-// Card-based selection form
-<Form.Stack spacing={2}>
-  <Form.CardButton selected={selected === 'option1'} onClick={() => setSelected('option1')}>
-    <Form.CardHeader title="Option 1" />
-    <Form.CardContent>
-      <Form.Body>Description of option 1</Form.Body>
-    </Form.CardContent>
-  </Form.CardButton>
-
-  <Form.CardButton selected={selected === 'option2'} onClick={() => setSelected('option2')}>
-    <Form.CardHeader title="Option 2" />
-    <Form.CardContent>
-      <Form.Body>Description of option 2</Form.Body>
-    </Form.CardContent>
-  </Form.CardButton>
-</Form.Stack>
-
-// Section with typography
-<Form.Section>
-  <Form.Header>User Details</Form.Header>
-  <Form.Subheader>Enter your information</Form.Subheader>
-  <Form.Body>Additional context about the form section.</Form.Body>
-</Form.Section>
-```
-
----
-
-## NotificationPanel
-
-Slide-out notification panel with tabs and compound component pattern.
-
-```tsx
-import { NotificationPanel } from '@wso2/oxygen-ui';
-```
-
-### Sub-components
-
-| Component | Description |
-|-----------|-------------|
-| `NotificationPanel.Header` | Panel header container |
-| `NotificationPanel.HeaderIcon` | Header icon |
-| `NotificationPanel.HeaderTitle` | Header title text |
-| `NotificationPanel.HeaderBadge` | Unread count badge |
-| `NotificationPanel.HeaderClose` | Close button |
-| `NotificationPanel.Tabs` | Tab navigation |
-| `NotificationPanel.Actions` | Action buttons container |
-| `NotificationPanel.List` | Notification list container |
-| `NotificationPanel.Item` | Individual notification item |
-| `NotificationPanel.ItemAvatar` | Item avatar |
-| `NotificationPanel.ItemTitle` | Item title |
-| `NotificationPanel.ItemMessage` | Item message text |
-| `NotificationPanel.ItemTimestamp` | Item timestamp |
-| `NotificationPanel.ItemAction` | Item action button |
-| `NotificationPanel.EmptyState` | Empty state display |
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `open` | `boolean` | required | Panel visibility |
-| `onClose` | `() => void` | required | Close handler |
-
-### Tabs Props
-
-```tsx
-interface NotificationTabConfig {
-  id: string;
-  label: string;
-  badge?: number;
-}
-
-interface NotificationTabsProps {
-  tabs: NotificationTabConfig[];
-  activeTab: string;
-  onTabChange: (tabId: string) => void;
-}
-```
-
-### Usage
-
-```tsx
-<NotificationPanel open={open} onClose={() => setOpen(false)}>
-  <NotificationPanel.Header>
-    <NotificationPanel.HeaderIcon />
-    <NotificationPanel.HeaderTitle>Notifications</NotificationPanel.HeaderTitle>
-    <NotificationPanel.HeaderBadge count={unreadCount} />
-    <NotificationPanel.HeaderClose />
-  </NotificationPanel.Header>
-
-  <NotificationPanel.Tabs
-    tabs={[
-      { id: 'all', label: 'All' },
-      { id: 'unread', label: 'Unread', badge: 3 },
-    ]}
-    activeTab={activeTab}
-    onTabChange={setActiveTab}
-  />
-
-  <NotificationPanel.Actions>
-    <Button onClick={markAllRead}>Mark all read</Button>
-  </NotificationPanel.Actions>
-
-  <NotificationPanel.List>
-    {notifications.map((n) => (
-      <NotificationPanel.Item key={n.id}>
-        <NotificationPanel.ItemAvatar src={n.avatar} />
-        <NotificationPanel.ItemTitle>{n.title}</NotificationPanel.ItemTitle>
-        <NotificationPanel.ItemMessage>{n.message}</NotificationPanel.ItemMessage>
-        <NotificationPanel.ItemTimestamp>{n.timestamp}</NotificationPanel.ItemTimestamp>
-        <NotificationPanel.ItemAction onClick={() => handleAction(n.id)}>
-          View
-        </NotificationPanel.ItemAction>
-      </NotificationPanel.Item>
-    ))}
-  </NotificationPanel.List>
-
-  {notifications.length === 0 && (
-    <NotificationPanel.EmptyState message="No notifications" />
-  )}
-</NotificationPanel>
-```
-
-### Hooks
-
-```tsx
-import { useNotificationPanel } from '@wso2/oxygen-ui';
-
-// Access panel context inside NotificationPanel
-const { open, onClose } = useNotificationPanel();
-```
-
----
-
-## SearchBar
-
-Search input components with optional advanced filtering.
-
-```tsx
-import { SearchBar, SearchBarWithAdvancedFilter } from '@wso2/oxygen-ui';
-```
-
-### SearchBar Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string` | - | Search input value |
-| `onChange` | `(value: string) => void` | - | Change handler |
-| `placeholder` | `string` | `'Search...'` | Placeholder text |
-
-### SearchBarWithAdvancedFilter Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string` | - | Search input value |
-| `onChange` | `(value: string) => void` | - | Change handler |
-| `advancedFilters` | `AdvancedFilterState` | - | Filter state |
-| `onAdvancedFilterChange` | `(filters: AdvancedFilterState) => void` | - | Filter change handler |
-
-### Usage
-
-```tsx
-// Basic search
-<SearchBar
-  value={search}
-  onChange={setSearch}
-  placeholder="Search users..."
-/>
-
-// With advanced filters
-<SearchBarWithAdvancedFilter
-  value={search}
-  onChange={setSearch}
-  advancedFilters={filters}
-  onAdvancedFilterChange={setFilters}
-/>
-```
-
----
-
-## StatCard
-
-Statistics display card for dashboards.
-
-```tsx
-import { StatCard } from '@wso2/oxygen-ui';
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | required | Stat label |
-| `value` | `string \| number` | required | Stat value |
-| `icon` | `ReactNode` | - | Optional icon |
-| `change` | `number` | - | Percentage change |
-| `trend` | `'up' \| 'down'` | - | Trend direction |
-
-### Usage
-
-```tsx
-<StatCard
-  title="Total Users"
-  value="12,345"
-  change={12.5}
-  trend="up"
-/>
-```
-
----
-
-## PageContent
-
-Page content wrapper with consistent padding and max-width.
-
-```tsx
-import { PageContent } from '@wso2/oxygen-ui';
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | required | Page content |
-| `maxWidth` | `string \| number` | - | Maximum width |
-
-### Usage
-
-```tsx
-<PageContent>
-  <PageTitle>Dashboard</PageTitle>
-  {/* Page content */}
-</PageContent>
-```
-
----
-
-## ComplexSelect
-
-Enhanced select component with search and multi-select capabilities.
-
-```tsx
-import { ComplexSelect } from '@wso2/oxygen-ui';
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `Option[]` | required | Select options |
-| `value` | `string \| string[]` | - | Selected value(s) |
-| `onChange` | `(value) => void` | - | Change handler |
-| `multiple` | `boolean` | `false` | Enable multi-select |
-| `searchable` | `boolean` | `false` | Enable search |
-
-### Usage
-
-```tsx
-<ComplexSelect
-  options={[
-    { value: 'us', label: 'United States' },
-    { value: 'uk', label: 'United Kingdom' },
-    { value: 'ca', label: 'Canada' },
-  ]}
-  value={country}
-  onChange={setCountry}
-  searchable
-/>
-```
-
----
-
-## NotificationBanner
-
-Dismissible system alert banner for top-level announcements.
-
-```tsx
-import { NotificationBanner } from '@wso2/oxygen-ui';
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `visible` | `boolean` | `true` | Whether the banner is visible |
-| `severity` | `'info' \| 'warning' \| 'error' \| 'success'` | `'info'` | Banner severity/type |
-| `title` | `string` | - | Optional banner title |
-| `message` | `string` | required | Banner message text |
-| `actionLabel` | `string` | - | Optional action button label |
-| `onAction` | `() => void` | - | Action button callback |
-| `onDismiss` | `() => void` | - | Dismiss callback |
-| `sx` | `SxProps` | - | Custom styles |
-
-### Usage
-
-```tsx
-<NotificationBanner
-  visible={showBanner}
-  severity="info"
-  title="Scheduled Maintenance"
-  message="The system will be undergoing maintenance on Dec 20th."
-  actionLabel="Learn More"
-  onAction={() => openMaintenanceInfo()}
-  onDismiss={() => setShowBanner(false)}
-/>
-```
-
----
-
-## ParticleBackground
-
-Animated particle canvas background with mouse interaction. Adapts to light/dark color scheme.
-
-```tsx
-import { ParticleBackground } from '@wso2/oxygen-ui';
-```
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `opacity` | `number` | `0.5` | Canvas opacity |
-| `baseDensity` | `number` | `0.12` | Particles per 10,000 px² |
-| `maxSpeed` | `number` | `0.3` | Maximum speed in px per frame |
-| `radius` | `[number, number]` | `[2.0, 3.2]` | Min and max particle radius |
-| `linkDist` | `number` | `210` | Maximum distance to draw lines between particles |
-| `linkAlpha` | `number` | `0.2` | Base opacity of the lines |
-| `mouseInfluence` | `number` | `110` | Radius of mouse influence |
-| `repelStrength` | `number` | `0.35` | Strength of the repel effect |
-| `clickBurst` | `number` | `120` | Impulse on click |
-
-### Usage
-
-```tsx
-// Fixed background behind content
-<ParticleBackground opacity={0.3} />
-
-// Higher density with stronger interaction
-<ParticleBackground
-  baseDensity={0.2}
-  mouseInfluence={150}
-  repelStrength={0.5}
-/>
-```
-
----
-
-## Other Components
-
-### ColorSchemeToggle
-
-Dark/light mode toggle button.
-
-```tsx
-import { ColorSchemeToggle } from '@wso2/oxygen-ui';
-
-<ColorSchemeToggle />
-```
-
-### ThemeSwitcher
-
-Theme selection UI component.
-
-```tsx
-import { ThemeSwitcher } from '@wso2/oxygen-ui';
-
-<ThemeSwitcher />  // Requires OxygenUIThemeProvider with themes
-```
-
----
-
-## Footer
-
-Application footer compound component with composition pattern.
-
-```tsx
-import { Footer } from '@wso2/oxygen-ui';
-```
-
-### Sub-components
-
-| Component | Description |
-|-----------|-------------|
-| `Footer.Copyright` | Copyright text display |
-| `Footer.Version` | Version number display (monospace, muted) |
-| `Footer.Link` | Footer link (auto-placed in right section) |
-| `Footer.Divider` | Visual divider between footer items |
-
-### Footer Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | required | Footer sub-components |
-| `sx` | `SxProps` | - | Custom styles |
-
-### Usage
-
-```tsx
-<Footer>
-  <Footer.Copyright>© 2025 WSO2 LLC. All rights reserved.</Footer.Copyright>
-  <Footer.Divider />
-  <Footer.Version>v2.1.0</Footer.Version>
-  <Footer.Link href="/terms">Terms & Conditions</Footer.Link>
-  <Footer.Link href="/privacy">Privacy Policy</Footer.Link>
-</Footer>
-```
-
-> **Note:** `Footer.Copyright`, `Footer.Version`, and `Footer.Divider` are placed in the left section. `Footer.Link` elements are placed in the right section. Layout is responsive (stacks on mobile).
-
----
-
-## UserMenu
-
-User profile dropdown menu compound component.
-
-```tsx
-import { UserMenu } from '@wso2/oxygen-ui';
-```
-
-### Sub-components
-
-| Component | Description |
-|-----------|-------------|
-| `UserMenu.Trigger` | Avatar button that opens the menu |
-| `UserMenu.Header` | User info section (name, email, avatar, role badge) |
-| `UserMenu.Item` | Menu item with icon, label, and optional badge |
-| `UserMenu.Logout` | Destructive logout menu item |
-| `UserMenu.Divider` | Menu divider |
-
-### UserMenu Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | required | Menu sub-components |
-
-### UserMenuTrigger Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | required | User display name |
-| `avatar` | `string \| null` | - | Avatar image URL |
-| `showName` | `boolean` | `false` | Show name text after avatar |
-
-### UserMenuHeader Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | required | User display name |
-| `email` | `string` | required | User email address |
-| `avatar` | `string \| null` | - | Avatar image URL |
-| `role` | `string` | - | Role badge text (e.g., "Pro", "Admin") |
-
-### UserMenuItem Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | `ReactNode` | - | Left-side icon |
-| `label` | `string` | required | Item label text |
-| `badge` | `string` | - | Right-side badge/chip |
-| `onClick` | `() => void` | - | Click handler |
-
-### UserMenuLogout Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `icon` | `ReactNode` | - | Left-side icon |
-| `label` | `string` | `'Log out'` | Item label text |
-| `onClick` | `() => void` | - | Click handler |
-
-### UserMenuUser Type
-
-```tsx
-interface UserMenuUser {
-  name: string;
-  email: string;
-  avatar?: string;
-  role?: string;
-}
-```
-
-### Usage
-
-```tsx
-import { UserMenu } from '@wso2/oxygen-ui';
-import { UserIcon, SettingsIcon, LogOutIcon } from '@wso2/oxygen-ui-icons-react';
-
-<UserMenu>
-  <UserMenu.Trigger name="John Doe" avatar="/avatar.png" />
-  <UserMenu.Header name="John Doe" email="john@example.com" role="Admin" />
-  <UserMenu.Item icon={<UserIcon size={20} />} label="Profile" onClick={() => {}} />
-  <UserMenu.Item icon={<SettingsIcon size={20} />} label="Settings" onClick={() => {}} />
-  <UserMenu.Divider />
-  <UserMenu.Logout icon={<LogOutIcon size={20} />} onClick={() => signOut()} />
-</UserMenu>
-```
-
-### PageTitle
-
-Page header with avatar and breadcrumb support.
-
-```tsx
-import { PageTitle } from '@wso2/oxygen-ui';
-
-<PageTitle>
-  <PageTitle.Avatar><UserIcon /></PageTitle.Avatar>
-  <PageTitle.Header>Dashboard</PageTitle.Header>
-  <PageTitle.SubHeader>Overview of your projects</PageTitle.SubHeader>
-</PageTitle>
-```
-
-### CodeBlock
-
-Syntax-highlighted code display.
-
-```tsx
-import { CodeBlock } from '@wso2/oxygen-ui';
-
-<CodeBlock language="typescript">
-  {`const greeting = "Hello, World!";`}
-</CodeBlock>
-```
-
----
-
-## MUI X Namespaces
-
-MUI X components are exported as namespaces to avoid naming conflicts.
-
-```tsx
-import { DataGrid, DatePickers, TreeView, AdapterDateFns } from '@wso2/oxygen-ui';
-```
-
-> **Note:** Charts are available in a separate package `@wso2/oxygen-ui-charts-react` built on Recharts.
-
-### DataGrid
-
-```tsx
-<DataGrid.DataGrid
-  rows={rows}
-  columns={columns}
-  pageSize={10}
-  checkboxSelection
-/>
-
-<DataGrid.DataGridPro
-  rows={rows}
-  columns={columns}
-  treeData
-/>
-```
-
-### DatePickers
-
-```tsx
-<DatePickers.LocalizationProvider dateAdapter={AdapterDateFns}>
-  <DatePickers.DatePicker
-    value={date}
-    onChange={setDate}
-    label="Select date"
-  />
-
-  <DatePickers.DateTimePicker
-    value={dateTime}
-    onChange={setDateTime}
-  />
-
-  <DatePickers.DateRangePicker
-    value={range}
-    onChange={setRange}
-  />
-</DatePickers.LocalizationProvider>
-```
-
-### TreeView
-
-```tsx
-<TreeView.SimpleTreeView>
-  <TreeView.TreeItem itemId="1" label="Parent">
-    <TreeView.TreeItem itemId="2" label="Child 1" />
-    <TreeView.TreeItem itemId="3" label="Child 2" />
-  </TreeView.TreeItem>
-</TreeView.SimpleTreeView>
-
-<TreeView.RichTreeView
-  items={treeData}
-  multiSelect
-/>
-```
-
----
-
-## Hooks
-
-### useThemeSwitcher
-
-Access theme switching context.
-
-```tsx
-import { useThemeSwitcher } from '@wso2/oxygen-ui';
-
-function ThemeSelector() {
-  const { currentTheme, themes, setTheme, isActive } = useThemeSwitcher();
-
-  return (
-    <Select value={currentTheme} onChange={(e) => setTheme(e.target.value)}>
-      {themes.map((t) => (
-        <MenuItem key={t.key} value={t.key}>{t.label}</MenuItem>
-      ))}
-    </Select>
-  );
-}
-```
-
-### useThemeContent
-
-Get content based on current color scheme (light/dark).
-
-```tsx
-import { useThemeContent } from '@wso2/oxygen-ui';
-
-function AdaptiveContent() {
-  const content = useThemeContent({
-    light: 'Light mode content',
-    dark: 'Dark mode content',
-  });
-
-  return <Typography>{content}</Typography>;
-}
-```
-
-### useAppShell
-
-Manage AppShell state (sidebar collapsed, notifications open, etc.).
-
-```tsx
-import { useAppShell } from '@wso2/oxygen-ui';
-
-function MyComponent() {
-  const {
-    sidebarCollapsed,
-    setSidebarCollapsed,
-    notificationPanelOpen,
-    setNotificationPanelOpen,
-  } = useAppShell();
-
-  return (
-    <Button onClick={() => setSidebarCollapsed(!sidebarCollapsed)}>
-      Toggle Sidebar
-    </Button>
-  );
-}
-```
-
-### useNotifications
-
-Manage notification state and actions.
-
-```tsx
-import { useNotifications } from '@wso2/oxygen-ui';
-
-function NotificationManager() {
-  const {
-    notifications,
-    unreadCount,
-    addNotification,
-    markAsRead,
-    markAllAsRead,
-    removeNotification,
-  } = useNotifications();
-
-  return (
-    <Badge badgeContent={unreadCount}>
-      <NotificationIcon />
-    </Badge>
-  );
-}
-```
-
-### useListingTable
-
-Access ListingTable context (returns null outside Provider).
-
-```tsx
-import { useListingTable } from '@wso2/oxygen-ui';
-
-function CustomFilter() {
-  const context = useListingTable();
-  if (!context) return null;
-
-  return (
-    <TextField
-      value={context.searchValue}
-      onChange={(e) => context.onSearchChange?.(e.target.value)}
-    />
-  );
-}
-```
-
-### useListingTableRequired
-
-Access ListingTable context (throws if outside Provider).
-
-```tsx
-import { useListingTableRequired } from '@wso2/oxygen-ui';
-
-function TableControls() {
-  const { density, onDensityChange } = useListingTableRequired();
-  // ...
-}
-```
-
-### Component Context Hooks
-
-```tsx
-// Header context
-import { useHeader } from '@wso2/oxygen-ui';
-const headerContext = useHeader();
-
-// Sidebar context
-import { useSidebar } from '@wso2/oxygen-ui';
-const sidebarContext = useSidebar();
-
-// NotificationPanel context
-import { useNotificationPanel } from '@wso2/oxygen-ui';
-const panelContext = useNotificationPanel();
-```
-
----
-
-## Utilities
-
-### formatRelativeTime
-
-Format a date as a relative time string.
-
-```tsx
-import { formatRelativeTime } from '@wso2/oxygen-ui';
-
-formatRelativeTime(new Date(Date.now() - 1000 * 60 * 5));
-// Returns: "5 minutes ago"
-
-formatRelativeTime(new Date(Date.now() - 1000 * 60 * 60 * 2));
-// Returns: "2 hours ago"
-```
-
-Returns: `"Just now"` | `"X minute(s) ago"` | `"X hour(s) ago"` | `"X day(s) ago"` | locale date string (after 7 days).
-
-### pxToRem
-
-Convert pixel values to rem based on 14px base font size.
-
-```tsx
-import { pxToRem } from '@wso2/oxygen-ui';
-
-pxToRem(14); // "1rem"
-pxToRem(28); // "2rem"
-pxToRem(7);  // "0.5rem"
-```
-
----
-
-## Type Exports
-
-Import types for TypeScript usage:
-
-```tsx
-import type {
-  // Theme
-  ThemeOption,
-  ThemeSwitcherContextValue,
-
-  // ListingTable
-  ListingTableProps,
-  ListingTableContainerProps,
-  ListingTableHeadProps,
-  ListingTableBodyProps,
-  ListingTableFooterProps,
-  ListingTableRowProps,
-  ListingTableCellProps,
-  ListingTableProviderProps,
-  ListingTableContextValue,
-  ListingTableToolbarProps,
-  ListingTableEmptyStateProps,
-  ListingTableDensityControlProps,
-  ListingTableSortLabelProps,
-  ListingTableRowActionsProps,
-  ListingTableCellIconProps,
-  ListingTableDensity,
-  ListingTableVariant,
-  ListingTableSortDirection,
-  ListingSortDirection,
-
-  // AppShell
-  AppShellProps,
-  AppShellNavbarProps,
-  AppShellSidebarProps,
-  AppShellMainProps,
-  AppShellFooterProps,
-  AppShellNotificationPanelProps,
-
-  // Header
-  HeaderProps,
-  HeaderSpacerProps,
-  HeaderToggleProps,
-  HeaderBrandProps,
-  HeaderBrandLogoProps,
-  HeaderBrandTitleProps,
-  HeaderSwitchersProps,
-  HeaderActionsProps,
-  HeaderContextValue,
-
-  // Sidebar
-  SidebarProps,
-  SidebarNavProps,
-  SidebarCategoryProps,
-  SidebarCategoryLabelProps,
-  SidebarItemProps,
-  SidebarItemIconProps,
-  SidebarItemLabelProps,
-  SidebarItemBadgeProps,
-  SidebarFooterProps,
-  SidebarUserProps,
-  SidebarUserAvatarProps,
-  SidebarUserNameProps,
-  SidebarUserEmailProps,
-  SidebarContextValue,
-  SidebarItemContextValue,
-
-  // NotificationPanel
-  NotificationPanelProps,
-  NotificationHeaderProps,
-  NotificationHeaderIconProps,
-  NotificationHeaderTitleProps,
-  NotificationHeaderBadgeProps,
-  NotificationHeaderCloseProps,
-  NotificationTabsProps,
-  NotificationTabConfig,
-  NotificationActionsProps,
-  NotificationListProps,
-  NotificationItemProps,
-  NotificationItemAvatarProps,
-  NotificationItemTitleProps,
-  NotificationItemMessageProps,
-  NotificationItemTimestampProps,
-  NotificationItemActionProps,
-  NotificationItemContextValue,
-  NotificationEmptyStateProps,
-  NotificationPanelContextValue,
-  NotificationType,
-  NotificationTypeProps,
-
-  // Footer
-  FooterProps,
-  FooterCopyrightProps,
-  FooterVersionProps,
-  FooterLinkProps,
-
-  // UserMenu
-  UserMenuProps,
-  UserMenuUser,
-  UserMenuTriggerProps,
-  UserMenuHeaderProps,
-  UserMenuItemProps,
-  UserMenuLogoutProps,
-
-  // NotificationBanner
-  NotificationBannerProps,
-
-  // ParticleBackground
-  ParticleBackgroundProps,
-
-  // Other components
-  CodeBlockProps,
-  ColorSchemeImageProps,
-  ColorSchemeImageAttribute,
-  ComplexSelectProps,
-  PageContentProps,
-  PageTitleProps,
-  PageTitleAvatarProps,
-  PageTitleHeaderProps,
-  PageTitleSubHeaderProps,
-  PageTitleLinkProps,
-  StatCardProps,
-  ThemeSwitcherProps,
-  ThemeSelectProps,
-  SearchBarProps,
-  SearchBarWithAdvancedFilterProps,
-  AdvancedFilterState,
-
-  // Form
-  WizardProps,
-  WizardStep,
-
-  // Hooks
-  AppShellState,
-  AppShellActions,
-  UseAppShellOptions,
-  UseAppShellReturn,
-  NotificationItem,
-  NotificationActions,
-  UseNotificationsOptions,
-  UseNotificationsReturn,
-} from '@wso2/oxygen-ui';
-```
diff --git a/portals/api-control-plane/.claude/oxygen-ui/migration.md b/portals/api-control-plane/.claude/oxygen-ui/migration.md
deleted file mode 100644
index fc10ed5e88..0000000000
--- a/portals/api-control-plane/.claude/oxygen-ui/migration.md
+++ /dev/null
@@ -1,281 +0,0 @@
-# Migration Guide to Oxygen UI
-
-## Table of Contents
-- [Overview](#overview)
-- [Install Packages](#install-packages)
-- [Update Imports](#update-imports)
-- [ESLint Plugin Setup](#eslint-plugin-setup)
-- [Common Patterns](#common-patterns)
-
----
-
-## Overview
-
-Migrating to Oxygen UI involves:
-1. Installing Oxygen UI packages
-2. Replacing direct `@mui/*` imports with `@wso2/oxygen-ui`
-3. Replacing `lucide-react` imports with `@wso2/oxygen-ui-icons-react`
-4. Wrapping app with `OxygenUIThemeProvider`
-5. Setting up ESLint plugin to prevent regressions
-
----
-
-## Install Packages
-
-```bash
-# Add Oxygen UI packages
-pnpm add @wso2/oxygen-ui @wso2/oxygen-ui-icons-react
-
-# Add ESLint plugin (dev dependency)
-pnpm add -D @wso2/eslint-plugin-oxygen-ui
-
-# Ensure peer dependencies
-pnpm add @emotion/react @emotion/styled date-fns
-```
-
----
-
-## Update Imports
-
-### MUI Components
-
-**Before:**
-```tsx
-import { Box, Stack, Button } from '@mui/material';
-import Typography from '@mui/material/Typography';
-```
-
-**After:**
-```tsx
-import { Box, Stack, Button, Typography } from '@wso2/oxygen-ui';
-```
-
-### MUI X Components
-
-**Before:**
-```tsx
-import { DataGrid } from '@mui/x-data-grid';
-import { DatePicker } from '@mui/x-date-pickers';
-import { BarChart } from '@mui/x-charts';
-```
-
-**After:**
-```tsx
-import { DataGrid, DatePickers } from '@wso2/oxygen-ui';
-
-const { DataGrid: DataGridComponent } = DataGrid;
-const { DatePicker } = DatePickers;
-
-// For Charts, use the separate package
-import { BarChart } from '@wso2/oxygen-ui-charts-react';
-```
-
-### Icons
-
-**Before:**
-```tsx
-import { Settings, Bell, User } from 'lucide-react';
-```
-
-**After:**
-```tsx
-import { Settings, Bell, User } from '@wso2/oxygen-ui-icons-react';
-```
-
-### Theme Provider
-
-**Before:**
-```tsx
-import { ThemeProvider, createTheme } from '@mui/material';
-
-const theme = createTheme({ ... });
-
-<ThemeProvider theme={theme}>
-  <App />
-</ThemeProvider>
-```
-
-**After:**
-```tsx
-import { OxygenUIThemeProvider } from '@wso2/oxygen-ui';
-
-<OxygenUIThemeProvider>
-  <App />
-</OxygenUIThemeProvider>
-```
-
----
-
-## ESLint Plugin Setup
-
-### ESLint 9+ (Flat Config)
-
-```js
-// eslint.config.js
-import oxygenUIPlugin from '@wso2/eslint-plugin-oxygen-ui';
-
-export default [
-  oxygenUIPlugin.configs.recommended,
-  // ... other configs
-];
-```
-
-### Custom Configuration
-
-```js
-// eslint.config.js
-import oxygenUIPlugin from '@wso2/eslint-plugin-oxygen-ui';
-
-export default [
-  {
-    plugins: {
-      '@wso2/oxygen-ui': oxygenUIPlugin,
-    },
-    rules: {
-      '@wso2/oxygen-ui/no-direct-mui-imports': ['error', {
-        suggestedPackage: '@wso2/oxygen-ui',
-        allowedPackages: [], // Temporarily allow specific MUI packages during migration
-      }],
-      '@wso2/oxygen-ui/no-direct-lucide-imports': ['error', {
-        suggestedPackage: '@wso2/oxygen-ui-icons-react',
-      }],
-    },
-  },
-];
-```
-
-### Auto-fix Imports
-
-```bash
-# Find violations
-pnpm eslint src/
-
-# Auto-fix imports
-pnpm eslint src/ --fix
-```
-
-### Gradual Migration
-
-During migration, temporarily allow specific MUI packages:
-
-```js
-'@wso2/oxygen-ui/no-direct-mui-imports': ['warn', {
-  allowedPackages: ['@mui/x-data-grid', '@mui/x-date-pickers'],
-}],
-```
-
----
-
-## Common Patterns
-
-### Layout Migration
-
-**Before (custom layout):**
-```tsx
-<Box sx={{ display: 'flex' }}>
-  <AppBar>...</AppBar>
-  <Drawer>...</Drawer>
-  <Box component="main">...</Box>
-</Box>
-```
-
-**After (Oxygen AppShell):**
-```tsx
-import { AppShell, Header, Sidebar } from '@wso2/oxygen-ui';
-
-<AppShell>
-  <AppShell.Navbar>
-    <Header>...</Header>
-  </AppShell.Navbar>
-  <AppShell.Sidebar>
-    <Sidebar>...</Sidebar>
-  </AppShell.Sidebar>
-  <AppShell.Main>...</AppShell.Main>
-</AppShell>
-```
-
-### Theme Customization Migration
-
-**Before:**
-```tsx
-const theme = createTheme({
-  palette: {
-    primary: { main: '#1976d2' },
-  },
-});
-```
-
-**After:**
-```tsx
-import { extendTheme } from '@mui/material/styles';
-import { OxygenThemeBase, OxygenUIThemeProvider } from '@wso2/oxygen-ui';
-
-const customTheme = extendTheme({
-  ...OxygenThemeBase,
-  colorSchemes: {
-    light: {
-      palette: { primary: { main: '#1976d2' } },
-    },
-  },
-});
-
-<OxygenUIThemeProvider theme={customTheme}>
-  <App />
-</OxygenUIThemeProvider>
-```
-
-### Icon Button Migration
-
-**Before:**
-```tsx
-import IconButton from '@mui/material/IconButton';
-import SettingsIcon from '@mui/icons-material/Settings';
-
-<IconButton><SettingsIcon /></IconButton>
-```
-
-**After:**
-```tsx
-import { IconButton } from '@wso2/oxygen-ui';
-import { Settings } from '@wso2/oxygen-ui-icons-react';
-
-<IconButton><Settings size={20} /></IconButton>
-```
-
-### Color Mode Migration
-
-**Before:**
-```tsx
-import { useColorScheme } from '@mui/material';
-
-const { mode, setMode } = useColorScheme();
-```
-
-**After:**
-```tsx
-import { ColorSchemeToggle, useThemeContent } from '@wso2/oxygen-ui';
-
-// Simple toggle
-<ColorSchemeToggle />
-
-// Conditional content
-const content = useThemeContent({
-  light: 'Light content',
-  dark: 'Dark content',
-});
-```
-
----
-
-## Migration Checklist
-
-- [ ] Install `@wso2/oxygen-ui` and `@wso2/oxygen-ui-icons-react`
-- [ ] Install peer dependencies (`@emotion/react`, `@emotion/styled`, `date-fns`)
-- [ ] Wrap root component with `OxygenUIThemeProvider`
-- [ ] Replace `@mui/material` imports with `@wso2/oxygen-ui`
-- [ ] Replace `@mui/icons-material` or `lucide-react` with `@wso2/oxygen-ui-icons-react`
-- [ ] Update MUI X imports to use namespaced exports
-- [ ] Install and configure `@wso2/eslint-plugin-oxygen-ui`
-- [ ] Run ESLint with `--fix` to auto-correct remaining imports
-- [ ] Test light/dark mode functionality
-- [ ] Verify theme styling matches expectations
diff --git a/portals/api-control-plane/.claude/oxygen-ui/patterns.md b/portals/api-control-plane/.claude/oxygen-ui/patterns.md
deleted file mode 100644
index a2f48cc0ce..0000000000
--- a/portals/api-control-plane/.claude/oxygen-ui/patterns.md
+++ /dev/null
@@ -1,1197 +0,0 @@
-# Oxygen UI Common Patterns
-
-Ready-to-use UI patterns for common application scenarios.
-
-## Table of Contents
-
-- [App Shell Layout](#app-shell-layout)
-- [Authentication Forms](#authentication-forms)
-- [Dashboard Layout](#dashboard-layout)
-- [Data Tables](#data-tables)
-- [Modal Dialogs](#modal-dialogs)
-- [Error States](#error-states)
-- [Form Patterns](#form-patterns)
-- [Navigation Patterns](#navigation-patterns)
-- [Theme Switching](#theme-switching)
-
----
-
-## App Shell Layout
-
-Complete application shell with header, sidebar, and content area.
-
-```tsx
-import { useState } from 'react';
-import {
-  OxygenUIThemeProvider,
-  OxygenTheme,
-  AppShell,
-  Header,
-  Sidebar,
-  Footer,
-  ColorSchemeToggle,
-  UserMenu,
-} from '@wso2/oxygen-ui';
-import { HomeIcon, DashboardIcon, SettingsIcon } from '@wso2/oxygen-ui-icons-react';
-
-function App() {
-  const [collapsed, setCollapsed] = useState(false);
-  const [activeItem, setActiveItem] = useState('home');
-
-  return (
-    <OxygenUIThemeProvider theme={OxygenTheme}>
-      <AppShell>
-        <AppShell.Navbar>
-          <Header>
-            <Header.Toggle
-              collapsed={collapsed}
-              onToggle={() => setCollapsed(!collapsed)}
-            />
-            <Header.Brand>
-              <Header.BrandLogo>
-                <img src="/logo.svg" alt="Logo" height={32} />
-              </Header.BrandLogo>
-              <Header.BrandTitle>My App</Header.BrandTitle>
-            </Header.Brand>
-            <Header.Spacer />
-            <Header.Actions>
-              <ColorSchemeToggle />
-              <UserMenu>
-                <UserMenu.Trigger name="John Doe" />
-              </UserMenu>
-            </Header.Actions>
-          </Header>
-        </AppShell.Navbar>
-
-        <AppShell.Sidebar>
-          <Sidebar
-            collapsed={collapsed}
-            activeItem={activeItem}
-            onSelect={setActiveItem}
-          >
-            <Sidebar.Nav>
-              <Sidebar.Category>
-                <Sidebar.CategoryLabel>Main</Sidebar.CategoryLabel>
-                <Sidebar.Item id="home">
-                  <Sidebar.ItemIcon><HomeIcon size={20} /></Sidebar.ItemIcon>
-                  <Sidebar.ItemLabel>Home</Sidebar.ItemLabel>
-                </Sidebar.Item>
-                <Sidebar.Item id="dashboard">
-                  <Sidebar.ItemIcon><DashboardIcon size={20} /></Sidebar.ItemIcon>
-                  <Sidebar.ItemLabel>Dashboard</Sidebar.ItemLabel>
-                </Sidebar.Item>
-              </Sidebar.Category>
-            </Sidebar.Nav>
-            <Sidebar.Footer>
-              <Sidebar.Item id="settings">
-                <Sidebar.ItemIcon><SettingsIcon size={20} /></Sidebar.ItemIcon>
-                <Sidebar.ItemLabel>Settings</Sidebar.ItemLabel>
-              </Sidebar.Item>
-            </Sidebar.Footer>
-          </Sidebar>
-        </AppShell.Sidebar>
-
-        <AppShell.Main>
-          <Box sx={{ p: 3 }}>
-            {/* Page content goes here */}
-          </Box>
-        </AppShell.Main>
-
-        <AppShell.Footer>
-          <Footer>
-            <Footer.Copyright>© 2025 WSO2 LLC. All rights reserved.</Footer.Copyright>
-          </Footer>
-        </AppShell.Footer>
-      </AppShell>
-    </OxygenUIThemeProvider>
-  );
-}
-```
-
----
-
-## Authentication Forms
-
-### Login Form
-
-```tsx
-import { useState } from 'react';
-import {
-  Box,
-  Paper,
-  Typography,
-  TextField,
-  Button,
-  Link,
-  Divider,
-  Alert,
-} from '@wso2/oxygen-ui';
-
-function LoginForm() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError('');
-    try {
-      // Login logic here
-    } catch (err) {
-      setError('Invalid credentials');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Box
-      sx={{
-        minHeight: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        bgcolor: 'background.default',
-      }}
-    >
-      <Paper sx={{ p: 4, maxWidth: 400, width: '100%' }}>
-        <Typography variant="h5" gutterBottom align="center">
-          Sign In
-        </Typography>
-
-        {error && (
-          <Alert severity="error" sx={{ mb: 2 }}>
-            {error}
-          </Alert>
-        )}
-
-        <Box component="form" onSubmit={handleSubmit}>
-          <TextField
-            fullWidth
-            label="Email"
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            margin="normal"
-            required
-          />
-
-          <TextField
-            fullWidth
-            label="Password"
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            margin="normal"
-            required
-          />
-
-          <Button
-            fullWidth
-            type="submit"
-            variant="contained"
-            disabled={loading}
-            sx={{ mt: 3, mb: 2 }}
-          >
-            {loading ? 'Signing in...' : 'Sign In'}
-          </Button>
-
-          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-            <Link href="/forgot-password" variant="body2">
-              Forgot password?
-            </Link>
-            <Link href="/register" variant="body2">
-              Create account
-            </Link>
-          </Box>
-
-          <Divider sx={{ my: 3 }}>or</Divider>
-
-          <Button fullWidth variant="outlined" startIcon={<GoogleIcon />}>
-            Continue with Google
-          </Button>
-        </Box>
-      </Paper>
-    </Box>
-  );
-}
-```
-
-### Password Reset Form
-
-```tsx
-import { useState } from 'react';
-import {
-  Box,
-  Paper,
-  Typography,
-  TextField,
-  Button,
-  Alert,
-} from '@wso2/oxygen-ui';
-
-function PasswordResetForm() {
-  const [email, setEmail] = useState('');
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Send reset email
-    setSubmitted(true);
-  };
-
-  if (submitted) {
-    return (
-      <Paper sx={{ p: 4, maxWidth: 400 }}>
-        <Alert severity="success">
-          If an account exists for {email}, you will receive a password reset link.
-        </Alert>
-        <Button href="/login" sx={{ mt: 2 }}>
-          Back to Login
-        </Button>
-      </Paper>
-    );
-  }
-
-  return (
-    <Paper sx={{ p: 4, maxWidth: 400 }}>
-      <Typography variant="h5" gutterBottom>
-        Reset Password
-      </Typography>
-      <Typography color="text.secondary" sx={{ mb: 3 }}>
-        Enter your email address and we'll send you a reset link.
-      </Typography>
-
-      <Box component="form" onSubmit={handleSubmit}>
-        <TextField
-          fullWidth
-          label="Email"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <Button fullWidth type="submit" variant="contained" sx={{ mt: 3 }}>
-          Send Reset Link
-        </Button>
-      </Box>
-    </Paper>
-  );
-}
-```
-
----
-
-## Dashboard Layout
-
-### Stats Cards
-
-```tsx
-import { Grid, Paper, Typography, Box } from '@wso2/oxygen-ui';
-import { TrendingUpIcon, TrendingDownIcon } from '@wso2/oxygen-ui-icons-react';
-
-interface StatCardProps {
-  title: string;
-  value: string | number;
-  change?: number;
-  icon?: React.ReactNode;
-}
-
-function StatCard({ title, value, change, icon }: StatCardProps) {
-  const isPositive = change && change > 0;
-
-  return (
-    <Paper sx={{ p: 3 }}>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
-        <Typography color="text.secondary" variant="body2">
-          {title}
-        </Typography>
-        {icon}
-      </Box>
-
-      <Typography variant="h4" fontWeight="bold">
-        {value}
-      </Typography>
-
-      {change !== undefined && (
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            mt: 1,
-            color: isPositive ? 'success.main' : 'error.main',
-          }}
-        >
-          {isPositive ? <TrendingUpIcon size={16} /> : <TrendingDownIcon size={16} />}
-          <Typography variant="body2" sx={{ ml: 0.5 }}>
-            {Math.abs(change)}% from last month
-          </Typography>
-        </Box>
-      )}
-    </Paper>
-  );
-}
-
-function Dashboard() {
-  return (
-    <Box sx={{ p: 3 }}>
-      <Typography variant="h4" gutterBottom>
-        Dashboard
-      </Typography>
-
-      <Grid container spacing={3}>
-        <Grid item xs={12} sm={6} md={3}>
-          <StatCard title="Total Users" value="12,345" change={12.5} />
-        </Grid>
-        <Grid item xs={12} sm={6} md={3}>
-          <StatCard title="Revenue" value="$45,678" change={8.2} />
-        </Grid>
-        <Grid item xs={12} sm={6} md={3}>
-          <StatCard title="Active Sessions" value="1,234" change={-3.1} />
-        </Grid>
-        <Grid item xs={12} sm={6} md={3}>
-          <StatCard title="Conversion Rate" value="3.2%" change={0.8} />
-        </Grid>
-      </Grid>
-    </Box>
-  );
-}
-```
-
-### Dashboard with Charts
-
-> **Note:** Charts are available in a separate package `@wso2/oxygen-ui-charts-react` built on Recharts.
-
-```tsx
-import { Grid, Paper, Typography, Box } from '@wso2/oxygen-ui';
-import { LineChart, PieChart } from '@wso2/oxygen-ui-charts-react';
-
-function DashboardCharts() {
-  const salesData = [
-    { month: 'Jan', sales: 4000, orders: 240 },
-    { month: 'Feb', sales: 3000, orders: 139 },
-    { month: 'Mar', sales: 2000, orders: 980 },
-    { month: 'Apr', sales: 2780, orders: 390 },
-    { month: 'May', sales: 1890, orders: 480 },
-    { month: 'Jun', sales: 2390, orders: 380 },
-  ];
-
-  return (
-    <Grid container spacing={3}>
-      <Grid item xs={12} md={8}>
-        <Paper sx={{ p: 3 }}>
-          <Typography variant="h6" gutterBottom>
-            Sales Overview
-          </Typography>
-          <LineChart
-            height={300}
-            series={[
-              { data: salesData.map((d) => d.sales), label: 'Sales' },
-              { data: salesData.map((d) => d.orders), label: 'Orders' },
-            ]}
-            xAxis={[{ data: salesData.map((d) => d.month), scaleType: 'band' }]}
-          />
-        </Paper>
-      </Grid>
-
-      <Grid item xs={12} md={4}>
-        <Paper sx={{ p: 3 }}>
-          <Typography variant="h6" gutterBottom>
-            Traffic Sources
-          </Typography>
-          <PieChart
-            height={300}
-            series={[
-              {
-                data: [
-                  { value: 45, label: 'Organic' },
-                  { value: 30, label: 'Direct' },
-                  { value: 15, label: 'Referral' },
-                  { value: 10, label: 'Social' },
-                ],
-              },
-            ]}
-          />
-        </Paper>
-      </Grid>
-    </Grid>
-  );
-}
-```
-
----
-
-## Data Tables
-
-### Basic Data Table
-
-```tsx
-import { useState, useMemo } from 'react';
-import { ListingTable, Button, IconButton, Chip } from '@wso2/oxygen-ui';
-import { EditIcon, TrashIcon, MoreVerticalIcon } from '@wso2/oxygen-ui-icons-react';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  status: 'active' | 'inactive';
-}
-
-function UsersTable({ users }: { users: User[] }) {
-  const [search, setSearch] = useState('');
-  const [sortField, setSortField] = useState('name');
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
-
-  const filteredData = useMemo(() => {
-    let result = [...users];
-
-    // Filter by search
-    if (search) {
-      result = result.filter(
-        (u) =>
-          u.name.toLowerCase().includes(search.toLowerCase()) ||
-          u.email.toLowerCase().includes(search.toLowerCase())
-      );
-    }
-
-    // Sort
-    result.sort((a, b) => {
-      const aVal = a[sortField as keyof User];
-      const bVal = b[sortField as keyof User];
-      const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
-      return sortDirection === 'asc' ? cmp : -cmp;
-    });
-
-    return result;
-  }, [users, search, sortField, sortDirection]);
-
-  const paginatedData = filteredData.slice(
-    page * rowsPerPage,
-    page * rowsPerPage + rowsPerPage
-  );
-
-  return (
-    <ListingTable.Provider
-      searchValue={search}
-      onSearchChange={setSearch}
-      sortField={sortField}
-      sortDirection={sortDirection}
-      onSortChange={(field, dir) => {
-        setSortField(field);
-        setSortDirection(dir);
-      }}
-      page={page}
-      rowsPerPage={rowsPerPage}
-      totalCount={filteredData.length}
-      onPageChange={setPage}
-      onRowsPerPageChange={setRowsPerPage}
-    >
-      <ListingTable.Container>
-        <ListingTable.Toolbar
-          showSearch
-          searchPlaceholder="Search users..."
-          actions={
-            <Button variant="contained" size="small">
-              Add User
-            </Button>
-          }
-        />
-
-        <ListingTable>
-          <ListingTable.Head>
-            <ListingTable.Row>
-              <ListingTable.Cell>
-                <ListingTable.SortLabel field="name">Name</ListingTable.SortLabel>
-              </ListingTable.Cell>
-              <ListingTable.Cell>
-                <ListingTable.SortLabel field="email">Email</ListingTable.SortLabel>
-              </ListingTable.Cell>
-              <ListingTable.Cell>Role</ListingTable.Cell>
-              <ListingTable.Cell>Status</ListingTable.Cell>
-              <ListingTable.Cell align="right">Actions</ListingTable.Cell>
-            </ListingTable.Row>
-          </ListingTable.Head>
-
-          <ListingTable.Body>
-            {paginatedData.length === 0 ? (
-              <ListingTable.Row>
-                <ListingTable.Cell colSpan={5}>
-                  <ListingTable.EmptyState message="No users found" />
-                </ListingTable.Cell>
-              </ListingTable.Row>
-            ) : (
-              paginatedData.map((user) => (
-                <ListingTable.Row key={user.id}>
-                  <ListingTable.Cell>{user.name}</ListingTable.Cell>
-                  <ListingTable.Cell>{user.email}</ListingTable.Cell>
-                  <ListingTable.Cell>{user.role}</ListingTable.Cell>
-                  <ListingTable.Cell>
-                    <Chip
-                      label={user.status}
-                      color={user.status === 'active' ? 'success' : 'default'}
-                      size="small"
-                    />
-                  </ListingTable.Cell>
-                  <ListingTable.Cell align="right">
-                    <IconButton size="small">
-                      <EditIcon size={18} />
-                    </IconButton>
-                    <IconButton size="small" color="error">
-                      <TrashIcon size={18} />
-                    </IconButton>
-                  </ListingTable.Cell>
-                </ListingTable.Row>
-              ))
-            )}
-          </ListingTable.Body>
-
-          <ListingTable.Footer />
-        </ListingTable>
-      </ListingTable.Container>
-    </ListingTable.Provider>
-  );
-}
-```
-
-### Card Variant Table
-
-```tsx
-<ListingTable variant="card" density="comfortable">
-  <ListingTable.Head>
-    <ListingTable.Row>
-      <ListingTable.Cell>Project</ListingTable.Cell>
-      <ListingTable.Cell>Status</ListingTable.Cell>
-      <ListingTable.Cell>Last Updated</ListingTable.Cell>
-      <ListingTable.Cell align="right">Actions</ListingTable.Cell>
-    </ListingTable.Row>
-  </ListingTable.Head>
-  <ListingTable.Body>
-    {projects.map((project) => (
-      <ListingTable.Row key={project.id}>
-        <ListingTable.Cell>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <ListingTable.CellIcon>
-              <FolderIcon />
-            </ListingTable.CellIcon>
-            <Box>
-              <Typography fontWeight="medium">{project.name}</Typography>
-              <Typography variant="body2" color="text.secondary">
-                {project.description}
-              </Typography>
-            </Box>
-          </Box>
-        </ListingTable.Cell>
-        <ListingTable.Cell>
-          <Chip label={project.status} size="small" />
-        </ListingTable.Cell>
-        <ListingTable.Cell>{project.updatedAt}</ListingTable.Cell>
-        <ListingTable.Cell align="right">
-          <ListingTable.RowActions
-            actions={[
-              { id: 'view', label: 'View', onClick: () => {} },
-              { id: 'edit', label: 'Edit', onClick: () => {} },
-              { id: 'delete', label: 'Delete', onClick: () => {}, color: 'error' },
-            ]}
-          />
-        </ListingTable.Cell>
-      </ListingTable.Row>
-    ))}
-  </ListingTable.Body>
-</ListingTable>
-```
-
----
-
-## Modal Dialogs
-
-### Confirmation Dialog
-
-```tsx
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-  Button,
-} from '@wso2/oxygen-ui';
-
-interface ConfirmDialogProps {
-  open: boolean;
-  title: string;
-  message: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-  loading?: boolean;
-  destructive?: boolean;
-}
-
-function ConfirmDialog({
-  open,
-  title,
-  message,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  onConfirm,
-  onCancel,
-  loading = false,
-  destructive = false,
-}: ConfirmDialogProps) {
-  return (
-    <Dialog open={open} onClose={onCancel} maxWidth="xs" fullWidth>
-      <DialogTitle>{title}</DialogTitle>
-      <DialogContent>
-        <DialogContentText>{message}</DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onCancel} disabled={loading}>
-          {cancelLabel}
-        </Button>
-        <Button
-          onClick={onConfirm}
-          variant="contained"
-          color={destructive ? 'error' : 'primary'}
-          disabled={loading}
-        >
-          {loading ? 'Processing...' : confirmLabel}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
-
-// Usage
-<ConfirmDialog
-  open={deleteDialogOpen}
-  title="Delete User"
-  message="Are you sure you want to delete this user? This action cannot be undone."
-  confirmLabel="Delete"
-  onConfirm={handleDelete}
-  onCancel={() => setDeleteDialogOpen(false)}
-  destructive
-/>
-```
-
-### Form Dialog
-
-```tsx
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-  TextField,
-  Box,
-} from '@wso2/oxygen-ui';
-
-function CreateUserDialog({ open, onClose, onSubmit }) {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-
-  const handleSubmit = () => {
-    onSubmit({ name, email });
-    onClose();
-  };
-
-  return (
-    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
-      <DialogTitle>Create User</DialogTitle>
-      <DialogContent>
-        <Box sx={{ pt: 1 }}>
-          <TextField
-            fullWidth
-            label="Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            margin="normal"
-            required
-          />
-          <TextField
-            fullWidth
-            label="Email"
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            margin="normal"
-            required
-          />
-        </Box>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose}>Cancel</Button>
-        <Button onClick={handleSubmit} variant="contained">
-          Create
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-}
-```
-
----
-
-## Error States
-
-### 404 Page
-
-```tsx
-import { Box, Typography, Button } from '@wso2/oxygen-ui';
-
-function NotFoundPage() {
-  return (
-    <Box
-      sx={{
-        minHeight: '60vh',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textAlign: 'center',
-        p: 3,
-      }}
-    >
-      <Typography variant="h1" sx={{ fontSize: '6rem', fontWeight: 'bold', color: 'text.secondary' }}>
-        404
-      </Typography>
-      <Typography variant="h5" gutterBottom>
-        Page not found
-      </Typography>
-      <Typography color="text.secondary" sx={{ mb: 4, maxWidth: 400 }}>
-        The page you're looking for doesn't exist or has been moved.
-      </Typography>
-      <Button variant="contained" href="/">
-        Go to Home
-      </Button>
-    </Box>
-  );
-}
-```
-
-### Error Boundary Fallback
-
-```tsx
-import { Box, Typography, Button, Paper } from '@wso2/oxygen-ui';
-import { AlertTriangleIcon } from '@wso2/oxygen-ui-icons-react';
-
-function ErrorFallback({ error, resetError }) {
-  return (
-    <Box
-      sx={{
-        minHeight: '60vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        p: 3,
-      }}
-    >
-      <Paper sx={{ p: 4, maxWidth: 500, textAlign: 'center' }}>
-        <AlertTriangleIcon size={48} color="error" />
-        <Typography variant="h5" sx={{ mt: 2 }} gutterBottom>
-          Something went wrong
-        </Typography>
-        <Typography color="text.secondary" sx={{ mb: 3 }}>
-          {error?.message || 'An unexpected error occurred'}
-        </Typography>
-        <Button variant="contained" onClick={resetError}>
-          Try Again
-        </Button>
-      </Paper>
-    </Box>
-  );
-}
-```
-
-### Empty State
-
-```tsx
-import { Box, Typography, Button } from '@wso2/oxygen-ui';
-import { InboxIcon } from '@wso2/oxygen-ui-icons-react';
-
-function EmptyState({
-  icon = <InboxIcon size={48} />,
-  title,
-  description,
-  action,
-  actionLabel,
-}) {
-  return (
-    <Box
-      sx={{
-        py: 8,
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        textAlign: 'center',
-      }}
-    >
-      <Box sx={{ color: 'text.secondary', mb: 2 }}>{icon}</Box>
-      <Typography variant="h6" gutterBottom>
-        {title}
-      </Typography>
-      {description && (
-        <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 400 }}>
-          {description}
-        </Typography>
-      )}
-      {action && actionLabel && (
-        <Button variant="contained" onClick={action}>
-          {actionLabel}
-        </Button>
-      )}
-    </Box>
-  );
-}
-
-// Usage
-<EmptyState
-  title="No projects yet"
-  description="Create your first project to get started"
-  actionLabel="Create Project"
-  action={() => setCreateDialogOpen(true)}
-/>
-```
-
----
-
-## Form Patterns
-
-### Multi-Step Wizard
-
-```tsx
-import { useState } from 'react';
-import {
-  Box,
-  Paper,
-  Stepper,
-  Step,
-  StepLabel,
-  Button,
-  Typography,
-  TextField,
-} from '@wso2/oxygen-ui';
-
-const steps = ['Account', 'Profile', 'Preferences'];
-
-function RegistrationWizard() {
-  const [activeStep, setActiveStep] = useState(0);
-  const [formData, setFormData] = useState({
-    email: '',
-    password: '',
-    name: '',
-    company: '',
-    notifications: true,
-  });
-
-  const handleNext = () => {
-    setActiveStep((prev) => prev + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prev) => prev - 1);
-  };
-
-  const handleSubmit = () => {
-    console.log('Form submitted:', formData);
-  };
-
-  const renderStepContent = (step: number) => {
-    switch (step) {
-      case 0:
-        return (
-          <>
-            <TextField
-              fullWidth
-              label="Email"
-              type="email"
-              value={formData.email}
-              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-              margin="normal"
-            />
-            <TextField
-              fullWidth
-              label="Password"
-              type="password"
-              value={formData.password}
-              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-              margin="normal"
-            />
-          </>
-        );
-      case 1:
-        return (
-          <>
-            <TextField
-              fullWidth
-              label="Full Name"
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              margin="normal"
-            />
-            <TextField
-              fullWidth
-              label="Company"
-              value={formData.company}
-              onChange={(e) => setFormData({ ...formData, company: e.target.value })}
-              margin="normal"
-            />
-          </>
-        );
-      case 2:
-        return (
-          <Typography>
-            Review your information and click Submit to complete registration.
-          </Typography>
-        );
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <Paper sx={{ p: 4, maxWidth: 600, mx: 'auto' }}>
-      <Stepper activeStep={activeStep} sx={{ mb: 4 }}>
-        {steps.map((label) => (
-          <Step key={label}>
-            <StepLabel>{label}</StepLabel>
-          </Step>
-        ))}
-      </Stepper>
-
-      <Box sx={{ minHeight: 200 }}>{renderStepContent(activeStep)}</Box>
-
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 4 }}>
-        <Button disabled={activeStep === 0} onClick={handleBack}>
-          Back
-        </Button>
-        {activeStep === steps.length - 1 ? (
-          <Button variant="contained" onClick={handleSubmit}>
-            Submit
-          </Button>
-        ) : (
-          <Button variant="contained" onClick={handleNext}>
-            Next
-          </Button>
-        )}
-      </Box>
-    </Paper>
-  );
-}
-```
-
-### Form with Validation
-
-```tsx
-import { useState } from 'react';
-import { Box, TextField, Button, Alert } from '@wso2/oxygen-ui';
-
-interface FormErrors {
-  [key: string]: string;
-}
-
-function ValidatedForm() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [errors, setErrors] = useState<FormErrors>({});
-
-  const validate = (): boolean => {
-    const newErrors: FormErrors = {};
-
-    if (!email) {
-      newErrors.email = 'Email is required';
-    } else if (!/\S+@\S+\.\S+/.test(email)) {
-      newErrors.email = 'Invalid email format';
-    }
-
-    if (!password) {
-      newErrors.password = 'Password is required';
-    } else if (password.length < 8) {
-      newErrors.password = 'Password must be at least 8 characters';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (validate()) {
-      // Submit form
-    }
-  };
-
-  return (
-    <Box component="form" onSubmit={handleSubmit}>
-      <TextField
-        fullWidth
-        label="Email"
-        type="email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        error={!!errors.email}
-        helperText={errors.email}
-        margin="normal"
-      />
-
-      <TextField
-        fullWidth
-        label="Password"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        error={!!errors.password}
-        helperText={errors.password}
-        margin="normal"
-      />
-
-      <Button type="submit" variant="contained" sx={{ mt: 2 }}>
-        Submit
-      </Button>
-    </Box>
-  );
-}
-```
-
----
-
-## Navigation Patterns
-
-### Breadcrumbs
-
-```tsx
-import { Breadcrumbs, Link, Typography } from '@wso2/oxygen-ui';
-import { ChevronRightIcon } from '@wso2/oxygen-ui-icons-react';
-
-function PageBreadcrumbs({ items }: { items: { label: string; href?: string }[] }) {
-  return (
-    <Breadcrumbs
-      separator={<ChevronRightIcon size={16} />}
-      sx={{ mb: 2 }}
-    >
-      {items.map((item, index) => {
-        const isLast = index === items.length - 1;
-        return isLast ? (
-          <Typography key={item.label} color="text.primary">
-            {item.label}
-          </Typography>
-        ) : (
-          <Link key={item.label} href={item.href} color="inherit" underline="hover">
-            {item.label}
-          </Link>
-        );
-      })}
-    </Breadcrumbs>
-  );
-}
-
-// Usage
-<PageBreadcrumbs
-  items={[
-    { label: 'Home', href: '/' },
-    { label: 'Users', href: '/users' },
-    { label: 'John Doe' },
-  ]}
-/>
-```
-
-### Tab Navigation
-
-```tsx
-import { useState } from 'react';
-import { Tabs, Tab, Box } from '@wso2/oxygen-ui';
-
-function TabNavigation() {
-  const [value, setValue] = useState(0);
-
-  return (
-    <Box>
-      <Tabs value={value} onChange={(_, newValue) => setValue(newValue)}>
-        <Tab label="Overview" />
-        <Tab label="Settings" />
-        <Tab label="Members" />
-      </Tabs>
-
-      <Box sx={{ p: 3 }}>
-        {value === 0 && <div>Overview content</div>}
-        {value === 1 && <div>Settings content</div>}
-        {value === 2 && <div>Members content</div>}
-      </Box>
-    </Box>
-  );
-}
-```
-
----
-
-## Theme Switching
-
-### Complete Theme Switcher Setup
-
-```tsx
-import {
-  OxygenUIThemeProvider,
-  OxygenTheme,
-  AcrylicOrangeTheme,
-  AcrylicPurpleTheme,
-  ChoreoTheme,
-  ClassicTheme,
-  HighContrastTheme,
-  PaleBaseTheme,
-  PaleGrayTheme,
-  PaleIndigoTheme,
-  useThemeSwitcher,
-  Select,
-  MenuItem,
-} from '@wso2/oxygen-ui';
-
-const themes = [
-  { key: 'default', label: 'Default', theme: OxygenTheme },
-  { key: 'orange', label: 'Acrylic Orange', theme: AcrylicOrangeTheme },
-  { key: 'purple', label: 'Acrylic Purple', theme: AcrylicPurpleTheme },
-  { key: 'choreo', label: 'Choreo', theme: ChoreoTheme },
-  { key: 'classic', label: 'Classic', theme: ClassicTheme },
-  { key: 'highContrast', label: 'High Contrast', theme: HighContrastTheme },
-  { key: 'paleBase', label: 'Pale Base', theme: PaleBaseTheme },
-  { key: 'paleGray', label: 'Pale Gray', theme: PaleGrayTheme },
-  { key: 'paleIndigo', label: 'Pale Indigo', theme: PaleIndigoTheme },
-];
-
-function ThemeSelector() {
-  const { currentTheme, themes, setTheme } = useThemeSwitcher();
-
-  return (
-    <Select
-      value={currentTheme}
-      onChange={(e) => setTheme(e.target.value as string)}
-      size="small"
-    >
-      {themes.map((t) => (
-        <MenuItem key={t.key} value={t.key}>
-          {t.label}
-        </MenuItem>
-      ))}
-    </Select>
-  );
-}
-
-function App() {
-  return (
-    <OxygenUIThemeProvider themes={themes} initialTheme="default">
-      <Header>
-        <Header.Actions>
-          <ThemeSelector />
-          <ColorSchemeToggle />
-        </Header.Actions>
-      </Header>
-      {/* Rest of app */}
-    </OxygenUIThemeProvider>
-  );
-}
-```
diff --git a/portals/api-control-plane/.claude/oxygen-ui/theming.md b/portals/api-control-plane/.claude/oxygen-ui/theming.md
deleted file mode 100644
index 6894d10dba..0000000000
--- a/portals/api-control-plane/.claude/oxygen-ui/theming.md
+++ /dev/null
@@ -1,334 +0,0 @@
-# Oxygen UI Theming Guide
-
-## Table of Contents
-- [Available Themes](#available-themes)
-- [Theme Provider](#theme-provider)
-- [Theme Properties](#theme-properties)
-- [Dark Mode](#dark-mode)
-- [CSS Variables](#css-variables)
-- [Custom Themes](#custom-themes)
-
----
-
-## Available Themes
-
-| Theme | Import | Description |
-|-------|--------|-------------|
-| OxygenTheme | `OxygenTheme` | Default theme (Acrylic Base) |
-| Acrylic Orange | `AcrylicOrangeTheme` | Glass-morphism effects, orange primary |
-| Acrylic Purple | `AcrylicPurpleTheme` | Glass-morphism with purple accents |
-| Choreo | `ChoreoTheme` | Choreo product theme (indigo-violet gradient) |
-| Classic | `ClassicTheme` | Standard flat design |
-| High Contrast | `HighContrastTheme` | Accessibility-focused with high contrast colors |
-| Pale Base | `PaleBaseTheme` | Minimal color palette for subtle interfaces |
-| Pale Gray | `PaleGrayTheme` | Soft gray tones for a muted appearance |
-| Pale Indigo | `PaleIndigoTheme` | Soft indigo tones for a calm interface |
-
-```tsx
-import {
-  OxygenTheme,
-  AcrylicOrangeTheme,
-  AcrylicPurpleTheme,
-  ChoreoTheme,
-  ClassicTheme,
-  HighContrastTheme,
-  PaleBaseTheme,
-  PaleGrayTheme,
-  PaleIndigoTheme,
-} from '@wso2/oxygen-ui';
-```
-
----
-
-## Theme Provider
-
-### Single Theme (Default)
-```tsx
-import { OxygenUIThemeProvider } from '@wso2/oxygen-ui';
-
-<OxygenUIThemeProvider>
-  <App />
-</OxygenUIThemeProvider>
-```
-
-### Single Custom Theme
-```tsx
-import { OxygenUIThemeProvider, ClassicTheme } from '@wso2/oxygen-ui';
-
-<OxygenUIThemeProvider theme={ClassicTheme}>
-  <App />
-</OxygenUIThemeProvider>
-```
-
-### Multiple Themes with Switching
-```tsx
-import {
-  OxygenUIThemeProvider,
-  OxygenTheme,
-  AcrylicOrangeTheme,
-  AcrylicPurpleTheme,
-  ChoreoTheme,
-  ClassicTheme,
-  HighContrastTheme,
-  PaleBaseTheme,
-  PaleGrayTheme,
-  PaleIndigoTheme,
-} from '@wso2/oxygen-ui';
-
-<OxygenUIThemeProvider
-  themes={[
-    { key: 'default', label: 'Default', theme: OxygenTheme },
-    { key: 'orange', label: 'Acrylic Orange', theme: AcrylicOrangeTheme },
-    { key: 'purple', label: 'Acrylic Purple', theme: AcrylicPurpleTheme },
-    { key: 'choreo', label: 'Choreo', theme: ChoreoTheme },
-    { key: 'classic', label: 'Classic', theme: ClassicTheme },
-    { key: 'highContrast', label: 'High Contrast', theme: HighContrastTheme },
-    { key: 'paleBase', label: 'Pale Base', theme: PaleBaseTheme },
-    { key: 'paleGray', label: 'Pale Gray', theme: PaleGrayTheme },
-    { key: 'paleIndigo', label: 'Pale Indigo', theme: PaleIndigoTheme },
-  ]}
-  initialTheme="default"
->
-  <App />
-</OxygenUIThemeProvider>
-```
-
-### Provider Props
-| Prop | Type | Description |
-|------|------|-------------|
-| `theme` | `Theme` | Single theme object |
-| `themes` | `ThemeOption[]` | Array of theme options for switching |
-| `initialTheme` | `string` | Initial theme key (when using `themes`) |
-
----
-
-## Theme Properties
-
-### Color Palette
-```tsx
-// Primary colors (orange gradient)
-theme.palette.primary.main     // #fa7b3f
-theme.palette.primary.light
-theme.palette.primary.dark
-
-// Secondary, error, warning, info, success
-theme.palette.secondary.main
-theme.palette.error.main
-theme.palette.warning.main
-theme.palette.info.main
-theme.palette.success.main
-
-// Background
-theme.palette.background.default
-theme.palette.background.paper
-```
-
-### Typography
-Font: **Inter Variable** (auto-bundled, no setup required)
-
-```tsx
-theme.typography.fontFamily     // 'Inter Variable', sans-serif
-theme.typography.fontSize       // 14 (base)
-
-// Heading variants
-theme.typography.h1             // 36px, bold
-theme.typography.h2             // 30px
-theme.typography.h3             // 24px
-theme.typography.h4             // 20px
-theme.typography.h5             // 16px
-theme.typography.h6             // 14px
-
-// Body variants
-theme.typography.body1          // 14px
-theme.typography.body2          // 12px
-theme.typography.caption        // 12px
-```
-
-### Custom Oxygen Properties
-```tsx
-// Glass-morphism blur effects
-theme.oxygen.blur.light         // 4px
-theme.oxygen.blur.medium        // 8px
-theme.oxygen.blur.heavy         // 16px
-
-// Border settings
-theme.oxygen.border.width       // '1px'
-theme.oxygen.border.style       // 'solid'
-
-// Gradient
-theme.oxygen.gradient.primary   // linear-gradient(135deg, #e74420 0%, #fa7b3f 100%)
-
-// Transparent paper (for glass effects)
-theme.oxygen.paperTransparent.light  // rgba(255,255,255,0.7)
-theme.oxygen.paperTransparent.dark   // rgba(0,0,0,0.5)
-
-// Syntax highlighting colors
-theme.oxygen.syntax.light.keyword
-theme.oxygen.syntax.dark.keyword
-```
-
----
-
-## Dark Mode
-
-### Color Scheme Toggle
-```tsx
-import { ColorSchemeToggle } from '@wso2/oxygen-ui';
-
-// Cycles through: light → dark → system
-<ColorSchemeToggle />
-```
-
-### Adaptive Images
-```tsx
-import { ColorSchemeImage } from '@wso2/oxygen-ui';
-
-<ColorSchemeImage
-  light="/images/logo.svg"
-  dark="/images/logo-dark.svg"
-  alt="Company Logo"
-/>
-```
-
-### Programmatic Mode Access
-```tsx
-import { useTheme } from '@wso2/oxygen-ui';
-
-const theme = useTheme();
-const isDark = theme.palette.mode === 'dark';
-```
-
-### useThemeContent Hook
-```tsx
-import { useThemeContent } from '@wso2/oxygen-ui';
-
-const content = useThemeContent({
-  light: 'Show this in light mode',
-  dark: 'Show this in dark mode'
-});
-```
-
----
-
-## CSS Variables
-
-Oxygen UI uses CSS variables with the `--oxygen` prefix.
-
-### Key Variables
-```css
-/* Colors */
---oxygen-palette-primary-main
---oxygen-palette-background-default
---oxygen-palette-background-paper
---oxygen-palette-text-primary
-
-/* Typography */
---oxygen-typography-fontFamily
---oxygen-typography-fontSize
-
-/* Shadows (disabled by default) */
---oxygen-shadows-0
-```
-
-### Accessing in Styles
-```tsx
-<Box
-  sx={{
-    backgroundColor: 'var(--oxygen-palette-background-paper)',
-    color: 'var(--oxygen-palette-text-primary)',
-  }}
-/>
-```
-
-### Color Scheme Selector
-The theme uses `data-color-scheme` attribute for mode switching:
-
-```css
-[data-color-scheme="light"] {
-  --oxygen-palette-background-default: #ffffff;
-}
-
-[data-color-scheme="dark"] {
-  --oxygen-palette-background-default: #121212;
-}
-```
-
----
-
-## Custom Themes
-
-### Extending Base Theme
-```tsx
-import { extendTheme } from '@mui/material/styles';
-import { OxygenThemeBase } from '@wso2/oxygen-ui';
-
-const customTheme = extendTheme({
-  ...OxygenThemeBase,
-  colorSchemes: {
-    light: {
-      palette: {
-        primary: {
-          main: '#1976d2', // Custom blue
-        },
-      },
-    },
-    dark: {
-      palette: {
-        primary: {
-          main: '#90caf9',
-        },
-      },
-    },
-  },
-});
-
-<OxygenUIThemeProvider theme={customTheme}>
-  <App />
-</OxygenUIThemeProvider>
-```
-
-### Component Overrides
-```tsx
-const customTheme = extendTheme({
-  ...OxygenThemeBase,
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: 8,
-          textTransform: 'none',
-        },
-      },
-    },
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          backdropFilter: 'blur(8px)',
-        },
-      },
-    },
-  },
-});
-```
-
-### Theme Switching in Components
-```tsx
-import { useThemeSwitcher } from '@wso2/oxygen-ui';
-
-function ThemeSelector() {
-  const { currentTheme, setTheme, themes } = useThemeSwitcher();
-
-  return (
-    <Select value={currentTheme} onChange={(e) => setTheme(e.target.value)}>
-      {themes.map((t) => (
-        <MenuItem key={t.key} value={t.key}>
-          {t.label}
-        </MenuItem>
-      ))}
-    </Select>
-  );
-}
-```
-
-### LocalStorage Persistence
-Theme selection is automatically persisted to localStorage with the key `oxygen-theme`. The provider reads the saved theme on mount and applies it.
diff --git a/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md b/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md
new file mode 100644
index 0000000000..f1b41e2b1f
--- /dev/null
+++ b/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md
@@ -0,0 +1,386 @@
+---
+name: apicp-ui
+description: Build or change UI in portals/api-control-plane — pages, components, forms, dialogs, listings, app shell/navigation, theming, and MUI→Oxygen migration. Covers the Oxygen UI (@wso2/oxygen-ui) component/theming API plus this app's own rules for data access (hooks only), i18n (react-intl), routing/scope gating, and tests. Use for any .tsx/.ts work under portals/api-control-plane/src, and whenever asked how a page, listing, form, sidebar item, or theme override should be built here.
+---
+
+# UI development — api-control-plane
+
+One skill for all UI work in `portals/api-control-plane`. It replaces the four generated
+`oxygen-*` skills and `.claude/oxygen-ui/*.md`: everything load-bearing from those is condensed
+below, and the full vendor reference is still on disk (see *Where the truth lives*).
+
+## Where the truth lives
+
+Verify before you invent. In priority order:
+
+| Question | Source |
+| --- | --- |
+| Does this component/prop/sub-component exist? | `node_modules/@wso2/oxygen-ui/dist/**/*.d.ts` — the compiled types, ground truth |
+| Full Oxygen component/pattern/theming reference | `node_modules/@wso2/oxygen-ui/.ai/{components,patterns,theming,migration}.md` (shipped with the package; identical to the docs previously copied into `.claude/oxygen-ui/`) |
+| Which icon names exist | `node_modules/@wso2/oxygen-ui-icons-react/dist/index.d.ts` → 8 brand icons + `export * from "lucide-react"` |
+| Data-access layer rules | `src/api/README.md` |
+| i18n rules | `src/i18n/README.md` |
+| Test conventions | `src/test/README.md` |
+| Layer bans, i18n lint rules | `eslint.config.js` — the restrictions are documented inline there |
+| Online / upstream | <https://github.com/wso2/oxygen-ui> (`packages/oxygen-ui/.ai/*.md`, `src/components/**`). No hosted docs site exists as of v0.13.1 — fetch the repo, not a guessed URL. |
+
+Vendor docs lag the package. Two known errors in them — **do not copy**:
+- `<Grid item xs={12}>` → this app is on `@mui/material` v9 Grid v2: `<Grid size={{ xs: 12, md: 4 }}>`, no `item`.
+- `HomeIcon`/`TrashIcon` naming → this codebase uses bare lucide names (`Home`, `Trash2`, `Plus`). Both aliases resolve; stay with the bare form.
+- They also omit components that do exist (`AppBreadcrumbs`, `PageTitle.Actions`, `PageTitle.BackButton`, `ColorSchemeSVG`).
+
+`npx @wso2/oxygen-ui init --claude` / `update --claude` regenerates `.claude/oxygen-ui/` and the
+`oxygen-*` skills. If someone runs it, delete the regenerated files again — this skill is the
+project's single entry point, and `node_modules/@wso2/oxygen-ui/.ai/` already carries the reference.
+
+## Non-negotiables
+
+1. **Every source file starts with the Apache-2.0 header** (`Copyright (c) 2026, WSO2 LLC.` block — copy it from any neighbouring file).
+2. **All components come from `@wso2/oxygen-ui`**, never `@mui/material`. All icons from `@wso2/oxygen-ui-icons-react`, never `lucide-react`/`@mui/icons-material`.
+3. **Backend access goes through a hook in `src/api/resources/<resource>`** — nothing else. ESLint blocks endpoints, queries, query keys, transport, generated types and legacy clients.
+4. **No user-facing literal strings.** `<FormattedMessage>` for JSX, `intl.formatMessage` for string props. IDs are `apiControlPlane.<area>.<Module>.<slug>`.
+5. **No colour, radius, blur, shadow or border literals.** Theme tokens (`bgcolor: 'background.paper'`, `color: 'text.secondary'`, `spacing` numbers) or a recipe from `src/theme/receipes.ts`. Local `sx` is for layout only.
+6. **Scoped pages wrap their body in `ScopeGate`** (see *Routing, scope and navigation*).
+7. **Never “resolve” a rule from `.claude/rules/*` with a `// TODO`.** Those rules (XSS/output encoding, dependency management, error handling) apply to this portal's `.ts`/`.tsx` too.
+
+Verification loop, in order: `npm run typecheck` → `npm run lint` → `npm run test` → `npm run i18n`
+(commit `src/i18n/messages/`, never `src/i18n/compiled/`).
+
+## Project map
+
+```
+src/
+  api/            resources/<name>/{endpoints,queries,hooks}.ts + core/ (http, scope, spec, queryKeys)
+  components/     app-wide: StateViews (Loading/Empty/Error), ConfirmDialog, Notifications,
+                  ErrorBoundary, AppLoader, ComingSoon, cards/*, common/*
+  contexts/auth/  AuthProvider + AuthStateContext
+  hooks/          cross-cutting hooks (ProductActivation)
+  i18n/           I18nProvider, useLocale, useFormatters, formats.ts, messages/ (source catalogs)
+  navigation/     navigationRegistry.tsx (the sidebar), navigationTypes, useNavigationItems
+  pages/
+    auth/         LoginPage, AuthCallbackPage
+    appShell/     AppLayout, AppHeader, AppSidebar, *QuickSelector
+      appShellPages/<feature>/  the actual pages (+ components/, utils/ per feature)
+  routes/         paths.ts (route builders), AppRoutes.tsx, ProtectedRoute
+  scope/          ConsoleScopeProvider/Context, ScopeGate, consoleRouteParams
+  slots/          Slot + Hideable extension primitives
+  theme/          AppThemeProvider, themes.ts, receipes.ts, emotionCache
+  test/           renderWithProviders, MSW server + toolkit, mock scope/auth
+  extensions.tsx  extension registration; hostPort.tsx  the value handed to extensions
+```
+
+Provider order (`App.tsx`, outermost first): `I18nProvider` → `AppThemeProvider` →
+`NotificationProvider` → `AppQueryProvider` → `ApiClientProvider` → `ErrorBoundary` →
+`BrowserRouter` → `AuthProvider` → `ExtensionsProvider` → `AppRoutes`. Inside a protected route:
+`ConsoleScopeProvider` → `AppLayout`. Don't add a provider without a reason that names its position.
+
+---
+
+## Oxygen UI essentials
+
+### Imports
+
+```tsx
+import { Box, Button, Card, PageTitle, Stack, Typography } from '@wso2/oxygen-ui';
+import { Plus, Search, Trash2 } from '@wso2/oxygen-ui-icons-react';   // lucide names, size={18}
+import { DataGrid, DatePickers, TreeView, AdapterDateFns } from '@wso2/oxygen-ui'; // MUI X namespaces
+```
+
+`@wso2/oxygen-ui` re-exports **all** of `@mui/material` plus Oxygen's own components, `styled`,
+`alpha`, `useTheme`, `Theme`. MUI X ships as namespaces: `<DataGrid.DataGrid …>`,
+`<DatePickers.DatePicker …>`, `<TreeView.SimpleTreeView>`. Charts live in
+`@wso2/oxygen-ui-charts-react`, which is **not installed here** — adding it is a dependency change
+(`.claude/rules/js-dependency-management.md`).
+
+### Oxygen's own components (beyond MUI)
+
+| Component | Sub-components / notes |
+| --- | --- |
+| `AppShell` | `.Navbar` `.Sidebar` `.Main` `.Footer` `.NotificationPanel`; props `initialCollapsed`, `collapseOnSelectOnMobile`. Wired once in `AppLayout` — pages never touch it. |
+| `Header` | `.Toggle` `.Brand` `.BrandLogo` `.BrandTitle` `.Switchers` `.Actions` `.Spacer`; `minimal` hides switchers |
+| `Sidebar` | `.Nav` `.Category` `.CategoryLabel` `.Item` `.ItemIcon` `.ItemLabel` `.ItemBadge` `.Footer` `.User*`; props `collapsed`, `activeItem`, `expandedMenus`, `onSelect`, `onToggleExpand`. An `Item` with nested children toggles instead of navigating. |
+| `Footer` | `.Copyright` `.Version` `.Divider` (left) · `.Link` (right) |
+| `UserMenu` | `.Trigger` `.Header` `.Item` `.Logout` `.Divider` |
+| `NotificationPanel` | `.Header{,Icon,Title,Badge,Close}` `.Tabs` `.Actions` `.List` `.Item{,Avatar,Title,Message,Timestamp,Action}` `.EmptyState` |
+| `PageTitle` | `.Header` `.SubHeader` `.Avatar` `.Link` `.Actions` `.BackButton` — the standard page heading |
+| `PageContent` | padding/max-width wrapper; `fullWidth`. Already applied by `AppLayout`, so a page starts at its own content. |
+| `AppBreadcrumbs` | `items: BreadcrumbItem[]`; rendered by `AppLayout` from route scope |
+| `ListingTable` | `.Provider` `.Container` `.Toolbar` `.Head` `.Body` `.Footer` `.Row` `.Cell` `.SortLabel` `.RowActions` `.CellIcon` `.EmptyState` `.DensityControl`; `variant='table'\|'card'`, `density`, `striped`, `bordered`. Prefer over raw MUI `Table`. |
+| `Form` | `.Section` `.Header` `.Subheader` `.Body` `.Stack` `.ElementWrapper` `.Wizard` `.CardButton` `.Card{Header,Content,Actions,Media}` |
+| `ComplexSelect` | `.MenuItem` + `.MenuItem.Icon` / `.MenuItem.Text` — icon+text options inside a `Select` |
+| `SearchBar`, `SearchBarWithAdvancedFilter`, `StatCard`, `CodeBlock`, `ColorSchemeToggle`, `ColorSchemeImage`, `ColorSchemeSVG`, `ThemeSwitcher`, `NotificationBanner`, `ParticleBackground`, `Layout` (`.Navbar` `.Sidebar` `.Content` `.Header`) | single-purpose; check the `.d.ts` for props |
+
+Hooks: `useTheme`, `useThemeSwitcher`, `useThemeContent`, `useAppShell`, `useNotifications`
+(Oxygen's own — not this app's `src/components/Notifications`), `useHeader`, `useSidebar`,
+`useNotificationPanel`, `useListingTable` / `useListingTableRequired`.
+Utils: `formatRelativeTime`, `pxToRem`, `alpha`.
+
+### Theming
+
+`AppThemeProvider` (`src/theme/`) wraps `OxygenUIThemeProvider` with a one-entry registry —
+`AcrylicOrangeTheme` — plus the app's emotion cache and `<CssBaseline />`. Don't add a second theme
+or call `OxygenUIThemeProvider` anywhere else.
+
+Three tiers, in order of preference:
+
+1. **Theme** — global decisions owned by Oxygen (`theme.palette.*`, `theme.typography.*`, `theme.border.*`, `theme.zIndex.*`, `theme.oxygen.*` for blur/gradient/glass/syntax).
+2. **Recipes** — `src/theme/receipes.ts`: `hairline(theme)`, `glassSurfaceSx(theme)`, `interactiveCardSx`, `stickyBottomBarSx(theme)`, `overlayBarShadow`. A repeated multi-property treatment goes here, once.
+3. **Local `sx`** — layout only: flex, gap, grid, min/max sizing.
+
+```tsx
+<Card sx={(theme) => ({ ...glassSurfaceSx(theme), display: 'flex', gap: 2 })} />
+```
+
+Dark mode: the theme is CSS-variable based (`--oxygen-*`, `data-color-scheme` attribute), so token
+usage adapts for free. Read the mode with `useTheme().palette.mode` only when behaviour (not colour)
+must branch.
+
+---
+
+## Page patterns
+
+### Page skeleton
+
+```tsx
+export function ThingListPage() {
+  // Gate the whole body, not just the JSX: out of scope the query stays disabled
+  // and `isPending` never clears, so a loading branch would hang forever.
+  return (
+    <ScopeGate
+      prompt="Things are created and managed at the project level."
+      requires="project"
+      to={routes.things}
+    >
+      <ThingList />
+    </ScopeGate>
+  );
+}
+
+function ThingList() {
+  const intl = useIntl();
+  const thingsQuery = useThings();
+  const { notify } = useNotifications();
+
+  // `isPending`, not `isLoading` — a disabled query has isLoading=false with no
+  // data, which would flash the empty state.
+  if (thingsQuery.isPending) return <LoadingState label="Loading things" />;
+  if (thingsQuery.error) return <ErrorState message="Unable to load things" />;
+
+  const things = thingsQuery.data?.list ?? [];
+
+  return (
+    <>
+      <PageTitle>
+        <PageTitle.Header><FormattedMessage {...messages.title} /></PageTitle.Header>
+        <PageTitle.SubHeader><FormattedMessage {...messages.subtitle} /></PageTitle.SubHeader>
+        <PageTitle.Actions>
+          <Button startIcon={<Plus />} variant="contained" onClick={create}>
+            <FormattedMessage {...messages.create} />
+          </Button>
+        </PageTitle.Actions>
+      </PageTitle>
+
+      {things.length === 0 ? (
+        <EmptyState
+          title={intl.formatMessage(messages.emptyTitle)}
+          description={intl.formatMessage(messages.emptyBody)}
+          actionLabel={intl.formatMessage(messages.create)}
+          onAction={create}
+        />
+      ) : (
+        <Stack spacing={2}>{/* toolbar row, then grid/list */}</Stack>
+      )}
+    </>
+  );
+}
+```
+
+State views come from `src/components/StateViews` — `LoadingState({label, fullScreen})`,
+`EmptyState({title, description, actionLabel, onAction})`, `ErrorState({title, message})`.
+Never hand-roll a spinner or an error `Alert`.
+
+Reference implementations to copy from: `apis/ApiListPage.tsx` (list + search + grid/list toggle +
+delete), `apis/ApiDetailPage.tsx` (tabbed detail), `gateways/GatewayCreatePage.tsx` (create flow),
+`apis/overview/ApiKeysPanel.tsx` (`ListingTable`), `projects/NewProjectDialog.tsx` (dialog form).
+
+### Feedback and confirmation
+
+```tsx
+const { notify } = useNotifications();            // src/components/Notifications
+notify('Deleted "Orders API".', 'success');       // 'success' | 'info' | 'warning' | 'error'
+```
+
+Mutation errors already surface globally (the QueryClient's `onMutationError` notifies), so a
+per-call `onError` is for *better* copy, never for making the error visible at all.
+
+Destructive actions use `ConfirmDialog` (`src/components/ConfirmDialog`), with `destructive` and —
+for irreversible deletes — `confirmPhrase` + `confirmInputLabel` (type-the-name):
+
+```tsx
+<ConfirmDialog
+  open={toDelete !== null}
+  title="Delete API"
+  message={`This permanently deletes "${toDelete?.displayName}" and all related details.`}
+  confirmLabel="Delete"
+  confirmPhrase={toDelete?.displayName ?? ''}
+  destructive
+  loading={mutation.isPending}
+  onCancel={() => setToDelete(null)}
+  onConfirm={confirmDelete}
+/>
+```
+
+### Forms
+
+Controlled state + `error`/`helperText`; group with `Form.Section` / `Form.Stack`; multi-step with
+`Form.Wizard` (or `Stepper` where a wizard is overkill). Labels and helper text go through
+`intl.formatMessage`. Field errors from the API arrive as `ApiError.fieldErrors` — map them onto the
+matching field instead of dumping the message into a banner.
+
+```tsx
+<Form.Section>
+  <Form.Header><FormattedMessage {...messages.detailsHeader} /></Form.Header>
+  <Form.Subheader><FormattedMessage {...messages.detailsHint} /></Form.Subheader>
+  <Form.Stack spacing={2}>
+    <TextField
+      error={Boolean(errors.name)}
+      helperText={errors.name}
+      label={intl.formatMessage(messages.nameLabel)}
+      onChange={(event) => setName(event.target.value)}
+      required
+      value={name}
+    />
+  </Form.Stack>
+</Form.Section>
+```
+
+### Accessibility and small conventions
+
+- A `Select` needs `labelId` pointing at its `FormLabel id` — a bare `FormLabel` leaves the combobox with no accessible name (and nothing for tests to query).
+- Icon-only buttons need `aria-label` (translated).
+- Icon size is explicit: `<Search size={18} />`.
+- Newer files sort JSX props and `sx` keys alphabetically; follow the file you're editing.
+- Truncate rather than widen: `minWidth: 0` + `overflow: 'hidden'` + `noWrap`.
+
+---
+
+## Data access (`src/api`)
+
+Full rules in `src/api/README.md`. What a UI author must know:
+
+- Import **only** hooks: `useThings()`, `useThing(id)`, `useCreateThing()`, `useUpdateThing()`, `useDeleteThing()`. Endpoints/queries/keys/http/generated types are ESLint-blocked from the UI.
+- Hooks resolve org/project from route scope via `useApiScope()`; pass overrides only for a genuine cross-scope read.
+- Scoped queries are `enabled`-gated, so **branch on `isPending`**, not `isLoading`.
+- Errors are always `ApiError` — branch on `error.code`, never HTTP status; `fieldErrors`, `details`, `trackingId` are available. Never render `error.message` as translated copy.
+- Lists: read `pagination.total`, never `list.length`.
+- Adding a backend call = three files (`*.endpoints.ts`, `*.queries.ts`, `*.hooks.ts`) copied from `resources/restApis/`, plus `npm run api:codegen` if the spec changed. Never hand-write a request/response type — derive from the `operationId` with `ResponseOf`/`BodyOf`/`QueryOf`/`PathOf`.
+- A legacy layer (`client.ts`, `mvpApi.ts`, `*/*Client.ts`) still serves some pages. Don't extend it; port the page.
+
+Route scope for rendering (not fetching) comes from `useConsoleScope()`:
+`{ params, activeScope, organization(s), project(s), component, capabilities, isOrganizationScope, isProjectScope, isApiScope, isLoading, projectsError }`.
+
+---
+
+## i18n
+
+Full rules in `src/i18n/README.md`. The short form:
+
+```tsx
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; // direct import, always
+
+const messages = defineMessages({           // module scope — extraction is static
+  title: { id: 'apiControlPlane.pages.apis.ApiListPage.title', defaultMessage: 'APIs' },
+  nameLabel: {
+    id: 'apiControlPlane.pages.apis.ApiListPage.nameLabel',
+    defaultMessage: 'Name',
+    description: 'Label for the API name field. Noun, not a command.',
+  },
+});
+```
+
+- ID = `apiControlPlane.<area>.<Module>.<slug>`; `<area>` mirrors the `src/` path (`/`→`.`, filename dropped). Renaming an ID discards its translations; `defaultMessage` may change freely.
+- One sentence = one message. Never concatenate; use ICU placeholders/plurals/rich-text tags.
+- Never translate backend or user data — pass it through as a *value*.
+- Dates/numbers via `useFormatters()` (`shortDate`, `dateTime`, `relativeTime`) or `<FormattedDate>`/`<FormattedNumber>` — never `toLocaleString()` or a module-scope `Intl.*`.
+- After changing strings: `npm run i18n`, commit `src/i18n/messages/`. `npm run lint:i18n` lists remaining hardcoded JSX (the rule is `warn`, so `npm run lint --quiet` skips it). Check layout growth with `?lang=en-XA`.
+
+---
+
+## Routing, scope and navigation
+
+Three tiers of scope live in the URL: `/organizations/:orgHandle`,
+`.../projects/:projectHandler`, `.../apis/:apiHandler`. A page that needs deeper scope than the
+current URL still mounts — at a **scope-less alias** where `select-scope` (`SELECT_SCOPE_SEGMENT`)
+replaces the missing segments — and `ScopeGate` renders a picker until the handles are filled in.
+That is why every sidebar item stays clickable at every scope.
+
+Adding a page, end to end:
+
+1. **`src/routes/paths.ts`** — add a builder using `projectPath`/`apiPath` so the alias is generated for you:
+   ```ts
+   thingDetail: (orgHandle = ':orgHandle', projectHandler: ScopeHandle = ':projectHandler') =>
+     projectPath(orgHandle, projectHandler, 'things/detail'),
+   ```
+2. **`src/routes/AppRoutes.tsx`** — `lazy()`-import the page and register every path it answers on:
+   ```tsx
+   {scopedRoutes(projectScopedPaths(routes.thingDetail), <ThingDetailPage />)}
+   ```
+   (`apiScopedPaths` for API-level pages; a single `<Route>` only when the page has no alias.)
+3. **The page** wraps its body in `ScopeGate` with `requires` + `to={routes.thingDetail}`.
+4. **`src/navigation/navigationRegistry.tsx`** — add the sidebar entry. Build `to`/`match` from the *same* builder via the helpers, never by hand: `orgLevelTo`, `apiLevelTo`, `matchRoutes`, `submenu([...])` for a parent with children, `adaptive([...tiers])` for one item that degrades across scopes, `apiCapability(...)` for capability gating (which only applies once an API is in scope).
+
+Never hand-write a path string or a `match` regex: `routes.*` is the single source, and
+`paths.test.ts` / `navigationRegistry.test.ts` guard the pairing.
+
+Extension points: `Slot` / `Hideable` (`src/slots/`) — a named additive slot plus a suppressible
+region for built-in UI; extensions receive a plain `CloudHostPort` value (`src/hostPort.tsx`), not a
+shared context. Keep `src/slots/index.tsx` free of portal-specific types; it is copied verbatim into
+other hosts.
+
+---
+
+## Tests
+
+Full conventions in `src/test/README.md`.
+
+- Colocate as `*.test.ts` / `*.test.tsx`. Always render through `renderWithProviders` (never wrap providers by hand):
+  ```tsx
+  const { user } = renderWithProviders(<ApiListPage />, {
+    route: '/organizations/api-platform-demo/projects/retail-apis/apis',
+    scope: makeConsoleScope(),
+    authState: authStatePresets.authenticated(),
+  });
+  ```
+- Mock at the network boundary with MSW, never a client or a hook. The server ships **no default handlers** and fails unhandled requests, so each test declares its endpoints via `collection` / `resource` / `accepts` / `noContent` / `failure` / `recorder` and spec-typed fixtures (`aRestApi`, `manyRestApis`). Build URLs with `apiUrl('/things')`; call `resetHttpClient()` in `beforeEach`.
+- `renderWithProviders` supplies `IntlProvider` with empty messages, so assert on the English `defaultMessage`.
+- Prefer `userEvent`; query by role/label; await with `findBy*`. To prove *no* request fired, await a short timeout then assert `requests.count() === 0` — `waitFor` proves nothing there.
+- Hook tests go one per *shape*, not per resource; endpoint tests one per resource.
+
+---
+
+## Migrating existing MUI code
+
+| From | To |
+| --- | --- |
+| `@mui/material`, `@mui/material/styles` (`styled`, `alpha`, `useTheme`) | `@wso2/oxygen-ui` |
+| `@mui/icons-material`, `lucide-react` | `@wso2/oxygen-ui-icons-react` (bare lucide names, explicit `size`) |
+| `@mui/x-data-grid` / `x-date-pickers` / `x-tree-view` | `DataGrid.*` / `DatePickers.*` / `TreeView.*` from `@wso2/oxygen-ui` |
+| `ThemeProvider` + `createTheme` | nothing — `AppThemeProvider` already owns this |
+| `AppBar`/`Toolbar`/`Drawer` layout | `AppShell` + `Header` + `Sidebar` (already in `AppLayout`) |
+| `Table`/`TableHead`/`TableRow`/`TableCell` | `ListingTable.*` |
+| `<Grid item xs={12} md={4}>` | `<Grid size={{ xs: 12, md: 4 }}>` |
+| `useColorScheme()` | `<ColorSchemeToggle />`, or `useTheme().palette.mode` |
+| hardcoded colours/spacing | theme tokens, or a recipe in `src/theme/receipes.ts` |
+| hardcoded JSX strings | `FormattedMessage` / `intl.formatMessage` (add to `defineMessages`) |
+| direct client/axios calls | a hook from `src/api/resources/<resource>` |
+
+## Review checklist
+
+- Apache header present; imports only from `@wso2/oxygen-ui` + `@wso2/oxygen-ui-icons-react`.
+- No user-facing literal; every new message has an ID in the house format (and a `description` where a translator could misread it).
+- Data via hooks; `isPending` used for the loading branch; `ApiError.code` for branching; `pagination.total` for counts.
+- Scoped page wrapped in `ScopeGate`; `to` is the page's own `routes.*` builder; route registered for the alias paths too; sidebar `to`/`match` derived from the same builder.
+- Colours/spacing/borders via tokens or recipes; local `sx` limited to layout.
+- Loading/empty/error use `StateViews`; destructive actions use `ConfirmDialog`; feedback via `useNotifications`.
+- `Select` has `labelId`; icon-only buttons have a translated `aria-label`.
+- `npm run typecheck && npm run lint && npm run test` clean; `npm run i18n` run and `src/i18n/messages/` committed (never `src/i18n/compiled/`).
diff --git a/portals/api-control-plane/.claude/skills/oxygen-component/SKILL.md b/portals/api-control-plane/.claude/skills/oxygen-component/SKILL.md
deleted file mode 100644
index a88c11a321..0000000000
--- a/portals/api-control-plane/.claude/skills/oxygen-component/SKILL.md
+++ /dev/null
@@ -1,147 +0,0 @@
----
-name: oxygen-component
-description: Generate Oxygen UI React components following best practices. Use when creating new components, data tables, cards, or UI elements with the Oxygen UI library.
----
-
-# Generate Oxygen UI Component
-
-## Instructions
-
-1. Read `.claude/oxygen-ui/CLAUDE.md` for critical rules
-2. Read `.claude/oxygen-ui/components.md` for API reference
-3. Generate component using Oxygen UI patterns
-
-## Critical Rules
-
-- Import ALL components from `@wso2/oxygen-ui` (never from `@mui/material`)
-- Import icons from `@wso2/oxygen-ui-icons-react`
-- Use theme tokens via `sx` prop (e.g., `p: 2`, `bgcolor: 'background.paper'`)
-- Never hardcode colors or spacing values
-- For data tables, prefer `ListingTable` over MUI's `Table`
-- For layouts, use `AppShell`, `Header`, `Sidebar`
-
-## Component Template
-
-```tsx
-import { Box, Typography, Button } from '@wso2/oxygen-ui';
-import { IconName } from '@wso2/oxygen-ui-icons-react';
-
-interface MyComponentProps {
-  // Define props
-}
-
-function MyComponent({ ...props }: MyComponentProps) {
-  return (
-    <Box sx={{ p: 2, bgcolor: 'background.paper' }}>
-      {/* Component content */}
-    </Box>
-  );
-}
-
-export default MyComponent;
-```
-
-## Common Patterns
-
-### Data Table Component
-
-```tsx
-import { ListingTable, Chip, IconButton } from '@wso2/oxygen-ui';
-import { EditIcon, TrashIcon } from '@wso2/oxygen-ui-icons-react';
-
-<ListingTable.Container>
-  <ListingTable.Toolbar showSearch actions={<Button>Add Item</Button>} />
-  <ListingTable variant="card">
-    <ListingTable.Head>
-      <ListingTable.Row>
-        <ListingTable.Cell>Name</ListingTable.Cell>
-        <ListingTable.Cell>Status</ListingTable.Cell>
-        <ListingTable.Cell align="right">Actions</ListingTable.Cell>
-      </ListingTable.Row>
-    </ListingTable.Head>
-    <ListingTable.Body>
-      {data.map((item) => (
-        <ListingTable.Row key={item.id}>
-          <ListingTable.Cell>{item.name}</ListingTable.Cell>
-          <ListingTable.Cell>
-            <Chip label={item.status} color="success" size="small" />
-          </ListingTable.Cell>
-          <ListingTable.Cell align="right">
-            <IconButton size="small"><EditIcon size={18} /></IconButton>
-            <IconButton size="small" color="error"><TrashIcon size={18} /></IconButton>
-          </ListingTable.Cell>
-        </ListingTable.Row>
-      ))}
-    </ListingTable.Body>
-  </ListingTable>
-</ListingTable.Container>
-```
-
-### Card Component
-
-```tsx
-import { Paper, Typography, Box, Button } from '@wso2/oxygen-ui';
-
-<Paper sx={{ p: 3 }}>
-  <Typography variant="h6" gutterBottom>Card Title</Typography>
-  <Typography color="text.secondary" sx={{ mb: 2 }}>
-    Card description text
-  </Typography>
-  <Box sx={{ display: 'flex', gap: 1 }}>
-    <Button variant="contained">Primary</Button>
-    <Button variant="outlined">Secondary</Button>
-  </Box>
-</Paper>
-```
-
-### Dialog Component
-
-```tsx
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-  Button,
-} from '@wso2/oxygen-ui';
-
-<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
-  <DialogTitle>Dialog Title</DialogTitle>
-  <DialogContent>
-    <DialogContentText>Dialog content goes here.</DialogContentText>
-  </DialogContent>
-  <DialogActions>
-    <Button onClick={onClose}>Cancel</Button>
-    <Button variant="contained" onClick={onConfirm}>Confirm</Button>
-  </DialogActions>
-</Dialog>
-```
-
-## MUI X Components (Use Namespaces)
-
-```tsx
-import { DataGrid, DatePickers, TreeView } from '@wso2/oxygen-ui';
-
-// DataGrid
-<DataGrid.DataGrid rows={rows} columns={columns} />
-
-// DatePickers
-<DatePickers.DatePicker value={date} onChange={setDate} />
-
-// TreeView
-<TreeView.SimpleTreeView>
-  <TreeView.TreeItem itemId="1" label="Item 1" />
-</TreeView.SimpleTreeView>
-```
-
-## Charts (Separate Package)
-
-```tsx
-// Charts are in a separate package built on Recharts
-import { LineChart, BarChart, PieChart } from '@wso2/oxygen-ui-charts-react';
-
-<LineChart series={series} />
-<BarChart series={series} />
-<PieChart series={series} />
-```
diff --git a/portals/api-control-plane/.claude/skills/oxygen-form/SKILL.md b/portals/api-control-plane/.claude/skills/oxygen-form/SKILL.md
deleted file mode 100644
index e9fb243eba..0000000000
--- a/portals/api-control-plane/.claude/skills/oxygen-form/SKILL.md
+++ /dev/null
@@ -1,410 +0,0 @@
----
-name: oxygen-form
-description: Generate forms with Form.* components and validation. Use when creating input forms, multi-step wizards, or form validation.
----
-
-# Generate Oxygen UI Form
-
-## Instructions
-
-1. Read `.claude/oxygen-ui/components.md` for Form.* API
-2. Use `Form.Section` for grouping fields
-3. Use `Form.Stack` for field layout
-4. Add validation with `error` and `helperText` props
-
-## Critical Rules
-
-- Import form components from `@wso2/oxygen-ui`
-- Use controlled components with state
-- Show validation errors with `error` and `helperText` props
-- Use theme tokens for spacing
-
-## Basic Form
-
-```tsx
-import { useState } from 'react';
-import { Box, TextField, Button, Alert } from '@wso2/oxygen-ui';
-
-function BasicForm() {
-  const [formData, setFormData] = useState({ name: '', email: '' });
-  const [errors, setErrors] = useState<Record<string, string>>({});
-
-  const validate = () => {
-    const newErrors: Record<string, string> = {};
-
-    if (!formData.name) {
-      newErrors.name = 'Name is required';
-    }
-
-    if (!formData.email) {
-      newErrors.email = 'Email is required';
-    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-      newErrors.email = 'Invalid email format';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (validate()) {
-      console.log('Form submitted:', formData);
-    }
-  };
-
-  return (
-    <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400 }}>
-      <TextField
-        fullWidth
-        label="Name"
-        value={formData.name}
-        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-        error={!!errors.name}
-        helperText={errors.name}
-        margin="normal"
-        required
-      />
-
-      <TextField
-        fullWidth
-        label="Email"
-        type="email"
-        value={formData.email}
-        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-        error={!!errors.email}
-        helperText={errors.email}
-        margin="normal"
-        required
-      />
-
-      <Button type="submit" variant="contained" sx={{ mt: 2 }}>
-        Submit
-      </Button>
-    </Box>
-  );
-}
-```
-
-## Form with Sections
-
-```tsx
-import { Form, TextField, Button, Box } from '@wso2/oxygen-ui';
-
-function SectionedForm() {
-  return (
-    <Box sx={{ maxWidth: 600 }}>
-      <Form.Section>
-        <Form.Header>Personal Information</Form.Header>
-        <Form.Subheader>Enter your basic details</Form.Subheader>
-
-        <Form.Stack spacing={2}>
-          <Form.TextInput label="First Name" required />
-          <Form.TextInput label="Last Name" required />
-          <Form.TextInput label="Email" type="email" required />
-        </Form.Stack>
-      </Form.Section>
-
-      <Form.Section>
-        <Form.Header>Company Details</Form.Header>
-        <Form.Subheader>Optional information about your organization</Form.Subheader>
-
-        <Form.Stack spacing={2}>
-          <Form.TextInput label="Company Name" />
-          <Form.SelectInput label="Role">
-            <Form.MenuItem value="developer">Developer</Form.MenuItem>
-            <Form.MenuItem value="designer">Designer</Form.MenuItem>
-            <Form.MenuItem value="manager">Manager</Form.MenuItem>
-          </Form.SelectInput>
-        </Form.Stack>
-      </Form.Section>
-
-      <Box sx={{ mt: 3, display: 'flex', gap: 2 }}>
-        <Button variant="outlined">Cancel</Button>
-        <Button variant="contained">Save</Button>
-      </Box>
-    </Box>
-  );
-}
-```
-
-## Login Form
-
-```tsx
-import { useState } from 'react';
-import {
-  Box,
-  Paper,
-  Typography,
-  TextField,
-  Button,
-  Link,
-  Divider,
-  Alert,
-} from '@wso2/oxygen-ui';
-
-function LoginForm() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError('');
-
-    try {
-      // Login logic here
-      await login(email, password);
-    } catch (err) {
-      setError('Invalid credentials');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Box
-      sx={{
-        minHeight: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        bgcolor: 'background.default',
-      }}
-    >
-      <Paper sx={{ p: 4, maxWidth: 400, width: '100%' }}>
-        <Typography variant="h5" gutterBottom align="center">
-          Sign In
-        </Typography>
-
-        {error && (
-          <Alert severity="error" sx={{ mb: 2 }}>
-            {error}
-          </Alert>
-        )}
-
-        <Box component="form" onSubmit={handleSubmit}>
-          <TextField
-            fullWidth
-            label="Email"
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            margin="normal"
-            required
-          />
-
-          <TextField
-            fullWidth
-            label="Password"
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            margin="normal"
-            required
-          />
-
-          <Button
-            fullWidth
-            type="submit"
-            variant="contained"
-            disabled={loading}
-            sx={{ mt: 3, mb: 2 }}
-          >
-            {loading ? 'Signing in...' : 'Sign In'}
-          </Button>
-
-          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-            <Link href="/forgot-password" variant="body2">
-              Forgot password?
-            </Link>
-            <Link href="/register" variant="body2">
-              Create account
-            </Link>
-          </Box>
-        </Box>
-      </Paper>
-    </Box>
-  );
-}
-```
-
-## Multi-Step Wizard
-
-```tsx
-import { useState } from 'react';
-import {
-  Box,
-  Paper,
-  Stepper,
-  Step,
-  StepLabel,
-  Button,
-  Typography,
-  TextField,
-} from '@wso2/oxygen-ui';
-
-const steps = ['Account', 'Profile', 'Review'];
-
-function RegistrationWizard() {
-  const [activeStep, setActiveStep] = useState(0);
-  const [formData, setFormData] = useState({
-    email: '',
-    password: '',
-    name: '',
-    company: '',
-  });
-
-  const handleNext = () => setActiveStep((prev) => prev + 1);
-  const handleBack = () => setActiveStep((prev) => prev - 1);
-
-  const handleSubmit = () => {
-    console.log('Form submitted:', formData);
-  };
-
-  const renderStepContent = (step: number) => {
-    switch (step) {
-      case 0:
-        return (
-          <>
-            <TextField
-              fullWidth
-              label="Email"
-              type="email"
-              value={formData.email}
-              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-              margin="normal"
-            />
-            <TextField
-              fullWidth
-              label="Password"
-              type="password"
-              value={formData.password}
-              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-              margin="normal"
-            />
-          </>
-        );
-      case 1:
-        return (
-          <>
-            <TextField
-              fullWidth
-              label="Full Name"
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              margin="normal"
-            />
-            <TextField
-              fullWidth
-              label="Company"
-              value={formData.company}
-              onChange={(e) => setFormData({ ...formData, company: e.target.value })}
-              margin="normal"
-            />
-          </>
-        );
-      case 2:
-        return (
-          <Box>
-            <Typography variant="body1" gutterBottom>
-              <strong>Email:</strong> {formData.email}
-            </Typography>
-            <Typography variant="body1" gutterBottom>
-              <strong>Name:</strong> {formData.name}
-            </Typography>
-            <Typography variant="body1" gutterBottom>
-              <strong>Company:</strong> {formData.company}
-            </Typography>
-          </Box>
-        );
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <Paper sx={{ p: 4, maxWidth: 600, mx: 'auto' }}>
-      <Stepper activeStep={activeStep} sx={{ mb: 4 }}>
-        {steps.map((label) => (
-          <Step key={label}>
-            <StepLabel>{label}</StepLabel>
-          </Step>
-        ))}
-      </Stepper>
-
-      <Box sx={{ minHeight: 200 }}>{renderStepContent(activeStep)}</Box>
-
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 4 }}>
-        <Button disabled={activeStep === 0} onClick={handleBack}>
-          Back
-        </Button>
-        {activeStep === steps.length - 1 ? (
-          <Button variant="contained" onClick={handleSubmit}>
-            Submit
-          </Button>
-        ) : (
-          <Button variant="contained" onClick={handleNext}>
-            Next
-          </Button>
-        )}
-      </Box>
-    </Paper>
-  );
-}
-```
-
-## Form with Select and Autocomplete
-
-```tsx
-import { useState } from 'react';
-import { Box, TextField, Button, MenuItem, Autocomplete } from '@wso2/oxygen-ui';
-
-const countries = [
-  { label: 'United States', code: 'US' },
-  { label: 'United Kingdom', code: 'UK' },
-  { label: 'Canada', code: 'CA' },
-  // ...more
-];
-
-function AddressForm() {
-  const [country, setCountry] = useState<typeof countries[0] | null>(null);
-  const [state, setState] = useState('');
-
-  return (
-    <Box sx={{ maxWidth: 400 }}>
-      <Autocomplete
-        options={countries}
-        value={country}
-        onChange={(_, newValue) => setCountry(newValue)}
-        renderInput={(params) => (
-          <TextField {...params} label="Country" margin="normal" />
-        )}
-      />
-
-      <TextField
-        fullWidth
-        select
-        label="State"
-        value={state}
-        onChange={(e) => setState(e.target.value)}
-        margin="normal"
-      >
-        <MenuItem value="ca">California</MenuItem>
-        <MenuItem value="ny">New York</MenuItem>
-        <MenuItem value="tx">Texas</MenuItem>
-      </TextField>
-
-      <TextField fullWidth label="City" margin="normal" />
-      <TextField fullWidth label="Address" margin="normal" multiline rows={2} />
-      <TextField fullWidth label="Zip Code" margin="normal" />
-
-      <Button variant="contained" sx={{ mt: 2 }}>
-        Save Address
-      </Button>
-    </Box>
-  );
-}
-```
diff --git a/portals/api-control-plane/.claude/skills/oxygen-layout/SKILL.md b/portals/api-control-plane/.claude/skills/oxygen-layout/SKILL.md
deleted file mode 100644
index bdf8fce9f1..0000000000
--- a/portals/api-control-plane/.claude/skills/oxygen-layout/SKILL.md
+++ /dev/null
@@ -1,233 +0,0 @@
----
-name: oxygen-layout
-description: Generate application layouts with AppShell, Header, and Sidebar. Use when creating app shells, navigation structures, or dashboard layouts.
----
-
-# Generate Oxygen UI Layout
-
-## Instructions
-
-1. Read `.claude/oxygen-ui/patterns.md` for layout patterns
-2. Use `AppShell` as the main wrapper
-3. Configure `Header` with navigation
-4. Set up `Sidebar` with menu items
-
-## Critical Rules
-
-- Always use `OxygenUIThemeProvider` at the root
-- Use compound component pattern for `AppShell`, `Header`, `Sidebar`
-- Import icons from `@wso2/oxygen-ui-icons-react`
-- Use theme tokens for all styling
-
-## Complete App Shell Layout
-
-```tsx
-import { useState } from 'react';
-import {
-  OxygenUIThemeProvider,
-  OxygenTheme,
-  AppShell,
-  Header,
-  Sidebar,
-  Footer,
-  Box,
-  ColorSchemeToggle,
-  UserMenu,
-} from '@wso2/oxygen-ui';
-import {
-  HomeIcon,
-  DashboardIcon,
-  SettingsIcon,
-  UsersIcon,
-  FileIcon,
-} from '@wso2/oxygen-ui-icons-react';
-
-function App() {
-  const [collapsed, setCollapsed] = useState(false);
-  const [activeItem, setActiveItem] = useState('home');
-
-  return (
-    <OxygenUIThemeProvider theme={OxygenTheme}>
-      <AppShell>
-        <AppShell.Navbar>
-          <Header>
-            <Header.Toggle
-              collapsed={collapsed}
-              onToggle={() => setCollapsed(!collapsed)}
-            />
-            <Header.Brand>
-              <Header.BrandLogo>
-                <img src="/logo.svg" alt="Logo" height={32} />
-              </Header.BrandLogo>
-              <Header.BrandTitle>My Application</Header.BrandTitle>
-            </Header.Brand>
-            <Header.Spacer />
-            <Header.Actions>
-              <ColorSchemeToggle />
-              <UserMenu
-                user={{ name: 'John Doe', email: 'john@example.com' }}
-                onSignOut={() => console.log('Sign out')}
-              />
-            </Header.Actions>
-          </Header>
-        </AppShell.Navbar>
-
-        <AppShell.Sidebar>
-          <Sidebar
-            collapsed={collapsed}
-            activeItem={activeItem}
-            onSelect={setActiveItem}
-          >
-            <Sidebar.Nav>
-              <Sidebar.Category>
-                <Sidebar.CategoryLabel>Main</Sidebar.CategoryLabel>
-                <Sidebar.Item id="home">
-                  <Sidebar.ItemIcon><HomeIcon size={20} /></Sidebar.ItemIcon>
-                  <Sidebar.ItemLabel>Home</Sidebar.ItemLabel>
-                </Sidebar.Item>
-                <Sidebar.Item id="dashboard">
-                  <Sidebar.ItemIcon><DashboardIcon size={20} /></Sidebar.ItemIcon>
-                  <Sidebar.ItemLabel>Dashboard</Sidebar.ItemLabel>
-                </Sidebar.Item>
-              </Sidebar.Category>
-
-              <Sidebar.Category>
-                <Sidebar.CategoryLabel>Management</Sidebar.CategoryLabel>
-                <Sidebar.Item id="users">
-                  <Sidebar.ItemIcon><UsersIcon size={20} /></Sidebar.ItemIcon>
-                  <Sidebar.ItemLabel>Users</Sidebar.ItemLabel>
-                  <Sidebar.ItemBadge>12</Sidebar.ItemBadge>
-                </Sidebar.Item>
-                <Sidebar.Item id="files">
-                  <Sidebar.ItemIcon><FileIcon size={20} /></Sidebar.ItemIcon>
-                  <Sidebar.ItemLabel>Files</Sidebar.ItemLabel>
-                </Sidebar.Item>
-              </Sidebar.Category>
-            </Sidebar.Nav>
-
-            <Sidebar.Footer>
-              <Sidebar.Item id="settings">
-                <Sidebar.ItemIcon><SettingsIcon size={20} /></Sidebar.ItemIcon>
-                <Sidebar.ItemLabel>Settings</Sidebar.ItemLabel>
-              </Sidebar.Item>
-            </Sidebar.Footer>
-          </Sidebar>
-        </AppShell.Sidebar>
-
-        <AppShell.Main>
-          <Box sx={{ p: 3 }}>
-            {/* Page content goes here */}
-            <h1>Welcome</h1>
-          </Box>
-        </AppShell.Main>
-
-        <AppShell.Footer>
-          <Footer companyName="WSO2 LLC" />
-        </AppShell.Footer>
-      </AppShell>
-    </OxygenUIThemeProvider>
-  );
-}
-
-export default App;
-```
-
-## Header with Context Switchers
-
-```tsx
-<Header>
-  <Header.Toggle collapsed={collapsed} onToggle={toggleSidebar} />
-  <Header.Brand>
-    <Header.BrandLogo><Logo /></Header.BrandLogo>
-    <Header.BrandTitle>App Name</Header.BrandTitle>
-  </Header.Brand>
-
-  <Header.Switchers>
-    <OrganizationSwitcher />
-    <ProjectSwitcher />
-  </Header.Switchers>
-
-  <Header.Spacer />
-
-  <Header.Actions>
-    <SearchBar />
-    <NotificationButton />
-    <ColorSchemeToggle />
-    <UserMenu user={user} />
-  </Header.Actions>
-</Header>
-```
-
-## Minimal Header (No Switchers)
-
-```tsx
-<Header minimal>
-  <Header.Brand>
-    <Header.BrandTitle>Simple App</Header.BrandTitle>
-  </Header.Brand>
-  <Header.Spacer />
-  <Header.Actions>
-    <ColorSchemeToggle />
-  </Header.Actions>
-</Header>
-```
-
-## Sidebar with Nested Items
-
-```tsx
-<Sidebar
-  collapsed={collapsed}
-  activeItem={activeItem}
-  expandedMenus={expandedMenus}
-  onSelect={setActiveItem}
-  onToggleExpand={toggleExpand}
->
-  <Sidebar.Nav>
-    <Sidebar.Item id="parent" hasChildren>
-      <Sidebar.ItemIcon><FolderIcon size={20} /></Sidebar.ItemIcon>
-      <Sidebar.ItemLabel>Parent Item</Sidebar.ItemLabel>
-    </Sidebar.Item>
-
-    {expandedMenus['parent'] && (
-      <>
-        <Sidebar.Item id="child1" nested>
-          <Sidebar.ItemLabel>Child 1</Sidebar.ItemLabel>
-        </Sidebar.Item>
-        <Sidebar.Item id="child2" nested>
-          <Sidebar.ItemLabel>Child 2</Sidebar.ItemLabel>
-        </Sidebar.Item>
-      </>
-    )}
-  </Sidebar.Nav>
-</Sidebar>
-```
-
-## Dashboard Layout with Stats
-
-```tsx
-import { Grid, Paper, Typography, Box } from '@wso2/oxygen-ui';
-
-function DashboardContent() {
-  return (
-    <Box sx={{ p: 3 }}>
-      <Typography variant="h4" gutterBottom>Dashboard</Typography>
-
-      <Grid container spacing={3}>
-        <Grid item xs={12} sm={6} md={3}>
-          <Paper sx={{ p: 3 }}>
-            <Typography color="text.secondary" variant="body2">Total Users</Typography>
-            <Typography variant="h4" fontWeight="bold">12,345</Typography>
-          </Paper>
-        </Grid>
-        <Grid item xs={12} sm={6} md={3}>
-          <Paper sx={{ p: 3 }}>
-            <Typography color="text.secondary" variant="body2">Revenue</Typography>
-            <Typography variant="h4" fontWeight="bold">$45,678</Typography>
-          </Paper>
-        </Grid>
-        {/* More stats... */}
-      </Grid>
-    </Box>
-  );
-}
-```
diff --git a/portals/api-control-plane/.claude/skills/oxygen-migrate/SKILL.md b/portals/api-control-plane/.claude/skills/oxygen-migrate/SKILL.md
deleted file mode 100644
index ae093fb3f2..0000000000
--- a/portals/api-control-plane/.claude/skills/oxygen-migrate/SKILL.md
+++ /dev/null
@@ -1,280 +0,0 @@
----
-name: oxygen-migrate
-description: Migrate existing MUI code to Oxygen UI patterns. Use when converting @mui/material imports, replacing MUI components, or updating to Oxygen UI conventions.
----
-
-# Migrate to Oxygen UI
-
-## Instructions
-
-1. Read `.claude/oxygen-ui/migration.md` for full guide
-2. Update imports from `@mui/*` to `@wso2/oxygen-ui`
-3. Replace `lucide-react` icons with `@wso2/oxygen-ui-icons-react`
-4. Add `OxygenUIThemeProvider` wrapper
-
-## Migration Checklist
-
-- [ ] Replace `@mui/material` imports with `@wso2/oxygen-ui`
-- [ ] Replace `@mui/icons-material` or `lucide-react` with `@wso2/oxygen-ui-icons-react`
-- [ ] Update MUI X imports to use namespaced exports
-- [ ] Wrap root with `OxygenUIThemeProvider`
-- [ ] Replace `ThemeProvider` with `OxygenUIThemeProvider`
-- [ ] Update custom theme to use `OxygenThemeBase`
-
-## Import Migration
-
-### MUI Components
-
-**Before:**
-```tsx
-import { Box, Stack, Button } from '@mui/material';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-```
-
-**After:**
-```tsx
-import { Box, Stack, Button, Typography, styled } from '@wso2/oxygen-ui';
-```
-
-### Icons
-
-**Before (MUI Icons):**
-```tsx
-import SettingsIcon from '@mui/icons-material/Settings';
-import HomeIcon from '@mui/icons-material/Home';
-import DeleteIcon from '@mui/icons-material/Delete';
-```
-
-**Before (Lucide React):**
-```tsx
-import { Settings, Home, Trash2 } from 'lucide-react';
-```
-
-**After:**
-```tsx
-import { SettingsIcon, HomeIcon, TrashIcon } from '@wso2/oxygen-ui-icons-react';
-```
-
-### MUI X Components
-
-**Before:**
-```tsx
-import { DataGrid } from '@mui/x-data-grid';
-import { DatePicker } from '@mui/x-date-pickers';
-import { BarChart } from '@mui/x-charts';
-import { SimpleTreeView } from '@mui/x-tree-view';
-```
-
-**After:**
-```tsx
-import { DataGrid, DatePickers, TreeView } from '@wso2/oxygen-ui';
-
-// Use as namespaces
-<DataGrid.DataGrid rows={rows} columns={columns} />
-<DatePickers.DatePicker value={date} onChange={setDate} />
-<TreeView.SimpleTreeView items={items} />
-
-// For Charts, use the separate package
-import { BarChart } from '@wso2/oxygen-ui-charts-react';
-<BarChart series={series} />
-```
-
-## Theme Provider Migration
-
-**Before:**
-```tsx
-import { ThemeProvider, createTheme } from '@mui/material';
-
-const theme = createTheme({
-  palette: {
-    primary: { main: '#1976d2' },
-  },
-});
-
-<ThemeProvider theme={theme}>
-  <App />
-</ThemeProvider>
-```
-
-**After:**
-```tsx
-import { OxygenUIThemeProvider, OxygenTheme } from '@wso2/oxygen-ui';
-
-// Use default theme
-<OxygenUIThemeProvider theme={OxygenTheme}>
-  <App />
-</OxygenUIThemeProvider>
-
-// Or with custom theme
-import { extendTheme } from '@mui/material/styles';
-import { OxygenThemeBase } from '@wso2/oxygen-ui';
-
-const customTheme = extendTheme({
-  ...OxygenThemeBase,
-  colorSchemes: {
-    light: {
-      palette: { primary: { main: '#1976d2' } },
-    },
-  },
-});
-
-<OxygenUIThemeProvider theme={customTheme}>
-  <App />
-</OxygenUIThemeProvider>
-```
-
-## Layout Migration
-
-**Before (Custom Layout):**
-```tsx
-import { AppBar, Toolbar, Drawer, Box } from '@mui/material';
-
-<Box sx={{ display: 'flex' }}>
-  <AppBar position="fixed">
-    <Toolbar>
-      <Typography>My App</Typography>
-    </Toolbar>
-  </AppBar>
-  <Drawer variant="permanent">
-    {/* Menu items */}
-  </Drawer>
-  <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
-    {/* Content */}
-  </Box>
-</Box>
-```
-
-**After (Oxygen AppShell):**
-```tsx
-import { AppShell, Header, Sidebar, Footer } from '@wso2/oxygen-ui';
-
-<AppShell>
-  <AppShell.Navbar>
-    <Header>
-      <Header.Brand>
-        <Header.BrandTitle>My App</Header.BrandTitle>
-      </Header.Brand>
-    </Header>
-  </AppShell.Navbar>
-
-  <AppShell.Sidebar>
-    <Sidebar>
-      <Sidebar.Nav>
-        {/* Menu items */}
-      </Sidebar.Nav>
-    </Sidebar>
-  </AppShell.Sidebar>
-
-  <AppShell.Main>
-    {/* Content */}
-  </AppShell.Main>
-
-  <AppShell.Footer>
-    <Footer companyName="WSO2 LLC" />
-  </AppShell.Footer>
-</AppShell>
-```
-
-## Table Migration
-
-**Before (MUI Table):**
-```tsx
-import {
-  Table,
-  TableHead,
-  TableBody,
-  TableRow,
-  TableCell,
-  Paper,
-} from '@mui/material';
-
-<Paper>
-  <Table>
-    <TableHead>
-      <TableRow>
-        <TableCell>Name</TableCell>
-        <TableCell>Status</TableCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      {data.map((row) => (
-        <TableRow key={row.id}>
-          <TableCell>{row.name}</TableCell>
-          <TableCell>{row.status}</TableCell>
-        </TableRow>
-      ))}
-    </TableBody>
-  </Table>
-</Paper>
-```
-
-**After (Oxygen ListingTable):**
-```tsx
-import { ListingTable } from '@wso2/oxygen-ui';
-
-<ListingTable.Container>
-  <ListingTable.Toolbar showSearch />
-  <ListingTable>
-    <ListingTable.Head>
-      <ListingTable.Row>
-        <ListingTable.Cell>Name</ListingTable.Cell>
-        <ListingTable.Cell>Status</ListingTable.Cell>
-      </ListingTable.Row>
-    </ListingTable.Head>
-    <ListingTable.Body>
-      {data.map((row) => (
-        <ListingTable.Row key={row.id}>
-          <ListingTable.Cell>{row.name}</ListingTable.Cell>
-          <ListingTable.Cell>{row.status}</ListingTable.Cell>
-        </ListingTable.Row>
-      ))}
-    </ListingTable.Body>
-    <ListingTable.Footer />
-  </ListingTable>
-</ListingTable.Container>
-```
-
-## Color Mode Migration
-
-**Before:**
-```tsx
-import { useColorScheme } from '@mui/material';
-
-const { mode, setMode } = useColorScheme();
-```
-
-**After:**
-```tsx
-import { ColorSchemeToggle, useTheme } from '@wso2/oxygen-ui';
-
-// Simple toggle component
-<ColorSchemeToggle />
-
-// Check current mode
-const theme = useTheme();
-const isDark = theme.palette.mode === 'dark';
-```
-
-## ESLint Plugin Setup
-
-After migration, add the ESLint plugin to prevent regressions:
-
-```bash
-pnpm add -D @wso2/eslint-plugin-oxygen-ui
-```
-
-```js
-// eslint.config.js
-import oxygenUIPlugin from '@wso2/eslint-plugin-oxygen-ui';
-
-export default [
-  oxygenUIPlugin.configs.recommended,
-  // ... other configs
-];
-```
-
-This will:
-- Error on direct `@mui/material` imports
-- Error on direct `lucide-react` imports
-- Auto-fix imports with `eslint --fix`
diff --git a/portals/api-control-plane/CLAUDE.md b/portals/api-control-plane/CLAUDE.md
index 23c155d894..08ad157043 100644
--- a/portals/api-control-plane/CLAUDE.md
+++ b/portals/api-control-plane/CLAUDE.md
@@ -1,5 +1,13 @@
 # Project Guidelines
 
-## Oxygen UI
+## UI development
 
-For Oxygen UI component guidelines and patterns, see [.claude/oxygen-ui/CLAUDE.md](.claude/oxygen-ui/CLAUDE.md).
+All UI work in this portal — pages, components, forms, listings, navigation, theming, Oxygen UI
+component/theming API, and MUI→Oxygen migration — follows the `apicp-ui` skill
+([.claude/skills/apicp-ui/SKILL.md](.claude/skills/apicp-ui/SKILL.md)). Invoke it with `/apicp-ui`,
+or read it directly before touching anything under `src/`.
+
+The full upstream Oxygen UI reference ships with the package at
+`node_modules/@wso2/oxygen-ui/.ai/{components,patterns,theming,migration}.md`; the compiled types in
+`node_modules/@wso2/oxygen-ui/dist/**/*.d.ts` are the ground truth when the docs and the package
+disagree.
diff --git a/portals/api-control-plane/src/api/resources/apiKeys/index.ts b/portals/api-control-plane/src/api/resources/apiKeys/index.ts
index 2c79863d34..e1bbfc9bc6 100644
--- a/portals/api-control-plane/src/api/resources/apiKeys/index.ts
+++ b/portals/api-control-plane/src/api/resources/apiKeys/index.ts
@@ -16,36 +16,31 @@
  * under the License.
  */
 
-import type {
-        ListMyApiKeysQuery,
-        CreateApiKeyBody,
-        UpdateApiKeyBody,
-        UserApiKeyListResponse,
-        CreateApiKeyResponse,
-        UpdateApiKeyResponse,
-        ApiKeyArtifactType
-} from './apiKeys.endpoints';
+/**
+ * Public surface of the API keys resource module.
+ * Import from `api/resources/apiKeys` only; deeper imports skip scope binding and gating.
+ * @see ./apiKeys.hooks.ts for the hook contract.
+ */
 
-import {
-    useMyApiKeys,
-    useCreateApiKey,
-    useUpdateApiKey,
-    useRevokeApiKey,
-} from './apiKeys.hooks';
+// ─── Types ──────────────────────────────────────────────────────────────────
 
 export type {
-    ListMyApiKeysQuery,
-    CreateApiKeyBody,
-    UpdateApiKeyBody,
-    UserApiKeyListResponse,
-    CreateApiKeyResponse,
-    UpdateApiKeyResponse,
-    ApiKeyArtifactType
-}
+  ApiKeyArtifactType,
+  CreateApiKeyBody,
+  CreateApiKeyResponse,
+  ListMyApiKeysQuery,
+  UpdateApiKeyBody,
+  UpdateApiKeyResponse,
+  UserApiKeyListResponse,
+} from './apiKeys.endpoints';
+
+export type { ApiKeyListFilters } from './apiKeys.hooks';
+
+// ─── Hooks ──────────────────────────────────────────────────────────────────
 
 export {
-    useMyApiKeys,
-    useCreateApiKey,
-    useUpdateApiKey,
-    useRevokeApiKey,
-}
\ No newline at end of file
+  useCreateApiKey,
+  useMyApiKeys,
+  useRevokeApiKey,
+  useUpdateApiKey,
+} from './apiKeys.hooks';
diff --git a/portals/api-control-plane/src/api/resources/applications/index.ts b/portals/api-control-plane/src/api/resources/applications/index.ts
new file mode 100644
index 0000000000..41262becde
--- /dev/null
+++ b/portals/api-control-plane/src/api/resources/applications/index.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Public surface of the REST APIs resource module.
+ * Import from `api/resources/restApis` only; deeper imports skip scope binding and gating.
+ * @see ./restApis.hooks.ts for the hook contract.
+ */
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export type {
+  AddApplicationApiKeysBody,
+  AddApplicationAssociationsBody,
+  Application,
+  ApplicationAssociationListResponse,
+  ApplicationListResponse,
+  CreateApplicationBody,
+  ListApplicationApiKeysQuery,
+  ListApplicationAssociationsQuery,
+  ListApplicationsQuery,
+  ListAssociationApiKeysQuery,
+  MappedApiKeyListResponse,
+  RemoveApplicationApiKeyQuery,
+  UpdateApplicationBody,
+} from './applications.endpoints';
+
+export type { ApplicationListFilters } from './applications.hooks';
+
+// ─── Hooks ──────────────────────────────────────────────────────────────────
+
+export {
+  useAddApplicationApiKeys,
+  useAddApplicationAssociations,
+  useApplication,
+  useApplicationApiKeys,
+  useApplicationAssociations,
+  useApplicationOptions,
+  useApplications,
+  useAssociationApiKeys,
+  useCreateApplication,
+  useDeleteApplication,
+  useRemoveApplicationApiKey,
+  useRemoveApplicationAssociation,
+  useUpdateApplication,
+} from './applications.hooks';
diff --git a/portals/api-control-plane/src/api/resources/gatewayCustomPolicies/index.ts b/portals/api-control-plane/src/api/resources/gatewayCustomPolicies/index.ts
new file mode 100644
index 0000000000..90443169c4
--- /dev/null
+++ b/portals/api-control-plane/src/api/resources/gatewayCustomPolicies/index.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Public surface of the gateway custom policies resource module.
+ * Import from `api/resources/gatewayCustomPolicies` only; deeper imports skip scope binding and gating.
+ * @see ./gatewayCustomPolicies.hooks.ts for the hook contract.
+ */
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export type {
+  CustomPolicy,
+  CustomPolicyListResponse,
+  ListCustomPoliciesQuery,
+  SyncCustomPolicyQuery,
+} from './gatewayCustomPolicies.endpoints';
+
+export type { CustomPolicyListFilters } from './gatewayCustomPolicies.hooks';
+
+// ─── Hooks ──────────────────────────────────────────────────────────────────
+
+export {
+  useDeleteGatewayCustomPolicy,
+  useGatewayCustomPolicies,
+  useGatewayCustomPolicy,
+  useGatewayCustomPolicyOptions,
+  useSyncCustomPolicy,
+} from './gatewayCustomPolicies.hooks';
diff --git a/portals/api-control-plane/src/api/resources/gateways/index.ts b/portals/api-control-plane/src/api/resources/gateways/index.ts
index e69de29bb2..0cbdef6542 100644
--- a/portals/api-control-plane/src/api/resources/gateways/index.ts
+++ b/portals/api-control-plane/src/api/resources/gateways/index.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Public surface of the gateways resource module.
+ * Import from `api/resources/gateways` only; deeper imports skip scope binding and gating.
+ * @see ./gateways.hooks.ts for the hook contract.
+ */
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export type {
+  CreateGatewayBody,
+  Gateway,
+  GatewayListResponse,
+  GatewayManifest,
+  GatewayTokenListResponse,
+  ListGatewaysQuery,
+  ListGatewayTokensQuery,
+  TokenRotationResponse,
+  UpdateGatewayBody,
+} from './gateways.endpoints';
diff --git a/portals/api-control-plane/src/api/resources/organizations/index.ts b/portals/api-control-plane/src/api/resources/organizations/index.ts
index b7dd426143..96bc6c5a83 100644
--- a/portals/api-control-plane/src/api/resources/organizations/index.ts
+++ b/portals/api-control-plane/src/api/resources/organizations/index.ts
@@ -16,30 +16,28 @@
  * under the License.
  */
 
-import type {
-    Organization,
-    OrganizationListResponse,
-    ListOrganizationsQuery,
-    RegisterOrganizationBody
-} from './organizations.endpoints';
+/**
+ * Public surface of the organizations resource module.
+ * Import from `api/resources/organizations` only; deeper imports skip scope binding and gating.
+ * @see ./organizations.hooks.ts for the hook contract.
+ */
 
-import {
-    useOrganizations,
-    useOrganization,
-    useRegisterOrganization,
-    useOrganizationOptions
-} from './organizations.hooks';
+// ─── Types ──────────────────────────────────────────────────────────────────
 
 export type {
-    Organization,
-    OrganizationListResponse,
-    ListOrganizationsQuery,
-    RegisterOrganizationBody
-};
+  ListOrganizationsQuery,
+  Organization,
+  OrganizationListResponse,
+  RegisterOrganizationBody,
+} from './organizations.endpoints';
+
+export type { OrganizationListFilters } from './organizations.hooks';
+
+// ─── Hooks ──────────────────────────────────────────────────────────────────
 
 export {
-    useOrganizations,
-    useOrganization,
-    useRegisterOrganization,
-    useOrganizationOptions
-};
\ No newline at end of file
+  useOrganization,
+  useOrganizationOptions,
+  useOrganizations,
+  useRegisterOrganization,
+} from './organizations.hooks';
diff --git a/portals/api-control-plane/src/api/resources/projects/index.ts b/portals/api-control-plane/src/api/resources/projects/index.ts
index 181eb03b4a..062ec4b7b4 100644
--- a/portals/api-control-plane/src/api/resources/projects/index.ts
+++ b/portals/api-control-plane/src/api/resources/projects/index.ts
@@ -16,38 +16,31 @@
  * under the License.
  */
 
-import type {
-    Project,
-    ProjectListResponse,
-    ListProjectsQuery,
-    CreateProjectBody,
-    UpdateProjectBody
-} from './projects.endpoints';
-import {
-    useProjects,
-    useProject,
-    useCreateProject,
-    useUpdateProject,
-    useDeleteProject,
-    useProjectOptions,
-} from './projects.hooks';
+/**
+ * Public surface of the projects resource module.
+ * Import from `api/resources/projects` only; deeper imports skip scope binding and gating.
+ * @see ./projects.hooks.ts for the hook contract.
+ */
 
-import type { ProjectListFilters } from './projects.hooks';
+// ─── Types ──────────────────────────────────────────────────────────────────
 
 export type {
-    Project,
-    ProjectListResponse,
-    ListProjectsQuery,
-    CreateProjectBody,
-    UpdateProjectBody,
-    ProjectListFilters
-};
+  CreateProjectBody,
+  ListProjectsQuery,
+  Project,
+  ProjectListResponse,
+  UpdateProjectBody,
+} from './projects.endpoints';
+
+export type { ProjectListFilters } from './projects.hooks';
+
+// ─── Hooks ──────────────────────────────────────────────────────────────────
 
 export {
-    useProjects,
-    useProject,
-    useCreateProject,
-    useUpdateProject,
-    useDeleteProject,
-    useProjectOptions,
-};
\ No newline at end of file
+  useCreateProject,
+  useDeleteProject,
+  useProject,
+  useProjectOptions,
+  useProjects,
+  useUpdateProject,
+} from './projects.hooks';
diff --git a/portals/api-control-plane/src/api/resources/restApis/index.ts b/portals/api-control-plane/src/api/resources/restApis/index.ts
index ea03397b8b..1775435775 100644
--- a/portals/api-control-plane/src/api/resources/restApis/index.ts
+++ b/portals/api-control-plane/src/api/resources/restApis/index.ts
@@ -16,41 +16,31 @@
  * under the License.
  */
 
-import type {
-    RestApi,
-    RestApiListResponse,
-    ListRestApisQuery,
-    CreateRestApiBody,
-    UpdateRestApiBody
+/**
+ * Public surface of the REST APIs resource module.
+ * Import from `api/resources/restApis` only; deeper imports skip scope binding and gating.
+ * @see ./restApis.hooks.ts for the hook contract.
+ */
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export type {
+  CreateRestApiBody,
+  ListRestApisQuery,
+  RestApi,
+  RestApiListResponse,
+  UpdateRestApiBody,
 } from './restApis.endpoints';
 
-import type {
-    RestApiListFilters
-} from './restApis.hooks';
+export type { RestApiListFilters } from './restApis.hooks';
 
-import {
-    useRestApis,
-    useRestApi,
-    useCreateRestApi,
-    useUpdateRestApi,
-    useDeleteRestApi,
-    useRestApiOptions
-} from './restApis.hooks'
+// ─── Hooks ──────────────────────────────────────────────────────────────────
 
-export type {
-    RestApi,
-    RestApiListResponse,
-    ListRestApisQuery,
-    CreateRestApiBody,
-    UpdateRestApiBody,
-    RestApiListFilters
-}
-    
 export {
-    useRestApis,
-    useRestApi,
-    useCreateRestApi,
-    useUpdateRestApi,
-    useDeleteRestApi,
-    useRestApiOptions
-}
\ No newline at end of file
+  useCreateRestApi,
+  useDeleteRestApi,
+  useRestApi,
+  useRestApiOptions,
+  useRestApis,
+  useUpdateRestApi,
+} from './restApis.hooks';
diff --git a/portals/api-control-plane/src/api/resources/secrets/index.ts b/portals/api-control-plane/src/api/resources/secrets/index.ts
new file mode 100644
index 0000000000..659f6c4c31
--- /dev/null
+++ b/portals/api-control-plane/src/api/resources/secrets/index.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Public surface of the secrets resource module.
+ * Import from `api/resources/secrets` only; deeper imports skip scope binding and gating.
+ * @see ./secrets.hooks.ts for the hook contract.
+ */
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export type {
+  CreateSecretBody,
+  ListSecretsQuery,
+  RotateSecretBody,
+  SecretListResponse,
+  SecretResponse,
+  SecretSummary,
+} from './secrets.endpoints';
+
+export type { SecretListFilters } from './secrets.hooks';
+
+// ─── Hooks ──────────────────────────────────────────────────────────────────
+
+export {
+  useCreateSecret,
+  useDeleteSecret,
+  useRotateSecret,
+  useSecret,
+  useSecretOptions,
+  useSecrets,
+} from './secrets.hooks';
+
+// ─── Error predicates ───────────────────────────────────────────────────────
+
+/** Narrows a delete failure to "the secret is still referenced". */
+export { isSecretInUse } from './secrets.hooks';
diff --git a/portals/api-control-plane/src/api/resources/subscriptionPlans/index.ts b/portals/api-control-plane/src/api/resources/subscriptionPlans/index.ts
new file mode 100644
index 0000000000..cf9a40a114
--- /dev/null
+++ b/portals/api-control-plane/src/api/resources/subscriptionPlans/index.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Public surface of the subscription plans resource module.
+ * Import from `api/resources/subscriptionPlans` only; deeper imports skip scope binding and gating.
+ * @see ./subscriptionPlans.hooks.ts for the hook contract.
+ */
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export type {
+  CreateSubscriptionPlanBody,
+  ListSubscriptionPlansQuery,
+  SubscriptionPlan,
+  SubscriptionPlanListResponse,
+  UpdateSubscriptionPlanBody,
+} from './subscriptionPlans.endpoints';
+
+export type { SubscriptionPlanListFilters } from './subscriptionPlans.hooks';
+
+// ─── Hooks ──────────────────────────────────────────────────────────────────
+
+export {
+  useCreateSubscriptionPlan,
+  useDeleteSubscriptionPlan,
+  useSubscriptionPlan,
+  useSubscriptionPlanOptions,
+  useSubscriptionPlans,
+  useUpdateSubscriptionPlan,
+} from './subscriptionPlans.hooks';
diff --git a/portals/api-control-plane/src/api/resources/subscriptions/index.ts b/portals/api-control-plane/src/api/resources/subscriptions/index.ts
new file mode 100644
index 0000000000..d0fa6e4472
--- /dev/null
+++ b/portals/api-control-plane/src/api/resources/subscriptions/index.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Public surface of the REST APIs resource module.
+ * Import from `api/resources/restApis` only; deeper imports skip scope binding and gating.
+ * @see ./restApis.hooks.ts for the hook contract.
+ */
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export type {
+  CreateSubscriptionBody,
+  ListSubscriptionsQuery,
+  SubscriberQuery,
+  Subscription,
+  SubscriptionListResponse,
+  UpdateSubscriptionBody,
+} from './subscriptions.endpoints';
+
+export type { SubscriptionListFilters } from './subscriptions.hooks';
+
+// ─── Hooks ──────────────────────────────────────────────────────────────────
+
+export {
+  useCreateSubscription,
+  useDeleteSubscription,
+  useSubscription,
+  useSubscriptions,
+  useUpdateSubscription,
+} from './subscriptions.hooks';

From 6024b3b244ded2f458b9258a687b67d49ab2e578 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Mon, 24 Aug 2026 13:39:21 +0530
Subject: [PATCH 05/12] feat(apicp): add Develop section with Policies,
 Routing, and Documents pages

---
 .../src/navigation/navigationRegistry.test.ts | 38 +++++++---
 .../src/navigation/navigationRegistry.tsx     | 42 +++++++++-
 .../navigation/useNavigationItems.test.tsx    |  4 +-
 .../src/pages/appShell/AppSidebar.test.tsx    | 10 +++
 .../appShellPages/apis/ApiDetailPage.tsx      | 29 ++-----
 .../apis/develop/DevelopPageShell.tsx         | 76 +++++++++++++++++++
 .../apis/develop/DocumentsPage.tsx            | 53 +++++++++++++
 .../apis/develop/PoliciesPage.tsx             | 51 +++++++++++++
 .../apis/develop/RoutingPage.tsx              | 51 +++++++++++++
 .../appShellPages/settings/SettingsPage.tsx   | 20 +++--
 .../src/routes/AppRoutes.tsx                  | 27 +++++++
 .../src/routes/paths.test.ts                  |  3 +
 portals/api-control-plane/src/routes/paths.ts | 17 +++++
 13 files changed, 377 insertions(+), 44 deletions(-)
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DevelopPageShell.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DocumentsPage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PoliciesPage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingPage.tsx

diff --git a/portals/api-control-plane/src/navigation/navigationRegistry.test.ts b/portals/api-control-plane/src/navigation/navigationRegistry.test.ts
index 0d383cefe0..65400341c9 100644
--- a/portals/api-control-plane/src/navigation/navigationRegistry.test.ts
+++ b/portals/api-control-plane/src/navigation/navigationRegistry.test.ts
@@ -117,7 +117,7 @@ describe('scope visibility', () => {
   // Capability gating applies only once an API is loaded: with none, every
   // capability reads false, which would hide these items in exactly the state
   // where they are the way in.
-  it.each(['test', 'deploy', 'manage'])(
+  it.each(['develop', 'test', 'deploy', 'manage'])(
     'keeps %s visible out of API scope and lets the capability decide within it',
     (id) => {
       const { isVisible } = definitionFor(id);
@@ -179,6 +179,15 @@ describe('API-level items', () => {
  */
 describe('submenu parents', () => {
   const SUBMENUS: [string, string, [string, string][]][] = [
+    [
+      'develop',
+      'develop',
+      [
+        ['develop-policies', 'policies'],
+        ['develop-routing', 'routing'],
+        ['develop-documents', 'documents'],
+      ],
+    ],
     [
       'test',
       'test',
@@ -304,15 +313,26 @@ describe('organization-level items', () => {
     expect(match(`${ORG}/gateways/gw-1/extra`)).toBe(false);
   });
 
-  // Settings is the one page with no scope requirement: the sidebar links to the
-  // org-level path, and a project card's gear deep-links the same page.
-  it('lights Settings up at either of its entry points, whatever the scope', () => {
-    const { match, to } = definitionFor('settings');
+  /*
+   * Settings needs no scope of its own, so it never gates — but it does follow you
+   * down one level: the organization's settings while browsing the org, that
+   * project's once you are inside one. One pinned link at a time, never both,
+   * which is what `AppRoutes.orgSettings.test.tsx` exercises end to end.
+   */
+  it('follows the scope down to the project, and no further', () => {
+    const { to } = definitionFor('settings');
     expect(to(atOrg())).toBe(`${ORG}/settings`);
-    expect(to(atApi())).toBe(`${ORG}/settings`);
-    expect(match?.(`${ORG}/settings`)).toBe(true);
-    expect(match?.(`${PROJECT}/settings`)).toBe(true);
-    expect(match?.(`${API}/settings`)).toBe(false);
+    expect(to(atProject())).toBe(`${PROJECT}/settings`);
+    // No API tier: an API has no settings page of its own, so inside one the item
+    // stays on the project's.
+    expect(to(atApi())).toBe(`${PROJECT}/settings`);
+  });
+
+  it('lights Settings up at either of its entry points', () => {
+    const match = matcherFor('settings');
+    expect(match(`${ORG}/settings`)).toBe(true);
+    expect(match(`${PROJECT}/settings`)).toBe(true);
+    expect(match(`${API}/settings`)).toBe(false);
   });
 });
 
diff --git a/portals/api-control-plane/src/navigation/navigationRegistry.tsx b/portals/api-control-plane/src/navigation/navigationRegistry.tsx
index 9fb4fc8bef..b958b14a7d 100644
--- a/portals/api-control-plane/src/navigation/navigationRegistry.tsx
+++ b/portals/api-control-plane/src/navigation/navigationRegistry.tsx
@@ -23,8 +23,10 @@ import {
   ChartColumn,
   ChartLine,
   CircleDollarSign,
+  Code,
   ClipboardList,
   FileCheck,
+  FileText,
   Gauge,
   GitBranch,
   Home,
@@ -32,6 +34,7 @@ import {
   MessagesSquare,
   Network,
   Rocket,
+  Route,
   ScrollText,
   Settings,
   ShieldCheck,
@@ -291,6 +294,34 @@ export const navigationRegistry: NavigationDefinition[] = [
     to: orgLevelTo(routes.gateways),
     match: matchRoutes(routes.gateways(), routes.newGateway(), routes.gateway()),
   },
+  {
+    id: 'develop',
+    label: 'Develop',
+    group: CLUSTER.api,
+    order: 35,
+    icon: <Code />,
+    isVisible: apiCapability(({ canDevelop }) => canDevelop),
+    ...submenu([
+      {
+        icon: <ShieldCheck />,
+        id: 'develop-policies',
+        label: 'Policies',
+        to: routes.apiDevelopPolicies,
+      },
+      {
+        icon: <Route />,
+        id: 'develop-routing',
+        label: 'Routing',
+        to: routes.apiDevelopRouting,
+      },
+      {
+        icon: <FileText />,
+        id: 'develop-documents',
+        label: 'Documents',
+        to: routes.apiDevelopDocuments,
+      },
+    ]),
+  },
   {
     id: 'test',
     label: 'Test',
@@ -418,9 +449,12 @@ export const navigationRegistry: NavigationDefinition[] = [
     group: CLUSTER.global,
     order: 100,
     icon: <Settings />,
-    to: orgLevelTo(routes.settings),
-    // Both entry points light this item up: the sidebar's own org-level path and
-    // the per-project deep link from a project card.
-    match: matchRoutes(routes.settings(), routes.projectSettings()),
+    // Follows you down one level: the organization's settings while browsing the
+    // org, that project's settings once you are inside one — one pinned link at a
+    // time, never both. Same page either way; only the scope it reads differs.
+    ...adaptive([
+      { level: 'project', to: routes.projectSettings },
+      { level: 'organization', to: routes.settings },
+    ]),
   },
 ];
diff --git a/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx b/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx
index cd7a6eb5de..0593a51e94 100644
--- a/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx
+++ b/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx
@@ -85,7 +85,7 @@ const itemFor = (scope: ConsoleScope, route: string, id: string) => {
  * Oxygen treat the row as a link instead of a disclosure.
  */
 describe('submenu children follow API scope', () => {
-  it.each(['test', 'insights', 'observability', 'manage'])(
+  it.each(['develop', 'test', 'insights', 'observability', 'manage'])(
     '%s offers its children once an API is in scope',
     (id) => {
       const item = itemFor(atApi(), routes.api(ORG, PROJECT, API), id);
@@ -98,7 +98,7 @@ describe('submenu children follow API scope', () => {
     }
   );
 
-  it.each(['test', 'insights', 'observability', 'manage'])(
+  it.each(['develop', 'test', 'insights', 'observability', 'manage'])(
     '%s withholds them outside API scope, and links to the first instead',
     (id) => {
       const item = itemFor(atOrg(), routes.organizationHome(ORG), id);
diff --git a/portals/api-control-plane/src/pages/appShell/AppSidebar.test.tsx b/portals/api-control-plane/src/pages/appShell/AppSidebar.test.tsx
index 3152aa89e9..3201f8ff0c 100644
--- a/portals/api-control-plane/src/pages/appShell/AppSidebar.test.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppSidebar.test.tsx
@@ -97,6 +97,16 @@ describe('AppSidebar submenus', () => {
     expect(screen.queryByText('API Console')).not.toBeInTheDocument();
   });
 
+  it('opens Develop onto the three panels lifted off the overview page', async () => {
+    const { user } = renderSidebar(routes.api(ORG, PROJECT, API), true);
+
+    await user.click(screen.getByRole('button', { name: /^Develop$/ }));
+
+    for (const label of ['Policies', 'Routing', 'Documents']) {
+      expect(screen.getByText(label)).toBeInTheDocument();
+    }
+  });
+
   it('auto-opens the submenu holding the active page', () => {
     renderSidebar(routes.apiObservabilityLogs(ORG, PROJECT, API), true);
 
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
index 2a37782f26..e112e150e0 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
@@ -16,14 +16,10 @@
  * under the License.
  */
 
-import { useState } from 'react';
-import { Avatar, Box, Button, Card, Chip, Stack, Tab, Tabs, Typography } from '@wso2/oxygen-ui';
+import { Avatar, Box, Button, Card, Chip, Stack, Typography } from '@wso2/oxygen-ui';
 
 import { useApiDetail } from '../../../../api/hooks/useMvpQueries';
 import { ErrorState, LoadingState } from '../../../../components/StateViews';
-import { DocumentsTab } from './develop/DocumentsTab';
-import { PolicyTab } from './develop/PolicyTab';
-import { RoutingTab } from './develop/RoutingTab';
 import { OverviewTab } from './overview/OverviewTab';
 import { FormattedMessage } from 'react-intl';
 
@@ -31,7 +27,6 @@ import { FormattedMessage } from 'react-intl';
 // degrades to a shallower tier rather than linking here without an API.
 export function ApiDetailPage() {
   const detailQuery = useApiDetail();
-  const [tab, setTab] = useState(0);
 
   if (detailQuery.isLoading) return <LoadingState label="Loading API" />;
   if (detailQuery.error || !detailQuery.data) {
@@ -40,10 +35,6 @@ export function ApiDetailPage() {
 
   const detail = detailQuery.data;
 
-  // Develop tab set mirrors the product: Overview, then Policy/Routing/Documents.
-  const tabs = ['Overview', 'Policy', 'Routing', 'Documents'] as const;
-  const active = tabs[tab] ?? 'Overview';
-
   const truncateProviderDisplayName = (
   name?: string | null,
   maxLength = 30
@@ -195,20 +186,10 @@ export function ApiDetailPage() {
       
       </Stack>
 
-      <Tabs
-        onChange={(_event, value) => setTab(value)}
-        sx={{ mb: 3 }}
-        value={tab}
-      >
-        {tabs.map((label) => (
-          <Tab key={label} label={label} />
-        ))}
-      </Tabs>
-
-      {active === 'Overview' && <OverviewTab detail={detail} />}
-      {active === 'Policy' && <PolicyTab detail={detail} />}
-      {active === 'Routing' && <RoutingTab detail={detail} />}
-      {active === 'Documents' && <DocumentsTab />}
+      {/* Policy, Routing and Documents used to be tabs here; each is now its own
+          page under the sidebar's Develop menu, leaving Overview as the whole of
+          this page — so no tab bar. */}
+      <OverviewTab detail={detail} />
     </>
   );
 }
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DevelopPageShell.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DevelopPageShell.tsx
new file mode 100644
index 0000000000..cf128afdad
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DevelopPageShell.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { ReactNode } from 'react';
+import { PageTitle } from '@wso2/oxygen-ui';
+import { FormattedMessage, type MessageDescriptor } from 'react-intl';
+
+import { useApiDetail } from '../../../../../api/hooks/useMvpQueries';
+import { ErrorState, LoadingState } from '../../../../../components/StateViews';
+import type { ApiDetail } from '../../../../../types/domain';
+
+export type DevelopPageShellProps = {
+  /** Section name, e.g. Policies. */
+  title: MessageDescriptor;
+  /** Sub-header taking the API's `displayName` as `{apiName}`. */
+  subtitle: MessageDescriptor;
+  children: (detail: ApiDetail) => ReactNode;
+};
+
+/**
+ * Heading plus loaded API detail for a Develop page.
+ *
+ * The three panels were tabs on the API overview page, where one `useApiDetail()`
+ * served all of them and the header card said which API you were looking at. Now
+ * that each is its own route they each need both, so this holds the pair in one
+ * place rather than repeating the query and its loading/error branches three
+ * times. `children` takes the loaded detail, so a panel needing it can't be
+ * rendered before it exists.
+ */
+export function DevelopPageShell({
+  children,
+  subtitle,
+  title,
+}: DevelopPageShellProps) {
+  const detailQuery = useApiDetail();
+
+  if (detailQuery.isLoading) return <LoadingState label="Loading API" />;
+  if (detailQuery.error || !detailQuery.data) {
+    return <ErrorState title="API not found" />;
+  }
+
+  const detail = detailQuery.data;
+
+  return (
+    <>
+      <PageTitle>
+        <PageTitle.Header>
+          <FormattedMessage {...title} />
+        </PageTitle.Header>
+        <PageTitle.SubHeader>
+          <FormattedMessage
+            {...subtitle}
+            values={{ apiName: detail.displayName }}
+          />
+        </PageTitle.SubHeader>
+      </PageTitle>
+
+      {children(detail)}
+    </>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DocumentsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DocumentsPage.tsx
new file mode 100644
index 0000000000..c86fdcef94
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/DocumentsPage.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { defineMessages } from 'react-intl';
+
+import { routes } from '../../../../../routes/paths';
+import { ScopeGate } from '../../../../../scope/ScopeGate';
+import { DevelopPageShell } from './DevelopPageShell';
+import { DocumentsTab } from './DocumentsTab';
+
+const messages = defineMessages({
+  title: {
+    id: 'apiControlPlane.pages.appShell.appShellPages.apis.develop.DocumentsPage.title',
+    defaultMessage: 'Documents',
+  },
+  subtitle: {
+    id: 'apiControlPlane.pages.appShell.appShellPages.apis.develop.DocumentsPage.subtitle',
+    defaultMessage: 'Documentation for {apiName}',
+    description:
+      'Sub-header under the section name; {apiName} is the API display name.',
+  },
+});
+
+export function DocumentsPage() {
+  return (
+    <ScopeGate
+      prompt="Documents belong to a single API."
+      requires="api"
+      to={routes.apiDevelopDocuments}
+    >
+      {/* `DocumentsTab` takes no detail of its own; the shell is here for the
+          heading, which still names the API being documented. */}
+      <DevelopPageShell subtitle={messages.subtitle} title={messages.title}>
+        {() => <DocumentsTab />}
+      </DevelopPageShell>
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PoliciesPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PoliciesPage.tsx
new file mode 100644
index 0000000000..78e1015341
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/PoliciesPage.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { defineMessages } from 'react-intl';
+
+import { routes } from '../../../../../routes/paths';
+import { ScopeGate } from '../../../../../scope/ScopeGate';
+import { DevelopPageShell } from './DevelopPageShell';
+import { PolicyTab } from './PolicyTab';
+
+const messages = defineMessages({
+  title: {
+    id: 'apiControlPlane.pages.appShell.appShellPages.apis.develop.PoliciesPage.title',
+    defaultMessage: 'Policies',
+  },
+  subtitle: {
+    id: 'apiControlPlane.pages.appShell.appShellPages.apis.develop.PoliciesPage.subtitle',
+    defaultMessage: 'Policies attached to {apiName}',
+    description:
+      'Sub-header under the section name; {apiName} is the API display name.',
+  },
+});
+
+export function PoliciesPage() {
+  return (
+    <ScopeGate
+      prompt="Policies are attached to a single API."
+      requires="api"
+      to={routes.apiDevelopPolicies}
+    >
+      <DevelopPageShell subtitle={messages.subtitle} title={messages.title}>
+        {(detail) => <PolicyTab detail={detail} />}
+      </DevelopPageShell>
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingPage.tsx
new file mode 100644
index 0000000000..0a509d18e2
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/RoutingPage.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { defineMessages } from 'react-intl';
+
+import { routes } from '../../../../../routes/paths';
+import { ScopeGate } from '../../../../../scope/ScopeGate';
+import { DevelopPageShell } from './DevelopPageShell';
+import { RoutingTab } from './RoutingTab';
+
+const messages = defineMessages({
+  title: {
+    id: 'apiControlPlane.pages.appShell.appShellPages.apis.develop.RoutingPage.title',
+    defaultMessage: 'Routing',
+  },
+  subtitle: {
+    id: 'apiControlPlane.pages.appShell.appShellPages.apis.develop.RoutingPage.subtitle',
+    defaultMessage: 'Routing for {apiName}',
+    description:
+      'Sub-header under the section name; {apiName} is the API display name.',
+  },
+});
+
+export function RoutingPage() {
+  return (
+    <ScopeGate
+      prompt="Routing is configured per API."
+      requires="api"
+      to={routes.apiDevelopRouting}
+    >
+      <DevelopPageShell subtitle={messages.subtitle} title={messages.title}>
+        {(detail) => <RoutingTab detail={detail} />}
+      </DevelopPageShell>
+    </ScopeGate>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
index e0ea9f54bd..83f70453ca 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
@@ -17,20 +17,30 @@
  */
 
 import { Card, CardContent, PageTitle, Typography } from '@wso2/oxygen-ui';
-import { useParams } from 'react-router-dom';
 
+import { useConsoleScope } from '../../../../scope/ConsoleScopeProvider';
 
 // No `ScopeGate`: Settings is the one page with no scope requirement. The sidebar
-// links to the organization-level path, and a project card's gear deep-links the
-// same page for one project — so it renders at whatever scope it is reached in.
+// links to the organization-level path while browsing the org and to the project's
+// once one is selected, and a project card's gear deep-links the same page — so it
+// renders at whatever scope it is reached in.
 export function SettingsPage() {
-  const { orgHandle, projectHandler } = useParams();
+  const { organization, params, project } = useConsoleScope();
+  // Whichever scope the page was reached in, named rather than handled: the
+  // heading reads "…for Retail APIs", not "…for retail-apis". Falls back to the
+  // handle, which the route always carries, so the heading still says what it is
+  // about while the display name is still loading.
+  const subject =
+    project?.displayName ??
+    organization?.displayName ??
+    params.projectHandler ??
+    params.orgHandle;
 
   return (
     <>
       <PageTitle>
         <PageTitle.Header>Settings</PageTitle.Header>
-        <PageTitle.SubHeader>Minimal settings overview for {projectHandler ?? orgHandle}.</PageTitle.SubHeader>
+        <PageTitle.SubHeader>Minimal settings overview for {subject}.</PageTitle.SubHeader>
       </PageTitle>
       <Card variant="outlined">
         <CardContent>
diff --git a/portals/api-control-plane/src/routes/AppRoutes.tsx b/portals/api-control-plane/src/routes/AppRoutes.tsx
index 134da25c14..f9ebcc8129 100644
--- a/portals/api-control-plane/src/routes/AppRoutes.tsx
+++ b/portals/api-control-plane/src/routes/AppRoutes.tsx
@@ -90,6 +90,21 @@ const DeployPage = lazy(() =>
 const TestPage = lazy(() =>
   import('../pages/appShell/appShellPages/test/TestPage').then((m) => ({ default: m.TestPage }))
 );
+const PoliciesPage = lazy(() =>
+  import('../pages/appShell/appShellPages/apis/develop/PoliciesPage').then((m) => ({
+    default: m.PoliciesPage,
+  }))
+);
+const RoutingPage = lazy(() =>
+  import('../pages/appShell/appShellPages/apis/develop/RoutingPage').then((m) => ({
+    default: m.RoutingPage,
+  }))
+);
+const DocumentsPage = lazy(() =>
+  import('../pages/appShell/appShellPages/apis/develop/DocumentsPage').then((m) => ({
+    default: m.DocumentsPage,
+  }))
+);
 const ApiConsolePage = lazy(() =>
   import('../pages/appShell/appShellPages/test/ApiConsolePage').then((m) => ({
     default: m.ApiConsolePage,
@@ -205,6 +220,18 @@ export function AppRoutes({ extensions = [] }: AppRoutesProps) {
             links to its first child's alias, so `.../test` and friends are never
             produced and are not registered.
           */}
+          {scopedRoutes(
+            apiScopedPaths(routes.apiDevelopPolicies),
+            <PoliciesPage />
+          )}
+          {scopedRoutes(
+            apiScopedPaths(routes.apiDevelopRouting),
+            <RoutingPage />
+          )}
+          {scopedRoutes(
+            apiScopedPaths(routes.apiDevelopDocuments),
+            <DocumentsPage />
+          )}
           {scopedRoutes(apiScopedPaths(routes.apiTestConsole), <ApiConsolePage />)}
           {scopedRoutes(apiScopedPaths(routes.apiTestCurl), <TestPage />)}
           {scopedRoutes(apiScopedPaths(routes.apiTestChat), <ApiChatPage />)}
diff --git a/portals/api-control-plane/src/routes/paths.test.ts b/portals/api-control-plane/src/routes/paths.test.ts
index 62d2b7e511..7a911ab0a6 100644
--- a/portals/api-control-plane/src/routes/paths.test.ts
+++ b/portals/api-control-plane/src/routes/paths.test.ts
@@ -34,6 +34,9 @@ const PROJECT_LEVEL: [string, ProjectPathBuilder][] = [
 ];
 
 const API_LEVEL: [string, ApiPathBuilder][] = [
+  ['apiDevelopPolicies', routes.apiDevelopPolicies],
+  ['apiDevelopRouting', routes.apiDevelopRouting],
+  ['apiDevelopDocuments', routes.apiDevelopDocuments],
   ['apiTestConsole', routes.apiTestConsole],
   ['apiTestCurl', routes.apiTestCurl],
   ['apiTestChat', routes.apiTestChat],
diff --git a/portals/api-control-plane/src/routes/paths.ts b/portals/api-control-plane/src/routes/paths.ts
index 314bee61b6..a8f4cddf05 100644
--- a/portals/api-control-plane/src/routes/paths.ts
+++ b/portals/api-control-plane/src/routes/paths.ts
@@ -149,6 +149,23 @@ export const routes = {
     projectHandler = ':projectHandler',
     apiHandler = ':apiHandler'
   ) => apiPath(orgHandle, projectHandler, apiHandler),
+  // Develop's own submenu: the three panels that used to be tabs on the API
+  // overview page.
+  apiDevelopPolicies: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'develop/policies'),
+  apiDevelopRouting: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'develop/routing'),
+  apiDevelopDocuments: (
+    orgHandle = ':orgHandle',
+    projectHandler: ScopeHandle = ':projectHandler',
+    apiHandler: ScopeHandle = ':apiHandler'
+  ) => apiPath(orgHandle, projectHandler, apiHandler, 'develop/documents'),
   apiDeploy: (
     orgHandle = ':orgHandle',
     projectHandler: ScopeHandle = ':projectHandler',

From b1b3c5697b9ed4a466c1982d3c082f43af0c7bcb Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Mon, 24 Aug 2026 13:44:34 +0530
Subject: [PATCH 06/12] feat(apicp): add eslint and prettier config files

---
 portals/api-control-plane/.eslintignore    | 4 ++++
 portals/api-control-plane/.prettierignore  | 1 +
 portals/api-control-plane/.prettierrc.json | 6 ++++++
 3 files changed, 11 insertions(+)
 create mode 100644 portals/api-control-plane/.eslintignore
 create mode 100644 portals/api-control-plane/.prettierignore
 create mode 100644 portals/api-control-plane/.prettierrc.json

diff --git a/portals/api-control-plane/.eslintignore b/portals/api-control-plane/.eslintignore
new file mode 100644
index 0000000000..164f04d876
--- /dev/null
+++ b/portals/api-control-plane/.eslintignore
@@ -0,0 +1,4 @@
+/public/**
+/node_modules/**
+/coverage/**
+# Pleae comment the reason if you are  ignoring a file/directory here
\ No newline at end of file
diff --git a/portals/api-control-plane/.prettierignore b/portals/api-control-plane/.prettierignore
new file mode 100644
index 0000000000..b450542f86
--- /dev/null
+++ b/portals/api-control-plane/.prettierignore
@@ -0,0 +1 @@
+# Pleae comment the reason if you are  ignoring a file/directory here
diff --git a/portals/api-control-plane/.prettierrc.json b/portals/api-control-plane/.prettierrc.json
new file mode 100644
index 0000000000..bec8009468
--- /dev/null
+++ b/portals/api-control-plane/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "tabWidth": 4,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}
\ No newline at end of file

From 63fbfce9a8c8e12030e8359921e25905ff8f67c6 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Mon, 24 Aug 2026 14:08:54 +0530
Subject: [PATCH 07/12] refactor: remove unwanted tests and update some tests

---
 .../api-control-plane/src/App.smoke.test.tsx  |  23 +-
 .../appShellPages/apis/ApiCreatePage.test.tsx | 100 --------
 .../appShellPages/apis/ApiDetailPage.test.tsx | 101 --------
 .../appShellPages/apis/ApiListPage.test.tsx   | 189 --------------
 .../apis/overview/OverviewTab.test.tsx        | 218 ----------------
 .../appShellPages/deploy/DeployPage.test.tsx  | 232 ------------------
 .../src/routes/AppRoutes.orgSettings.test.tsx |  24 +-
 7 files changed, 40 insertions(+), 847 deletions(-)
 delete mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.test.tsx
 delete mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.test.tsx
 delete mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx
 delete mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.test.tsx
 delete mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.test.tsx

diff --git a/portals/api-control-plane/src/App.smoke.test.tsx b/portals/api-control-plane/src/App.smoke.test.tsx
index f324f29b8f..27dd0c322d 100644
--- a/portals/api-control-plane/src/App.smoke.test.tsx
+++ b/portals/api-control-plane/src/App.smoke.test.tsx
@@ -19,7 +19,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { AppRoutes } from './routes/AppRoutes';
-import { aProject, collection } from './test/msw';
+import { anOrganization, aProject, collection, resource } from './test/msw';
 import { authStatePresets } from './test/mockAuthState';
 import { server } from './test/server';
 import { renderWithProviders, screen } from './test/utils';
@@ -29,10 +29,26 @@ import { renderWithProviders, screen } from './test/utils';
 // mode so the scope queries resolve from fixtures with no network. This is a
 // thin guardrail that catches provider-wiring regressions, not deep assertions.
 describe('App smoke (mock mode, authenticated)', () => {
-  beforeEach(() => vi.stubEnv('VITE_USE_MOCK_API', 'true'));
+  // The scope and page hooks always go to the real transport —
+  // `VITE_USE_MOCK_API` only governs the legacy client — so the organization
+  // endpoints the shell resolves its scope from are stubbed at the network
+  // layer for every test here.
+  const org = anOrganization({
+    id: 'api-platform-demo',
+    displayName: 'API Platform Demo',
+  });
+
+  beforeEach(() => {
+    vi.stubEnv('VITE_USE_MOCK_API', 'true');
+    server.use(
+      collection('/organizations', [org]),
+      resource('/organizations/:organizationId', org)
+    );
+  });
   afterEach(() => vi.unstubAllEnvs());
 
   it('renders the org home through the full app shell', async () => {
+    server.use(collection('/projects', []));
     renderWithProviders(<AppRoutes />, {
       route: '/organizations/api-platform-demo/home',
       authState: authStatePresets.authenticated(),
@@ -47,9 +63,6 @@ describe('App smoke (mock mode, authenticated)', () => {
   });
 
   it('navigates to the projects list and renders project cards', async () => {
-    // The project list reads through the resource hooks, which always go to the
-    // real transport — `VITE_USE_MOCK_API` only governs the legacy client, so
-    // these endpoints are stubbed at the network layer instead.
     server.use(
       collection('/projects', [
         aProject({ id: 'retail', displayName: 'Retail APIs' }),
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.test.tsx
deleted file mode 100644
index bc8aee7cb1..0000000000
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiCreatePage.test.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Route, Routes } from 'react-router-dom';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { renderWithProviders, screen, waitFor } from '../../../../test/utils';
-
-// Capture the create mutation so we can assert the submitted input.
-const { mutateAsync } = vi.hoisted(() => ({ mutateAsync: vi.fn() }));
-vi.mock('../../api/hooks/useMvpQueries', () => ({
-  useCreateApi: () => ({ mutateAsync, isPending: false, error: null }),
-}));
-
-import { ApiCreatePage } from './ApiCreatePage';
-
-const ROUTE = '/organizations/acme/projects/retail/apis/new';
-
-function renderPage() {
-  return renderWithProviders(
-    <Routes>
-      <Route
-        path="/organizations/:orgHandle/projects/:projectHandler/apis/new"
-        element={<ApiCreatePage />}
-      />
-    </Routes>,
-    { route: ROUTE }
-  );
-}
-
-describe('ApiCreatePage', () => {
-  beforeEach(() => vi.clearAllMocks());
-
-  it('renders the type + method selection with only HTTP/start methods enabled', () => {
-    renderPage();
-    expect(screen.getAllByText('HTTP').length).toBeGreaterThan(0);
-    expect(screen.getByText('Import API Contract')).toBeInTheDocument();
-    expect(screen.getByText('Start from Scratch')).toBeInTheDocument();
-    // GraphQL/WebSocket/etc are "Soon"; GenAI is "Coming soon".
-    expect(screen.getAllByText('Soon').length).toBeGreaterThan(0);
-    expect(screen.getByText('Coming soon')).toBeInTheDocument();
-  });
-
-  it('start-from-scratch goes to details and disables Create until valid', async () => {
-    const { user } = renderPage();
-    await user.click(screen.getByText('Start from Scratch'));
-
-    // Details phase rendered.
-    expect(screen.getByText('Create an API Proxy')).toBeInTheDocument();
-    const createButton = screen.getByRole('button', { name: 'Create' });
-    expect(createButton).toBeDisabled();
-
-    // Display name only → still disabled (scratch requires a backend URL).
-    await user.type(screen.getByLabelText(/Display name/), 'Pizza Shack API');
-    expect(createButton).toBeDisabled();
-  });
-
-  it('submits the built CreateApiInput once details are valid', async () => {
-    mutateAsync.mockResolvedValue({ handler: 'pizza-shack-api' });
-    const { user } = renderPage();
-    await user.click(screen.getByText('Start from Scratch'));
-
-    await user.type(screen.getByLabelText(/Display name/), 'Pizza Shack API');
-    await user.type(
-      screen.getByLabelText(/Target URL/),
-      'https://backend.example.com'
-    );
-
-    const createButton = screen.getByRole('button', { name: 'Create' });
-    await waitFor(() => expect(createButton).toBeEnabled());
-    await user.click(createButton);
-
-    await waitFor(() => expect(mutateAsync).toHaveBeenCalledTimes(1));
-    expect(mutateAsync).toHaveBeenCalledWith(
-      expect.objectContaining({
-        kind: 'API_PROXY',
-        displayName: 'Pizza Shack API',
-        name: 'pizza-shack-api',
-        version: '1.0.0',
-        prodUrl: 'https://backend.example.com',
-        source: { mode: 'scratch' },
-      })
-    );
-  });
-});
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.test.tsx
deleted file mode 100644
index db0a18d484..0000000000
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.test.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import type { UseQueryResult } from '@tanstack/react-query';
-import { Route, Routes } from 'react-router-dom';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import { useApiDetail } from '../../../../api/hooks/useMvpQueries';
-import { renderWithProviders, screen } from '../../../../test/utils';
-import type { ApiDetail } from '../../../../types/domain';
-import { ApiDetailPage } from './ApiDetailPage';
-
-vi.mock('../../api/hooks/useMvpQueries', async (importActual) => ({
-  ...(await importActual<typeof import('../../../../api/hooks/useMvpQueries')>()),
-  useApiDetail: vi.fn(),
-}));
-
-const ROUTE = '/organizations/acme/projects/retail/apis/orders-api';
-
-const detail: ApiDetail = {
-  id: 'api-1',
-  projectId: 'proj-1',
-  name: 'orders-api',
-  displayName: 'Orders API',
-  handler: 'orders-api',
-  kind: 'API_PROXY',
-  status: 'ACTIVE',
-  operations: [],
-  policies: [],
-  endpoints: {},
-};
-
-const queryResult = (overrides: Partial<UseQueryResult<ApiDetail, Error>>) =>
-  overrides as UseQueryResult<ApiDetail, Error>;
-
-function renderPage() {
-  return renderWithProviders(
-    <Routes>
-      <Route
-        path="/organizations/:orgHandle/projects/:projectHandler/apis"
-        element={<div>API list marker</div>}
-      />
-      <Route
-        path="/organizations/:orgHandle/projects/:projectHandler/apis/:apiHandler"
-        element={<ApiDetailPage />}
-      />
-    </Routes>,
-    { route: ROUTE }
-  );
-}
-
-describe('ApiDetailPage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('shows the loading state', () => {
-    vi.mocked(useApiDetail).mockReturnValue(queryResult({ isLoading: true }));
-    renderPage();
-    expect(screen.getByText('Loading API')).toBeInTheDocument();
-  });
-
-  it('shows the error state', () => {
-    vi.mocked(useApiDetail).mockReturnValue(
-      queryResult({ isLoading: false, error: new Error('x') })
-    );
-    renderPage();
-    expect(screen.getByText('API not found')).toBeInTheDocument();
-  });
-
-  it('renders the API title without the header action buttons', () => {
-    vi.mocked(useApiDetail).mockReturnValue(
-      queryResult({ isLoading: false, data: detail })
-    );
-    renderPage();
-
-    expect(screen.getByText('Orders API')).toBeInTheDocument();
-    // The Delete/Deploy/Test/Manage header pallet has been removed; progress
-    // navigation now lives in the Overview tab's progress banner. Delete has no
-    // banner equivalent, so its absence proves the header pallet is gone.
-    expect(
-      screen.queryByRole('button', { name: 'Delete' })
-    ).not.toBeInTheDocument();
-    expect(screen.getByText('Track your progress here')).toBeInTheDocument();
-  });
-});
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx
deleted file mode 100644
index 822f8667a8..0000000000
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiListPage.test.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import type { UseQueryResult } from '@tanstack/react-query';
-import { Route, Routes } from 'react-router-dom';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import type { ApiError } from '../../../../api/core/errors';
-import type {
-  RestApi,
-  RestApiListResponse,
-} from '../../../../api/resources/restApis';
-import { makeConsoleScope } from '../../../../test/mockScope';
-import { renderWithProviders, screen } from '../../../../test/utils';
-
-vi.mock('../../../../api/resources/restApis', async (importActual) => ({
-  ...(await importActual<typeof import('../../../../api/resources/restApis')>()),
-  useRestApis: vi.fn(),
-  useDeleteRestApi: vi.fn(),
-}));
-
-import {
-  useDeleteRestApi,
-  useRestApis,
-} from '../../../../api/resources/restApis';
-import { ApiListPage } from './ApiListPage';
-
-const ROUTE = '/organizations/acme/projects/retail/apis';
-
-const restApi = (overrides: Partial<RestApi>): RestApi => ({
-  context: '/orders',
-  displayName: 'Orders API',
-  id: 'orders-api',
-  kind: 'RestApi',
-  lifeCycleStatus: 'PUBLISHED',
-  projectId: 'retail',
-  transport: ['http', 'https'],
-  upstream: { main: { url: 'https://backend.example.com' } },
-  version: '1.0.0',
-  ...overrides,
-});
-
-const API_LIST: RestApi[] = [
-  restApi({}),
-  restApi({
-    context: '/payments',
-    displayName: 'Payments API',
-    id: 'payments-api',
-  }),
-];
-
-const listResponse = (list: RestApi[]): RestApiListResponse =>
-  ({
-    count: list.length,
-    list,
-    pagination: { limit: 25, offset: 0, total: list.length },
-  }) as RestApiListResponse;
-
-const queryResult = (
-  overrides: Partial<UseQueryResult<RestApiListResponse, ApiError>>
-) => overrides as UseQueryResult<RestApiListResponse, ApiError>;
-
-function renderPage() {
-  return renderWithProviders(
-    <Routes>
-      <Route
-        path="/organizations/:orgHandle/projects/:projectHandler/apis"
-        element={<ApiListPage />}
-      />
-    </Routes>,
-    {
-      route: ROUTE,
-      // The page's `ScopeGate` reads console scope to decide between the API
-      // list and a project picker; the default mock scope is inside a project,
-      // which is the case these tests exercise.
-      scope: makeConsoleScope(),
-    }
-  );
-}
-
-describe('ApiListPage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Most tests don't exercise delete; provide a default mutation.
-    vi.mocked(useDeleteRestApi).mockReturnValue({
-      mutate: vi.fn(),
-      isPending: false,
-    } as unknown as ReturnType<typeof useDeleteRestApi>);
-  });
-
-  it('shows the loading state', () => {
-    vi.mocked(useRestApis).mockReturnValue(queryResult({ isPending: true }));
-    renderPage();
-    expect(screen.getByText('Loading APIs')).toBeInTheDocument();
-  });
-
-  it('shows the error state', () => {
-    vi.mocked(useRestApis).mockReturnValue(
-      queryResult({ isPending: false, error: { message: 'x' } as ApiError })
-    );
-    renderPage();
-    expect(screen.getByText('Unable to load APIs')).toBeInTheDocument();
-  });
-
-  it('shows the empty state', () => {
-    vi.mocked(useRestApis).mockReturnValue(
-      queryResult({ isPending: false, data: listResponse([]) })
-    );
-    renderPage();
-    expect(screen.getByText('No APIs yet')).toBeInTheDocument();
-  });
-
-  it('renders the API cards and filters by search', async () => {
-    vi.mocked(useRestApis).mockReturnValue(
-      queryResult({ isPending: false, data: listResponse(API_LIST) })
-    );
-    const { user } = renderPage();
-
-    expect(screen.getByText('Orders API')).toBeInTheDocument();
-    expect(screen.getByText('Payments API')).toBeInTheDocument();
-    // Card details come straight from the spec shape.
-    expect(screen.getAllByText('v1.0.0').length).toBe(2);
-    // Transports render as one Chip each, labelled in upper case.
-    expect(screen.getAllByText('HTTP').length).toBe(2);
-    expect(screen.getAllByText('HTTPS').length).toBe(2);
-
-    await user.type(screen.getByPlaceholderText('Search APIs'), 'orders');
-    expect(screen.getByText('Orders API')).toBeInTheDocument();
-    expect(screen.queryByText('Payments API')).not.toBeInTheDocument();
-
-    await user.clear(screen.getByPlaceholderText('Search APIs'));
-    await user.type(screen.getByPlaceholderText('Search APIs'), 'nomatch');
-    expect(screen.queryByText('Orders API')).not.toBeInTheDocument();
-    expect(screen.getByText('No matching APIs')).toBeInTheDocument();
-  });
-
-  it('deletes from the card action instead of an overflow menu', async () => {
-    vi.mocked(useRestApis).mockReturnValue(
-      queryResult({ isPending: false, data: listResponse(API_LIST) })
-    );
-    const { user } = renderPage();
-
-    expect(
-      screen.queryByRole('button', { name: 'API actions' })
-    ).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: 'Delete Orders API' }));
-
-    // Confirmation opens, and the click never reached the card underneath —
-    // which would have navigated away from the list.
-    expect(
-      screen.getByText(/permanently deletes the API "Orders API"/)
-    ).toBeInTheDocument();
-    expect(screen.getByText('Payments API')).toBeInTheDocument();
-  });
-
-  it('switches between grid and list views', async () => {
-    vi.mocked(useRestApis).mockReturnValue(
-      queryResult({ isPending: false, data: listResponse(API_LIST) })
-    );
-    const { user } = renderPage();
-
-    expect(screen.queryByTestId('api-list-view')).not.toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: 'List view' }));
-    expect(screen.getAllByTestId('api-list-view').length).toBeGreaterThan(0);
-    // Rows still open the API and show context plus lifecycle.
-    expect(screen.getByText('Orders API')).toBeInTheDocument();
-    expect(screen.getByText(/\/orders/)).toBeInTheDocument();
-    expect(screen.getAllByText('Published').length).toBe(2);
-
-    await user.click(screen.getByRole('button', { name: 'Grid view' }));
-    expect(screen.queryByTestId('api-list-view')).not.toBeInTheDocument();
-  });
-});
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.test.tsx
deleted file mode 100644
index da76d9acbc..0000000000
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/overview/OverviewTab.test.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import type { UseQueryResult } from '@tanstack/react-query';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import {
-  useApiKeys,
-  useCreateApiKey,
-  useGatewayDeployments,
-  useGateways,
-  useRevokeApiKey,
-} from '../../../../../api/hooks/useMvpQueries';
-import { renderWithProviders, screen } from '../../../../../test/utils';
-import type {
-  ApiDetail,
-  ApiKeySummary,
-  Gateway,
-  GatewayDeployment,
-} from '../../../../../types/domain';
-import { OverviewTab } from './OverviewTab';
-
-vi.mock('../../../api/hooks/useMvpQueries', async (importActual) => ({
-  ...(await importActual<typeof import('../../../../../api/hooks/useMvpQueries')>()),
-  useGateways: vi.fn(),
-  useGatewayDeployments: vi.fn(),
-  useApiKeys: vi.fn(),
-  useCreateApiKey: vi.fn(),
-  useRevokeApiKey: vi.fn(),
-}));
-
-const detail: ApiDetail = {
-  id: 'api-1',
-  projectId: 'proj-1',
-  name: 'orders-api',
-  displayName: 'Orders API',
-  handler: 'orders-api',
-  kind: 'API_PROXY',
-  status: 'ACTIVE',
-  context: '/orders',
-  operations: [
-    { method: 'GET', path: '/items', description: 'List order items' },
-    { method: 'POST', path: '/items' },
-  ],
-  policies: [],
-  endpoints: {},
-};
-
-const gateway: Gateway = {
-  id: 'gw-1',
-  name: 'prod-gw',
-  displayName: 'Production Gateway',
-  vhost: 'mg.acme.dev',
-  functionalityType: 'regular',
-  mode: 'self-hosted',
-  isActive: true,
-};
-
-const deployed: GatewayDeployment = {
-  id: 'dep-1',
-  name: 'v1.0-prod',
-  gatewayId: 'gw-1',
-  status: 'DEPLOYED',
-  createdAt: '2026-07-01T08:00:00Z',
-};
-
-const query = <T,>(overrides: Partial<UseQueryResult<T, Error>>) =>
-  overrides as UseQueryResult<T, Error>;
-
-const mutation = <H extends (...args: never[]) => unknown>(mutate = vi.fn()) =>
-  ({ mutate, isPending: false }) as unknown as ReturnType<H>;
-
-describe('OverviewTab', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.mocked(useGateways).mockReturnValue(
-      query({ isLoading: false, data: [gateway] })
-    );
-    vi.mocked(useGatewayDeployments).mockReturnValue(
-      query({ isLoading: false, data: [deployed] })
-    );
-    vi.mocked(useApiKeys).mockReturnValue(
-      query<ApiKeySummary[]>({
-        isLoading: false,
-        data: [
-          {
-            name: 'prod-key',
-            maskedApiKey: 'abcd****xy',
-            expiresAt: '2026-10-01T00:00:00Z',
-          },
-        ],
-      })
-    );
-    vi.mocked(useCreateApiKey).mockReturnValue(
-      mutation<typeof useCreateApiKey>()
-    );
-    vi.mocked(useRevokeApiKey).mockReturnValue(
-      mutation<typeof useRevokeApiKey>()
-    );
-  });
-
-  it('renders the resources list with method chips', () => {
-    renderWithProviders(<OverviewTab detail={detail} />);
-    expect(screen.getByText('Resources')).toBeInTheDocument();
-    expect(screen.getByText('GET')).toBeInTheDocument();
-    expect(screen.getByText('List order items')).toBeInTheDocument();
-    expect(screen.getAllByText('/items')).toHaveLength(2);
-  });
-
-  it('renders the progress banner with the life-cycle steps', () => {
-    renderWithProviders(<OverviewTab detail={detail} />);
-    expect(screen.getByText('Track your progress here')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Deploy' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Test' })).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: 'Publish to Devportal' })
-    ).toBeInTheDocument();
-  });
-
-  it('advances the progress chart as the API is deployed', () => {
-    // Deployed on a gateway but still a draft → Create + Deploy done: 2/4 (50%).
-    renderWithProviders(
-      <OverviewTab detail={{ ...detail, status: 'DRAFT' }} />
-    );
-    expect(screen.getByText('2 of 4 completed')).toBeInTheDocument();
-    expect(screen.getByRole('progressbar')).toHaveAttribute(
-      'aria-valuenow',
-      '50'
-    );
-  });
-
-  it('completes every step once the API is published', () => {
-    // status ACTIVE (PUBLISHED) + deployed → all four steps done: 4/4 (100%).
-    renderWithProviders(<OverviewTab detail={detail} />);
-    expect(screen.getByText('4 of 4 completed')).toBeInTheDocument();
-    expect(screen.getByRole('progressbar')).toHaveAttribute(
-      'aria-valuenow',
-      '100'
-    );
-  });
-
-  it('shows only Create complete when the API is not deployed', () => {
-    vi.mocked(useGatewayDeployments).mockReturnValue(
-      query({ isLoading: false, data: [] })
-    );
-    renderWithProviders(
-      <OverviewTab detail={{ ...detail, status: 'DRAFT' }} />
-    );
-    expect(screen.getByText('1 of 4 completed')).toBeInTheDocument();
-    expect(screen.getByRole('progressbar')).toHaveAttribute(
-      'aria-valuenow',
-      '25'
-    );
-  });
-
-  it('builds the invoke URL from the deployed gateway vhost and context', () => {
-    renderWithProviders(<OverviewTab detail={detail} />);
-    expect(screen.getByText('Invoke URL')).toBeInTheDocument();
-    expect(
-      screen.getByDisplayValue('https://mg.acme.dev/orders')
-    ).toBeInTheDocument();
-  });
-
-  it('hides the right column when the API is not deployed anywhere', () => {
-    vi.mocked(useGatewayDeployments).mockReturnValue(
-      query({ isLoading: false, data: [] })
-    );
-    renderWithProviders(<OverviewTab detail={detail} />);
-    expect(screen.queryByText('Invoke URL')).not.toBeInTheDocument();
-    expect(screen.queryByText('API Keys')).not.toBeInTheDocument();
-  });
-
-  it('lists API keys and adds a new one through the dialog', async () => {
-    const mutate = vi.fn(
-      (_variables: unknown, options?: { onSuccess?: () => void }) =>
-        options?.onSuccess?.()
-    );
-    vi.mocked(useCreateApiKey).mockReturnValue(
-      mutation<typeof useCreateApiKey>(mutate)
-    );
-    const { user } = renderWithProviders(<OverviewTab detail={detail} />);
-
-    expect(screen.getByText('prod-key')).toBeInTheDocument();
-    expect(screen.getByText('abcd****xy')).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: 'Add API Key' }));
-    await user.type(
-      screen.getByPlaceholderText('Ex: Production Key'),
-      'Staging Key'
-    );
-    const dialogFields = screen.getAllByRole('textbox');
-    await user.type(dialogFields[dialogFields.length - 1], 'secret-value');
-    await user.click(screen.getByRole('button', { name: 'Add' }));
-
-    expect(mutate).toHaveBeenCalledWith(
-      {
-        api: detail,
-        input: { displayName: 'Staging Key', apiKey: 'secret-value' },
-      },
-      expect.any(Object)
-    );
-  });
-});
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.test.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.test.tsx
deleted file mode 100644
index d4062ff542..0000000000
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/deploy/DeployPage.test.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import type { UseQueryResult } from '@tanstack/react-query';
-import { Route, Routes } from 'react-router-dom';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-
-import {
-  useApi,
-  useDeleteGatewayDeployment,
-  useDeployApi,
-  useGatewayDeployments,
-  useGateways,
-  useRestoreGatewayDeployment,
-  useUndeployGatewayDeployment,
-} from '../../../../api/hooks/useMvpQueries';
-import { renderWithProviders, screen } from '../../../../test/utils';
-import type { Api, Gateway, GatewayDeployment } from '../../../../types/domain';
-import { DeployPage } from './DeployPage';
-
-vi.mock('../../api/hooks/useMvpQueries', async (importActual) => ({
-  ...(await importActual<typeof import('../../../../api/hooks/useMvpQueries')>()),
-  useApi: vi.fn(),
-  useGateways: vi.fn(),
-  useGatewayDeployments: vi.fn(),
-  useDeployApi: vi.fn(),
-  useUndeployGatewayDeployment: vi.fn(),
-  useRestoreGatewayDeployment: vi.fn(),
-  useDeleteGatewayDeployment: vi.fn(),
-}));
-
-const ROUTE = '/organizations/acme/projects/retail/apis/orders-api/deploy';
-
-const api: Api = {
-  id: 'api-1',
-  projectId: 'proj-1',
-  name: 'orders-api',
-  displayName: 'Orders API',
-  handler: 'orders-api',
-  kind: 'API_PROXY',
-  status: 'ACTIVE',
-  version: '1.0.0',
-};
-
-const gateway: Gateway = {
-  id: 'gw-1',
-  name: 'prod-gw',
-  displayName: 'Production Gateway',
-  vhost: 'mg.acme.dev',
-  functionalityType: 'regular',
-  mode: 'self-hosted',
-  isActive: true,
-};
-
-const deployed: GatewayDeployment = {
-  id: 'dep-1',
-  name: 'v1.0-prod',
-  gatewayId: 'gw-1',
-  status: 'DEPLOYED',
-  createdAt: '2026-07-01T08:00:00Z',
-  updatedAt: '2026-07-01T08:05:00Z',
-};
-
-const query = <T,>(overrides: Partial<UseQueryResult<T, Error>>) =>
-  ({
-    refetch: vi.fn(),
-    isFetching: false,
-    ...overrides,
-  }) as unknown as UseQueryResult<T, Error>;
-
-// Minimal mutation-result stub, cast to the specific hook's return type.
-const mutation = <H extends (...args: never[]) => unknown>(mutate = vi.fn()) =>
-  ({ mutate, isPending: false }) as unknown as ReturnType<H>;
-
-function renderPage() {
-  return renderWithProviders(
-    <Routes>
-      <Route
-        path="/organizations/:orgHandle/projects/:projectHandler/apis/:apiHandler/deploy"
-        element={<DeployPage />}
-      />
-    </Routes>,
-    { route: ROUTE }
-  );
-}
-
-describe('DeployPage', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.mocked(useApi).mockReturnValue(query({ isLoading: false, data: api }));
-    vi.mocked(useGateways).mockReturnValue(
-      query({ isLoading: false, data: [gateway] })
-    );
-    vi.mocked(useGatewayDeployments).mockReturnValue(
-      query({ isLoading: false, data: [deployed] })
-    );
-    vi.mocked(useDeployApi).mockReturnValue(mutation<typeof useDeployApi>());
-    vi.mocked(useUndeployGatewayDeployment).mockReturnValue(
-      mutation<typeof useUndeployGatewayDeployment>()
-    );
-    vi.mocked(useRestoreGatewayDeployment).mockReturnValue(
-      mutation<typeof useRestoreGatewayDeployment>()
-    );
-    vi.mocked(useDeleteGatewayDeployment).mockReturnValue(
-      mutation<typeof useDeleteGatewayDeployment>()
-    );
-  });
-
-  it('shows the loading state', () => {
-    vi.mocked(useApi).mockReturnValue(query({ isLoading: true }));
-    renderPage();
-    expect(screen.getByText('Loading deploy state')).toBeInTheDocument();
-  });
-
-  it('prompts to add a gateway when none exist', () => {
-    vi.mocked(useGateways).mockReturnValue(
-      query({ isLoading: false, data: [] })
-    );
-    vi.mocked(useGatewayDeployments).mockReturnValue(
-      query({ isLoading: false, data: [] })
-    );
-    renderPage();
-    expect(screen.getByText('No gateway added yet')).toBeInTheDocument();
-    expect(
-      screen.getByRole('button', { name: 'Add Gateway' })
-    ).toBeInTheDocument();
-  });
-
-  it('renders the gateway card expanded with status and history', () => {
-    renderPage();
-    // Header: gateway name, connection chip, current deployment chip.
-    expect(screen.getByText('Production Gateway')).toBeInTheDocument();
-    expect(screen.getAllByText('Active').length).toBeGreaterThan(0);
-    expect(screen.getByText('Current Deployment:')).toBeInTheDocument();
-    // First gateway is expanded: status panel + history are visible.
-    expect(screen.getByText('Deployment Status')).toBeInTheDocument();
-    expect(screen.getByText('API Deployment History')).toBeInTheDocument();
-    expect(screen.getByText('Latest')).toBeInTheDocument();
-  });
-
-  it('deploys with an auto-generated {gateway}_{date}_{n} name', async () => {
-    const mutate = vi.fn();
-    vi.mocked(useDeployApi).mockReturnValue(
-      mutation<typeof useDeployApi>(mutate)
-    );
-    const { user } = renderPage();
-
-    await user.click(screen.getByRole('button', { name: 'Deploy' }));
-
-    expect(mutate).toHaveBeenCalledWith(
-      {
-        api,
-        input: {
-          name: expect.stringMatching(/^prod-gw_\d{4}-\d{2}-\d{2}_1$/),
-          gatewayId: 'gw-1',
-          base: 'current',
-        },
-      },
-      expect.any(Object)
-    );
-  });
-
-  it('stops the active deployment from the status panel', async () => {
-    const mutate = vi.fn();
-    vi.mocked(useUndeployGatewayDeployment).mockReturnValue(
-      mutation<typeof useUndeployGatewayDeployment>(mutate)
-    );
-    const { user } = renderPage();
-
-    await user.click(screen.getByRole('button', { name: 'Stop' }));
-
-    expect(mutate).toHaveBeenCalledWith(
-      { api, deployment: deployed },
-      expect.any(Object)
-    );
-  });
-
-  it('redeploys a suspended deployment', async () => {
-    const suspended: GatewayDeployment = { ...deployed, status: 'UNDEPLOYED' };
-    vi.mocked(useGatewayDeployments).mockReturnValue(
-      query({ isLoading: false, data: [suspended] })
-    );
-    const mutate = vi.fn();
-    vi.mocked(useRestoreGatewayDeployment).mockReturnValue(
-      mutation<typeof useRestoreGatewayDeployment>(mutate)
-    );
-    const { user } = renderPage();
-
-    expect(screen.getByText('Suspended')).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: 'Redeploy' }));
-
-    expect(mutate).toHaveBeenCalledWith(
-      { api, deployment: suspended },
-      expect.any(Object)
-    );
-  });
-
-  it('filters gateways by search', async () => {
-    const second: Gateway = {
-      ...gateway,
-      id: 'gw-2',
-      name: 'edge-gw',
-      displayName: 'Edge Gateway',
-      isActive: false,
-    };
-    vi.mocked(useGateways).mockReturnValue(
-      query({ isLoading: false, data: [gateway, second] })
-    );
-    const { user } = renderPage();
-
-    expect(screen.getByText('Edge Gateway')).toBeInTheDocument();
-    await user.type(screen.getByPlaceholderText('Search gateways'), 'prod');
-
-    expect(screen.queryByText('Edge Gateway')).not.toBeInTheDocument();
-    expect(screen.getByText('Production Gateway')).toBeInTheDocument();
-  });
-});
diff --git a/portals/api-control-plane/src/routes/AppRoutes.orgSettings.test.tsx b/portals/api-control-plane/src/routes/AppRoutes.orgSettings.test.tsx
index ba9752d870..10cc43f0f3 100644
--- a/portals/api-control-plane/src/routes/AppRoutes.orgSettings.test.tsx
+++ b/portals/api-control-plane/src/routes/AppRoutes.orgSettings.test.tsx
@@ -19,7 +19,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { AppRoutes } from './AppRoutes';
+import { anOrganization, aProject, collection, resource } from '../test/msw';
 import { authStatePresets } from '../test/mockAuthState';
+import { server } from '../test/server';
 import { renderWithProviders, screen } from '../test/utils';
 
 // Covers the org-level Settings page (mirrors ai-workspace, which mounts the
@@ -28,10 +30,28 @@ import { renderWithProviders, screen } from '../test/utils';
 // time — organization-level while browsing the org, project-level once a
 // project is selected — never both at once.
 describe('Org-level Settings', () => {
-  beforeEach(() => vi.stubEnv('VITE_USE_MOCK_API', 'true'));
+  // The scope hooks always go to the real transport — `VITE_USE_MOCK_API` only
+  // governs the legacy client — so the endpoints `ConsoleScopeProvider` resolves
+  // the org and project from are stubbed at the network layer.
+  const org = anOrganization({
+    id: 'api-platform-demo',
+    displayName: 'API Platform Demo',
+  });
+  const project = aProject({ id: 'retail-apis', displayName: 'Retail APIs' });
+
+  beforeEach(() => {
+    vi.stubEnv('VITE_USE_MOCK_API', 'true');
+    server.use(
+      collection('/organizations', [org]),
+      resource('/organizations/:organizationId', org),
+      collection('/projects', [project]),
+      resource('/projects/:projectId', project),
+      collection('/rest-apis', [])
+    );
+  });
   afterEach(() => vi.unstubAllEnvs());
 
-  it('redirects /settings to /settings/general at the org level', async () => {
+  it('names the organization on the org-level Settings page', async () => {
     renderWithProviders(<AppRoutes />, {
       route: '/organizations/api-platform-demo/settings',
       authState: authStatePresets.authenticated(),

From c8fba037b3c7f640f3f69f02d3453a887bd45c99 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Mon, 24 Aug 2026 14:15:53 +0530
Subject: [PATCH 08/12] fix: pin dependency versions in package.json

---
 portals/api-control-plane/package.json | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/portals/api-control-plane/package.json b/portals/api-control-plane/package.json
index 3529f252b0..b5444fa3d0 100644
--- a/portals/api-control-plane/package.json
+++ b/portals/api-control-plane/package.json
@@ -38,24 +38,24 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "7.29.7",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/material": "^9.3.1",
-    "@mui/x-data-grid": "^9.11.0",
-    "@mui/x-date-pickers": "^9.11.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@mui/material": "9.3.1",
+    "@mui/x-data-grid": "9.11.0",
+    "@mui/x-date-pickers": "9.11.0",
     "@tanstack/react-query": "5.101.0",
-    "@wso2/oxygen-ui": "^0.13.1",
-    "@wso2/oxygen-ui-icons-react": "^0.13.1",
+    "@wso2/oxygen-ui": "0.13.1",
+    "@wso2/oxygen-ui-icons-react": "0.13.1",
     "axios": "1.19.0",
     "js-yaml": "4.1.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-intl": "^10.1.20",
+    "react-intl": "10.1.20",
     "react-router-dom": "7.9.4"
   },
   "devDependencies": {
     "@eslint/js": "9.26.0",
-    "@formatjs/cli": "^6.16.18",
+    "@formatjs/cli": "6.16.18",
     "@openapitools/openapi-generator-cli": "2.5.2",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.6.3",
@@ -68,9 +68,9 @@
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/coverage-v8": "2.1.8",
-    "babel-plugin-formatjs": "^11.3.16",
+    "babel-plugin-formatjs": "11.3.16",
     "eslint": "9.26.0",
-    "eslint-plugin-formatjs": "^6.4.0",
+    "eslint-plugin-formatjs": "6.4.0",
     "eslint-plugin-react-hooks": "5.2.0",
     "globals": "15.15.0",
     "jsdom": "25.0.1",

From b86efcb6310d5aa70bfd887410b1b760477aab20 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Tue, 25 Aug 2026 10:54:14 +0530
Subject: [PATCH 09/12] fix(apicp): repair app shell scope handling and dead UI
 wiring

- scope: reserve `new` as a non-handle path segment, so the API create page
  (.../apis/new) no longer reads back as an API called "new",  which had put a
  phantom entry in the header switcher and breadcrumbs, turned isApiScope on
  mid-creation, and fired a GET for that API
- shell: hide breadcrumbs on full-page creation flows (newApi, newGateway)
- header: give apiOptions the current-value fallback orgOptions already had, so
  the API switcher never renders an out-of-range value on first paint
- header: fix isProjectsLoading so ProjectQuickSelector's error branch is
  reachable instead of showing "Loading..." forever on a failed query
- apis: wire the inert "Deploy to Gateway" button to routes.apiDeploy
- i18n: split scopeGate.noProjects/noApis, each carrying two different sentences
- some code refactoring
---
 portals/api-control-plane/.eslintignore       |   2 +-
 portals/api-control-plane/.prettierrc.json    |   2 +-
 portals/api-control-plane/package-lock.json   | 224 +++++---
 .../src/i18n/messages/en.json                 | 505 +++++++++++++++++-
 .../src/navigation/useNavigationItems.ts      |   2 +-
 .../src/pages/appShell/APIQuickSelector.tsx   |   9 +-
 .../src/pages/appShell/AppHeader.tsx          |  17 +-
 .../src/pages/appShell/AppLayout.tsx          |  19 +-
 .../pages/appShell/ProjectQuickSelector.tsx   |  11 +-
 .../appShellPages/apis/ApiDetailPage.tsx      |  70 +--
 .../organizations/ExploreMoreCard.tsx         |   4 +-
 .../projects/ProjectListPage.tsx              |   9 +-
 .../src/routes/paths.test.ts                  |  23 +
 .../api-control-plane/src/scope/ScopeGate.tsx |   6 +-
 .../src/scope/consoleRouteParams.ts           |  58 +-
 .../src/theme/AppThemeProvider.tsx            |   2 +-
 .../src/theme/emotionCache.ts                 |   2 +-
 portals/api-control-plane/src/theme/index.ts  |   2 +-
 portals/api-control-plane/src/theme/themes.ts |   2 +-
 19 files changed, 759 insertions(+), 210 deletions(-)

diff --git a/portals/api-control-plane/.eslintignore b/portals/api-control-plane/.eslintignore
index 164f04d876..67dc1a0320 100644
--- a/portals/api-control-plane/.eslintignore
+++ b/portals/api-control-plane/.eslintignore
@@ -1,4 +1,4 @@
 /public/**
 /node_modules/**
 /coverage/**
-# Pleae comment the reason if you are  ignoring a file/directory here
\ No newline at end of file
+# Pleae comment the reason if you are  ignoring a file/directory here
diff --git a/portals/api-control-plane/.prettierrc.json b/portals/api-control-plane/.prettierrc.json
index bec8009468..c8b04ac97a 100644
--- a/portals/api-control-plane/.prettierrc.json
+++ b/portals/api-control-plane/.prettierrc.json
@@ -3,4 +3,4 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "all"
-}
\ No newline at end of file
+}
diff --git a/portals/api-control-plane/package-lock.json b/portals/api-control-plane/package-lock.json
index 3da7a22de3..4f5b78f496 100644
--- a/portals/api-control-plane/package-lock.json
+++ b/portals/api-control-plane/package-lock.json
@@ -9,24 +9,24 @@
       "version": "0.1.0",
       "dependencies": {
         "@babel/runtime-corejs3": "7.29.7",
-        "@emotion/react": "^11.14.0",
-        "@emotion/styled": "^11.14.1",
-        "@mui/material": "^9.3.1",
-        "@mui/x-data-grid": "^9.11.0",
-        "@mui/x-date-pickers": "^9.11.0",
+        "@emotion/react": "11.14.0",
+        "@emotion/styled": "11.14.1",
+        "@mui/material": "9.3.1",
+        "@mui/x-data-grid": "9.11.0",
+        "@mui/x-date-pickers": "9.11.0",
         "@tanstack/react-query": "5.101.0",
-        "@wso2/oxygen-ui": "^0.13.1",
-        "@wso2/oxygen-ui-icons-react": "^0.13.1",
+        "@wso2/oxygen-ui": "0.13.1",
+        "@wso2/oxygen-ui-icons-react": "0.13.1",
         "axios": "1.19.0",
         "js-yaml": "4.1.0",
         "react": "19.2.3",
         "react-dom": "19.2.3",
-        "react-intl": "^10.1.20",
+        "react-intl": "10.1.20",
         "react-router-dom": "7.9.4"
       },
       "devDependencies": {
         "@eslint/js": "9.26.0",
-        "@formatjs/cli": "^6.16.18",
+        "@formatjs/cli": "6.16.18",
         "@openapitools/openapi-generator-cli": "2.5.2",
         "@testing-library/dom": "10.4.1",
         "@testing-library/jest-dom": "6.6.3",
@@ -39,9 +39,9 @@
         "@vitejs/plugin-basic-ssl": "1.1.0",
         "@vitejs/plugin-react": "4.2.1",
         "@vitest/coverage-v8": "2.1.8",
-        "babel-plugin-formatjs": "^11.3.16",
+        "babel-plugin-formatjs": "11.3.16",
         "eslint": "9.26.0",
-        "eslint-plugin-formatjs": "^6.4.0",
+        "eslint-plugin-formatjs": "6.4.0",
         "eslint-plugin-react-hooks": "5.2.0",
         "globals": "15.15.0",
         "jsdom": "25.0.1",
@@ -1411,6 +1411,36 @@
         "win32"
       ]
     },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-3.1.1.tgz",
+      "integrity": "sha512-jhZbTwda+2tcNrs4kKvxrPLPjx8QsBCLCUgrrJ/S+G9YrGHWLhAyFMMBHJBnBoOwuLHd7L14FgYudviKaxkO2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "3.1.0",
+        "@formatjs/intl-localematcher": "0.8.1",
+        "decimal.js": "^10.6.0",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@formatjs/ecma402-abstract/node_modules/@formatjs/fast-memoize": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-3.1.0.tgz",
+      "integrity": "sha512-b5mvSWCI+XVKiz5WhnBCY3RJ4ZwfjAidU0yVlKa3d3MSgKmH1hC3tBGEAtYyN5mqL7N0G5x0BOUYyO8CEupWgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@formatjs/ecma402-abstract/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/@formatjs/fast-memoize": {
       "version": "3.1.7",
       "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-3.1.7.tgz",
@@ -1434,20 +1464,48 @@
       "license": "MIT"
     },
     "node_modules/@formatjs/intl": {
-      "version": "4.1.19",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-4.1.19.tgz",
-      "integrity": "sha512-bZMROATl+rzfL8wsDZ53i8XWHx5e6rVr8QlGT5GDvHImEUro4WE9pxUd2dobzmI3CtD+zkt/wkEdqcb+3CK8Fg==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-4.1.18.tgz",
+      "integrity": "sha512-d+AFsn+luyMAUTQImPJEK76bhEvzFKRG/1PCf1Q6sCH3ojHyHgJJkfvUFElpbDkihtm4uedK7/zoG24EL285nw==",
       "license": "MIT",
       "dependencies": {
         "@formatjs/fast-memoize": "3.1.7",
-        "@formatjs/icu-messageformat-parser": "3.5.17",
-        "intl-messageformat": "11.2.14"
+        "@formatjs/icu-messageformat-parser": "3.5.16",
+        "intl-messageformat": "11.2.13"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.8.1.tgz",
+      "integrity": "sha512-xwEuwQFdtSq1UKtQnyTZWC+eHdv7Uygoa+H2k/9uzBVQjDyp9r20LNDNKedWXll7FssT3GRHvqsdJGYSUWqYFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "3.1.0",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher/node_modules/@formatjs/fast-memoize": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-3.1.0.tgz",
+      "integrity": "sha512-b5mvSWCI+XVKiz5WhnBCY3RJ4ZwfjAidU0yVlKa3d3MSgKmH1hC3tBGEAtYyN5mqL7N0G5x0BOUYyO8CEupWgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
       }
     },
+    "node_modules/@formatjs/intl-localematcher/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/@formatjs/intl/node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.17.tgz",
-      "integrity": "sha512-cN9jhVqT7u0K9tix43fhjoUwL0nazyW6zsNIXs2QdPADr+nurPfYyssUiMqcSCGlPcCiqnYVxgSn7zBSuI+5Bg==",
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.16.tgz",
+      "integrity": "sha512-kl6b/4D56gjGZi4ZewSmvXbalHwjOUI5ogEHPZqw42goeXTTrL7/yuPzvdrvr0QigDtvaOeb+UeMf62jks43Yg==",
       "license": "MIT",
       "dependencies": {
         "@formatjs/icu-skeleton-parser": "2.1.11"
@@ -3248,16 +3306,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/estree-jsx": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
-      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/js-yaml": {
       "version": "4.0.3",
       "dev": true,
@@ -5590,52 +5638,65 @@
       }
     },
     "node_modules/eslint-plugin-formatjs": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-formatjs/-/eslint-plugin-formatjs-6.5.0.tgz",
-      "integrity": "sha512-0vO54Z55gcFkky7EzUk6LlDHz8d0KgF7CEz5kPl024wAGO9XPQJhbDfZb7qt2isKH+muTPo9qbmZaAt4/7XXpA==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-formatjs/-/eslint-plugin-formatjs-6.4.0.tgz",
+      "integrity": "sha512-IfSchytfKn5PhEmsd79/c44e5ZoXbiteD9/AmBgNNtyMmJ+wBWby3jotF3pSZoz3PHoggmhdEh3K3wxYuYqQng==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@formatjs/icu-messageformat-parser": "3.5.17",
-        "@formatjs/ts-transformer": "4.4.19",
-        "@types/estree-jsx": "1",
-        "@types/picomatch": "4",
-        "@unicode/unicode-17.0.0": "1",
-        "magic-string": "1",
-        "picomatch": "2 || 3 || 4"
+        "@formatjs/icu-messageformat-parser": "3.5.1",
+        "@formatjs/ts-transformer": "4.4.0",
+        "@types/picomatch": "^4.0.0",
+        "@unicode/unicode-17.0.0": "^1.6.16",
+        "magic-string": "^0.30.0",
+        "picomatch": "2 || 3 || 4",
+        "tslib": "^2.8.1"
       },
       "peerDependencies": {
         "eslint": "9 || 10"
       }
     },
     "node_modules/eslint-plugin-formatjs/node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.17.tgz",
-      "integrity": "sha512-cN9jhVqT7u0K9tix43fhjoUwL0nazyW6zsNIXs2QdPADr+nurPfYyssUiMqcSCGlPcCiqnYVxgSn7zBSuI+5Bg==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.1.tgz",
+      "integrity": "sha512-sSDmSvmmoVQ92XqWb499KrIhv/vLisJU8ITFrx7T7NZHUmMY7EL9xgRowAosaljhqnj/5iufG24QrdzB6X3ItA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@formatjs/icu-skeleton-parser": "2.1.11"
+        "@formatjs/ecma402-abstract": "3.1.1",
+        "@formatjs/icu-skeleton-parser": "2.1.1",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/eslint-plugin-formatjs/node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-2.1.1.tgz",
+      "integrity": "sha512-PSFABlcNefjI6yyk8f7nyX1DC7NHmq6WaCHZLySEXBrXuLOB2f935YsnzuPjlz+ibhb9yWTdPeVX1OVcj24w2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "3.1.1",
+        "tslib": "^2.8.1"
       }
     },
     "node_modules/eslint-plugin-formatjs/node_modules/@formatjs/ts-transformer": {
-      "version": "4.4.19",
-      "resolved": "https://registry.npmjs.org/@formatjs/ts-transformer/-/ts-transformer-4.4.19.tgz",
-      "integrity": "sha512-TWxL1btx29333yEQc1/eJsU9SUjDJBruzkrR4TVXBLgPaCWbhxg7haOztGXTLgLx+X3ONat7F0kRzcCHksyJyA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ts-transformer/-/ts-transformer-4.4.0.tgz",
+      "integrity": "sha512-lFDp9Rbpxk5Dt8O1/I9VG5btqKbOkjT4snSa73HO1YTJ9KGeXPKA7aWVgHFXJVVq0KluhbZiCoPJVHC4ZREgxw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@formatjs/icu-messageformat-parser": "3.5.17",
-        "@types/babel__core": "7",
-        "@types/node": "22 || 24",
-        "json-stable-stringify": "1",
-        "typescript": "^5.6 || 6 || 7"
+        "@formatjs/icu-messageformat-parser": "3.5.1",
+        "@types/node": "^22.19.5",
+        "json-stable-stringify": "^1.3.0",
+        "tslib": "^2.8.1",
+        "typescript": "^5.6.0"
       },
       "engines": {
         "node": ">= 20.12.0"
       },
       "peerDependencies": {
-        "ts-jest": "29"
+        "ts-jest": "^29"
       },
       "peerDependenciesMeta": {
         "ts-jest": {
@@ -5644,29 +5705,26 @@
       }
     },
     "node_modules/eslint-plugin-formatjs/node_modules/@types/node": {
-      "version": "24.13.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz",
-      "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==",
+      "version": "22.20.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.20.1.tgz",
+      "integrity": "sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~7.18.0"
+        "undici-types": "~6.21.0"
       }
     },
-    "node_modules/eslint-plugin-formatjs/node_modules/magic-string": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.2.0.tgz",
-      "integrity": "sha512-ptco+HFxTLgjafSLim2LojBSwfg5feBjd+SqyiwdGkzC38UPdZy3zgrHMI2CoTf5fJL38tbHMYWVzIH8BxGqJw==",
+    "node_modules/eslint-plugin-formatjs/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
+      "license": "0BSD"
     },
     "node_modules/eslint-plugin-formatjs/node_modules/undici-types": {
-      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
-      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -6557,19 +6615,19 @@
       }
     },
     "node_modules/intl-messageformat": {
-      "version": "11.2.14",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-11.2.14.tgz",
-      "integrity": "sha512-9f2VD1HFuxUvMw0RxsaP8WmMns6JRTnsNB/zghTFrp11ZktiXWwVDeZBPQchBKEmo+Gx/ZhxI7Qht7YglFD4PA==",
+      "version": "11.2.13",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-11.2.13.tgz",
+      "integrity": "sha512-JaPaE6TIX+TAS5XLhDUh41geLw4QfBHX4s5pW8Km+L9fVC8HzB9yOuhbh4EMR/F1+8C6b9qk4763Cv+LdOG1kg==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@formatjs/fast-memoize": "3.1.7",
-        "@formatjs/icu-messageformat-parser": "3.5.17"
+        "@formatjs/icu-messageformat-parser": "3.5.16"
       }
     },
     "node_modules/intl-messageformat/node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.17.tgz",
-      "integrity": "sha512-cN9jhVqT7u0K9tix43fhjoUwL0nazyW6zsNIXs2QdPADr+nurPfYyssUiMqcSCGlPcCiqnYVxgSn7zBSuI+5Bg==",
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.16.tgz",
+      "integrity": "sha512-kl6b/4D56gjGZi4ZewSmvXbalHwjOUI5ogEHPZqw42goeXTTrL7/yuPzvdrvr0QigDtvaOeb+UeMf62jks43Yg==",
       "license": "MIT",
       "dependencies": {
         "@formatjs/icu-skeleton-parser": "2.1.11"
@@ -7951,14 +8009,14 @@
       }
     },
     "node_modules/react-intl": {
-      "version": "10.1.22",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-10.1.22.tgz",
-      "integrity": "sha512-6PxlTKapYpv/Kl+yYEH06J3T5T7gUVx6STjrWJedeITOAkGEn6sBvb6r0qtjg2pK7PZsom7gXKUFKwNykLoLSQ==",
+      "version": "10.1.20",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-10.1.20.tgz",
+      "integrity": "sha512-dvD9F7CqjlB/cIWakFzScGVPDmhWk34cFWY0etWuVNc07Zmc56OKjQwqu9q74evbttSto5wFXchZtvdRXy/Tkg==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@formatjs/icu-messageformat-parser": "3.5.17",
-        "@formatjs/intl": "4.1.19",
-        "intl-messageformat": "11.2.14"
+        "@formatjs/icu-messageformat-parser": "3.5.16",
+        "@formatjs/intl": "4.1.18",
+        "intl-messageformat": "11.2.13"
       },
       "peerDependencies": {
         "@types/react": ">=18.0.0",
@@ -7966,9 +8024,9 @@
       }
     },
     "node_modules/react-intl/node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.17.tgz",
-      "integrity": "sha512-cN9jhVqT7u0K9tix43fhjoUwL0nazyW6zsNIXs2QdPADr+nurPfYyssUiMqcSCGlPcCiqnYVxgSn7zBSuI+5Bg==",
+      "version": "3.5.16",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.16.tgz",
+      "integrity": "sha512-kl6b/4D56gjGZi4ZewSmvXbalHwjOUI5ogEHPZqw42goeXTTrL7/yuPzvdrvr0QigDtvaOeb+UeMf62jks43Yg==",
       "license": "MIT",
       "dependencies": {
         "@formatjs/icu-skeleton-parser": "2.1.11"
diff --git a/portals/api-control-plane/src/i18n/messages/en.json b/portals/api-control-plane/src/i18n/messages/en.json
index cf602ac6cc..760fd24c62 100644
--- a/portals/api-control-plane/src/i18n/messages/en.json
+++ b/portals/api-control-plane/src/i18n/messages/en.json
@@ -1,44 +1,499 @@
 {
-  "aiWorkspace.pages.appShell.APIQuickSelector.apis": {
+  "api.create.ApiCreationSteps.step.apiType": {
+    "defaultMessage": "API type",
+    "description": "Progress step where the user picks REST, GraphQL and so on. Noun, not a command."
+  },
+  "api.create.ApiCreationSteps.step.configure": {
+    "defaultMessage": "Configure",
+    "description": "Progress step where the user fills in the API name, version and context."
+  },
+  "api.create.ApiCreationSteps.step.source": {
+    "defaultMessage": "Source",
+    "description": "Progress step where the user supplies a contract or a backend endpoint."
+  },
+  "api.create.ApiTypeSelector.badge.comingSoon": {
+    "defaultMessage": "Coming soon",
+    "description": "Badge on an API type that is planned but not released yet."
+  },
+  "api.create.ApiTypeSelector.badge.selected": {
+    "defaultMessage": "Selected",
+    "description": "Accessible label for the check mark on the chosen card."
+  },
+  "api.create.ApiTypeSelector.groupLabel": {
+    "defaultMessage": "API type",
+    "description": "Accessible name for the group of API type cards. Noun, not a command."
+  },
+  "api.create.ApiTypeSelector.subtitle": {
+    "defaultMessage": "This decides how the gateway exposes your backend. Only REST is available today.",
+    "description": "Supporting line under the API type selector heading."
+  },
+  "api.create.ApiTypeSelector.title": {
+    "defaultMessage": "What kind of API are you exposing?",
+    "description": "Heading above the grid of API type cards."
+  },
+  "api.create.ApiTypeSelector.tooltip.comingSoon": {
+    "defaultMessage": "Not available yet.",
+    "description": "Tooltip explaining why an unreleased API type card cannot be clicked."
+  },
+  "api.create.apiResourcesPreview.empty.body": {
+    "defaultMessage": "Fetch the contract and the resources it defines are listed here for review."
+  },
+  "api.create.apiResourcesPreview.empty.title": {
+    "defaultMessage": "Nothing fetched yet"
+  },
+  "api.create.apiResourcesPreview.source": {
+    "defaultMessage": "Source",
+    "description": "Toggle that swaps the rendered resources for the definition’s own text."
+  },
+  "api.create.apiResourcesPreview.title": {
+    "defaultMessage": "API resources"
+  },
+  "api.create.apiType.graphQl.description": {
+    "defaultMessage": "Serve a GraphQL schema through the gateway."
+  },
+  "api.create.apiType.graphQl.title": {
+    "defaultMessage": "GraphQL API"
+  },
+  "api.create.apiType.grpc.description": {
+    "defaultMessage": "Expose high-performance gRPC services."
+  },
+  "api.create.apiType.grpc.title": {
+    "defaultMessage": "gRPC API"
+  },
+  "api.create.apiType.rest.description": {
+    "defaultMessage": "Expose REST and other HTTP backends."
+  },
+  "api.create.apiType.rest.title": {
+    "defaultMessage": "REST API"
+  },
+  "api.create.apiType.webSocket.description": {
+    "defaultMessage": "Stream data over long-lived WebSocket connections."
+  },
+  "api.create.apiType.webSocket.title": {
+    "defaultMessage": "WebSocket API"
+  },
+  "api.create.apiType.webSub.description": {
+    "defaultMessage": "Deliver events to subscribers over WebSub."
+  },
+  "api.create.apiType.webSub.title": {
+    "defaultMessage": "WebSub API"
+  },
+  "api.create.approach.contract.description": {
+    "defaultMessage": "Upload or link an OpenAPI, GraphQL or gRPC definition."
+  },
+  "api.create.approach.contract.title": {
+    "defaultMessage": "Import API Contract"
+  },
+  "api.create.approach.endpoint.description": {
+    "defaultMessage": "Point the gateway at a backend URL and refine later."
+  },
+  "api.create.approach.endpoint.title": {
+    "defaultMessage": "Start with Endpoint"
+  },
+  "api.create.approach.genAi.description": {
+    "defaultMessage": "Describe the API in plain language and let AI draft it."
+  },
+  "api.create.approach.genAi.title": {
+    "defaultMessage": "Generate with AI"
+  },
+  "api.create.approach.scratch.description": {
+    "defaultMessage": "Create an empty API and add resources by hand."
+  },
+  "api.create.approach.scratch.title": {
+    "defaultMessage": "Start from Scratch"
+  },
+  "api.create.approachSelector.apiTypeSection.description": {
+    "defaultMessage": "Types that {proxyType} does not carry stay listed, greyed out.",
+    "description": "Explains why unavailable API types are still visible on the cards below."
+  },
+  "api.create.approachSelector.apiTypeSection.title": {
+    "defaultMessage": "Pick an API type"
+  },
+  "api.create.approachSelector.approach.continue": {
+    "defaultMessage": "Continue"
+  },
+  "api.create.approachSelector.approachSection.description": {
+    "defaultMessage": "Choosing one of these opens the next step."
+  },
+  "api.create.approachSelector.approachSection.title": {
+    "defaultMessage": "How do you want to start?"
+  },
+  "api.create.approachSelector.badge.comingSoon": {
+    "defaultMessage": "Coming soon",
+    "description": "Badge on an option that is planned but not released yet."
+  },
+  "api.create.approachSelector.badge.selected": {
+    "defaultMessage": "Selected",
+    "description": "Accessible label for the check mark on the chosen card."
+  },
+  "api.create.approachSelector.badge.unavailable": {
+    "defaultMessage": "Unavailable",
+    "description": "Badge on an option the currently selected proxy type does not offer."
+  },
+  "api.create.approachSelector.proxyTypeSection.description": {
+    "defaultMessage": "This decides which API types and starting points are available below."
+  },
+  "api.create.approachSelector.proxyTypeSection.title": {
+    "defaultMessage": "Pick a proxy type"
+  },
+  "api.create.approachSelector.subtitle": {
+    "defaultMessage": "Choose what you are exposing and how you want to start. Everything here can be changed after the API is created."
+  },
+  "api.create.approachSelector.title": {
+    "defaultMessage": "Create New"
+  },
+  "api.create.approachSelector.tooltip.comingSoon": {
+    "defaultMessage": "Not available yet."
+  },
+  "api.create.approachSelector.tooltip.unsupportedForProxyType": {
+    "defaultMessage": "Not available for {proxyType}."
+  },
+  "api.create.fromContract.action.back": {
+    "defaultMessage": "Back",
+    "description": "Returns to the previous step of the API creation wizard."
+  },
+  "api.create.fromContract.action.fetch": {
+    "defaultMessage": "Fetch Contract",
+    "description": "Reads the contract from the chosen source and previews its resources, without leaving the step."
+  },
+  "api.create.fromContract.action.next": {
+    "defaultMessage": "Next"
+  },
+  "api.create.fromContract.action.sampleUrl": {
+    "defaultMessage": "Try with Sample URL",
+    "description": "Fills the field with a ready-made example to try the import with."
+  },
+  "api.create.fromContract.gitHub.authorize": {
+    "defaultMessage": "Authorize With GitHub"
+  },
+  "api.create.fromContract.gitHub.connectTitle": {
+    "defaultMessage": "Connect Your Repository"
+  },
+  "api.create.fromContract.gitHub.invalid": {
+    "defaultMessage": "Enter a valid GitHub repository URL."
+  },
+  "api.create.fromContract.gitHub.label": {
+    "defaultMessage": "Public Repository URL"
+  },
+  "api.create.fromContract.gitHub.or": {
+    "defaultMessage": "OR",
+    "description": "Separates the two ways of reaching a repository: a public URL, or authorizing with GitHub."
+  },
+  "api.create.fromContract.gitHub.placeholder": {
+    "defaultMessage": "https://github.com/org/repo"
+  },
+  "api.create.fromContract.gitHub.required": {
+    "defaultMessage": "The repository URL cannot be empty"
+  },
+  "api.create.fromContract.source.file": {
+    "defaultMessage": "Upload"
+  },
+  "api.create.fromContract.source.gitHub": {
+    "defaultMessage": "GitHub"
+  },
+  "api.create.fromContract.source.label": {
+    "defaultMessage": "Import the contract from",
+    "description": "Label over the picker that chooses where the API contract is read from."
+  },
+  "api.create.fromContract.source.swaggerHub": {
+    "defaultMessage": "SwaggerHub"
+  },
+  "api.create.fromContract.source.url": {
+    "defaultMessage": "URL"
+  },
+  "api.create.fromContract.spec.oversized": {
+    "defaultMessage": "That file is too large to validate in the browser."
+  },
+  "api.create.fromContract.spec.unreachable": {
+    "defaultMessage": "That contract could not be downloaded. Check the URL, and that the host allows cross-origin requests."
+  },
+  "api.create.fromContract.spec.unreadable": {
+    "defaultMessage": "That contract could not be read as YAML or JSON."
+  },
+  "api.create.fromContract.spec.unsupportedSource": {
+    "defaultMessage": "Importing from this source is not available yet."
+  },
+  "api.create.fromContract.swaggerHub.authorized": {
+    "defaultMessage": "Authorized",
+    "description": "SwaggerHub access mode that reads private definitions. Not released yet."
+  },
+  "api.create.fromContract.swaggerHub.authorizedHint": {
+    "defaultMessage": "Not available yet."
+  },
+  "api.create.fromContract.swaggerHub.organizationLabel": {
+    "defaultMessage": "SwaggerHub Organization"
+  },
+  "api.create.fromContract.swaggerHub.organizationPlaceholder": {
+    "defaultMessage": "Enter SwaggerHub Organization here"
+  },
+  "api.create.fromContract.swaggerHub.organizationRequired": {
+    "defaultMessage": "The SwaggerHub organization cannot be empty"
+  },
+  "api.create.fromContract.swaggerHub.public": {
+    "defaultMessage": "Public",
+    "description": "SwaggerHub access mode that reads publicly listed definitions."
+  },
+  "api.create.fromContract.swaggerHub.refresh": {
+    "defaultMessage": "Refresh SwaggerHub organizations",
+    "description": "Accessible name for the reload button on the organization field."
+  },
+  "api.create.fromContract.title": {
+    "defaultMessage": "Create API Proxy from Contract"
+  },
+  "api.create.fromContract.upload.accepted": {
+    "defaultMessage": "Accepted file types: {extensions}"
+  },
+  "api.create.fromContract.upload.action": {
+    "defaultMessage": "Upload"
+  },
+  "api.create.fromContract.upload.hint": {
+    "defaultMessage": "Drag & Drop your files or click to select files"
+  },
+  "api.create.fromContract.upload.remove": {
+    "defaultMessage": "Remove {fileName}",
+    "description": "Accessible name for the button that discards the chosen file."
+  },
+  "api.create.fromContract.upload.required": {
+    "defaultMessage": "Select an API contract file to continue"
+  },
+  "api.create.fromContract.upload.title": {
+    "defaultMessage": "Upload API Contract"
+  },
+  "api.create.fromContract.upload.unsupported": {
+    "defaultMessage": "That file type is not supported. Accepted types: {extensions}"
+  },
+  "api.create.fromContract.url.invalid": {
+    "defaultMessage": "Enter a valid HTTP or HTTPS URL."
+  },
+  "api.create.fromContract.url.label": {
+    "defaultMessage": "URL for API Contract"
+  },
+  "api.create.fromContract.url.placeholder": {
+    "defaultMessage": "Enter URL for API Contract here"
+  },
+  "api.create.fromContract.url.required": {
+    "defaultMessage": "The URL for the API contract cannot be empty"
+  },
+  "api.create.fromEndpoint.action.back": {
+    "defaultMessage": "Back",
+    "description": "Returns to the previous step of the API creation wizard."
+  },
+  "api.create.fromEndpoint.action.clear": {
+    "defaultMessage": "Clear {label}",
+    "description": "Accessible name for the button that empties a URL field. {label} is that field’s own label."
+  },
+  "api.create.fromEndpoint.action.next": {
+    "defaultMessage": "Next"
+  },
+  "api.create.fromEndpoint.apiType.label": {
+    "defaultMessage": "Select API Type"
+  },
+  "api.create.fromEndpoint.error.invalidUrl": {
+    "defaultMessage": "Enter a valid HTTP or HTTPS URL."
+  },
+  "api.create.fromEndpoint.error.productionEmpty": {
+    "defaultMessage": "The Production Backend URL cannot be empty"
+  },
+  "api.create.fromEndpoint.production.helper": {
+    "defaultMessage": "The backend the gateway routes production traffic to."
+  },
+  "api.create.fromEndpoint.production.label": {
+    "defaultMessage": "Production Backend URL"
+  },
+  "api.create.fromEndpoint.production.placeholder": {
+    "defaultMessage": "Enter the production backend URL"
+  },
+  "api.create.fromEndpoint.sandbox.helper": {
+    "defaultMessage": "A non-production backend used for testing this API."
+  },
+  "api.create.fromEndpoint.sandbox.label": {
+    "defaultMessage": "Sandbox Backend URL (optional)"
+  },
+  "api.create.fromEndpoint.sandbox.placeholder": {
+    "defaultMessage": "Enter the sandbox backend URL"
+  },
+  "api.create.fromEndpoint.status.validMark": {
+    "defaultMessage": "Valid URL",
+    "description": "Accessible label for the check mark shown inside a URL field that passed validation."
+  },
+  "api.create.fromEndpoint.subtitle": {
+    "defaultMessage": "Point the gateway at your backend. Everything else is filled in on the next step."
+  },
+  "api.create.fromEndpoint.title": {
+    "defaultMessage": "Create API Proxy from Endpoint"
+  },
+  "api.create.generalForm.action.back": {
+    "defaultMessage": "Back"
+  },
+  "api.create.generalForm.action.create": {
+    "defaultMessage": "Create"
+  },
+  "api.create.generalForm.advanced": {
+    "defaultMessage": "Advanced",
+    "description": "Label on the disclosure holding the optional settings."
+  },
+  "api.create.generalForm.backendAuth.description": {
+    "defaultMessage": "Credentials the gateway uses to call the backend."
+  },
+  "api.create.generalForm.backendAuth.label": {
+    "defaultMessage": "Backend authentication"
+  },
+  "api.create.generalForm.backendAuth.option.apiKey": {
+    "defaultMessage": "API key"
+  },
+  "api.create.generalForm.backendAuth.option.basic": {
+    "defaultMessage": "Basic authentication"
+  },
+  "api.create.generalForm.backendAuth.option.none": {
+    "defaultMessage": "None",
+    "description": "Backend authentication option meaning no credentials are sent."
+  },
+  "api.create.generalForm.backendAuth.option.oauth2": {
+    "defaultMessage": "OAuth 2.0"
+  },
+  "api.create.generalForm.basePath.helper": {
+    "defaultMessage": "Routing base path for this API. Defaults from the identifier and version."
+  },
+  "api.create.generalForm.basePath.label": {
+    "defaultMessage": "Base Path"
+  },
+  "api.create.generalForm.description.label": {
+    "defaultMessage": "Description"
+  },
+  "api.create.generalForm.displayName.label": {
+    "defaultMessage": "Display name"
+  },
+  "api.create.generalForm.identifier.helper": {
+    "defaultMessage": "URL-friendly. Auto-generated from the display name."
+  },
+  "api.create.generalForm.identifier.label": {
+    "defaultMessage": "Identifier"
+  },
+  "api.create.generalForm.proxyType.description": {
+    "defaultMessage": "Expose your service as an HTTP API proxy."
+  },
+  "api.create.generalForm.proxyType.title": {
+    "defaultMessage": "HTTP"
+  },
+  "api.create.generalForm.sandboxUrl.label": {
+    "defaultMessage": "Sandbox URL (optional)"
+  },
+  "api.create.generalForm.section.backendEndpoint": {
+    "defaultMessage": "Backend endpoint"
+  },
+  "api.create.generalForm.section.basicInformation": {
+    "defaultMessage": "Basic information"
+  },
+  "api.create.generalForm.subtitle": {
+    "defaultMessage": "Provide the details to configure and expose your API proxy."
+  },
+  "api.create.generalForm.targetUrl.helper": {
+    "defaultMessage": "The backend the gateway routes to."
+  },
+  "api.create.generalForm.targetUrl.label": {
+    "defaultMessage": "Target URL"
+  },
+  "api.create.generalForm.title": {
+    "defaultMessage": "Create an API Proxy"
+  },
+  "api.create.generalForm.transport.http": {
+    "defaultMessage": "HTTP"
+  },
+  "api.create.generalForm.transport.https": {
+    "defaultMessage": "HTTPS"
+  },
+  "api.create.generalForm.transport.label": {
+    "defaultMessage": "Transport"
+  },
+  "api.create.generalForm.version.helper": {
+    "defaultMessage": "e.g. 1.0.0"
+  },
+  "api.create.generalForm.version.label": {
+    "defaultMessage": "Version"
+  },
+  "api.create.proxyType.apiProxy.description": {
+    "defaultMessage": "Expose an existing HTTP backend through the gateway."
+  },
+  "api.create.proxyType.apiProxy.title": {
+    "defaultMessage": "API Proxy"
+  },
+  "api.create.proxyType.eventProxy.description": {
+    "defaultMessage": "Publish and subscribe to event streams over WebSub."
+  },
+  "api.create.proxyType.eventProxy.title": {
+    "defaultMessage": "Event Proxy"
+  },
+  "api.create.proxyType.mcpProxy.description": {
+    "defaultMessage": "Proxy an existing MCP server, or generate one from an API."
+  },
+  "api.create.proxyType.mcpProxy.title": {
+    "defaultMessage": "MCP Proxy"
+  },
+  "apiCard.delete": {
+    "defaultMessage": "Delete {apiName}",
+    "description": "Accessible label for deleting an API from API card"
+  },
+  "apiCard.updated": {
+    "defaultMessage": "Updated {relative}",
+    "description": "Card footer timestamp; {relative} is a phrase such as \"3 hours ago\"."
+  },
+  "apiControlPlane.pages.appShell.APIQuickSelector.apis": {
     "defaultMessage": "APIs"
   },
-  "aiWorkspace.pages.appShell.APIQuickSelector.failed.to.load.apis": {
+  "apiControlPlane.pages.appShell.APIQuickSelector.failed.to.load.apis": {
     "defaultMessage": "Failed to load APIs"
   },
-  "aiWorkspace.pages.appShell.APIQuickSelector.loading": {
+  "apiControlPlane.pages.appShell.APIQuickSelector.loading": {
     "defaultMessage": "Loading..."
   },
-  "aiWorkspace.pages.appShell.APIQuickSelector.no.apis.available": {
+  "apiControlPlane.pages.appShell.APIQuickSelector.no.apis.available": {
     "defaultMessage": "No APIs available"
   },
-  "aiWorkspace.pages.appShell.ProjectQuickSelector.failed.to.load.projects": {
+  "apiControlPlane.pages.appShell.ProjectQuickSelector.failed.to.load.projects": {
     "defaultMessage": "Failed to load projects"
   },
-  "aiWorkspace.pages.appShell.ProjectQuickSelector.loading": {
+  "apiControlPlane.pages.appShell.ProjectQuickSelector.loading": {
     "defaultMessage": "Loading..."
   },
-  "aiWorkspace.pages.appShell.ProjectQuickSelector.no.projects.available": {
+  "apiControlPlane.pages.appShell.ProjectQuickSelector.no.projects.available": {
     "defaultMessage": "No projects available"
   },
-  "aiWorkspace.pages.appShell.ProjectQuickSelector.projects": {
+  "apiControlPlane.pages.appShell.ProjectQuickSelector.projects": {
     "defaultMessage": "Projects"
   },
-  "aiWorkspace.pages.appShell.appShellPages.projects.ExploreMoreCard.explore.more": {
-    "defaultMessage": "Explore More"
-  },
-  "aiWorkspace.pages.appShell.appShellPages.proxies.LLMProxyOverview.context.label": {
+  "apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.context.label": {
     "defaultMessage": "Context :"
   },
-  "aiWorkspace.pages.appShell.appShellPages.proxies.LLMProxyOverview.last.updated": {
+  "apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.deployToGateway": {
+    "defaultMessage": "Deploy to Gateway",
+    "description": "Button on the API overview header that opens the API's deployment page."
+  },
+  "apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.lastUpdated.label": {
     "defaultMessage": "Last updated :"
   },
-  "apiCard.delete": {
-    "defaultMessage": "Delete {apiName}",
-    "description": "Accessible label for deleting an API from API card"
+  "apiControlPlane.pages.appShell.appShellPages.apis.develop.DocumentsPage.subtitle": {
+    "defaultMessage": "Documentation for {apiName}",
+    "description": "Sub-header under the section name; {apiName} is the API display name."
   },
-  "apiCard.updated": {
-    "defaultMessage": "Updated {relative}",
-    "description": "Card footer timestamp; {relative} is a phrase such as \"3 hours ago\"."
+  "apiControlPlane.pages.appShell.appShellPages.apis.develop.DocumentsPage.title": {
+    "defaultMessage": "Documents"
+  },
+  "apiControlPlane.pages.appShell.appShellPages.apis.develop.PoliciesPage.subtitle": {
+    "defaultMessage": "Policies attached to {apiName}",
+    "description": "Sub-header under the section name; {apiName} is the API display name."
+  },
+  "apiControlPlane.pages.appShell.appShellPages.apis.develop.PoliciesPage.title": {
+    "defaultMessage": "Policies"
+  },
+  "apiControlPlane.pages.appShell.appShellPages.apis.develop.RoutingPage.subtitle": {
+    "defaultMessage": "Routing for {apiName}",
+    "description": "Sub-header under the section name; {apiName} is the API display name."
+  },
+  "apiControlPlane.pages.appShell.appShellPages.apis.develop.RoutingPage.title": {
+    "defaultMessage": "Routing"
+  },
+  "apiControlPlane.pages.appShell.appShellPages.projects.ExploreMoreCard.explore.more": {
+    "defaultMessage": "Explore More"
   },
   "apiListPage.createApiButton": {
     "defaultMessage": "Create API",
@@ -94,8 +549,8 @@
   "appShell.header.api.empty": {
     "defaultMessage": "No APIs found"
   },
-  "appShell.header.api.goToApiLevel": {
-    "defaultMessage": "Go to API level"
+  "appShell.header.api.goToProjectLevel": {
+    "defaultMessage": "Go to project level"
   },
   "appShell.header.api.label": {
     "defaultMessage": "APIs"
@@ -338,6 +793,9 @@
   "scopeGate.api": {
     "defaultMessage": "API"
   },
+  "scopeGate.apiSelect.empty": {
+    "defaultMessage": "No APIs available"
+  },
   "scopeGate.goToApiLevel": {
     "defaultMessage": "Go to API Level"
   },
@@ -357,11 +815,14 @@
     "defaultMessage": "This project has no APIs yet. Create an API to continue."
   },
   "scopeGate.noProjects": {
-    "defaultMessage": "No projects available"
+    "defaultMessage": "You have no projects yet. Create a project to continue."
   },
   "scopeGate.project": {
     "defaultMessage": "Project"
   },
+  "scopeGate.projectSelect.empty": {
+    "defaultMessage": "No projects available"
+  },
   "scopeGate.selectProject": {
     "defaultMessage": "Select a project to switch to project level and continue."
   },
diff --git a/portals/api-control-plane/src/navigation/useNavigationItems.ts b/portals/api-control-plane/src/navigation/useNavigationItems.ts
index 489868a2c9..4b8f938e76 100644
--- a/portals/api-control-plane/src/navigation/useNavigationItems.ts
+++ b/portals/api-control-plane/src/navigation/useNavigationItems.ts
@@ -186,4 +186,4 @@ export const useNavigationClusters = (): NavigationItem[][] => {
 
     return clusters;
   }, [items]);
-};
\ No newline at end of file
+};
diff --git a/portals/api-control-plane/src/pages/appShell/APIQuickSelector.tsx b/portals/api-control-plane/src/pages/appShell/APIQuickSelector.tsx
index aa3dbe2367..c2aee08319 100644
--- a/portals/api-control-plane/src/pages/appShell/APIQuickSelector.tsx
+++ b/portals/api-control-plane/src/pages/appShell/APIQuickSelector.tsx
@@ -124,7 +124,7 @@ export default function APIQuickSelector({
             sx={{ color: 'primary.main', display: 'block', mb: 1 }}
           >
             <FormattedMessage
-              id="aiWorkspace.pages.appShell.APIQuickSelector.apis"
+              id="apiControlPlane.pages.appShell.APIQuickSelector.apis"
               defaultMessage="APIs"
             />
           </Typography>
@@ -151,14 +151,14 @@ export default function APIQuickSelector({
           {isApisLoading ? (
             <MenuItem disabled>
               <FormattedMessage
-                id="aiWorkspace.pages.appShell.APIQuickSelector.loading"
+                id="apiControlPlane.pages.appShell.APIQuickSelector.loading"
                 defaultMessage='Loading...'
               />
             </MenuItem>
           ) : apisError ? (
             <MenuItem disabled>
               <FormattedMessage
-                id="aiWorkspace.pages.appShell.APIQuickSelector.failed.to.load.apis"
+                id="apiControlPlane.pages.appShell.APIQuickSelector.failed.to.load.apis"
                 defaultMessage='Failed to load APIs'
               />
             </MenuItem>
@@ -166,7 +166,7 @@ export default function APIQuickSelector({
           (filteredApis.length === 0 ? (
             <MenuItem disabled>
               <FormattedMessage
-                id="aiWorkspace.pages.appShell.APIQuickSelector.no.apis.available"
+                id="apiControlPlane.pages.appShell.APIQuickSelector.no.apis.available"
                 defaultMessage='No APIs available'
               />
             </MenuItem>
@@ -188,4 +188,3 @@ export default function APIQuickSelector({
     </>
   );
 }
-
diff --git a/portals/api-control-plane/src/pages/appShell/AppHeader.tsx b/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
index 6f10bde92b..5371e3c889 100644
--- a/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
@@ -52,7 +52,7 @@ export function AppHeader() {
   const navigate = useNavigate();
   const intl = useIntl();
   const { actions } = useAppShell();
-  const { organization, organizations, params, project, projects, isLoading, projectsError } =
+  const { component, organization, organizations, params, project, projects, isLoading, projectsError } =
     useConsoleScope();
   const auth = useAuth();
 
@@ -106,7 +106,7 @@ export function AppHeader() {
     { projectId: project?.id, orgId: organization?.id }
   );
   const apis = apisQuery.data?.list ?? [];
-  const apiOptions: { handler: string; name: string }[] =
+  const loadedApiOptions: { handler: string; name: string }[] =
     (projects.length > 0 && project) ?
     apis
       .filter(
@@ -118,6 +118,15 @@ export function AppHeader() {
       .map((api) => ({ handler: api.id, name: api.displayName ?? api.id }))
     : [];
 
+  // apis may not be loaded yet on first paint; keep the current API selectable
+  // so the switcher never renders an out-of-range value.
+  const apiOptions: { handler: string; name: string }[] =
+    loadedApiOptions.length > 0
+      ? loadedApiOptions
+      : params.apiHandler
+        ? [{ handler: params.apiHandler, name: component?.displayName || params.apiHandler }]
+        : [];
+
 
   return (
     <Header>
@@ -237,7 +246,7 @@ export function AppHeader() {
           {!params.projectHandler && (
             <ProjectQuickSelector
               disabled={!params.orgHandle}
-              isProjectsLoading={isLoading || projectsError !== undefined}
+              isProjectsLoading={isLoading && projectsError === undefined}
               projectsError={projectsError}
               projectOptions={projectOptions.map((item) => ({
                 id: item.handler,
@@ -289,7 +298,7 @@ export function AppHeader() {
 
               <IconButton
                 size="small"
-                aria-label={intl.formatMessage({ id: 'appShell.header.api.goToApiLevel', defaultMessage: 'Go to API level' })}
+                aria-label={intl.formatMessage({ id: 'appShell.header.api.goToProjectLevel', defaultMessage: 'Go to project level' })}
                 onMouseDown={(event) => {
                   event.preventDefault();
                   event.stopPropagation();
diff --git a/portals/api-control-plane/src/pages/appShell/AppLayout.tsx b/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
index f4dec95a44..3633ebb487 100644
--- a/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
@@ -28,7 +28,7 @@ import {
 import type { BreadcrumbItem } from '@wso2/oxygen-ui';
 import { Bell } from '@wso2/oxygen-ui-icons-react';
 import { Suspense } from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { matchPath, Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { LoadingState } from '../../components/StateViews';
 import { runtimeConfig } from '../../config/runtime';
@@ -41,11 +41,26 @@ import { APP_FOOTER_ID } from './appLayoutConstants';
 import { AppSidebar } from './AppSidebar';
 import { FormattedMessage } from 'react-intl';
 
+/**
+ * Full-page creation flows, which the shell renders without a breadcrumb trail.
+ *
+ * A wizard is creating the very scope a trail would describe, so the crumbs can
+ * only point at where the user came from — noise beside a form that owns the
+ * whole page. Built from the route builders rather than written out, so a path
+ * change cannot silently stop matching (`routes.*` is the single source).
+ */
+const BREADCRUMB_FREE_ROUTES = [routes.newApi(), routes.newGateway()];
+
 export default function AppLayout() {
   const navigate = useNavigate();
+  const location = useLocation();
   const { organization, project, component, params } = useConsoleScope();
   const { notify } = useNotifications();
 
+  const hidesBreadcrumbs = BREADCRUMB_FREE_ROUTES.some(
+    (path) => matchPath(path, location.pathname) !== null
+  );
+
   // Built once per render from this portal's own hooks, then handed down as
   // a plain value to every extension's `render(port)` — see `hostPort.tsx`
   // for why this crosses the api-platform/apim-saas seam as a value, not a
@@ -109,7 +124,7 @@ export default function AppLayout() {
           <Suspense fallback={<LoadingState label="Loading" />}>
             <PageContent fullWidth>
                 <Stack spacing={1}>
-                    {breadcrumbItems.length > 1 && (
+                    {!hidesBreadcrumbs && breadcrumbItems.length > 1 && (
                       <AppBreadcrumbs items={breadcrumbItems} />
                     )}
                   <Outlet />
diff --git a/portals/api-control-plane/src/pages/appShell/ProjectQuickSelector.tsx b/portals/api-control-plane/src/pages/appShell/ProjectQuickSelector.tsx
index 35b0db3c43..1c4d128f6a 100644
--- a/portals/api-control-plane/src/pages/appShell/ProjectQuickSelector.tsx
+++ b/portals/api-control-plane/src/pages/appShell/ProjectQuickSelector.tsx
@@ -87,7 +87,7 @@ export default function ProjectQuickSelector({
           <IconButton
             size="small"
             aria-label={intl.formatMessage({ id: 'appShell.header.project.select', defaultMessage: 'Select Project' })}
-            // disabled={disabled}
+            disabled={disabled}
             onClick={(event) => setAnchorEl(event.currentTarget)}
             sx={{
               width: 32,
@@ -123,7 +123,7 @@ export default function ProjectQuickSelector({
             sx={{ color: 'primary.main', display: 'block', mb: 1 }}
           >
             <FormattedMessage
-              id="aiWorkspace.pages.appShell.ProjectQuickSelector.projects"
+              id="apiControlPlane.pages.appShell.ProjectQuickSelector.projects"
               defaultMessage="Projects"
             />
           </Typography>
@@ -150,14 +150,14 @@ export default function ProjectQuickSelector({
           {isProjectsLoading ? (
             <MenuItem disabled>
               <FormattedMessage
-                id="aiWorkspace.pages.appShell.ProjectQuickSelector.loading"
+                id="apiControlPlane.pages.appShell.ProjectQuickSelector.loading"
                 defaultMessage='Loading...'
               />
             </MenuItem>
           ) : projectsError ? (
             <MenuItem disabled>
               <FormattedMessage
-                id="aiWorkspace.pages.appShell.ProjectQuickSelector.failed.to.load.projects"
+                id="apiControlPlane.pages.appShell.ProjectQuickSelector.failed.to.load.projects"
                 defaultMessage='Failed to load projects'
               />
             </MenuItem>
@@ -165,7 +165,7 @@ export default function ProjectQuickSelector({
           (filteredProjects.length === 0 ? (
             <MenuItem disabled>
               <FormattedMessage
-                id="aiWorkspace.pages.appShell.ProjectQuickSelector.no.projects.available"
+                id="apiControlPlane.pages.appShell.ProjectQuickSelector.no.projects.available"
                 defaultMessage='No projects available'
               />
             </MenuItem>
@@ -188,4 +188,3 @@ export default function ProjectQuickSelector({
     </>
   );
 }
-
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
index e112e150e0..a045d896d6 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/ApiDetailPage.tsx
@@ -22,11 +22,15 @@ import { useApiDetail } from '../../../../api/hooks/useMvpQueries';
 import { ErrorState, LoadingState } from '../../../../components/StateViews';
 import { OverviewTab } from './overview/OverviewTab';
 import { FormattedMessage } from 'react-intl';
+import { Link as RouterLink } from 'react-router-dom';
+import { routes } from '../../../../routes/paths';
+import { useConsoleScope } from '../../../../scope/ConsoleScopeProvider';
 
 // No `ScopeGate`: this page is the API tier of the sidebar's Overview item, which
 // degrades to a shallower tier rather than linking here without an API.
 export function ApiDetailPage() {
   const detailQuery = useApiDetail();
+  const { params } = useConsoleScope();
 
   if (detailQuery.isLoading) return <LoadingState label="Loading API" />;
   if (detailQuery.error || !detailQuery.data) {
@@ -35,6 +39,15 @@ export function ApiDetailPage() {
 
   const detail = detailQuery.data;
 
+  // The page is the API tier of the sidebar's Overview item, so it only ever
+  // mounts with all three handles in the URL; `apiPath` degrades to the
+  // scope-less alias for anything still missing.
+  const deployPath = routes.apiDeploy(
+    params.orgHandle ?? '',
+    params.projectHandler ?? null,
+    params.apiHandler ?? null
+  );
+
   const truncateProviderDisplayName = (
   name?: string | null,
   maxLength = 30
@@ -99,32 +112,12 @@ export function ApiDetailPage() {
                       variant="outlined"
                       color="primary"
                     />
-                    {/* Edit page (name/version/context/description). Enabled even
-                        for gateway-created proxies — the page keeps the runtime
-                        fields read-only and allows only the description. */}
-                      {/* <Tooltip
-                        title={
-                          canUpdateProxy ? 'Edit Proxy' : NO_PERMISSION_TOOLTIP
-                        }
-                      >
-                        <Box component="span">
-                          <IconButton
-                            component={RouterLink}
-                            to={`${proxiesPath}/${detail.id}/edit`}
-                            size="small"
-                            disabled={!canUpdateProxy}
-                            sx={DISABLED_ACTION_SX}
-                          >
-                            <Edit size={16} />
-                          </IconButton>
-                        </Box>
-                      </Tooltip> */}
                   </Stack>
                   <Stack spacing={0.1} sx={{ mt: 1 }}>
                     <Stack direction="row" alignItems="center" gap={2}>
                       <Typography variant="caption" color="text.secondary">
                         <FormattedMessage
-                          id="aiWorkspace.pages.appShell.appShellPages.proxies.LLMProxyOverview.context.label"
+                          id="apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.context.label"
                           defaultMessage="Context :"
                         />
                       </Typography>
@@ -135,8 +128,8 @@ export function ApiDetailPage() {
                     <Stack direction="row" alignItems="center" gap={2}>
                       <Typography variant="caption" color="text.secondary">
                         <FormattedMessage
-                          id="aiWorkspace.pages.appShell.appShellPages.proxies.LLMProxyOverview.last.updated"
-                          defaultMessage={'Last updated :'}
+                          id="apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.lastUpdated.label"
+                          defaultMessage="Last updated :"
                         />
                       </Typography>
                       <Typography variant="body2">
@@ -153,32 +146,13 @@ export function ApiDetailPage() {
                 alignItems="flex-end"
                 sx={{ alignSelf: 'stretch' }}
               >
-                {/* Deployments remain viewable for gateway-created proxies (deploy/
-                    redeploy/restore/undeploy are disabled on the page itself), so the
-                    button navigates but is relabelled "View Deployments". */}
-                <Button
-                  variant="contained"
-                  // component={RouterLink}
-                  // to={`${proxiesPath}/${detail.id}/deploy`}
-                >
-                  {/* {isReadOnlyProxy ? 'View Deployments' : 'Deploy to Gateway'} */}
-                  Deploy to Gateway
+                <Button component={RouterLink} to={deployPath} variant="contained">
+                  <FormattedMessage
+                    id="apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.deployToGateway"
+                    defaultMessage="Deploy to Gateway"
+                    description="Button on the API overview header that opens the API's deployment page."
+                  />
                 </Button>
-                {/* <DisabledActionTooltip
-                  disabled={!canDeleteProxy || Boolean(deleteBlockedReason)}
-                  title={
-                    !canDeleteProxy ? NO_PERMISSION_TOOLTIP : deleteBlockedReason
-                  }
-                >
-                  <IconButton
-                    color="error"
-                    disabled={!canDeleteProxy || Boolean(deleteBlockedReason)}
-                    onClick={() => setDeleteDialogOpen(true)}
-                    aria-label="Delete proxy"
-                  >
-                    <Trash2 size={16} />
-                  </IconButton>
-                </DisabledActionTooltip> */}
               </Stack>
             </Box>
           </Box>
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/ExploreMoreCard.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/ExploreMoreCard.tsx
index cd5c413c21..3a5b8e55bc 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/ExploreMoreCard.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/organizations/ExploreMoreCard.tsx
@@ -95,8 +95,8 @@ export default function ExploreMoreCard() {
     <Box>
       <Typography variant="h6" sx={{ mb: 1.5 }}>
         <FormattedMessage
-          id="aiWorkspace.pages.appShell.appShellPages.projects.ExploreMoreCard.explore.more"
-          defaultMessage={'Explore More'}
+          id="apiControlPlane.pages.appShell.appShellPages.projects.ExploreMoreCard.explore.more"
+          defaultMessage="Explore More"
         />
       </Typography>
       <Card sx={{ width: '100%' }}>
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx
index a265563c9d..d3ac42177d 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/projects/ProjectListPage.tsx
@@ -49,7 +49,6 @@ import { useNotifications } from '../../../../components/Notifications';
 import { EmptyState, ErrorState, LoadingState } from '../../../../components/StateViews';
 import { routes } from '../../../../routes/paths';
 import { useConsoleScope } from '../../../../scope/ConsoleScopeProvider';
-import { useFooterHeight } from '../../useFooterHeight';
 import { NewProjectDialog } from './NewProjectDialog';
 
 const PAGE_SIZE_OPTIONS = [12, 24, 48];
@@ -220,8 +219,6 @@ export function ProjectListPage() {
   const intl = useIntl();
   const { organization } = useConsoleScope();
   const { notify } = useNotifications();
-  // The app footer shares this scroll area, so the sticky bar sits above it.
-  const footerHeight = useFooterHeight();
 
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(0);
@@ -420,11 +417,7 @@ export function ProjectListPage() {
                 />
               </Box>
               {total > PAGE_SIZE_OPTIONS[0] && (
-                <Box
-                  sx={[
-                    { bottom: `${footerHeight}px`, mx: -8, px: 8 },
-                  ]}
-                >
+                <Box>
                   <TablePagination
                     component="div"
                     count={total}
diff --git a/portals/api-control-plane/src/routes/paths.test.ts b/portals/api-control-plane/src/routes/paths.test.ts
index 7a911ab0a6..fd2c8a2f61 100644
--- a/portals/api-control-plane/src/routes/paths.test.ts
+++ b/portals/api-control-plane/src/routes/paths.test.ts
@@ -94,6 +94,29 @@ describe('scope-less aliases round-trip through the scope parser', () => {
       getRouteParamsFromPathname(build(ORG, PROJECT, API))
     ).toMatchObject({ apiHandler: API, orgHandle: ORG, projectHandler: PROJECT });
   });
+
+  /*
+   * `newApi` is the one page whose suffix sits in a handle slot (`.../apis/new`),
+   * so the alias convention above cannot protect it — the parser's reserved-segment
+   * list does. Read back as a handle, `new` would name a phantom API in the header
+   * switcher and breadcrumbs, turn `isApiScope` on before the API exists, and fire
+   * a detail request for it.
+   */
+  it('newApi: the create page is not an API called "new"', () => {
+    const params = getRouteParamsFromPathname(routes.newApi(ORG, PROJECT));
+
+    expect(params.orgHandle).toBe(ORG);
+    expect(params.projectHandler).toBe(PROJECT);
+    expect(params.apiHandler).toBeUndefined();
+  });
+
+  it('an API legitimately handled "new" is unreachable, by design', () => {
+    // Documents the trade-off rather than asserting a wish: the reserved segment
+    // wins, so the backend must never mint `new` as an API handle.
+    expect(
+      getRouteParamsFromPathname(routes.api(ORG, PROJECT, 'new')).apiHandler
+    ).toBeUndefined();
+  });
 });
 
 describe('path builders', () => {
diff --git a/portals/api-control-plane/src/scope/ScopeGate.tsx b/portals/api-control-plane/src/scope/ScopeGate.tsx
index 9252415857..2cc6d43334 100644
--- a/portals/api-control-plane/src/scope/ScopeGate.tsx
+++ b/portals/api-control-plane/src/scope/ScopeGate.tsx
@@ -230,7 +230,7 @@ function ScopeSelection({
                       ) : projects.length === 0 ? (
                         <MenuItem value="" disabled>
                           <FormattedMessage
-                            id="scopeGate.noProjects"
+                            id="scopeGate.projectSelect.empty"
                             defaultMessage="No projects available"
                           />
                         </MenuItem>
@@ -273,7 +273,7 @@ function ScopeSelection({
                     </FormLabel>
                     <Select
                       labelId="scope-gate-api-label"
-                      value={chosenApi || '__loading__'}
+                      value={apisQuery.isPending ? '__loading__' : chosenApi}
                       onChange={(event) => setChosenApi(String(event.target.value))}
                       displayEmpty
                       disabled={!chosenProject || apisQuery.isPending}
@@ -290,7 +290,7 @@ function ScopeSelection({
                       ) : apis.length === 0 ? (
                         <MenuItem value="" disabled>
                           <FormattedMessage
-                            id="scopeGate.noApis"
+                            id="scopeGate.apiSelect.empty"
                             defaultMessage="No APIs available"
                           />
                         </MenuItem>
diff --git a/portals/api-control-plane/src/scope/consoleRouteParams.ts b/portals/api-control-plane/src/scope/consoleRouteParams.ts
index 81df612161..28bd3bf58a 100644
--- a/portals/api-control-plane/src/scope/consoleRouteParams.ts
+++ b/portals/api-control-plane/src/scope/consoleRouteParams.ts
@@ -16,8 +16,37 @@
  * under the License.
  */
 
+import { SELECT_SCOPE_SEGMENT } from '../routes/paths';
 import type { ConsoleRouteParams } from './ConsoleScopeContext';
 
+/**
+ * Segments that sit where a handle would but name a page, not a resource.
+ *
+ * `routes.newApi` is `.../apis/new`, so without this the create page reads back
+ * as an API whose handle is the literal `new` — which would put a bogus entry in
+ * the header's API switcher and the breadcrumb trail, flip `isApiScope` on while
+ * the API does not exist yet, and fire a detail request for it. `select-scope` is
+ * reserved for the same reason (`SELECT_SCOPE_SEGMENT`), though the builders
+ * already keep it out of a handle position by construction.
+ */
+const RESERVED_HANDLE_SEGMENTS = new Set<string>([SELECT_SCOPE_SEGMENT, 'new']);
+
+/**
+ * The handle one segment past `marker`, or `undefined` when that slot is absent
+ * or holds a reserved segment rather than a real handle.
+ */
+const handleAfter = (
+  segments: string[],
+  marker: string
+): string | undefined => {
+  const markerIndex = segments.indexOf(marker);
+  if (markerIndex < 0) return undefined;
+
+  const candidate = segments[markerIndex + 1];
+  if (!candidate || RESERVED_HANDLE_SEGMENTS.has(candidate)) return undefined;
+  return candidate;
+};
+
 /**
  * Reads scope handles out of a pathname positionally: the segment after
  * `organizations` is the org handle, the one after `projects` the project, the
@@ -32,32 +61,21 @@ import type { ConsoleRouteParams } from './ConsoleScopeContext';
  * suffix behind it, or that suffix is read back as a handle. This is exactly why
  * those aliases carry `SELECT_SCOPE_SEGMENT` instead of dropping segments — see
  * `projectPath` in `routes/paths.ts`, and the round-trip test beside it.
+ *
+ * A page whose suffix genuinely does sit in a handle slot — `routes.newApi`, at
+ * `.../apis/new` — is excluded by `RESERVED_HANDLE_SEGMENTS` instead.
  */
 export const getRouteParamsFromPathname = (
   pathname: string
 ): ConsoleRouteParams => {
   const segments = pathname.split('/').filter(Boolean);
-  const organizationsIndex = segments.indexOf('organizations');
-  if (organizationsIndex < 0) return {};
-
-  const orgHandle = segments[organizationsIndex + 1];
-  const projectsIndex = segments.indexOf('projects');
-  const projectHandler =
-    projectsIndex >= 0 ? segments[projectsIndex + 1] : undefined;
-  const apisIndex = segments.indexOf('apis');
-  const apiHandler = apisIndex >= 0 ? segments[apisIndex + 1] : undefined;
-  const environmentsIndex = segments.indexOf('environments');
-  const environmentId =
-    environmentsIndex >= 0 ? segments[environmentsIndex + 1] : undefined;
-  const deploymentsIndex = segments.indexOf('deployments');
-  const deploymentId =
-    deploymentsIndex >= 0 ? segments[deploymentsIndex + 1] : undefined;
+  if (segments.indexOf('organizations') < 0) return {};
 
   return {
-    apiHandler,
-    deploymentId,
-    environmentId,
-    orgHandle,
-    projectHandler,
+    apiHandler: handleAfter(segments, 'apis'),
+    deploymentId: handleAfter(segments, 'deployments'),
+    environmentId: handleAfter(segments, 'environments'),
+    orgHandle: handleAfter(segments, 'organizations'),
+    projectHandler: handleAfter(segments, 'projects'),
   };
 };
diff --git a/portals/api-control-plane/src/theme/AppThemeProvider.tsx b/portals/api-control-plane/src/theme/AppThemeProvider.tsx
index ed0223f696..42288d4512 100644
--- a/portals/api-control-plane/src/theme/AppThemeProvider.tsx
+++ b/portals/api-control-plane/src/theme/AppThemeProvider.tsx
@@ -34,4 +34,4 @@ export function AppThemeProvider({ children }: PropsWithChildren) {
       {children}
     </OxygenUIThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/portals/api-control-plane/src/theme/emotionCache.ts b/portals/api-control-plane/src/theme/emotionCache.ts
index dfa827ff27..d87f81891c 100644
--- a/portals/api-control-plane/src/theme/emotionCache.ts
+++ b/portals/api-control-plane/src/theme/emotionCache.ts
@@ -30,4 +30,4 @@ export const appEmotionCache = createEmotionCache({
   key: 'css',
   prepend: true, // keep Oxygen styles first so app styles can override
   nonce,
-});
\ No newline at end of file
+});
diff --git a/portals/api-control-plane/src/theme/index.ts b/portals/api-control-plane/src/theme/index.ts
index 46c340e050..260180d963 100644
--- a/portals/api-control-plane/src/theme/index.ts
+++ b/portals/api-control-plane/src/theme/index.ts
@@ -30,4 +30,4 @@ export {
   hairline,
   interactiveCardSx,
   stickyBottomBarSx,
-};
\ No newline at end of file
+};
diff --git a/portals/api-control-plane/src/theme/themes.ts b/portals/api-control-plane/src/theme/themes.ts
index 3cf7d866af..f74df6ecf2 100644
--- a/portals/api-control-plane/src/theme/themes.ts
+++ b/portals/api-control-plane/src/theme/themes.ts
@@ -25,4 +25,4 @@ export const  themeRegistry = [
 ];
 
 export type ThemeKey = (typeof themeRegistry)[number]['key'];
-export const INITIAL_THEME: ThemeKey = 'acrylicOrange';
\ No newline at end of file
+export const INITIAL_THEME: ThemeKey = 'acrylicOrange';

From c2b7c5b73c41f83cd407e618912d60dc3e76edf0 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Tue, 25 Aug 2026 11:43:59 +0530
Subject: [PATCH 10/12] refactor(apicp): mount OxygenUIThemeProvider directly
 in the app add and configure a formatter

---
 .../.claude/skills/apicp-ui/SKILL.md          | 18 ++++++---
 portals/api-control-plane/.prettierignore     |  5 +++
 portals/api-control-plane/.prettierrc.json    | 11 +++++-
 portals/api-control-plane/eslint.config.js    |  2 +
 portals/api-control-plane/package-lock.json   | 34 +++++++++++++++++
 portals/api-control-plane/package.json        |  6 ++-
 portals/api-control-plane/src/App.tsx         | 21 +++++++++--
 .../src/theme/AppThemeProvider.tsx            | 37 -------------------
 .../src/theme/emotionCache.ts                 | 33 -----------------
 portals/api-control-plane/src/theme/index.ts  |  9 +----
 portals/api-control-plane/src/theme/themes.ts | 28 --------------
 11 files changed, 86 insertions(+), 118 deletions(-)
 delete mode 100644 portals/api-control-plane/src/theme/AppThemeProvider.tsx
 delete mode 100644 portals/api-control-plane/src/theme/emotionCache.ts
 delete mode 100644 portals/api-control-plane/src/theme/themes.ts

diff --git a/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md b/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md
index f1b41e2b1f..9852eb0e41 100644
--- a/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md
+++ b/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md
@@ -64,12 +64,12 @@ src/
   routes/         paths.ts (route builders), AppRoutes.tsx, ProtectedRoute
   scope/          ConsoleScopeProvider/Context, ScopeGate, consoleRouteParams
   slots/          Slot + Hideable extension primitives
-  theme/          AppThemeProvider, themes.ts, receipes.ts, emotionCache
+  theme/          receipes.ts (shared style recipes)
   test/           renderWithProviders, MSW server + toolkit, mock scope/auth
   extensions.tsx  extension registration; hostPort.tsx  the value handed to extensions
 ```
 
-Provider order (`App.tsx`, outermost first): `I18nProvider` → `AppThemeProvider` →
+Provider order (`App.tsx`, outermost first): `I18nProvider` → `OxygenUIThemeProvider` →
 `NotificationProvider` → `AppQueryProvider` → `ApiClientProvider` → `ErrorBoundary` →
 `BrowserRouter` → `AuthProvider` → `ExtensionsProvider` → `AppRoutes`. Inside a protected route:
 `ConsoleScopeProvider` → `AppLayout`. Don't add a provider without a reason that names its position.
@@ -117,9 +117,15 @@ Utils: `formatRelativeTime`, `pxToRem`, `alpha`.
 
 ### Theming
 
-`AppThemeProvider` (`src/theme/`) wraps `OxygenUIThemeProvider` with a one-entry registry —
-`AcrylicOrangeTheme` — plus the app's emotion cache and `<CssBaseline />`. Don't add a second theme
-or call `OxygenUIThemeProvider` anywhere else.
+`OxygenUIThemeProvider` is mounted once, directly in `App.tsx`, with a one-entry registry
+(`AcrylicOrangeTheme`) declared at module scope in that same file — module scope because the
+provider keys a theme-resolving effect on the array's identity. Don't call the provider anywhere
+else, and don't wrap it in an app-level provider of your own.
+
+It needs nothing else from us: it already renders `<CssBaseline enableColorScheme />` internally,
+and with no `emotionCache`/`nonce` prop it falls back to `<StyledEngineProvider injectFirst>` — so
+app styles override Oxygen styles without a hand-rolled Emotion cache. Under a CSP, pass the
+provider's own `nonce` prop rather than building a cache.
 
 Three tiers, in order of preference:
 
@@ -365,7 +371,7 @@ Full conventions in `src/test/README.md`.
 | `@mui/material`, `@mui/material/styles` (`styled`, `alpha`, `useTheme`) | `@wso2/oxygen-ui` |
 | `@mui/icons-material`, `lucide-react` | `@wso2/oxygen-ui-icons-react` (bare lucide names, explicit `size`) |
 | `@mui/x-data-grid` / `x-date-pickers` / `x-tree-view` | `DataGrid.*` / `DatePickers.*` / `TreeView.*` from `@wso2/oxygen-ui` |
-| `ThemeProvider` + `createTheme` | nothing — `AppThemeProvider` already owns this |
+| `ThemeProvider` + `createTheme`, `CssBaseline`, a custom Emotion cache | nothing — `OxygenUIThemeProvider` in `App.tsx` already owns all three |
 | `AppBar`/`Toolbar`/`Drawer` layout | `AppShell` + `Header` + `Sidebar` (already in `AppLayout`) |
 | `Table`/`TableHead`/`TableRow`/`TableCell` | `ListingTable.*` |
 | `<Grid item xs={12} md={4}>` | `<Grid size={{ xs: 12, md: 4 }}>` |
diff --git a/portals/api-control-plane/.prettierignore b/portals/api-control-plane/.prettierignore
index b450542f86..aa4535301a 100644
--- a/portals/api-control-plane/.prettierignore
+++ b/portals/api-control-plane/.prettierignore
@@ -1 +1,6 @@
+node_modules/
+dist/
+build/
+coverage/
+public/
 # Pleae comment the reason if you are  ignoring a file/directory here
diff --git a/portals/api-control-plane/.prettierrc.json b/portals/api-control-plane/.prettierrc.json
index c8b04ac97a..a96131f74d 100644
--- a/portals/api-control-plane/.prettierrc.json
+++ b/portals/api-control-plane/.prettierrc.json
@@ -1,6 +1,13 @@
 {
-  "tabWidth": 4,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
   "semi": true,
   "singleQuote": true,
-  "trailingComma": "all"
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf"
 }
diff --git a/portals/api-control-plane/eslint.config.js b/portals/api-control-plane/eslint.config.js
index 8a107633eb..e22b7165bd 100644
--- a/portals/api-control-plane/eslint.config.js
+++ b/portals/api-control-plane/eslint.config.js
@@ -3,6 +3,7 @@ import globals from 'globals';
 import formatjs from 'eslint-plugin-formatjs';
 import reactHooks from 'eslint-plugin-react-hooks';
 import tseslint from 'typescript-eslint';
+import eslintConfigPrettier from "eslint-config-prettier";
 
 export default [
   js.configs.recommended,
@@ -242,4 +243,5 @@ export default [
       'src/api/generated/**',
     ],
   },
+  eslintConfigPrettier,
 ];
diff --git a/portals/api-control-plane/package-lock.json b/portals/api-control-plane/package-lock.json
index 4f5b78f496..0c6e94cbd4 100644
--- a/portals/api-control-plane/package-lock.json
+++ b/portals/api-control-plane/package-lock.json
@@ -41,12 +41,14 @@
         "@vitest/coverage-v8": "2.1.8",
         "babel-plugin-formatjs": "11.3.16",
         "eslint": "9.26.0",
+        "eslint-config-prettier": "10.1.8",
         "eslint-plugin-formatjs": "6.4.0",
         "eslint-plugin-react-hooks": "5.2.0",
         "globals": "15.15.0",
         "jsdom": "25.0.1",
         "msw": "2.6.8",
         "openapi-typescript": "7.13.0",
+        "prettier": "3.9.6",
         "typescript": "5.8.3",
         "typescript-eslint": "8.32.1",
         "vite": "5.0.11",
@@ -5637,6 +5639,22 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-plugin-formatjs": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-formatjs/-/eslint-plugin-formatjs-6.4.0.tgz",
@@ -7833,6 +7851,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.6.tgz",
+      "integrity": "sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "dev": true,
diff --git a/portals/api-control-plane/package.json b/portals/api-control-plane/package.json
index b5444fa3d0..23a87f43ab 100644
--- a/portals/api-control-plane/package.json
+++ b/portals/api-control-plane/package.json
@@ -34,7 +34,9 @@
     "i18n:pseudo": "formatjs compile --ast --pseudo-locale en-XA src/i18n/messages/en.json --out-file src/i18n/compiled/en-XA.json",
     "i18n:build": "npm run i18n:compile && npm run i18n:pseudo",
     "i18n": "npm run i18n:extract && npm run i18n:build",
-    "i18n:check": "npm run i18n && git diff --exit-code src/i18n/messages"
+    "i18n:check": "npm run i18n && git diff --exit-code src/i18n/messages",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\""
   },
   "dependencies": {
     "@babel/runtime-corejs3": "7.29.7",
@@ -70,12 +72,14 @@
     "@vitest/coverage-v8": "2.1.8",
     "babel-plugin-formatjs": "11.3.16",
     "eslint": "9.26.0",
+    "eslint-config-prettier": "10.1.8",
     "eslint-plugin-formatjs": "6.4.0",
     "eslint-plugin-react-hooks": "5.2.0",
     "globals": "15.15.0",
     "jsdom": "25.0.1",
     "msw": "2.6.8",
     "openapi-typescript": "7.13.0",
+    "prettier": "3.9.6",
     "typescript": "5.8.3",
     "typescript-eslint": "8.32.1",
     "vite": "5.0.11",
diff --git a/portals/api-control-plane/src/App.tsx b/portals/api-control-plane/src/App.tsx
index e78a2dcdb3..3d7d90df0a 100644
--- a/portals/api-control-plane/src/App.tsx
+++ b/portals/api-control-plane/src/App.tsx
@@ -18,6 +18,7 @@
 
 import { type ReactNode, useState } from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
+import { AcrylicOrangeTheme, OxygenUIThemeProvider } from '@wso2/oxygen-ui';
 import { BrowserRouter } from 'react-router-dom';
 
 import { ApiClientProvider } from './api/ApiClientProvider';
@@ -33,7 +34,21 @@ import {
   type ApiControlPlaneExtension,
 } from './extensions';
 import { I18nProvider } from './i18n';
-import { AppThemeProvider } from './theme/AppThemeProvider';
+
+/**
+ * The themes `OxygenUIThemeProvider` can switch between — currently the one
+ * library-defined `AcrylicOrangeTheme`.
+ *
+ * Module scope, not an inline `themes={[...]}` literal on the provider below:
+ * the provider keys a theme-resolving effect on this array's identity, so a
+ * fresh literal each render would re-resolve the registry every time.
+ */
+const themeRegistry = [
+  { key: 'acrylicOrange', label: 'Acrylic Orange', theme: AcrylicOrangeTheme },
+];
+
+/** Selected on first load, before any stored preference takes over. */
+const INITIAL_THEME = themeRegistry[0].key;
 
 /**
  * Builds the app's QueryClient with the notification handler already attached,
@@ -69,7 +84,7 @@ export default function App({ extensions = [] }: AppProps) {
   return (
 
     <I18nProvider>
-      <AppThemeProvider>
+      <OxygenUIThemeProvider initialTheme={INITIAL_THEME} themes={themeRegistry}>
         <NotificationProvider>
           <AppQueryProvider>
             <ApiClientProvider>
@@ -86,7 +101,7 @@ export default function App({ extensions = [] }: AppProps) {
             </ApiClientProvider>
           </AppQueryProvider>
         </NotificationProvider>
-      </AppThemeProvider>
+      </OxygenUIThemeProvider>
     </I18nProvider>
   );
 }
diff --git a/portals/api-control-plane/src/theme/AppThemeProvider.tsx b/portals/api-control-plane/src/theme/AppThemeProvider.tsx
deleted file mode 100644
index 42288d4512..0000000000
--- a/portals/api-control-plane/src/theme/AppThemeProvider.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-// src/theme/AppThemeProvider.tsx
-import { PropsWithChildren } from 'react';
-import { OxygenUIThemeProvider, CssBaseline } from '@wso2/oxygen-ui';
-import { appEmotionCache } from './emotionCache';
-import { themeRegistry, INITIAL_THEME } from './themes';
-
-export function AppThemeProvider({ children }: PropsWithChildren) {
-  return (
-    <OxygenUIThemeProvider
-      themes={themeRegistry}
-      initialTheme={INITIAL_THEME}
-      emotionCache={appEmotionCache}
-    >
-      {/* Normalizes browser styles using theme tokens */}
-      <CssBaseline />
-      {children}
-    </OxygenUIThemeProvider>
-  );
-}
diff --git a/portals/api-control-plane/src/theme/emotionCache.ts b/portals/api-control-plane/src/theme/emotionCache.ts
deleted file mode 100644
index d87f81891c..0000000000
--- a/portals/api-control-plane/src/theme/emotionCache.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-// src/theme/emotionCache.ts
-import { createEmotionCache } from '@wso2/oxygen-ui';
-
-// If you enforce a CSP, read the per-request nonce from a meta tag
-// (see §10). Otherwise this can be omitted.
-const nonce =
-  document
-    .querySelector<HTMLMetaElement>('meta[property="csp-nonce"]')
-    ?.nonce ?? undefined;
-
-export const appEmotionCache = createEmotionCache({
-  key: 'css',
-  prepend: true, // keep Oxygen styles first so app styles can override
-  nonce,
-});
diff --git a/portals/api-control-plane/src/theme/index.ts b/portals/api-control-plane/src/theme/index.ts
index 260180d963..35398e5f50 100644
--- a/portals/api-control-plane/src/theme/index.ts
+++ b/portals/api-control-plane/src/theme/index.ts
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import { AppThemeProvider } from './AppThemeProvider';
 import {
   glassSurfaceSx,
   hairline,
@@ -24,10 +23,4 @@ import {
   stickyBottomBarSx,
 } from './receipes';
 
-export {
-  AppThemeProvider,
-  glassSurfaceSx,
-  hairline,
-  interactiveCardSx,
-  stickyBottomBarSx,
-};
+export { glassSurfaceSx, hairline, interactiveCardSx, stickyBottomBarSx };
diff --git a/portals/api-control-plane/src/theme/themes.ts b/portals/api-control-plane/src/theme/themes.ts
deleted file mode 100644
index f74df6ecf2..0000000000
--- a/portals/api-control-plane/src/theme/themes.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-// src/theme/themes.ts
-import { AcrylicOrangeTheme } from '@wso2/oxygen-ui';
-
-// Use the library-defined AcrylicOrangeTheme
-export const  themeRegistry = [
-  { key: 'acrylicOrange', label: 'Acrylic Orange', theme: AcrylicOrangeTheme },
-];
-
-export type ThemeKey = (typeof themeRegistry)[number]['key'];
-export const INITIAL_THEME: ThemeKey = 'acrylicOrange';

From 1d4557b018e8ae565d4a25da5d12fe566fbc4d68 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Tue, 25 Aug 2026 19:27:54 +0530
Subject: [PATCH 11/12] feat(apicp): restore Slot/Port extension seam and
 Settings tab slot

---
 .../.claude/skills/apicp-ui/SKILL.md          |   8 +
 portals/api-control-plane/src/extensions.tsx  |  73 ++++++---
 .../src/i18n/messages/en.json                 |  98 ++++++++++--
 .../navigation/useNavigationItems.test.tsx    |  92 +++++++++++
 .../src/navigation/useNavigationItems.ts      |  55 ++++---
 .../src/navigation/useSettingsTabs.tsx        |  91 +++++++++++
 .../settings/GeneralSettingsPage.tsx          |  48 ++++++
 .../appShellPages/settings/SettingsLayout.tsx | 151 ++++++++++++++++++
 .../appShellPages/settings/SettingsPage.tsx   |  56 -------
 .../src/routes/AppRoutes.settingsTab.test.tsx | 127 +++++++++++++++
 .../src/routes/AppRoutes.tsx                  |  83 ++++++++--
 portals/api-control-plane/src/routes/paths.ts |  11 ++
 12 files changed, 773 insertions(+), 120 deletions(-)
 create mode 100644 portals/api-control-plane/src/navigation/useSettingsTabs.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/settings/GeneralSettingsPage.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsLayout.tsx
 delete mode 100644 portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
 create mode 100644 portals/api-control-plane/src/routes/AppRoutes.settingsTab.test.tsx

diff --git a/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md b/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md
index 9852eb0e41..7080d5e66f 100644
--- a/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md
+++ b/portals/api-control-plane/.claude/skills/apicp-ui/SKILL.md
@@ -343,6 +343,14 @@ region for built-in UI; extensions receive a plain `CloudHostPort` value (`src/h
 shared context. Keep `src/slots/index.tsx` free of portal-specific types; it is copied verbatim into
 other hosts.
 
+Two slot families exist today, both declared in `src/extensions.tsx`: `sidebar.<level>` for a
+top-level nav item (routed by `AppRoutes`, merged into the sidebar by `useNavigationItems`) and
+`settings.<level>.tabs` for a Settings sub-nav tab (listed by `useSettingsTabs`, routed nested under
+`SettingsLayout`). An entry's `slot` and `level` must agree — a descriptor claiming
+`settings.project.tabs` with `level: 'organization'` is dropped by both, rather than rendered
+against the wrong scope's Port. Filter with `isSidebarExtension`/`settingsTabExtensions`; never
+re-spell a slot name as a literal at the use site.
+
 ---
 
 ## Tests
diff --git a/portals/api-control-plane/src/extensions.tsx b/portals/api-control-plane/src/extensions.tsx
index b64dd3452a..eea3b5d40b 100644
--- a/portals/api-control-plane/src/extensions.tsx
+++ b/portals/api-control-plane/src/extensions.tsx
@@ -16,36 +16,75 @@
  * under the License.
  */
 
-import { createContext, useContext, type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { apiPath, projectPath, type ScopeHandle } from './routes/paths';
 import type { ConsoleScope } from './scope/ConsoleScopeProvider';
 import type { NavigationLevel } from './navigation/navigationTypes';
+import type { CloudHostPort } from './hostPort';
+import { SlotEntriesProvider, useSlotEntries, type SlotEntry } from './slots';
 
 /**
- * A host-injected feature: a route plus its sidebar entry. `routePath` is
- * relative to the same route group the built-in nav items live in (e.g.
- * `"billing"`, not `"/organizations/:orgHandle/billing"`), and `level`
- * decides which sidebar section it's grouped under — mirrors
- * `NavigationDefinition` so it can be merged straight into the existing
- * nav pipeline in `navigation/useNavigationItems.ts`.
+ * A host-injected feature. `routePath` is relative to the same route group the
+ * built-in pages live in (e.g. `"billing"` or `"settings/environments"`, never
+ * an absolute `/organizations/...` path), and `level` decides the URL shape
+ * (organization/project/api) the same way the built-in pages' own `level` does.
+ *
+ * `slot` is the named extension point this entry attaches to (see
+ * `slots/index.tsx`) — e.g. `"sidebar.project"` for a top-level project nav
+ * item, or `"settings.project.tabs"` to appear as a Settings sub-nav tab. New
+ * slot names can be introduced by core without changing this type.
+ *
+ * `render` receives the small, portable `CloudHostPort` (org/project handle,
+ * navigate, notify) instead of a pre-built element, so the same feature
+ * component can be reused by another host app without depending on this
+ * portal's own hooks — see `hostPort.tsx`.
  */
-export type ApiControlPlaneExtension = {
-  id: string;
+export type ApiControlPlaneExtension = SlotEntry & {
   routePath: string;
-  element: ReactNode;
+  render: (port: CloudHostPort) => ReactNode;
   label: string;
   icon?: ReactNode;
   level: NavigationLevel;
   /** Sidebar section heading. Defaults to the level's own section (e.g. "Organization"). */
   group?: string;
-  order: number;
   isVisible?: (scope: ConsoleScope) => boolean;
 };
 
-const ExtensionsContext = createContext<readonly ApiControlPlaneExtension[]>(
-  []
-);
+/**
+ * Slot names core knows about. Both live here rather than being spelled out at
+ * each use site, so the sidebar route builder and the nav pipeline (and the
+ * Settings tab list and its routes) can never drift apart on a string literal.
+ */
+const SIDEBAR_SLOT_PREFIX = 'sidebar.';
+
+/** The slot a Settings sub-nav tab for `level` attaches to. */
+export const settingsTabSlot = (level: NavigationLevel): string =>
+  `settings.${level}.tabs`;
+
+/** Whether this entry is a top-level sidebar item rather than a nested one. */
+export const isSidebarExtension = (
+  extension: ApiControlPlaneExtension
+): boolean => extension.slot.startsWith(SIDEBAR_SLOT_PREFIX);
+
+/**
+ * Entries for `settingsTabSlot(level)`, sorted by `order`.
+ *
+ * `slot` and `level` must agree: a type-valid but inconsistent descriptor
+ * (`slot: 'settings.organization.tabs'` with `level: 'project'`) would
+ * otherwise render against the wrong scope's Port, so it is dropped here and
+ * in the matching route pass rather than half-honoured.
+ */
+export const settingsTabExtensions = (
+  extensions: readonly ApiControlPlaneExtension[],
+  level: NavigationLevel
+): ApiControlPlaneExtension[] =>
+  extensions
+    .filter(
+      (extension) =>
+        extension.slot === settingsTabSlot(level) && extension.level === level
+    )
+    .sort((left, right) => left.order - right.order);
 
 export function ExtensionsProvider({
   extensions,
@@ -55,14 +94,12 @@ export function ExtensionsProvider({
   children: ReactNode;
 }) {
   return (
-    <ExtensionsContext.Provider value={extensions}>
-      {children}
-    </ExtensionsContext.Provider>
+    <SlotEntriesProvider entries={extensions}>{children}</SlotEntriesProvider>
   );
 }
 
 export function useExtensions(): readonly ApiControlPlaneExtension[] {
-  return useContext(ExtensionsContext);
+  return useSlotEntries<ApiControlPlaneExtension>();
 }
 
 /**
diff --git a/portals/api-control-plane/src/i18n/messages/en.json b/portals/api-control-plane/src/i18n/messages/en.json
index 760fd24c62..84c5ae99a3 100644
--- a/portals/api-control-plane/src/i18n/messages/en.json
+++ b/portals/api-control-plane/src/i18n/messages/en.json
@@ -36,10 +36,10 @@
     "description": "Tooltip explaining why an unreleased API type card cannot be clicked."
   },
   "api.create.apiResourcesPreview.empty.body": {
-    "defaultMessage": "Fetch the contract and the resources it defines are listed here for review."
+    "defaultMessage": "Import a contract to explore its endpoints"
   },
   "api.create.apiResourcesPreview.empty.title": {
-    "defaultMessage": "Nothing fetched yet"
+    "defaultMessage": "Resources will show here"
   },
   "api.create.apiResourcesPreview.source": {
     "defaultMessage": "Source",
@@ -148,17 +148,38 @@
   "api.create.approachSelector.tooltip.unsupportedForProxyType": {
     "defaultMessage": "Not available for {proxyType}."
   },
-  "api.create.fromContract.action.back": {
+  "api.create.defineApi.action.back": {
     "defaultMessage": "Back",
     "description": "Returns to the previous step of the API creation wizard."
   },
+  "api.create.defineApi.action.next": {
+    "defaultMessage": "Next"
+  },
+  "api.create.defineApi.contract.description": {
+    "defaultMessage": "Import from a URL, file, or SwaggerHub."
+  },
+  "api.create.defineApi.contract.title": {
+    "defaultMessage": "Start with a contract"
+  },
+  "api.create.defineApi.scratch.description": {
+    "defaultMessage": "Start blank and chat with AI to build it."
+  },
+  "api.create.defineApi.scratch.title": {
+    "defaultMessage": "Design from scratch"
+  },
+  "api.create.designWithAi.detail": {
+    "defaultMessage": "The skeleton on the right is a starting point — carry on and edit its operations by hand."
+  },
+  "api.create.designWithAi.feature": {
+    "defaultMessage": "Designing an API by chatting with AI"
+  },
+  "api.create.designWithAi.title": {
+    "defaultMessage": "Design with AI"
+  },
   "api.create.fromContract.action.fetch": {
     "defaultMessage": "Fetch Contract",
     "description": "Reads the contract from the chosen source and previews its resources, without leaving the step."
   },
-  "api.create.fromContract.action.next": {
-    "defaultMessage": "Next"
-  },
   "api.create.fromContract.action.sampleUrl": {
     "defaultMessage": "Try with Sample URL",
     "description": "Fills the field with a ready-made example to try the import with."
@@ -213,6 +234,12 @@
   "api.create.fromContract.spec.unsupportedSource": {
     "defaultMessage": "Importing from this source is not available yet."
   },
+  "api.create.fromContract.swaggerHub.apiLabel": {
+    "defaultMessage": "API"
+  },
+  "api.create.fromContract.swaggerHub.apiPlaceholder": {
+    "defaultMessage": "Select an API"
+  },
   "api.create.fromContract.swaggerHub.authorized": {
     "defaultMessage": "Authorized",
     "description": "SwaggerHub access mode that reads private definitions. Not released yet."
@@ -220,6 +247,12 @@
   "api.create.fromContract.swaggerHub.authorizedHint": {
     "defaultMessage": "Not available yet."
   },
+  "api.create.fromContract.swaggerHub.lookupFailed": {
+    "defaultMessage": "SwaggerHub could not be reached. Try again."
+  },
+  "api.create.fromContract.swaggerHub.notFound": {
+    "defaultMessage": "No SwaggerHub organization with public APIs under that name."
+  },
   "api.create.fromContract.swaggerHub.organizationLabel": {
     "defaultMessage": "SwaggerHub Organization"
   },
@@ -229,6 +262,10 @@
   "api.create.fromContract.swaggerHub.organizationRequired": {
     "defaultMessage": "The SwaggerHub organization cannot be empty"
   },
+  "api.create.fromContract.swaggerHub.partialListing": {
+    "defaultMessage": "Showing {shown} of {total} APIs in this organization.",
+    "description": "The registry pages long listings; only the first page is offered."
+  },
   "api.create.fromContract.swaggerHub.public": {
     "defaultMessage": "Public",
     "description": "SwaggerHub access mode that reads publicly listed definitions."
@@ -237,6 +274,15 @@
     "defaultMessage": "Refresh SwaggerHub organizations",
     "description": "Accessible name for the reload button on the organization field."
   },
+  "api.create.fromContract.swaggerHub.searching": {
+    "defaultMessage": "Looking up organization…"
+  },
+  "api.create.fromContract.swaggerHub.versionLabel": {
+    "defaultMessage": "Version"
+  },
+  "api.create.fromContract.swaggerHub.versionPlaceholder": {
+    "defaultMessage": "Select a version"
+  },
   "api.create.fromContract.title": {
     "defaultMessage": "Create API Proxy from Contract"
   },
@@ -344,13 +390,13 @@
   "api.create.generalForm.backendAuth.option.basic": {
     "defaultMessage": "Basic authentication"
   },
+  "api.create.generalForm.backendAuth.option.bearer": {
+    "defaultMessage": "Bearer token"
+  },
   "api.create.generalForm.backendAuth.option.none": {
     "defaultMessage": "None",
     "description": "Backend authentication option meaning no credentials are sent."
   },
-  "api.create.generalForm.backendAuth.option.oauth2": {
-    "defaultMessage": "OAuth 2.0"
-  },
   "api.create.generalForm.basePath.helper": {
     "defaultMessage": "Routing base path for this API. Defaults from the identifier and version."
   },
@@ -437,6 +483,10 @@
     "defaultMessage": "Updated {relative}",
     "description": "Card footer timestamp; {relative} is a phrase such as \"3 hours ago\"."
   },
+  "apiControlPlane.navigation.useSettingsTabs.generalTab": {
+    "defaultMessage": "General",
+    "description": "Label for the built-in first tab of the Settings page. A noun naming the section, not a command."
+  },
   "apiControlPlane.pages.appShell.APIQuickSelector.apis": {
     "defaultMessage": "APIs"
   },
@@ -462,14 +512,28 @@
     "defaultMessage": "Projects"
   },
   "apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.context.label": {
-    "defaultMessage": "Context :"
+    "defaultMessage": "Context",
+    "description": "Label for the API base path shown in the API detail header, e.g. \"/orders\"."
   },
   "apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.deployToGateway": {
     "defaultMessage": "Deploy to Gateway",
     "description": "Button on the API overview header that opens the API's deployment page."
   },
+  "apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.gatewayManaged": {
+    "defaultMessage": "Gateway-managed",
+    "description": "Chip marking an API that was discovered from a gateway and cannot be edited here."
+  },
+  "apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.gatewayManagedHint": {
+    "defaultMessage": "Discovered from a data-plane gateway, so it is read-only in this console.",
+    "description": "Tooltip explaining the gateway-managed chip."
+  },
   "apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.lastUpdated.label": {
-    "defaultMessage": "Last updated :"
+    "defaultMessage": "Last updated",
+    "description": "Label for when the API definition last changed, shown in the API detail header."
+  },
+  "apiControlPlane.pages.appShell.appShellPages.apis.ApiDetailPage.transports.label": {
+    "defaultMessage": "Transports",
+    "description": "Label for the protocols an API is exposed over (HTTP, HTTPS)."
   },
   "apiControlPlane.pages.appShell.appShellPages.apis.develop.DocumentsPage.subtitle": {
     "defaultMessage": "Documentation for {apiName}",
@@ -495,6 +559,18 @@
   "apiControlPlane.pages.appShell.appShellPages.projects.ExploreMoreCard.explore.more": {
     "defaultMessage": "Explore More"
   },
+  "apiControlPlane.pages.appShell.appShellPages.settings.GeneralSettingsPage.mvpScope": {
+    "defaultMessage": "Advanced organization admin settings, governance, marketplace, and developer portal configuration are intentionally excluded from the MVP replacement app.",
+    "description": "Body copy explaining which settings areas the MVP deliberately leaves out."
+  },
+  "apiControlPlane.pages.appShell.appShellPages.settings.SettingsLayout.subtitle": {
+    "defaultMessage": "Minimal settings overview for {subject}.",
+    "description": "Sub-heading of the Settings page. {subject} is the display name of the organization or project being configured — never translated."
+  },
+  "apiControlPlane.pages.appShell.appShellPages.settings.SettingsLayout.title": {
+    "defaultMessage": "Settings",
+    "description": "Heading of the Settings page."
+  },
   "apiListPage.createApiButton": {
     "defaultMessage": "Create API",
     "description": "Button label for creating a new API"
diff --git a/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx b/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx
index 0593a51e94..8f28cd9cdc 100644
--- a/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx
+++ b/portals/api-control-plane/src/navigation/useNavigationItems.test.tsx
@@ -21,6 +21,10 @@ import { MemoryRouter } from 'react-router-dom';
 import { describe, expect, it } from 'vitest';
 
 import type { RestApi } from '../api/resources/restApis';
+import {
+  ExtensionsProvider,
+  type ApiControlPlaneExtension,
+} from '../extensions';
 import { organizations, projects } from '../api/mocks/data';
 import { routes } from '../routes/paths';
 import {
@@ -137,3 +141,91 @@ describe('submenu children follow API scope', () => {
     }
   });
 });
+
+/*
+ * Host-injected extensions run through this same pipeline, so the two things
+ * that can only go wrong here are covered: which entries reach the sidebar at
+ * all, and when one counts as active.
+ */
+const itemsWithExtensions = (
+  scope: ConsoleScope,
+  route: string,
+  extensions: ApiControlPlaneExtension[]
+) => {
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <MemoryRouter initialEntries={[route]}>
+      <ConsoleScopeContext.Provider value={scope}>
+        <ExtensionsProvider extensions={extensions}>
+          {children}
+        </ExtensionsProvider>
+      </ConsoleScopeContext.Provider>
+    </MemoryRouter>
+  );
+  const { result } = renderHook(() => useNavigationItems(), { wrapper });
+  return result.current;
+};
+
+const atProject = () =>
+  makeConsoleScope({
+    component: undefined,
+    isApiScope: false,
+    isProjectScope: true,
+    params: { orgHandle: ORG, projectHandler: PROJECT },
+  });
+
+// `routePath: 'environments'` is also the tail segment of an unrelated
+// settings-tab route: the collision a substring matcher cannot tell apart,
+// since `.../settings/environments` contains `/environments` too even though
+// that route belongs to a different feature.
+const sidebarExtension: ApiControlPlaneExtension = {
+  id: 'environments-sidebar',
+  label: 'Environments',
+  level: 'project',
+  order: 50,
+  render: () => <div>Sidebar Environments</div>,
+  routePath: 'environments',
+  slot: 'sidebar.project',
+};
+
+const PROJECT_BASE = `/organizations/${ORG}/projects/${PROJECT}`;
+
+describe('host-injected sidebar extensions', () => {
+  it('is active at its own destination', () => {
+    const [item] = itemsWithExtensions(
+      atProject(),
+      `${PROJECT_BASE}/environments`,
+      [sidebarExtension]
+    ).filter((entry) => entry.id === sidebarExtension.id);
+
+    expect(item?.isActive).toBe(true);
+  });
+
+  it('is not active on an unrelated route ending with the same segment', () => {
+    const [item] = itemsWithExtensions(
+      atProject(),
+      `${PROJECT_BASE}/settings/environments`,
+      [sidebarExtension]
+    ).filter((entry) => entry.id === sidebarExtension.id);
+
+    expect(item?.isActive).toBe(false);
+  });
+
+  it('keeps a nested-slot extension out of the sidebar entirely', () => {
+    // A `settings.*` entry is rendered by the Settings sub-nav; surfacing it
+    // here too would show the same feature in two places.
+    const settingsTab: ApiControlPlaneExtension = {
+      ...sidebarExtension,
+      id: 'environments-settings-tab',
+      routePath: 'settings/environments',
+      slot: 'settings.project.tabs',
+    };
+
+    const items = itemsWithExtensions(
+      atProject(),
+      `${PROJECT_BASE}/settings/environments`,
+      [settingsTab]
+    );
+
+    expect(items.find((entry) => entry.id === settingsTab.id)).toBeUndefined();
+  });
+});
diff --git a/portals/api-control-plane/src/navigation/useNavigationItems.ts b/portals/api-control-plane/src/navigation/useNavigationItems.ts
index 4b8f938e76..bb5a10f133 100644
--- a/portals/api-control-plane/src/navigation/useNavigationItems.ts
+++ b/portals/api-control-plane/src/navigation/useNavigationItems.ts
@@ -24,7 +24,11 @@ import {
   useConsoleScope,
   type ConsoleScope,
 } from '../scope/ConsoleScopeProvider';
-import { buildScopedExtensionPath, useExtensions } from '../extensions';
+import {
+  buildScopedExtensionPath,
+  isSidebarExtension,
+  useExtensions,
+} from '../extensions';
 import { navigationRegistry } from './navigationRegistry';
 import {
   type NavigationDefinition,
@@ -59,11 +63,28 @@ export const useNavigationItems = (): NavigationItem[] => {
     // Host-injected extensions are converted to the same NavigationDefinition
     // shape the built-in registry uses, so they run through one filter/sort
     // pipeline instead of a parallel "Cloud category" implementation.
-    const extensionDefinitions: NavigationDefinition[] = extensions.map(
-      (extension) => {
+    //
+    // Only `sidebar.*` entries belong here: an extension registered against a
+    // nested slot (e.g. `settings.project.tabs`) renders inside that slot's own
+    // host and must not also appear as a top-level sidebar item.
+    const extensionDefinitions: NavigationDefinition[] = extensions
+      .filter(isSidebarExtension)
+      .map((extension) => {
         const isDescendantRoute = extension.routePath.endsWith('/*');
         const routeSuffix = extension.routePath.replace(/\/\*$/, '');
-        const routeSegment = `/${routeSuffix}`;
+        // The one destination this item points at in the current scope,
+        // computed once and used for both `to` and `match`. A raw substring
+        // search over the pathname would also fire on an unrelated route that
+        // merely ends with the same segment name — a `settings/<name>` tab
+        // route would light up a sidebar extension whose own destination is
+        // `/<name>` at a different depth.
+        const destination = scope.params.orgHandle
+          ? buildScopedExtensionPath(extension.level, routeSuffix, {
+              apiHandler: scope.params.apiHandler ?? null,
+              orgHandle: scope.params.orgHandle,
+              projectHandler: scope.params.projectHandler ?? null,
+            })
+          : undefined;
         return {
           group: extension.group,
           icon: extension.icon,
@@ -71,30 +92,20 @@ export const useNavigationItems = (): NavigationItem[] => {
           isVisible: extension.isVisible,
           label: extension.label,
           level: extension.level,
-          match: (pathname) => {
-            const index = pathname.indexOf(routeSegment);
-            if (index === -1) return false;
-            const charAfter = pathname[index + routeSegment.length];
-            // Match only a complete path segment: nothing after it, or (for
-            // a `/*` route) a further `/` continuing into a descendant path.
-            return charAfter === undefined || (isDescendantRoute && charAfter === '/');
-          },
+          match: (pathname) =>
+            destination !== undefined &&
+            // Exactly this destination, or (for a `/*` route) a path
+            // continuing below it — never a partial segment match.
+            (pathname === destination ||
+              (isDescendantRoute && pathname.startsWith(`${destination}/`))),
           order: extension.order,
           // A missing project/API no longer makes the item unlinkable: the path
           // degrades to the extension page's scope-less alias, where its own
           // `ScopeGate` collects what's missing. Only a route with no
           // organization has nothing to link to.
-          to: ({ params }) =>
-            params.orgHandle
-              ? buildScopedExtensionPath(extension.level, routeSuffix, {
-                  apiHandler: params.apiHandler ?? null,
-                  orgHandle: params.orgHandle,
-                  projectHandler: params.projectHandler ?? null,
-                })
-              : undefined,
+          to: () => destination,
         };
-      }
-    );
+      });
     const combinedRegistry = [...navigationRegistry, ...extensionDefinitions];
 
     // A definition becomes an item unless it has no target at all. Children go
diff --git a/portals/api-control-plane/src/navigation/useSettingsTabs.tsx b/portals/api-control-plane/src/navigation/useSettingsTabs.tsx
new file mode 100644
index 0000000000..464165f9ab
--- /dev/null
+++ b/portals/api-control-plane/src/navigation/useSettingsTabs.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { ReactNode } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Settings } from '@wso2/oxygen-ui-icons-react';
+
+import { useConsoleScope } from '../scope/ConsoleScopeProvider';
+import {
+  settingsTabExtensions,
+  settingsTabSlot,
+  useExtensions,
+} from '../extensions';
+import { useIsHidden } from '../slots';
+import type { NavigationLevel } from './navigationTypes';
+
+const messages = defineMessages({
+  generalTab: {
+    id: 'apiControlPlane.navigation.useSettingsTabs.generalTab',
+    defaultMessage: 'General',
+    description:
+      'Label for the built-in first tab of the Settings page. A noun naming the section, not a command.',
+  },
+});
+
+export type SettingsTab = {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  /** Path segment relative to `/settings/`, e.g. `"general"`. */
+  path: string;
+  order: number;
+};
+
+/**
+ * The sub-nav tabs rendered inside the Settings page for a given level: the
+ * built-in "General" tab (unless suppressed via `Hideable`) plus any
+ * host-injected extension registered against the matching
+ * `settings.<level>.tabs` slot, sorted by `order`. Mirrors
+ * `useNavigationItems`'s registry-plus-extensions merge, one level deeper
+ * (inside Settings rather than the main sidebar).
+ */
+export const useSettingsTabs = (level: NavigationLevel): SettingsTab[] => {
+  const intl = useIntl();
+  const consoleScope = useConsoleScope();
+  const extensions = useExtensions();
+  const generalTabHidden = useIsHidden(`${settingsTabSlot(level)}.general`);
+
+  const extensionTabs: SettingsTab[] = settingsTabExtensions(extensions, level)
+    .filter((extension) => extension.isVisible?.(consoleScope) ?? true)
+    .map((extension) => ({
+      icon: extension.icon ?? <Settings size={18} />,
+      id: extension.id,
+      // An extension's label is host-supplied and already in the host's own
+      // locale — it is passed through, never run through this app's catalog.
+      label: extension.label,
+      order: extension.order,
+      path: extension.routePath.replace(/^settings\//, ''),
+    }));
+
+  const builtInTabs: SettingsTab[] = generalTabHidden
+    ? []
+    : [
+        {
+          icon: <Settings size={18} />,
+          id: 'general',
+          label: intl.formatMessage(messages.generalTab),
+          order: 0,
+          path: 'general',
+        },
+      ];
+
+  return [...builtInTabs, ...extensionTabs].sort(
+    (left, right) => left.order - right.order
+  );
+};
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/settings/GeneralSettingsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/GeneralSettingsPage.tsx
new file mode 100644
index 0000000000..ab521d5a9c
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/GeneralSettingsPage.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Card, CardContent, Typography } from '@wso2/oxygen-ui';
+import { FormattedMessage, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  mvpScope: {
+    id: 'apiControlPlane.pages.appShell.appShellPages.settings.GeneralSettingsPage.mvpScope',
+    defaultMessage:
+      'Advanced organization admin settings, governance, marketplace, and developer portal configuration are intentionally excluded from the MVP replacement app.',
+    description:
+      'Body copy explaining which settings areas the MVP deliberately leaves out.',
+  },
+});
+
+/**
+ * Shared "General" tab content for both the organization- and project-level
+ * Settings pages — the scope name in the copy is the only thing that differs,
+ * and the surrounding `SettingsLayout` already names it, so one component
+ * covers both rather than two near-duplicates.
+ */
+export function GeneralSettingsPage() {
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <Typography>
+          <FormattedMessage {...messages.mvpScope} />
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsLayout.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsLayout.tsx
new file mode 100644
index 0000000000..4fb9278769
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsLayout.tsx
@@ -0,0 +1,151 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  Box,
+  Divider,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  PageTitle,
+  Stack,
+} from '@wso2/oxygen-ui';
+import { defineMessages, useIntl } from 'react-intl';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+
+import { useConsoleScope } from '../../../../scope/ConsoleScopeProvider';
+import { routes } from '../../../../routes/paths';
+import { useSettingsTabs } from '../../../../navigation/useSettingsTabs';
+import type { NavigationLevel } from '../../../../navigation/navigationTypes';
+
+const messages = defineMessages({
+  title: {
+    id: 'apiControlPlane.pages.appShell.appShellPages.settings.SettingsLayout.title',
+    defaultMessage: 'Settings',
+    description: 'Heading of the Settings page.',
+  },
+  subtitle: {
+    id: 'apiControlPlane.pages.appShell.appShellPages.settings.SettingsLayout.subtitle',
+    defaultMessage: 'Minimal settings overview for {subject}.',
+    description:
+      'Sub-heading of the Settings page. {subject} is the display name of the organization or project being configured — never translated.',
+  },
+});
+
+export type SettingsLayoutProps = {
+  /** Which Settings page this is — organization- or project-scoped. */
+  level: Extract<NavigationLevel, 'organization' | 'project'>;
+};
+
+/**
+ * Settings shell: a persistent left sub-nav (the built-in tabs plus any
+ * host-injected `settings.<level>.tabs` extension, see `useSettingsTabs`) and
+ * the active tab in the right pane via `<Outlet />`.
+ *
+ * No `ScopeGate`: Settings is the one page with no scope requirement. The
+ * sidebar links to the organization-level path while browsing the org and to
+ * the project's once one is selected, and a project card's gear deep-links the
+ * same page — so it renders at whatever scope it is reached in.
+ */
+export function SettingsLayout({ level }: SettingsLayoutProps) {
+  const intl = useIntl();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { organization, params, project } = useConsoleScope();
+  const tabs = useSettingsTabs(level);
+
+  // Whichever scope the page was reached in, named rather than handled: the
+  // heading reads "…for Retail APIs", not "…for retail-apis". Falls back to the
+  // handle, which the route always carries, so the heading still says what it is
+  // about while the display name is still loading.
+  const subject =
+    project?.displayName ??
+    organization?.displayName ??
+    params.projectHandler ??
+    params.orgHandle;
+
+  // The index route carries no tab segment, and renders the first tab's
+  // content — so it highlights the first tab rather than nothing at all.
+  const selectedId =
+    tabs.find((tab) => location.pathname.endsWith(`/settings/${tab.path}`))?.id ??
+    tabs[0]?.id;
+
+  const goToTab = (path: string) => {
+    if (!params.orgHandle) return;
+    if (level === 'project') {
+      if (!params.projectHandler) return;
+      navigate(
+        routes.projectSettingsTab(path, params.orgHandle, params.projectHandler)
+      );
+      return;
+    }
+    navigate(routes.settingsTab(path, params.orgHandle));
+  };
+
+  return (
+    <Box
+      sx={{
+        alignItems: 'stretch',
+        display: 'flex',
+        minHeight: '100%',
+        width: '100%',
+      }}
+    >
+      <Box sx={{ flexShrink: 0, pr: 3, width: { md: 280, xs: 200 } }}>
+        <Stack spacing={2}>
+          <PageTitle>
+            <PageTitle.Header>
+              {intl.formatMessage(messages.title)}
+            </PageTitle.Header>
+            <PageTitle.SubHeader>
+              {intl.formatMessage(messages.subtitle, { subject })}
+            </PageTitle.SubHeader>
+          </PageTitle>
+          <List dense disablePadding>
+            {tabs.map((tab) => (
+              <ListItemButton
+                key={tab.id}
+                onClick={() => goToTab(tab.path)}
+                selected={tab.id === selectedId}
+                sx={{
+                  borderColor: 'divider',
+                  borderRadius: 1,
+                  border: 1,
+                  mb: 0.5,
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 32 }}>{tab.icon}</ListItemIcon>
+                <ListItemText
+                  primary={tab.label}
+                  slotProps={{ primary: { noWrap: true } }}
+                />
+              </ListItemButton>
+            ))}
+          </List>
+        </Stack>
+      </Box>
+
+      <Divider orientation="vertical" flexItem />
+
+      <Box sx={{ flex: 1, minWidth: 0, pl: 3 }}>
+        <Outlet />
+      </Box>
+    </Box>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
deleted file mode 100644
index 83f70453ca..0000000000
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/settings/SettingsPage.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Card, CardContent, PageTitle, Typography } from '@wso2/oxygen-ui';
-
-import { useConsoleScope } from '../../../../scope/ConsoleScopeProvider';
-
-// No `ScopeGate`: Settings is the one page with no scope requirement. The sidebar
-// links to the organization-level path while browsing the org and to the project's
-// once one is selected, and a project card's gear deep-links the same page — so it
-// renders at whatever scope it is reached in.
-export function SettingsPage() {
-  const { organization, params, project } = useConsoleScope();
-  // Whichever scope the page was reached in, named rather than handled: the
-  // heading reads "…for Retail APIs", not "…for retail-apis". Falls back to the
-  // handle, which the route always carries, so the heading still says what it is
-  // about while the display name is still loading.
-  const subject =
-    project?.displayName ??
-    organization?.displayName ??
-    params.projectHandler ??
-    params.orgHandle;
-
-  return (
-    <>
-      <PageTitle>
-        <PageTitle.Header>Settings</PageTitle.Header>
-        <PageTitle.SubHeader>Minimal settings overview for {subject}.</PageTitle.SubHeader>
-      </PageTitle>
-      <Card variant="outlined">
-        <CardContent>
-          <Typography>
-            Advanced organization admin settings, governance, marketplace, and
-            developer portal configuration are intentionally excluded from the
-            MVP replacement app.
-          </Typography>
-        </CardContent>
-      </Card>
-    </>
-  );
-}
diff --git a/portals/api-control-plane/src/routes/AppRoutes.settingsTab.test.tsx b/portals/api-control-plane/src/routes/AppRoutes.settingsTab.test.tsx
new file mode 100644
index 0000000000..dc2691973f
--- /dev/null
+++ b/portals/api-control-plane/src/routes/AppRoutes.settingsTab.test.tsx
@@ -0,0 +1,127 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  ExtensionsProvider,
+  type ApiControlPlaneExtension,
+} from '../extensions';
+import { AppRoutes } from './AppRoutes';
+import { anOrganization, aProject, collection, resource } from '../test/msw';
+import { authStatePresets } from '../test/mockAuthState';
+import { server } from '../test/server';
+import { renderWithProviders, screen } from '../test/utils';
+
+// Covers the `settings.<level>.tabs` slot: a host-injected extension
+// registered against that slot renders inside the Settings page's own sub-nav
+// (nested under /settings), never as a top-level sidebar/route entry.
+describe('AppRoutes settingsTab extensions', () => {
+  const org = anOrganization({
+    id: 'api-platform-demo',
+    displayName: 'API Platform Demo',
+  });
+  const project = aProject({ id: 'retail-apis', displayName: 'Retail APIs' });
+
+  beforeEach(() => {
+    vi.stubEnv('VITE_USE_MOCK_API', 'true');
+    server.use(
+      collection('/organizations', [org]),
+      resource('/organizations/:organizationId', org),
+      collection('/projects', [project]),
+      resource('/projects/:projectId', project),
+      collection('/rest-apis', [])
+    );
+  });
+  afterEach(() => vi.unstubAllEnvs());
+
+  const projectSettingsRoute =
+    '/organizations/api-platform-demo/projects/retail-apis/settings';
+
+  const mockExtension: ApiControlPlaneExtension = {
+    id: 'environments',
+    label: 'Environments',
+    level: 'project',
+    order: 10,
+    render: () => <div>Mock Environments page</div>,
+    routePath: 'settings/environments',
+    slot: 'settings.project.tabs',
+  };
+
+  const renderWithExtension = (
+    extension: ApiControlPlaneExtension,
+    route: string
+  ) =>
+    renderWithProviders(
+      <ExtensionsProvider extensions={[extension]}>
+        <AppRoutes extensions={[extension]} />
+      </ExtensionsProvider>,
+      { authState: authStatePresets.authenticated(), route }
+    );
+
+  it('lists the extension as a Settings sub-nav tab and adds no top-level sidebar entry', async () => {
+    renderWithExtension(mockExtension, projectSettingsRoute);
+
+    expect(await screen.findByText('General')).toBeInTheDocument();
+    expect(await screen.findByText('Environments')).toBeInTheDocument();
+
+    // One text node only — the settings tab. A second would mean it also
+    // registered itself as a top-level sidebar item.
+    expect(screen.getAllByText('Environments')).toHaveLength(1);
+  });
+
+  it('renders what the extension returns when its settings tab route is visited', async () => {
+    renderWithExtension(mockExtension, `${projectSettingsRoute}/environments`);
+
+    expect(
+      await screen.findByText('Mock Environments page')
+    ).toBeInTheDocument();
+  });
+
+  it('hands the extension a Port carrying the scope it was rendered in', async () => {
+    const portAware: ApiControlPlaneExtension = {
+      ...mockExtension,
+      render: (port) => <div>Port project: {port.projectHandle}</div>,
+    };
+
+    renderWithExtension(portAware, `${projectSettingsRoute}/environments`);
+
+    expect(
+      await screen.findByText('Port project: retail-apis')
+    ).toBeInTheDocument();
+  });
+
+  it('drops a descriptor whose slot and level disagree', async () => {
+    // Type-valid but internally inconsistent: the slot says "project" while
+    // `level` says "organization". Neither `useSettingsTabs` nor the route pass
+    // may accept it — it must render in NEITHER settings page rather than in
+    // the wrong one, against a Port missing the scope it expects.
+    const conflicting: ApiControlPlaneExtension = {
+      ...mockExtension,
+      id: 'conflicting',
+      label: 'Conflicting',
+      level: 'organization',
+      slot: 'settings.project.tabs',
+    };
+
+    renderWithExtension(conflicting, projectSettingsRoute);
+
+    expect(await screen.findByText('General')).toBeInTheDocument();
+    expect(screen.queryByText('Conflicting')).not.toBeInTheDocument();
+  });
+});
diff --git a/portals/api-control-plane/src/routes/AppRoutes.tsx b/portals/api-control-plane/src/routes/AppRoutes.tsx
index f9ebcc8129..186a05c41f 100644
--- a/portals/api-control-plane/src/routes/AppRoutes.tsx
+++ b/portals/api-control-plane/src/routes/AppRoutes.tsx
@@ -32,8 +32,12 @@ import { ConsoleScopeProvider } from '../scope/ConsoleScopeProvider';
 import AppLayout from '../pages/appShell/AppLayout';
 import {
   extensionScopedPaths,
+  isSidebarExtension,
+  settingsTabExtensions,
   type ApiControlPlaneExtension,
 } from '../extensions';
+import type { NavigationLevel } from '../navigation/navigationTypes';
+import { usePort } from '../hostPort';
 import { ProtectedRoute } from './ProtectedRoute';
 import { apiScopedPaths, projectScopedPaths, routes } from './paths';
 
@@ -75,8 +79,8 @@ const ApiListPage = lazy(() =>
   }))
 );
 const ApiCreatePage = lazy(() =>
-  import('../pages/appShell/appShellPages/apis/ApiCreatePage').then((m) => ({
-    default: m.ApiCreatePage,
+  import('../pages/appShell/appShellPages/apis/create/ApiCreationWizard').then((m) => ({
+    default: m.ApiCreationWizard,
   }))
 );
 const ApiDetailPage = lazy(() =>
@@ -155,11 +159,16 @@ const RuntimeLogsPage = lazy(() =>
     default: m.RuntimeLogsPage,
   }))
 );
-const SettingsPage = lazy(() =>
-  import('../pages/appShell/appShellPages/settings/SettingsPage').then((m) => ({
-    default: m.SettingsPage,
+const SettingsLayout = lazy(() =>
+  import('../pages/appShell/appShellPages/settings/SettingsLayout').then((m) => ({
+    default: m.SettingsLayout,
   }))
 );
+const GeneralSettingsPage = lazy(() =>
+  import('../pages/appShell/appShellPages/settings/GeneralSettingsPage').then(
+    (m) => ({ default: m.GeneralSettingsPage })
+  )
+);
 
 export type AppRoutesProps = {
   extensions?: readonly ApiControlPlaneExtension[];
@@ -174,12 +183,44 @@ export type AppRoutesProps = {
 const scopedRoutes = (paths: string[], element: ReactNode) =>
   paths.map((path) => <Route key={path} path={path} element={element} />);
 
+/**
+ * Resolves the real `CloudHostPort` and hands it to the extension's `render`.
+ *
+ * The port is read from context here, inside the router, rather than passed in
+ * from the registration site — an extension only ever receives it as a plain
+ * value, so it never imports this portal's hooks itself (see `hostPort.tsx`).
+ */
+function ExtensionRoute({ extension }: { extension: ApiControlPlaneExtension }) {
+  const port = usePort();
+  return <>{extension.render(port)}</>;
+}
+
 export function AppRoutes({ extensions = [] }: AppRoutesProps) {
-  const extensionRoutes = extensions.flatMap((extension) =>
-    extensionScopedPaths(extension.level, extension.routePath).map((path) => (
-      <Route key={path} path={path} element={extension.element} />
-    ))
-  );
+  // Extensions registered against a `settings.<level>.tabs` slot render nested
+  // under the matching Settings layout, at a path relative to it — so the tab's
+  // own route and the sub-nav entry `useSettingsTabs` builds stay in step.
+  const settingsTabRoutes = (level: NavigationLevel) =>
+    settingsTabExtensions(extensions, level).map((extension) => (
+      <Route
+        key={extension.id}
+        path={extension.routePath.replace(/^settings\//, '')}
+        element={<ExtensionRoute extension={extension} />}
+      />
+    ));
+
+  // Only `sidebar.*` entries become top-level routes; a Settings tab extension
+  // is routed by `settingsTabRoutes` above, nested under the Settings layout.
+  const extensionRoutes = extensions
+    .filter(isSidebarExtension)
+    .flatMap((extension) =>
+      extensionScopedPaths(extension.level, extension.routePath).map((path) => (
+        <Route
+          key={`${extension.id}:${path}`}
+          path={path}
+          element={<ExtensionRoute extension={extension} />}
+        />
+      ))
+    );
 
   return (
     <Routes>
@@ -262,9 +303,25 @@ export function AppRoutes({ extensions = [] }: AppRoutesProps) {
             <LifeCyclePage />
           )}
           {scopedRoutes(apiScopedPaths(routes.apiAdmin), <AdminPage />)}
-          {/* Two entry points, one page, no scope requirement either way. */}
-          <Route path={routes.settings()} element={<SettingsPage />} />
-          <Route path={routes.projectSettings()} element={<SettingsPage />} />
+          {/* Two entry points, one page, no scope requirement either way. The
+              index route renders the same content as `general`, so `/settings`
+              is never a blank pane. */}
+          <Route
+            path={routes.settings()}
+            element={<SettingsLayout level="organization" />}
+          >
+            <Route index element={<GeneralSettingsPage />} />
+            <Route path="general" element={<GeneralSettingsPage />} />
+            {settingsTabRoutes('organization')}
+          </Route>
+          <Route
+            path={routes.projectSettings()}
+            element={<SettingsLayout level="project" />}
+          >
+            <Route index element={<GeneralSettingsPage />} />
+            <Route path="general" element={<GeneralSettingsPage />} />
+            {settingsTabRoutes('project')}
+          </Route>
           {extensionRoutes}
           <Route path="*" element={<NotFoundPage />} />
         </Route>
diff --git a/portals/api-control-plane/src/routes/paths.ts b/portals/api-control-plane/src/routes/paths.ts
index a8f4cddf05..e93f6c9798 100644
--- a/portals/api-control-plane/src/routes/paths.ts
+++ b/portals/api-control-plane/src/routes/paths.ts
@@ -244,6 +244,17 @@ export const routes = {
     orgHandle = ':orgHandle',
     projectHandler = ':projectHandler'
   ) => projectPath(orgHandle, projectHandler, 'settings'),
+  // One Settings sub-nav tab, org- and project-scoped. `tab` is the segment
+  // below `/settings/` ("general", or an extension's own `routePath` with the
+  // `settings/` prefix stripped) — the sub-nav and the routes are built from
+  // these two, so a tab can never link somewhere no route answers.
+  settingsTab: (tab: string, orgHandle = ':orgHandle') =>
+    `/organizations/${orgHandle}/settings/${tab}`,
+  projectSettingsTab: (
+    tab: string,
+    orgHandle = ':orgHandle',
+    projectHandler = ':projectHandler'
+  ) => projectPath(orgHandle, projectHandler, `settings/${tab}`),
 };
 
 export type ProjectPathBuilder = (

From 587b24e5cda6d8226025226f513580b00a166599 Mon Sep 17 00:00:00 2001
From: Shavin Chandrawansha <shavinanjithachandrawansha@gmail.com>
Date: Fri, 28 Aug 2026 12:34:23 +0530
Subject: [PATCH 12/12] fix(apicp): improve error boundaries and error handling

- Boundary around the routed page in AppLayout, above Suspense, so the shell survives and stale lazy() chunks are caught too.
- Recovery actions that work: Try again / Go home, or Reload for a stale chunk.
- resetKeys keyed on pathname, so a fallback clears on navigation.
- Header switchers and sidebar guarded separately; switchers extracted to HeaderScopeSwitchers so logout stays reachable. Both degrade visibly.
- Raw error.message shown in dev builds only.
---
 portals/api-control-plane/src/App.tsx         |   2 +-
 .../src/components/ErrorBoundary.tsx          |  85 -----
 .../components/errors/ErrorBoundary.test.tsx  | 226 +++++++++++
 .../src/components/errors/ErrorBoundary.tsx   | 113 ++++++
 .../src/components/errors/ErrorFallback.tsx   | 351 ++++++++++++++++++
 .../appShell => hooks}/useFooterHeight.ts     |   2 +-
 .../src/pages/appShell/AppHeader.test.tsx     |  92 +++++
 .../src/pages/appShell/AppHeader.tsx          | 305 +--------------
 .../src/pages/appShell/AppLayout.tsx          |  40 +-
 .../pages/appShell/HeaderScopeSwitchers.tsx   | 332 +++++++++++++++++
 .../apis/develop/components/SaveBar.tsx       |   2 +-
 .../src/utils/errors/errorClassification.ts   |  56 +++
 12 files changed, 1219 insertions(+), 387 deletions(-)
 delete mode 100644 portals/api-control-plane/src/components/ErrorBoundary.tsx
 create mode 100644 portals/api-control-plane/src/components/errors/ErrorBoundary.test.tsx
 create mode 100644 portals/api-control-plane/src/components/errors/ErrorBoundary.tsx
 create mode 100644 portals/api-control-plane/src/components/errors/ErrorFallback.tsx
 rename portals/api-control-plane/src/{pages/appShell => hooks}/useFooterHeight.ts (96%)
 create mode 100644 portals/api-control-plane/src/pages/appShell/AppHeader.test.tsx
 create mode 100644 portals/api-control-plane/src/pages/appShell/HeaderScopeSwitchers.tsx
 create mode 100644 portals/api-control-plane/src/utils/errors/errorClassification.ts

diff --git a/portals/api-control-plane/src/App.tsx b/portals/api-control-plane/src/App.tsx
index 3d7d90df0a..27a4035ff0 100644
--- a/portals/api-control-plane/src/App.tsx
+++ b/portals/api-control-plane/src/App.tsx
@@ -23,7 +23,7 @@ import { BrowserRouter } from 'react-router-dom';
 
 import { ApiClientProvider } from './api/ApiClientProvider';
 import { createQueryClient } from './api/core/queryClient';
-import { ErrorBoundary } from './components/ErrorBoundary';
+import { ErrorBoundary } from './components/errors/ErrorBoundary';
 import { NotificationProvider, useNotifications } from './components/Notifications';
 import { runtimeConfig } from './config/runtime';
 import { AuthProvider } from './contexts/auth/AuthProvider';
diff --git a/portals/api-control-plane/src/components/ErrorBoundary.tsx b/portals/api-control-plane/src/components/ErrorBoundary.tsx
deleted file mode 100644
index 4277e2243d..0000000000
--- a/portals/api-control-plane/src/components/ErrorBoundary.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Box, Button, Typography } from '@wso2/oxygen-ui';
-import { Component, type ErrorInfo, type ReactNode } from 'react';
-
-type ErrorBoundaryProps = {
-  children: ReactNode;
-  fallback?: (error: Error, reset: () => void) => ReactNode;
-};
-
-type ErrorBoundaryState = {
-  error?: Error;
-};
-
-/**
- * Top-level error boundary. Without this, a render-time throw anywhere in the
- * routed tree (for example `useConsoleScope` used outside its provider) unmounts
- * the whole app and leaves a blank screen.
- */
-export class ErrorBoundary extends Component<
-  ErrorBoundaryProps,
-  ErrorBoundaryState
-> {
-  state: ErrorBoundaryState = {};
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { error };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    // eslint-disable-next-line no-console
-    console.error('Unhandled error in oxygen-console', error, info);
-  }
-
-  reset = () => {
-    this.setState({ error: undefined });
-  };
-
-  render() {
-    const { error } = this.state;
-    const { children, fallback } = this.props;
-
-    if (!error) return children;
-    if (fallback) return fallback(error, this.reset);
-
-    return (
-      <Box
-        sx={{
-          alignItems: 'center',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
-          minHeight: '60vh',
-          justifyContent: 'center',
-          p: 4,
-          textAlign: 'center',
-        }}
-      >
-        <Typography variant="h5">Something went wrong</Typography>
-        <Typography color="text.secondary">
-          {error.message || 'An unexpected error occurred.'}
-        </Typography>
-        <Button onClick={() => window.location.reload()} variant="contained">
-          Reload
-        </Button>
-      </Box>
-    );
-  }
-}
diff --git a/portals/api-control-plane/src/components/errors/ErrorBoundary.test.tsx b/portals/api-control-plane/src/components/errors/ErrorBoundary.test.tsx
new file mode 100644
index 0000000000..c82fa0f44d
--- /dev/null
+++ b/portals/api-control-plane/src/components/errors/ErrorBoundary.test.tsx
@@ -0,0 +1,226 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type { ReactNode } from 'react';
+import { Link, Route, Routes, useLocation } from 'react-router-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { renderWithProviders, screen } from '../../test/utils';
+import { ErrorBoundary } from './ErrorBoundary';
+import { PageErrorFallback } from './ErrorFallback';
+
+/**
+ * React logs every caught error to `console.error` in addition to handing it to
+ * the boundary, so a passing test would still print two stack traces per case.
+ */
+beforeEach(() => {
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllEnvs();
+});
+
+function Boom({ message = 'render exploded' }: { message?: string }): never {
+  throw new Error(message);
+}
+
+describe('ErrorBoundary', () => {
+  it('renders children while nothing throws', () => {
+    renderWithProviders(
+      <ErrorBoundary>
+        <p>page body</p>
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('page body')).toBeInTheDocument();
+  });
+
+  it('shows the app fallback instead of unmounting when a child throws', () => {
+    renderWithProviders(
+      <ErrorBoundary>
+        <Boom />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Go to console home' })
+    ).toBeInTheDocument();
+  });
+
+  it('keeps the raw message off the screen in a production build', () => {
+    vi.stubEnv('DEV', false);
+
+    renderWithProviders(
+      <ErrorBoundary>
+        <Boom message="Cannot read properties of undefined" />
+      </ErrorBoundary>
+    );
+
+    // Sterile copy only — the real message goes to the console, which the
+    // `beforeEach` spy above is capturing.
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(
+      screen.queryByText('Cannot read properties of undefined')
+    ).not.toBeInTheDocument();
+    expect(console.error).toHaveBeenCalled();
+  });
+
+  it('shows the raw message as a developer aid in a dev build', () => {
+    vi.stubEnv('DEV', true);
+
+    renderWithProviders(
+      <ErrorBoundary>
+        <Boom message="Cannot read properties of undefined" />
+      </ErrorBoundary>
+    );
+
+    expect(
+      screen.getByText('Cannot read properties of undefined')
+    ).toBeInTheDocument();
+  });
+
+  it('recovers through the fallback reset without reloading', async () => {
+    // Held outside the component: the boundary unmounts its children when it
+    // catches, so component state would be back to "throwing" on reset.
+    let throwing = true;
+
+    function Flaky() {
+      if (throwing) throw new Error('transient');
+      return <p>recovered body</p>;
+    }
+
+    const { user } = renderWithProviders(
+      <ErrorBoundary
+        fallback={(error, reset) => (
+          <PageErrorFallback error={error} reset={reset} />
+        )}
+      >
+        <Flaky />
+      </ErrorBoundary>
+    );
+
+    expect(
+      screen.getByText('This page could not be displayed')
+    ).toBeInTheDocument();
+
+    throwing = false;
+    await user.click(screen.getByRole('button', { name: 'Try again' }));
+
+    expect(await screen.findByText('recovered body')).toBeInTheDocument();
+  });
+
+  it('clears a caught error when resetKeys change', () => {
+    const { rerender } = renderWithProviders(
+      <ErrorBoundary resetKeys={['/apis']}>
+        <Boom />
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+
+    rerender(
+      <ErrorBoundary resetKeys={['/gateways']}>
+        <p>next page body</p>
+      </ErrorBoundary>
+    );
+
+    expect(screen.getByText('next page body')).toBeInTheDocument();
+    expect(screen.queryByText('Something went wrong')).not.toBeInTheDocument();
+  });
+
+  it('offers a reload, not a retry, for a stale code-split chunk', () => {
+    renderWithProviders(
+      <ErrorBoundary
+        fallback={(error, reset) => (
+          <PageErrorFallback error={error} reset={reset} />
+        )}
+      >
+        <Boom message="Failed to fetch dynamically imported module: /assets/ApiListPage-a1b2c3.js" />
+      </ErrorBoundary>
+    );
+
+    expect(
+      screen.getByText('A newer version of the console is available')
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Reload' })).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Try again' })
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe('page-level containment', () => {
+  /**
+   * The behaviour the boundary exists for: a throw in the routed page must not
+   * take the surrounding shell with it. Modelled on `AppLayout`'s structure
+   * (persistent chrome as siblings of the guarded outlet) rather than mounting
+   * `AppLayout` itself, which would drag in the whole scope/query stack and
+   * test Oxygen's `AppShell` more than this boundary.
+   */
+  function Shell({ children }: { children: ReactNode }) {
+    // `useLocation`, not `window.location` — the pathname the boundary resets
+    // on has to be the router's, which is what `AppLayout` passes.
+    const routerLocation = useLocation();
+
+    return (
+      <>
+        <nav>
+          <Link to="/gateways">Gateways</Link>
+        </nav>
+        <ErrorBoundary
+          fallback={(error, reset) => (
+            <PageErrorFallback error={error} reset={reset} />
+          )}
+          resetKeys={[routerLocation.pathname]}
+        >
+          {children}
+        </ErrorBoundary>
+        <footer>console footer</footer>
+      </>
+    );
+  }
+
+  it('leaves the surrounding chrome mounted and navigable', async () => {
+    const { user } = renderWithProviders(
+      <Shell>
+        <Routes>
+          <Route path="/apis" element={<Boom />} />
+          <Route path="/gateways" element={<p>gateways page</p>} />
+        </Routes>
+      </Shell>,
+      { route: '/apis' }
+    );
+
+    expect(
+      screen.getByText('This page could not be displayed')
+    ).toBeInTheDocument();
+    // The whole point: chrome survives, so there is a way out of the failure.
+    expect(screen.getByRole('link', { name: 'Gateways' })).toBeInTheDocument();
+    expect(screen.getByText('console footer')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('link', { name: 'Gateways' }));
+
+    expect(await screen.findByText('gateways page')).toBeInTheDocument();
+    expect(
+      screen.queryByText('This page could not be displayed')
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/portals/api-control-plane/src/components/errors/ErrorBoundary.tsx b/portals/api-control-plane/src/components/errors/ErrorBoundary.tsx
new file mode 100644
index 0000000000..c424d19cc9
--- /dev/null
+++ b/portals/api-control-plane/src/components/errors/ErrorBoundary.tsx
@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+
+import { AppErrorFallback } from './ErrorFallback';
+
+type ErrorBoundaryProps = {
+  children: ReactNode;
+  fallback?: (error: Error, reset: () => void) => ReactNode;
+  /**
+   * Values that, when any of them changes, clear a caught error and re-render
+   * `children`.
+   *
+   * The page-level boundary passes the current pathname: without it the
+   * fallback stays latched after the user navigates away, so the shell's
+   * sidebar would appear to be broken too.
+   */
+  resetKeys?: readonly unknown[];
+};
+
+type ErrorBoundaryState = {
+  error?: Error;
+  /** The `resetKeys` this state was derived against; compared, never rendered. */
+  resetKeys: readonly unknown[];
+};
+
+const EMPTY_RESET_KEYS: readonly unknown[] = [];
+
+const sameResetKeys = (a: readonly unknown[], b: readonly unknown[]) =>
+  a.length === b.length && a.every((value, index) => Object.is(value, b[index]));
+
+/**
+ * Catches a render-time throw in its subtree and renders a fallback in its
+ * place, so the failure is contained to that subtree rather than unmounting
+ * everything above it.
+ *
+ * Mounted at two levels, and the difference matters:
+ *
+ * - Around the routed page in `AppLayout`, which is what keeps a page fault
+ *   from taking the header, sidebar and footer down with it. This is the one
+ *   that catches almost everything in practice, including a `lazy()` chunk that
+ *   fails to load after a deploy.
+ * - At the top of `App`, above `BrowserRouter`, as the last resort for anything
+ *   that throws outside the routed page (the auth provider, the scope provider,
+ *   the shell itself).
+ *
+ * It does not catch errors thrown from event handlers, timers, or unawaited
+ * promises, React boundaries never do. Those still need handling at the call
+ * site.
+ */
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { resetKeys: EMPTY_RESET_KEYS };
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return { error };
+  }
+
+  /**
+   * Drops a caught error once `resetKeys` change.
+   *
+   * Done here rather than in an effect because a boundary showing its fallback
+   * renders no children, so a child effect can never run to clear it — the
+   * decision has to happen during the render that follows the key change.
+   */
+  static getDerivedStateFromProps(
+    props: ErrorBoundaryProps,
+    state: ErrorBoundaryState
+  ): Partial<ErrorBoundaryState> | null {
+    const keys = props.resetKeys ?? EMPTY_RESET_KEYS;
+    if (sameResetKeys(keys, state.resetKeys)) return null;
+    return { error: undefined, resetKeys: keys };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    // Kept in every build: the fallback shows the user sterile copy, so the
+    // console is the only place the real message and component stack survive.
+    // eslint-disable-next-line no-console
+    console.error('Unhandled error in oxygen-console', error, info);
+  }
+
+  reset = () => {
+    this.setState({ error: undefined });
+  };
+
+  render() {
+    const { error } = this.state;
+    const { children, fallback } = this.props;
+
+    if (!error) return children;
+    if (fallback) return fallback(error, this.reset);
+
+    return <AppErrorFallback error={error} reset={this.reset} />;
+  }
+}
diff --git a/portals/api-control-plane/src/components/errors/ErrorFallback.tsx b/portals/api-control-plane/src/components/errors/ErrorFallback.tsx
new file mode 100644
index 0000000000..4af9e88e2b
--- /dev/null
+++ b/portals/api-control-plane/src/components/errors/ErrorFallback.tsx
@@ -0,0 +1,351 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  Box,
+  Button,
+  Sidebar,
+  Stack,
+  Tooltip,
+  Typography,
+} from '@wso2/oxygen-ui';
+import { House, RefreshCw, RotateCcw, TriangleAlert } from '@wso2/oxygen-ui-icons-react';
+import type { ReactNode } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useNavigate } from 'react-router-dom';
+
+import { runtimeConfig } from '../../config/runtime';
+import { isChunkLoadError } from '../../utils/errors/errorClassification';
+
+const messages = defineMessages({
+  appBody: {
+    id: 'apiControlPlane.components.ErrorFallback.app.body',
+    defaultMessage:
+      'The console ran into an unexpected problem and could not continue.',
+  },
+  appTitle: {
+    id: 'apiControlPlane.components.ErrorFallback.app.title',
+    defaultMessage: 'Something went wrong',
+  },
+  navigationUnavailable: {
+    id: 'apiControlPlane.components.ErrorFallback.chrome.navigationUnavailable',
+    defaultMessage:
+      'Navigation is unavailable. Reload the page to restore it.',
+    description:
+      'Tooltip on the marker left in place of the sidebar when it fails to render.',
+  },
+  goHome: {
+    id: 'apiControlPlane.components.ErrorFallback.action.goHome',
+    defaultMessage: 'Go to console home',
+    description:
+      'Leaves the failing page for the console landing page. Escapes a page that fails every time it is opened.',
+  },
+  pageBody: {
+    id: 'apiControlPlane.components.ErrorFallback.page.body',
+    defaultMessage:
+      'Something went wrong while displaying this page. The rest of the console is still available.',
+  },
+  pageTitle: {
+    id: 'apiControlPlane.components.ErrorFallback.page.title',
+    defaultMessage: 'This page could not be displayed',
+  },
+  reload: {
+    id: 'apiControlPlane.components.ErrorFallback.action.reload',
+    defaultMessage: 'Reload',
+    description: 'Reloads the browser tab. Verb, not a noun.',
+  },
+  staleBody: {
+    id: 'apiControlPlane.components.ErrorFallback.stale.body',
+    defaultMessage:
+      'This page could not be loaded because the console has been updated since you opened it. Reload to get the latest version.',
+    description:
+      'Shown when a code-split chunk 404s, which happens to an open tab after a deployment.',
+  },
+  staleTitle: {
+    id: 'apiControlPlane.components.ErrorFallback.stale.title',
+    defaultMessage: 'A newer version of the console is available',
+  },
+  switchersUnavailable: {
+    id: 'apiControlPlane.components.ErrorFallback.chrome.switchersUnavailable',
+    defaultMessage:
+      'Organization, project and API switchers are unavailable. Reload the page to restore them.',
+    description:
+      'Tooltip on the marker left in place of the header switchers when they fail to render.',
+  },
+  tryAgain: {
+    id: 'apiControlPlane.components.ErrorFallback.action.tryAgain',
+    defaultMessage: 'Try again',
+    description:
+      're-renders the failed area without reloading the browser tab.',
+  },
+});
+
+/** What every fallback below renders, differing only in copy and actions. */
+function ErrorFallbackLayout({
+  actions,
+  body,
+  error,
+  title,
+}: {
+  actions: ReactNode;
+  body: ReactNode;
+  error: Error;
+  title: ReactNode;
+}) {
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        justifyContent: 'center',
+        minHeight: 360,
+        mx: 'auto',
+        p: 4,
+        textAlign: 'center',
+      }}
+    >
+      <Box sx={{ color: 'warning.main', display: 'flex' }}>
+        <TriangleAlert size={48} />
+      </Box>
+      <Typography variant="h4">{title}</Typography>
+      <Typography color="text.secondary">{body}</Typography>
+
+      {/*
+        The raw message is a developer artefact ("Cannot read properties of
+        undefined"), so it is shown only in a dev build. `componentDidCatch`
+        logs it to the console in every build, which is where support should
+        read it from.
+      */}
+      {import.meta.env.DEV && error.message && (
+        <Typography
+          color="text.disabled"
+          sx={{ fontFamily: 'monospace', wordBreak: 'break-word' }}
+          variant="caption"
+        >
+          {error.message}
+        </Typography>
+      )}
+
+      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5} sx={{ mt: 1 }}>
+        {actions}
+      </Stack>
+    </Box>
+  );
+}
+
+export type ErrorFallbackProps = {
+  error: Error;
+  /**
+   * Clears the boundary's error state and re-renders its children. Recovers a
+   * transient fault without discarding the router, the query cache, or any
+   * state held above the boundary — which is what a full reload costs.
+   */
+  reset: () => void;
+};
+
+/**
+ * Fallback for the boundary around the routed page, inside `AppLayout`.
+ *
+ * Deliberately renders only where the page would: the header, sidebar,
+ * breadcrumbs and footer stay mounted, so the user navigates away from a broken
+ * page instead of being left with a reload button that reproduces the same
+ * failure. That is also why "go home" is a real route navigation here rather
+ * than a document load.
+ */
+export function PageErrorFallback({ error, reset }: ErrorFallbackProps) {
+  const navigate = useNavigate();
+
+  if (isChunkLoadError(error)) {
+    return (
+      <ErrorFallbackLayout
+        actions={
+          <Button
+            onClick={() => window.location.reload()}
+            startIcon={<RefreshCw size={18} />}
+            variant="contained"
+          >
+            <FormattedMessage {...messages.reload} />
+          </Button>
+        }
+        body={<FormattedMessage {...messages.staleBody} />}
+        error={error}
+        title={<FormattedMessage {...messages.staleTitle} />}
+      />
+    );
+  }
+
+  return (
+    <ErrorFallbackLayout
+      actions={
+        <>
+          <Button
+            onClick={reset}
+            startIcon={<RotateCcw size={18} />}
+            variant="contained"
+          >
+            <FormattedMessage {...messages.tryAgain} />
+          </Button>
+          <Button onClick={() => navigate('/')} startIcon={<House size={18} />}>
+            <FormattedMessage {...messages.goHome} />
+          </Button>
+        </>
+      }
+      body={<FormattedMessage {...messages.pageBody} />}
+      error={error}
+      title={<FormattedMessage {...messages.pageTitle} />}
+    />
+  );
+}
+
+/**
+ * Fallback for the outermost boundary, which sits above `BrowserRouter`.
+ *
+ * Reached only when something outside the routed page throws, so there is no
+ * router to navigate with — "go home" has to be a document load. It points at
+ * the app's base path rather than reloading the current URL on purpose: when
+ * the failure is deterministic for this route, reloading it reproduces the
+ * error forever, and this is the one action that escapes that loop.
+ */
+export function AppErrorFallback({ error, reset }: ErrorFallbackProps) {
+  const stale = isChunkLoadError(error);
+
+  return (
+    <ErrorFallbackLayout
+      actions={
+        <>
+          {stale ? (
+            <Button
+              onClick={() => window.location.reload()}
+              startIcon={<RefreshCw size={18} />}
+              variant="contained"
+            >
+              <FormattedMessage {...messages.reload} />
+            </Button>
+          ) : (
+            <Button
+              onClick={reset}
+              startIcon={<RotateCcw size={18} />}
+              variant="contained"
+            >
+              <FormattedMessage {...messages.tryAgain} />
+            </Button>
+          )}
+          <Button
+            onClick={() =>
+              window.location.assign(`${runtimeConfig.appBasePath || ''}/`)
+            }
+            startIcon={<House size={18} />}
+          >
+            <FormattedMessage {...messages.goHome} />
+          </Button>
+        </>
+      }
+      body={
+        <FormattedMessage {...(stale ? messages.staleBody : messages.appBody)} />
+      }
+      error={error}
+      title={
+        <FormattedMessage
+          {...(stale ? messages.staleTitle : messages.appTitle)}
+        />
+      }
+    />
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Persistent chrome                                                          */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The marker a failed piece of persistent chrome leaves behind.
+ *
+ * A header switcher or the sidebar has no room for the full-page treatment
+ * above, and no useful action of its own — the surrounding chrome is still
+ * working, so the recovery is "carry on, or reload". What it must not do is
+ * disappear silently: a console shipped with a missing org switcher and no
+ * visible trace is a bug nobody reports. Hence a small, deliberately
+ * unobtrusive marker with the explanation in a tooltip.
+ *
+ * `role="status"` rather than `alert`: this is a degraded region the user may
+ * never need, not something demanding immediate attention.
+ */
+function ChromeErrorMarker({ description }: { description: string }) {
+  return (
+    <Tooltip title={description}>
+      <Box
+        aria-label={description}
+        role="status"
+        sx={{
+          alignItems: 'center',
+          color: 'text.disabled',
+          display: 'inline-flex',
+          justifyContent: 'center',
+          px: 1,
+          py: 0.5,
+        }}
+      >
+        <TriangleAlert size={16} />
+      </Box>
+    </Tooltip>
+  );
+}
+
+/**
+ * Fallback for the boundary around the header's scope switchers.
+ *
+ * Scoped to the switchers alone so the rest of the header survives — the brand,
+ * the colour-scheme toggle, the notification bell, and above all the user menu
+ * with **logout** in it. Losing the ability to sign out because an org lookup
+ * returned an unexpected shape is a far worse outcome than losing a switcher.
+ */
+export function HeaderSwitchersErrorFallback() {
+  const intl = useIntl();
+  return (
+    <ChromeErrorMarker
+      description={intl.formatMessage(messages.switchersUnavailable)}
+    />
+  );
+}
+
+/**
+ * Fallback for the boundary around the sidebar.
+ *
+ * Renders a real but empty `Sidebar` rather than nothing, so the rail keeps its
+ * width and the shell's grid does not reflow around a missing column. It reads
+ * `collapsed`/`width` from `AppShellContext` on its own, so the fallback rail
+ * matches whatever the user had before the failure.
+ *
+ * No synthesised nav items: building a fallback menu would re-run the same
+ * scope-dependent logic that just threw. The header's switchers and brand are
+ * the way out from here.
+ */
+export function SidebarErrorFallback() {
+  const intl = useIntl();
+  return (
+    <Sidebar>
+      <Sidebar.Nav showDividers={false}>
+        <ChromeErrorMarker
+          description={intl.formatMessage(messages.navigationUnavailable)}
+        />
+      </Sidebar.Nav>
+    </Sidebar>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/useFooterHeight.ts b/portals/api-control-plane/src/hooks/useFooterHeight.ts
similarity index 96%
rename from portals/api-control-plane/src/pages/appShell/useFooterHeight.ts
rename to portals/api-control-plane/src/hooks/useFooterHeight.ts
index cda18af72e..e3f543dde3 100644
--- a/portals/api-control-plane/src/pages/appShell/useFooterHeight.ts
+++ b/portals/api-control-plane/src/hooks/useFooterHeight.ts
@@ -18,7 +18,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { APP_FOOTER_ID } from './appLayoutConstants';
+import { APP_FOOTER_ID } from '../pages/appShell/appLayoutConstants';
 
 /**
  * Measures the app footer's height.
diff --git a/portals/api-control-plane/src/pages/appShell/AppHeader.test.tsx b/portals/api-control-plane/src/pages/appShell/AppHeader.test.tsx
new file mode 100644
index 0000000000..5e5b00b209
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/AppHeader.test.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AppShell } from '@wso2/oxygen-ui';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { SidebarErrorFallback } from '../../components/errors/ErrorFallback';
+import { renderWithProviders, screen } from '../../test/utils';
+
+// The switchers own every scope-dependent hook in the header, so making the
+// whole module throw is exactly the failure the boundary around it exists for.
+vi.mock('./HeaderScopeSwitchers', () => ({
+  HeaderScopeSwitchers: () => {
+    throw new Error('scope lookup returned an unexpected shape');
+  },
+}));
+
+import { AppHeader } from './AppHeader';
+
+/** `useAppShell()` throws outside a provider, so the header needs its real slot. */
+const renderHeader = () =>
+  renderWithProviders(
+    <AppShell>
+      <AppShell.Navbar>
+        <AppHeader />
+      </AppShell.Navbar>
+    </AppShell>
+  );
+
+beforeEach(() => {
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('AppHeader', () => {
+  it('keeps the rest of the header usable when the switchers throw', async () => {
+    const { user } = renderHeader();
+
+    // Brand and actions are unaffected — they read nothing from scope.
+    expect(screen.getByText('API Platform')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Notifications' })
+    ).toBeInTheDocument();
+
+    // The one that matters: losing a switcher must never cost the user their
+    // way out of the session.
+    await user.click(screen.getByRole('button', { name: 'Account' }));
+    expect(await screen.findByText('Test User')).toBeInTheDocument();
+    expect(
+      await screen.findByText(/log ?out|sign out/i)
+    ).toBeInTheDocument();
+  });
+
+  it('leaves a visible marker rather than silently dropping the switchers', () => {
+    renderHeader();
+
+    expect(
+      screen.getByRole('status', {
+        name: /switchers are unavailable/i,
+      })
+    ).toBeInTheDocument();
+    expect(console.error).toHaveBeenCalled();
+  });
+});
+
+describe('SidebarErrorFallback', () => {
+  it('renders an empty rail carrying a marker', () => {
+    renderWithProviders(<SidebarErrorFallback />);
+
+    expect(
+      screen.getByRole('status', { name: /navigation is unavailable/i })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/portals/api-control-plane/src/pages/appShell/AppHeader.tsx b/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
index 5371e3c889..e5bbec4fa9 100644
--- a/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppHeader.tsx
@@ -18,116 +18,31 @@
 
 import {
   Badge,
-  Box,
   ColorSchemeToggle,
-  ComplexSelect,
   Header,
   IconButton,
   Tooltip,
   UserMenu,
   useAppShell,
 } from '@wso2/oxygen-ui';
-import { Bell, Boxes, Building, Layers, LogOut, WSO2, X } from '@wso2/oxygen-ui-icons-react';
-import { useNavigate } from 'react-router-dom';
-
-import { useRestApis } from '../../api/resources/restApis';
-import { useAuth } from '../../contexts/auth/AuthProvider';
-import { routes } from '../../routes/paths';
-import { useConsoleScope } from '../../scope/ConsoleScopeProvider';
+import { Bell, LogOut, WSO2 } from '@wso2/oxygen-ui-icons-react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import ProjectQuickSelector from './ProjectQuickSelector';
-import APIQuickSelector from './APIQuickSelector';
-import SearchableComplexSelect from '../../components/common/SearchableComplexSelect';
-
-// Switcher options can carry long display names/handles; bound the trigger width
-// and let the option text ellipsize instead of overflowing the header.
-const SWITCHER_SELECT_SX = { minWidth: 220, maxWidth: 260 };
+import { useLocation } from 'react-router-dom';
 
-const TRUNCATED_OPTION_TEXT_SLOT_PROPS = {
-  primary: { noWrap: true },
-  secondary: { variant: 'caption' as const, noWrap: true },
-};
+import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
+import { HeaderSwitchersErrorFallback } from '../../components/errors/ErrorFallback';
+import { useAuth } from '../../contexts/auth/AuthProvider';
+import { HeaderScopeSwitchers } from './HeaderScopeSwitchers';
 
 export function AppHeader() {
-  const navigate = useNavigate();
   const intl = useIntl();
+  const location = useLocation();
   const { actions } = useAppShell();
-  const { component, organization, organizations, params, project, projects, isLoading, projectsError } =
-    useConsoleScope();
   const auth = useAuth();
 
   const userName = auth.user?.name || 'User';
   const userEmail = auth.user?.email || '';
 
-  const changeOrganization = (orgHandle: string) => {
-    if (!orgHandle || orgHandle === params.orgHandle) return;
-    navigate(routes.organizationHome(orgHandle));
-  };
-
-  const changeProject = (projectHandler: string) => {
-    if (!params.orgHandle || !projectHandler) return;
-    navigate(routes.projectHome(params.orgHandle, projectHandler));
-  };
-
-  const changeApi = (apiHandler: string) => {
-    if (!params.orgHandle || !params.projectHandler || !apiHandler) return;
-    navigate(
-      routes.api(params.orgHandle, params.projectHandler, apiHandler)
-    );
-  }
-
-  const clearProjectSelection = () => {
-    if (!params.orgHandle) return;
-    navigate(routes.organizationHome(params.orgHandle));
-  };
-
-  const clearApiSelection = () => {
-    if (!params.orgHandle || !params.projectHandler) return;
-    navigate(routes.projectHome(params.orgHandle, params.projectHandler));
-  };
-
-  // organizations may not be loaded yet on first paint; keep the current org
-  // selectable so the switcher never renders an out-of-range value.
-  const orgOptions: { handle: string; name: string }[] =
-    organizations.length > 0
-      ? organizations.map((org) => ({ handle: org.id, name: org.displayName || org.id }))
-      : params.orgHandle
-        ? [{ handle: params.orgHandle, name: organization?.displayName || params.orgHandle }]
-        : [];
-
-  const projectOptions: { handler: string; name: string }[] =
-    projects.length > 0 
-      ? projects.map((project) => ({ handler: project.id, name: project.displayName || project.id })) 
-      : params.projectHandler && project ? [{ handler: params.projectHandler, name: project.displayName || params.projectHandler }] 
-        : [];
-
-  const apisQuery = useRestApis(
-    {},
-    { projectId: project?.id, orgId: organization?.id }
-  );
-  const apis = apisQuery.data?.list ?? [];
-  const loadedApiOptions: { handler: string; name: string }[] =
-    (projects.length > 0 && project) ?
-    apis
-      .filter(
-        (
-          api
-        ): api is NonNullable<typeof api> & { id: string; displayName?: string } =>
-          typeof api?.id === 'string' && api.id.length > 0
-      )
-      .map((api) => ({ handler: api.id, name: api.displayName ?? api.id }))
-    : [];
-
-  // apis may not be loaded yet on first paint; keep the current API selectable
-  // so the switcher never renders an out-of-range value.
-  const apiOptions: { handler: string; name: string }[] =
-    loadedApiOptions.length > 0
-      ? loadedApiOptions
-      : params.apiHandler
-        ? [{ handler: params.apiHandler, name: component?.displayName || params.apiHandler }]
-        : [];
-
-
   return (
     <Header>
       <Header.Toggle />
@@ -143,202 +58,16 @@ export function AppHeader() {
         </Header.BrandTitle>
       </Header.Brand>
 
-      {params.orgHandle && (
-        <Header.Switchers showDivider={false}>
-          <SearchableComplexSelect
-                aria-label={intl.formatMessage({ id: 'appShell.header.org.aria', defaultMessage: 'Organizations' })}
-                label={intl.formatMessage({ id: 'appShell.header.org.label', defaultMessage: 'Organizations' })}
-                value={params.orgHandle}
-                selectedOption={orgOptions.filter((item) => item.handle === params.orgHandle).map(item => ({
-                  id: item.handle,
-                  handler: item.handle,
-                  name: item.name,
-                }))[0] || undefined}
-                onChange={(id) => {
-                  changeOrganization(id);
-                }}
-                options={orgOptions.map((item) => ({
-                  id: item.handle,
-                  handler: item.handle,
-                  name: item.name,
-                }))}
-                renderOptionContent={(option) => (
-                  <>
-                    <ComplexSelect.MenuItem.Icon>
-                      <Building size={18} />
-                    </ComplexSelect.MenuItem.Icon>
-                    <ComplexSelect.MenuItem.Text
-                      primary={option.name}
-                      secondary={option.id}
-                      slotProps={TRUNCATED_OPTION_TEXT_SLOT_PROPS}
-                    />
-                  </>
-                )}
-                searchPlaceholder={intl.formatMessage({ id: 'appShell.header.org.placeholder', defaultMessage: 'Search organizations...' })}
-                emptyMessage={intl.formatMessage({ id: 'appShell.header.org.empty', defaultMessage: 'No organizations found' })}
-                noResultsMessage={intl.formatMessage({ id: 'appShell.header.org.noResults', defaultMessage: 'No matching organizations' })}
-                sx={SWITCHER_SELECT_SX}
-              />
-
-          {params.projectHandler && (
-            <Box sx={{position: 'relative'}}>
-              <SearchableComplexSelect
-                aria-label={intl.formatMessage({ id: 'appShell.header.project.aria', defaultMessage: 'Projects' })}
-                label={intl.formatMessage({ id: 'appShell.header.project.label', defaultMessage: 'Projects' })}
-                value={params.projectHandler}
-                selectedOption={projectOptions.filter((item) => item.handler === params.projectHandler).map(item => ({
-                  id: item.handler,
-                  handler: item.handler,
-                  name: item.name,
-                }))[0] || undefined}
-                onChange={(id) => {
-                  changeProject(id);
-                }}
-                options={projectOptions.map((item) => ({
-                  id: item.handler,
-                  handler: item.handler,
-                  name: item.name,
-                }))}
-                renderOptionContent={(option) => (
-                  <>
-                    <ComplexSelect.MenuItem.Icon>
-                      <Layers size={18} />
-                    </ComplexSelect.MenuItem.Icon>
-                    <ComplexSelect.MenuItem.Text
-                      primary={option.name}
-                      secondary={option.id}
-                      slotProps={TRUNCATED_OPTION_TEXT_SLOT_PROPS}
-                    />
-                  </>
-                )}
-                searchPlaceholder={intl.formatMessage({ id: 'appShell.header.project.placeholder', defaultMessage: 'Search projects...' })}
-                emptyMessage={intl.formatMessage({ id: 'appShell.header.project.empty', defaultMessage: 'No projects found' })}
-                noResultsMessage={intl.formatMessage({ id: 'appShell.header.project.noResults', defaultMessage: 'No matching projects' })}
-                sx={SWITCHER_SELECT_SX}
-              />
-
-              <IconButton
-                size="small"
-                aria-label={intl.formatMessage({ id: 'appShell.header.project.goToOrganization', defaultMessage: 'Go to organization level' })}
-                onMouseDown={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                }}
-                onClick={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  clearProjectSelection();
-                }}
-                sx={{
-                  position: "absolute",
-                  top: 6,
-                  right: 2,
-                  zIndex: 1,
-                  width: 20,
-                  height: 10,
-                }}
-              >
-                <X size={14} />
-              </IconButton>
-            </Box>
-          )}
-
-          {!params.projectHandler && (
-            <ProjectQuickSelector
-              disabled={!params.orgHandle}
-              isProjectsLoading={isLoading && projectsError === undefined}
-              projectsError={projectsError}
-              projectOptions={projectOptions.map((item) => ({
-                id: item.handler,
-                handler: item.handler,
-                name: item.name,
-              }))}
-              onSelectProject={(projectHandler) => {
-                changeProject(projectHandler);
-              }}
-            />
-          )}
-
-          {params.apiHandler && (
-            <Box sx={{position: 'relative'}}>
-              <SearchableComplexSelect
-                aria-label={intl.formatMessage({ id: 'appShell.header.api.aria', defaultMessage: 'APIs' })}
-                label={intl.formatMessage({ id: 'appShell.header.api.label', defaultMessage: 'APIs' })}
-                value={params.apiHandler}
-                selectedOption={apiOptions.filter((item) => item.handler === params.apiHandler).map(item => ({
-                  id: item.handler,
-                  handler: item.handler,
-                  name: item.name,
-                }))[0] || undefined}
-                onChange={(id) => {
-                  changeApi(id);
-                }}
-                options={apiOptions.map((item) => ({
-                  id: item.handler,
-                  handler: item.handler,
-                  name: item.name,
-                }))}
-                renderOptionContent={(option) => (
-                  <>
-                    <ComplexSelect.MenuItem.Icon>
-                      <Boxes size={18} />
-                    </ComplexSelect.MenuItem.Icon>
-                    <ComplexSelect.MenuItem.Text
-                      primary={option.name}
-                      secondary={option.id}
-                      slotProps={TRUNCATED_OPTION_TEXT_SLOT_PROPS}
-                    />
-                  </>
-                )}
-                searchPlaceholder={intl.formatMessage({ id: 'appShell.header.api.placeholder', defaultMessage: 'Search APIs...' })}
-                emptyMessage={intl.formatMessage({ id: 'appShell.header.api.empty', defaultMessage: 'No APIs found' })}
-                noResultsMessage={intl.formatMessage({ id: 'appShell.header.api.noResults', defaultMessage: 'No matching APIs' })}
-                sx={SWITCHER_SELECT_SX}
-              />
-
-              <IconButton
-                size="small"
-                aria-label={intl.formatMessage({ id: 'appShell.header.api.goToProjectLevel', defaultMessage: 'Go to project level' })}
-                onMouseDown={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                }}
-                onClick={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                  clearApiSelection();
-                }}
-                sx={{
-                  position: "absolute",
-                  top: 6,
-                  right: 2,
-                  zIndex: 1,
-                  width: 20,
-                  height: 10,
-                }}
-              >
-                <X size={14} />
-              </IconButton>
-            </Box>
-          )}
-
-          {!params.apiHandler && params.projectHandler && (
-            <APIQuickSelector
-              disabled={!params.projectHandler}
-              isApisLoading={apisQuery.isLoading}
-              apisError={apisQuery.error}
-              apiOptions={apiOptions.map((item) => ({
-                id: item.handler,
-                handler: item.handler,
-                name: item.name,
-              }))}
-              onSelectApi={(apiHandler) => {
-                changeApi(apiHandler);
-              }}
-            />
-          )}
-        </Header.Switchers>
-      )}
+      {/* Guard only the switchers: their data (orgs, projects, APIs, etc.) may be
+        missing or malformed. Keep the brand/actions outside so logout stays
+        available. Use `resetKeys` with pathname so a broken switcher recovers
+        after navigation. */}
+      <ErrorBoundary
+        fallback={() => <HeaderSwitchersErrorFallback />}
+        resetKeys={[location.pathname]}
+      >
+        <HeaderScopeSwitchers />
+      </ErrorBoundary>
 
       <Header.Spacer />
 
diff --git a/portals/api-control-plane/src/pages/appShell/AppLayout.tsx b/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
index 3633ebb487..8d710e89b4 100644
--- a/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
+++ b/portals/api-control-plane/src/pages/appShell/AppLayout.tsx
@@ -30,6 +30,11 @@ import { Bell } from '@wso2/oxygen-ui-icons-react';
 import { Suspense } from 'react';
 import { matchPath, Outlet, useLocation, useNavigate } from 'react-router-dom';
 
+import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
+import {
+  PageErrorFallback,
+  SidebarErrorFallback,
+} from '../../components/errors/ErrorFallback';
 import { LoadingState } from '../../components/StateViews';
 import { runtimeConfig } from '../../config/runtime';
 import { routes } from '../../routes/paths';
@@ -115,22 +120,35 @@ export default function AppLayout() {
         </AppShell.Navbar>
 
         <AppShell.Sidebar>
-          <AppSidebar />
+          {/* Keep this outside <Sidebar> so Sidebar.Category can inspect children */}
+          <ErrorBoundary
+            fallback={() => <SidebarErrorFallback />}
+            resetKeys={[location.pathname]}
+          >
+            <AppSidebar />
+          </ErrorBoundary>
         </AppShell.Sidebar>
 
       <AppShell.Main>
         <Box sx={{ minWidth: 0, width: '100%', p: 1 }}>
-          
-          <Suspense fallback={<LoadingState label="Loading" />}>
-            <PageContent fullWidth>
-                <Stack spacing={1}>
-                    {!hidesBreadcrumbs && breadcrumbItems.length > 1 && (
-                      <AppBreadcrumbs items={breadcrumbItems} />
-                    )}
+          <PageContent fullWidth>
+            <Stack spacing={1}>
+              {!hidesBreadcrumbs && breadcrumbItems.length > 1 && (
+                <AppBreadcrumbs items={breadcrumbItems} />
+              )}
+              {/* Error boundary scoped to routed page only; resets on pathname change */}
+              <ErrorBoundary
+                fallback={(error, reset) => (
+                  <PageErrorFallback error={error} reset={reset} />
+                )}
+                resetKeys={[location.pathname]}
+              >
+                <Suspense fallback={<LoadingState label="Loading" />}>
                   <Outlet />
-                </Stack>
-            </PageContent>
-          </Suspense>
+                </Suspense>
+              </ErrorBoundary>
+            </Stack>
+          </PageContent>
         </Box>
       </AppShell.Main>
 
diff --git a/portals/api-control-plane/src/pages/appShell/HeaderScopeSwitchers.tsx b/portals/api-control-plane/src/pages/appShell/HeaderScopeSwitchers.tsx
new file mode 100644
index 0000000000..a8a3327aa9
--- /dev/null
+++ b/portals/api-control-plane/src/pages/appShell/HeaderScopeSwitchers.tsx
@@ -0,0 +1,332 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Box, ComplexSelect, Header, IconButton } from '@wso2/oxygen-ui';
+import { Boxes, Building, Layers, X } from '@wso2/oxygen-ui-icons-react';
+import { useIntl } from 'react-intl';
+import { useNavigate } from 'react-router-dom';
+
+import { useRestApis } from '../../api/resources/restApis';
+import SearchableComplexSelect from '../../components/common/SearchableComplexSelect';
+import { routes } from '../../routes/paths';
+import { useConsoleScope } from '../../scope/ConsoleScopeProvider';
+import APIQuickSelector from './APIQuickSelector';
+import ProjectQuickSelector from './ProjectQuickSelector';
+
+// Switcher options can carry long display names/handles; bound the trigger width
+// and let the option text ellipsize instead of overflowing the header.
+const SWITCHER_SELECT_SX = { minWidth: 220, maxWidth: 260 };
+
+const TRUNCATED_OPTION_TEXT_SLOT_PROPS = {
+  primary: { noWrap: true },
+  secondary: { variant: 'caption' as const, noWrap: true },
+};
+
+/**
+ * The organization / project / API switchers in the header.
+ *
+ * Split out of `AppHeader` so it can sit behind its own error boundary. Every
+ * scope-dependent hook and every derivation over that data lives here, which is
+ * the point: those run before any JSX is returned, so a boundary placed inside
+ * the header's markup could never catch them. Keeping them in a child component
+ * is what makes the failure containable — the brand, the notification bell and
+ * the user menu's logout stay reachable when this throws.
+ *
+ * It owns the `params.orgHandle` guard too. Lifting that back into `AppHeader`
+ * would drag `useConsoleScope()` up with it and put the throw back outside the
+ * boundary.
+ */
+export function HeaderScopeSwitchers() {
+  const navigate = useNavigate();
+  const intl = useIntl();
+  const {
+    component,
+    organization,
+    organizations,
+    params,
+    project,
+    projects,
+    isLoading,
+    projectsError,
+  } = useConsoleScope();
+
+  const changeOrganization = (orgHandle: string) => {
+    if (!orgHandle || orgHandle === params.orgHandle) return;
+    navigate(routes.organizationHome(orgHandle));
+  };
+
+  const changeProject = (projectHandler: string) => {
+    if (!params.orgHandle || !projectHandler) return;
+    navigate(routes.projectHome(params.orgHandle, projectHandler));
+  };
+
+  const changeApi = (apiHandler: string) => {
+    if (!params.orgHandle || !params.projectHandler || !apiHandler) return;
+    navigate(routes.api(params.orgHandle, params.projectHandler, apiHandler));
+  };
+
+  const clearProjectSelection = () => {
+    if (!params.orgHandle) return;
+    navigate(routes.organizationHome(params.orgHandle));
+  };
+
+  const clearApiSelection = () => {
+    if (!params.orgHandle || !params.projectHandler) return;
+    navigate(routes.projectHome(params.orgHandle, params.projectHandler));
+  };
+
+  // organizations may not be loaded yet on first paint; keep the current org
+  // selectable so the switcher never renders an out-of-range value.
+  const orgOptions: { handle: string; name: string }[] =
+    organizations.length > 0
+      ? organizations.map((org) => ({ handle: org.id, name: org.displayName || org.id }))
+      : params.orgHandle
+        ? [{ handle: params.orgHandle, name: organization?.displayName || params.orgHandle }]
+        : [];
+
+  const projectOptions: { handler: string; name: string }[] =
+    projects.length > 0
+      ? projects.map((project) => ({ handler: project.id, name: project.displayName || project.id }))
+      : params.projectHandler && project ? [{ handler: params.projectHandler, name: project.displayName || params.projectHandler }]
+        : [];
+
+  const apisQuery = useRestApis(
+    {},
+    { projectId: project?.id, orgId: organization?.id }
+  );
+  const apis = apisQuery.data?.list ?? [];
+  const loadedApiOptions: { handler: string; name: string }[] =
+    (projects.length > 0 && project) ?
+    apis
+      .filter(
+        (
+          api
+        ): api is NonNullable<typeof api> & { id: string; displayName?: string } =>
+          typeof api?.id === 'string' && api.id.length > 0
+      )
+      .map((api) => ({ handler: api.id, name: api.displayName ?? api.id }))
+    : [];
+
+  // apis may not be loaded yet on first paint; keep the current API selectable
+  // so the switcher never renders an out-of-range value.
+  const apiOptions: { handler: string; name: string }[] =
+    loadedApiOptions.length > 0
+      ? loadedApiOptions
+      : params.apiHandler
+        ? [{ handler: params.apiHandler, name: component?.displayName || params.apiHandler }]
+        : [];
+
+  if (!params.orgHandle) return null;
+
+  return (
+    <Header.Switchers showDivider={false}>
+      <SearchableComplexSelect
+            aria-label={intl.formatMessage({ id: 'appShell.header.org.aria', defaultMessage: 'Organizations' })}
+            label={intl.formatMessage({ id: 'appShell.header.org.label', defaultMessage: 'Organizations' })}
+            value={params.orgHandle}
+            selectedOption={orgOptions.filter((item) => item.handle === params.orgHandle).map(item => ({
+              id: item.handle,
+              handler: item.handle,
+              name: item.name,
+            }))[0] || undefined}
+            onChange={(id) => {
+              changeOrganization(id);
+            }}
+            options={orgOptions.map((item) => ({
+              id: item.handle,
+              handler: item.handle,
+              name: item.name,
+            }))}
+            renderOptionContent={(option) => (
+              <>
+                <ComplexSelect.MenuItem.Icon>
+                  <Building size={18} />
+                </ComplexSelect.MenuItem.Icon>
+                <ComplexSelect.MenuItem.Text
+                  primary={option.name}
+                  secondary={option.id}
+                  slotProps={TRUNCATED_OPTION_TEXT_SLOT_PROPS}
+                />
+              </>
+            )}
+            searchPlaceholder={intl.formatMessage({ id: 'appShell.header.org.placeholder', defaultMessage: 'Search organizations...' })}
+            emptyMessage={intl.formatMessage({ id: 'appShell.header.org.empty', defaultMessage: 'No organizations found' })}
+            noResultsMessage={intl.formatMessage({ id: 'appShell.header.org.noResults', defaultMessage: 'No matching organizations' })}
+            sx={SWITCHER_SELECT_SX}
+          />
+
+      {params.projectHandler && (
+        <Box sx={{position: 'relative'}}>
+          <SearchableComplexSelect
+            aria-label={intl.formatMessage({ id: 'appShell.header.project.aria', defaultMessage: 'Projects' })}
+            label={intl.formatMessage({ id: 'appShell.header.project.label', defaultMessage: 'Projects' })}
+            value={params.projectHandler}
+            selectedOption={projectOptions.filter((item) => item.handler === params.projectHandler).map(item => ({
+              id: item.handler,
+              handler: item.handler,
+              name: item.name,
+            }))[0] || undefined}
+            onChange={(id) => {
+              changeProject(id);
+            }}
+            options={projectOptions.map((item) => ({
+              id: item.handler,
+              handler: item.handler,
+              name: item.name,
+            }))}
+            renderOptionContent={(option) => (
+              <>
+                <ComplexSelect.MenuItem.Icon>
+                  <Layers size={18} />
+                </ComplexSelect.MenuItem.Icon>
+                <ComplexSelect.MenuItem.Text
+                  primary={option.name}
+                  secondary={option.id}
+                  slotProps={TRUNCATED_OPTION_TEXT_SLOT_PROPS}
+                />
+              </>
+            )}
+            searchPlaceholder={intl.formatMessage({ id: 'appShell.header.project.placeholder', defaultMessage: 'Search projects...' })}
+            emptyMessage={intl.formatMessage({ id: 'appShell.header.project.empty', defaultMessage: 'No projects found' })}
+            noResultsMessage={intl.formatMessage({ id: 'appShell.header.project.noResults', defaultMessage: 'No matching projects' })}
+            sx={SWITCHER_SELECT_SX}
+          />
+
+          <IconButton
+            size="small"
+            aria-label={intl.formatMessage({ id: 'appShell.header.project.goToOrganization', defaultMessage: 'Go to organization level' })}
+            onMouseDown={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            }}
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              clearProjectSelection();
+            }}
+            sx={{
+              position: "absolute",
+              top: 6,
+              right: 2,
+              zIndex: 1,
+              width: 20,
+              height: 10,
+            }}
+          >
+            <X size={14} />
+          </IconButton>
+        </Box>
+      )}
+
+      {!params.projectHandler && (
+        <ProjectQuickSelector
+          disabled={!params.orgHandle}
+          isProjectsLoading={isLoading && projectsError === undefined}
+          projectsError={projectsError}
+          projectOptions={projectOptions.map((item) => ({
+            id: item.handler,
+            handler: item.handler,
+            name: item.name,
+          }))}
+          onSelectProject={(projectHandler) => {
+            changeProject(projectHandler);
+          }}
+        />
+      )}
+
+      {params.apiHandler && (
+        <Box sx={{position: 'relative'}}>
+          <SearchableComplexSelect
+            aria-label={intl.formatMessage({ id: 'appShell.header.api.aria', defaultMessage: 'APIs' })}
+            label={intl.formatMessage({ id: 'appShell.header.api.label', defaultMessage: 'APIs' })}
+            value={params.apiHandler}
+            selectedOption={apiOptions.filter((item) => item.handler === params.apiHandler).map(item => ({
+              id: item.handler,
+              handler: item.handler,
+              name: item.name,
+            }))[0] || undefined}
+            onChange={(id) => {
+              changeApi(id);
+            }}
+            options={apiOptions.map((item) => ({
+              id: item.handler,
+              handler: item.handler,
+              name: item.name,
+            }))}
+            renderOptionContent={(option) => (
+              <>
+                <ComplexSelect.MenuItem.Icon>
+                  <Boxes size={18} />
+                </ComplexSelect.MenuItem.Icon>
+                <ComplexSelect.MenuItem.Text
+                  primary={option.name}
+                  secondary={option.id}
+                  slotProps={TRUNCATED_OPTION_TEXT_SLOT_PROPS}
+                />
+              </>
+            )}
+            searchPlaceholder={intl.formatMessage({ id: 'appShell.header.api.placeholder', defaultMessage: 'Search APIs...' })}
+            emptyMessage={intl.formatMessage({ id: 'appShell.header.api.empty', defaultMessage: 'No APIs found' })}
+            noResultsMessage={intl.formatMessage({ id: 'appShell.header.api.noResults', defaultMessage: 'No matching APIs' })}
+            sx={SWITCHER_SELECT_SX}
+          />
+
+          <IconButton
+            size="small"
+            aria-label={intl.formatMessage({ id: 'appShell.header.api.goToProjectLevel', defaultMessage: 'Go to project level' })}
+            onMouseDown={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            }}
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              clearApiSelection();
+            }}
+            sx={{
+              position: "absolute",
+              top: 6,
+              right: 2,
+              zIndex: 1,
+              width: 20,
+              height: 10,
+            }}
+          >
+            <X size={14} />
+          </IconButton>
+        </Box>
+      )}
+
+      {!params.apiHandler && params.projectHandler && (
+        <APIQuickSelector
+          disabled={!params.projectHandler}
+          isApisLoading={apisQuery.isLoading}
+          apisError={apisQuery.error}
+          apiOptions={apiOptions.map((item) => ({
+            id: item.handler,
+            handler: item.handler,
+            name: item.name,
+          }))}
+          onSelectApi={(apiHandler) => {
+            changeApi(apiHandler);
+          }}
+        />
+      )}
+    </Header.Switchers>
+  );
+}
diff --git a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/components/SaveBar.tsx b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/components/SaveBar.tsx
index c64f058adf..fe689b9915 100644
--- a/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/components/SaveBar.tsx
+++ b/portals/api-control-plane/src/pages/appShell/appShellPages/apis/develop/components/SaveBar.tsx
@@ -18,7 +18,7 @@
 
 import { Box, Button } from '@wso2/oxygen-ui';
 
-import { useFooterHeight } from '../../../../useFooterHeight';
+import { useFooterHeight } from '../../../../../../hooks/useFooterHeight';
 import { stickyBottomBarSx } from '../../../../../../theme';
 
 /** Layout for the save bar's own content; the sticky treatment is shared. */
diff --git a/portals/api-control-plane/src/utils/errors/errorClassification.ts b/portals/api-control-plane/src/utils/errors/errorClassification.ts
new file mode 100644
index 0000000000..b88d7c6dd4
--- /dev/null
+++ b/portals/api-control-plane/src/utils/errors/errorClassification.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Substrings browsers use when a dynamic `import()` cannot be fetched. Matched
+ * case-insensitively because the wording differs per engine: Chrome says
+ * "Failed to fetch dynamically imported module", Firefox "error loading
+ * dynamically imported module", Safari "Importing a module script failed".
+ */
+const CHUNK_LOAD_MESSAGES = [
+  'failed to fetch dynamically imported module',
+  'error loading dynamically imported module',
+  'importing a module script failed',
+  'unable to preload css',
+  'loading chunk',
+  'loading css chunk',
+];
+
+/**
+ * Whether a caught error is a failed code-split chunk fetch rather than a fault
+ * in the page's own logic.
+ *
+ * Worth separating because the two need opposite recovery actions. Every page
+ * in `AppRoutes` is `lazy()`, so after a deploy an already-open tab asks for a
+ * chunk hash the server no longer has: the code is fine, the *bundle* the tab
+ * is running is stale. Reloading fetches the new index and fixes it, whereas
+ * for a genuine render fault reloading the same URL just reproduces it — which
+ * is why the generic fallback offers "try again"/"go home" instead.
+ */
+export const isChunkLoadError = (error: unknown): boolean => {
+  if (!error) return false;
+
+  const named = (error as { name?: unknown }).name;
+  if (named === 'ChunkLoadError') return true;
+
+  const message = (error as { message?: unknown }).message;
+  if (typeof message !== 'string') return false;
+
+  const normalized = message.toLowerCase();
+  return CHUNK_LOAD_MESSAGES.some((needle) => normalized.includes(needle));
+};