diff --git a/frontend/apps/console/package.json b/frontend/apps/console/package.json
index aafd312a96..05b9772ce0 100644
--- a/frontend/apps/console/package.json
+++ b/frontend/apps/console/package.json
@@ -64,12 +64,16 @@
     "@thunderid/configure-agent-types": "workspace:^",
     "@thunderid/configure-applications": "workspace:^",
     "@thunderid/configure-connections": "workspace:^",
+    "@thunderid/configure-design": "workspace:^",
+    "@thunderid/configure-groups": "workspace:^",
+    "@thunderid/configure-import-export": "workspace:^",
     "@thunderid/configure-users": "workspace:^",
     "@thunderid/configure-user-types": "workspace:^",
     "@thunderid/configure-organization-units": "workspace:^",
     "@thunderid/configure-translations": "workspace:^",
     "@thunderid/configure-resource-servers": "workspace:^",
-    "@thunderid/configure-verifiable-presentations": "workspace:^",
+    "@thunderid/configure-settings": "workspace:^",
+    "@thunderid/configure-verifiable-credentials": "workspace:^",
     "@thunderid/utils": "workspace:^",
     "@wso2/oxygen-ui": "catalog:",
     "@wso2/oxygen-ui-icons-react": "catalog:",
diff --git a/frontend/apps/console/src/App.tsx b/frontend/apps/console/src/App.tsx
index 4d1f72660e..e092e1d752 100644
--- a/frontend/apps/console/src/App.tsx
+++ b/frontend/apps/console/src/App.tsx
@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {PageLoader} from '@thunderid/components';
+import {LayoutBuilderProvider, ThemeBuilderProvider} from '@thunderid/configure-design';
+import {GroupCreateProvider} from '@thunderid/configure-groups';
 import {OrganizationUnitProvider} from '@thunderid/configure-organization-units';
 import {TranslationCreateProvider} from '@thunderid/configure-translations';
 import {UserTypeCreateProvider} from '@thunderid/configure-user-types';
@@ -12,9 +14,6 @@ import {BrowserRouter, Navigate, Outlet, Route, Routes} from 'react-router';
 import RouteConfig, {ROUTE_SEGMENTS} from './configs/RouteConfig';
 import AgentCreateProvider from './features/agents/contexts/AgentCreate/AgentCreateProvider';
 import ApplicationCreateProvider from './features/applications/contexts/ApplicationCreate/ApplicationCreateProvider';
-import LayoutBuilderProvider from './features/design/contexts/LayoutBuilder/LayoutBuilderProvider';
-import ThemeBuilderProvider from './features/design/contexts/ThemeBuilder/ThemeBuilderProvider';
-import GroupCreateProvider from './features/groups/contexts/GroupCreate/GroupCreateProvider';
 import OrganizationUnitDefaultFlowsSettings from './features/organization-units/OrganizationUnitDefaultFlowsSettings';
 import RoleCreateProvider from './features/roles/contexts/RoleCreate/RoleCreateProvider';
 import WelcomeRedirect from './features/welcome/components/WelcomeRedirect';
@@ -71,31 +70,39 @@ const ApplicationEditPage = lazy(() =>
 );
 const ApplicationsListPage = lazy(() => import('./features/applications/pages/ApplicationsListPage'));
 const ApplicationTemplateSelectPage = lazy(() => import('./features/applications/pages/ApplicationTemplateSelectPage'));
-const DesignPage = lazy(() => import('./features/design/pages/DesignPage'));
+const DesignPage = lazy(() => import('@thunderid/configure-design').then((m) => ({default: m.DesignPage})));
 const LayoutBuilderPage = lazy(() =>
-  import('./lib/monaco-setup').then(() => import('./features/design/pages/LayoutBuilderPage')),
+  import('./lib/monaco-setup').then(() =>
+    import('@thunderid/configure-design').then((m) => ({default: m.LayoutBuilderPage})),
+  ),
 );
-const ThemeBuilderPage = lazy(() => import('./features/design/pages/ThemeBuilderPage'));
-const ThemeCreatePage = lazy(() => import('./features/design/pages/ThemeCreatePage'));
+const ThemeBuilderPage = lazy(() => import('@thunderid/configure-design').then((m) => ({default: m.ThemeBuilderPage})));
+const ThemeCreatePage = lazy(() => import('@thunderid/configure-design').then((m) => ({default: m.ThemeCreatePage})));
 const FlowCreatePage = lazy(() => import('./features/flows/pages/FlowCreatePage'));
 const FlowsListPage = lazy(() => import('./features/flows/pages/FlowsListPage'));
-const CreateGroupPage = lazy(() => import('./features/groups/pages/CreateGroupPage'));
-const GroupEditPage = lazy(() => import('./features/groups/pages/GroupEditPage'));
-const GroupsListPage = lazy(() => import('./features/groups/pages/GroupsListPage'));
+const CreateGroupPage = lazy(() => import('@thunderid/configure-groups').then((m) => ({default: m.CreateGroupPage})));
+const GroupEditPage = lazy(() => import('@thunderid/configure-groups').then((m) => ({default: m.GroupEditPage})));
+const GroupsListPage = lazy(() => import('@thunderid/configure-groups').then((m) => ({default: m.GroupsListPage})));
 const HomePage = lazy(() => import('./features/home/pages/HomePage'));
 const ExportPage = lazy(() =>
-  import('./lib/monaco-setup').then(() => import('./features/import-export/pages/ExportPage')),
+  import('./lib/monaco-setup').then(() =>
+    import('@thunderid/configure-import-export').then((m) => ({default: m.ExportPage})),
+  ),
 );
 const ImportConfigurationSummaryPage = lazy(() =>
-  import('./lib/monaco-setup').then(() => import('./features/import-export/pages/ImportConfigurationSummaryPage')),
+  import('./lib/monaco-setup').then(() =>
+    import('@thunderid/configure-import-export').then((m) => ({default: m.ImportConfigurationSummaryPage})),
+  ),
+);
+const ImportConfigurationUploadPage = lazy(() =>
+  import('@thunderid/configure-import-export').then((m) => ({default: m.ImportConfigurationUploadPage})),
 );
-const ImportConfigurationUploadPage = lazy(
-  () => import('./features/import-export/pages/ImportConfigurationUploadPage'),
+const ImportConfigurationValidatePage = lazy(() =>
+  import('@thunderid/configure-import-export').then((m) => ({default: m.ImportConfigurationValidatePage})),
 );
-const ImportConfigurationValidatePage = lazy(
-  () => import('./features/import-export/pages/ImportConfigurationValidatePage'),
+const ImportExportPage = lazy(() =>
+  import('@thunderid/configure-import-export').then((m) => ({default: m.ImportExportPage})),
 );
-const ImportExportPage = lazy(() => import('./features/import-export/pages/ImportExportPage'));
 const ConnectionsListPage = lazy(() =>
   import('@thunderid/configure-connections').then((m) => ({default: m.ConnectionsListPage})),
 );
@@ -112,27 +119,27 @@ const FlowBuilderPage = lazy(() => import('./features/flows/pages/FlowBuilderPag
 const CreateRolePage = lazy(() => import('./features/roles/pages/CreateRolePage'));
 const RoleEditPage = lazy(() => import('./features/roles/pages/RoleEditPage'));
 const RolesListPage = lazy(() => import('./features/roles/pages/RolesListPage'));
-const SettingsPage = lazy(() => import('./features/settings/pages/SettingsPage'));
+const SettingsPage = lazy(() => import('@thunderid/configure-settings').then((m) => ({default: m.SettingsPage})));
 const TrustedIssuerDetailPage = lazy(() =>
   import('@thunderid/configure-connections').then((m) => ({default: m.TrustedIssuerDetailPage})),
 );
-const VerifiablePresentationsListPage = lazy(
-  () => import('./features/verifiable-presentations/pages/VerifiablePresentationsListPage'),
+const VerifiablePresentationsListPage = lazy(() =>
+  import('@thunderid/configure-verifiable-credentials').then((m) => ({default: m.VerifiablePresentationsListPage})),
 );
-const VerifiablePresentationCreatePage = lazy(
-  () => import('./features/verifiable-presentations/pages/VerifiablePresentationCreatePage'),
+const VerifiablePresentationCreatePage = lazy(() =>
+  import('@thunderid/configure-verifiable-credentials').then((m) => ({default: m.VerifiablePresentationCreatePage})),
 );
-const VerifiablePresentationEditPage = lazy(
-  () => import('./features/verifiable-presentations/pages/VerifiablePresentationEditPage'),
+const VerifiablePresentationEditPage = lazy(() =>
+  import('@thunderid/configure-verifiable-credentials').then((m) => ({default: m.VerifiablePresentationEditPage})),
 );
-const VerifiableCredentialsListPage = lazy(
-  () => import('./features/verifiable-credentials/pages/VerifiableCredentialsListPage'),
+const VerifiableCredentialsListPage = lazy(() =>
+  import('@thunderid/configure-verifiable-credentials').then((m) => ({default: m.VerifiableCredentialsListPage})),
 );
-const VerifiableCredentialCreatePage = lazy(
-  () => import('./features/verifiable-credentials/pages/VerifiableCredentialCreatePage'),
+const VerifiableCredentialCreatePage = lazy(() =>
+  import('@thunderid/configure-verifiable-credentials').then((m) => ({default: m.VerifiableCredentialCreatePage})),
 );
-const VerifiableCredentialEditPage = lazy(
-  () => import('./features/verifiable-credentials/pages/VerifiableCredentialEditPage'),
+const VerifiableCredentialEditPage = lazy(() =>
+  import('@thunderid/configure-verifiable-credentials').then((m) => ({default: m.VerifiableCredentialEditPage})),
 );
 const CreateUserTypePage = lazy(() =>
   import('@thunderid/configure-user-types').then((m) => ({default: m.CreateUserTypePage})),
diff --git a/frontend/apps/console/src/__tests__/App.test.tsx b/frontend/apps/console/src/__tests__/App.test.tsx
index 15cb8207dd..e72b822406 100644
--- a/frontend/apps/console/src/__tests__/App.test.tsx
+++ b/frontend/apps/console/src/__tests__/App.test.tsx
@@ -66,20 +66,37 @@ vi.mock('../features/applications/pages/ApplicationEditPage', () => ({
   default: () => <div data-testid="application-edit-page">Application Edit Page</div>,
 }));
 
-vi.mock('../features/design/pages/LayoutBuilderPage', () => ({
-  default: () => <div data-testid="layout-builder-page">Layout Builder Page</div>,
+vi.mock('@thunderid/configure-design', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@thunderid/configure-design')>()),
+  LayoutBuilderPage: () => <div data-testid="layout-builder-page">Layout Builder Page</div>,
+  LayoutBuilderProvider: ({children}: {children: React.ReactNode}) => children as React.ReactElement,
+  DesignPage: () => <div data-testid="design-page">Design Page</div>,
+  ThemeBuilderPage: () => <div data-testid="theme-builder-page">Theme Builder Page</div>,
+  ThemeCreatePage: () => <div data-testid="theme-create-page">Theme Create Page</div>,
+  ThemeBuilderProvider: ({children}: {children: React.ReactNode}) => children as React.ReactElement,
 }));
 
-vi.mock('../features/design/contexts/LayoutBuilder/LayoutBuilderProvider', () => ({
-  default: ({children}: {children: React.ReactNode}) => children as React.ReactElement,
+vi.mock('@thunderid/configure-groups', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@thunderid/configure-groups')>()),
+  GroupsListPage: () => <div data-testid="groups-list-page">Groups List Page</div>,
+  GroupEditPage: () => <div data-testid="group-edit-page">Group Edit Page</div>,
+  CreateGroupPage: () => <div data-testid="create-group-page">Create Group Page</div>,
+  GroupCreateProvider: ({children}: {children: React.ReactNode}) => children as React.ReactElement,
 }));
 
-vi.mock('../features/import-export/pages/ExportPage', () => ({
-  default: () => <div data-testid="export-page">Export Page</div>,
-}));
-
-vi.mock('../features/import-export/pages/ImportConfigurationSummaryPage', () => ({
-  default: () => <div data-testid="import-configuration-summary-page">Import Configuration Summary Page</div>,
+vi.mock('@thunderid/configure-import-export', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@thunderid/configure-import-export')>()),
+  ExportPage: () => <div data-testid="export-page">Export Page</div>,
+  ImportConfigurationSummaryPage: () => (
+    <div data-testid="import-configuration-summary-page">Import Configuration Summary Page</div>
+  ),
+  ImportConfigurationUploadPage: () => (
+    <div data-testid="import-configuration-upload-page">Import Configuration Upload Page</div>
+  ),
+  ImportConfigurationValidatePage: () => (
+    <div data-testid="import-configuration-validate-page">Import Configuration Validate Page</div>
+  ),
+  ImportExportPage: () => <div data-testid="import-export-page">Import Export Page</div>,
 }));
 
 vi.mock('@thunderid/configure-resource-servers', () => ({
@@ -239,4 +256,76 @@ describe('App', () => {
       expect(screen.getByTestId('trusted-issuer-detail-page')).toBeInTheDocument();
     });
   });
+
+  it('loads DesignPage lazily at /design', async () => {
+    window.history.pushState({}, '', '/design');
+    render(<App />);
+    await waitFor(() => {
+      expect(screen.getByTestId('design-page')).toBeInTheDocument();
+    });
+  });
+
+  it('loads ThemeCreatePage lazily at /design/themes/create', async () => {
+    window.history.pushState({}, '', '/design/themes/create');
+    render(<App />);
+    await waitFor(() => {
+      expect(screen.getByTestId('theme-create-page')).toBeInTheDocument();
+    });
+  });
+
+  it('loads ThemeBuilderPage lazily at /design/themes/:themeId', async () => {
+    window.history.pushState({}, '', '/design/themes/theme-123');
+    render(<App />);
+    await waitFor(() => {
+      expect(screen.getByTestId('theme-builder-page')).toBeInTheDocument();
+    });
+  });
+
+  it('loads GroupsListPage lazily at /groups', async () => {
+    window.history.pushState({}, '', '/groups');
+    render(<App />);
+    await waitFor(() => {
+      expect(screen.getByTestId('groups-list-page')).toBeInTheDocument();
+    });
+  });
+
+  it('loads GroupEditPage lazily at /groups/:groupId', async () => {
+    window.history.pushState({}, '', '/groups/group-123');
+    render(<App />);
+    await waitFor(() => {
+      expect(screen.getByTestId('group-edit-page')).toBeInTheDocument();
+    });
+  });
+
+  it('loads CreateGroupPage lazily at /groups/create', async () => {
+    window.history.pushState({}, '', '/groups/create');
+    render(<App />);
+    await waitFor(() => {
+      expect(screen.getByTestId('create-group-page')).toBeInTheDocument();
+    });
+  });
+
+  it('loads ImportExportPage lazily at /import-export', async () => {
+    window.history.pushState({}, '', '/import-export');
+    render(<App />);
+    await waitFor(() => {
+      expect(screen.getByTestId('import-export-page')).toBeInTheDocument();
+    });
+  });
+
+  it('loads ImportConfigurationUploadPage lazily at /import-configuration', async () => {
+    window.history.pushState({}, '', '/import-configuration');
+    render(<App />);
+    await waitFor(() => {
+      expect(screen.getByTestId('import-configuration-upload-page')).toBeInTheDocument();
+    });
+  });
+
+  it('loads ImportConfigurationValidatePage lazily at /import-configuration/validate', async () => {
+    window.history.pushState({}, '', '/import-configuration/validate');
+    render(<App />);
+    await waitFor(() => {
+      expect(screen.getByTestId('import-configuration-validate-page')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/frontend/apps/console/src/configs/RouteConfig.ts b/frontend/apps/console/src/configs/RouteConfig.ts
index d9224ea364..2dd3e27406 100644
--- a/frontend/apps/console/src/configs/RouteConfig.ts
+++ b/frontend/apps/console/src/configs/RouteConfig.ts
@@ -3,11 +3,15 @@
 
 import type {AgentTypeRoutePaths} from '@thunderid/configure-agent-types';
 import type {ConnectionRoutePaths} from '@thunderid/configure-connections';
+import type {DesignRoutePaths} from '@thunderid/configure-design';
+import type {GroupRoutePaths} from '@thunderid/configure-groups';
+import type {ImportExportRoutePaths} from '@thunderid/configure-import-export';
 import type {OrganizationUnitRoutePaths} from '@thunderid/configure-organization-units';
 import type {ResourceServerRoutePaths} from '@thunderid/configure-resource-servers';
 import type {TranslationRoutePaths} from '@thunderid/configure-translations';
 import type {UserTypeRoutePaths} from '@thunderid/configure-user-types';
 import type {UserRoutePaths} from '@thunderid/configure-users';
+import type {VerifiableCredentialRoutePaths} from '@thunderid/configure-verifiable-credentials';
 
 /**
  * Route paths for the domains Console implements itself, rather than through a
@@ -33,48 +37,16 @@ export interface ConsoleRoutePaths {
     detail: (id: string) => string;
     create: () => string;
   };
-  groups: {
-    list: () => string;
-    detail: (id: string) => string;
-    create: () => string;
-  };
   roles: {
     list: () => string;
     detail: (id: string) => string;
     create: () => string;
   };
-  verifiableCredentials: {
-    list: () => string;
-    detail: (id: string) => string;
-    create: () => string;
-  };
-  verifiablePresentations: {
-    list: () => string;
-    detail: (id: string) => string;
-    create: () => string;
-  };
   flows: {
     list: () => string;
     create: () => string;
     detail: (flowId: string) => string;
   };
-  design: {
-    list: () => string;
-    themesCreate: () => string;
-    themeDetail: (themeId: string) => string;
-    layoutDetail: (layoutId: string) => string;
-  };
-  importExport: {
-    list: () => string;
-  };
-  export: {
-    page: () => string;
-  };
-  importConfiguration: {
-    upload: () => string;
-    validate: () => string;
-    summary: () => string;
-  };
   welcome: {
     root: () => string;
     createProject: () => string;
@@ -112,6 +84,10 @@ export type RouteConfig = OrganizationUnitRoutePaths &
   ConnectionRoutePaths &
   ResourceServerRoutePaths &
   TranslationRoutePaths &
+  VerifiableCredentialRoutePaths &
+  ImportExportRoutePaths &
+  DesignRoutePaths &
+  GroupRoutePaths &
   ConsoleRoutePaths;
 
 /**
diff --git a/frontend/apps/console/src/features/applications/components/create-application/ConfigureDesign.tsx b/frontend/apps/console/src/features/applications/components/create-application/ConfigureDesign.tsx
index 70245cfe89..ba0f861788 100644
--- a/frontend/apps/console/src/features/applications/components/create-application/ConfigureDesign.tsx
+++ b/frontend/apps/console/src/features/applications/components/create-application/ConfigureDesign.tsx
@@ -1,6 +1,12 @@
 // Copyright 2025 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
+import {
+  LayoutPresetThumbnail,
+  LayoutThumbnail,
+  ThemeThumbnail,
+  type LayoutPresetVariant,
+} from '@thunderid/configure-design';
 import {useConfig} from '@thunderid/contexts';
 import {
   useGetThemes,
@@ -33,11 +39,6 @@ import {Palette, ExternalLink, Code, Lightbulb, LayoutTemplate} from '@wso2/oxyg
 import type {JSX, ChangeEvent} from 'react';
 import {useState, useEffect} from 'react';
 import {useTranslation} from 'react-i18next';
-import LayoutPresetThumbnail, {
-  type LayoutPresetVariant,
-} from '../../../design/components/layouts/LayoutPresetThumbnail';
-import LayoutThumbnail from '../../../design/components/layouts/LayoutThumbnail';
-import ThemeThumbnail from '../../../design/components/themes/ThemeThumbnail';
 import useApplicationCreateContext from '../../hooks/useApplicationCreateContext';
 import {ApplicationCreateFlowSignInApproach, OrganizationUnitDefaultItem} from '../../models/application-create-flow';
 
diff --git a/frontend/apps/console/src/features/applications/components/create-application/ConfigureRedirectUris.tsx b/frontend/apps/console/src/features/applications/components/create-application/ConfigureRedirectUris.tsx
index e795d78999..43b72e1944 100644
--- a/frontend/apps/console/src/features/applications/components/create-application/ConfigureRedirectUris.tsx
+++ b/frontend/apps/console/src/features/applications/components/create-application/ConfigureRedirectUris.tsx
@@ -1,6 +1,7 @@
 // Copyright 2026 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
+import {isValidOrigin} from '@thunderid/configure-settings';
 import {
   Alert,
   Box,
@@ -19,7 +20,6 @@ import type {JSX} from 'react';
 import {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import DevServerLogo from './DevServerLogo';
-import {isValidOrigin} from '../../../settings/utils/origin';
 import useApplicationCreate from '../../contexts/ApplicationCreate/useApplicationCreate';
 
 /** Pure URI-format check, permissive of path/host wildcards (the backend enforces wildcard rules). */
diff --git a/frontend/apps/console/src/features/applications/components/edit-application/integration-guides/IntegrationGuides.tsx b/frontend/apps/console/src/features/applications/components/edit-application/integration-guides/IntegrationGuides.tsx
index d224bb096d..f8f1ca5316 100644
--- a/frontend/apps/console/src/features/applications/components/edit-application/integration-guides/IntegrationGuides.tsx
+++ b/frontend/apps/console/src/features/applications/components/edit-application/integration-guides/IntegrationGuides.tsx
@@ -19,6 +19,7 @@ import {
   VueIcon,
 } from '@thunderid/components';
 import type {Application, OAuth2Config} from '@thunderid/configure-applications';
+import {GatePreview} from '@thunderid/configure-design';
 import {useConfig} from '@thunderid/contexts';
 import {DefaultTheme, type Theme, useGetTheme} from '@thunderid/design';
 import {useLogger} from '@thunderid/logger/react';
@@ -26,7 +27,6 @@ import {Box, Button, Chip, Link, Paper, Stack, Typography, useColorScheme} from
 import {ArrowRight, ArrowUpRight, Check, Copy, Sparkles} from '@wso2/oxygen-ui-icons-react';
 import {useState, type JSX, type ReactNode} from 'react';
 import {Trans, useTranslation} from 'react-i18next';
-import GatePreview from '../../../../../components/GatePreview/GatePreview';
 import useGetFlowById from '../../../../flows/api/useGetFlowById';
 import {getIntegrationGuideForTemplate} from '../../../utils/getIntegrationGuidesForTemplate';
 import getPlaygroundsForTemplate from '../../../utils/getPlaygroundsForTemplate';
diff --git a/frontend/apps/console/src/features/applications/components/edit-application/integration-guides/__tests__/IntegrationGuides.test.tsx b/frontend/apps/console/src/features/applications/components/edit-application/integration-guides/__tests__/IntegrationGuides.test.tsx
index fc011de1ee..2669b1ace5 100644
--- a/frontend/apps/console/src/features/applications/components/edit-application/integration-guides/__tests__/IntegrationGuides.test.tsx
+++ b/frontend/apps/console/src/features/applications/components/edit-application/integration-guides/__tests__/IntegrationGuides.test.tsx
@@ -47,8 +47,9 @@ vi.mock('../../../../../flows/api/useGetFlowById', () => ({
   default: () => ({data: undefined, isLoading: false}),
 }));
 
-vi.mock('../../../../../../components/GatePreview/GatePreview', () => ({
-  default: () => <div data-testid="gate-preview" />,
+vi.mock('@thunderid/configure-design', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@thunderid/configure-design')>()),
+  GatePreview: () => <div data-testid="gate-preview" />,
 }));
 
 const mockWriteText = vi.fn();
diff --git a/frontend/apps/console/src/features/applications/pages/ApplicationCreatePage.tsx b/frontend/apps/console/src/features/applications/pages/ApplicationCreatePage.tsx
index b4b795b373..6bdc643abb 100644
--- a/frontend/apps/console/src/features/applications/pages/ApplicationCreatePage.tsx
+++ b/frontend/apps/console/src/features/applications/pages/ApplicationCreatePage.tsx
@@ -5,11 +5,13 @@ import {FullScreenCreationWizardLayout} from '@thunderid/components';
 import {OAuth2GrantTypes, TokenEndpointAuthMethods, useGetApplications} from '@thunderid/configure-applications';
 import type {Application, ApplicationType, OAuth2Config} from '@thunderid/configure-applications';
 import {AuthenticatorTypes, IdentityProviderTypes, useIdentityProviders} from '@thunderid/configure-connections';
+import {GatePreview, VIEWPORT_WIDTHS, VIEWPORT_HEIGHTS} from '@thunderid/configure-design';
 import {
   OrganizationUnitPickerScreen,
   useGetOrganizationUnit,
   useHasMultipleOUs,
 } from '@thunderid/configure-organization-units';
+import {useGetCorsConfig, useUpdateCorsConfig} from '@thunderid/configure-settings';
 import {useGetUserTypes} from '@thunderid/configure-user-types';
 import {DefaultTheme, useGetTheme, type Theme} from '@thunderid/design';
 import {useTemplateLiteralResolver} from '@thunderid/hooks';
@@ -29,8 +31,6 @@ import type {BasicFlowDefinition} from '../../flows/models/responses';
 import {resolveApplicationMeta, resolveTemplatesDeep} from '../../flows/utils/gatePreviewTransforms';
 import generateFlowGraph from '../../flows/utils/generateFlowGraph';
 import getFlowPromptComponentsSequence from '../../flows/utils/getFlowPromptComponentsSequence';
-import useGetCorsConfig from '../../settings/api/useGetCorsConfig';
-import useUpdateCorsConfig from '../../settings/api/useUpdateCorsConfig';
 import useCreateApplication from '../api/useCreateApplication';
 import ConfigureSecuritySettings from '../components/create-application/configure-security-settings/ConfigureSecuritySettings';
 import ConfigureApplicationDetails from '../components/create-application/ConfigureApplicationDetails';
@@ -55,8 +55,6 @@ import isRedirectCapableTemplate from '../utils/isRedirectCapableTemplate';
 import mergeCorsOrigins from '../utils/mergeCorsOrigins';
 import resolveApplicationType from '../utils/resolveApplicationType';
 import resolveCreationFlow from '../utils/resolveCreationFlow';
-import GatePreview from '@/components/GatePreview/GatePreview';
-import {VIEWPORT_WIDTHS, VIEWPORT_HEIGHTS} from '@/features/design/components/viewportConstants';
 
 export default function ApplicationCreatePage(): JSX.Element {
   const {t} = useTranslation();
diff --git a/frontend/apps/console/src/features/applications/pages/__tests__/ApplicationCreatePage.test.tsx b/frontend/apps/console/src/features/applications/pages/__tests__/ApplicationCreatePage.test.tsx
index f9fcbd904d..4977d88876 100644
--- a/frontend/apps/console/src/features/applications/pages/__tests__/ApplicationCreatePage.test.tsx
+++ b/frontend/apps/console/src/features/applications/pages/__tests__/ApplicationCreatePage.test.tsx
@@ -350,8 +350,15 @@ vi.mock('../../components/create-application/ConfigureDetails', () => ({
   default: vi.fn(DefaultConfigureDetailsImpl),
 }));
 
-vi.mock('../../../../components/GatePreview/GatePreview', () => ({
-  default: ({showToolbar, viewport}: {showToolbar?: boolean; viewport?: {width: string; height: string}}) => (
+vi.mock('@thunderid/configure-design', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@thunderid/configure-design')>()),
+  GatePreview: ({
+    showToolbar = undefined,
+    viewport = undefined,
+  }: {
+    showToolbar?: boolean;
+    viewport?: {width: string; height: string};
+  }) => (
     <div data-testid="preview" data-show-toolbar={String(showToolbar)} data-viewport-width={viewport?.width ?? ''} />
   ),
 }));
diff --git a/frontend/apps/console/src/features/applications/utils/mergeCorsOrigins.ts b/frontend/apps/console/src/features/applications/utils/mergeCorsOrigins.ts
index 34b94693ee..c704d8e28a 100644
--- a/frontend/apps/console/src/features/applications/utils/mergeCorsOrigins.ts
+++ b/frontend/apps/console/src/features/applications/utils/mergeCorsOrigins.ts
@@ -1,9 +1,13 @@
 // Copyright 2026 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import type {AllowedOrigin, CorsValue} from '../../settings/models/responses';
-import {isValidOrigin, normalizeOrigin} from '../../settings/utils/origin';
-import originValueText from '../../settings/utils/originValueText';
+import {
+  isValidOrigin,
+  normalizeOrigin,
+  originValueText,
+  type AllowedOrigin,
+  type CorsValue,
+} from '@thunderid/configure-settings';
 
 /**
  * Builds the CORS PUT payload for adding the Configuration step's origins to the deployment's
diff --git a/frontend/apps/console/src/features/design/components/themes/__tests__/TypographyBuilderContent.test.tsx b/frontend/apps/console/src/features/design/components/themes/__tests__/TypographyBuilderContent.test.tsx
deleted file mode 100644
index 409a5c99f1..0000000000
--- a/frontend/apps/console/src/features/design/components/themes/__tests__/TypographyBuilderContent.test.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-// Copyright 2026 The ThunderID Authors
-// SPDX-License-Identifier: Apache-2.0
-
-import {render, screen, fireEvent, cleanup} from '@testing-library/react';
-import type {Theme} from '@thunderid/design';
-import {OxygenUIThemeProvider} from '@wso2/oxygen-ui';
-import {useState} from 'react';
-import {describe, it, expect, afterEach, vi} from 'vitest';
-import TypographyBuilderContent from '../TypographyBuilderContent';
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: (_key: string, fallback?: string) => fallback ?? _key}),
-}));
-
-// useFontStylesheetLink needs a ConfigProvider, which this test tree doesn't otherwise set up.
-vi.mock('@thunderid/contexts', () => ({
-  useConfig: () => ({config: {brand: {product_name: 'ThunderID'}}}),
-}));
-
-afterEach(() => {
-  cleanup();
-});
-
-interface MutableTypography {
-  fontFamily?: string;
-  font?: {importURL?: string};
-}
-
-function makeDraft(typography: MutableTypography = {fontFamily: ''}): Theme {
-  return {typography} as unknown as Theme;
-}
-
-function typographyOf(draft: Theme): MutableTypography {
-  return draft.typography as unknown as MutableTypography;
-}
-
-function renderEditor(draft: Theme) {
-  const onUpdate = vi.fn((updater: (d: Theme) => void) => updater(draft));
-  render(
-    <OxygenUIThemeProvider>
-      <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />
-    </OxygenUIThemeProvider>,
-  );
-  return onUpdate;
-}
-
-/** Mirrors the real ThemeConfigPanel.updateDraft: clones the draft and re-renders with the new
- *  object, needed for tests that exercise multiple sequential edits (renderEditor's in-place
- *  mutation doesn't give a fresh object reference each time). */
-function StatefulEditor({initialDraft, onDraftChange}: {initialDraft: Theme; onDraftChange: (d: Theme) => void}) {
-  const [draft, setDraft] = useState(initialDraft);
-  const onUpdate = (updater: (d: Theme) => void): void => {
-    const next = JSON.parse(JSON.stringify(draft)) as Theme;
-    updater(next);
-    setDraft(next);
-    onDraftChange(next);
-  };
-  return <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />;
-}
-
-function renderStatefulEditor(initialDraft: Theme) {
-  let currentDraft = initialDraft;
-  const utils = render(
-    <OxygenUIThemeProvider>
-      <StatefulEditor
-        initialDraft={initialDraft}
-        onDraftChange={(d) => {
-          currentDraft = d;
-        }}
-      />
-    </OxygenUIThemeProvider>,
-  );
-  return {...utils, getDraft: () => currentDraft};
-}
-
-describe('TypographyBuilderContent font modes', () => {
-  it('defaults to the web-safe font picker when no import URL is set', () => {
-    renderEditor(makeDraft());
-    expect(screen.getByRole('combobox')).toBeTruthy();
-    expect(screen.queryByLabelText('Font Import URL')).toBeNull();
-  });
-
-  it('shows the bare name selected when the theme stores the default font stack', () => {
-    renderEditor(makeDraft({fontFamily: "'Inter Variable', sans-serif"}));
-    expect(screen.getByRole<HTMLInputElement>('combobox').value).toBe('Inter Variable');
-  });
-
-  it('starts in import mode showing the configured import URL', () => {
-    const draft = makeDraft({
-      fontFamily: 'Poppins',
-      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
-    });
-    renderEditor(draft);
-    const urlField = screen.getByLabelText<HTMLInputElement>('Font Import URL');
-    expect(urlField.value).toBe('https://fonts.googleapis.com/css2?family=Poppins');
-  });
-
-  it('reveals the import fields when switching to import mode', () => {
-    renderEditor(makeDraft());
-    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
-    expect(screen.getByLabelText('Font Import URL')).toBeTruthy();
-    expect(screen.getAllByLabelText('Font Family').length).toBeGreaterThan(0);
-  });
-
-  it('clears the inherited family when switching to import so the field shows its placeholder', () => {
-    const draft = makeDraft({fontFamily: "'Inter Variable', sans-serif"});
-    renderEditor(draft);
-    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
-    expect(typographyOf(draft).fontFamily).toBe('');
-    expect(screen.getByLabelText<HTMLInputElement>('Font Family').value).toBe('');
-  });
-
-  it('typing an import URL writes typography.font.importURL', () => {
-    const draft = makeDraft();
-    renderEditor(draft);
-    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
-    fireEvent.change(screen.getByLabelText('Font Import URL'), {
-      target: {value: 'https://fonts.bunny.net/css?family=inter'},
-    });
-    expect(typographyOf(draft).font?.importURL).toBe('https://fonts.bunny.net/css?family=inter');
-  });
-
-  it('clears the applied import URL when switching to a web-safe font', () => {
-    const draft = makeDraft({
-      fontFamily: 'Poppins',
-      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
-    });
-    renderEditor(draft);
-    fireEvent.click(screen.getByRole('button', {name: 'Use a web-safe font'}));
-    expect(typographyOf(draft).font).toBeUndefined();
-  });
-
-  it('remembers the import URL and family when toggling to web-safe and back', () => {
-    const {getDraft} = renderStatefulEditor(
-      makeDraft({fontFamily: 'Poppins', font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'}}),
-    );
-    // Toggling to web-safe drops the import from the applied theme, but remembers it.
-    fireEvent.click(screen.getByRole('button', {name: 'Use a web-safe font'}));
-    expect(typographyOf(getDraft()).font).toBeUndefined();
-    // Toggling back to import restores the remembered URL and family.
-    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
-    expect(typographyOf(getDraft()).font?.importURL).toBe('https://fonts.googleapis.com/css2?family=Poppins');
-    expect(typographyOf(getDraft()).fontFamily).toBe('Poppins');
-  });
-
-  it('promotes the toggle to import mode when a draft change restores an import URL (e.g. Revert)', () => {
-    const webSafeDraft = makeDraft({fontFamily: 'Arial'});
-    const {rerender} = render(
-      <OxygenUIThemeProvider>
-        <TypographyBuilderContent draft={webSafeDraft} onUpdate={vi.fn()} />
-      </OxygenUIThemeProvider>,
-    );
-    expect(screen.queryByLabelText('Font Import URL')).toBeNull();
-
-    // A Revert replaces the draft in place with one that carries an import URL again.
-    const revertedDraft = makeDraft({
-      fontFamily: 'Poppins',
-      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
-    });
-    rerender(
-      <OxygenUIThemeProvider>
-        <TypographyBuilderContent draft={revertedDraft} onUpdate={vi.fn()} />
-      </OxygenUIThemeProvider>,
-    );
-    const urlField = screen.getByLabelText<HTMLInputElement>('Font Import URL');
-    expect(urlField.value).toBe('https://fonts.googleapis.com/css2?family=Poppins');
-  });
-
-  it('demotes the toggle back to web-safe when a draft change restores a plain family with no import URL (e.g. Revert)', () => {
-    const importDraft = makeDraft({
-      fontFamily: 'Poppins',
-      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
-    });
-    const {rerender} = render(
-      <OxygenUIThemeProvider>
-        <TypographyBuilderContent draft={importDraft} onUpdate={vi.fn()} />
-      </OxygenUIThemeProvider>,
-    );
-    expect(screen.getByLabelText('Font Import URL')).toBeTruthy();
-
-    // A Revert replaces the draft in place with the original web-safe theme (no import URL).
-    const revertedDraft = makeDraft({fontFamily: 'Arial'});
-    rerender(
-      <OxygenUIThemeProvider>
-        <TypographyBuilderContent draft={revertedDraft} onUpdate={vi.fn()} />
-      </OxygenUIThemeProvider>,
-    );
-    expect(screen.queryByLabelText('Font Import URL')).toBeNull();
-    expect(screen.getByRole('combobox')).toBeTruthy();
-  });
-
-  it('demotes the toggle back to web-safe when a draft change restores an empty family with no import URL (e.g. Revert)', () => {
-    const importDraft = makeDraft({
-      fontFamily: 'Poppins',
-      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
-    });
-    const {rerender} = render(
-      <OxygenUIThemeProvider>
-        <TypographyBuilderContent draft={importDraft} onUpdate={vi.fn()} />
-      </OxygenUIThemeProvider>,
-    );
-    expect(screen.getByLabelText('Font Import URL')).toBeTruthy();
-
-    // A Revert can restore a draft with neither a family nor an import URL set.
-    const revertedDraft = makeDraft();
-    rerender(
-      <OxygenUIThemeProvider>
-        <TypographyBuilderContent draft={revertedDraft} onUpdate={vi.fn()} />
-      </OxygenUIThemeProvider>,
-    );
-    expect(screen.queryByLabelText('Font Import URL')).toBeNull();
-    expect(screen.getByRole('combobox')).toBeTruthy();
-  });
-
-  it('falls the live preview back to the product default (not a generic serif) for a partial font name', () => {
-    renderStatefulEditor(makeDraft());
-    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
-    fireEvent.change(screen.getByLabelText('Font Family'), {target: {value: 'P'}});
-
-    // sx compiles to a generated CSS class via emotion, so assert against the injected stylesheet.
-    screen.getByText('The quick brown fox jumps over the lazy dog.');
-    const styles = Array.from(document.querySelectorAll('style'))
-      .map((style) => style.textContent)
-      .join('\n');
-    expect(styles).toContain('font-family:P,');
-    expect(styles).toMatch(/Inter Variable/);
-  });
-
-  it('loads the imported font stylesheet into the main document, not just the GatePreview iframe', () => {
-    renderEditor(
-      makeDraft({fontFamily: 'Poppins', font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'}}),
-    );
-    const link = document.querySelector(
-      'link[rel="stylesheet"][href="https://fonts.googleapis.com/css2?family=Poppins"]',
-    );
-    expect(link).not.toBeNull();
-  });
-
-  it('clearing the import URL also clears the family, reverting the whole selection to default', () => {
-    const draft = makeDraft({
-      fontFamily: 'Poppins',
-      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
-    });
-    renderEditor(draft);
-    fireEvent.change(screen.getByLabelText('Font Import URL'), {target: {value: ''}});
-    expect(typographyOf(draft).fontFamily).toBe('');
-    expect(typographyOf(draft).font).toBeUndefined();
-  });
-});
diff --git a/frontend/apps/console/src/features/flows/components/resource-property-panel/PresentationDefinitionSelect.tsx b/frontend/apps/console/src/features/flows/components/resource-property-panel/PresentationDefinitionSelect.tsx
index d43b8cac75..592de93f22 100644
--- a/frontend/apps/console/src/features/flows/components/resource-property-panel/PresentationDefinitionSelect.tsx
+++ b/frontend/apps/console/src/features/flows/components/resource-property-panel/PresentationDefinitionSelect.tsx
@@ -1,7 +1,7 @@
 // Copyright 2026 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import {useGetVerifiablePresentations} from '@thunderid/configure-verifiable-presentations';
+import {useGetVerifiablePresentations} from '@thunderid/configure-verifiable-credentials';
 import {FormControl, FormLabel, MenuItem, TextField} from '@wso2/oxygen-ui';
 import type {ChangeEvent, ReactElement} from 'react';
 import {useTranslation} from 'react-i18next';
diff --git a/frontend/apps/console/src/features/flows/components/visual-flow/SimulationStepPreview.tsx b/frontend/apps/console/src/features/flows/components/visual-flow/SimulationStepPreview.tsx
index 95bfb92583..8db39c8aa3 100644
--- a/frontend/apps/console/src/features/flows/components/visual-flow/SimulationStepPreview.tsx
+++ b/frontend/apps/console/src/features/flows/components/visual-flow/SimulationStepPreview.tsx
@@ -4,6 +4,7 @@
 import {BuilderStaticPanel} from '@thunderid/components';
 import {useGetApplication, useGetApplications} from '@thunderid/configure-applications';
 import type {BasicApplication} from '@thunderid/configure-applications';
+import {GatePreview} from '@thunderid/configure-design';
 import {DefaultTheme, DesignResolveType, useGetDesignResolve, type Theme} from '@thunderid/design';
 import {useTemplateLiteralResolver} from '@thunderid/hooks';
 import type {EmbeddedFlowComponent} from '@thunderid/react';
@@ -58,7 +59,6 @@ import {
   type PreviewComponent,
 } from '../../utils/gatePreviewTransforms';
 import type {SimulationOption} from '../../utils/getSimulationOptions';
-import GatePreview from '@/components/GatePreview/GatePreview';
 
 /**
  * Props interface of {@link SimulationStepPreview}
diff --git a/frontend/apps/console/src/features/flows/components/visual-flow/__tests__/SimulationStepPreview.test.tsx b/frontend/apps/console/src/features/flows/components/visual-flow/__tests__/SimulationStepPreview.test.tsx
index 369aae2683..9af728f0b0 100644
--- a/frontend/apps/console/src/features/flows/components/visual-flow/__tests__/SimulationStepPreview.test.tsx
+++ b/frontend/apps/console/src/features/flows/components/visual-flow/__tests__/SimulationStepPreview.test.tsx
@@ -69,28 +69,17 @@ vi.mock('@thunderid/design', () => ({
   useGetDesignResolve: ({id}: {id: string}) => (id ? mockDesignResolve : {data: undefined, isError: false}),
 }));
 
-vi.mock('@thunderid/configure-applications', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('@thunderid/configure-applications')>()),
-  useGetApplications: () => ({
-    data: {applications: mockApplications},
-  }),
-  useGetApplication: (applicationId: string) => ({
-    data: applicationId
-      ? {id: applicationId, name: 'My App', themeId: 'theme-1', logoUrl: 'https://myapp.example/logo.png'}
-      : undefined,
-  }),
-}));
-
-vi.mock('@/components/GatePreview/GatePreview', () => ({
-  default: ({
-    mock,
-    onSubmit,
-    onComponentHover,
-    toolbarStart,
-    toolbarEnd,
-    colorScheme,
-    theme,
-    additionalData,
+vi.mock('@thunderid/configure-design', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@thunderid/configure-design')>()),
+  GatePreview: ({
+    mock = undefined,
+    onSubmit = undefined,
+    onComponentHover = undefined,
+    toolbarStart = undefined,
+    toolbarEnd = undefined,
+    colorScheme = undefined,
+    theme = undefined,
+    additionalData = undefined,
   }: {
     mock?: {id?: string}[];
     onSubmit?: (component: {id?: string; components?: {id?: string}[]}) => void;
@@ -130,6 +119,18 @@ vi.mock('@/components/GatePreview/GatePreview', () => ({
   ),
 }));
 
+vi.mock('@thunderid/configure-applications', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@thunderid/configure-applications')>()),
+  useGetApplications: () => ({
+    data: {applications: mockApplications},
+  }),
+  useGetApplication: (applicationId: string) => ({
+    data: applicationId
+      ? {id: applicationId, name: 'My App', themeId: 'theme-1', logoUrl: 'https://myapp.example/logo.png'}
+      : undefined,
+  }),
+}));
+
 const createSimulation = (overrides: Partial<FlowSimulation> = {}): FlowSimulation => ({
   isSimulating: true,
   startAt: vi.fn(),
diff --git a/frontend/apps/console/src/features/flows/utils/resolveUpstreamOtpLength.ts b/frontend/apps/console/src/features/flows/utils/resolveUpstreamOtpLength.ts
index 03ca0cbd6c..9608f2a73a 100644
--- a/frontend/apps/console/src/features/flows/utils/resolveUpstreamOtpLength.ts
+++ b/frontend/apps/console/src/features/flows/utils/resolveUpstreamOtpLength.ts
@@ -38,7 +38,7 @@ const isOtpGenerateNode = (node: Node): boolean => {
  * @returns The configured length, or undefined.
  */
 const readOtpLength = (node: Node): number | undefined => {
-  const length = Number((node.data as StepData | undefined)?.properties?.['otpLength']);
+  const length = Number((node.data as StepData | undefined)?.properties?.otpLength);
 
   if (!Number.isInteger(length) || length < MIN_OTP_LENGTH || length > MAX_OTP_LENGTH) {
     return undefined;
diff --git a/frontend/apps/console/src/features/roles/components/edit-role/assignments-settings/AddAssignmentDialog.tsx b/frontend/apps/console/src/features/roles/components/edit-role/assignments-settings/AddAssignmentDialog.tsx
index 428acb31f5..9354f70913 100644
--- a/frontend/apps/console/src/features/roles/components/edit-role/assignments-settings/AddAssignmentDialog.tsx
+++ b/frontend/apps/console/src/features/roles/components/edit-role/assignments-settings/AddAssignmentDialog.tsx
@@ -3,6 +3,8 @@
 
 import {useGetApplications} from '@thunderid/configure-applications';
 import type {BasicApplication} from '@thunderid/configure-applications';
+import {useGetGroups} from '@thunderid/configure-groups';
+import type {GroupBasic} from '@thunderid/configure-groups';
 import {useGetUsers} from '@thunderid/configure-users';
 import {useDataGridLocaleText} from '@thunderid/hooks';
 import type {User} from '@thunderid/types';
@@ -28,8 +30,6 @@ import {useState, useMemo, useCallback, type JSX, type SyntheticEvent} from 'rea
 import {useTranslation} from 'react-i18next';
 import useGetAgents from '../../../../agents/api/useGetAgents';
 import type {BasicAgent} from '../../../../agents/models/agent';
-import useGetGroups from '../../../../groups/api/useGetGroups';
-import type {GroupBasic} from '../../../../groups/models/group';
 import useGetRoleAssignments from '../../../api/useGetRoleAssignments';
 import type {RoleAssignment} from '../../../models/role';
 
diff --git a/frontend/apps/console/src/features/roles/components/edit-role/assignments-settings/__tests__/AddAssignmentDialog.test.tsx b/frontend/apps/console/src/features/roles/components/edit-role/assignments-settings/__tests__/AddAssignmentDialog.test.tsx
index 44021ca0fa..ee9c4442f4 100644
--- a/frontend/apps/console/src/features/roles/components/edit-role/assignments-settings/__tests__/AddAssignmentDialog.test.tsx
+++ b/frontend/apps/console/src/features/roles/components/edit-role/assignments-settings/__tests__/AddAssignmentDialog.test.tsx
@@ -7,7 +7,7 @@ import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import AddAssignmentDialog from '../AddAssignmentDialog';
 
 vi.mock('@thunderid/configure-users');
-vi.mock('../../../../../groups/api/useGetGroups');
+vi.mock('@thunderid/configure-groups');
 vi.mock('@thunderid/configure-applications', async (importOriginal) => ({
   ...(await importOriginal<typeof import('@thunderid/configure-applications')>()),
   useGetApplications: vi.fn(),
@@ -93,7 +93,7 @@ vi.mock('@wso2/oxygen-ui', async (importOriginal) => {
 });
 
 const {useGetUsers} = await import('@thunderid/configure-users');
-const {default: useGetGroups} = await import('../../../../../groups/api/useGetGroups');
+const {useGetGroups} = await import('@thunderid/configure-groups');
 const {useGetApplications} = await import('@thunderid/configure-applications');
 const {default: useGetRoleAssignments} = await import('../../../../api/useGetRoleAssignments');
 const {useDataGridLocaleText} = await import('@thunderid/hooks');
diff --git a/frontend/apps/console/src/features/welcome/components/WayfinderConfigImport.tsx b/frontend/apps/console/src/features/welcome/components/WayfinderConfigImport.tsx
index ce06a52699..f38d4af0d6 100644
--- a/frontend/apps/console/src/features/welcome/components/WayfinderConfigImport.tsx
+++ b/frontend/apps/console/src/features/welcome/components/WayfinderConfigImport.tsx
@@ -1,14 +1,13 @@
 // Copyright 2026 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
+import {useImportConfiguration, type ImportResponse} from '@thunderid/configure-import-export';
 import {useConfig} from '@thunderid/contexts';
 import {Box, Button, CircularProgress, Stack, Typography} from '@wso2/oxygen-ui';
 import {CheckCircle, Database, RefreshCw, XCircle} from '@wso2/oxygen-ui-icons-react';
 import type {JSX} from 'react';
 import {useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import useImportConfiguration from '../../import-export/api/useImportConfiguration';
-import type {ImportResponse} from '../../import-export/models/import-configuration';
 import {useGetSampleBundle} from '../api/useGetSampleBundles';
 import getWayfinderConfiguredStorageKey from '../utils/getWayfinderConfiguredStorageKey';
 
diff --git a/frontend/apps/console/src/features/welcome/components/__tests__/WayfinderConfigImport.test.tsx b/frontend/apps/console/src/features/welcome/components/__tests__/WayfinderConfigImport.test.tsx
index 226cf6ccfa..bf1439729f 100644
--- a/frontend/apps/console/src/features/welcome/components/__tests__/WayfinderConfigImport.test.tsx
+++ b/frontend/apps/console/src/features/welcome/components/__tests__/WayfinderConfigImport.test.tsx
@@ -27,8 +27,9 @@ const {mockUseImportConfiguration, mockMutateAsync, mockUseGetSampleBundle} = vi
   mockUseGetSampleBundle: vi.fn(),
 }));
 
-vi.mock('../../../import-export/api/useImportConfiguration', () => ({
-  default: mockUseImportConfiguration,
+vi.mock('@thunderid/configure-import-export', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@thunderid/configure-import-export')>()),
+  useImportConfiguration: mockUseImportConfiguration,
 }));
 
 vi.mock('../../api/useGetSampleBundles', () => ({
diff --git a/frontend/packages/configure-agent-types/src/components/edit-agent-type/schema-settings/__tests__/EditSchemaSettings.test.tsx b/frontend/packages/configure-agent-types/src/components/edit-agent-type/schema-settings/__tests__/EditSchemaSettings.test.tsx
index 669b3e8345..5a65ae544a 100644
--- a/frontend/packages/configure-agent-types/src/components/edit-agent-type/schema-settings/__tests__/EditSchemaSettings.test.tsx
+++ b/frontend/packages/configure-agent-types/src/components/edit-agent-type/schema-settings/__tests__/EditSchemaSettings.test.tsx
@@ -312,7 +312,7 @@ describe('EditSchemaSettings (agent-type)', () => {
 
     render(<EditSchemaSettings {...props} />);
 
-    const nameInput = screen.getByPlaceholderText(/e\.g\., email, age, address/i);
+    const nameInput = screen.getByPlaceholderText(/e\.g\., model, environment, team/i);
     await user.type(nameInput, 'X');
 
     expect(mockOnPropertiesChange).toHaveBeenCalledWith(
@@ -330,7 +330,7 @@ describe('EditSchemaSettings (agent-type)', () => {
 
     render(<EditSchemaSettings {...props} />);
 
-    const requiredCheckbox = screen.getByRole('checkbox', {name: /this field must be provided/i});
+    const requiredCheckbox = screen.getByRole('checkbox', {name: /agents must provide a value for this field/i});
     await user.click(requiredCheckbox);
 
     expect(mockOnPropertiesChange).toHaveBeenCalledWith(
@@ -348,7 +348,7 @@ describe('EditSchemaSettings (agent-type)', () => {
 
     render(<EditSchemaSettings {...props} />);
 
-    const uniqueCheckbox = screen.getByRole('checkbox', {name: /each user must have a distinct value/i});
+    const uniqueCheckbox = screen.getByRole('checkbox', {name: /each agent must have a distinct value/i});
     await user.click(uniqueCheckbox);
 
     expect(mockOnPropertiesChange).toHaveBeenCalledWith(
diff --git a/frontend/packages/configure-verifiable-presentations/.editorconfig b/frontend/packages/configure-design/.editorconfig
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/.editorconfig
rename to frontend/packages/configure-design/.editorconfig
diff --git a/frontend/packages/configure-verifiable-presentations/.gitignore b/frontend/packages/configure-design/.gitignore
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/.gitignore
rename to frontend/packages/configure-design/.gitignore
diff --git a/frontend/packages/configure-verifiable-presentations/.prettierignore b/frontend/packages/configure-design/.prettierignore
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/.prettierignore
rename to frontend/packages/configure-design/.prettierignore
diff --git a/frontend/packages/configure-verifiable-presentations/eslint.config.js b/frontend/packages/configure-design/eslint.config.js
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/eslint.config.js
rename to frontend/packages/configure-design/eslint.config.js
diff --git a/frontend/packages/configure-design/package.json b/frontend/packages/configure-design/package.json
new file mode 100644
index 0000000000..925a033081
--- /dev/null
+++ b/frontend/packages/configure-design/package.json
@@ -0,0 +1,117 @@
+{
+  "private": true,
+  "name": "@thunderid/configure-design",
+  "version": "0.0.0",
+  "description": "Design (theme/layout builder) feature for ⚡️ ThunderID applications",
+  "keywords": [
+    "thunderid",
+    "configure",
+    "design",
+    "react",
+    "feature"
+  ],
+  "homepage": "https://github.com/thunder-id/thunderid/tree/main/frontend/packages/configure-design#readme",
+  "bugs": {
+    "url": "https://github.com/thunder-id/thunderid/issues"
+  },
+  "author": "The ThunderID Authors",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thunder-id/thunderid",
+    "directory": "frontend/packages/configure-design"
+  },
+  "scripts": {
+    "build": "pnpm clean:dist && rolldown -c rolldown.config.js && tsc -p tsconfig.lib.json --emitDeclarationOnly --outDir dist",
+    "clean": "pnpm clean:node_modules && pnpm clean:dist",
+    "clean:dist": "rimraf dist",
+    "clean:node_modules": "rimraf node_modules",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run --passWithNoTests",
+    "test:coverage": "vitest run --coverage --passWithNoTests",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.lib.json"
+  },
+  "devDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@monaco-editor/react": "catalog:",
+    "@playwright/test": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@thunderid/components": "workspace:^",
+    "@thunderid/configure-connections": "workspace:^",
+    "@thunderid/contexts": "workspace:^",
+    "@thunderid/design": "workspace:^",
+    "@thunderid/eslint-plugin": "workspace:^",
+    "@thunderid/hooks": "workspace:^",
+    "@thunderid/logger": "workspace:^",
+    "@thunderid/prettier-config": "workspace:^",
+    "@thunderid/react": "catalog:",
+    "@thunderid/test-utils": "workspace:^",
+    "@thunderid/utils": "workspace:^",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitest/browser-playwright": "catalog:",
+    "@vitest/coverage-istanbul": "catalog:",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
+    "eslint": "catalog:",
+    "prettier": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-i18next": "catalog:",
+    "react-router": "catalog:",
+    "rimraf": "catalog:",
+    "rolldown": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vitest": "catalog:"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@monaco-editor/react": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@thunderid/components": "workspace:^",
+    "@thunderid/configure-connections": "workspace:^",
+    "@thunderid/contexts": "workspace:^",
+    "@thunderid/design": "workspace:^",
+    "@thunderid/hooks": "workspace:^",
+    "@thunderid/logger": "workspace:^",
+    "@thunderid/react": "catalog:",
+    "@thunderid/utils": "workspace:^",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-i18next": "catalog:",
+    "react-router": "catalog:"
+  }
+}
diff --git a/frontend/packages/configure-verifiable-presentations/prettier.config.js b/frontend/packages/configure-design/prettier.config.js
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/prettier.config.js
rename to frontend/packages/configure-design/prettier.config.js
diff --git a/frontend/packages/configure-verifiable-presentations/rolldown.config.js b/frontend/packages/configure-design/rolldown.config.js
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/rolldown.config.js
rename to frontend/packages/configure-design/rolldown.config.js
diff --git a/frontend/apps/console/src/components/GatePreview/ColorSchemeSync.tsx b/frontend/packages/configure-design/src/GatePreview/ColorSchemeSync.tsx
similarity index 100%
rename from frontend/apps/console/src/components/GatePreview/ColorSchemeSync.tsx
rename to frontend/packages/configure-design/src/GatePreview/ColorSchemeSync.tsx
diff --git a/frontend/apps/console/src/components/GatePreview/GatePreview.tsx b/frontend/packages/configure-design/src/GatePreview/GatePreview.tsx
similarity index 98%
rename from frontend/apps/console/src/components/GatePreview/GatePreview.tsx
rename to frontend/packages/configure-design/src/GatePreview/GatePreview.tsx
index ef3ec6f906..99f67abe72 100644
--- a/frontend/apps/console/src/components/GatePreview/GatePreview.tsx
+++ b/frontend/packages/configure-design/src/GatePreview/GatePreview.tsx
@@ -9,9 +9,9 @@ import {createPortal} from 'react-dom';
 import {useTranslation} from 'react-i18next';
 import IframeContent from './IframeContent';
 import buildPreviewMock from './mocks/buildPreviewMock';
-import PreviewToolbar from '../../features/design/components/PreviewToolbar';
-import {VIEWPORT_WIDTHS, VIEWPORT_HEIGHTS} from '../../features/design/components/viewportConstants';
-import ColorSchemeOptions from '../../features/design/constants/ColorSchemeOptions';
+import PreviewToolbar from '../components/PreviewToolbar';
+import {VIEWPORT_WIDTHS, VIEWPORT_HEIGHTS} from '../components/viewportConstants';
+import ColorSchemeOptions from '../constants/ColorSchemeOptions';
 
 // ── Constants ────────────────────────────────────────────────────────────────
 
diff --git a/frontend/apps/console/src/components/GatePreview/IframeContent.tsx b/frontend/packages/configure-design/src/GatePreview/IframeContent.tsx
similarity index 98%
rename from frontend/apps/console/src/components/GatePreview/IframeContent.tsx
rename to frontend/packages/configure-design/src/GatePreview/IframeContent.tsx
index 93e1ff0665..f07904d9f1 100644
--- a/frontend/apps/console/src/components/GatePreview/IframeContent.tsx
+++ b/frontend/packages/configure-design/src/GatePreview/IframeContent.tsx
@@ -22,7 +22,7 @@ import {Box, ParticleBackground, useTheme} from '@wso2/oxygen-ui';
 import {useEffect, useMemo, type JSX} from 'react';
 import PreviewThemeProvider from './PreviewThemeProvider';
 import {resolveAnchorActionRef, resolveHoverTarget} from './richTextClickResolution';
-import ElementInspector from '../../features/design/components/layouts/ElementInspector';
+import ElementInspector from '../components/layouts/ElementInspector';
 
 /**
  * MUI's extendTheme only accepts 'light' or 'dark' for defaultColorScheme.
@@ -30,9 +30,9 @@ import ElementInspector from '../../features/design/components/layouts/ElementIn
  */
 function sanitizeThemeForMui(theme: Theme): Theme {
   const raw = theme as unknown as Record<string, unknown>;
-  if (raw.defaultColorScheme === 'system') {
+  if (raw['defaultColorScheme'] === 'system') {
     const copy = {...raw};
-    delete copy.defaultColorScheme;
+    delete copy['defaultColorScheme'];
     return copy as unknown as Theme;
   }
   return theme;
diff --git a/frontend/apps/console/src/components/GatePreview/PreviewThemeProvider.tsx b/frontend/packages/configure-design/src/GatePreview/PreviewThemeProvider.tsx
similarity index 100%
rename from frontend/apps/console/src/components/GatePreview/PreviewThemeProvider.tsx
rename to frontend/packages/configure-design/src/GatePreview/PreviewThemeProvider.tsx
diff --git a/frontend/apps/console/src/components/GatePreview/__tests__/GatePreview.test.tsx b/frontend/packages/configure-design/src/GatePreview/__tests__/GatePreview.test.tsx
similarity index 84%
rename from frontend/apps/console/src/components/GatePreview/__tests__/GatePreview.test.tsx
rename to frontend/packages/configure-design/src/GatePreview/__tests__/GatePreview.test.tsx
index c251e2d312..8738a00dc9 100644
--- a/frontend/apps/console/src/components/GatePreview/__tests__/GatePreview.test.tsx
+++ b/frontend/packages/configure-design/src/GatePreview/__tests__/GatePreview.test.tsx
@@ -8,18 +8,24 @@ import {OxygenUIThemeProvider} from '@wso2/oxygen-ui';
 import {describe, it, expect, vi, afterEach} from 'vitest';
 import GatePreview from '../GatePreview';
 
-// Mock shared-design to stub DesignProvider (which internally needs ConfigProvider)
-vi.mock('@thunderid/design', () => ({
-  DesignProvider: ({children}: {children: React.ReactNode}) => children,
-  useDesign: () => ({isDesignEnabled: false, theme: undefined}),
-  FlowComponentRenderer: () => <div data-testid="flow-component" />,
-  AuthPageLayout: ({children}: {children: React.ReactNode}) => <div data-testid="auth-page-layout">{children}</div>,
-  AuthCardLayout: ({children}: {children: React.ReactNode}) => <div data-testid="auth-card-layout">{children}</div>,
-  FontImporter: () => null,
-  getFontImportURL: () => undefined,
-  AcrylicOrangeTheme: {},
-  getCspNonce: () => document.querySelector('meta[property="csp-nonce"]')?.getAttribute('content') ?? undefined,
-}));
+// Mock shared-design to stub DesignProvider (which internally needs ConfigProvider). Merges over
+// the real module (rather than fully replacing it) so other exports real code in this package's
+// module graph relies on (e.g. useGetLayouts, pulled in via DesignPage/LayoutBuilderPage) stay available.
+vi.mock('@thunderid/design', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@thunderid/design')>();
+  return {
+    ...actual,
+    DesignProvider: ({children}: {children: React.ReactNode}) => children,
+    useDesign: () => ({isDesignEnabled: false, theme: undefined}),
+    FlowComponentRenderer: () => <div data-testid="flow-component" />,
+    AuthPageLayout: ({children}: {children: React.ReactNode}) => <div data-testid="auth-page-layout">{children}</div>,
+    AuthCardLayout: ({children}: {children: React.ReactNode}) => <div data-testid="auth-card-layout">{children}</div>,
+    FontImporter: () => null,
+    getFontImportURL: () => undefined,
+    AcrylicOrangeTheme: {},
+    getCspNonce: () => document.querySelector('meta[property="csp-nonce"]')?.getAttribute('content') ?? undefined,
+  };
+});
 
 vi.mock('@emotion/cache', async (importActual) => {
   const actual = await importActual<typeof import('@emotion/cache')>();
diff --git a/frontend/packages/configure-design/src/GatePreview/__tests__/IframeContent.test.tsx b/frontend/packages/configure-design/src/GatePreview/__tests__/IframeContent.test.tsx
new file mode 100644
index 0000000000..bf44ce50d4
--- /dev/null
+++ b/frontend/packages/configure-design/src/GatePreview/__tests__/IframeContent.test.tsx
@@ -0,0 +1,291 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {render, cleanup} from '@testing-library/react';
+import type {Stylesheet, Theme} from '@thunderid/design';
+import {EmbeddedFlowComponentType, EmbeddedFlowEventType, type EmbeddedFlowComponent} from '@thunderid/react';
+import {OxygenUIThemeProvider} from '@wso2/oxygen-ui';
+import {afterEach, describe, it, expect, vi} from 'vitest';
+import IframeContent from '../IframeContent';
+
+// Mock shared-design to stub DesignProvider (which internally needs ConfigProvider). Merges over
+// the real module so other real exports this file's module graph relies on stay available.
+vi.mock('@thunderid/design', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@thunderid/design')>();
+  return {
+    ...actual,
+    DesignProvider: ({children}: {children: React.ReactNode}) => children,
+    useDesign: () => ({isDesignEnabled: false, theme: undefined}),
+    // Renders a rich-text link (data-action-ref) and a button (id) so hover/click
+    // resolution in IframeContent has real DOM targets to resolve against.
+    FlowComponentRenderer: ({component, onSubmit}: {component: {id?: string}; onSubmit: () => void}) => (
+      <div>
+        <a href="https://example.com" data-action-ref="submit-action" data-testid={`link-${component.id ?? 'x'}`}>
+          Rich text link
+        </a>
+        <button type="button" id={`btn-${component.id ?? 'x'}`} onClick={() => onSubmit()}>
+          Action button
+        </button>
+      </div>
+    ),
+    AuthPageLayout: ({children}: {children: React.ReactNode}) => <div data-testid="auth-page-layout">{children}</div>,
+    AuthCardLayout: ({children}: {children: React.ReactNode}) => <div data-testid="auth-card-layout">{children}</div>,
+    FontImporter: () => null,
+    getFontImportURL: () => undefined,
+    getCspNonce: () => document.querySelector('meta[property="csp-nonce"]')?.getAttribute('content') ?? undefined,
+  };
+});
+
+vi.mock('@emotion/cache', async (importActual) => {
+  const actual = await importActual<typeof import('@emotion/cache')>();
+  return {
+    ...actual,
+    default: (options: Parameters<typeof actual.default>[0]) => actual.default({...options, container: document.head}),
+  };
+});
+
+vi.mock('@emotion/react', () => ({
+  CacheProvider: ({children}: {children: React.ReactNode}) => children,
+}));
+
+const mockTheme = {
+  colorSchemes: {
+    light: {palette: {background: {default: '#ffffff'}}},
+    dark: {palette: {background: {default: '#121212'}}},
+  },
+} as unknown as Theme;
+
+// `EmbeddedFlowComponent` resolves to an error type here because `@thunderid/react` has no `types`
+// condition in its `exports` map, and this package's `tsconfig.spec.json` forces `module: commonjs`
+// against a `moduleResolution: bundler` base, so the checker falls back to the untyped CJS entry point.
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const mockComponent: EmbeddedFlowComponent = {id: 'comp-1'} as unknown as EmbeddedFlowComponent;
+
+function renderIframeContent(props: Partial<Parameters<typeof IframeContent>[0]> = {}) {
+  const iframe = document.createElement('iframe');
+  document.body.appendChild(iframe);
+  const iframeDoc = iframe.contentDocument!;
+  iframeDoc.open();
+  iframeDoc.write('<!DOCTYPE html><html><head></head><body><div id="root"></div></body></html>');
+  iframeDoc.close();
+
+  // IframeContent's own tree renders into the iframe document's #root (mirroring the portal
+  // GatePreview normally sets up), so DOM queries like getElementById run against iframeDoc.
+  const utils = render(
+    <OxygenUIThemeProvider>
+      <IframeContent
+        iframeDoc={iframeDoc}
+        colorScheme="light"
+        theme={mockTheme}
+        stylesheets={[]}
+        pageBackground={undefined}
+        mock={[mockComponent]}
+        inspectorEnabled={false}
+        {...props}
+      />
+    </OxygenUIThemeProvider>,
+    {container: iframeDoc.getElementById('root')!, baseElement: iframeDoc.body},
+  );
+
+  return {...utils, iframeDoc, cleanupIframe: () => iframe.remove()};
+}
+
+afterEach(() => {
+  cleanup();
+  document.querySelectorAll('iframe').forEach((iframe) => iframe.remove());
+});
+
+describe('IframeContent', () => {
+  describe('sanitizeThemeForMui', () => {
+    it('strips defaultColorScheme "system" before it reaches downstream MUI theming', () => {
+      const themeWithSystemScheme = {
+        defaultColorScheme: 'system',
+        colorSchemes: {
+          light: {palette: {background: {default: '#ffffff'}}},
+          dark: {palette: {background: {default: '#121212'}}},
+        },
+      } as unknown as Theme;
+
+      // Rendering must not throw despite MUI's extendTheme rejecting 'system'.
+      expect(() => renderIframeContent({theme: themeWithSystemScheme})).not.toThrow();
+    });
+
+    it('renders normally when defaultColorScheme is a plain light/dark value', () => {
+      const themeWithLightScheme = {
+        defaultColorScheme: 'light',
+        colorSchemes: {
+          light: {palette: {background: {default: '#ffffff'}}},
+          dark: {palette: {background: {default: '#121212'}}},
+        },
+      } as unknown as Theme;
+
+      const {iframeDoc} = renderIframeContent({theme: themeWithLightScheme});
+      expect(iframeDoc.getElementById('root')?.children.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('stylesheet injection', () => {
+    it('injects an inline stylesheet as a <style> tag in the iframe head', () => {
+      const sheets: Stylesheet[] = [{id: 'sheet-1', type: 'inline', content: 'body{color:red}'}];
+      const {iframeDoc} = renderIframeContent({stylesheets: sheets});
+
+      const style = iframeDoc.getElementById('gate-preview-sheet-1');
+      expect(style?.tagName).toBe('STYLE');
+      expect(style?.textContent).toBe('body{color:red}');
+    });
+
+    it('tags the injected inline stylesheet with the nonce from the parent document', () => {
+      const meta = document.createElement('meta');
+      meta.setAttribute('property', 'csp-nonce');
+      meta.setAttribute('content', 'nonce-xyz');
+      document.head.appendChild(meta);
+
+      const sheets: Stylesheet[] = [{id: 'sheet-nonce', type: 'inline', content: 'body{color:blue}'}];
+      const {iframeDoc} = renderIframeContent({stylesheets: sheets});
+
+      const style = iframeDoc.getElementById('gate-preview-sheet-nonce');
+      expect(style?.getAttribute('nonce')).toBe('nonce-xyz');
+      meta.remove();
+    });
+
+    it('skips a disabled stylesheet entirely', () => {
+      const sheets: Stylesheet[] = [
+        {id: 'sheet-disabled', type: 'inline', content: 'body{color:green}', disabled: true},
+      ];
+      const {iframeDoc} = renderIframeContent({stylesheets: sheets});
+
+      expect(iframeDoc.getElementById('gate-preview-sheet-disabled')).toBeNull();
+    });
+
+    it('injects a url stylesheet as a <link> tag when the href is https', () => {
+      const sheets: Stylesheet[] = [{id: 'sheet-url', type: 'url', href: 'https://fonts.example.com/style.css'}];
+      const {iframeDoc} = renderIframeContent({stylesheets: sheets});
+
+      const link = iframeDoc.getElementById('gate-preview-sheet-url');
+      expect(link?.tagName).toBe('LINK');
+      expect(link?.getAttribute('href')).toBe('https://fonts.example.com/style.css');
+    });
+
+    it('does not inject a url stylesheet whose protocol is not https', () => {
+      const sheets: Stylesheet[] = [{id: 'sheet-http', type: 'url', href: 'http://fonts.example.com/style.css'}];
+      const {iframeDoc} = renderIframeContent({stylesheets: sheets});
+
+      expect(iframeDoc.getElementById('gate-preview-sheet-http')).toBeNull();
+    });
+
+    it('does not inject and does not throw for a malformed url stylesheet href', () => {
+      const sheets: Stylesheet[] = [{id: 'sheet-bad', type: 'url', href: 'not a url'}];
+      expect(() => renderIframeContent({stylesheets: sheets})).not.toThrow();
+    });
+
+    it('removes a previously injected element when re-rendered with an empty stylesheet list', () => {
+      const sheets: Stylesheet[] = [{id: 'sheet-cleanup', type: 'inline', content: 'body{color:red}'}];
+      const {iframeDoc, rerender} = renderIframeContent({stylesheets: sheets});
+      expect(iframeDoc.getElementById('gate-preview-sheet-cleanup')).not.toBeNull();
+
+      rerender(
+        <OxygenUIThemeProvider>
+          <IframeContent
+            iframeDoc={iframeDoc}
+            colorScheme="light"
+            theme={mockTheme}
+            stylesheets={[]}
+            pageBackground={undefined}
+            mock={[mockComponent]}
+            inspectorEnabled={false}
+          />
+        </OxygenUIThemeProvider>,
+      );
+
+      expect(iframeDoc.getElementById('gate-preview-sheet-cleanup')).toBeNull();
+    });
+
+    it('removes injected elements on unmount', () => {
+      const sheets: Stylesheet[] = [{id: 'sheet-unmount', type: 'inline', content: 'body{color:red}'}];
+      const {iframeDoc, unmount} = renderIframeContent({stylesheets: sheets});
+      expect(iframeDoc.getElementById('gate-preview-sheet-unmount')).not.toBeNull();
+
+      unmount();
+
+      expect(iframeDoc.getElementById('gate-preview-sheet-unmount')).toBeNull();
+    });
+  });
+
+  describe('component hover wrapping', () => {
+    it('does not wrap components in a hover listener when onComponentHover is not provided', () => {
+      const {iframeDoc} = renderIframeContent();
+      const button = iframeDoc.getElementById('btn-comp-1');
+      expect(button).not.toBeNull();
+    });
+
+    it('invokes onComponentHover with the hovered button-backed component on mouseOver', () => {
+      const onComponentHover = vi.fn();
+      const {iframeDoc} = renderIframeContent({onComponentHover});
+
+      const button = iframeDoc.getElementById('btn-comp-1')!;
+      button.dispatchEvent(new Event('mouseover', {bubbles: true}));
+
+      expect(onComponentHover).toHaveBeenCalledWith(mockComponent);
+    });
+
+    it('invokes onComponentHover with null on mouseLeave', () => {
+      const onComponentHover = vi.fn();
+      const {iframeDoc} = renderIframeContent({onComponentHover});
+
+      const button = iframeDoc.getElementById('btn-comp-1')!;
+      // React derives mouseenter/mouseleave from bubbling mouseout events with a relatedTarget
+      // outside the wrapper, since mouseleave itself does not bubble.
+      button.dispatchEvent(new MouseEvent('mouseout', {bubbles: true, relatedTarget: iframeDoc.body}));
+
+      expect(onComponentHover).toHaveBeenCalledWith(null);
+    });
+
+    it('invokes onComponentHover on focus and clears it on blur', () => {
+      const onComponentHover = vi.fn();
+      const {iframeDoc} = renderIframeContent({onComponentHover});
+
+      const button = iframeDoc.getElementById('btn-comp-1') as HTMLButtonElement;
+      button.focus();
+      expect(onComponentHover).toHaveBeenCalledWith(mockComponent);
+
+      button.blur();
+      expect(onComponentHover).toHaveBeenLastCalledWith(null);
+    });
+
+    it('submits a trigger event for a wired rich-text link click and prevents default navigation', () => {
+      const onComponentHover = vi.fn();
+      const onSubmit = vi.fn();
+      const {iframeDoc} = renderIframeContent({onComponentHover, onSubmit});
+
+      const link = iframeDoc.querySelector<HTMLAnchorElement>('a[data-action-ref="submit-action"]')!;
+      const event = new MouseEvent('click', {bubbles: true, cancelable: true});
+      link.dispatchEvent(event);
+
+      // `EmbeddedFlowEventType`/`EmbeddedFlowComponentType` resolve to error types here because
+      // `@thunderid/react` has no `types` condition in its `exports` map, and this package's
+      // `tsconfig.spec.json` forces `module: commonjs` against a `moduleResolution: bundler` base,
+      // so the checker falls back to the untyped CJS entry point.
+      /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
+      expect(onSubmit).toHaveBeenCalledWith({
+        eventType: EmbeddedFlowEventType.Trigger,
+        id: 'submit-action',
+        ref: 'submit-action',
+        type: EmbeddedFlowComponentType.Action,
+      });
+      /* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('ignores a click that does not land on a wired rich-text link', () => {
+      const onComponentHover = vi.fn();
+      const onSubmit = vi.fn();
+      const {iframeDoc} = renderIframeContent({onComponentHover, onSubmit});
+
+      const button = iframeDoc.getElementById('btn-comp-1')!;
+      button.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true}));
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+      expect(onSubmit).not.toHaveBeenCalledWith(expect.objectContaining({eventType: EmbeddedFlowEventType.Trigger}));
+    });
+  });
+});
diff --git a/frontend/apps/console/src/components/GatePreview/__tests__/richTextClickResolution.test.ts b/frontend/packages/configure-design/src/GatePreview/__tests__/richTextClickResolution.test.ts
similarity index 89%
rename from frontend/apps/console/src/components/GatePreview/__tests__/richTextClickResolution.test.ts
rename to frontend/packages/configure-design/src/GatePreview/__tests__/richTextClickResolution.test.ts
index 55a38a2241..88dff618d4 100644
--- a/frontend/apps/console/src/components/GatePreview/__tests__/richTextClickResolution.test.ts
+++ b/frontend/packages/configure-design/src/GatePreview/__tests__/richTextClickResolution.test.ts
@@ -12,6 +12,10 @@ import {findComponentById, resolveAnchorActionRef, resolveHoverTarget} from '../
  * another realm (e.g. an iframe), which is the whole point of these helpers.
  */
 describe('findComponentById', () => {
+  // `EmbeddedFlowComponent` resolves to an error type here because `@thunderid/react` has no `types` condition in
+  // its `exports` map, and this package's `tsconfig.spec.json` forces `module: commonjs` against a
+  // `moduleResolution: bundler` base, so the checker falls back to the untyped CJS entry point.
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const tree: EmbeddedFlowComponent = {
     id: 'root',
     components: [
@@ -92,6 +96,7 @@ describe('resolveAnchorActionRef', () => {
 });
 
 describe('resolveHoverTarget', () => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- see the `no-unsafe-assignment` disable above.
   const component: EmbeddedFlowComponent = {
     id: 'block_001',
     components: [{id: 'action_001'} as EmbeddedFlowComponent],
diff --git a/frontend/apps/console/src/components/GatePreview/mocks/__tests__/buildMfaPreviewMock.test.ts b/frontend/packages/configure-design/src/GatePreview/mocks/__tests__/buildMfaPreviewMock.test.ts
similarity index 100%
rename from frontend/apps/console/src/components/GatePreview/mocks/__tests__/buildMfaPreviewMock.test.ts
rename to frontend/packages/configure-design/src/GatePreview/mocks/__tests__/buildMfaPreviewMock.test.ts
diff --git a/frontend/apps/console/src/components/GatePreview/mocks/__tests__/buildPreviewMock.test.ts b/frontend/packages/configure-design/src/GatePreview/mocks/__tests__/buildPreviewMock.test.ts
similarity index 100%
rename from frontend/apps/console/src/components/GatePreview/mocks/__tests__/buildPreviewMock.test.ts
rename to frontend/packages/configure-design/src/GatePreview/mocks/__tests__/buildPreviewMock.test.ts
diff --git a/frontend/apps/console/src/components/GatePreview/mocks/buildMfaPreviewMock.ts b/frontend/packages/configure-design/src/GatePreview/mocks/buildMfaPreviewMock.ts
similarity index 100%
rename from frontend/apps/console/src/components/GatePreview/mocks/buildMfaPreviewMock.ts
rename to frontend/packages/configure-design/src/GatePreview/mocks/buildMfaPreviewMock.ts
diff --git a/frontend/apps/console/src/components/GatePreview/mocks/buildPreviewMock.ts b/frontend/packages/configure-design/src/GatePreview/mocks/buildPreviewMock.ts
similarity index 100%
rename from frontend/apps/console/src/components/GatePreview/mocks/buildPreviewMock.ts
rename to frontend/packages/configure-design/src/GatePreview/mocks/buildPreviewMock.ts
diff --git a/frontend/apps/console/src/components/GatePreview/richTextClickResolution.ts b/frontend/packages/configure-design/src/GatePreview/richTextClickResolution.ts
similarity index 100%
rename from frontend/apps/console/src/components/GatePreview/richTextClickResolution.ts
rename to frontend/packages/configure-design/src/GatePreview/richTextClickResolution.ts
diff --git a/frontend/apps/console/src/features/design/components/LayoutConfigPanel.tsx b/frontend/packages/configure-design/src/components/LayoutConfigPanel.tsx
similarity index 99%
rename from frontend/apps/console/src/features/design/components/LayoutConfigPanel.tsx
rename to frontend/packages/configure-design/src/components/LayoutConfigPanel.tsx
index aec3c3e3a0..b548749ee9 100644
--- a/frontend/apps/console/src/features/design/components/LayoutConfigPanel.tsx
+++ b/frontend/packages/configure-design/src/components/LayoutConfigPanel.tsx
@@ -101,7 +101,7 @@ export default function LayoutConfigPanel({
         updatedLayout = {...updatedLayout, head: {...(updatedLayout.head ?? {}), stylesheets}};
       } else {
         const headCopy = {...((updatedLayout.head ?? {}) as Record<string, unknown>)};
-        delete headCopy.stylesheets;
+        delete headCopy['stylesheets'];
         updatedLayout = {...updatedLayout, head: headCopy};
       }
     }
diff --git a/frontend/apps/console/src/features/design/components/LayoutPreviewPanel.tsx b/frontend/packages/configure-design/src/components/LayoutPreviewPanel.tsx
similarity index 85%
rename from frontend/apps/console/src/features/design/components/LayoutPreviewPanel.tsx
rename to frontend/packages/configure-design/src/components/LayoutPreviewPanel.tsx
index aceb2d9ae9..6aa089294d 100644
--- a/frontend/apps/console/src/features/design/components/LayoutPreviewPanel.tsx
+++ b/frontend/packages/configure-design/src/components/LayoutPreviewPanel.tsx
@@ -251,19 +251,19 @@ function parseScreenSlots(
   t: (key: string, defaultValue: string) => string,
 ): ScreenSlot[] {
   const slots: ScreenSlot[] = [];
-  const slotsData = screenDef.slots as Record<string, unknown> | undefined;
+  const slotsData = screenDef['slots'] as Record<string, unknown> | undefined;
 
   if (!slotsData) {
     return [{label: t('layouts.preview.slots.content.label', 'Content'), flex: 1, color: 'rgba(99, 102, 241, 0.1)'}];
   }
 
-  if (slotsData.header) {
-    const header = slotsData.header as Record<string, unknown>;
-    const h = (header.height as number | undefined) ?? 60;
+  if (slotsData['header']) {
+    const header = slotsData['header'] as Record<string, unknown>;
+    const h = (header['height'] as number | undefined) ?? 60;
     const details: string[] = [];
-    if (header.showLogo) details.push(t('layouts.preview.slots.logo.label', 'Logo'));
-    if (header.showLanguageSelector) details.push(t('layouts.preview.slots.lang_selector.label', 'Lang selector'));
-    if (header.showBackButton) details.push(t('layouts.preview.slots.back_button.label', 'Back button'));
+    if (header['showLogo']) details.push(t('layouts.preview.slots.logo.label', 'Logo'));
+    if (header['showLanguageSelector']) details.push(t('layouts.preview.slots.lang_selector.label', 'Lang selector'));
+    if (header['showBackButton']) details.push(t('layouts.preview.slots.back_button.label', 'Back button'));
     slots.push({
       label: t('layouts.preview.slots.header.label', 'Header'),
       height: h,
@@ -272,12 +272,12 @@ function parseScreenSlots(
     });
   }
 
-  if (slotsData.main) {
-    const main = slotsData.main as Record<string, unknown>;
-    const container = main.container as Record<string, unknown> | undefined;
+  if (slotsData['main']) {
+    const main = slotsData['main'] as Record<string, unknown>;
+    const container = main['container'] as Record<string, unknown> | undefined;
     const details: string[] = [];
-    if (container?.maxWidth) details.push(`max-width: ${container.maxWidth as number}px`);
-    if (container?.padding) details.push(`padding: ${container.padding as number}px`);
+    if (container?.['maxWidth']) details.push(`max-width: ${container['maxWidth'] as number}px`);
+    if (container?.['padding']) details.push(`padding: ${container['padding'] as number}px`);
     slots.push({
       label: t('layouts.preview.slots.main.label', 'Main'),
       flex: 1,
@@ -288,11 +288,11 @@ function parseScreenSlots(
     slots.push({label: t('layouts.preview.slots.main.label', 'Main'), flex: 1, color: 'rgba(16, 185, 129, 0.1)'});
   }
 
-  if (slotsData.footer) {
-    const footer = slotsData.footer as Record<string, unknown>;
-    const h = (footer.height as number | undefined) ?? 48;
+  if (slotsData['footer']) {
+    const footer = slotsData['footer'] as Record<string, unknown>;
+    const h = (footer['height'] as number | undefined) ?? 48;
     const details: string[] = [];
-    if (footer.showLinks) details.push(t('layouts.preview.slots.links.label', 'Links'));
+    if (footer['showLinks']) details.push(t('layouts.preview.slots.links.label', 'Links'));
     slots.push({
       label: t('layouts.preview.slots.footer.label', 'Footer'),
       height: h,
@@ -424,7 +424,7 @@ function LayoutPreviewContent({
   if (selectedScreen) {
     const serverDef = allScreens[selectedScreen] ?? {};
     const liveDef = screenDraft ?? serverDef;
-    const baseName = serverDef.extends as string | undefined;
+    const baseName = serverDef['extends'] as string | undefined;
     const baseDef = baseName ? allScreens[baseName] : undefined;
 
     const mergedDef = baseDef
@@ -432,19 +432,19 @@ function LayoutPreviewContent({
           ...baseDef,
           ...liveDef,
           slots: {
-            ...(baseDef.slots as Record<string, unknown> | undefined),
-            ...(liveDef.slots as Record<string, unknown> | undefined),
+            ...(baseDef['slots'] as Record<string, unknown> | undefined),
+            ...(liveDef['slots'] as Record<string, unknown> | undefined),
           },
         }
       : liveDef;
 
     const slots = parseScreenSlots(mergedDef, t);
-    const bgValue = (mergedDef.background as Record<string, unknown> | undefined)?.value as string | undefined;
-    const mainSlot = (mergedDef.slots as Record<string, unknown> | undefined)?.main as
+    const bgValue = (mergedDef['background'] as Record<string, unknown> | undefined)?.['value'] as string | undefined;
+    const mainSlot = (mergedDef['slots'] as Record<string, unknown> | undefined)?.['main'] as
       | Record<string, unknown>
       | undefined;
-    const mainContainer = mainSlot?.container as Record<string, unknown> | undefined;
-    const focusMaxWidth = (mainContainer?.maxWidth as number | undefined) ?? 400;
+    const mainContainer = mainSlot?.['container'] as Record<string, unknown> | undefined;
+    const focusMaxWidth = (mainContainer?.['maxWidth'] as number | undefined) ?? 400;
 
     return (
       <Box sx={{height: '100%', display: 'flex', flexDirection: 'column'}}>
@@ -481,10 +481,12 @@ function LayoutPreviewContent({
     );
   }
 
-  const baseScreens = Object.entries(allScreens).filter(([, def]) => !def.extends);
-  const derivedScreens = Object.entries(allScreens).filter(([, def]) => !!def.extends);
-  const authDef = allScreens.auth;
-  const authBackground = (authDef?.background as Record<string, unknown> | undefined)?.value as string | undefined;
+  const baseScreens = Object.entries(allScreens).filter(([, def]) => !def['extends']);
+  const derivedScreens = Object.entries(allScreens).filter(([, def]) => !!def['extends']);
+  const authDef = allScreens['auth'];
+  const authBackground = (authDef?.['background'] as Record<string, unknown> | undefined)?.['value'] as
+    | string
+    | undefined;
 
   return (
     <Box sx={{height: '100%', display: 'flex', flexDirection: 'column'}}>
@@ -501,7 +503,9 @@ function LayoutPreviewContent({
                   key={name}
                   screenName={name}
                   slots={parseScreenSlots(def, t)}
-                  background={(def.background as Record<string, unknown> | undefined)?.value as string | undefined}
+                  background={
+                    (def['background'] as Record<string, unknown> | undefined)?.['value'] as string | undefined
+                  }
                 />
               ))}
             </Stack>
@@ -519,17 +523,17 @@ function LayoutPreviewContent({
                   {
                     ...authDef,
                     slots: {
-                      ...(authDef?.slots as Record<string, unknown> | undefined),
-                      ...(def.slots as Record<string, unknown> | undefined),
+                      ...(authDef?.['slots'] as Record<string, unknown> | undefined),
+                      ...(def['slots'] as Record<string, unknown> | undefined),
                     },
                   },
                   t,
                 );
-                const mainContainer = (def.slots as Record<string, unknown> | undefined)?.main as
+                const mainContainer = (def['slots'] as Record<string, unknown> | undefined)?.['main'] as
                   | Record<string, unknown>
                   | undefined;
-                const containerOverride = mainContainer?.container as Record<string, unknown> | undefined;
-                const maxWidth = (containerOverride?.maxWidth as number | undefined) ?? 360;
+                const containerOverride = mainContainer?.['container'] as Record<string, unknown> | undefined;
+                const maxWidth = (containerOverride?.['maxWidth'] as number | undefined) ?? 360;
                 return (
                   <ScreenPreview
                     key={name}
diff --git a/frontend/apps/console/src/features/design/components/PreviewToolbar.tsx b/frontend/packages/configure-design/src/components/PreviewToolbar.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/PreviewToolbar.tsx
rename to frontend/packages/configure-design/src/components/PreviewToolbar.tsx
diff --git a/frontend/apps/console/src/features/design/components/ThemeConfigPanel.tsx b/frontend/packages/configure-design/src/components/ThemeConfigPanel.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/ThemeConfigPanel.tsx
rename to frontend/packages/configure-design/src/components/ThemeConfigPanel.tsx
diff --git a/frontend/apps/console/src/features/design/components/ThemePreviewPanel.tsx b/frontend/packages/configure-design/src/components/ThemePreviewPanel.tsx
similarity index 84%
rename from frontend/apps/console/src/features/design/components/ThemePreviewPanel.tsx
rename to frontend/packages/configure-design/src/components/ThemePreviewPanel.tsx
index 6cb9328995..3497c868a6 100644
--- a/frontend/apps/console/src/features/design/components/ThemePreviewPanel.tsx
+++ b/frontend/packages/configure-design/src/components/ThemePreviewPanel.tsx
@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type {JSX} from 'react';
-import GatePreview from '../../../components/GatePreview/GatePreview';
 import useThemeBuilder from '../contexts/ThemeBuilder/useThemeBuilder';
+import GatePreview from '../GatePreview/GatePreview';
 
 // Re-export so existing imports of Viewport from this file keep working.
-export type {Viewport} from '../../../components/GatePreview/GatePreview';
+export type {Viewport} from '../GatePreview/GatePreview';
 
 interface ThemePreviewPanelProps {
   themeId: string | null;
diff --git a/frontend/apps/console/src/features/design/components/__tests__/LayoutConfigPanel.test.tsx b/frontend/packages/configure-design/src/components/__tests__/LayoutConfigPanel.test.tsx
similarity index 92%
rename from frontend/apps/console/src/features/design/components/__tests__/LayoutConfigPanel.test.tsx
rename to frontend/packages/configure-design/src/components/__tests__/LayoutConfigPanel.test.tsx
index 2b98ac15d0..7ab5c5b251 100644
--- a/frontend/apps/console/src/features/design/components/__tests__/LayoutConfigPanel.test.tsx
+++ b/frontend/packages/configure-design/src/components/__tests__/LayoutConfigPanel.test.tsx
@@ -10,16 +10,6 @@ const {mockMutateAsync} = vi.hoisted(() => ({
   mockMutateAsync: vi.fn(),
 }));
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, fallback?: string | {defaultValue?: string}) => {
-      if (typeof fallback === 'string') return fallback || key;
-      if (fallback && typeof fallback === 'object') return fallback.defaultValue ?? key;
-      return key;
-    },
-  }),
-}));
-
 vi.mock('@thunderid/design', () => ({
   useGetLayout: () => ({
     data: {id: 'layout-1', handle: 'layout-a', displayName: 'Layout A', layout: {screens: {main: {}}}},
diff --git a/frontend/packages/configure-design/src/components/__tests__/LayoutPreviewPanel.test.tsx b/frontend/packages/configure-design/src/components/__tests__/LayoutPreviewPanel.test.tsx
new file mode 100644
index 0000000000..8c14e257ab
--- /dev/null
+++ b/frontend/packages/configure-design/src/components/__tests__/LayoutPreviewPanel.test.tsx
@@ -0,0 +1,191 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {render, screen} from '@thunderid/test-utils';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import LayoutPreviewPanel from '../LayoutPreviewPanel';
+
+interface UseGetLayoutResult {
+  data: Record<string, unknown> | undefined;
+  isLoading: boolean;
+}
+
+const {mockUseGetLayout} = vi.hoisted(() => ({
+  mockUseGetLayout: vi.fn<(id: string) => UseGetLayoutResult>(),
+}));
+
+vi.mock('@thunderid/design', () => ({
+  useGetLayout: (id: string) => mockUseGetLayout(id),
+}));
+
+const baseLayout = {
+  id: 'layout-1',
+  handle: 'split-screen',
+  displayName: 'Split Screen',
+  layout: {
+    screens: {
+      auth: {
+        background: {value: '#fafafa'},
+        slots: {
+          header: {height: 64, showLogo: true, showLanguageSelector: true, showBackButton: true},
+          main: {container: {maxWidth: 420, padding: 24}},
+          footer: {height: 40, showLinks: true},
+        },
+      },
+      register: {
+        extends: 'auth',
+        slots: {
+          main: {container: {maxWidth: 500}},
+        },
+      },
+    },
+  },
+};
+
+describe('LayoutPreviewPanel', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('shows the select-a-layout prompt when no layout is chosen', () => {
+    mockUseGetLayout.mockReturnValue({data: undefined, isLoading: false});
+
+    render(<LayoutPreviewPanel layoutId={null} />);
+
+    expect(screen.getByText('Select a layout to preview')).toBeInTheDocument();
+  });
+
+  it('shows a loading spinner while the layout is being fetched', () => {
+    mockUseGetLayout.mockReturnValue({data: undefined, isLoading: true});
+
+    render(<LayoutPreviewPanel layoutId="layout-1" />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('shows a failure message when the layout fails to load', () => {
+    mockUseGetLayout.mockReturnValue({data: undefined, isLoading: false});
+
+    render(<LayoutPreviewPanel layoutId="layout-1" />);
+
+    expect(screen.getByText('Failed to load layout')).toBeInTheDocument();
+  });
+
+  it('renders the base screens and screen variants sections with the slot legend', () => {
+    mockUseGetLayout.mockReturnValue({data: baseLayout, isLoading: false});
+
+    render(<LayoutPreviewPanel layoutId="layout-1" />);
+
+    expect(screen.getByText('Base layout')).toBeInTheDocument();
+    expect(screen.getByText('auth')).toBeInTheDocument();
+    expect(screen.getByText('Screen variants')).toBeInTheDocument();
+    expect(screen.getByText('register')).toBeInTheDocument();
+    expect(screen.getByText('Slots:')).toBeInTheDocument();
+  });
+
+  it('renders header slot details when the header exposes logo, language selector, and back button', () => {
+    mockUseGetLayout.mockReturnValue({data: baseLayout, isLoading: false});
+
+    render(<LayoutPreviewPanel layoutId="layout-1" />);
+
+    // The derived "register" screen inherits the same header/footer slots, so several of these
+    // labels appear more than once.
+    expect(screen.getAllByText('Logo').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Lang selector').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Back button').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Links').length).toBeGreaterThan(0);
+  });
+
+  it('renders main slot container details such as max-width and padding', () => {
+    mockUseGetLayout.mockReturnValue({data: baseLayout, isLoading: false});
+
+    render(<LayoutPreviewPanel layoutId="layout-1" />);
+
+    expect(screen.getByText('max-width: 420px')).toBeInTheDocument();
+    expect(screen.getByText('padding: 24px')).toBeInTheDocument();
+  });
+
+  it('shows a generic content slot when a screen has no slots defined', () => {
+    mockUseGetLayout.mockReturnValue({
+      data: {
+        ...baseLayout,
+        layout: {screens: {blank: {}}},
+      },
+      isLoading: false,
+    });
+
+    render(<LayoutPreviewPanel layoutId="layout-1" />);
+
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('falls back to a plain Main slot when slots are defined but there is no main slot', () => {
+    mockUseGetLayout.mockReturnValue({
+      data: {
+        ...baseLayout,
+        layout: {screens: {sidebar: {slots: {header: {height: 48}}}}},
+      },
+      isLoading: false,
+    });
+
+    render(<LayoutPreviewPanel layoutId="layout-1" />);
+
+    // "Main" also appears in the always-present slot legend, hence getAllByText.
+    expect(screen.getAllByText('Main').length).toBeGreaterThan(0);
+    expect(screen.queryByText('Content')).not.toBeInTheDocument();
+  });
+
+  it('renders the focused single-screen view when a screen is selected', () => {
+    mockUseGetLayout.mockReturnValue({data: baseLayout, isLoading: false});
+
+    render(<LayoutPreviewPanel layoutId="layout-1" selectedScreen="auth" />);
+
+    expect(screen.getByText('Split Screen — auth')).toBeInTheDocument();
+    expect(screen.queryByText('Base layout')).not.toBeInTheDocument();
+  });
+
+  it('shows the "extends" annotation and merges slots from the base screen when previewing a derived screen', () => {
+    mockUseGetLayout.mockReturnValue({data: baseLayout, isLoading: false});
+
+    render(<LayoutPreviewPanel layoutId="layout-1" selectedScreen="register" />);
+
+    expect(screen.getByText('auth', {selector: 'strong'})).toBeInTheDocument();
+    // Inherited header/footer slots from the base screen still show up for the derived screen
+    // (the slot legend at the bottom also renders these labels, hence getAllByText).
+    expect(screen.getAllByText('Header').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Footer').length).toBeGreaterThan(0);
+    // The derived screen's own max-width override is used, not the base's.
+    expect(screen.getByText('max-width: 500px')).toBeInTheDocument();
+  });
+
+  it('prefers the live screen draft over the server-persisted screen definition', () => {
+    mockUseGetLayout.mockReturnValue({data: baseLayout, isLoading: false});
+
+    render(
+      <LayoutPreviewPanel
+        layoutId="layout-1"
+        selectedScreen="auth"
+        screenDraft={{background: {value: '#fafafa'}, slots: {main: {container: {maxWidth: 999}}}}}
+      />,
+    );
+
+    expect(screen.getByText('max-width: 999px')).toBeInTheDocument();
+  });
+
+  it('renders horizontal and vertical ruler tick labels when showRulers is enabled', () => {
+    mockUseGetLayout.mockReturnValue({data: baseLayout, isLoading: false});
+
+    render(<LayoutPreviewPanel layoutId="layout-1" showRulers />);
+
+    // One "100" label from the horizontal ruler and one from the vertical ruler.
+    expect(screen.getAllByText('100').length).toBe(2);
+  });
+
+  it('does not render ruler tick labels by default', () => {
+    mockUseGetLayout.mockReturnValue({data: baseLayout, isLoading: false});
+
+    render(<LayoutPreviewPanel layoutId="layout-1" />);
+
+    expect(screen.queryAllByText('100').length).toBe(0);
+  });
+});
diff --git a/frontend/apps/console/src/features/design/components/__tests__/ThemeConfigPanel.test.tsx b/frontend/packages/configure-design/src/components/__tests__/ThemeConfigPanel.test.tsx
similarity index 82%
rename from frontend/apps/console/src/features/design/components/__tests__/ThemeConfigPanel.test.tsx
rename to frontend/packages/configure-design/src/components/__tests__/ThemeConfigPanel.test.tsx
index e50d537b73..e99adb0e60 100644
--- a/frontend/apps/console/src/features/design/components/__tests__/ThemeConfigPanel.test.tsx
+++ b/frontend/packages/configure-design/src/components/__tests__/ThemeConfigPanel.test.tsx
@@ -15,23 +15,17 @@ const {mockMutateAsync, mockSetDraftTheme, mockSetIsDirty, mockThemeBuilderState
   },
 }));
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, fallback?: string | {defaultValue?: string}) => {
-      if (typeof fallback === 'string') return fallback || key;
-      if (fallback && typeof fallback === 'object') return fallback.defaultValue ?? key;
-      return key;
-    },
-  }),
-}));
-
-vi.mock('@thunderid/design', () => ({
-  useGetTheme: () => ({
-    data: {id: 'theme-1', handle: 'theme-a', displayName: 'Theme A', description: '', isReadOnly: false},
-    isLoading: false,
-  }),
-  useUpdateTheme: () => ({mutateAsync: mockMutateAsync, isPending: false}),
-}));
+vi.mock('@thunderid/design', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@thunderid/design')>();
+  return {
+    ...actual,
+    useGetTheme: () => ({
+      data: {id: 'theme-1', handle: 'theme-a', displayName: 'Theme A', description: '', isReadOnly: false},
+      isLoading: false,
+    }),
+    useUpdateTheme: () => ({mutateAsync: mockMutateAsync, isPending: false}),
+  };
+});
 
 vi.mock('../../contexts/ThemeBuilder/useThemeBuilder', () => ({
   default: () => ({
diff --git a/frontend/apps/console/src/features/design/components/__tests__/viewportConstants.test.ts b/frontend/packages/configure-design/src/components/__tests__/viewportConstants.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/design/components/__tests__/viewportConstants.test.ts
rename to frontend/packages/configure-design/src/components/__tests__/viewportConstants.test.ts
diff --git a/frontend/apps/console/src/features/design/components/common/AddCard.tsx b/frontend/packages/configure-design/src/components/common/AddCard.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/AddCard.tsx
rename to frontend/packages/configure-design/src/components/common/AddCard.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/ColorEditRow.tsx b/frontend/packages/configure-design/src/components/common/ColorEditRow.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/ColorEditRow.tsx
rename to frontend/packages/configure-design/src/components/common/ColorEditRow.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/ConfigCard.tsx b/frontend/packages/configure-design/src/components/common/ConfigCard.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/ConfigCard.tsx
rename to frontend/packages/configure-design/src/components/common/ConfigCard.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/ItemCard.tsx b/frontend/packages/configure-design/src/components/common/ItemCard.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/ItemCard.tsx
rename to frontend/packages/configure-design/src/components/common/ItemCard.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/SectionHeader.tsx b/frontend/packages/configure-design/src/components/common/SectionHeader.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/SectionHeader.tsx
rename to frontend/packages/configure-design/src/components/common/SectionHeader.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/SectionLabel.tsx b/frontend/packages/configure-design/src/components/common/SectionLabel.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/SectionLabel.tsx
rename to frontend/packages/configure-design/src/components/common/SectionLabel.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/SelectRow.tsx b/frontend/packages/configure-design/src/components/common/SelectRow.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/SelectRow.tsx
rename to frontend/packages/configure-design/src/components/common/SelectRow.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/SliderRow.tsx b/frontend/packages/configure-design/src/components/common/SliderRow.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/SliderRow.tsx
rename to frontend/packages/configure-design/src/components/common/SliderRow.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/SwitchRow.tsx b/frontend/packages/configure-design/src/components/common/SwitchRow.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/SwitchRow.tsx
rename to frontend/packages/configure-design/src/components/common/SwitchRow.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/__tests__/AddCard.test.tsx b/frontend/packages/configure-design/src/components/common/__tests__/AddCard.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/__tests__/AddCard.test.tsx
rename to frontend/packages/configure-design/src/components/common/__tests__/AddCard.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/__tests__/ColorEditRow.test.tsx b/frontend/packages/configure-design/src/components/common/__tests__/ColorEditRow.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/__tests__/ColorEditRow.test.tsx
rename to frontend/packages/configure-design/src/components/common/__tests__/ColorEditRow.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/__tests__/ConfigCard.test.tsx b/frontend/packages/configure-design/src/components/common/__tests__/ConfigCard.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/__tests__/ConfigCard.test.tsx
rename to frontend/packages/configure-design/src/components/common/__tests__/ConfigCard.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/__tests__/ItemCard.test.tsx b/frontend/packages/configure-design/src/components/common/__tests__/ItemCard.test.tsx
similarity index 89%
rename from frontend/apps/console/src/features/design/components/common/__tests__/ItemCard.test.tsx
rename to frontend/packages/configure-design/src/components/common/__tests__/ItemCard.test.tsx
index f170c1f83b..7d3e98f928 100644
--- a/frontend/apps/console/src/features/design/components/common/__tests__/ItemCard.test.tsx
+++ b/frontend/packages/configure-design/src/components/common/__tests__/ItemCard.test.tsx
@@ -6,14 +6,6 @@ import {render, screen} from '@thunderid/test-utils';
 import {describe, it, expect, vi} from 'vitest';
 import ItemCard from '../ItemCard';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string) => key}),
-  };
-});
-
 describe('ItemCard', () => {
   const thumbnail = <div data-testid="thumb">Thumbnail</div>;
 
diff --git a/frontend/apps/console/src/features/design/components/common/__tests__/SectionHeader.test.tsx b/frontend/packages/configure-design/src/components/common/__tests__/SectionHeader.test.tsx
similarity index 86%
rename from frontend/apps/console/src/features/design/components/common/__tests__/SectionHeader.test.tsx
rename to frontend/packages/configure-design/src/components/common/__tests__/SectionHeader.test.tsx
index 82ece8fd2b..0032979865 100644
--- a/frontend/apps/console/src/features/design/components/common/__tests__/SectionHeader.test.tsx
+++ b/frontend/packages/configure-design/src/components/common/__tests__/SectionHeader.test.tsx
@@ -3,19 +3,9 @@
 
 import {render, screen} from '@thunderid/test-utils';
 import {Palette} from '@wso2/oxygen-ui-icons-react';
-import {describe, it, expect, vi} from 'vitest';
+import {describe, it, expect} from 'vitest';
 import SectionHeader from '../SectionHeader';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({
-      t: (key: string, fallback?: string | Record<string, unknown>) => (typeof fallback === 'string' ? fallback : key),
-    }),
-  };
-});
-
 describe('SectionHeader', () => {
   describe('Rendering', () => {
     it('renders the title', () => {
diff --git a/frontend/apps/console/src/features/design/components/common/__tests__/SectionLabel.test.tsx b/frontend/packages/configure-design/src/components/common/__tests__/SectionLabel.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/__tests__/SectionLabel.test.tsx
rename to frontend/packages/configure-design/src/components/common/__tests__/SectionLabel.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/__tests__/SelectRow.test.tsx b/frontend/packages/configure-design/src/components/common/__tests__/SelectRow.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/__tests__/SelectRow.test.tsx
rename to frontend/packages/configure-design/src/components/common/__tests__/SelectRow.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/__tests__/SliderRow.test.tsx b/frontend/packages/configure-design/src/components/common/__tests__/SliderRow.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/__tests__/SliderRow.test.tsx
rename to frontend/packages/configure-design/src/components/common/__tests__/SliderRow.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/common/__tests__/SwitchRow.test.tsx b/frontend/packages/configure-design/src/components/common/__tests__/SwitchRow.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/common/__tests__/SwitchRow.test.tsx
rename to frontend/packages/configure-design/src/components/common/__tests__/SwitchRow.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/create-theme/ConfigureThemeColor.tsx b/frontend/packages/configure-design/src/components/create-theme/ConfigureThemeColor.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/create-theme/ConfigureThemeColor.tsx
rename to frontend/packages/configure-design/src/components/create-theme/ConfigureThemeColor.tsx
diff --git a/frontend/apps/console/src/features/design/components/create-theme/ConfigureThemeName.tsx b/frontend/packages/configure-design/src/components/create-theme/ConfigureThemeName.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/create-theme/ConfigureThemeName.tsx
rename to frontend/packages/configure-design/src/components/create-theme/ConfigureThemeName.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/AddScreenRow.tsx b/frontend/packages/configure-design/src/components/layouts/AddScreenRow.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/AddScreenRow.tsx
rename to frontend/packages/configure-design/src/components/layouts/AddScreenRow.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/CustomCSSEditor.tsx b/frontend/packages/configure-design/src/components/layouts/CustomCSSEditor.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/CustomCSSEditor.tsx
rename to frontend/packages/configure-design/src/components/layouts/CustomCSSEditor.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/EditableTitle.tsx b/frontend/packages/configure-design/src/components/layouts/EditableTitle.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/EditableTitle.tsx
rename to frontend/packages/configure-design/src/components/layouts/EditableTitle.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/ElementInspector.tsx b/frontend/packages/configure-design/src/components/layouts/ElementInspector.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/ElementInspector.tsx
rename to frontend/packages/configure-design/src/components/layouts/ElementInspector.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/InlineCSSField.tsx b/frontend/packages/configure-design/src/components/layouts/InlineCSSField.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/InlineCSSField.tsx
rename to frontend/packages/configure-design/src/components/layouts/InlineCSSField.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/LayoutPresetThumbnail.tsx b/frontend/packages/configure-design/src/components/layouts/LayoutPresetThumbnail.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/LayoutPresetThumbnail.tsx
rename to frontend/packages/configure-design/src/components/layouts/LayoutPresetThumbnail.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/LayoutThumbnail.tsx b/frontend/packages/configure-design/src/components/layouts/LayoutThumbnail.tsx
similarity index 93%
rename from frontend/apps/console/src/features/design/components/layouts/LayoutThumbnail.tsx
rename to frontend/packages/configure-design/src/components/layouts/LayoutThumbnail.tsx
index e83d03535d..27946d9ad3 100644
--- a/frontend/apps/console/src/features/design/components/layouts/LayoutThumbnail.tsx
+++ b/frontend/packages/configure-design/src/components/layouts/LayoutThumbnail.tsx
@@ -15,11 +15,11 @@ export default function LayoutThumbnail({layout}: LayoutThumbnailProps): JSX.Ele
   const isDark = (mode === 'system' ? systemMode : mode) === 'dark';
 
   const screens = layout.layout?.screens as Record<string, Record<string, unknown>> | undefined;
-  const authScreen = screens?.auth;
-  const hasHeader = !!(authScreen?.slots as Record<string, unknown> | undefined)?.header;
-  const hasFooter = !!(authScreen?.slots as Record<string, unknown> | undefined)?.footer;
-  const bg = authScreen?.background
-    ? ((authScreen.background as Record<string, unknown>).value as string | undefined)
+  const authScreen = screens?.['auth'];
+  const hasHeader = !!(authScreen?.['slots'] as Record<string, unknown> | undefined)?.['header'];
+  const hasFooter = !!(authScreen?.['slots'] as Record<string, unknown> | undefined)?.['footer'];
+  const bg = authScreen?.['background']
+    ? ((authScreen['background'] as Record<string, unknown>)['value'] as string | undefined)
     : undefined;
 
   // When a custom background is set use a glass overlay; otherwise fall back to solid theme surfaces.
diff --git a/frontend/apps/console/src/features/design/components/layouts/ScreenEditor.tsx b/frontend/packages/configure-design/src/components/layouts/ScreenEditor.tsx
similarity index 86%
rename from frontend/apps/console/src/features/design/components/layouts/ScreenEditor.tsx
rename to frontend/packages/configure-design/src/components/layouts/ScreenEditor.tsx
index 8daeec76d7..404194c9a3 100644
--- a/frontend/apps/console/src/features/design/components/layouts/ScreenEditor.tsx
+++ b/frontend/packages/configure-design/src/components/layouts/ScreenEditor.tsx
@@ -20,9 +20,9 @@ export interface ScreenEditorProps {
  */
 export default function ScreenEditor({screenDraft, onUpdate}: ScreenEditorProps): JSX.Element {
   const {t} = useTranslation('design');
-  const background = screenDraft.background as Record<string, unknown> | undefined;
-  const spacing = screenDraft.spacing as Record<string, unknown> | undefined;
-  const slots = screenDraft.slots as Record<string, unknown> | undefined;
+  const background = screenDraft['background'] as Record<string, unknown> | undefined;
+  const spacing = screenDraft['spacing'] as Record<string, unknown> | undefined;
+  const slots = screenDraft['slots'] as Record<string, unknown> | undefined;
 
   const num = (v: unknown): number => Number(v) || 0;
   const str = (v: unknown): string => String((v ?? '') as string | number | boolean);
@@ -31,10 +31,10 @@ export default function ScreenEditor({screenDraft, onUpdate}: ScreenEditorProps)
     <Box sx={{overflowY: 'auto', height: '100%', p: 1.5}}>
       {background && (
         <ConfigCard title={t('layouts.forms.screen_editor.background.title', 'Background')}>
-          {background.type !== undefined && (
+          {background['type'] !== undefined && (
             <SelectRow
               label={t('layouts.forms.screen_editor.fields.type.label', 'Type')}
-              value={str(background.type)}
+              value={str(background['type'])}
               options={[
                 {value: 'solid', label: t('layouts.forms.screen_editor.fields.type.options.solid.label', 'Solid')},
                 {
@@ -47,7 +47,7 @@ export default function ScreenEditor({screenDraft, onUpdate}: ScreenEditorProps)
               onChange={(v) => onUpdate(['background', 'type'], v)}
             />
           )}
-          {background.value !== undefined && (
+          {background['value'] !== undefined && (
             <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1} sx={{py: 0.5}}>
               <Typography variant="caption" color="text.secondary" sx={{fontSize: '0.75rem', flexShrink: 0}}>
                 {t('layouts.forms.screen_editor.fields.value.label', 'Value')}
@@ -62,7 +62,7 @@ export default function ScreenEditor({screenDraft, onUpdate}: ScreenEditorProps)
                   color: 'text.primary',
                 }}
               >
-                {str(background.value)}
+                {str(background['value'])}
               </Typography>
             </Stack>
           )}
@@ -71,19 +71,19 @@ export default function ScreenEditor({screenDraft, onUpdate}: ScreenEditorProps)
 
       {spacing && (
         <ConfigCard title={t('layouts.forms.screen_editor.spacing.title', 'Spacing')}>
-          {spacing.componentGap !== undefined && (
+          {spacing['componentGap'] !== undefined && (
             <SliderRow
               label={t('layouts.forms.screen_editor.fields.component_gap.label', 'Component gap')}
-              value={num(spacing.componentGap)}
+              value={num(spacing['componentGap'])}
               min={0}
               max={64}
               onChange={(v) => onUpdate(['spacing', 'componentGap'], v)}
             />
           )}
-          {spacing.sectionGap !== undefined && (
+          {spacing['sectionGap'] !== undefined && (
             <SliderRow
               label={t('layouts.forms.screen_editor.fields.section_gap.label', 'Section gap')}
-              value={num(spacing.sectionGap)}
+              value={num(spacing['sectionGap'])}
               min={0}
               max={64}
               onChange={(v) => onUpdate(['spacing', 'sectionGap'], v)}
diff --git a/frontend/apps/console/src/features/design/components/layouts/ScreenListItem.tsx b/frontend/packages/configure-design/src/components/layouts/ScreenListItem.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/ScreenListItem.tsx
rename to frontend/packages/configure-design/src/components/layouts/ScreenListItem.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/SlotEditor.tsx b/frontend/packages/configure-design/src/components/layouts/SlotEditor.tsx
similarity index 83%
rename from frontend/apps/console/src/features/design/components/layouts/SlotEditor.tsx
rename to frontend/packages/configure-design/src/components/layouts/SlotEditor.tsx
index 4f8ba1230b..64ac934ea1 100644
--- a/frontend/apps/console/src/features/design/components/layouts/SlotEditor.tsx
+++ b/frontend/packages/configure-design/src/components/layouts/SlotEditor.tsx
@@ -21,9 +21,9 @@ export interface SlotEditorProps {
  */
 export default function SlotEditor({name, slot, onUpdate}: SlotEditorProps): JSX.Element {
   const {t} = useTranslation('design');
-  const container = slot.container as Record<string, unknown> | undefined;
-  const layout = slot.layout as Record<string, unknown> | undefined;
-  const position = slot.position as Record<string, unknown> | undefined;
+  const container = slot['container'] as Record<string, unknown> | undefined;
+  const layout = slot['layout'] as Record<string, unknown> | undefined;
+  const position = slot['position'] as Record<string, unknown> | undefined;
 
   const num = (v: unknown): number => Number(v) || 0;
   const str = (v: unknown): string => String((v ?? '') as string | number | boolean);
@@ -47,49 +47,49 @@ export default function SlotEditor({name, slot, onUpdate}: SlotEditorProps): JSX
           {name}
         </Typography>
 
-        {slot.height !== undefined && (
+        {slot['height'] !== undefined && (
           <SliderRow
             label={t('layouts.forms.slot_editor.fields.height.label', 'Height')}
-            value={num(slot.height)}
+            value={num(slot['height'])}
             min={0}
             max={200}
             onChange={(v) => onUpdate([name, 'height'], v)}
           />
         )}
-        {slot.padding !== undefined && (
+        {slot['padding'] !== undefined && (
           <SliderRow
             label={t('layouts.forms.slot_editor.fields.padding.label', 'Padding')}
-            value={num(slot.padding)}
+            value={num(slot['padding'])}
             min={0}
             max={64}
             onChange={(v) => onUpdate([name, 'padding'], v)}
           />
         )}
-        {slot.showLogo !== undefined && (
+        {slot['showLogo'] !== undefined && (
           <SwitchRow
             label={t('layouts.forms.slot_editor.fields.show_logo.label', 'Show logo')}
-            value={bool(slot.showLogo)}
+            value={bool(slot['showLogo'])}
             onChange={(v) => onUpdate([name, 'showLogo'], v)}
           />
         )}
-        {slot.showBackButton !== undefined && (
+        {slot['showBackButton'] !== undefined && (
           <SwitchRow
             label={t('layouts.forms.slot_editor.fields.back_button.label', 'Back button')}
-            value={bool(slot.showBackButton)}
+            value={bool(slot['showBackButton'])}
             onChange={(v) => onUpdate([name, 'showBackButton'], v)}
           />
         )}
-        {slot.showLanguageSelector !== undefined && (
+        {slot['showLanguageSelector'] !== undefined && (
           <SwitchRow
             label={t('layouts.forms.slot_editor.fields.language_selector.label', 'Language selector')}
-            value={bool(slot.showLanguageSelector)}
+            value={bool(slot['showLanguageSelector'])}
             onChange={(v) => onUpdate([name, 'showLanguageSelector'], v)}
           />
         )}
-        {slot.showLinks !== undefined && (
+        {slot['showLinks'] !== undefined && (
           <SwitchRow
             label={t('layouts.forms.slot_editor.fields.links.label', 'Links')}
-            value={bool(slot.showLinks)}
+            value={bool(slot['showLinks'])}
             onChange={(v) => onUpdate([name, 'showLinks'], v)}
           />
         )}
@@ -97,10 +97,10 @@ export default function SlotEditor({name, slot, onUpdate}: SlotEditorProps): JSX
         {position && (
           <>
             <SectionLabel>{t('layouts.forms.slot_editor.position.title', 'Position')}</SectionLabel>
-            {position.anchor !== undefined && (
+            {position['anchor'] !== undefined && (
               <SelectRow
                 label={t('layouts.forms.slot_editor.fields.anchor.label', 'Anchor')}
-                value={str(position.anchor)}
+                value={str(position['anchor'])}
                 options={[
                   {value: 'center', label: t('layouts.forms.slot_editor.fields.anchor.options.center.label', 'Center')},
                   {value: 'left', label: t('layouts.forms.slot_editor.fields.anchor.options.left.label', 'Left')},
@@ -109,10 +109,10 @@ export default function SlotEditor({name, slot, onUpdate}: SlotEditorProps): JSX
                 onChange={(v) => onUpdate([name, 'position', 'anchor'], v)}
               />
             )}
-            {position.verticalAlign !== undefined && (
+            {position['verticalAlign'] !== undefined && (
               <SelectRow
                 label={t('layouts.forms.slot_editor.fields.v_align.label', 'V-align')}
-                value={str(position.verticalAlign)}
+                value={str(position['verticalAlign'])}
                 options={[
                   {value: 'top', label: t('layouts.forms.slot_editor.fields.v_align.options.top.label', 'Top')},
                   {
@@ -133,45 +133,45 @@ export default function SlotEditor({name, slot, onUpdate}: SlotEditorProps): JSX
         {container && (
           <>
             <SectionLabel>{t('layouts.forms.slot_editor.container.title', 'Container')}</SectionLabel>
-            {container.maxWidth !== undefined && (
+            {container['maxWidth'] !== undefined && (
               <SliderRow
                 label={t('layouts.forms.slot_editor.fields.max_width.label', 'Max width')}
-                value={num(container.maxWidth)}
+                value={num(container['maxWidth'])}
                 min={200}
                 max={900}
                 onChange={(v) => onUpdate([name, 'container', 'maxWidth'], v)}
               />
             )}
-            {container.padding !== undefined && (
+            {container['padding'] !== undefined && (
               <SliderRow
                 label={t('layouts.forms.slot_editor.fields.padding.label', 'Padding')}
-                value={num(container.padding)}
+                value={num(container['padding'])}
                 min={0}
                 max={64}
                 onChange={(v) => onUpdate([name, 'container', 'padding'], v)}
               />
             )}
-            {container.borderRadius !== undefined && (
+            {container['borderRadius'] !== undefined && (
               <SliderRow
                 label={t('layouts.forms.slot_editor.fields.border_radius.label', 'Border radius')}
-                value={num(container.borderRadius)}
+                value={num(container['borderRadius'])}
                 min={0}
                 max={32}
                 onChange={(v) => onUpdate([name, 'container', 'borderRadius'], v)}
               />
             )}
-            {container.elevation !== undefined && (
+            {container['elevation'] !== undefined && (
               <SelectRow
                 label={t('layouts.forms.slot_editor.fields.elevation.label', 'Elevation')}
-                value={str(container.elevation)}
+                value={str(container['elevation'])}
                 options={['0', '1', '2', '3', '4'].map((v) => ({value: v, label: v}))}
                 onChange={(v) => onUpdate([name, 'container', 'elevation'], Number(v))}
               />
             )}
-            {container.background !== undefined && (
+            {container['background'] !== undefined && (
               <SelectRow
                 label={t('layouts.forms.slot_editor.fields.background.label', 'Background')}
-                value={str(container.background)}
+                value={str(container['background'])}
                 options={[
                   {
                     value: 'paper',
@@ -195,10 +195,10 @@ export default function SlotEditor({name, slot, onUpdate}: SlotEditorProps): JSX
         {layout && (
           <>
             <SectionLabel>{t('layouts.forms.slot_editor.layout.title', 'Layout')}</SectionLabel>
-            {layout.type !== undefined && (
+            {layout['type'] !== undefined && (
               <SelectRow
                 label={t('layouts.forms.slot_editor.fields.type.label', 'Type')}
-                value={str(layout.type)}
+                value={str(layout['type'])}
                 options={[
                   {value: 'stack', label: t('layouts.forms.slot_editor.fields.type.options.stack.label', 'Stack')},
                   {value: 'grid', label: t('layouts.forms.slot_editor.fields.type.options.grid.label', 'Grid')},
@@ -206,10 +206,10 @@ export default function SlotEditor({name, slot, onUpdate}: SlotEditorProps): JSX
                 onChange={(v) => onUpdate([name, 'layout', 'type'], v)}
               />
             )}
-            {layout.direction !== undefined && (
+            {layout['direction'] !== undefined && (
               <SelectRow
                 label={t('layouts.forms.slot_editor.fields.direction.label', 'Direction')}
-                value={str(layout.direction)}
+                value={str(layout['direction'])}
                 options={[
                   {
                     value: 'column',
@@ -220,19 +220,19 @@ export default function SlotEditor({name, slot, onUpdate}: SlotEditorProps): JSX
                 onChange={(v) => onUpdate([name, 'layout', 'direction'], v)}
               />
             )}
-            {layout.gap !== undefined && (
+            {layout['gap'] !== undefined && (
               <SliderRow
                 label={t('layouts.forms.slot_editor.fields.gap.label', 'Gap')}
-                value={num(layout.gap)}
+                value={num(layout['gap'])}
                 min={0}
                 max={64}
                 onChange={(v) => onUpdate([name, 'layout', 'gap'], v)}
               />
             )}
-            {layout.justify !== undefined && (
+            {layout['justify'] !== undefined && (
               <SelectRow
                 label={t('layouts.forms.slot_editor.fields.justify.label', 'Justify')}
-                value={str(layout.justify)}
+                value={str(layout['justify'])}
                 options={[
                   {
                     value: 'flex-start',
@@ -251,10 +251,10 @@ export default function SlotEditor({name, slot, onUpdate}: SlotEditorProps): JSX
                 onChange={(v) => onUpdate([name, 'layout', 'justify'], v)}
               />
             )}
-            {layout.align !== undefined && (
+            {layout['align'] !== undefined && (
               <SelectRow
                 label={t('layouts.forms.slot_editor.fields.align.label', 'Align')}
-                value={str(layout.align)}
+                value={str(layout['align'])}
                 options={[
                   {
                     value: 'flex-start',
diff --git a/frontend/apps/console/src/features/design/components/layouts/StylesheetItem.tsx b/frontend/packages/configure-design/src/components/layouts/StylesheetItem.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/StylesheetItem.tsx
rename to frontend/packages/configure-design/src/components/layouts/StylesheetItem.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/UrlField.tsx b/frontend/packages/configure-design/src/components/layouts/UrlField.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/UrlField.tsx
rename to frontend/packages/configure-design/src/components/layouts/UrlField.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/__tests__/AddScreenRow.test.tsx b/frontend/packages/configure-design/src/components/layouts/__tests__/AddScreenRow.test.tsx
similarity index 91%
rename from frontend/apps/console/src/features/design/components/layouts/__tests__/AddScreenRow.test.tsx
rename to frontend/packages/configure-design/src/components/layouts/__tests__/AddScreenRow.test.tsx
index 1916b50c41..d008151ac2 100644
--- a/frontend/apps/console/src/features/design/components/layouts/__tests__/AddScreenRow.test.tsx
+++ b/frontend/packages/configure-design/src/components/layouts/__tests__/AddScreenRow.test.tsx
@@ -6,21 +6,12 @@ import {render, screen} from '@thunderid/test-utils';
 import {describe, it, expect, vi} from 'vitest';
 import AddScreenRow from '../AddScreenRow';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string) => key}),
-  };
-});
-
 const baseScreens = ['auth', 'login'];
 
 describe('AddScreenRow', () => {
   describe('Initial state', () => {
     it('renders the "Add screen" trigger button', () => {
       render(<AddScreenRow baseScreens={baseScreens} onAdd={vi.fn()} />);
-      // The add trigger is visible (i18n key returned as-is)
       expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
@@ -63,7 +54,7 @@ describe('AddScreenRow', () => {
       // Click the confirm/add button (find by looking for non-cancel buttons)
       const buttons = screen.getAllByRole('button');
       // The add/confirm button triggers onAdd — find the first non-cancel button
-      const confirmBtn = buttons.find((btn) => btn.textContent && !btn.textContent.includes('cancel'));
+      const confirmBtn = buttons.find((btn) => btn.textContent && !btn.textContent.toLowerCase().includes('cancel'));
       if (confirmBtn) {
         await user.click(confirmBtn);
       }
diff --git a/frontend/apps/console/src/features/design/components/layouts/__tests__/CustomCSSEditor.test.tsx b/frontend/packages/configure-design/src/components/layouts/__tests__/CustomCSSEditor.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/__tests__/CustomCSSEditor.test.tsx
rename to frontend/packages/configure-design/src/components/layouts/__tests__/CustomCSSEditor.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/__tests__/ElementInspector.test.tsx b/frontend/packages/configure-design/src/components/layouts/__tests__/ElementInspector.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/layouts/__tests__/ElementInspector.test.tsx
rename to frontend/packages/configure-design/src/components/layouts/__tests__/ElementInspector.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/layouts/__tests__/LayoutPresetThumbnail.test.tsx b/frontend/packages/configure-design/src/components/layouts/__tests__/LayoutPresetThumbnail.test.tsx
similarity index 94%
rename from frontend/apps/console/src/features/design/components/layouts/__tests__/LayoutPresetThumbnail.test.tsx
rename to frontend/packages/configure-design/src/components/layouts/__tests__/LayoutPresetThumbnail.test.tsx
index 5f4bbd80a8..49e2c238e3 100644
--- a/frontend/apps/console/src/features/design/components/layouts/__tests__/LayoutPresetThumbnail.test.tsx
+++ b/frontend/packages/configure-design/src/components/layouts/__tests__/LayoutPresetThumbnail.test.tsx
@@ -45,8 +45,8 @@ describe('LayoutPresetThumbnail', () => {
 
   describe('Accessibility', () => {
     it('centered variant renders a container element', () => {
-      render(<LayoutPresetThumbnail variant="centered" />);
-      expect(document.body.firstChild).toBeInTheDocument();
+      const {container} = render(<LayoutPresetThumbnail variant="centered" />);
+      expect(container.firstChild).toBeInTheDocument();
     });
 
     it('split variant renders visual content (no missing elements)', () => {
diff --git a/frontend/packages/configure-design/src/components/layouts/__tests__/LayoutThumbnail.test.tsx b/frontend/packages/configure-design/src/components/layouts/__tests__/LayoutThumbnail.test.tsx
new file mode 100644
index 0000000000..adc1b32f92
--- /dev/null
+++ b/frontend/packages/configure-design/src/components/layouts/__tests__/LayoutThumbnail.test.tsx
@@ -0,0 +1,104 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import type {LayoutListItem} from '@thunderid/design';
+import {render} from '@thunderid/test-utils';
+import {OxygenUIThemeProvider, useColorScheme} from '@wso2/oxygen-ui';
+import {useEffect, type ReactNode} from 'react';
+import {describe, it, expect} from 'vitest';
+import LayoutThumbnail from '../LayoutThumbnail';
+
+function ModeSetter({mode, children}: {mode: 'light' | 'dark'; children: ReactNode}) {
+  const {setMode} = useColorScheme();
+  useEffect(() => {
+    setMode(mode);
+  }, [mode, setMode]);
+  return children;
+}
+
+function renderThumbnail(layout: LayoutListItem, mode: 'light' | 'dark' = 'light') {
+  return render(
+    <OxygenUIThemeProvider>
+      <ModeSetter mode={mode}>
+        <LayoutThumbnail layout={layout} />
+      </ModeSetter>
+    </OxygenUIThemeProvider>,
+  );
+}
+
+function makeLayout(overrides: {background?: string; hasHeader?: boolean; hasFooter?: boolean}): LayoutListItem {
+  const {background, hasHeader = false, hasFooter = false} = overrides;
+  const slots: Record<string, unknown> = {};
+  if (hasHeader) slots['header'] = {components: []};
+  if (hasFooter) slots['footer'] = {components: []};
+
+  return {
+    id: 'layout-1',
+    handle: 'custom',
+    displayName: 'Custom Layout',
+    layout: {
+      screens: {
+        auth: {
+          slots,
+          ...(background ? {background: {value: background}} : {}),
+        },
+      },
+    },
+  } as unknown as LayoutListItem;
+}
+
+describe('LayoutThumbnail', () => {
+  describe('solid mode (no custom background)', () => {
+    it('renders without a header or footer when neither slot is present', () => {
+      const {container} = render(
+        <OxygenUIThemeProvider>
+          <LayoutThumbnail layout={makeLayout({})} />
+        </OxygenUIThemeProvider>,
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders a header block when the header slot is present', () => {
+      const {container} = render(
+        <OxygenUIThemeProvider>
+          <LayoutThumbnail layout={makeLayout({hasHeader: true})} />
+        </OxygenUIThemeProvider>,
+      );
+      expect(container.querySelectorAll('div').length).toBeGreaterThan(1);
+    });
+
+    it('renders three footer chips when the footer slot is present', () => {
+      const {container} = render(
+        <OxygenUIThemeProvider>
+          <LayoutThumbnail layout={makeLayout({hasFooter: true})} />
+        </OxygenUIThemeProvider>,
+      );
+      // The footer renders exactly 3 chip Boxes ([1, 2, 3].map(...))
+      const footerRow = container.querySelector('div');
+      expect(footerRow).toBeInTheDocument();
+    });
+  });
+
+  describe('glass mode (custom background set)', () => {
+    it('renders with a solid-color custom background in light mode', () => {
+      const {container} = renderThumbnail(
+        makeLayout({background: '#ff0000', hasHeader: true, hasFooter: true}),
+        'light',
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with a solid-color custom background in dark mode', () => {
+      const {container} = renderThumbnail(
+        makeLayout({background: '#ff0000', hasHeader: true, hasFooter: true}),
+        'dark',
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders header and footer chips using the glass-mode nav chip background', () => {
+      const {container} = renderThumbnail(makeLayout({background: '#00ff00', hasHeader: true, hasFooter: true}));
+      expect(container.querySelectorAll('div').length).toBeGreaterThan(3);
+    });
+  });
+});
diff --git a/frontend/packages/configure-design/src/components/layouts/__tests__/ScreenEditor.test.tsx b/frontend/packages/configure-design/src/components/layouts/__tests__/ScreenEditor.test.tsx
new file mode 100644
index 0000000000..487ddaf988
--- /dev/null
+++ b/frontend/packages/configure-design/src/components/layouts/__tests__/ScreenEditor.test.tsx
@@ -0,0 +1,151 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import userEvent from '@testing-library/user-event';
+import {render, screen} from '@thunderid/test-utils';
+import {describe, it, expect, vi} from 'vitest';
+import ScreenEditor from '../ScreenEditor';
+
+describe('ScreenEditor', () => {
+  describe('Empty state', () => {
+    it('renders the no-overrides message when the screen draft has no background, spacing, or slots', () => {
+      render(<ScreenEditor screenDraft={{}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('No overrides — inherits from base screen')).toBeInTheDocument();
+    });
+
+    it('does not render the Background, Spacing, or Slots sections when empty', () => {
+      render(<ScreenEditor screenDraft={{}} onUpdate={vi.fn()} />);
+      expect(screen.queryByText('Background')).not.toBeInTheDocument();
+      expect(screen.queryByText('Spacing')).not.toBeInTheDocument();
+      expect(screen.queryByText('Slots')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Background section', () => {
+    it('renders the Background section when background is defined', () => {
+      render(<ScreenEditor screenDraft={{background: {type: 'solid'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Background')).toBeInTheDocument();
+    });
+
+    it('does not render the no-overrides message when a section is present', () => {
+      render(<ScreenEditor screenDraft={{background: {type: 'solid'}}} onUpdate={vi.fn()} />);
+      expect(screen.queryByText('No overrides — inherits from base screen')).not.toBeInTheDocument();
+    });
+
+    it('renders a Type select with all background type options', () => {
+      render(<ScreenEditor screenDraft={{background: {type: 'solid'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Type')).toBeInTheDocument();
+      expect(screen.getByText('Solid')).toBeInTheDocument();
+    });
+
+    it('renders the raw background value when value is defined', () => {
+      render(<ScreenEditor screenDraft={{background: {value: '#112233'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Value')).toBeInTheDocument();
+      expect(screen.getByText('#112233')).toBeInTheDocument();
+    });
+
+    it('calls onUpdate with the background type path when the Type select changes', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<ScreenEditor screenDraft={{background: {type: 'solid'}}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', {name: 'Gradient'}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['background', 'type'], 'gradient');
+    });
+  });
+
+  describe('Spacing section', () => {
+    it('renders the Spacing section when spacing is defined', () => {
+      render(<ScreenEditor screenDraft={{spacing: {componentGap: 8}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Spacing')).toBeInTheDocument();
+    });
+
+    it('renders a Component gap slider when componentGap is defined', () => {
+      render(<ScreenEditor screenDraft={{spacing: {componentGap: 8}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Component gap')).toBeInTheDocument();
+      expect(screen.getByText('8px')).toBeInTheDocument();
+    });
+
+    it('renders a Section gap slider when sectionGap is defined', () => {
+      render(<ScreenEditor screenDraft={{spacing: {sectionGap: 24}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Section gap')).toBeInTheDocument();
+      expect(screen.getByText('24px')).toBeInTheDocument();
+    });
+
+    it('calls onUpdate with the spacing path when the component gap slider changes', () => {
+      const onUpdate = vi.fn();
+      render(<ScreenEditor screenDraft={{spacing: {componentGap: 8}}} onUpdate={onUpdate} />);
+
+      const slider = screen.getByRole('slider');
+      slider.focus();
+      slider.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['spacing', 'componentGap'], expect.any(Number));
+    });
+
+    it('calls onUpdate with the spacing path when the section gap slider changes', () => {
+      const onUpdate = vi.fn();
+      render(<ScreenEditor screenDraft={{spacing: {sectionGap: 24}}} onUpdate={onUpdate} />);
+
+      const slider = screen.getByRole('slider');
+      slider.focus();
+      slider.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['spacing', 'sectionGap'], expect.any(Number));
+    });
+  });
+
+  describe('Slots section', () => {
+    it('renders the Slots section when slots has entries', () => {
+      render(<ScreenEditor screenDraft={{slots: {header: {height: 64}}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Slots')).toBeInTheDocument();
+      expect(screen.getByText('header')).toBeInTheDocument();
+    });
+
+    it('does not render the Slots section when slots is an empty object', () => {
+      render(<ScreenEditor screenDraft={{slots: {}}} onUpdate={vi.fn()} />);
+      expect(screen.queryByText('Slots')).not.toBeInTheDocument();
+    });
+
+    it('renders one SlotEditor per slot entry', () => {
+      render(
+        <ScreenEditor screenDraft={{slots: {header: {height: 64}, footer: {showLinks: true}}}} onUpdate={vi.fn()} />,
+      );
+      expect(screen.getByText('header')).toBeInTheDocument();
+      expect(screen.getByText('footer')).toBeInTheDocument();
+    });
+
+    it('prefixes onUpdate calls from a slot editor with the slots path', () => {
+      const onUpdate = vi.fn();
+      render(<ScreenEditor screenDraft={{slots: {header: {height: 64}}}} onUpdate={onUpdate} />);
+
+      const slider = screen.getByRole('slider');
+      slider.focus();
+      slider.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['slots', 'header', 'height'], expect.any(Number));
+    });
+  });
+
+  describe('Multiple sections combined', () => {
+    it('renders Background, Spacing, and Slots sections together without the empty state', () => {
+      render(
+        <ScreenEditor
+          screenDraft={{
+            background: {type: 'solid'},
+            spacing: {componentGap: 8},
+            slots: {header: {height: 64}},
+          }}
+          onUpdate={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByText('Background')).toBeInTheDocument();
+      expect(screen.getByText('Spacing')).toBeInTheDocument();
+      expect(screen.getByText('Slots')).toBeInTheDocument();
+      expect(screen.queryByText('No overrides — inherits from base screen')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/frontend/apps/console/src/features/design/components/layouts/__tests__/ScreenListItem.test.tsx b/frontend/packages/configure-design/src/components/layouts/__tests__/ScreenListItem.test.tsx
similarity index 85%
rename from frontend/apps/console/src/features/design/components/layouts/__tests__/ScreenListItem.test.tsx
rename to frontend/packages/configure-design/src/components/layouts/__tests__/ScreenListItem.test.tsx
index e217547a1c..0e201097de 100644
--- a/frontend/apps/console/src/features/design/components/layouts/__tests__/ScreenListItem.test.tsx
+++ b/frontend/packages/configure-design/src/components/layouts/__tests__/ScreenListItem.test.tsx
@@ -6,14 +6,6 @@ import {render, screen} from '@thunderid/test-utils';
 import {describe, it, expect, vi} from 'vitest';
 import ScreenListItem from '../ScreenListItem';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string) => key}),
-  };
-});
-
 describe('ScreenListItem', () => {
   describe('Rendering', () => {
     it('renders the screen name', () => {
@@ -23,10 +15,7 @@ describe('ScreenListItem', () => {
 
     it('renders "base screen" label when no extendsBase is provided', () => {
       render(<ScreenListItem name="auth" isSelected={false} onClick={vi.fn()} />);
-      // Translated key for "base screen"
-      expect(
-        screen.getByText((text) => text.toLowerCase().includes('base') || text.includes('design.layout')),
-      ).toBeInTheDocument();
+      expect(screen.getByText('base screen')).toBeInTheDocument();
     });
 
     it('renders "extends X" text when extendsBase is provided', () => {
diff --git a/frontend/packages/configure-design/src/components/layouts/__tests__/SlotEditor.test.tsx b/frontend/packages/configure-design/src/components/layouts/__tests__/SlotEditor.test.tsx
new file mode 100644
index 0000000000..bd768f3e07
--- /dev/null
+++ b/frontend/packages/configure-design/src/components/layouts/__tests__/SlotEditor.test.tsx
@@ -0,0 +1,374 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import userEvent from '@testing-library/user-event';
+import {render, screen} from '@thunderid/test-utils';
+import {describe, it, expect, vi} from 'vitest';
+import SlotEditor from '../SlotEditor';
+
+describe('SlotEditor', () => {
+  describe('Slot name', () => {
+    it('renders the slot name label', () => {
+      render(<SlotEditor name="header" slot={{}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('header')).toBeInTheDocument();
+    });
+  });
+
+  describe('Top-level fields', () => {
+    it('renders a Height slider when height is defined', () => {
+      render(<SlotEditor name="header" slot={{height: 64}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Height')).toBeInTheDocument();
+      expect(screen.getByText('64px')).toBeInTheDocument();
+    });
+
+    it('does not render a Height slider when height is undefined', () => {
+      render(<SlotEditor name="header" slot={{}} onUpdate={vi.fn()} />);
+      expect(screen.queryByText('Height')).not.toBeInTheDocument();
+    });
+
+    it('renders a Padding slider when padding is defined', () => {
+      render(<SlotEditor name="header" slot={{padding: 16}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Padding')).toBeInTheDocument();
+      expect(screen.getByText('16px')).toBeInTheDocument();
+    });
+
+    it('renders a Show logo switch when showLogo is defined', () => {
+      render(<SlotEditor name="header" slot={{showLogo: true}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Show logo')).toBeInTheDocument();
+      expect(screen.getByRole('switch')).toBeChecked();
+    });
+
+    it('renders a Back button switch when showBackButton is defined', () => {
+      render(<SlotEditor name="header" slot={{showBackButton: false}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Back button')).toBeInTheDocument();
+      expect(screen.getByRole('switch')).not.toBeChecked();
+    });
+
+    it('renders a Language selector switch when showLanguageSelector is defined', () => {
+      render(<SlotEditor name="footer" slot={{showLanguageSelector: true}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Language selector')).toBeInTheDocument();
+    });
+
+    it('renders a Links switch when showLinks is defined', () => {
+      render(<SlotEditor name="footer" slot={{showLinks: true}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Links')).toBeInTheDocument();
+    });
+
+    it('calls onUpdate with the slot name and height path when the height slider changes', () => {
+      const onUpdate = vi.fn();
+      render(<SlotEditor name="header" slot={{height: 64}} onUpdate={onUpdate} />);
+
+      const slider = screen.getByRole('slider');
+      slider.focus();
+      slider.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['header', 'height'], expect.any(Number));
+    });
+
+    it('calls onUpdate with the toggled value when the Show logo switch is clicked', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="header" slot={{showLogo: false}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('switch'));
+
+      expect(onUpdate).toHaveBeenCalledWith(['header', 'showLogo'], true);
+    });
+
+    it('calls onUpdate with the padding path when the padding slider changes', () => {
+      const onUpdate = vi.fn();
+      render(<SlotEditor name="header" slot={{padding: 16}} onUpdate={onUpdate} />);
+
+      const slider = screen.getByRole('slider');
+      slider.focus();
+      slider.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['header', 'padding'], expect.any(Number));
+    });
+
+    it('calls onUpdate with the toggled value when the Back button switch is clicked', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="header" slot={{showBackButton: false}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('switch'));
+
+      expect(onUpdate).toHaveBeenCalledWith(['header', 'showBackButton'], true);
+    });
+
+    it('calls onUpdate with the toggled value when the Language selector switch is clicked', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="footer" slot={{showLanguageSelector: false}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('switch'));
+
+      expect(onUpdate).toHaveBeenCalledWith(['footer', 'showLanguageSelector'], true);
+    });
+
+    it('calls onUpdate with the toggled value when the Links switch is clicked', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="footer" slot={{showLinks: false}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('switch'));
+
+      expect(onUpdate).toHaveBeenCalledWith(['footer', 'showLinks'], true);
+    });
+  });
+
+  describe('Position section', () => {
+    it('renders the Position section title when position is defined', () => {
+      render(<SlotEditor name="header" slot={{position: {anchor: 'center'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Position')).toBeInTheDocument();
+    });
+
+    it('does not render the Position section when position is undefined', () => {
+      render(<SlotEditor name="header" slot={{}} onUpdate={vi.fn()} />);
+      expect(screen.queryByText('Position')).not.toBeInTheDocument();
+    });
+
+    it('renders an Anchor select with all anchor options when anchor is defined', () => {
+      render(<SlotEditor name="header" slot={{position: {anchor: 'center'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Anchor')).toBeInTheDocument();
+      expect(screen.getByText('Center')).toBeInTheDocument();
+    });
+
+    it('renders a V-align select when verticalAlign is defined', () => {
+      render(<SlotEditor name="header" slot={{position: {verticalAlign: 'top'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('V-align')).toBeInTheDocument();
+      expect(screen.getByText('Top')).toBeInTheDocument();
+    });
+
+    it('calls onUpdate with the position path when the Anchor select changes', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="header" slot={{position: {anchor: 'center'}}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', {name: 'Left'}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['header', 'position', 'anchor'], 'left');
+    });
+
+    it('calls onUpdate with the position path when the V-align select changes', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="header" slot={{position: {verticalAlign: 'top'}}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', {name: 'Bottom'}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['header', 'position', 'verticalAlign'], 'bottom');
+    });
+  });
+
+  describe('Container section', () => {
+    it('renders the Container section title when container is defined', () => {
+      render(<SlotEditor name="body" slot={{container: {maxWidth: 480}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Container')).toBeInTheDocument();
+    });
+
+    it('does not render the Container section when container is undefined', () => {
+      render(<SlotEditor name="body" slot={{}} onUpdate={vi.fn()} />);
+      expect(screen.queryByText('Container')).not.toBeInTheDocument();
+    });
+
+    it('renders a Max width slider when maxWidth is defined', () => {
+      render(<SlotEditor name="body" slot={{container: {maxWidth: 480}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Max width')).toBeInTheDocument();
+      expect(screen.getByText('480px')).toBeInTheDocument();
+    });
+
+    it('renders a Border radius slider when borderRadius is defined', () => {
+      render(<SlotEditor name="body" slot={{container: {borderRadius: 8}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Border radius')).toBeInTheDocument();
+    });
+
+    it('renders an Elevation select with numeric options when elevation is defined', () => {
+      render(<SlotEditor name="body" slot={{container: {elevation: 2}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Elevation')).toBeInTheDocument();
+      expect(screen.getByText('2')).toBeInTheDocument();
+    });
+
+    it('renders a Background select when background is defined', () => {
+      render(<SlotEditor name="body" slot={{container: {background: 'paper'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Background')).toBeInTheDocument();
+      expect(screen.getByText('Paper')).toBeInTheDocument();
+    });
+
+    it('calls onUpdate with a numeric value for elevation changes via the select', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="body" slot={{container: {elevation: 0}}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', {name: '3'}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'container', 'elevation'], 3);
+    });
+
+    it('calls onUpdate with the container path when the max width slider changes', () => {
+      const onUpdate = vi.fn();
+      render(<SlotEditor name="body" slot={{container: {maxWidth: 480}}} onUpdate={onUpdate} />);
+
+      const slider = screen.getByRole('slider');
+      slider.focus();
+      slider.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'container', 'maxWidth'], expect.any(Number));
+    });
+
+    it('calls onUpdate with the container path when the container padding slider changes', () => {
+      const onUpdate = vi.fn();
+      render(<SlotEditor name="body" slot={{container: {padding: 8}}} onUpdate={onUpdate} />);
+
+      const slider = screen.getByRole('slider');
+      slider.focus();
+      slider.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'container', 'padding'], expect.any(Number));
+    });
+
+    it('calls onUpdate with the container path when the border radius slider changes', () => {
+      const onUpdate = vi.fn();
+      render(<SlotEditor name="body" slot={{container: {borderRadius: 8}}} onUpdate={onUpdate} />);
+
+      const slider = screen.getByRole('slider');
+      slider.focus();
+      slider.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'container', 'borderRadius'], expect.any(Number));
+    });
+
+    it('calls onUpdate with the container path when the Background select changes', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="body" slot={{container: {background: 'paper'}}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', {name: 'Transparent'}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'container', 'background'], 'transparent');
+    });
+  });
+
+  describe('Layout section', () => {
+    it('renders the Layout section title when layout is defined', () => {
+      render(<SlotEditor name="body" slot={{layout: {type: 'stack'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Layout')).toBeInTheDocument();
+    });
+
+    it('does not render the Layout section when layout is undefined', () => {
+      render(<SlotEditor name="body" slot={{}} onUpdate={vi.fn()} />);
+      expect(screen.queryByText('Layout')).not.toBeInTheDocument();
+    });
+
+    it('renders a Type select with Stack and Grid options', () => {
+      render(<SlotEditor name="body" slot={{layout: {type: 'stack'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Type')).toBeInTheDocument();
+      expect(screen.getByText('Stack')).toBeInTheDocument();
+    });
+
+    it('renders a Direction select when direction is defined', () => {
+      render(<SlotEditor name="body" slot={{layout: {direction: 'row'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Direction')).toBeInTheDocument();
+      expect(screen.getByText('Row')).toBeInTheDocument();
+    });
+
+    it('renders a Gap slider when gap is defined', () => {
+      render(<SlotEditor name="body" slot={{layout: {gap: 12}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Gap')).toBeInTheDocument();
+      expect(screen.getByText('12px')).toBeInTheDocument();
+    });
+
+    it('renders a Justify select when justify is defined', () => {
+      render(<SlotEditor name="body" slot={{layout: {justify: 'center'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Justify')).toBeInTheDocument();
+    });
+
+    it('renders an Align select when align is defined', () => {
+      render(<SlotEditor name="body" slot={{layout: {align: 'stretch'}}} onUpdate={vi.fn()} />);
+      expect(screen.getByText('Align')).toBeInTheDocument();
+      expect(screen.getByText('Stretch')).toBeInTheDocument();
+    });
+
+    it('calls onUpdate with the layout path when the direction select changes', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="body" slot={{layout: {direction: 'column'}}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', {name: 'Row'}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'layout', 'direction'], 'row');
+    });
+
+    it('calls onUpdate with the layout path when the Type select changes', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="body" slot={{layout: {type: 'stack'}}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', {name: 'Grid'}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'layout', 'type'], 'grid');
+    });
+
+    it('calls onUpdate with the layout path when the gap slider changes', () => {
+      const onUpdate = vi.fn();
+      render(<SlotEditor name="body" slot={{layout: {gap: 12}}} onUpdate={onUpdate} />);
+
+      const slider = screen.getByRole('slider');
+      slider.focus();
+      slider.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'layout', 'gap'], expect.any(Number));
+    });
+
+    it('calls onUpdate with the layout path when the Justify select changes', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="body" slot={{layout: {justify: 'center'}}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', {name: 'Between'}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'layout', 'justify'], 'space-between');
+    });
+
+    it('calls onUpdate with the layout path when the Align select changes', async () => {
+      const onUpdate = vi.fn();
+      const user = userEvent.setup();
+      render(<SlotEditor name="body" slot={{layout: {align: 'center'}}} onUpdate={onUpdate} />);
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', {name: 'Stretch'}));
+
+      expect(onUpdate).toHaveBeenCalledWith(['body', 'layout', 'align'], 'stretch');
+    });
+  });
+
+  describe('Full slot definition', () => {
+    it('renders every applicable section at once for a fully populated slot', () => {
+      render(
+        <SlotEditor
+          name="header"
+          slot={{
+            height: 64,
+            padding: 16,
+            showLogo: true,
+            position: {anchor: 'left', verticalAlign: 'top'},
+            container: {maxWidth: 400, padding: 8, borderRadius: 4, elevation: 1, background: 'default'},
+            layout: {type: 'grid', direction: 'row', gap: 8, justify: 'flex-start', align: 'center'},
+          }}
+          onUpdate={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByText('Position')).toBeInTheDocument();
+      expect(screen.getByText('Container')).toBeInTheDocument();
+      expect(screen.getByText('Layout')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/frontend/apps/console/src/features/design/components/themes/ColorBuilderContent.tsx b/frontend/packages/configure-design/src/components/themes/ColorBuilderContent.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/themes/ColorBuilderContent.tsx
rename to frontend/packages/configure-design/src/components/themes/ColorBuilderContent.tsx
diff --git a/frontend/apps/console/src/features/design/components/themes/GeneralBuilderContent.tsx b/frontend/packages/configure-design/src/components/themes/GeneralBuilderContent.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/themes/GeneralBuilderContent.tsx
rename to frontend/packages/configure-design/src/components/themes/GeneralBuilderContent.tsx
diff --git a/frontend/apps/console/src/features/design/components/themes/SectionCard.tsx b/frontend/packages/configure-design/src/components/themes/SectionCard.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/themes/SectionCard.tsx
rename to frontend/packages/configure-design/src/components/themes/SectionCard.tsx
diff --git a/frontend/apps/console/src/features/design/components/themes/ShapeBuilderContent.tsx b/frontend/packages/configure-design/src/components/themes/ShapeBuilderContent.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/themes/ShapeBuilderContent.tsx
rename to frontend/packages/configure-design/src/components/themes/ShapeBuilderContent.tsx
diff --git a/frontend/apps/console/src/features/design/components/themes/ThemeBuilderLeftPanel.tsx b/frontend/packages/configure-design/src/components/themes/ThemeBuilderLeftPanel.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/themes/ThemeBuilderLeftPanel.tsx
rename to frontend/packages/configure-design/src/components/themes/ThemeBuilderLeftPanel.tsx
diff --git a/frontend/apps/console/src/features/design/components/themes/ThemeDeleteDialog.tsx b/frontend/packages/configure-design/src/components/themes/ThemeDeleteDialog.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/themes/ThemeDeleteDialog.tsx
rename to frontend/packages/configure-design/src/components/themes/ThemeDeleteDialog.tsx
diff --git a/frontend/apps/console/src/features/design/components/themes/ThemeThumbnail.tsx b/frontend/packages/configure-design/src/components/themes/ThemeThumbnail.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/themes/ThemeThumbnail.tsx
rename to frontend/packages/configure-design/src/components/themes/ThemeThumbnail.tsx
diff --git a/frontend/apps/console/src/features/design/components/themes/TypographyBuilderContent.tsx b/frontend/packages/configure-design/src/components/themes/TypographyBuilderContent.tsx
similarity index 99%
rename from frontend/apps/console/src/features/design/components/themes/TypographyBuilderContent.tsx
rename to frontend/packages/configure-design/src/components/themes/TypographyBuilderContent.tsx
index 77fcee7024..85f3502bb3 100644
--- a/frontend/apps/console/src/features/design/components/themes/TypographyBuilderContent.tsx
+++ b/frontend/packages/configure-design/src/components/themes/TypographyBuilderContent.tsx
@@ -66,7 +66,7 @@ type TypographyRecord = Record<string, unknown>;
 function propagateWeight(typography: TypographyRecord, weightKey: string, value: number): void {
   for (const [variant, ref] of Object.entries(VARIANT_WEIGHT_REF)) {
     if (ref === weightKey && typography[variant]) {
-      (typography[variant] as Record<string, unknown>).fontWeight = value;
+      (typography[variant] as Record<string, unknown>)['fontWeight'] = value;
     }
   }
 }
@@ -100,9 +100,9 @@ function clearVariantSizes(typography: TypographyRecord): void {
   for (const key of VARIANT_KEYS) {
     const variantObj = typography[key] as Record<string, unknown> | undefined;
     if (!variantObj) continue;
-    delete variantObj.fontSize;
-    delete variantObj.lineHeight;
-    delete variantObj.letterSpacing;
+    delete variantObj['fontSize'];
+    delete variantObj['lineHeight'];
+    delete variantObj['letterSpacing'];
   }
 }
 
diff --git a/frontend/apps/console/src/features/design/components/themes/__tests__/SectionCard.test.tsx b/frontend/packages/configure-design/src/components/themes/__tests__/SectionCard.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/themes/__tests__/SectionCard.test.tsx
rename to frontend/packages/configure-design/src/components/themes/__tests__/SectionCard.test.tsx
diff --git a/frontend/apps/console/src/features/design/components/themes/__tests__/ThemeDeleteDialog.test.tsx b/frontend/packages/configure-design/src/components/themes/__tests__/ThemeDeleteDialog.test.tsx
similarity index 85%
rename from frontend/apps/console/src/features/design/components/themes/__tests__/ThemeDeleteDialog.test.tsx
rename to frontend/packages/configure-design/src/components/themes/__tests__/ThemeDeleteDialog.test.tsx
index 871e588e37..c60b682818 100644
--- a/frontend/apps/console/src/features/design/components/themes/__tests__/ThemeDeleteDialog.test.tsx
+++ b/frontend/packages/configure-design/src/components/themes/__tests__/ThemeDeleteDialog.test.tsx
@@ -15,22 +15,6 @@ const mockUseDeleteTheme = {
   isError: false,
 };
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({
-      t: (key: string, opts?: string | Record<string, unknown>) => {
-        if (typeof opts === 'object' && opts !== null) {
-          if ('name' in opts) return String(opts.name);
-          if ('defaultValue' in opts) return (opts.defaultValue as string) ?? '';
-        }
-        return key;
-      },
-    }),
-  };
-});
-
 vi.mock('@thunderid/design', () => ({
   useDeleteTheme: () => mockUseDeleteTheme,
   useGetThemeUsages: vi.fn(() => ({
@@ -82,8 +66,8 @@ describe('ThemeDeleteDialog', () => {
       const user = userEvent.setup();
       render(<ThemeDeleteDialog open themeId="theme-1" themeName="My Theme" onClose={onClose} />);
 
-      // Find cancel button by its translation key text
-      const cancelBtn = screen.getByText('common:actions.cancel');
+      // Find cancel button by its translated text
+      const cancelBtn = screen.getByText('Cancel');
       await user.click(cancelBtn);
 
       expect(onClose).toHaveBeenCalledOnce();
@@ -93,7 +77,7 @@ describe('ThemeDeleteDialog', () => {
       const user = userEvent.setup();
       render(<ThemeDeleteDialog open themeId="theme-1" themeName="My Theme" onClose={vi.fn()} />);
 
-      const cancelBtn = screen.getByText('common:actions.cancel');
+      const cancelBtn = screen.getByText('Cancel');
       await user.click(cancelBtn);
 
       expect(mockMutate).not.toHaveBeenCalled();
@@ -105,7 +89,7 @@ describe('ThemeDeleteDialog', () => {
       const user = userEvent.setup();
       render(<ThemeDeleteDialog open themeId="theme-abc" themeName="My Theme" onClose={vi.fn()} />);
 
-      const deleteBtn = screen.getByText('common:actions.delete');
+      const deleteBtn = screen.getByText('Delete');
       await user.click(deleteBtn);
 
       expect(mockMutate).toHaveBeenCalledWith('theme-abc', expect.any(Object));
@@ -115,7 +99,7 @@ describe('ThemeDeleteDialog', () => {
       render(<ThemeDeleteDialog themeId={null} themeName="My Theme" open onClose={vi.fn()} />);
 
       // When themeId is null the delete button is disabled, preventing any click
-      const deleteBtn = screen.getByRole('button', {name: 'common:actions.delete'});
+      const deleteBtn = screen.getByRole('button', {name: 'Delete'});
       expect(deleteBtn).toBeDisabled();
       expect(mockMutate).not.toHaveBeenCalled();
     });
@@ -146,7 +130,7 @@ describe('ThemeDeleteDialog', () => {
       const user = userEvent.setup();
       render(<ThemeDeleteDialog open themeId="theme-1" themeName="My Theme" onClose={onClose} onSuccess={onSuccess} />);
 
-      const deleteBtn = screen.getByText('common:actions.delete');
+      const deleteBtn = screen.getByText('Delete');
       await user.click(deleteBtn);
 
       await waitFor(() => {
@@ -165,7 +149,7 @@ describe('ThemeDeleteDialog', () => {
       const user = userEvent.setup();
       render(<ThemeDeleteDialog open themeId="theme-1" themeName="My Theme" onClose={vi.fn()} />);
 
-      const deleteBtn = screen.getByText('common:actions.delete');
+      const deleteBtn = screen.getByText('Delete');
       await user.click(deleteBtn);
 
       await waitFor(() => {
@@ -183,7 +167,7 @@ describe('ThemeDeleteDialog', () => {
       const onClose = vi.fn();
       render(<ThemeDeleteDialog open themeId="theme-1" themeName="My Theme" onClose={onClose} />);
 
-      const deleteBtn = screen.getByText('common:actions.delete');
+      const deleteBtn = screen.getByText('Delete');
       await user.click(deleteBtn);
 
       await waitFor(() => {
@@ -193,7 +177,7 @@ describe('ThemeDeleteDialog', () => {
       // Simulate the mutation now being in an errored state, as it would be after onError fires.
       mockUseDeleteTheme.isError = true;
 
-      const cancelBtn = screen.getByText('common:actions.cancel');
+      const cancelBtn = screen.getByText('Cancel');
       await user.click(cancelBtn);
 
       expect(mockReset).toHaveBeenCalledTimes(1);
@@ -209,7 +193,7 @@ describe('ThemeDeleteDialog', () => {
       // The cancel button is disabled while pending, but the underlying handler also guards on
       // isPending directly: resetting a still-pending mutation would flip isPending back to false
       // before the in-flight request settles.
-      const cancelBtn = screen.getByText('common:actions.cancel');
+      const cancelBtn = screen.getByText('Cancel');
       fireEvent.click(cancelBtn);
 
       expect(mockReset).not.toHaveBeenCalled();
diff --git a/frontend/apps/console/src/features/design/components/themes/__tests__/ThemeThumbnail.test.tsx b/frontend/packages/configure-design/src/components/themes/__tests__/ThemeThumbnail.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/components/themes/__tests__/ThemeThumbnail.test.tsx
rename to frontend/packages/configure-design/src/components/themes/__tests__/ThemeThumbnail.test.tsx
diff --git a/frontend/packages/configure-design/src/components/themes/__tests__/TypographyBuilderContent.test.tsx b/frontend/packages/configure-design/src/components/themes/__tests__/TypographyBuilderContent.test.tsx
new file mode 100644
index 0000000000..4b63a7a839
--- /dev/null
+++ b/frontend/packages/configure-design/src/components/themes/__tests__/TypographyBuilderContent.test.tsx
@@ -0,0 +1,634 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {render, screen, fireEvent, cleanup} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type {Theme} from '@thunderid/design';
+import {OxygenUIThemeProvider} from '@wso2/oxygen-ui';
+import {useState} from 'react';
+import {describe, it, expect, afterEach, vi} from 'vitest';
+import TypographyBuilderContent from '../TypographyBuilderContent';
+
+const VARIANT_KEYS = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'subtitle1',
+  'subtitle2',
+  'body1',
+  'body2',
+  'button',
+  'caption',
+  'overline',
+];
+
+/** A fully populated typography record so propagateWeight/clearVariantSizes have variant
+ *  objects to actually mutate (not just skip via their `continue`/falsy guards). */
+function makeFullTypography(): Record<string, unknown> {
+  const typography: Record<string, unknown> = {
+    fontFamily: 'Arial',
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    fontSize: 14,
+    htmlFontSize: 16,
+  };
+  for (const key of VARIANT_KEYS) {
+    typography[key] = {fontWeight: 400, fontSize: '1rem', lineHeight: 1.2, letterSpacing: '0.02em'};
+  }
+  return typography;
+}
+
+// useFontStylesheetLink needs a ConfigProvider, which this test tree doesn't otherwise set up.
+vi.mock('@thunderid/contexts', () => ({
+  useConfig: () => ({config: {brand: {product_name: 'ThunderID'}}}),
+}));
+
+afterEach(() => {
+  cleanup();
+});
+
+interface MutableTypography {
+  fontFamily?: string;
+  font?: {importURL?: string};
+}
+
+function makeDraft(typography: MutableTypography = {fontFamily: ''}): Theme {
+  return {typography} as unknown as Theme;
+}
+
+function typographyOf(draft: Theme): MutableTypography {
+  return draft.typography as unknown as MutableTypography;
+}
+
+function renderEditor(draft: Theme) {
+  const onUpdate = vi.fn((updater: (d: Theme) => void) => updater(draft));
+  render(
+    <OxygenUIThemeProvider>
+      <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />
+    </OxygenUIThemeProvider>,
+  );
+  return onUpdate;
+}
+
+/** Mirrors the real ThemeConfigPanel.updateDraft: clones the draft and re-renders with the new
+ *  object, needed for tests that exercise multiple sequential edits (renderEditor's in-place
+ *  mutation doesn't give a fresh object reference each time). */
+function StatefulEditor({initialDraft, onDraftChange}: {initialDraft: Theme; onDraftChange: (d: Theme) => void}) {
+  const [draft, setDraft] = useState(initialDraft);
+  const onUpdate = (updater: (d: Theme) => void): void => {
+    const next = JSON.parse(JSON.stringify(draft)) as Theme;
+    updater(next);
+    setDraft(next);
+    onDraftChange(next);
+  };
+  return <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />;
+}
+
+function renderStatefulEditor(initialDraft: Theme) {
+  let currentDraft = initialDraft;
+  const utils = render(
+    <OxygenUIThemeProvider>
+      <StatefulEditor
+        initialDraft={initialDraft}
+        onDraftChange={(d) => {
+          currentDraft = d;
+        }}
+      />
+    </OxygenUIThemeProvider>,
+  );
+  return {...utils, getDraft: () => currentDraft};
+}
+
+describe('TypographyBuilderContent font modes', () => {
+  it('defaults to the web-safe font picker when no import URL is set', () => {
+    renderEditor(makeDraft());
+    expect(screen.getByRole('combobox')).toBeTruthy();
+    expect(screen.queryByLabelText('Font Import URL')).toBeNull();
+  });
+
+  it('shows the bare name selected when the theme stores the default font stack', () => {
+    renderEditor(makeDraft({fontFamily: "'Inter Variable', sans-serif"}));
+    expect(screen.getByRole<HTMLInputElement>('combobox').value).toBe('Inter Variable');
+  });
+
+  it('starts in import mode showing the configured import URL', () => {
+    const draft = makeDraft({
+      fontFamily: 'Poppins',
+      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
+    });
+    renderEditor(draft);
+    const urlField = screen.getByLabelText<HTMLInputElement>('Font Import URL');
+    expect(urlField.value).toBe('https://fonts.googleapis.com/css2?family=Poppins');
+  });
+
+  it('reveals the import fields when switching to import mode', () => {
+    renderEditor(makeDraft());
+    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
+    expect(screen.getByLabelText('Font Import URL')).toBeTruthy();
+    expect(screen.getAllByLabelText('Font Family').length).toBeGreaterThan(0);
+  });
+
+  it('clears the inherited family when switching to import so the field shows its placeholder', () => {
+    const draft = makeDraft({fontFamily: "'Inter Variable', sans-serif"});
+    renderEditor(draft);
+    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
+    expect(typographyOf(draft).fontFamily).toBe('');
+    expect(screen.getByLabelText<HTMLInputElement>('Font Family').value).toBe('');
+  });
+
+  it('typing an import URL writes typography.font.importURL', () => {
+    const draft = makeDraft();
+    renderEditor(draft);
+    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
+    fireEvent.change(screen.getByLabelText('Font Import URL'), {
+      target: {value: 'https://fonts.bunny.net/css?family=inter'},
+    });
+    expect(typographyOf(draft).font?.importURL).toBe('https://fonts.bunny.net/css?family=inter');
+  });
+
+  it('clears the applied import URL when switching to a web-safe font', () => {
+    const draft = makeDraft({
+      fontFamily: 'Poppins',
+      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
+    });
+    renderEditor(draft);
+    fireEvent.click(screen.getByRole('button', {name: 'Use a web-safe font'}));
+    expect(typographyOf(draft).font).toBeUndefined();
+  });
+
+  it('remembers the import URL and family when toggling to web-safe and back', () => {
+    const {getDraft} = renderStatefulEditor(
+      makeDraft({fontFamily: 'Poppins', font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'}}),
+    );
+    // Toggling to web-safe drops the import from the applied theme, but remembers it.
+    fireEvent.click(screen.getByRole('button', {name: 'Use a web-safe font'}));
+    expect(typographyOf(getDraft()).font).toBeUndefined();
+    // Toggling back to import restores the remembered URL and family.
+    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
+    expect(typographyOf(getDraft()).font?.importURL).toBe('https://fonts.googleapis.com/css2?family=Poppins');
+    expect(typographyOf(getDraft()).fontFamily).toBe('Poppins');
+  });
+
+  it('promotes the toggle to import mode when a draft change restores an import URL (e.g. Revert)', () => {
+    const webSafeDraft = makeDraft({fontFamily: 'Arial'});
+    const {rerender} = render(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={webSafeDraft} onUpdate={vi.fn()} />
+      </OxygenUIThemeProvider>,
+    );
+    expect(screen.queryByLabelText('Font Import URL')).toBeNull();
+
+    // A Revert replaces the draft in place with one that carries an import URL again.
+    const revertedDraft = makeDraft({
+      fontFamily: 'Poppins',
+      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
+    });
+    rerender(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={revertedDraft} onUpdate={vi.fn()} />
+      </OxygenUIThemeProvider>,
+    );
+    const urlField = screen.getByLabelText<HTMLInputElement>('Font Import URL');
+    expect(urlField.value).toBe('https://fonts.googleapis.com/css2?family=Poppins');
+  });
+
+  it('demotes the toggle back to web-safe when a draft change restores a plain family with no import URL (e.g. Revert)', () => {
+    const importDraft = makeDraft({
+      fontFamily: 'Poppins',
+      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
+    });
+    const {rerender} = render(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={importDraft} onUpdate={vi.fn()} />
+      </OxygenUIThemeProvider>,
+    );
+    expect(screen.getByLabelText('Font Import URL')).toBeTruthy();
+
+    // A Revert replaces the draft in place with the original web-safe theme (no import URL).
+    const revertedDraft = makeDraft({fontFamily: 'Arial'});
+    rerender(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={revertedDraft} onUpdate={vi.fn()} />
+      </OxygenUIThemeProvider>,
+    );
+    expect(screen.queryByLabelText('Font Import URL')).toBeNull();
+    expect(screen.getByRole('combobox')).toBeTruthy();
+  });
+
+  it('demotes the toggle back to web-safe when a draft change restores an empty family with no import URL (e.g. Revert)', () => {
+    const importDraft = makeDraft({
+      fontFamily: 'Poppins',
+      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
+    });
+    const {rerender} = render(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={importDraft} onUpdate={vi.fn()} />
+      </OxygenUIThemeProvider>,
+    );
+    expect(screen.getByLabelText('Font Import URL')).toBeTruthy();
+
+    // A Revert can restore a draft with neither a family nor an import URL set.
+    const revertedDraft = makeDraft();
+    rerender(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={revertedDraft} onUpdate={vi.fn()} />
+      </OxygenUIThemeProvider>,
+    );
+    expect(screen.queryByLabelText('Font Import URL')).toBeNull();
+    expect(screen.getByRole('combobox')).toBeTruthy();
+  });
+
+  it('falls the live preview back to the product default (not a generic serif) for a partial font name', () => {
+    renderStatefulEditor(makeDraft());
+    fireEvent.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
+    fireEvent.change(screen.getByLabelText('Font Family'), {target: {value: 'P'}});
+
+    // sx compiles to a generated CSS class via emotion, so assert against the injected stylesheet.
+    screen.getByText('The quick brown fox jumps over the lazy dog.');
+    const styles = Array.from(document.querySelectorAll('style'))
+      .map((style) => style.textContent)
+      .join('\n');
+    expect(styles).toContain('font-family:P,');
+    expect(styles).toMatch(/Inter Variable/);
+  });
+
+  it('loads the imported font stylesheet into the main document, not just the GatePreview iframe', () => {
+    renderEditor(
+      makeDraft({fontFamily: 'Poppins', font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'}}),
+    );
+    const link = document.querySelector(
+      'link[rel="stylesheet"][href="https://fonts.googleapis.com/css2?family=Poppins"]',
+    );
+    expect(link).not.toBeNull();
+  });
+
+  it('clearing the import URL also clears the family, reverting the whole selection to default', () => {
+    const draft = makeDraft({
+      fontFamily: 'Poppins',
+      font: {importURL: 'https://fonts.googleapis.com/css2?family=Poppins'},
+    });
+    renderEditor(draft);
+    fireEvent.change(screen.getByLabelText('Font Import URL'), {target: {value: ''}});
+    expect(typographyOf(draft).fontFamily).toBe('');
+    expect(typographyOf(draft).font).toBeUndefined();
+  });
+
+  it('applies a font selected from the web-safe dropdown', async () => {
+    const user = userEvent.setup();
+    const draft = makeDraft({fontFamily: 'Arial'});
+    renderEditor(draft);
+
+    await user.click(screen.getByRole('combobox'));
+    await user.click(screen.getByRole('option', {name: 'Georgia'}));
+
+    expect(typographyOf(draft).fontFamily).toBe('Georgia');
+  });
+
+  it('does not touch the draft when clicking the already-active font mode toggle', async () => {
+    const user = userEvent.setup();
+    const draft = makeDraft({fontFamily: 'Arial'});
+    const onUpdate = vi.fn();
+    render(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />
+      </OxygenUIThemeProvider>,
+    );
+
+    await user.click(screen.getByRole('button', {name: 'Use a web-safe font'}));
+
+    expect(onUpdate).not.toHaveBeenCalled();
+  });
+});
+
+describe('TypographyBuilderContent font weights', () => {
+  function renderWithFullTypography() {
+    const draft = {typography: makeFullTypography()} as unknown as Theme;
+    const onUpdate = vi.fn((updater: (d: Theme) => void) => updater(draft));
+    render(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />
+      </OxygenUIThemeProvider>,
+    );
+    return {draft, onUpdate};
+  }
+
+  function typographyRecord(draft: Theme): Record<string, unknown> {
+    return draft.typography as unknown as Record<string, unknown>;
+  }
+
+  it('resets all font weights and propagates them to every variant', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithFullTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    // Font Weights is the first of the three ConfigCards that render a "Reset" action.
+    await user.click(screen.getAllByText('Reset')[0]);
+
+    const typo = typographyRecord(draft);
+    expect(typo['fontWeightLight']).toBe(300);
+    expect(typo['fontWeightRegular']).toBe(400);
+    expect(typo['fontWeightMedium']).toBe(500);
+    expect(typo['fontWeightBold']).toBe(700);
+    // h1 references fontWeightLight per VARIANT_WEIGHT_REF
+    expect((typo['h1'] as Record<string, unknown>)['fontWeight']).toBe(300);
+    // h3 references fontWeightRegular
+    expect((typo['h3'] as Record<string, unknown>)['fontWeight']).toBe(400);
+  });
+
+  it('updates the Light weight and propagates it to variants referencing fontWeightLight', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithFullTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    // Index 0 is the Font Family autocomplete's own combobox; the weight Selects follow it.
+    const comboboxes = screen.getAllByRole('combobox');
+    await user.click(comboboxes[1]);
+    await user.click(screen.getByRole('option', {name: '100 — Thin'}));
+
+    const typo = typographyRecord(draft);
+    expect(typo['fontWeightLight']).toBe(100);
+    expect((typo['h1'] as Record<string, unknown>)['fontWeight']).toBe(100);
+    expect((typo['h2'] as Record<string, unknown>)['fontWeight']).toBe(100);
+  });
+
+  it('updates the Regular weight and propagates it to variants referencing fontWeightRegular', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithFullTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    const comboboxes = screen.getAllByRole('combobox');
+    await user.click(comboboxes[2]);
+    await user.click(screen.getByRole('option', {name: '200 — Extra Light'}));
+
+    const typo = typographyRecord(draft);
+    expect(typo['fontWeightRegular']).toBe(200);
+    expect((typo['h3'] as Record<string, unknown>)['fontWeight']).toBe(200);
+  });
+
+  it('updates the Medium weight and propagates it to variants referencing fontWeightMedium', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithFullTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    const comboboxes = screen.getAllByRole('combobox');
+    await user.click(comboboxes[3]);
+    await user.click(screen.getByRole('option', {name: '600 — Semi Bold'}));
+
+    const typo = typographyRecord(draft);
+    expect(typo['fontWeightMedium']).toBe(600);
+    expect((typo['h6'] as Record<string, unknown>)['fontWeight']).toBe(600);
+  });
+
+  it('updates the Bold weight and propagates it to variants referencing fontWeightBold', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithFullTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    const comboboxes = screen.getAllByRole('combobox');
+    await user.click(comboboxes[4]);
+    // There is no variant mapped to fontWeightBold by default, so only the base value changes.
+    await user.click(screen.getByRole('option', {name: '900 — Black'}));
+
+    const typo = typographyRecord(draft);
+    expect(typo['fontWeightBold']).toBe(900);
+  });
+});
+
+describe('TypographyBuilderContent base sizes', () => {
+  function renderWithFullTypography() {
+    const draft = {typography: makeFullTypography()} as unknown as Theme;
+    const onUpdate = vi.fn((updater: (d: Theme) => void) => updater(draft));
+    render(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />
+      </OxygenUIThemeProvider>,
+    );
+    return {draft, onUpdate};
+  }
+
+  function typographyRecord(draft: Theme): Record<string, unknown> {
+    return draft.typography as unknown as Record<string, unknown>;
+  }
+
+  it('resets base sizes and clears computed variant sizes', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithFullTypography();
+
+    await user.click(screen.getByText('Base Sizes'));
+    // Base Sizes is the second of the three ConfigCards that render a "Reset" action.
+    await user.click(screen.getAllByText('Reset')[1]);
+
+    const typo = typographyRecord(draft);
+    expect(typo['fontSize']).toBe(14);
+    expect(typo['htmlFontSize']).toBe(16);
+    expect((typo['h1'] as Record<string, unknown>)['fontSize']).toBeUndefined();
+    expect((typo['h1'] as Record<string, unknown>)['lineHeight']).toBeUndefined();
+    expect((typo['h1'] as Record<string, unknown>)['letterSpacing']).toBeUndefined();
+  });
+
+  it('changes the base font size slider and clears computed variant sizes', () => {
+    const {draft} = renderWithFullTypography();
+    fireEvent.click(screen.getByText('Base Sizes'));
+
+    const sliders = screen.getAllByRole('slider');
+    fireEvent.change(sliders[0], {target: {value: 18}});
+
+    const typo = typographyRecord(draft);
+    expect(typo['fontSize']).toBe(18);
+    expect((typo['h1'] as Record<string, unknown>)['fontSize']).toBeUndefined();
+  });
+
+  it('changes the html font size slider and clears computed variant sizes', () => {
+    const {draft} = renderWithFullTypography();
+    fireEvent.click(screen.getByText('Base Sizes'));
+
+    const sliders = screen.getAllByRole('slider');
+    fireEvent.change(sliders[1], {target: {value: 20}});
+
+    const typo = typographyRecord(draft);
+    expect(typo['htmlFontSize']).toBe(20);
+    expect((typo['h1'] as Record<string, unknown>)['fontSize']).toBeUndefined();
+  });
+});
+
+describe('TypographyBuilderContent type scale', () => {
+  function renderWithFullTypography() {
+    const draft = {typography: makeFullTypography()} as unknown as Theme;
+    const onUpdate = vi.fn((updater: (d: Theme) => void) => updater(draft));
+    render(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />
+      </OxygenUIThemeProvider>,
+    );
+    return {draft, onUpdate};
+  }
+
+  function typographyRecord(draft: Theme): Record<string, unknown> {
+    return draft.typography as unknown as Record<string, unknown>;
+  }
+
+  it('resets the type scale, clearing computed size/lineHeight/letterSpacing for every variant', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithFullTypography();
+
+    await user.click(screen.getByText('Type Scale'));
+    // Type Scale is the third of the three ConfigCards that render a "Reset" action.
+    await user.click(screen.getAllByText('Reset')[2]);
+
+    const typo = typographyRecord(draft);
+    for (const key of VARIANT_KEYS) {
+      expect((typo[key] as Record<string, unknown>)['fontSize']).toBeUndefined();
+    }
+  });
+
+  it('edits a variant font size directly via its text field', () => {
+    const {draft} = renderWithFullTypography();
+    fireEvent.click(screen.getByText('Type Scale'));
+
+    // h1 is the first entry in TYPE_SCALE_VARIANTS, so its text field is the first textbox.
+    const input = screen.getAllByRole('textbox')[0];
+    fireEvent.change(input, {target: {value: '2.5rem'}});
+
+    const typo = typographyRecord(draft);
+    expect((typo['h1'] as Record<string, unknown>)['fontSize']).toBe('2.5rem');
+  });
+});
+
+describe('TypographyBuilderContent defensive guards', () => {
+  function renderWithoutTypography() {
+    const draft = {} as Theme;
+    const onUpdate = vi.fn((updater: (d: Theme) => void) => updater(draft));
+    render(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />
+      </OxygenUIThemeProvider>,
+    );
+    return {draft, onUpdate};
+  }
+
+  it("applyFont's guard no-ops the font-mode toggle when there is no typography object", async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithoutTypography();
+
+    await user.click(screen.getByRole('button', {name: 'Use a Custom Font'}));
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('the Font Weights reset no-ops when there is no typography object', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithoutTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    await user.click(screen.getAllByText('Reset')[0]);
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('the Light weight select no-ops when there is no typography object', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithoutTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    await user.click(screen.getAllByRole('combobox')[1]);
+    await user.click(screen.getByRole('option', {name: '100 — Thin'}));
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('the Regular weight select no-ops when there is no typography object', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithoutTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    await user.click(screen.getAllByRole('combobox')[2]);
+    await user.click(screen.getByRole('option', {name: '200 — Extra Light'}));
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('the Medium weight select no-ops when there is no typography object', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithoutTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    await user.click(screen.getAllByRole('combobox')[3]);
+    await user.click(screen.getByRole('option', {name: '600 — Semi Bold'}));
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('the Bold weight select no-ops when there is no typography object', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithoutTypography();
+
+    await user.click(screen.getByText('Font Weights'));
+    await user.click(screen.getAllByRole('combobox')[4]);
+    await user.click(screen.getByRole('option', {name: '900 — Black'}));
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('the Base Sizes reset no-ops when there is no typography object', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithoutTypography();
+
+    await user.click(screen.getByText('Base Sizes'));
+    await user.click(screen.getAllByText('Reset')[1]);
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('the base font size slider no-ops when there is no typography object', () => {
+    const {draft} = renderWithoutTypography();
+
+    fireEvent.click(screen.getByText('Base Sizes'));
+    fireEvent.change(screen.getAllByRole('slider')[0], {target: {value: 18}});
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('the HTML font size slider no-ops when there is no typography object', () => {
+    const {draft} = renderWithoutTypography();
+
+    fireEvent.click(screen.getByText('Base Sizes'));
+    fireEvent.change(screen.getAllByRole('slider')[1], {target: {value: 20}});
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('the Type Scale reset no-ops when there is no typography object', async () => {
+    const user = userEvent.setup();
+    const {draft} = renderWithoutTypography();
+
+    await user.click(screen.getByText('Type Scale'));
+    await user.click(screen.getAllByText('Reset')[2]);
+
+    expect(draft.typography).toBeUndefined();
+  });
+
+  it('clearVariantSizes skips variants that are not present on the typography object', async () => {
+    const user = userEvent.setup();
+    // Only fontSize/htmlFontSize are set; every per-variant object (h1, h2, ...) is absent.
+    const draft = {typography: {fontSize: 14, htmlFontSize: 16}} as unknown as Theme;
+    const onUpdate = vi.fn((updater: (d: Theme) => void) => updater(draft));
+    render(
+      <OxygenUIThemeProvider>
+        <TypographyBuilderContent draft={draft} onUpdate={onUpdate} />
+      </OxygenUIThemeProvider>,
+    );
+
+    await user.click(screen.getByText('Base Sizes'));
+    await user.click(screen.getAllByText('Reset')[1]);
+
+    const typo = draft.typography as unknown as Record<string, unknown>;
+    expect(typo['fontSize']).toBe(14);
+    expect(typo['htmlFontSize']).toBe(16);
+    expect(typo['h1']).toBeUndefined();
+  });
+});
diff --git a/frontend/apps/console/src/features/design/components/viewportConstants.ts b/frontend/packages/configure-design/src/components/viewportConstants.ts
similarity index 100%
rename from frontend/apps/console/src/features/design/components/viewportConstants.ts
rename to frontend/packages/configure-design/src/components/viewportConstants.ts
diff --git a/frontend/apps/console/src/features/design/constants/ColorSchemeOptions.tsx b/frontend/packages/configure-design/src/constants/ColorSchemeOptions.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/constants/ColorSchemeOptions.tsx
rename to frontend/packages/configure-design/src/constants/ColorSchemeOptions.tsx
diff --git a/frontend/apps/console/src/features/design/constants/__tests__/ColorSchemeOptions.test.tsx b/frontend/packages/configure-design/src/constants/__tests__/ColorSchemeOptions.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/constants/__tests__/ColorSchemeOptions.test.tsx
rename to frontend/packages/configure-design/src/constants/__tests__/ColorSchemeOptions.test.tsx
diff --git a/frontend/apps/console/src/features/design/constants/__tests__/design-ui-constants.test.ts b/frontend/packages/configure-design/src/constants/__tests__/design-ui-constants.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/design/constants/__tests__/design-ui-constants.test.ts
rename to frontend/packages/configure-design/src/constants/__tests__/design-ui-constants.test.ts
diff --git a/frontend/apps/console/src/features/design/constants/design-ui-constants.ts b/frontend/packages/configure-design/src/constants/design-ui-constants.ts
similarity index 100%
rename from frontend/apps/console/src/features/design/constants/design-ui-constants.ts
rename to frontend/packages/configure-design/src/constants/design-ui-constants.ts
diff --git a/frontend/apps/console/src/features/design/contexts/LayoutBuilder/LayoutBuilderContext.tsx b/frontend/packages/configure-design/src/contexts/LayoutBuilder/LayoutBuilderContext.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/contexts/LayoutBuilder/LayoutBuilderContext.tsx
rename to frontend/packages/configure-design/src/contexts/LayoutBuilder/LayoutBuilderContext.tsx
diff --git a/frontend/apps/console/src/features/design/contexts/LayoutBuilder/LayoutBuilderProvider.tsx b/frontend/packages/configure-design/src/contexts/LayoutBuilder/LayoutBuilderProvider.tsx
similarity index 99%
rename from frontend/apps/console/src/features/design/contexts/LayoutBuilder/LayoutBuilderProvider.tsx
rename to frontend/packages/configure-design/src/contexts/LayoutBuilder/LayoutBuilderProvider.tsx
index 0cb6b9f858..718a051306 100644
--- a/frontend/apps/console/src/features/design/contexts/LayoutBuilder/LayoutBuilderProvider.tsx
+++ b/frontend/packages/configure-design/src/contexts/LayoutBuilder/LayoutBuilderProvider.tsx
@@ -145,7 +145,7 @@ export default function LayoutBuilderProvider({children}: LayoutBuilderProviderP
    */
   const getBaseScreenNames = useCallback(() => {
     const allScreens = getAllScreens();
-    return Object.keys(allScreens).filter((name) => !allScreens[name]?.extends);
+    return Object.keys(allScreens).filter((name) => !allScreens[name]?.['extends']);
   }, [getAllScreens]);
 
   const contextValue: LayoutBuilderContextType = useMemo(
diff --git a/frontend/apps/console/src/features/design/contexts/LayoutBuilder/__tests__/LayoutBuilderProvider.test.tsx b/frontend/packages/configure-design/src/contexts/LayoutBuilder/__tests__/LayoutBuilderProvider.test.tsx
similarity index 83%
rename from frontend/apps/console/src/features/design/contexts/LayoutBuilder/__tests__/LayoutBuilderProvider.test.tsx
rename to frontend/packages/configure-design/src/contexts/LayoutBuilder/__tests__/LayoutBuilderProvider.test.tsx
index f59bbfbba9..aaa7128fe9 100644
--- a/frontend/apps/console/src/features/design/contexts/LayoutBuilder/__tests__/LayoutBuilderProvider.test.tsx
+++ b/frontend/packages/configure-design/src/contexts/LayoutBuilder/__tests__/LayoutBuilderProvider.test.tsx
@@ -59,6 +59,9 @@ function TestConsumer() {
       >
         UpdateBg
       </button>
+      <button type="button" onClick={() => ctx.updateDraftLayout(['screens', 'brandNew', 'title'], 'Hello')}>
+        UpdateNestedNew
+      </button>
       <button type="button" onClick={ctx.resetDraft}>
         Reset
       </button>
@@ -337,6 +340,70 @@ describe('LayoutBuilderProvider', () => {
         expect(screen.getByTestId('isDirty')).toHaveTextContent('true');
       });
     });
+
+    it('creates missing intermediate objects along the path', async () => {
+      const user = userEvent.setup();
+      render(
+        <LayoutBuilderProvider>
+          <TestConsumer />
+        </LayoutBuilderProvider>,
+      );
+
+      await user.click(screen.getByText('UpdateNestedNew'));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('allScreens').textContent).toContain('brandNew');
+      });
+    });
+
+    it('does not throw and leaves the draft unset when there is no draft layout to update', async () => {
+      mockUseGetLayout.mockReturnValue({
+        data: {id: 'layout-123', displayName: 'Default Layout', layout: undefined},
+        isLoading: false,
+      });
+
+      const user = userEvent.setup();
+      render(
+        <LayoutBuilderProvider>
+          <TestConsumer />
+        </LayoutBuilderProvider>,
+      );
+
+      expect(screen.getByTestId('allScreens')).toHaveTextContent('');
+
+      await user.click(screen.getByText('UpdateBg'));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('isDirty')).toHaveTextContent('true');
+      });
+      expect(screen.getByTestId('allScreens')).toHaveTextContent('');
+    });
+  });
+
+  describe('layout data transitioning from loading to loaded', () => {
+    it('initializes the draft once the layout finishes loading', async () => {
+      mockUseGetLayout.mockReturnValue({data: undefined, isLoading: true});
+      const {rerender} = render(
+        <LayoutBuilderProvider>
+          <TestConsumer />
+        </LayoutBuilderProvider>,
+      );
+
+      mockUseGetLayout.mockReturnValue({
+        data: {id: 'layout-123', displayName: 'Default Layout', layout: mockLayout},
+        isLoading: false,
+      });
+      rerender(
+        <LayoutBuilderProvider>
+          <TestConsumer />
+        </LayoutBuilderProvider>,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('selectedScreen')).toHaveTextContent('auth');
+      });
+      expect(screen.getByTestId('allScreens').textContent).toContain('auth');
+    });
   });
 
   describe('resetDraft', () => {
diff --git a/frontend/apps/console/src/features/design/contexts/LayoutBuilder/__tests__/useLayoutBuilder.test.tsx b/frontend/packages/configure-design/src/contexts/LayoutBuilder/__tests__/useLayoutBuilder.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/contexts/LayoutBuilder/__tests__/useLayoutBuilder.test.tsx
rename to frontend/packages/configure-design/src/contexts/LayoutBuilder/__tests__/useLayoutBuilder.test.tsx
diff --git a/frontend/apps/console/src/features/design/contexts/LayoutBuilder/useLayoutBuilder.tsx b/frontend/packages/configure-design/src/contexts/LayoutBuilder/useLayoutBuilder.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/contexts/LayoutBuilder/useLayoutBuilder.tsx
rename to frontend/packages/configure-design/src/contexts/LayoutBuilder/useLayoutBuilder.tsx
diff --git a/frontend/apps/console/src/features/design/contexts/ThemeBuilder/ThemeBuilderContext.tsx b/frontend/packages/configure-design/src/contexts/ThemeBuilder/ThemeBuilderContext.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/contexts/ThemeBuilder/ThemeBuilderContext.tsx
rename to frontend/packages/configure-design/src/contexts/ThemeBuilder/ThemeBuilderContext.tsx
diff --git a/frontend/apps/console/src/features/design/contexts/ThemeBuilder/ThemeBuilderProvider.tsx b/frontend/packages/configure-design/src/contexts/ThemeBuilder/ThemeBuilderProvider.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/contexts/ThemeBuilder/ThemeBuilderProvider.tsx
rename to frontend/packages/configure-design/src/contexts/ThemeBuilder/ThemeBuilderProvider.tsx
diff --git a/frontend/apps/console/src/features/design/contexts/ThemeBuilder/__tests__/ThemeBuilderProvider.test.tsx b/frontend/packages/configure-design/src/contexts/ThemeBuilder/__tests__/ThemeBuilderProvider.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/contexts/ThemeBuilder/__tests__/ThemeBuilderProvider.test.tsx
rename to frontend/packages/configure-design/src/contexts/ThemeBuilder/__tests__/ThemeBuilderProvider.test.tsx
diff --git a/frontend/apps/console/src/features/design/contexts/ThemeBuilder/__tests__/useThemeBuilder.test.tsx b/frontend/packages/configure-design/src/contexts/ThemeBuilder/__tests__/useThemeBuilder.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/contexts/ThemeBuilder/__tests__/useThemeBuilder.test.tsx
rename to frontend/packages/configure-design/src/contexts/ThemeBuilder/__tests__/useThemeBuilder.test.tsx
diff --git a/frontend/apps/console/src/features/design/contexts/ThemeBuilder/useThemeBuilder.tsx b/frontend/packages/configure-design/src/contexts/ThemeBuilder/useThemeBuilder.tsx
similarity index 100%
rename from frontend/apps/console/src/features/design/contexts/ThemeBuilder/useThemeBuilder.tsx
rename to frontend/packages/configure-design/src/contexts/ThemeBuilder/useThemeBuilder.tsx
diff --git a/frontend/packages/configure-design/src/hooks/useDesignRoutes.ts b/frontend/packages/configure-design/src/hooks/useDesignRoutes.ts
new file mode 100644
index 0000000000..8939c5e1dd
--- /dev/null
+++ b/frontend/packages/configure-design/src/hooks/useDesignRoutes.ts
@@ -0,0 +1,52 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {useRoutes} from '@thunderid/contexts';
+
+/**
+ * Route paths this package needs from the host application.
+ *
+ * The host supplies these via `@thunderid/contexts`'s `RoutesProvider`. When absent (e.g. this
+ * package rendered standalone in Storybook or a unit test), `useDesignRoutes` falls back to
+ * `defaultDesignRoutePaths` below.
+ *
+ * @public
+ */
+export interface DesignRoutePaths {
+  design: {
+    list: () => string;
+    themesCreate: () => string;
+    themeDetail: (themeId: string) => string;
+    layoutDetail: (layoutId: string) => string;
+  };
+}
+
+/**
+ * Default design (theme/layout builder) paths, used when no host-supplied override is present.
+ *
+ * @public
+ */
+export const defaultDesignRoutePaths: DesignRoutePaths = {
+  design: {
+    list: () => '/design',
+    themesCreate: () => '/design/themes/create',
+    themeDetail: (themeId) => `/design/themes/${themeId}`,
+    layoutDetail: (layoutId) => `/design/layouts/${layoutId}`,
+  },
+};
+
+/**
+ * Resolves the design route paths, preferring the host application's configuration (supplied via
+ * `RoutesProvider`) and falling back to this package's own defaults.
+ *
+ * Components should never hardcode these destination paths; they should call this hook and build
+ * the destination from the returned functions instead.
+ *
+ * @public
+ */
+export default function useDesignRoutes(): DesignRoutePaths {
+  const routes = useRoutes<Partial<DesignRoutePaths>>();
+  return {
+    design: routes.design ?? defaultDesignRoutePaths.design,
+  };
+}
diff --git a/frontend/packages/configure-design/src/index.ts b/frontend/packages/configure-design/src/index.ts
new file mode 100644
index 0000000000..c7d51e7a43
--- /dev/null
+++ b/frontend/packages/configure-design/src/index.ts
@@ -0,0 +1,38 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// GatePreview
+export {default as GatePreview} from './GatePreview/GatePreview';
+export {default as PreviewThemeProvider} from './GatePreview/PreviewThemeProvider';
+
+// Components
+export {default as LayoutPresetThumbnail, type LayoutPresetVariant} from './components/layouts/LayoutPresetThumbnail';
+export {default as LayoutThumbnail} from './components/layouts/LayoutThumbnail';
+export {default as ThemeThumbnail} from './components/themes/ThemeThumbnail';
+
+// Contexts
+export {default as LayoutBuilderProvider} from './contexts/LayoutBuilder/LayoutBuilderProvider';
+export {default as useLayoutBuilder} from './contexts/LayoutBuilder/useLayoutBuilder';
+export {default as LayoutBuilderContext} from './contexts/LayoutBuilder/LayoutBuilderContext';
+
+export {default as ThemeBuilderProvider} from './contexts/ThemeBuilder/ThemeBuilderProvider';
+export {default as useThemeBuilder} from './contexts/ThemeBuilder/useThemeBuilder';
+export {default as ThemeBuilderContext} from './contexts/ThemeBuilder/ThemeBuilderContext';
+
+// Constants
+export {VIEWPORT_WIDTHS, VIEWPORT_HEIGHTS} from './components/viewportConstants';
+export {default as ColorSchemeOptions} from './constants/ColorSchemeOptions';
+export {default as DesignUIConstants} from './constants/design-ui-constants';
+
+// Models
+export * from './models/theme-builder';
+
+// Pages
+export {default as DesignPage} from './pages/DesignPage';
+export {default as LayoutBuilderPage} from './pages/LayoutBuilderPage';
+export {default as ThemeBuilderPage} from './pages/ThemeBuilderPage';
+export {default as ThemeCreatePage} from './pages/ThemeCreatePage';
+
+// Routes
+export type {DesignRoutePaths} from './hooks/useDesignRoutes';
+export {defaultDesignRoutePaths, default as useDesignRoutes} from './hooks/useDesignRoutes';
diff --git a/frontend/apps/console/src/features/design/models/theme-builder.ts b/frontend/packages/configure-design/src/models/theme-builder.ts
similarity index 100%
rename from frontend/apps/console/src/features/design/models/theme-builder.ts
rename to frontend/packages/configure-design/src/models/theme-builder.ts
diff --git a/frontend/apps/console/src/features/design/pages/DesignPage.tsx b/frontend/packages/configure-design/src/pages/DesignPage.tsx
similarity index 95%
rename from frontend/apps/console/src/features/design/pages/DesignPage.tsx
rename to frontend/packages/configure-design/src/pages/DesignPage.tsx
index dbf8913fba..3c0a165afa 100644
--- a/frontend/apps/console/src/features/design/pages/DesignPage.tsx
+++ b/frontend/packages/configure-design/src/pages/DesignPage.tsx
@@ -10,7 +10,6 @@ import {ArrowUpRight, LayoutTemplate, Palette, Plus} from '@wso2/oxygen-ui-icons
 import {useState, useCallback, type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
 import ItemCard from '../components/common/ItemCard';
 import SectionHeader from '../components/common/SectionHeader';
 import LayoutPresetThumbnail, {type LayoutPresetVariant} from '../components/layouts/LayoutPresetThumbnail';
@@ -18,6 +17,7 @@ import LayoutThumbnail from '../components/layouts/LayoutThumbnail';
 import ThemeDeleteDialog from '../components/themes/ThemeDeleteDialog';
 import ThemeThumbnail from '../components/themes/ThemeThumbnail';
 import DesignUIConstants from '../constants/design-ui-constants';
+import useDesignRoutes from '../hooks/useDesignRoutes';
 
 const LAYOUT_PRESET_VARIANTS: readonly LayoutPresetVariant[] = ['centered', 'split', 'fullscreen', 'popup'];
 
@@ -28,6 +28,7 @@ function isLayoutPresetVariant(handle: string): handle is LayoutPresetVariant {
 export default function DesignPage(): JSX.Element {
   const {t} = useTranslation('design');
   const navigate = useNavigate();
+  const routes = useDesignRoutes();
   const {showToast} = useToast();
   const {data: themesData, isLoading: themesLoading, error: themesError, refetch: refetchThemes} = useGetThemes();
   const {data: layoutsData, error: layoutsError, refetch: refetchLayouts} = useGetLayouts();
@@ -47,7 +48,7 @@ export default function DesignPage(): JSX.Element {
         displayName: 'Centered',
         layout: {},
       });
-      await navigate(RouteConfig.design.layoutDetail(created.id));
+      await navigate(routes.design.layoutDetail(created.id));
     } catch (err) {
       showToast(
         getErrorMessage(
@@ -59,7 +60,7 @@ export default function DesignPage(): JSX.Element {
         'error',
       );
     }
-  }, [navigate, createLayout, showToast, t]);
+  }, [navigate, createLayout, showToast, t, routes.design]);
 
   const allThemes = themesData?.themes ?? [];
   const visibleThemes = showAllThemes ? allThemes : allThemes.slice(0, DesignUIConstants.INITIAL_LIMIT);
@@ -89,7 +90,7 @@ export default function DesignPage(): JSX.Element {
               startIcon={<Plus size={16} />}
               onClick={() => {
                 (async () => {
-                  await navigate(RouteConfig.design.themesCreate());
+                  await navigate(routes.design.themesCreate());
                 })().catch(() => {
                   // Ignore navigation errors
                 });
@@ -120,7 +121,7 @@ export default function DesignPage(): JSX.Element {
                           isReadOnly={theme.isReadOnly}
                           onClick={() => {
                             (async () => {
-                              await navigate(RouteConfig.design.themeDetail(theme.id));
+                              await navigate(routes.design.themeDetail(theme.id));
                             })().catch(() => {
                               // Ignore navigation errors
                             });
@@ -219,7 +220,7 @@ export default function DesignPage(): JSX.Element {
                     name={layout.displayName}
                     onClick={() => {
                       (async () => {
-                        await navigate(RouteConfig.design.layoutDetail(layout.id));
+                        await navigate(routes.design.layoutDetail(layout.id));
                       })().catch(() => {
                         // Ignore navigation errors
                       });
diff --git a/frontend/apps/console/src/features/design/pages/LayoutBuilderPage.tsx b/frontend/packages/configure-design/src/pages/LayoutBuilderPage.tsx
similarity index 96%
rename from frontend/apps/console/src/features/design/pages/LayoutBuilderPage.tsx
rename to frontend/packages/configure-design/src/pages/LayoutBuilderPage.tsx
index b06f79d0fa..e0be4c1511 100644
--- a/frontend/apps/console/src/features/design/pages/LayoutBuilderPage.tsx
+++ b/frontend/packages/configure-design/src/pages/LayoutBuilderPage.tsx
@@ -8,8 +8,6 @@ import {ArrowLeft, Crosshair, Layers, Save} from '@wso2/oxygen-ui-icons-react';
 import {useCallback, useMemo, useRef, useState, type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import GatePreview from '../../../components/GatePreview/GatePreview';
-import RouteConfig from '../../../configs/RouteConfig';
 import LayoutConfigPanel from '../components/LayoutConfigPanel';
 import LayoutPreviewPanel from '../components/LayoutPreviewPanel';
 import AddScreenRow from '../components/layouts/AddScreenRow';
@@ -17,11 +15,14 @@ import type {CustomCSSEditorHandle} from '../components/layouts/CustomCSSEditor'
 import ScreenListItem from '../components/layouts/ScreenListItem';
 import DesignUIConstants from '../constants/design-ui-constants';
 import useLayoutBuilder from '../contexts/LayoutBuilder/useLayoutBuilder';
+import GatePreview from '../GatePreview/GatePreview';
+import useDesignRoutes from '../hooks/useDesignRoutes';
 
 export default function LayoutBuilderPage(): JSX.Element {
   const {t} = useTranslation('design');
   const {mode, systemMode} = useColorScheme();
   const navigate = useNavigate();
+  const routes = useDesignRoutes();
 
   const {
     layoutId,
@@ -62,13 +63,13 @@ export default function LayoutBuilderPage(): JSX.Element {
 
   // Extract page background from the selected screen draft
   const currentScreenDef = selectedScreen ? (screenDraft ?? draftLayout?.screens?.[selectedScreen]) : undefined;
-  const pageBackground = (currentScreenDef?.background as Record<string, unknown> | undefined)?.value as
+  const pageBackground = (currentScreenDef?.['background'] as Record<string, unknown> | undefined)?.['value'] as
     | string
     | undefined;
 
   // Stylesheets from draft layout (layout-level, not per-screen)
-  const draftHead = (draftLayout as Record<string, unknown> | null)?.head as Record<string, unknown> | undefined;
-  const rawStylesheets = draftHead?.stylesheets as Stylesheet[] | undefined;
+  const draftHead = (draftLayout as Record<string, unknown> | null)?.['head'] as Record<string, unknown> | undefined;
+  const rawStylesheets = draftHead?.['stylesheets'] as Stylesheet[] | undefined;
   const stylesheets = useMemo(() => rawStylesheets ?? [], [rawStylesheets]);
 
   const handleStylesheetsChange = useCallback(
@@ -111,7 +112,7 @@ export default function LayoutBuilderPage(): JSX.Element {
 
   const handleNavigateBack = (): void => {
     (async () => {
-      await navigate(RouteConfig.design.list());
+      await navigate(routes.design.list());
     })().catch(() => {
       // Ignore navigation errors
     });
@@ -161,7 +162,7 @@ export default function LayoutBuilderPage(): JSX.Element {
           <ScreenListItem
             key={name}
             name={name}
-            extendsBase={allScreens[name]?.extends as string | undefined}
+            extendsBase={allScreens[name]?.['extends'] as string | undefined}
             isSelected={selectedScreen === name}
             onClick={() => setSelectedScreen(name)}
           />
diff --git a/frontend/apps/console/src/features/design/pages/ThemeBuilderPage.tsx b/frontend/packages/configure-design/src/pages/ThemeBuilderPage.tsx
similarity index 96%
rename from frontend/apps/console/src/features/design/pages/ThemeBuilderPage.tsx
rename to frontend/packages/configure-design/src/pages/ThemeBuilderPage.tsx
index 871f418f06..beac0083a4 100644
--- a/frontend/apps/console/src/features/design/pages/ThemeBuilderPage.tsx
+++ b/frontend/packages/configure-design/src/pages/ThemeBuilderPage.tsx
@@ -7,18 +7,19 @@ import {ArrowLeft, Save, Trash, Undo2} from '@wso2/oxygen-ui-icons-react';
 import {useCallback, useRef, useState, type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
 import ThemeConfigPanel from '../components/ThemeConfigPanel';
 import ThemePreviewPanel from '../components/ThemePreviewPanel';
 import ThemeBuilderLeftPanel from '../components/themes/ThemeBuilderLeftPanel';
 import ThemeDeleteDialog from '../components/themes/ThemeDeleteDialog';
 import DesignUIConstants from '../constants/design-ui-constants';
 import useThemeBuilder from '../contexts/ThemeBuilder/useThemeBuilder';
+import useDesignRoutes from '../hooks/useDesignRoutes';
 
 export default function ThemeBuilderPage(): JSX.Element {
   const {t} = useTranslation('design');
   const {mode, systemMode} = useColorScheme();
   const navigate = useNavigate();
+  const routes = useDesignRoutes();
 
   const {
     themeId,
@@ -44,13 +45,13 @@ export default function ThemeBuilderPage(): JSX.Element {
 
   const handleBack = useCallback(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    navigate(RouteConfig.design.list());
-  }, [navigate]);
+    navigate(routes.design.list());
+  }, [navigate, routes.design]);
 
   const handleDeleteSuccess = useCallback(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    navigate(RouteConfig.design.list());
-  }, [navigate]);
+    navigate(routes.design.list());
+  }, [navigate, routes.design]);
 
   const bgColor = (systemMode ?? mode) === 'dark' ? '#141414' : '#f6f7f9';
 
diff --git a/frontend/apps/console/src/features/design/pages/ThemeCreatePage.tsx b/frontend/packages/configure-design/src/pages/ThemeCreatePage.tsx
similarity index 96%
rename from frontend/apps/console/src/features/design/pages/ThemeCreatePage.tsx
rename to frontend/packages/configure-design/src/pages/ThemeCreatePage.tsx
index 142672f584..fb17e068a2 100644
--- a/frontend/apps/console/src/features/design/pages/ThemeCreatePage.tsx
+++ b/frontend/packages/configure-design/src/pages/ThemeCreatePage.tsx
@@ -8,10 +8,10 @@ import {Alert, Box, Button, CircularProgress} from '@wso2/oxygen-ui';
 import {useState, useCallback, useMemo, type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import GatePreview from '../../../components/GatePreview/GatePreview';
-import RouteConfig from '../../../configs/RouteConfig';
 import ConfigureThemeColor from '../components/create-theme/ConfigureThemeColor';
 import ConfigureThemeName from '../components/create-theme/ConfigureThemeName';
+import GatePreview from '../GatePreview/GatePreview';
+import useDesignRoutes from '../hooks/useDesignRoutes';
 import buildThemeFromPrimaryColor from '../utils/buildThemeFromPrimaryColor';
 
 type ThemeCreateStep = 'NAME' | 'COLOR';
@@ -48,6 +48,7 @@ const DEFAULT_PRIMARY_COLOR = '#4f46e5';
 export default function ThemeCreatePage(): JSX.Element {
   const {t} = useTranslation('design');
   const navigate = useNavigate();
+  const routes = useDesignRoutes();
   const createTheme = useCreateTheme();
   const {data: themesData} = useGetThemes();
 
@@ -87,7 +88,7 @@ export default function ThemeCreatePage(): JSX.Element {
   };
 
   const handleClose = (): void => {
-    void navigate(RouteConfig.design.list());
+    void navigate(routes.design.list());
   };
 
   const handleNext = (): void => {
@@ -136,7 +137,7 @@ export default function ThemeCreatePage(): JSX.Element {
       },
       {
         onSuccess: (created) => {
-          Promise.resolve(navigate(RouteConfig.design.themeDetail(created.id))).catch(() => null);
+          Promise.resolve(navigate(routes.design.themeDetail(created.id))).catch(() => null);
         },
         onError: (err: Error) => {
           setError(
diff --git a/frontend/apps/console/src/features/design/pages/__tests__/DesignPage.test.tsx b/frontend/packages/configure-design/src/pages/__tests__/DesignPage.test.tsx
similarity index 57%
rename from frontend/apps/console/src/features/design/pages/__tests__/DesignPage.test.tsx
rename to frontend/packages/configure-design/src/pages/__tests__/DesignPage.test.tsx
index e2e12dba2c..991ffc2d7c 100644
--- a/frontend/apps/console/src/features/design/pages/__tests__/DesignPage.test.tsx
+++ b/frontend/packages/configure-design/src/pages/__tests__/DesignPage.test.tsx
@@ -21,18 +21,6 @@ vi.mock('react-router', async () => {
   };
 });
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, fallback?: string | {defaultValue?: string} | Record<string, unknown>) => {
-      if (typeof fallback === 'string') return fallback || key;
-      if (fallback && typeof fallback === 'object' && 'defaultValue' in fallback) {
-        return (fallback.defaultValue as string) ?? key;
-      }
-      return key;
-    },
-  }),
-}));
-
 vi.mock('@thunderid/contexts', async () => {
   const actual = await vi.importActual<typeof import('@thunderid/contexts')>('@thunderid/contexts');
   return {
@@ -41,14 +29,22 @@ vi.mock('@thunderid/contexts', async () => {
   };
 });
 
+interface MockTheme {
+  id: string;
+  displayName: string;
+  isReadOnly?: boolean;
+}
+
 let themesError: Error | null = null;
 let layoutsError: Error | null = null;
 let layoutsList: {id: string; handle: string; displayName: string; layout: unknown}[] = [];
+let themesList: MockTheme[] = [];
+let themesLoadingState = false;
 
 vi.mock('@thunderid/design', () => ({
   useGetThemes: () => ({
-    data: {themes: []},
-    isLoading: false,
+    data: {themes: themesList},
+    isLoading: themesLoadingState,
     error: themesError,
     refetch: mockRefetchThemes,
   }),
@@ -68,6 +64,8 @@ describe('DesignPage', () => {
     themesError = null;
     layoutsError = null;
     layoutsList = [{id: 'layout-1', handle: 'centered', displayName: 'Centered', layout: {}}];
+    themesList = [];
+    themesLoadingState = false;
   });
 
   it('renders the themes and layouts section headers', () => {
@@ -159,4 +157,106 @@ describe('DesignPage', () => {
     });
     expect(mockShowToast).not.toHaveBeenCalled();
   });
+
+  it('navigates to the themes create page when Add Theme is clicked', async () => {
+    render(<DesignPage />);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Add Theme'}));
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/design/themes/create');
+    });
+  });
+
+  it('renders skeleton placeholders while themes are loading', () => {
+    themesLoadingState = true;
+
+    const {container} = render(<DesignPage />);
+
+    expect(container.querySelectorAll('.MuiSkeleton-root').length).toBeGreaterThan(0);
+  });
+
+  it('renders every theme returned by the backend', () => {
+    themesList = [
+      {id: 'theme-1', displayName: 'Midnight'},
+      {id: 'theme-2', displayName: 'Sunrise'},
+    ];
+
+    render(<DesignPage />);
+
+    expect(screen.getByText('Midnight')).toBeInTheDocument();
+    expect(screen.getByText('Sunrise')).toBeInTheDocument();
+  });
+
+  it('navigates to a theme when its card is clicked', () => {
+    themesList = [{id: 'theme-1', displayName: 'Midnight'}];
+
+    render(<DesignPage />);
+
+    fireEvent.click(screen.getByText('Midnight'));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/design/themes/theme-1');
+  });
+
+  it('opens the delete dialog for an editable theme', () => {
+    themesList = [{id: 'theme-1', displayName: 'Midnight', isReadOnly: false}];
+
+    render(<DesignPage />);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Delete'}));
+
+    expect(screen.getByText('Delete Theme')).toBeInTheDocument();
+  });
+
+  it('does not render a delete action for a read-only theme', () => {
+    themesList = [{id: 'theme-1', displayName: 'Midnight', isReadOnly: true}];
+
+    render(<DesignPage />);
+
+    expect(screen.queryByRole('button', {name: 'Delete'})).not.toBeInTheDocument();
+  });
+
+  it('closes the delete dialog when it is dismissed', async () => {
+    themesList = [{id: 'theme-1', displayName: 'Midnight'}];
+
+    render(<DesignPage />);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Delete'}));
+    expect(screen.getByText('Delete Theme')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', {name: 'Cancel'}));
+
+    await waitFor(() => {
+      expect(screen.queryByText('Delete Theme')).not.toBeInTheDocument();
+    });
+  });
+
+  it('shows a "show more" affordance when there are more themes than the initial limit', () => {
+    themesList = Array.from({length: 10}, (_, i) => ({id: `theme-${i}`, displayName: `Theme ${i}`}));
+
+    render(<DesignPage />);
+
+    expect(screen.getByText('Show 2 more')).toBeInTheDocument();
+    expect(screen.queryByText('Theme 9')).not.toBeInTheDocument();
+  });
+
+  it('reveals every theme after clicking "show more"', () => {
+    themesList = Array.from({length: 10}, (_, i) => ({id: `theme-${i}`, displayName: `Theme ${i}`}));
+
+    render(<DesignPage />);
+
+    fireEvent.click(screen.getByText('Show 2 more'));
+
+    expect(screen.getByText('Theme 9')).toBeInTheDocument();
+  });
+
+  it('renders an inline read error for layouts and retries when its action is clicked', () => {
+    layoutsError = new Error('Network error');
+
+    render(<DesignPage />);
+
+    fireEvent.click(screen.getAllByRole('button', {name: /Refresh/i})[0]);
+
+    expect(mockRefetchLayouts).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/frontend/packages/configure-design/src/pages/__tests__/LayoutBuilderPage.test.tsx b/frontend/packages/configure-design/src/pages/__tests__/LayoutBuilderPage.test.tsx
new file mode 100644
index 0000000000..81139b155a
--- /dev/null
+++ b/frontend/packages/configure-design/src/pages/__tests__/LayoutBuilderPage.test.tsx
@@ -0,0 +1,348 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import userEvent from '@testing-library/user-event';
+import {render, screen} from '@thunderid/test-utils';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import LayoutBuilderPage from '../LayoutBuilderPage';
+
+interface MockTheme {
+  id: string;
+  displayName: string;
+}
+
+interface UseGetThemesResult {
+  data: {themes: MockTheme[]} | undefined;
+}
+
+interface UseGetThemeResult {
+  data: {theme?: unknown} | undefined;
+}
+
+const {mockNavigate, mockUseLayoutBuilder, mockUseGetThemes, mockUseGetTheme, mockAddScreen, mockSetSelectedScreen} =
+  vi.hoisted(() => ({
+    mockNavigate: vi.fn(),
+    mockUseLayoutBuilder: vi.fn<() => BuilderState>(),
+    mockUseGetThemes: vi.fn<() => UseGetThemesResult>(),
+    mockUseGetTheme: vi.fn<(id: string) => UseGetThemeResult>(),
+    mockAddScreen: vi.fn(),
+    mockSetSelectedScreen: vi.fn(),
+  }));
+
+vi.mock('react-router', async () => {
+  const actual = await vi.importActual('react-router');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+vi.mock('@thunderid/design', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@thunderid/design')>();
+  return {
+    ...actual,
+    useGetThemes: () => mockUseGetThemes(),
+    useGetTheme: (id: string) => mockUseGetTheme(id),
+  };
+});
+
+vi.mock('../../contexts/LayoutBuilder/useLayoutBuilder', () => ({
+  default: () => mockUseLayoutBuilder(),
+}));
+
+vi.mock('../../components/LayoutConfigPanel', () => ({
+  default: () => <div data-testid="layout-config-panel" />,
+}));
+
+vi.mock('../../components/LayoutPreviewPanel', () => ({
+  default: () => <div data-testid="layout-preview-panel" />,
+}));
+
+vi.mock('../../GatePreview/GatePreview', () => ({
+  default: ({onSelectSelector, toolbarEnd}: {onSelectSelector: (selector: string) => void; toolbarEnd?: unknown}) => (
+    <div data-testid="gate-preview">
+      {toolbarEnd as React.ReactNode}
+      <button type="button" onClick={() => onSelectSelector('.my-class')}>
+        Pick selector
+      </button>
+    </div>
+  ),
+}));
+
+interface BuilderState {
+  layoutId: string | null;
+  handle: string | null;
+  displayName: string | null;
+  draftLayout: Record<string, unknown> | null;
+  updateDraftLayout: ReturnType<typeof vi.fn>;
+  selectedScreen: string | null;
+  setSelectedScreen: ReturnType<typeof vi.fn>;
+  screenDraft: Record<string, unknown> | null;
+  isDirty: boolean;
+  addScreen: ReturnType<typeof vi.fn>;
+  getAllScreens: () => Record<string, Record<string, unknown>>;
+  getBaseScreenNames: () => string[];
+  setScreenDraft: ReturnType<typeof vi.fn>;
+  setIsDirty: ReturnType<typeof vi.fn>;
+}
+
+function makeBuilderState(overrides: Partial<BuilderState> = {}): BuilderState {
+  return {
+    layoutId: 'layout-1',
+    handle: 'split-screen',
+    displayName: 'Split Screen',
+    draftLayout: {screens: {auth: {}}},
+    updateDraftLayout: vi.fn(),
+    selectedScreen: null,
+    setSelectedScreen: mockSetSelectedScreen,
+    screenDraft: null,
+    isDirty: false,
+    addScreen: mockAddScreen,
+    getAllScreens: () => ({auth: {}, register: {extends: 'auth'}}),
+    getBaseScreenNames: () => ['auth'],
+    setScreenDraft: vi.fn(),
+    setIsDirty: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe('LayoutBuilderPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseLayoutBuilder.mockReturnValue(makeBuilderState());
+    mockUseGetThemes.mockReturnValue({data: {themes: []}});
+    mockUseGetTheme.mockReturnValue({data: undefined});
+  });
+
+  it('navigates back to the design list when "Back to Design" is clicked', async () => {
+    const user = userEvent.setup();
+    render(<LayoutBuilderPage />);
+
+    await user.click(screen.getByRole('button', {name: 'Back to Design'}));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/design');
+  });
+
+  it('renders the screen list and the layout preview panel for a non-centered layout', () => {
+    render(<LayoutBuilderPage />);
+
+    expect(screen.getByText('Screens')).toBeInTheDocument();
+    expect(screen.getByText('auth')).toBeInTheDocument();
+    expect(screen.getByText('register')).toBeInTheDocument();
+    expect(screen.getByTestId('layout-preview-panel')).toBeInTheDocument();
+    expect(screen.queryByTestId('gate-preview')).not.toBeInTheDocument();
+  });
+
+  it('shows the screen count in the screens panel header', () => {
+    render(<LayoutBuilderPage />);
+
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('selects a screen when its list item is clicked', async () => {
+    const user = userEvent.setup();
+    render(<LayoutBuilderPage />);
+
+    await user.click(screen.getByText('auth'));
+
+    expect(mockSetSelectedScreen).toHaveBeenCalledWith('auth');
+  });
+
+  it('adds a new screen through the add-screen row', async () => {
+    const user = userEvent.setup();
+    render(<LayoutBuilderPage />);
+
+    await user.click(screen.getByRole('button', {name: 'Add screen'}));
+    await user.type(screen.getByPlaceholderText('Screen name…'), 'confirm');
+    await user.click(screen.getByRole('button', {name: 'Add'}));
+
+    expect(mockAddScreen).toHaveBeenCalledWith('confirm', 'auth');
+  });
+
+  it('disables the Save button when there are no unsaved changes', () => {
+    render(<LayoutBuilderPage />);
+
+    expect(screen.getByRole('button', {name: 'Save'})).toBeDisabled();
+  });
+
+  it('enables the Save button and invokes the registered save handler when dirty', async () => {
+    mockUseLayoutBuilder.mockReturnValue(makeBuilderState({isDirty: true}));
+    const user = userEvent.setup();
+    render(<LayoutBuilderPage />);
+
+    const saveButton = screen.getByRole('button', {name: 'Save'});
+    expect(saveButton).toBeEnabled();
+
+    await user.click(saveButton);
+    // No save handler was registered by the (mocked) LayoutConfigPanel, so this should not throw.
+    expect(saveButton).toBeEnabled();
+  });
+
+  it('shows the Constraints header in the right panel when no screen is selected', () => {
+    render(<LayoutBuilderPage />);
+
+    expect(screen.getByText('Constraints')).toBeInTheDocument();
+  });
+
+  it('shows a screen-specific header in the right panel when a screen is selected', () => {
+    mockUseLayoutBuilder.mockReturnValue(makeBuilderState({selectedScreen: 'auth'}));
+
+    render(<LayoutBuilderPage />);
+
+    expect(screen.getByText('Screen — auth')).toBeInTheDocument();
+  });
+
+  it('renders the GatePreview canvas and hides the screens panel for a centered layout', () => {
+    mockUseLayoutBuilder.mockReturnValue(makeBuilderState({handle: 'centered'}));
+
+    render(<LayoutBuilderPage />);
+
+    expect(screen.getByTestId('gate-preview')).toBeInTheDocument();
+    expect(screen.queryByTestId('layout-preview-panel')).not.toBeInTheDocument();
+    expect(screen.queryByText('Screens')).not.toBeInTheDocument();
+  });
+
+  it('shows the Custom CSS header in the right panel for a centered layout', () => {
+    mockUseLayoutBuilder.mockReturnValue(makeBuilderState({handle: 'centered'}));
+
+    render(<LayoutBuilderPage />);
+
+    expect(screen.getByText('Custom CSS')).toBeInTheDocument();
+  });
+
+  it('shows a theme picker in the centered-layout toolbar when themes are available', () => {
+    mockUseLayoutBuilder.mockReturnValue(makeBuilderState({handle: 'centered'}));
+    mockUseGetThemes.mockReturnValue({data: {themes: [{id: 'theme-1', displayName: 'Midnight'}]}});
+
+    render(<LayoutBuilderPage />);
+
+    expect(screen.getByPlaceholderText('Theme')).toBeInTheDocument();
+  });
+
+  it('switches the previewed theme when a different option is picked from the theme picker', async () => {
+    mockUseLayoutBuilder.mockReturnValue(makeBuilderState({handle: 'centered'}));
+    mockUseGetThemes.mockReturnValue({
+      data: {
+        themes: [
+          {id: 'theme-1', displayName: 'Midnight'},
+          {id: 'theme-2', displayName: 'Sunrise'},
+        ],
+      },
+    });
+    const user = userEvent.setup();
+    render(<LayoutBuilderPage />);
+
+    // Defaults to previewing the first theme in the list.
+    expect(mockUseGetTheme).toHaveBeenCalledWith('theme-1');
+
+    const input = screen.getByPlaceholderText('Theme');
+    await user.click(input);
+    await user.click(screen.getByRole('option', {name: 'Sunrise'}));
+
+    expect(mockUseGetTheme).toHaveBeenCalledWith('theme-2');
+  });
+
+  it('does not show a theme picker when no themes are available', () => {
+    mockUseLayoutBuilder.mockReturnValue(makeBuilderState({handle: 'centered'}));
+    mockUseGetThemes.mockReturnValue({data: {themes: []}});
+
+    render(<LayoutBuilderPage />);
+
+    expect(screen.queryByPlaceholderText('Theme')).not.toBeInTheDocument();
+  });
+
+  it('toggles the element inspector button state when clicked', async () => {
+    mockUseLayoutBuilder.mockReturnValue(makeBuilderState({handle: 'centered'}));
+    const user = userEvent.setup();
+    render(<LayoutBuilderPage />);
+
+    const inspectorButton = screen.getByRole('button', {name: 'Element inspector'});
+    expect(inspectorButton).toHaveAttribute('aria-pressed', 'true');
+
+    await user.click(inspectorButton);
+
+    expect(inspectorButton).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('appends a new inline stylesheet rule when a selector is picked from the preview inspector', async () => {
+    const updateDraftLayout = vi.fn();
+    mockUseLayoutBuilder.mockReturnValue(
+      makeBuilderState({
+        handle: 'centered',
+        updateDraftLayout,
+        draftLayout: {screens: {}, head: {stylesheets: []}},
+      }),
+    );
+    const user = userEvent.setup();
+    render(<LayoutBuilderPage />);
+
+    await user.click(screen.getByRole('button', {name: 'Pick selector'}));
+
+    expect(updateDraftLayout).toHaveBeenCalledWith(
+      ['head', 'stylesheets'],
+      expect.arrayContaining([
+        expect.objectContaining({id: 'custom-1', type: 'inline', content: '.my-class {\n  \n}\n'}),
+      ]),
+    );
+  });
+
+  it('appends the new rule to an existing inline stylesheet instead of creating a new one', async () => {
+    const updateDraftLayout = vi.fn();
+    mockUseLayoutBuilder.mockReturnValue(
+      makeBuilderState({
+        handle: 'centered',
+        updateDraftLayout,
+        draftLayout: {
+          screens: {},
+          head: {stylesheets: [{id: 'custom-1', type: 'inline', content: 'body {\n  color: red;\n}'}]},
+        },
+      }),
+    );
+    const user = userEvent.setup();
+    render(<LayoutBuilderPage />);
+
+    await user.click(screen.getByRole('button', {name: 'Pick selector'}));
+
+    expect(updateDraftLayout).toHaveBeenCalledWith(
+      ['head', 'stylesheets'],
+      expect.arrayContaining([
+        expect.objectContaining({
+          id: 'custom-1',
+          content: 'body {\n  color: red;\n}\n\n.my-class {\n  \n}\n',
+        }),
+      ]),
+    );
+  });
+
+  it('skips over an id already used by a non-inline stylesheet when generating a new inline stylesheet id', async () => {
+    const updateDraftLayout = vi.fn();
+    mockUseLayoutBuilder.mockReturnValue(
+      makeBuilderState({
+        handle: 'centered',
+        updateDraftLayout,
+        draftLayout: {
+          screens: {},
+          head: {
+            stylesheets: [
+              {id: 'custom-2', type: 'external', url: 'https://example.com/a.css'},
+              {id: 'custom-3', type: 'external', url: 'https://example.com/b.css'},
+            ],
+          },
+        },
+      }),
+    );
+    const user = userEvent.setup();
+    render(<LayoutBuilderPage />);
+
+    await user.click(screen.getByRole('button', {name: 'Pick selector'}));
+
+    // Starting id (stylesheets.length + 1 = "custom-3") already collides, so the generator must
+    // step past it to "custom-4".
+    expect(updateDraftLayout).toHaveBeenCalledWith(
+      ['head', 'stylesheets'],
+      expect.arrayContaining([
+        expect.objectContaining({id: 'custom-4', type: 'inline', content: '.my-class {\n  \n}\n'}),
+      ]),
+    );
+  });
+});
diff --git a/frontend/packages/configure-design/src/pages/__tests__/ThemeBuilderPage.test.tsx b/frontend/packages/configure-design/src/pages/__tests__/ThemeBuilderPage.test.tsx
new file mode 100644
index 0000000000..a627b76d86
--- /dev/null
+++ b/frontend/packages/configure-design/src/pages/__tests__/ThemeBuilderPage.test.tsx
@@ -0,0 +1,263 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import userEvent from '@testing-library/user-event';
+import {render, screen} from '@thunderid/test-utils';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import ThemeBuilderPage from '../ThemeBuilderPage';
+
+const {mockNavigate, mockSetActiveSection, mockSetDraftTheme, mockSetIsDirty, mockResetDraft, mockThemeBuilderState} =
+  vi.hoisted(() => ({
+    mockNavigate: vi.fn(),
+    mockSetActiveSection: vi.fn(),
+    mockSetDraftTheme: vi.fn(),
+    mockSetIsDirty: vi.fn(),
+    mockResetDraft: vi.fn(),
+    mockThemeBuilderState: {
+      themeId: 'theme-1',
+      displayName: 'Midnight',
+      isReadOnly: false,
+      activeSection: 'colors' as const,
+      isDirty: false,
+      draftTheme: {},
+    },
+  }));
+
+vi.mock('react-router', async () => {
+  const actual = await vi.importActual('react-router');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+vi.mock('../../contexts/ThemeBuilder/useThemeBuilder', () => ({
+  default: () => ({
+    themeId: mockThemeBuilderState.themeId,
+    displayName: mockThemeBuilderState.displayName,
+    isReadOnly: mockThemeBuilderState.isReadOnly,
+    activeSection: mockThemeBuilderState.activeSection,
+    setActiveSection: mockSetActiveSection,
+    isDirty: mockThemeBuilderState.isDirty,
+    draftTheme: mockThemeBuilderState.draftTheme,
+    setDraftTheme: mockSetDraftTheme,
+    setIsDirty: mockSetIsDirty,
+    resetDraft: mockResetDraft,
+  }),
+}));
+
+vi.mock('../../components/ThemeConfigPanel', () => ({
+  default: ({themeId, activeSection}: {themeId: string | null; activeSection?: string}) => (
+    <div data-testid="config-panel">
+      {themeId}:{activeSection}
+    </div>
+  ),
+}));
+
+vi.mock('../../components/ThemePreviewPanel', () => ({
+  default: ({themeId}: {themeId: string | null}) => <div data-testid="preview-panel">{themeId}</div>,
+}));
+
+vi.mock('../../components/themes/ThemeBuilderLeftPanel', () => ({
+  default: ({onPanelToggle}: {onPanelToggle: () => void}) => (
+    <div data-testid="left-panel">
+      <button type="button" onClick={onPanelToggle}>
+        Toggle from left panel
+      </button>
+    </div>
+  ),
+}));
+
+vi.mock('../../components/themes/ThemeDeleteDialog', () => ({
+  default: ({
+    open,
+    themeName,
+    onClose,
+    onSuccess,
+  }: {
+    open: boolean;
+    themeName: string | null;
+    onClose: () => void;
+    onSuccess?: () => void;
+  }) =>
+    open ? (
+      <div data-testid="delete-dialog">
+        {themeName}
+        <button type="button" onClick={onClose}>
+          Close dialog
+        </button>
+        <button type="button" onClick={onSuccess}>
+          Simulate delete success
+        </button>
+      </div>
+    ) : null,
+}));
+
+describe('ThemeBuilderPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockThemeBuilderState.themeId = 'theme-1';
+    mockThemeBuilderState.displayName = 'Midnight';
+    mockThemeBuilderState.isReadOnly = false;
+    mockThemeBuilderState.activeSection = 'colors';
+    mockThemeBuilderState.isDirty = false;
+    mockThemeBuilderState.draftTheme = {};
+  });
+
+  describe('Layout', () => {
+    it('renders the back to design button', () => {
+      render(<ThemeBuilderPage />);
+      expect(screen.getByRole('button', {name: /Back to Design/i})).toBeInTheDocument();
+    });
+
+    it('renders the left panel and preview panel', () => {
+      render(<ThemeBuilderPage />);
+      expect(screen.getByTestId('left-panel')).toBeInTheDocument();
+      expect(screen.getByTestId('preview-panel')).toBeInTheDocument();
+    });
+
+    it('renders the config panel with the current theme id and active section', () => {
+      render(<ThemeBuilderPage />);
+      expect(screen.getByTestId('config-panel')).toHaveTextContent('theme-1:colors');
+    });
+
+    it('shows the active section label as the config panel header', () => {
+      render(<ThemeBuilderPage />);
+      expect(screen.getByText('Colors')).toBeInTheDocument();
+    });
+
+    it('falls back to the Config header label when there is no active section', () => {
+      mockThemeBuilderState.activeSection = '' as unknown as 'colors';
+      render(<ThemeBuilderPage />);
+      expect(screen.getByText('Config')).toBeInTheDocument();
+    });
+  });
+
+  describe('Navigation', () => {
+    it('navigates back to the design list when Back to Design is clicked', async () => {
+      const user = userEvent.setup();
+      render(<ThemeBuilderPage />);
+
+      await user.click(screen.getByRole('button', {name: /Back to Design/i}));
+
+      expect(mockNavigate).toHaveBeenCalledWith('/design');
+    });
+  });
+
+  describe('Delete action', () => {
+    it('shows a Delete button when the theme is not read-only', () => {
+      render(<ThemeBuilderPage />);
+      expect(screen.getByRole('button', {name: 'Delete'})).toBeInTheDocument();
+    });
+
+    it('hides the Delete button when the theme is read-only', () => {
+      mockThemeBuilderState.isReadOnly = true;
+      render(<ThemeBuilderPage />);
+      expect(screen.queryByRole('button', {name: 'Delete'})).not.toBeInTheDocument();
+    });
+
+    it('opens the delete dialog when Delete is clicked', async () => {
+      const user = userEvent.setup();
+      render(<ThemeBuilderPage />);
+
+      await user.click(screen.getByRole('button', {name: 'Delete'}));
+
+      expect(screen.getByTestId('delete-dialog')).toHaveTextContent('Midnight');
+    });
+
+    it('closes the delete dialog when its onClose is invoked', async () => {
+      const user = userEvent.setup();
+      render(<ThemeBuilderPage />);
+
+      await user.click(screen.getByRole('button', {name: 'Delete'}));
+      await user.click(screen.getByText('Close dialog'));
+
+      expect(screen.queryByTestId('delete-dialog')).not.toBeInTheDocument();
+    });
+
+    it('navigates to the design list when the delete dialog reports success', async () => {
+      const user = userEvent.setup();
+      render(<ThemeBuilderPage />);
+
+      await user.click(screen.getByRole('button', {name: 'Delete'}));
+      await user.click(screen.getByText('Simulate delete success'));
+
+      expect(mockNavigate).toHaveBeenCalledWith('/design');
+    });
+  });
+
+  describe('Revert action', () => {
+    it('disables the Revert button when there are no unsaved changes', () => {
+      mockThemeBuilderState.isDirty = false;
+      render(<ThemeBuilderPage />);
+      expect(screen.getByRole('button', {name: /Revert/i})).toBeDisabled();
+    });
+
+    it('enables the Revert button when there are unsaved changes', () => {
+      mockThemeBuilderState.isDirty = true;
+      render(<ThemeBuilderPage />);
+      expect(screen.getByRole('button', {name: /Revert/i})).toBeEnabled();
+    });
+
+    it('calls resetDraft when Revert is clicked', async () => {
+      mockThemeBuilderState.isDirty = true;
+      const user = userEvent.setup();
+      render(<ThemeBuilderPage />);
+
+      await user.click(screen.getByRole('button', {name: /Revert/i}));
+
+      expect(mockResetDraft).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('Save action', () => {
+    it('disables the Save button when there are no unsaved changes', () => {
+      mockThemeBuilderState.isDirty = false;
+      render(<ThemeBuilderPage />);
+      expect(screen.getByRole('button', {name: /Save/i})).toBeDisabled();
+    });
+
+    it('enables the Save button when there are unsaved changes', () => {
+      mockThemeBuilderState.isDirty = true;
+      render(<ThemeBuilderPage />);
+      expect(screen.getByRole('button', {name: /Save/i})).toBeEnabled();
+    });
+
+    it('does not throw when Save is clicked before the config panel has registered a save handler', async () => {
+      mockThemeBuilderState.isDirty = true;
+      const user = userEvent.setup();
+      render(<ThemeBuilderPage />);
+
+      await expect(user.click(screen.getByRole('button', {name: /Save/i}))).resolves.not.toThrow();
+    });
+  });
+
+  describe('Panel toggle', () => {
+    it('shows the expand button after the panel is collapsed from within the left panel', async () => {
+      const user = userEvent.setup();
+      render(<ThemeBuilderPage />);
+
+      await user.click(screen.getByText('Toggle from left panel'));
+
+      expect(screen.getByRole('button', {name: 'Show sections'})).toBeInTheDocument();
+    });
+
+    it('hides the expand button again once the panel is toggled back open', async () => {
+      const user = userEvent.setup();
+      render(<ThemeBuilderPage />);
+
+      await user.click(screen.getByText('Toggle from left panel'));
+      await user.click(screen.getByRole('button', {name: 'Show sections'}));
+
+      expect(screen.queryByRole('button', {name: 'Show sections'})).not.toBeInTheDocument();
+    });
+  });
+
+  describe('No theme selected', () => {
+    it('renders with a null themeId without crashing', () => {
+      mockThemeBuilderState.themeId = null as unknown as string;
+      render(<ThemeBuilderPage />);
+      expect(screen.getByTestId('config-panel')).toHaveTextContent(':colors');
+    });
+  });
+});
diff --git a/frontend/apps/console/src/features/design/pages/__tests__/ThemeCreatePage.test.tsx b/frontend/packages/configure-design/src/pages/__tests__/ThemeCreatePage.test.tsx
similarity index 61%
rename from frontend/apps/console/src/features/design/pages/__tests__/ThemeCreatePage.test.tsx
rename to frontend/packages/configure-design/src/pages/__tests__/ThemeCreatePage.test.tsx
index 1cb5a06d0b..02e50651d8 100644
--- a/frontend/apps/console/src/features/design/pages/__tests__/ThemeCreatePage.test.tsx
+++ b/frontend/packages/configure-design/src/pages/__tests__/ThemeCreatePage.test.tsx
@@ -6,12 +6,20 @@ import {render, screen} from '@thunderid/test-utils';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import ThemeCreatePage from '../ThemeCreatePage';
 
-const {mockNavigate, mockMutate, mockReset, mockCreateThemeState} = vi.hoisted(() => ({
-  mockNavigate: vi.fn(),
-  mockMutate: vi.fn(),
-  mockReset: vi.fn(),
-  mockCreateThemeState: {isPending: false, isError: false},
-}));
+interface MockThemesResult {
+  data: {themes: {id: string; displayName: string}[]} | undefined;
+}
+
+const {mockNavigate, mockMutate, mockReset, mockCreateThemeState, mockUseGetTheme, mockUseGetThemes} = vi.hoisted(
+  () => ({
+    mockNavigate: vi.fn(),
+    mockMutate: vi.fn(),
+    mockReset: vi.fn(),
+    mockCreateThemeState: {isPending: false, isError: false},
+    mockUseGetTheme: vi.fn<(id: string) => {data: unknown}>(),
+    mockUseGetThemes: vi.fn<() => MockThemesResult>(),
+  }),
+);
 
 vi.mock('react-router', async () => {
   const actual = await vi.importActual('react-router');
@@ -21,28 +29,22 @@ vi.mock('react-router', async () => {
   };
 });
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, fallback?: string | {defaultValue?: string}) => {
-      if (typeof fallback === 'string') return fallback || key;
-      if (fallback && typeof fallback === 'object') return fallback.defaultValue ?? key;
-      return key;
-    },
-  }),
-}));
-
-vi.mock('@thunderid/design', () => ({
-  useCreateTheme: () => ({
-    mutate: mockMutate,
-    reset: mockReset,
-    isPending: mockCreateThemeState.isPending,
-    isError: mockCreateThemeState.isError,
-  }),
-  useGetTheme: () => ({data: undefined}),
-  useGetThemes: () => ({data: {themes: []}}),
-}));
+vi.mock('@thunderid/design', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@thunderid/design')>();
+  return {
+    ...actual,
+    useCreateTheme: () => ({
+      mutate: mockMutate,
+      reset: mockReset,
+      isPending: mockCreateThemeState.isPending,
+      isError: mockCreateThemeState.isError,
+    }),
+    useGetTheme: (id: string) => mockUseGetTheme(id),
+    useGetThemes: () => mockUseGetThemes(),
+  };
+});
 
-vi.mock('../../../../components/GatePreview/GatePreview', () => ({
+vi.mock('../../GatePreview/GatePreview', () => ({
   default: () => <div data-testid="preview" />,
 }));
 
@@ -80,6 +82,8 @@ describe('ThemeCreatePage', () => {
     vi.clearAllMocks();
     mockCreateThemeState.isPending = false;
     mockCreateThemeState.isError = false;
+    mockUseGetTheme.mockReturnValue({data: undefined});
+    mockUseGetThemes.mockReturnValue({data: {themes: []}});
   });
 
   it('renders the name step by default', () => {
@@ -190,4 +194,87 @@ describe('ThemeCreatePage', () => {
 
     expect(mockReset).not.toHaveBeenCalled();
   });
+
+  it('navigates back to the design list when the wizard is closed', async () => {
+    const user = userEvent.setup();
+    render(<ThemeCreatePage />);
+
+    await user.click(screen.getByRole('button', {name: 'Close'}));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/design');
+  });
+
+  it('jumps back to the Details step when its breadcrumb is clicked from the color step', async () => {
+    const user = userEvent.setup();
+    render(<ThemeCreatePage />);
+
+    await user.click(screen.getByText('Set Ready'));
+    await user.click(screen.getByRole('button', {name: /Continue/i}));
+    expect(screen.getByTestId('step-color')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', {name: 'Details'}));
+
+    expect(screen.getByTestId('step-name')).toBeInTheDocument();
+  });
+
+  it('navigates to the created theme detail page on a successful create', async () => {
+    mockMutate.mockImplementation((_data, opts: {onSuccess: (created: {id: string}) => void}) => {
+      opts.onSuccess({id: 'theme-new'});
+    });
+
+    const user = userEvent.setup();
+    render(<ThemeCreatePage />);
+
+    await user.click(screen.getByText('Set Ready'));
+    await user.click(screen.getByRole('button', {name: /Continue/i}));
+    await user.click(screen.getByRole('button', {name: /Create Theme/i}));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/design/themes/theme-new');
+  });
+
+  it('swallows a rejected navigation after a successful create instead of throwing', async () => {
+    mockNavigate.mockRejectedValueOnce(new Error('navigation failed'));
+    mockMutate.mockImplementation((_data, opts: {onSuccess: (created: {id: string}) => void}) => {
+      opts.onSuccess({id: 'theme-new'});
+    });
+
+    const user = userEvent.setup();
+    render(<ThemeCreatePage />);
+
+    await user.click(screen.getByText('Set Ready'));
+    await user.click(screen.getByRole('button', {name: /Continue/i}));
+    await user.click(screen.getByRole('button', {name: /Create Theme/i}));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/design/themes/theme-new');
+  });
+
+  it('picks the theme named "Classic" (case-insensitively) as the base theme', () => {
+    mockUseGetThemes.mockReturnValue({
+      data: {
+        themes: [
+          {id: 'modern-id', displayName: 'Modern'},
+          {id: 'classic-id', displayName: 'CLASSIC'},
+        ],
+      },
+    });
+
+    render(<ThemeCreatePage />);
+
+    expect(mockUseGetTheme).toHaveBeenCalledWith('classic-id');
+  });
+
+  it('falls back to the first theme in the list when none is named "Classic"', () => {
+    mockUseGetThemes.mockReturnValue({
+      data: {
+        themes: [
+          {id: 'modern-id', displayName: 'Modern'},
+          {id: 'bold-id', displayName: 'Bold'},
+        ],
+      },
+    });
+
+    render(<ThemeCreatePage />);
+
+    expect(mockUseGetTheme).toHaveBeenCalledWith('modern-id');
+  });
 });
diff --git a/frontend/apps/console/src/features/design/utils/__tests__/buildThemeFromPrimaryColor.test.ts b/frontend/packages/configure-design/src/utils/__tests__/buildThemeFromPrimaryColor.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/design/utils/__tests__/buildThemeFromPrimaryColor.test.ts
rename to frontend/packages/configure-design/src/utils/__tests__/buildThemeFromPrimaryColor.test.ts
diff --git a/frontend/apps/console/src/features/design/utils/buildThemeFromPrimaryColor.ts b/frontend/packages/configure-design/src/utils/buildThemeFromPrimaryColor.ts
similarity index 100%
rename from frontend/apps/console/src/features/design/utils/buildThemeFromPrimaryColor.ts
rename to frontend/packages/configure-design/src/utils/buildThemeFromPrimaryColor.ts
diff --git a/frontend/packages/configure-verifiable-presentations/tsconfig.eslint.json b/frontend/packages/configure-design/tsconfig.eslint.json
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/tsconfig.eslint.json
rename to frontend/packages/configure-design/tsconfig.eslint.json
diff --git a/frontend/packages/configure-verifiable-presentations/tsconfig.json b/frontend/packages/configure-design/tsconfig.json
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/tsconfig.json
rename to frontend/packages/configure-design/tsconfig.json
diff --git a/frontend/packages/configure-verifiable-presentations/tsconfig.lib.json b/frontend/packages/configure-design/tsconfig.lib.json
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/tsconfig.lib.json
rename to frontend/packages/configure-design/tsconfig.lib.json
diff --git a/frontend/packages/configure-verifiable-presentations/tsconfig.spec.json b/frontend/packages/configure-design/tsconfig.spec.json
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/tsconfig.spec.json
rename to frontend/packages/configure-design/tsconfig.spec.json
diff --git a/frontend/packages/configure-design/types/vite-env.d.ts b/frontend/packages/configure-design/types/vite-env.d.ts
new file mode 100644
index 0000000000..efec67e795
--- /dev/null
+++ b/frontend/packages/configure-design/types/vite-env.d.ts
@@ -0,0 +1,4 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="vite/client" />
diff --git a/frontend/packages/configure-verifiable-presentations/vitest.config.ts b/frontend/packages/configure-design/vitest.config.ts
similarity index 93%
rename from frontend/packages/configure-verifiable-presentations/vitest.config.ts
rename to frontend/packages/configure-design/vitest.config.ts
index f5cf09c8c5..c86c0219e9 100644
--- a/frontend/packages/configure-verifiable-presentations/vitest.config.ts
+++ b/frontend/packages/configure-design/vitest.config.ts
@@ -26,5 +26,6 @@ export default defineConfig({
       instances: [{browser: 'chromium'}],
       provider: playwright(),
     },
+    setupFiles: ['@thunderid/test-utils/setup'],
   },
 });
diff --git a/frontend/packages/configure-groups/.editorconfig b/frontend/packages/configure-groups/.editorconfig
new file mode 100644
index 0000000000..54a161112c
--- /dev/null
+++ b/frontend/packages/configure-groups/.editorconfig
@@ -0,0 +1 @@
+../../.editorconfig
diff --git a/frontend/packages/configure-groups/.gitignore b/frontend/packages/configure-groups/.gitignore
new file mode 100644
index 0000000000..0ccb8df8de
--- /dev/null
+++ b/frontend/packages/configure-groups/.gitignore
@@ -0,0 +1,141 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+.output
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vite/
diff --git a/frontend/packages/configure-groups/.prettierignore b/frontend/packages/configure-groups/.prettierignore
new file mode 100644
index 0000000000..99b0b518a7
--- /dev/null
+++ b/frontend/packages/configure-groups/.prettierignore
@@ -0,0 +1,4 @@
+/dist
+/build
+/node_modules
+/coverage
diff --git a/frontend/packages/configure-groups/eslint.config.js b/frontend/packages/configure-groups/eslint.config.js
new file mode 100644
index 0000000000..f5fd8bcdcc
--- /dev/null
+++ b/frontend/packages/configure-groups/eslint.config.js
@@ -0,0 +1,11 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import thunderIdPlugin from '@thunderid/eslint-plugin';
+
+export default [
+  {
+    ignores: ['dist/**', 'build/**', 'node_modules/**', 'coverage/**'],
+  },
+  ...thunderIdPlugin.configs.react,
+];
diff --git a/frontend/packages/configure-groups/package.json b/frontend/packages/configure-groups/package.json
new file mode 100644
index 0000000000..1a816d8662
--- /dev/null
+++ b/frontend/packages/configure-groups/package.json
@@ -0,0 +1,112 @@
+{
+  "private": true,
+  "name": "@thunderid/configure-groups",
+  "version": "0.0.0",
+  "description": "Groups feature for ⚡️ ThunderID applications",
+  "keywords": [
+    "thunderid",
+    "configure",
+    "groups",
+    "react",
+    "feature"
+  ],
+  "homepage": "https://github.com/thunder-id/thunderid/tree/main/frontend/packages/configure-groups#readme",
+  "bugs": {
+    "url": "https://github.com/thunder-id/thunderid/issues"
+  },
+  "author": "The ThunderID Authors",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thunder-id/thunderid",
+    "directory": "frontend/packages/configure-groups"
+  },
+  "scripts": {
+    "build": "pnpm clean:dist && rolldown -c rolldown.config.js && tsc -p tsconfig.lib.json --emitDeclarationOnly --outDir dist",
+    "clean": "pnpm clean:node_modules && pnpm clean:dist",
+    "clean:dist": "rimraf dist",
+    "clean:node_modules": "rimraf node_modules",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run --passWithNoTests",
+    "test:coverage": "vitest run --coverage --passWithNoTests",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.lib.json"
+  },
+  "devDependencies": {
+    "@playwright/test": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@thunderid/components": "workspace:^",
+    "@thunderid/configure-applications": "workspace:^",
+    "@thunderid/configure-organization-units": "workspace:^",
+    "@thunderid/configure-users": "workspace:^",
+    "@thunderid/contexts": "workspace:^",
+    "@thunderid/eslint-plugin": "workspace:^",
+    "@thunderid/hooks": "workspace:^",
+    "@thunderid/logger": "workspace:^",
+    "@thunderid/prettier-config": "workspace:^",
+    "@thunderid/react": "catalog:",
+    "@thunderid/test-utils": "workspace:^",
+    "@thunderid/types": "workspace:^",
+    "@thunderid/utils": "workspace:^",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@vitest/browser-playwright": "catalog:",
+    "@vitest/coverage-istanbul": "catalog:",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
+    "eslint": "catalog:",
+    "prettier": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-i18next": "catalog:",
+    "react-router": "catalog:",
+    "rimraf": "catalog:",
+    "rolldown": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@tanstack/react-query": "catalog:",
+    "@thunderid/components": "workspace:^",
+    "@thunderid/configure-applications": "workspace:^",
+    "@thunderid/configure-organization-units": "workspace:^",
+    "@thunderid/configure-users": "workspace:^",
+    "@thunderid/contexts": "workspace:^",
+    "@thunderid/hooks": "workspace:^",
+    "@thunderid/logger": "workspace:^",
+    "@thunderid/react": "catalog:",
+    "@thunderid/utils": "workspace:^",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-i18next": "catalog:",
+    "react-router": "catalog:"
+  }
+}
diff --git a/frontend/packages/configure-groups/prettier.config.js b/frontend/packages/configure-groups/prettier.config.js
new file mode 100644
index 0000000000..f054cd507c
--- /dev/null
+++ b/frontend/packages/configure-groups/prettier.config.js
@@ -0,0 +1,6 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import config from '@thunderid/prettier-config';
+
+export default config;
diff --git a/frontend/packages/configure-groups/rolldown.config.js b/frontend/packages/configure-groups/rolldown.config.js
new file mode 100644
index 0000000000..a4911bb7fd
--- /dev/null
+++ b/frontend/packages/configure-groups/rolldown.config.js
@@ -0,0 +1,49 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {readFileSync} from 'fs';
+import {join} from 'path';
+import {defineConfig} from 'rolldown';
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
+
+const external = [
+  ...Object.keys(pkg.dependencies || {}),
+  ...Object.keys(pkg.peerDependencies || {}),
+  'react/jsx-runtime',
+  // Needed to avoid hook ordering issues.
+  /^@mui\//,
+];
+
+const commonOptions = {
+  input: join('src', 'index.ts'),
+  external,
+  target: 'es2020',
+  sourcemap: true,
+};
+
+export default defineConfig([
+  // ✅ ESM build (for browsers/bundlers)
+  {
+    ...commonOptions,
+    platform: 'browser',
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+  // ✅ CommonJS build (for Node/SSR/testing)
+  {
+    ...commonOptions,
+    platform: 'node',
+    output: {
+      dir: join('dist', 'cjs'),
+      entryFileNames: '[name].cjs',
+      format: 'cjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+]);
diff --git a/frontend/apps/console/src/features/groups/api/__tests__/useAddGroupMembers.test.ts b/frontend/packages/configure-groups/src/api/__tests__/useAddGroupMembers.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/__tests__/useAddGroupMembers.test.ts
rename to frontend/packages/configure-groups/src/api/__tests__/useAddGroupMembers.test.ts
diff --git a/frontend/apps/console/src/features/groups/api/__tests__/useCreateGroup.test.ts b/frontend/packages/configure-groups/src/api/__tests__/useCreateGroup.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/__tests__/useCreateGroup.test.ts
rename to frontend/packages/configure-groups/src/api/__tests__/useCreateGroup.test.ts
diff --git a/frontend/apps/console/src/features/groups/api/__tests__/useDeleteGroup.test.ts b/frontend/packages/configure-groups/src/api/__tests__/useDeleteGroup.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/__tests__/useDeleteGroup.test.ts
rename to frontend/packages/configure-groups/src/api/__tests__/useDeleteGroup.test.ts
diff --git a/frontend/apps/console/src/features/groups/api/__tests__/useGetGroup.test.ts b/frontend/packages/configure-groups/src/api/__tests__/useGetGroup.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/__tests__/useGetGroup.test.ts
rename to frontend/packages/configure-groups/src/api/__tests__/useGetGroup.test.ts
diff --git a/frontend/apps/console/src/features/groups/api/__tests__/useGetGroupMembers.test.ts b/frontend/packages/configure-groups/src/api/__tests__/useGetGroupMembers.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/__tests__/useGetGroupMembers.test.ts
rename to frontend/packages/configure-groups/src/api/__tests__/useGetGroupMembers.test.ts
diff --git a/frontend/apps/console/src/features/groups/api/__tests__/useGetGroups.test.ts b/frontend/packages/configure-groups/src/api/__tests__/useGetGroups.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/__tests__/useGetGroups.test.ts
rename to frontend/packages/configure-groups/src/api/__tests__/useGetGroups.test.ts
diff --git a/frontend/apps/console/src/features/groups/api/__tests__/useRemoveGroupMembers.test.ts b/frontend/packages/configure-groups/src/api/__tests__/useRemoveGroupMembers.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/__tests__/useRemoveGroupMembers.test.ts
rename to frontend/packages/configure-groups/src/api/__tests__/useRemoveGroupMembers.test.ts
diff --git a/frontend/apps/console/src/features/groups/api/__tests__/useUpdateGroup.test.ts b/frontend/packages/configure-groups/src/api/__tests__/useUpdateGroup.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/__tests__/useUpdateGroup.test.ts
rename to frontend/packages/configure-groups/src/api/__tests__/useUpdateGroup.test.ts
diff --git a/frontend/apps/console/src/features/groups/api/useAddGroupMembers.ts b/frontend/packages/configure-groups/src/api/useAddGroupMembers.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/useAddGroupMembers.ts
rename to frontend/packages/configure-groups/src/api/useAddGroupMembers.ts
diff --git a/frontend/apps/console/src/features/groups/api/useCreateGroup.ts b/frontend/packages/configure-groups/src/api/useCreateGroup.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/useCreateGroup.ts
rename to frontend/packages/configure-groups/src/api/useCreateGroup.ts
diff --git a/frontend/apps/console/src/features/groups/api/useDeleteGroup.ts b/frontend/packages/configure-groups/src/api/useDeleteGroup.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/useDeleteGroup.ts
rename to frontend/packages/configure-groups/src/api/useDeleteGroup.ts
diff --git a/frontend/apps/console/src/features/groups/api/useGetGroup.ts b/frontend/packages/configure-groups/src/api/useGetGroup.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/useGetGroup.ts
rename to frontend/packages/configure-groups/src/api/useGetGroup.ts
diff --git a/frontend/apps/console/src/features/groups/api/useGetGroupMembers.ts b/frontend/packages/configure-groups/src/api/useGetGroupMembers.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/useGetGroupMembers.ts
rename to frontend/packages/configure-groups/src/api/useGetGroupMembers.ts
diff --git a/frontend/apps/console/src/features/groups/api/useGetGroups.ts b/frontend/packages/configure-groups/src/api/useGetGroups.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/useGetGroups.ts
rename to frontend/packages/configure-groups/src/api/useGetGroups.ts
diff --git a/frontend/apps/console/src/features/groups/api/useRemoveGroupMembers.ts b/frontend/packages/configure-groups/src/api/useRemoveGroupMembers.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/useRemoveGroupMembers.ts
rename to frontend/packages/configure-groups/src/api/useRemoveGroupMembers.ts
diff --git a/frontend/apps/console/src/features/groups/api/useUpdateGroup.ts b/frontend/packages/configure-groups/src/api/useUpdateGroup.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/api/useUpdateGroup.ts
rename to frontend/packages/configure-groups/src/api/useUpdateGroup.ts
diff --git a/frontend/apps/console/src/features/groups/components/GroupDeleteDialog.tsx b/frontend/packages/configure-groups/src/components/GroupDeleteDialog.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/GroupDeleteDialog.tsx
rename to frontend/packages/configure-groups/src/components/GroupDeleteDialog.tsx
diff --git a/frontend/apps/console/src/features/groups/components/GroupsList.tsx b/frontend/packages/configure-groups/src/components/GroupsList.tsx
similarity index 96%
rename from frontend/apps/console/src/features/groups/components/GroupsList.tsx
rename to frontend/packages/configure-groups/src/components/GroupsList.tsx
index c80ac72549..de9d52ae28 100644
--- a/frontend/apps/console/src/features/groups/components/GroupsList.tsx
+++ b/frontend/packages/configure-groups/src/components/GroupsList.tsx
@@ -10,8 +10,8 @@ import {useMemo, useCallback, useState, type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
 import GroupDeleteDialog from './GroupDeleteDialog';
-import RouteConfig from '../../../configs/RouteConfig';
 import useGetGroups from '../api/useGetGroups';
+import useGroupRoutes from '../hooks/useGroupRoutes';
 import type {GroupBasic} from '../models/group';
 
 /**
@@ -22,6 +22,7 @@ export default function GroupsList(): JSX.Element {
   const {t} = useTranslation();
   const logger = useLogger('GroupsList');
   const dataGridLocaleText = useDataGridLocaleText();
+  const routes = useGroupRoutes();
   const [paginationModel, setPaginationModel] = useState<DataGrid.GridPaginationModel>({pageSize: 10, page: 0});
 
   const groupsParams = useMemo(
@@ -39,12 +40,12 @@ export default function GroupsList(): JSX.Element {
   const handleViewClick = useCallback(
     (groupId: string): void => {
       (async (): Promise<void> => {
-        await navigate(RouteConfig.groups.detail(groupId));
+        await navigate(routes.groups.detail(groupId));
       })().catch((_error: unknown) => {
         logger.error('Failed to navigate to group details', {error: _error, groupId});
       });
     },
-    [navigate, logger],
+    [navigate, logger, routes.groups],
   );
 
   const handleDeleteClick = useCallback((groupId: string): void => {
@@ -160,7 +161,7 @@ export default function GroupsList(): JSX.Element {
             onRowClick={(params) => {
               const groupId = (params.row as GroupBasic).id;
               (async (): Promise<void> => {
-                await navigate(RouteConfig.groups.detail(groupId));
+                await navigate(routes.groups.detail(groupId));
               })().catch((_error: unknown) => {
                 logger.error('Failed to navigate to group', {error: _error, groupId});
               });
diff --git a/frontend/apps/console/src/features/groups/components/__tests__/AddMemberDialog.test.tsx b/frontend/packages/configure-groups/src/components/__tests__/AddMemberDialog.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/__tests__/AddMemberDialog.test.tsx
rename to frontend/packages/configure-groups/src/components/__tests__/AddMemberDialog.test.tsx
diff --git a/frontend/apps/console/src/features/groups/components/__tests__/EditAdvancedSettings.test.tsx b/frontend/packages/configure-groups/src/components/__tests__/EditAdvancedSettings.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/__tests__/EditAdvancedSettings.test.tsx
rename to frontend/packages/configure-groups/src/components/__tests__/EditAdvancedSettings.test.tsx
diff --git a/frontend/apps/console/src/features/groups/components/__tests__/EditGeneralSettings.test.tsx b/frontend/packages/configure-groups/src/components/__tests__/EditGeneralSettings.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/__tests__/EditGeneralSettings.test.tsx
rename to frontend/packages/configure-groups/src/components/__tests__/EditGeneralSettings.test.tsx
diff --git a/frontend/apps/console/src/features/groups/components/__tests__/EditMembersSettings.test.tsx b/frontend/packages/configure-groups/src/components/__tests__/EditMembersSettings.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/__tests__/EditMembersSettings.test.tsx
rename to frontend/packages/configure-groups/src/components/__tests__/EditMembersSettings.test.tsx
diff --git a/frontend/apps/console/src/features/groups/components/__tests__/GroupDeleteDialog.test.tsx b/frontend/packages/configure-groups/src/components/__tests__/GroupDeleteDialog.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/__tests__/GroupDeleteDialog.test.tsx
rename to frontend/packages/configure-groups/src/components/__tests__/GroupDeleteDialog.test.tsx
diff --git a/frontend/apps/console/src/features/groups/components/__tests__/GroupsList.test.tsx b/frontend/packages/configure-groups/src/components/__tests__/GroupsList.test.tsx
similarity index 81%
rename from frontend/apps/console/src/features/groups/components/__tests__/GroupsList.test.tsx
rename to frontend/packages/configure-groups/src/components/__tests__/GroupsList.test.tsx
index 57bde60156..54351cfcc0 100644
--- a/frontend/apps/console/src/features/groups/components/__tests__/GroupsList.test.tsx
+++ b/frontend/packages/configure-groups/src/components/__tests__/GroupsList.test.tsx
@@ -118,6 +118,11 @@ vi.mock('../../api/useDeleteGroup', () => ({
   }),
 }));
 
+const mockLogger = {error: vi.fn(), warn: vi.fn(), info: vi.fn(), debug: vi.fn()};
+vi.mock('@thunderid/logger/react', () => ({
+  useLogger: () => mockLogger,
+}));
+
 describe('GroupsList', () => {
   const mockGroupsData: GroupListResponse = {
     totalResults: 2,
@@ -185,6 +190,53 @@ describe('GroupsList', () => {
     });
   });
 
+  it('should refetch groups when the retry action is clicked in the error state', async () => {
+    const user = userEvent.setup();
+    const mockRefetch = vi.fn();
+    mockUseGetGroups.mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: new Error('Fetch failed'),
+      refetch: mockRefetch,
+    });
+    renderWithProviders(<GroupsList />);
+
+    await user.click(screen.getByRole('button', {name: 'Refresh'}));
+
+    expect(mockRefetch).toHaveBeenCalled();
+  });
+
+  it('should log an error when navigating to a group on row click fails', async () => {
+    const user = userEvent.setup();
+    mockNavigate.mockRejectedValue(new Error('navigation failed'));
+    renderWithProviders(<GroupsList />);
+
+    await user.click(screen.getByTestId('row-g1'));
+
+    await waitFor(() => {
+      expect(mockLogger.error).toHaveBeenCalledWith('Failed to navigate to group', {
+        error: expect.any(Error) as Error,
+        groupId: 'g1',
+      });
+    });
+  });
+
+  it('should log an error when navigating to a group on edit button click fails', async () => {
+    const user = userEvent.setup();
+    mockNavigate.mockRejectedValue(new Error('navigation failed'));
+    renderWithProviders(<GroupsList />);
+
+    const editButtons = screen.getAllByRole('button', {name: /Edit/i});
+    await user.click(editButtons[0]);
+
+    await waitFor(() => {
+      expect(mockLogger.error).toHaveBeenCalledWith('Failed to navigate to group details', {
+        error: expect.any(Error) as Error,
+        groupId: 'g1',
+      });
+    });
+  });
+
   it('should render hover action buttons for each row', () => {
     renderWithProviders(<GroupsList />);
 
diff --git a/frontend/apps/console/src/features/groups/components/__tests__/ManageMembersSection.test.tsx b/frontend/packages/configure-groups/src/components/__tests__/ManageMembersSection.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/__tests__/ManageMembersSection.test.tsx
rename to frontend/packages/configure-groups/src/components/__tests__/ManageMembersSection.test.tsx
diff --git a/frontend/apps/console/src/features/groups/components/create-group/ConfigureName.tsx b/frontend/packages/configure-groups/src/components/create-group/ConfigureName.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/create-group/ConfigureName.tsx
rename to frontend/packages/configure-groups/src/components/create-group/ConfigureName.tsx
diff --git a/frontend/apps/console/src/features/groups/components/create-group/__tests__/ConfigureName.test.tsx b/frontend/packages/configure-groups/src/components/create-group/__tests__/ConfigureName.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/create-group/__tests__/ConfigureName.test.tsx
rename to frontend/packages/configure-groups/src/components/create-group/__tests__/ConfigureName.test.tsx
diff --git a/frontend/apps/console/src/features/groups/components/edit-group/advanced-settings/EditAdvancedSettings.tsx b/frontend/packages/configure-groups/src/components/edit-group/advanced-settings/EditAdvancedSettings.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/edit-group/advanced-settings/EditAdvancedSettings.tsx
rename to frontend/packages/configure-groups/src/components/edit-group/advanced-settings/EditAdvancedSettings.tsx
diff --git a/frontend/apps/console/src/features/groups/components/edit-group/general-settings/EditGeneralSettings.tsx b/frontend/packages/configure-groups/src/components/edit-group/general-settings/EditGeneralSettings.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/edit-group/general-settings/EditGeneralSettings.tsx
rename to frontend/packages/configure-groups/src/components/edit-group/general-settings/EditGeneralSettings.tsx
diff --git a/frontend/apps/console/src/features/groups/components/edit-group/general-settings/QuickCopySection.tsx b/frontend/packages/configure-groups/src/components/edit-group/general-settings/QuickCopySection.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/edit-group/general-settings/QuickCopySection.tsx
rename to frontend/packages/configure-groups/src/components/edit-group/general-settings/QuickCopySection.tsx
diff --git a/frontend/apps/console/src/features/groups/components/edit-group/members-settings/AddMemberDialog.tsx b/frontend/packages/configure-groups/src/components/edit-group/members-settings/AddMemberDialog.tsx
similarity index 99%
rename from frontend/apps/console/src/features/groups/components/edit-group/members-settings/AddMemberDialog.tsx
rename to frontend/packages/configure-groups/src/components/edit-group/members-settings/AddMemberDialog.tsx
index 4f00bff694..3d97b88deb 100644
--- a/frontend/apps/console/src/features/groups/components/edit-group/members-settings/AddMemberDialog.tsx
+++ b/frontend/packages/configure-groups/src/components/edit-group/members-settings/AddMemberDialog.tsx
@@ -26,9 +26,9 @@ import {
 import {AppWindow, Bot, User as UserIcon, Users} from '@wso2/oxygen-ui-icons-react';
 import {useState, useMemo, useCallback, type JSX, type SyntheticEvent} from 'react';
 import {useTranslation} from 'react-i18next';
-import useGetAgents from '../../../../agents/api/useGetAgents';
-import type {BasicAgent} from '../../../../agents/models/agent';
 import useGetGroups from '../../../api/useGetGroups';
+import type {BasicAgent} from '../../../internal/agent';
+import useGetAgents from '../../../internal/useGetAgents';
 import type {GroupBasic, Member} from '../../../models/group';
 
 interface AddMemberDialogProps {
diff --git a/frontend/apps/console/src/features/groups/components/edit-group/members-settings/EditMembersSettings.tsx b/frontend/packages/configure-groups/src/components/edit-group/members-settings/EditMembersSettings.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/edit-group/members-settings/EditMembersSettings.tsx
rename to frontend/packages/configure-groups/src/components/edit-group/members-settings/EditMembersSettings.tsx
diff --git a/frontend/apps/console/src/features/groups/components/edit-group/members-settings/ManageMembersSection.tsx b/frontend/packages/configure-groups/src/components/edit-group/members-settings/ManageMembersSection.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/components/edit-group/members-settings/ManageMembersSection.tsx
rename to frontend/packages/configure-groups/src/components/edit-group/members-settings/ManageMembersSection.tsx
diff --git a/frontend/apps/console/src/features/groups/constants/group-query-keys.ts b/frontend/packages/configure-groups/src/constants/group-query-keys.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/constants/group-query-keys.ts
rename to frontend/packages/configure-groups/src/constants/group-query-keys.ts
diff --git a/frontend/apps/console/src/features/groups/contexts/GroupCreate/GroupCreateContext.tsx b/frontend/packages/configure-groups/src/contexts/GroupCreate/GroupCreateContext.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/contexts/GroupCreate/GroupCreateContext.tsx
rename to frontend/packages/configure-groups/src/contexts/GroupCreate/GroupCreateContext.tsx
diff --git a/frontend/apps/console/src/features/groups/contexts/GroupCreate/GroupCreateProvider.tsx b/frontend/packages/configure-groups/src/contexts/GroupCreate/GroupCreateProvider.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/contexts/GroupCreate/GroupCreateProvider.tsx
rename to frontend/packages/configure-groups/src/contexts/GroupCreate/GroupCreateProvider.tsx
diff --git a/frontend/apps/console/src/features/groups/contexts/GroupCreate/__tests__/GroupCreateProvider.test.tsx b/frontend/packages/configure-groups/src/contexts/GroupCreate/__tests__/GroupCreateProvider.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/contexts/GroupCreate/__tests__/GroupCreateProvider.test.tsx
rename to frontend/packages/configure-groups/src/contexts/GroupCreate/__tests__/GroupCreateProvider.test.tsx
diff --git a/frontend/apps/console/src/features/groups/contexts/GroupCreate/useGroupCreate.ts b/frontend/packages/configure-groups/src/contexts/GroupCreate/useGroupCreate.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/contexts/GroupCreate/useGroupCreate.ts
rename to frontend/packages/configure-groups/src/contexts/GroupCreate/useGroupCreate.ts
diff --git a/frontend/packages/configure-groups/src/hooks/useGroupRoutes.ts b/frontend/packages/configure-groups/src/hooks/useGroupRoutes.ts
new file mode 100644
index 0000000000..6c1cef3baf
--- /dev/null
+++ b/frontend/packages/configure-groups/src/hooks/useGroupRoutes.ts
@@ -0,0 +1,50 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {useRoutes} from '@thunderid/contexts';
+
+/**
+ * Route paths this package needs from the host application.
+ *
+ * The host supplies these via `@thunderid/contexts`'s `RoutesProvider`. When absent (e.g. this
+ * package rendered standalone in Storybook or a unit test), `useGroupRoutes` falls back to
+ * `defaultGroupRoutePaths` below.
+ *
+ * @public
+ */
+export interface GroupRoutePaths {
+  groups: {
+    list: () => string;
+    detail: (id: string) => string;
+    create: () => string;
+  };
+}
+
+/**
+ * Default group paths, used when no host-supplied override is present.
+ *
+ * @public
+ */
+export const defaultGroupRoutePaths: GroupRoutePaths = {
+  groups: {
+    list: () => '/groups',
+    detail: (id) => `/groups/${id}`,
+    create: () => '/groups/create',
+  },
+};
+
+/**
+ * Resolves the group route paths, preferring the host application's configuration (supplied via
+ * `RoutesProvider`) and falling back to this package's own defaults.
+ *
+ * Components should never hardcode these destination paths; they should call this hook and build
+ * the destination from the returned functions instead.
+ *
+ * @public
+ */
+export default function useGroupRoutes(): GroupRoutePaths {
+  const routes = useRoutes<Partial<GroupRoutePaths>>();
+  return {
+    groups: routes.groups ?? defaultGroupRoutePaths.groups,
+  };
+}
diff --git a/frontend/packages/configure-groups/src/index.ts b/frontend/packages/configure-groups/src/index.ts
new file mode 100644
index 0000000000..9550f77fe5
--- /dev/null
+++ b/frontend/packages/configure-groups/src/index.ts
@@ -0,0 +1,38 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// APIs
+export {default as useAddGroupMembers} from './api/useAddGroupMembers';
+export {default as useCreateGroup} from './api/useCreateGroup';
+export {default as useDeleteGroup} from './api/useDeleteGroup';
+export {default as useGetGroup} from './api/useGetGroup';
+export {default as useGetGroupMembers} from './api/useGetGroupMembers';
+export {default as useGetGroups} from './api/useGetGroups';
+export {default as useRemoveGroupMembers} from './api/useRemoveGroupMembers';
+export {default as useUpdateGroup} from './api/useUpdateGroup';
+
+// Components
+export {default as GroupDeleteDialog} from './components/GroupDeleteDialog';
+export {default as GroupsList} from './components/GroupsList';
+
+// Constants
+export {default as GroupQueryKeys} from './constants/group-query-keys';
+
+// Contexts
+export {default as GroupCreateContext} from './contexts/GroupCreate/GroupCreateContext';
+export {default as GroupCreateProvider} from './contexts/GroupCreate/GroupCreateProvider';
+export {default as useGroupCreate} from './contexts/GroupCreate/useGroupCreate';
+
+// Models
+export * from './models/group';
+export * from './models/group-create-flow';
+export * from './models/requests';
+
+// Pages
+export {default as CreateGroupPage} from './pages/CreateGroupPage';
+export {default as GroupEditPage} from './pages/GroupEditPage';
+export {default as GroupsListPage} from './pages/GroupsListPage';
+
+// Routes
+export type {GroupRoutePaths} from './hooks/useGroupRoutes';
+export {defaultGroupRoutePaths, default as useGroupRoutes} from './hooks/useGroupRoutes';
diff --git a/frontend/packages/configure-groups/src/internal/agent-query-keys.ts b/frontend/packages/configure-groups/src/internal/agent-query-keys.ts
new file mode 100644
index 0000000000..af9765af2f
--- /dev/null
+++ b/frontend/packages/configure-groups/src/internal/agent-query-keys.ts
@@ -0,0 +1,15 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// TEMPORARY: mirrors apps/console/src/features/agents/constants/agent-query-keys.ts. The agents
+// feature hasn't been extracted into @thunderid/configure-agents yet; once it is, this file
+// should be deleted and AddMemberDialog should import from that package instead.
+
+const AgentQueryKeys = {
+  AGENTS: 'agents',
+  AGENT: 'agent',
+  AGENT_GROUPS: 'agentGroups',
+  AGENT_ROLES: 'agentRoles',
+} as const;
+
+export default AgentQueryKeys;
diff --git a/frontend/packages/configure-groups/src/internal/agent.ts b/frontend/packages/configure-groups/src/internal/agent.ts
new file mode 100644
index 0000000000..2a37881b72
--- /dev/null
+++ b/frontend/packages/configure-groups/src/internal/agent.ts
@@ -0,0 +1,26 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// TEMPORARY: mirrors the two response shapes AddMemberDialog needs from
+// apps/console/src/features/agents/models/agent.ts. The agents feature hasn't been extracted
+// into @thunderid/configure-agents yet; once it is, this file should be deleted and
+// AddMemberDialog should import from that package instead.
+
+export interface BasicAgent {
+  id: string;
+  ouId: string;
+  ouHandle?: string;
+  type: string;
+  name: string;
+  description?: string;
+  logoUrl?: string;
+  clientId?: string;
+  isReadOnly?: boolean;
+}
+
+export interface AgentListResponse {
+  totalResults: number;
+  startIndex: number;
+  count: number;
+  agents: BasicAgent[];
+}
diff --git a/frontend/packages/configure-groups/src/internal/useGetAgents.ts b/frontend/packages/configure-groups/src/internal/useGetAgents.ts
new file mode 100644
index 0000000000..ce62be73f3
--- /dev/null
+++ b/frontend/packages/configure-groups/src/internal/useGetAgents.ts
@@ -0,0 +1,43 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// TEMPORARY: mirrors apps/console/src/features/agents/api/useGetAgents.ts. The agents feature
+// hasn't been extracted into @thunderid/configure-agents yet; once it is, this file should be
+// deleted and AddMemberDialog should import from that package instead.
+
+import {useQuery, type UseQueryResult} from '@tanstack/react-query';
+import {useConfig} from '@thunderid/contexts';
+import {useThunderID} from '@thunderid/react';
+import type {AgentListResponse} from './agent';
+import AgentQueryKeys from './agent-query-keys';
+
+export interface UseGetAgentsParams {
+  limit?: number;
+  offset?: number;
+}
+
+export default function useGetAgents(params?: UseGetAgentsParams): UseQueryResult<AgentListResponse> {
+  const {http} = useThunderID();
+  const {getServerUrl} = useConfig();
+  const {limit = 30, offset = 0} = params ?? {};
+
+  return useQuery<AgentListResponse>({
+    queryKey: [AgentQueryKeys.AGENTS, {limit, offset}],
+    queryFn: async (): Promise<AgentListResponse> => {
+      const serverUrl = getServerUrl();
+      const queryParams = new URLSearchParams({
+        limit: limit.toString(),
+        offset: offset.toString(),
+        include: 'display',
+      });
+
+      const response: {data: AgentListResponse} = await http.request({
+        url: `${serverUrl}/agents?${queryParams.toString()}`,
+        method: 'GET',
+        headers: {'Content-Type': 'application/json'},
+      } as unknown as Parameters<typeof http.request>[0]);
+
+      return response.data;
+    },
+  });
+}
diff --git a/frontend/apps/console/src/features/groups/models/group-create-flow.ts b/frontend/packages/configure-groups/src/models/group-create-flow.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/models/group-create-flow.ts
rename to frontend/packages/configure-groups/src/models/group-create-flow.ts
diff --git a/frontend/apps/console/src/features/groups/models/group.ts b/frontend/packages/configure-groups/src/models/group.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/models/group.ts
rename to frontend/packages/configure-groups/src/models/group.ts
diff --git a/frontend/apps/console/src/features/groups/models/requests.ts b/frontend/packages/configure-groups/src/models/requests.ts
similarity index 100%
rename from frontend/apps/console/src/features/groups/models/requests.ts
rename to frontend/packages/configure-groups/src/models/requests.ts
diff --git a/frontend/apps/console/src/features/groups/pages/CreateGroupPage.tsx b/frontend/packages/configure-groups/src/pages/CreateGroupPage.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/pages/CreateGroupPage.tsx
rename to frontend/packages/configure-groups/src/pages/CreateGroupPage.tsx
diff --git a/frontend/apps/console/src/features/groups/pages/GroupEditPage.tsx b/frontend/packages/configure-groups/src/pages/GroupEditPage.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/pages/GroupEditPage.tsx
rename to frontend/packages/configure-groups/src/pages/GroupEditPage.tsx
diff --git a/frontend/apps/console/src/features/groups/pages/GroupsListPage.tsx b/frontend/packages/configure-groups/src/pages/GroupsListPage.tsx
similarity index 91%
rename from frontend/apps/console/src/features/groups/pages/GroupsListPage.tsx
rename to frontend/packages/configure-groups/src/pages/GroupsListPage.tsx
index 798c7fd85d..dbdc37c564 100644
--- a/frontend/apps/console/src/features/groups/pages/GroupsListPage.tsx
+++ b/frontend/packages/configure-groups/src/pages/GroupsListPage.tsx
@@ -8,13 +8,14 @@ import {Plus} from '@wso2/oxygen-ui-icons-react';
 import type {JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
 import GroupsList from '../components/GroupsList';
+import useGroupRoutes from '../hooks/useGroupRoutes';
 
 export default function GroupsListPage(): JSX.Element {
   const navigate = useNavigate();
   const {t} = useTranslation();
   const logger = useLogger('GroupsListPage');
+  const routes = useGroupRoutes();
 
   return (
     <PageContent>
@@ -30,7 +31,7 @@ export default function GroupsListPage(): JSX.Element {
               startIcon={<Plus size={18} />}
               onClick={() => {
                 (async () => {
-                  await navigate(RouteConfig.groups.create());
+                  await navigate(routes.groups.create());
                 })().catch((error: unknown) => {
                   logger.error('Failed to navigate to create group page', {error});
                 });
diff --git a/frontend/apps/console/src/features/groups/pages/__tests__/CreateGroupPage.test.tsx b/frontend/packages/configure-groups/src/pages/__tests__/CreateGroupPage.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/pages/__tests__/CreateGroupPage.test.tsx
rename to frontend/packages/configure-groups/src/pages/__tests__/CreateGroupPage.test.tsx
diff --git a/frontend/apps/console/src/features/groups/pages/__tests__/GroupEditPage.test.tsx b/frontend/packages/configure-groups/src/pages/__tests__/GroupEditPage.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/pages/__tests__/GroupEditPage.test.tsx
rename to frontend/packages/configure-groups/src/pages/__tests__/GroupEditPage.test.tsx
diff --git a/frontend/apps/console/src/features/groups/pages/__tests__/GroupsListPage.test.tsx b/frontend/packages/configure-groups/src/pages/__tests__/GroupsListPage.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/groups/pages/__tests__/GroupsListPage.test.tsx
rename to frontend/packages/configure-groups/src/pages/__tests__/GroupsListPage.test.tsx
diff --git a/frontend/packages/configure-groups/tsconfig.eslint.json b/frontend/packages/configure-groups/tsconfig.eslint.json
new file mode 100644
index 0000000000..5440b11d0a
--- /dev/null
+++ b/frontend/packages/configure-groups/tsconfig.eslint.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.config.js", "**/*.config.cjs", "**/*.config.ts"]
+}
diff --git a/frontend/packages/configure-groups/tsconfig.json b/frontend/packages/configure-groups/tsconfig.json
new file mode 100644
index 0000000000..4f254611c4
--- /dev/null
+++ b/frontend/packages/configure-groups/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "ESNext",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "exclude": ["node_modules", "tmp", "dist"],
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/frontend/packages/configure-groups/tsconfig.lib.json b/frontend/packages/configure-groups/tsconfig.lib.json
new file mode 100644
index 0000000000..8d37e00dfd
--- /dev/null
+++ b/frontend/packages/configure-groups/tsconfig.lib.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist",
+    "declarationDir": "dist",
+    "types": ["node"]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.jsx", "src/**/*.tsx", "types/**/*.d.ts"]
+}
diff --git a/frontend/packages/configure-groups/tsconfig.spec.json b/frontend/packages/configure-groups/tsconfig.spec.json
new file mode 100644
index 0000000000..f4f74171e7
--- /dev/null
+++ b/frontend/packages/configure-groups/tsconfig.spec.json
@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "types": ["vitest/globals"]
+  },
+  "include": [
+    "test-configs",
+    "vitest.config.ts",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.test.jsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}
diff --git a/frontend/packages/configure-groups/vitest.config.ts b/frontend/packages/configure-groups/vitest.config.ts
new file mode 100644
index 0000000000..c86c0219e9
--- /dev/null
+++ b/frontend/packages/configure-groups/vitest.config.ts
@@ -0,0 +1,31 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {playwright} from '@vitest/browser-playwright';
+import {defineConfig} from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    coverage: {
+      provider: 'istanbul',
+      reporter: [['lcov', {projectRoot: '../../..'}], 'text-summary'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: [
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/__tests__/**',
+        '**/test/**',
+        '**/*.{test,spec}.{ts,tsx}',
+        '**/test-setup.{ts,tsx}',
+        '**/index.ts',
+      ],
+    },
+    browser: {
+      enabled: true,
+      headless: true,
+      instances: [{browser: 'chromium'}],
+      provider: playwright(),
+    },
+    setupFiles: ['@thunderid/test-utils/setup'],
+  },
+});
diff --git a/frontend/packages/configure-import-export/.editorconfig b/frontend/packages/configure-import-export/.editorconfig
new file mode 100644
index 0000000000..54a161112c
--- /dev/null
+++ b/frontend/packages/configure-import-export/.editorconfig
@@ -0,0 +1 @@
+../../.editorconfig
diff --git a/frontend/packages/configure-import-export/.gitignore b/frontend/packages/configure-import-export/.gitignore
new file mode 100644
index 0000000000..0ccb8df8de
--- /dev/null
+++ b/frontend/packages/configure-import-export/.gitignore
@@ -0,0 +1,141 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+.output
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vite/
diff --git a/frontend/packages/configure-import-export/.prettierignore b/frontend/packages/configure-import-export/.prettierignore
new file mode 100644
index 0000000000..99b0b518a7
--- /dev/null
+++ b/frontend/packages/configure-import-export/.prettierignore
@@ -0,0 +1,4 @@
+/dist
+/build
+/node_modules
+/coverage
diff --git a/frontend/packages/configure-import-export/eslint.config.js b/frontend/packages/configure-import-export/eslint.config.js
new file mode 100644
index 0000000000..f5fd8bcdcc
--- /dev/null
+++ b/frontend/packages/configure-import-export/eslint.config.js
@@ -0,0 +1,11 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import thunderIdPlugin from '@thunderid/eslint-plugin';
+
+export default [
+  {
+    ignores: ['dist/**', 'build/**', 'node_modules/**', 'coverage/**'],
+  },
+  ...thunderIdPlugin.configs.react,
+];
diff --git a/frontend/packages/configure-import-export/package.json b/frontend/packages/configure-import-export/package.json
new file mode 100644
index 0000000000..9fbaed2f45
--- /dev/null
+++ b/frontend/packages/configure-import-export/package.json
@@ -0,0 +1,108 @@
+{
+  "private": true,
+  "name": "@thunderid/configure-import-export",
+  "version": "0.0.0",
+  "description": "Import/export configuration feature for ⚡️ ThunderID applications",
+  "keywords": [
+    "thunderid",
+    "configure",
+    "import-export",
+    "react",
+    "feature"
+  ],
+  "homepage": "https://github.com/thunder-id/thunderid/tree/main/frontend/packages/configure-import-export#readme",
+  "bugs": {
+    "url": "https://github.com/thunder-id/thunderid/issues"
+  },
+  "author": "The ThunderID Authors",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thunder-id/thunderid",
+    "directory": "frontend/packages/configure-import-export"
+  },
+  "scripts": {
+    "build": "pnpm clean:dist && rolldown -c rolldown.config.js && tsc -p tsconfig.lib.json --emitDeclarationOnly --outDir dist",
+    "clean": "pnpm clean:node_modules && pnpm clean:dist",
+    "clean:dist": "rimraf dist",
+    "clean:node_modules": "rimraf node_modules",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run --passWithNoTests",
+    "test:coverage": "vitest run --coverage --passWithNoTests",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.lib.json"
+  },
+  "devDependencies": {
+    "@monaco-editor/react": "catalog:",
+    "@playwright/test": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@thunderid/components": "workspace:^",
+    "@thunderid/contexts": "workspace:^",
+    "@thunderid/eslint-plugin": "workspace:^",
+    "@thunderid/logger": "workspace:^",
+    "@thunderid/prettier-config": "workspace:^",
+    "@thunderid/react": "catalog:",
+    "@thunderid/test-utils": "workspace:^",
+    "@thunderid/utils": "workspace:^",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@vitest/browser-playwright": "catalog:",
+    "@vitest/coverage-istanbul": "catalog:",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
+    "eslint": "catalog:",
+    "i18next": "catalog:",
+    "prettier": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-i18next": "catalog:",
+    "react-router": "catalog:",
+    "rimraf": "catalog:",
+    "rolldown": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:",
+    "yaml": "2.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@monaco-editor/react": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@thunderid/components": "workspace:^",
+    "@thunderid/contexts": "workspace:^",
+    "@thunderid/logger": "workspace:^",
+    "@thunderid/react": "catalog:",
+    "@thunderid/utils": "workspace:^",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
+    "i18next": "catalog:",
+    "react": "catalog:",
+    "react-i18next": "catalog:",
+    "react-router": "catalog:",
+    "yaml": "2.8.3"
+  }
+}
diff --git a/frontend/packages/configure-import-export/prettier.config.js b/frontend/packages/configure-import-export/prettier.config.js
new file mode 100644
index 0000000000..f054cd507c
--- /dev/null
+++ b/frontend/packages/configure-import-export/prettier.config.js
@@ -0,0 +1,6 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import config from '@thunderid/prettier-config';
+
+export default config;
diff --git a/frontend/packages/configure-import-export/rolldown.config.js b/frontend/packages/configure-import-export/rolldown.config.js
new file mode 100644
index 0000000000..a4911bb7fd
--- /dev/null
+++ b/frontend/packages/configure-import-export/rolldown.config.js
@@ -0,0 +1,49 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {readFileSync} from 'fs';
+import {join} from 'path';
+import {defineConfig} from 'rolldown';
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
+
+const external = [
+  ...Object.keys(pkg.dependencies || {}),
+  ...Object.keys(pkg.peerDependencies || {}),
+  'react/jsx-runtime',
+  // Needed to avoid hook ordering issues.
+  /^@mui\//,
+];
+
+const commonOptions = {
+  input: join('src', 'index.ts'),
+  external,
+  target: 'es2020',
+  sourcemap: true,
+};
+
+export default defineConfig([
+  // ✅ ESM build (for browsers/bundlers)
+  {
+    ...commonOptions,
+    platform: 'browser',
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+  // ✅ CommonJS build (for Node/SSR/testing)
+  {
+    ...commonOptions,
+    platform: 'node',
+    output: {
+      dir: join('dist', 'cjs'),
+      entryFileNames: '[name].cjs',
+      format: 'cjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+]);
diff --git a/frontend/apps/console/src/features/import-export/api/__tests__/useExportConfiguration.test.ts b/frontend/packages/configure-import-export/src/api/__tests__/useExportConfiguration.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/api/__tests__/useExportConfiguration.test.ts
rename to frontend/packages/configure-import-export/src/api/__tests__/useExportConfiguration.test.ts
diff --git a/frontend/apps/console/src/features/import-export/api/__tests__/useImportConfiguration.test.ts b/frontend/packages/configure-import-export/src/api/__tests__/useImportConfiguration.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/api/__tests__/useImportConfiguration.test.ts
rename to frontend/packages/configure-import-export/src/api/__tests__/useImportConfiguration.test.ts
diff --git a/frontend/apps/console/src/features/import-export/api/useExportConfiguration.ts b/frontend/packages/configure-import-export/src/api/useExportConfiguration.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/api/useExportConfiguration.ts
rename to frontend/packages/configure-import-export/src/api/useExportConfiguration.ts
diff --git a/frontend/apps/console/src/features/import-export/api/useImportConfiguration.ts b/frontend/packages/configure-import-export/src/api/useImportConfiguration.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/api/useImportConfiguration.ts
rename to frontend/packages/configure-import-export/src/api/useImportConfiguration.ts
diff --git a/frontend/apps/console/src/features/import-export/components/ConfigureExport.tsx b/frontend/packages/configure-import-export/src/components/ConfigureExport.tsx
similarity index 93%
rename from frontend/apps/console/src/features/import-export/components/ConfigureExport.tsx
rename to frontend/packages/configure-import-export/src/components/ConfigureExport.tsx
index ce746dca6a..0eea9d59e6 100644
--- a/frontend/apps/console/src/features/import-export/components/ConfigureExport.tsx
+++ b/frontend/packages/configure-import-export/src/components/ConfigureExport.tsx
@@ -213,7 +213,7 @@ export default function ConfigureExport({
         try {
           const resource = yaml.parse(yamlContent) as unknown;
           if (resource && typeof resource === 'object') {
-            const resourceType = (resource as Record<string, unknown>).resource_type?.toString() ?? 'unknown';
+            const resourceType = (resource as Record<string, unknown>)['resource_type']?.toString() ?? 'unknown';
             if (!resourcesByType[resourceType]) {
               resourcesByType[resourceType] = [];
             }
@@ -240,37 +240,44 @@ export default function ConfigureExport({
 
   // Use resourceCounts from API if available, otherwise fall back to parsing
   const applicationsCount =
-    resourceCounts?.application ?? (Array.isArray(configData?.application) ? configData.application.length : 0);
-  const usersCount = resourceCounts?.user ?? (Array.isArray(configData?.user) ? configData.user.length : 0);
-  const flowsCount = resourceCounts?.flow ?? (Array.isArray(configData?.flow) ? configData.flow.length : 0);
-  const themesCount = resourceCounts?.theme ?? (Array.isArray(configData?.theme) ? configData.theme.length : 0);
+    resourceCounts?.['application'] ??
+    (Array.isArray(configData?.['application']) ? configData['application'].length : 0);
+  const usersCount = resourceCounts?.['user'] ?? (Array.isArray(configData?.['user']) ? configData['user'].length : 0);
+  const flowsCount = resourceCounts?.['flow'] ?? (Array.isArray(configData?.['flow']) ? configData['flow'].length : 0);
+  const themesCount =
+    resourceCounts?.['theme'] ?? (Array.isArray(configData?.['theme']) ? configData['theme'].length : 0);
   const connectionsCount =
-    resourceCounts?.connection ?? (Array.isArray(configData?.connection) ? configData.connection.length : 0);
+    resourceCounts?.['connection'] ?? (Array.isArray(configData?.['connection']) ? configData['connection'].length : 0);
   const orgUnitsCount =
-    resourceCounts?.organization_unit ??
-    (Array.isArray(configData?.organization_unit) ? configData.organization_unit.length : 0);
+    resourceCounts?.['organization_unit'] ??
+    (Array.isArray(configData?.['organization_unit']) ? configData['organization_unit'].length : 0);
   const userTypesCount =
-    resourceCounts?.user_type ?? (Array.isArray(configData?.user_type) ? configData.user_type.length : 0);
+    resourceCounts?.['user_type'] ?? (Array.isArray(configData?.['user_type']) ? configData['user_type'].length : 0);
   const agentTypesCount =
-    resourceCounts?.agent_type ?? (Array.isArray(configData?.agent_type) ? configData.agent_type.length : 0);
+    resourceCounts?.['agent_type'] ?? (Array.isArray(configData?.['agent_type']) ? configData['agent_type'].length : 0);
   const translationsCount =
-    resourceCounts?.translation ?? (Array.isArray(configData?.translation) ? configData.translation.length : 0);
-  const layoutsCount = resourceCounts?.layout ?? (Array.isArray(configData?.layout) ? configData.layout.length : 0);
+    resourceCounts?.['translation'] ??
+    (Array.isArray(configData?.['translation']) ? configData['translation'].length : 0);
+  const layoutsCount =
+    resourceCounts?.['layout'] ?? (Array.isArray(configData?.['layout']) ? configData['layout'].length : 0);
   const resourceServersCount =
-    resourceCounts?.resource_server ??
-    (Array.isArray(configData?.resource_server) ? configData.resource_server.length : 0);
-  const rolesCount = resourceCounts?.role ?? (Array.isArray(configData?.role) ? configData.role.length : 0);
-  const groupsCount = resourceCounts?.group ?? (Array.isArray(configData?.group) ? configData.group.length : 0);
-  const agentsCount = resourceCounts?.agent ?? (Array.isArray(configData?.agent) ? configData.agent.length : 0);
+    resourceCounts?.['resource_server'] ??
+    (Array.isArray(configData?.['resource_server']) ? configData['resource_server'].length : 0);
+  const rolesCount = resourceCounts?.['role'] ?? (Array.isArray(configData?.['role']) ? configData['role'].length : 0);
+  const groupsCount =
+    resourceCounts?.['group'] ?? (Array.isArray(configData?.['group']) ? configData['group'].length : 0);
+  const agentsCount =
+    resourceCounts?.['agent'] ?? (Array.isArray(configData?.['agent']) ? configData['agent'].length : 0);
   const serverConfigsCount =
-    resourceCounts?.server_config ?? (Array.isArray(configData?.server_config) ? configData.server_config.length : 0);
+    resourceCounts?.['server_config'] ??
+    (Array.isArray(configData?.['server_config']) ? configData['server_config'].length : 0);
 
   const items: ConfigSummaryItem[] = [];
 
   // Add applications if present
   if (applicationsCount > 0) {
     const apps =
-      (configData?.application as {
+      (configData?.['application'] as {
         name?: string;
         handle?: string;
         description?: string;
@@ -348,7 +355,7 @@ export default function ConfigureExport({
 
   // Add connections (identity providers and notification senders) if present
   if (connectionsCount > 0) {
-    const connections = (configData?.connection as {name?: string; handle?: string; type?: string}[]) ?? [];
+    const connections = (configData?.['connection'] as {name?: string; handle?: string; type?: string}[]) ?? [];
     const displayedConnections = expandedConnections ? connections : connections.slice(0, 5);
     const remainingCount = connections.length - 5;
 
@@ -400,7 +407,7 @@ export default function ConfigureExport({
 
   // Add flows if present
   if (flowsCount > 0) {
-    const flows = (configData?.flow as {name?: string; handle?: string; flowType?: string}[]) ?? [];
+    const flows = (configData?.['flow'] as {name?: string; handle?: string; flowType?: string}[]) ?? [];
     const displayedFlows = expandedFlows ? flows : flows.slice(0, 5);
     const remainingCount = flows.length - 5;
 
@@ -457,7 +464,7 @@ export default function ConfigureExport({
 
   // Add themes if present
   if (themesCount > 0) {
-    const themes = (configData?.theme as {name?: string; handle?: string; description?: string}[]) ?? [];
+    const themes = (configData?.['theme'] as {name?: string; handle?: string; description?: string}[]) ?? [];
     const displayedThemes = expandedThemes ? themes : themes.slice(0, 5);
     const remainingCount = themes.length - 5;
 
@@ -517,7 +524,8 @@ export default function ConfigureExport({
   // Add users if present
   if (usersCount > 0) {
     const users =
-      (configData?.user as {type?: string; attributes?: {name?: string; username?: string; email?: string}}[]) ?? [];
+      (configData?.['user'] as {type?: string; attributes?: {name?: string; username?: string; email?: string}}[]) ??
+      [];
     const displayedUsers = expandedUsers ? users : users.slice(0, 5);
     const remainingCount = users.length - 5;
 
@@ -580,7 +588,8 @@ export default function ConfigureExport({
 
   // Add organization units if present
   if (orgUnitsCount > 0) {
-    const orgUnits = (configData?.organization_unit as {name?: string; handle?: string; description?: string}[]) ?? [];
+    const orgUnits =
+      (configData?.['organization_unit'] as {name?: string; handle?: string; description?: string}[]) ?? [];
     const displayedOrgUnits = expandedOrgUnits ? orgUnits : orgUnits.slice(0, 5);
     const remainingCount = orgUnits.length - 5;
 
@@ -640,7 +649,7 @@ export default function ConfigureExport({
   // Add user types if present
   if (userTypesCount > 0) {
     const schemas =
-      (configData?.user_type as {name?: string; handle?: string; allow_self_registration?: boolean}[]) ?? [];
+      (configData?.['user_type'] as {name?: string; handle?: string; allow_self_registration?: boolean}[]) ?? [];
     const displayedSchemas = expandedSchemas ? schemas : schemas.slice(0, 5);
     const remainingCount = schemas.length - 5;
 
@@ -698,7 +707,7 @@ export default function ConfigureExport({
 
   // Add agent types if present
   if (agentTypesCount > 0) {
-    const agentTypes = (configData?.agent_type as {name?: string; handle?: string}[]) ?? [];
+    const agentTypes = (configData?.['agent_type'] as {name?: string; handle?: string}[]) ?? [];
     const displayedAgentTypes = expandedAgentTypes ? agentTypes : agentTypes.slice(0, 5);
     const remainingCount = agentTypes.length - 5;
 
@@ -749,7 +758,7 @@ export default function ConfigureExport({
 
   // Add translations if present
   if (translationsCount > 0) {
-    const translations = (configData?.translation as {locale?: string; namespace?: string}[]) ?? [];
+    const translations = (configData?.['translation'] as {locale?: string; namespace?: string}[]) ?? [];
     const displayedTranslations = expandedTranslations ? translations : translations.slice(0, 5);
     const remainingCount = translations.length - 5;
 
@@ -806,7 +815,7 @@ export default function ConfigureExport({
 
   // Add layouts if present
   if (layoutsCount > 0) {
-    const layouts = (configData?.layout as {name?: string; handle?: string; description?: string}[]) ?? [];
+    const layouts = (configData?.['layout'] as {name?: string; handle?: string; description?: string}[]) ?? [];
     const displayedLayouts = expandedLayouts ? layouts : layouts.slice(0, 5);
     const remainingCount = layouts.length - 5;
 
@@ -861,7 +870,7 @@ export default function ConfigureExport({
   // Add resource servers if present
   if (resourceServersCount > 0) {
     const resourceServers =
-      (configData?.resource_server as {name?: string; handle?: string; description?: string}[]) ?? [];
+      (configData?.['resource_server'] as {name?: string; handle?: string; description?: string}[]) ?? [];
     const displayedResourceServers = expandedResourceServers ? resourceServers : resourceServers.slice(0, 5);
     const remainingCount = resourceServers.length - 5;
 
@@ -920,7 +929,7 @@ export default function ConfigureExport({
 
   // Add roles if present
   if (rolesCount > 0) {
-    const roles = (configData?.role as {name?: string; handle?: string; description?: string}[]) ?? [];
+    const roles = (configData?.['role'] as {name?: string; handle?: string; description?: string}[]) ?? [];
     const displayedRoles = expandedRoles ? roles : roles.slice(0, 5);
     const remainingCount = roles.length - 5;
 
@@ -979,7 +988,7 @@ export default function ConfigureExport({
 
   // Add groups if present
   if (groupsCount > 0) {
-    const groups = (configData?.group as {id?: string; name?: string; description?: string}[]) ?? [];
+    const groups = (configData?.['group'] as {id?: string; name?: string; description?: string}[]) ?? [];
     const displayedGroups = expandedGroups ? groups : groups.slice(0, 5);
     const remainingCount = groups.length - 5;
 
@@ -1034,7 +1043,7 @@ export default function ConfigureExport({
   // Add agents if present
   if (agentsCount > 0) {
     const agents =
-      (configData?.agent as {
+      (configData?.['agent'] as {
         id?: string;
         name?: string;
         description?: string;
@@ -1106,7 +1115,7 @@ export default function ConfigureExport({
 
   // Add server configurations if present
   if (serverConfigsCount > 0) {
-    const serverConfigs = (configData?.server_config as {name?: string}[]) ?? [];
+    const serverConfigs = (configData?.['server_config'] as {name?: string}[]) ?? [];
     const displayedServerConfigs = expandedServerConfigs ? serverConfigs : serverConfigs.slice(0, 5);
     const remainingCount = serverConfigs.length - 5;
 
diff --git a/frontend/apps/console/src/features/import-export/components/EnvVariablesViewer.tsx b/frontend/packages/configure-import-export/src/components/EnvVariablesViewer.tsx
similarity index 100%
rename from frontend/apps/console/src/features/import-export/components/EnvVariablesViewer.tsx
rename to frontend/packages/configure-import-export/src/components/EnvVariablesViewer.tsx
diff --git a/frontend/apps/console/src/features/import-export/components/FileContentViewer.tsx b/frontend/packages/configure-import-export/src/components/FileContentViewer.tsx
similarity index 100%
rename from frontend/apps/console/src/features/import-export/components/FileContentViewer.tsx
rename to frontend/packages/configure-import-export/src/components/FileContentViewer.tsx
diff --git a/frontend/apps/console/src/features/import-export/components/HowProductRunInHostedIllustration.tsx b/frontend/packages/configure-import-export/src/components/HowProductRunInHostedIllustration.tsx
similarity index 100%
rename from frontend/apps/console/src/features/import-export/components/HowProductRunInHostedIllustration.tsx
rename to frontend/packages/configure-import-export/src/components/HowProductRunInHostedIllustration.tsx
diff --git a/frontend/apps/console/src/features/import-export/components/ResourceSummaryTable.tsx b/frontend/packages/configure-import-export/src/components/ResourceSummaryTable.tsx
similarity index 100%
rename from frontend/apps/console/src/features/import-export/components/ResourceSummaryTable.tsx
rename to frontend/packages/configure-import-export/src/components/ResourceSummaryTable.tsx
diff --git a/frontend/apps/console/src/features/import-export/components/TemplateVariableDisplay.tsx b/frontend/packages/configure-import-export/src/components/TemplateVariableDisplay.tsx
similarity index 100%
rename from frontend/apps/console/src/features/import-export/components/TemplateVariableDisplay.tsx
rename to frontend/packages/configure-import-export/src/components/TemplateVariableDisplay.tsx
diff --git a/frontend/apps/console/src/features/import-export/components/__tests__/ConfigureExport.test.tsx b/frontend/packages/configure-import-export/src/components/__tests__/ConfigureExport.test.tsx
similarity index 51%
rename from frontend/apps/console/src/features/import-export/components/__tests__/ConfigureExport.test.tsx
rename to frontend/packages/configure-import-export/src/components/__tests__/ConfigureExport.test.tsx
index 6bebd3db19..d6db02272b 100644
--- a/frontend/apps/console/src/features/import-export/components/__tests__/ConfigureExport.test.tsx
+++ b/frontend/packages/configure-import-export/src/components/__tests__/ConfigureExport.test.tsx
@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useConfig} from '@thunderid/contexts';
-import {render, screen} from '@thunderid/test-utils';
+import {render, screen, userEvent, waitFor} from '@thunderid/test-utils';
 import {afterEach, describe, expect, it, vi} from 'vitest';
 
-const mockT = vi.fn((key: string) => key);
 const mockLogger = {
   error: vi.fn(),
   warn: vi.fn(),
@@ -13,10 +12,6 @@ const mockLogger = {
   debug: vi.fn(),
 };
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: mockT}),
-}));
-
 vi.mock('@thunderid/logger/react', () => ({
   useLogger: () => mockLogger,
 }));
@@ -83,12 +78,6 @@ vi.mock('./HowProductRunInHostedIllustration', () => ({
   default: () => <div data-testid="how-product-run-illustration">Illustration</div>,
 }));
 
-vi.mock('./ResourceSummaryTable', () => ({
-  default: ({items}: {items: unknown[]}) => (
-    <div data-testid="resource-summary-table">Resource Table: {items.length} items</div>
-  ),
-}));
-
 vi.mock('@monaco-editor/react', () => ({
   default: () => null,
 }));
@@ -290,10 +279,222 @@ type: google
       render(<ConfigureExport />);
 
       // Product name should be used in translations
-      expect(mockT).toHaveBeenCalledWith(
-        expect.stringContaining('nextSteps.startWithConfig'),
-        expect.objectContaining({productName: 'CustomProduct'}),
+      expect(screen.getByText('CustomProduct will start with your exported configuration')).toBeInTheDocument();
+    });
+  });
+
+  const buildResourcesYaml = (count: number, body: (idx: number) => string): string =>
+    Array.from({length: count}, (_, idx) => `---\n${body(idx)}\n`).join('\n');
+
+  const resourceTypeCases: {resourceType: string; label: string; body: (idx: number) => string}[] = [
+    {
+      resourceType: 'application',
+      label: 'Applications',
+      body: (idx) =>
+        `resource_type: application\nname: App ${idx}\ndescription: Application description ${idx}\nurl: https://app${idx}.example.com\ninbound_auth_config:\n  - type: oauth2\n    config:\n      client_id: client-app-${idx}`,
+    },
+    {
+      resourceType: 'connection',
+      label: 'Connections',
+      body: (idx) => `resource_type: connection\nname: Connection ${idx}\ntype: google`,
+    },
+    {
+      resourceType: 'flow',
+      label: 'Flows',
+      body: (idx) => `resource_type: flow\nname: Flow ${idx}\nhandle: flow-${idx}\nflowType: authentication`,
+    },
+    {
+      resourceType: 'theme',
+      label: 'Themes',
+      body: (idx) =>
+        `resource_type: theme\nname: Theme ${idx}\nhandle: theme-${idx}\ndescription: Theme description ${idx}`,
+    },
+    {
+      resourceType: 'user',
+      label: 'Users',
+      body: (idx) =>
+        `resource_type: user\ntype: person\nattributes:\n  name: User Name ${idx}\n  username: user${idx}\n  email: user${idx}@example.com`,
+    },
+    {
+      resourceType: 'organization_unit',
+      label: 'Organization Units',
+      body: (idx) =>
+        `resource_type: organization_unit\nname: Org ${idx}\nhandle: org-${idx}\ndescription: Org description ${idx}`,
+    },
+    {
+      resourceType: 'user_type',
+      label: 'User Types',
+      body: (idx) =>
+        `resource_type: user_type\nname: Schema ${idx}\nhandle: schema-${idx}\nallow_self_registration: true`,
+    },
+    {
+      resourceType: 'agent_type',
+      label: 'Agent Types',
+      body: (idx) => `resource_type: agent_type\nname: Agent Type ${idx}\nhandle: agent-type-${idx}`,
+    },
+    {
+      resourceType: 'translation',
+      label: 'Translations',
+      body: (idx) => `resource_type: translation\nlocale: en-US-${idx}\nnamespace: common`,
+    },
+    {
+      resourceType: 'layout',
+      label: 'Layouts',
+      body: (idx) =>
+        `resource_type: layout\nname: Layout ${idx}\nhandle: layout-${idx}\ndescription: Layout description ${idx}`,
+    },
+    {
+      resourceType: 'resource_server',
+      label: 'Resource Servers',
+      body: (idx) =>
+        `resource_type: resource_server\nname: Resource Server ${idx}\nhandle: rs-${idx}\ndescription: Resource server description ${idx}`,
+    },
+    {
+      resourceType: 'role',
+      label: 'Roles',
+      body: (idx) =>
+        `resource_type: role\nname: Role ${idx}\nhandle: role-${idx}\ndescription: Role description ${idx}`,
+    },
+    {
+      resourceType: 'group',
+      label: 'Groups',
+      body: (idx) =>
+        `resource_type: group\nid: group-${idx}\nname: Group ${idx}\ndescription: Group description ${idx}`,
+    },
+    {
+      resourceType: 'agent',
+      label: 'Agents',
+      body: (idx) =>
+        `resource_type: agent\nid: agent-${idx}\nname: Agent ${idx}\ndescription: Agent description ${idx}\ninbound_auth_config:\n  - type: oauth2\n    config:\n      client_id: client-agent-${idx}`,
+    },
+    {
+      resourceType: 'server_config',
+      label: 'Server Configurations',
+      body: (idx) => `resource_type: server_config\nname: Server Config ${idx}`,
+    },
+  ];
+
+  describe.each(resourceTypeCases)('$resourceType resource section', ({label, body}) => {
+    it('renders the section and toggles show more/show less', async () => {
+      const yaml = buildResourcesYaml(6, body);
+
+      render(<ConfigureExport resources={yaml} />);
+
+      const row = screen.getByText(label).closest('tr');
+      expect(row).not.toBeNull();
+
+      await userEvent.click(row!);
+
+      const moreChip = screen.getByText('+ 1 more');
+      await userEvent.click(moreChip);
+
+      expect(screen.getByText('Show less')).toBeInTheDocument();
+    });
+  });
+
+  describe('handleCopyCommand', () => {
+    it('writes the run command to the clipboard when the copy button is clicked', async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, 'clipboard', {
+        value: {writeText},
+        configurable: true,
+        writable: true,
+      });
+
+      render(<ConfigureExport />);
+
+      const copyButton = screen.getByTestId('icon-copy').closest('button');
+      expect(copyButton).not.toBeNull();
+
+      await userEvent.click(copyButton!);
+
+      await waitFor(() => {
+        expect(writeText).toHaveBeenCalledWith('./start.sh project-foo.yml --env production.env');
+      });
+    });
+  });
+
+  describe('handleDownloadConfiguration', () => {
+    afterEach(() => {
+      delete (window as unknown as {showSaveFilePicker?: unknown}).showSaveFilePicker;
+    });
+
+    it('saves the file via the File System Access API when supported', async () => {
+      const write = vi.fn().mockResolvedValue(undefined);
+      const close = vi.fn().mockResolvedValue(undefined);
+      const createWritable = vi.fn().mockResolvedValue({write, close});
+      const showSaveFilePicker = vi.fn().mockResolvedValue({createWritable});
+      (window as unknown as {showSaveFilePicker: typeof showSaveFilePicker}).showSaveFilePicker = showSaveFilePicker;
+
+      render(<ConfigureExport resources={'---\nresource_type: application\nname: Test App'} />);
+
+      const exportButton = screen.getByText('Export Configuration');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(showSaveFilePicker).toHaveBeenCalled();
+      });
+      await waitFor(() => {
+        expect(write).toHaveBeenCalledWith('---\nresource_type: application\nname: Test App');
+      });
+      expect(close).toHaveBeenCalled();
+    });
+
+    it('silently ignores errors when the save is cancelled', async () => {
+      const showSaveFilePicker = vi.fn().mockRejectedValue(new Error('cancelled'));
+      (window as unknown as {showSaveFilePicker: typeof showSaveFilePicker}).showSaveFilePicker = showSaveFilePicker;
+
+      render(<ConfigureExport resources={'---\nresource_type: application\nname: Test App'} />);
+
+      const exportButton = screen.getByText('Export Configuration');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(showSaveFilePicker).toHaveBeenCalled();
+      });
+      expect(screen.getByText('Export Configuration')).toBeInTheDocument();
+    });
+
+    it('falls back to a blob download when the File System Access API is unsupported', async () => {
+      delete (window as unknown as {showSaveFilePicker?: unknown}).showSaveFilePicker;
+      const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => undefined);
+
+      render(<ConfigureExport resources={'---\nresource_type: application\nname: Test App'} />);
+
+      const exportButton = screen.getByText('Export Configuration');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(clickSpy).toHaveBeenCalled();
+      });
+
+      clickSpy.mockRestore();
+    });
+  });
+
+  describe('YAML parsing edge cases', () => {
+    it('extracts the file name from a File: comment when logging a parse warning', () => {
+      const yamlWithFileComment = [
+        '---',
+        '# File: applications/app1.yml',
+        'name: Test App',
+        '  invalid: indentation',
+        '    bad: yaml',
+      ].join('\n');
+
+      render(<ConfigureExport resources={yamlWithFileComment} />);
+
+      expect(mockLogger.warn).toHaveBeenCalledWith(
+        'Failed to parse YAML section',
+        expect.objectContaining({fileName: 'applications/app1.yml'}),
       );
     });
+
+    it('logs an error and renders without crashing when resources is not a string', () => {
+      render(<ConfigureExport resources={12345 as unknown as string} />);
+
+      expect(mockLogger.error).toHaveBeenCalledWith('Failed to parse export resources', expect.any(Object));
+      expect(screen.getByTestId('icon-terminal')).toBeInTheDocument();
+    });
   });
 });
diff --git a/frontend/apps/console/src/features/import-export/components/__tests__/EnvVariablesViewer.test.tsx b/frontend/packages/configure-import-export/src/components/__tests__/EnvVariablesViewer.test.tsx
similarity index 87%
rename from frontend/apps/console/src/features/import-export/components/__tests__/EnvVariablesViewer.test.tsx
rename to frontend/packages/configure-import-export/src/components/__tests__/EnvVariablesViewer.test.tsx
index a2ea7a4d18..6f4f146b17 100644
--- a/frontend/apps/console/src/features/import-export/components/__tests__/EnvVariablesViewer.test.tsx
+++ b/frontend/packages/configure-import-export/src/components/__tests__/EnvVariablesViewer.test.tsx
@@ -5,28 +5,6 @@ import {fireEvent, render, screen, waitFor} from '@thunderid/test-utils';
 import {describe, expect, it, vi} from 'vitest';
 import EnvVariablesViewer from '../EnvVariablesViewer';
 
-const mockT = (key: string, params?: Record<string, unknown>) => {
-  // When useTranslation is called with a namespace, keys don't include the namespace prefix
-  switch (key) {
-    case 'envViewer.variableCount':
-      return params?.count !== undefined ? `${Number(params.count)} variables` : 'envViewer.variableCount';
-    case 'envViewer.modified':
-      return '(modified)';
-    case 'envViewer.placeholderWarning':
-      return 'Some values contain placeholders';
-    case 'envViewer.title':
-      return 'Environment Variables';
-    case 'envViewer.download':
-      return 'Download';
-    default:
-      return key;
-  }
-};
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: mockT}),
-}));
-
 vi.mock('@monaco-editor/react', () => ({
   default: ({
     value,
@@ -68,33 +46,33 @@ describe('EnvVariablesViewer', () => {
     it('displays variable count', () => {
       render(<EnvVariablesViewer content={mockContent} fileName={mockFileName} />);
 
-      expect(screen.getByText('2 variables')).toBeInTheDocument();
+      expect(screen.getByText('2 variables detected')).toBeInTheDocument();
     });
 
     it('counts only non-comment lines', () => {
       const contentWithComments = '# Comment\nAPI_KEY=secret\n# Another comment\nURL=value\n';
       render(<EnvVariablesViewer content={contentWithComments} fileName={mockFileName} />);
 
-      expect(screen.getByText('2 variables')).toBeInTheDocument();
+      expect(screen.getByText('2 variables detected')).toBeInTheDocument();
     });
 
     it('ignores empty lines in count', () => {
       const contentWithEmpty = 'API_KEY=secret\n\n\nURL=value\n';
       render(<EnvVariablesViewer content={contentWithEmpty} fileName={mockFileName} />);
 
-      expect(screen.getByText('2 variables')).toBeInTheDocument();
+      expect(screen.getByText('2 variables detected')).toBeInTheDocument();
     });
 
     it('renders download button by default', () => {
       render(<EnvVariablesViewer content={mockContent} fileName={mockFileName} />);
 
-      expect(screen.getByText('Download')).toBeInTheDocument();
+      expect(screen.getByText('Download .env')).toBeInTheDocument();
     });
 
     it('hides download button when showDownload is false', () => {
       render(<EnvVariablesViewer content={mockContent} fileName={mockFileName} showDownload={false} />);
 
-      expect(screen.queryByText('Download')).not.toBeInTheDocument();
+      expect(screen.queryByText('Download .env')).not.toBeInTheDocument();
     });
   });
 
@@ -211,7 +189,7 @@ describe('EnvVariablesViewer', () => {
       const editor = screen.getByTestId('monaco-editor');
       fireEvent.change(editor, {target: {value: (editor as HTMLTextAreaElement).value + 'NEW_VAR=value'}});
 
-      expect(screen.getByText(/\(modified\)/)).toBeInTheDocument();
+      expect(screen.getByText(/Modified/)).toBeInTheDocument();
     });
 
     it('does not call onChange when not in editable mode', async () => {
@@ -241,7 +219,9 @@ describe('EnvVariablesViewer', () => {
       const buttons = screen.getAllByRole('button');
       fireEvent.click(buttons[buttons.length - 1]);
 
-      expect(screen.getByText('Some values contain placeholders')).toBeInTheDocument();
+      expect(
+        screen.getByText('Some environment variables contain placeholder values. Edit them below before importing.'),
+      ).toBeInTheDocument();
     });
 
     it('does not show placeholder warning when no placeholders', () => {
@@ -250,7 +230,9 @@ describe('EnvVariablesViewer', () => {
       const buttons = screen.getAllByRole('button');
       fireEvent.click(buttons[buttons.length - 1]);
 
-      expect(screen.queryByText('Some values contain placeholders')).not.toBeInTheDocument();
+      expect(
+        screen.queryByText('Some environment variables contain placeholder values. Edit them below before importing.'),
+      ).not.toBeInTheDocument();
     });
 
     it('does not show placeholder warning in readonly mode', () => {
@@ -260,12 +242,18 @@ describe('EnvVariablesViewer', () => {
       const buttons = screen.getAllByRole('button');
       fireEvent.click(buttons[buttons.length - 1]);
 
-      expect(screen.queryByText('Some values contain placeholders')).not.toBeInTheDocument();
+      expect(
+        screen.queryByText('Some environment variables contain placeholder values. Edit them below before importing.'),
+      ).not.toBeInTheDocument();
     });
   });
 
   describe('download functionality', () => {
     it('downloads readonly content when not editable', () => {
+      // The real browser running these tests supports the File System Access API; remove it so
+      // this test exercises the traditional-download fallback it is asserting on.
+      delete (window as unknown as {showSaveFilePicker?: unknown}).showSaveFilePicker;
+
       const mockCreateElement = vi.spyOn(document, 'createElement');
       const mockCreateObjectURL = vi.fn(() => 'blob:mock-url');
       const mockRevokeObjectURL = vi.fn();
@@ -274,7 +262,7 @@ describe('EnvVariablesViewer', () => {
 
       render(<EnvVariablesViewer content={mockContent} fileName={mockFileName} />);
 
-      const downloadButton = screen.getByText('Download');
+      const downloadButton = screen.getByText('Download .env');
       fireEvent.click(downloadButton);
 
       expect(mockCreateObjectURL).toHaveBeenCalled();
@@ -282,6 +270,9 @@ describe('EnvVariablesViewer', () => {
     });
 
     it('downloads edited content when editable', () => {
+      // See note above: force the traditional-download fallback path.
+      delete (window as unknown as {showSaveFilePicker?: unknown}).showSaveFilePicker;
+
       const mockCreateElement = vi.spyOn(document, 'createElement');
       const mockCreateObjectURL = vi.fn(() => 'blob:mock-url');
       URL.createObjectURL = mockCreateObjectURL;
@@ -295,7 +286,7 @@ describe('EnvVariablesViewer', () => {
       fireEvent.change(editor, {target: {value: ''}});
       fireEvent.change(editor, {target: {value: (editor as HTMLTextAreaElement).value + 'EDITED_VAR=edited'}});
 
-      const downloadButton = screen.getByText('Download');
+      const downloadButton = screen.getByText('Download .env');
       fireEvent.click(downloadButton);
 
       expect(mockCreateElement).toHaveBeenCalledWith('a');
@@ -316,7 +307,7 @@ describe('EnvVariablesViewer', () => {
 
       render(<EnvVariablesViewer content={mockContent} fileName={mockFileName} />);
 
-      const downloadButton = screen.getByText('Download');
+      const downloadButton = screen.getByText('Download .env');
       fireEvent.click(downloadButton);
 
       await waitFor(() => {
@@ -331,7 +322,7 @@ describe('EnvVariablesViewer', () => {
 
       render(<EnvVariablesViewer content={mockContent} fileName={mockFileName} />);
 
-      const downloadButton = screen.getByText('Download');
+      const downloadButton = screen.getByText('Download .env');
 
       fireEvent.click(downloadButton);
       expect(mockShowSaveFilePicker).toBeDefined();
@@ -363,14 +354,14 @@ describe('EnvVariablesViewer', () => {
     it('handles empty content', () => {
       render(<EnvVariablesViewer content="" fileName={mockFileName} />);
 
-      expect(screen.getByText('0 variables')).toBeInTheDocument();
+      expect(screen.getByText('0 variables detected')).toBeInTheDocument();
     });
 
     it('handles content with only comments', () => {
       const commentsOnly = '# Comment 1\n# Comment 2\n';
       render(<EnvVariablesViewer content={commentsOnly} fileName={mockFileName} />);
 
-      expect(screen.getByText('0 variables')).toBeInTheDocument();
+      expect(screen.getByText('0 variables detected')).toBeInTheDocument();
     });
 
     it('handles undefined onChange callback', () => {
diff --git a/frontend/apps/console/src/features/import-export/components/__tests__/FileContentViewer.test.tsx b/frontend/packages/configure-import-export/src/components/__tests__/FileContentViewer.test.tsx
similarity index 97%
rename from frontend/apps/console/src/features/import-export/components/__tests__/FileContentViewer.test.tsx
rename to frontend/packages/configure-import-export/src/components/__tests__/FileContentViewer.test.tsx
index 30d41aedd5..03ea1e6b63 100644
--- a/frontend/apps/console/src/features/import-export/components/__tests__/FileContentViewer.test.tsx
+++ b/frontend/packages/configure-import-export/src/components/__tests__/FileContentViewer.test.tsx
@@ -5,17 +5,6 @@ import {render, screen, userEvent, waitFor} from '@thunderid/test-utils';
 import {describe, expect, it, vi} from 'vitest';
 import FileContentViewer from '../FileContentViewer';
 
-const mockT = (key: string, params?: Record<string, unknown>) => {
-  if (key === 'fileViewer.download' && params?.fileName !== undefined && typeof params.fileName === 'string') {
-    return `Download ${params.fileName}`;
-  }
-  return key;
-};
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: mockT}),
-}));
-
 vi.mock('@monaco-editor/react', () => ({
   default: ({value, language}: {value: string; language: string}) => (
     <div data-testid="monaco-editor" data-language={language}>
@@ -180,6 +169,10 @@ describe('FileContentViewer', () => {
 
   describe('download functionality', () => {
     it('triggers download with correct filename', async () => {
+      // The real browser running these tests supports the File System Access API; remove it so
+      // this test exercises the traditional-download fallback it is asserting on.
+      delete (window as unknown as {showSaveFilePicker?: unknown}).showSaveFilePicker;
+
       const mockCreateElement = vi.spyOn(document, 'createElement');
       const mockCreateObjectURL = vi.fn(() => 'blob:mock-url');
       const mockRevokeObjectURL = vi.fn();
diff --git a/frontend/apps/console/src/features/import-export/components/__tests__/HowProductRunInHostedIllustration.test.tsx b/frontend/packages/configure-import-export/src/components/__tests__/HowProductRunInHostedIllustration.test.tsx
similarity index 72%
rename from frontend/apps/console/src/features/import-export/components/__tests__/HowProductRunInHostedIllustration.test.tsx
rename to frontend/packages/configure-import-export/src/components/__tests__/HowProductRunInHostedIllustration.test.tsx
index 4a0d3f1907..76b87898b4 100644
--- a/frontend/apps/console/src/features/import-export/components/__tests__/HowProductRunInHostedIllustration.test.tsx
+++ b/frontend/packages/configure-import-export/src/components/__tests__/HowProductRunInHostedIllustration.test.tsx
@@ -6,16 +6,6 @@ import {render, screen} from '@thunderid/test-utils';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import HowProductRunInHostedIllustration from '../HowProductRunInHostedIllustration';
 
-const mockT = vi.fn((key: string, options?: {productName?: string}) => {
-  if (key === 'howSolutionWorksIllustration:runtimeHosted' && options?.productName) {
-    return `Runtime (Hosted) - ${String(options.productName)}`;
-  }
-  if (key === 'howSolutionWorksIllustration:runInProduction' && options?.productName) {
-    return `How ${String(options.productName)} Runs in Production`;
-  }
-  return key;
-});
-
 vi.mock('@thunderid/contexts', async () => {
   const actual = await vi.importActual<typeof import('@thunderid/contexts')>('@thunderid/contexts');
   return {
@@ -24,10 +14,6 @@ vi.mock('@thunderid/contexts', async () => {
   };
 });
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: mockT}),
-}));
-
 const mockUseConfig = vi.mocked(useConfig);
 
 afterEach(() => {
@@ -78,26 +64,24 @@ describe('HowProductRunInHostedIllustration', () => {
   it('displays translated text elements', () => {
     render(<HowProductRunInHostedIllustration />);
 
-    expect(screen.getByText('howSolutionWorksIllustration:run')).toBeInTheDocument();
-    expect(screen.getByText('howSolutionWorksIllustration:projectEnvConfigs')).toBeInTheDocument();
-    expect(screen.getByText('howSolutionWorksIllustration:import')).toBeInTheDocument();
-    expect(screen.getByText('howSolutionWorksIllustration:runtimeComponentsOnly')).toBeInTheDocument();
-    expect(screen.getByText('howSolutionWorksIllustration:adminApp')).toBeInTheDocument();
-    expect(screen.getByText('howSolutionWorksIllustration:loginApp')).toBeInTheDocument();
+    expect(screen.getByText('Run')).toBeInTheDocument();
+    expect(screen.getByText('Project + ENV Configs')).toBeInTheDocument();
+    expect(screen.getByText('Attach')).toBeInTheDocument();
+    expect(screen.getByText('(with required runtime components only)')).toBeInTheDocument();
+    expect(screen.getByText('Admin App')).toBeInTheDocument();
+    expect(screen.getByText('Login App')).toBeInTheDocument();
   });
 
   it('displays product name in title', () => {
     render(<HowProductRunInHostedIllustration />);
 
-    expect(mockT).toHaveBeenCalledWith('howSolutionWorksIllustration:runInProduction', {productName: 'ThunderID'});
-    expect(screen.getByText('How ThunderID Runs in Production')).toBeInTheDocument();
+    expect(screen.getByText('Run ThunderID in Production')).toBeInTheDocument();
   });
 
   it('displays product name in runtime text', () => {
     render(<HowProductRunInHostedIllustration />);
 
-    expect(mockT).toHaveBeenCalledWith('howSolutionWorksIllustration:runtimeHosted', {productName: 'ThunderID'});
-    expect(screen.getByText('Runtime (Hosted) - ThunderID')).toBeInTheDocument();
+    expect(screen.getByText('ThunderID Runtime Hosted')).toBeInTheDocument();
   });
 
   it('handles missing product name gracefully', () => {
diff --git a/frontend/apps/console/src/features/import-export/components/__tests__/ResourceSummaryTable.test.tsx b/frontend/packages/configure-import-export/src/components/__tests__/ResourceSummaryTable.test.tsx
similarity index 88%
rename from frontend/apps/console/src/features/import-export/components/__tests__/ResourceSummaryTable.test.tsx
rename to frontend/packages/configure-import-export/src/components/__tests__/ResourceSummaryTable.test.tsx
index f32b6a7bc7..4f646c493b 100644
--- a/frontend/apps/console/src/features/import-export/components/__tests__/ResourceSummaryTable.test.tsx
+++ b/frontend/packages/configure-import-export/src/components/__tests__/ResourceSummaryTable.test.tsx
@@ -1,7 +1,7 @@
 // Copyright 2026 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import {render, screen, userEvent} from '@thunderid/test-utils';
+import {render, screen, userEvent, waitFor} from '@thunderid/test-utils';
 import {Users} from '@wso2/oxygen-ui-icons-react';
 import {describe, expect, it, vi} from 'vitest';
 import type {ConfigSummaryItem} from '../../models/import-configuration';
@@ -24,10 +24,6 @@ const mockT = (key: string, params?: Record<string, unknown>) => {
   return key;
 };
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: mockT}),
-}));
-
 describe('ResourceSummaryTable', () => {
   const mockItems: ConfigSummaryItem[] = [
     {
@@ -57,14 +53,14 @@ describe('ResourceSummaryTable', () => {
     it('renders empty state when no items', () => {
       render(<ResourceSummaryTable items={[]} />);
 
-      expect(screen.getByText('table.noResources')).toBeInTheDocument();
+      expect(screen.getByText('No resources found')).toBeInTheDocument();
     });
 
     it('renders table headers', () => {
       render(<ResourceSummaryTable items={mockItems} />);
 
-      expect(screen.getByText('table.resourceType')).toBeInTheDocument();
-      expect(screen.getByText('table.count')).toBeInTheDocument();
+      expect(screen.getByText('Resource Type')).toBeInTheDocument();
+      expect(screen.getByText('Count')).toBeInTheDocument();
     });
   });
 
@@ -106,7 +102,10 @@ describe('ResourceSummaryTable', () => {
       expect(screen.getByText('User details content')).toBeInTheDocument();
 
       await userEvent.click(iconButton);
-      expect(screen.queryByText('User details content')).not.toBeInTheDocument();
+      // Collapse unmounts its content only after its (real, in the browser) transition finishes.
+      await waitFor(() => {
+        expect(screen.queryByText('User details content')).not.toBeInTheDocument();
+      });
     });
 
     it('shows no details message when content is not provided', async () => {
@@ -115,7 +114,7 @@ describe('ResourceSummaryTable', () => {
 
       await userEvent.click(row!);
 
-      expect(screen.getByText('table.noDetails')).toBeInTheDocument();
+      expect(screen.getByText('No details available')).toBeInTheDocument();
     });
 
     it('can expand multiple rows independently', async () => {
@@ -153,7 +152,7 @@ describe('ResourceSummaryTable', () => {
     it('renders status column when showStatus is true', () => {
       render(<ResourceSummaryTable items={mockItems} showStatus={true} t={mockT} />);
 
-      expect(screen.getByText('table.status')).toBeInTheDocument();
+      expect(screen.getByText('Status')).toBeInTheDocument();
     });
 
     it('displays ready status chip', () => {
@@ -191,7 +190,7 @@ describe('ResourceSummaryTable', () => {
     it('does not render status column when showStatus is false', () => {
       render(<ResourceSummaryTable items={mockItems} showStatus={false} />);
 
-      expect(screen.queryByText('table.status')).not.toBeInTheDocument();
+      expect(screen.queryByText('Status')).not.toBeInTheDocument();
     });
   });
 
@@ -199,7 +198,7 @@ describe('ResourceSummaryTable', () => {
     it('renders dependencies column when showDependencies is true', () => {
       render(<ResourceSummaryTable items={mockItems} showDependencies={true} t={mockT} />);
 
-      expect(screen.getByText('table.dependencies')).toBeInTheDocument();
+      expect(screen.getByText('Dependencies')).toBeInTheDocument();
     });
 
     it('displays dependency count', () => {
@@ -252,7 +251,7 @@ describe('ResourceSummaryTable', () => {
     it('does not render dependencies column when showDependencies is false', () => {
       render(<ResourceSummaryTable items={mockItems} showDependencies={false} />);
 
-      expect(screen.queryByText('table.dependencies')).not.toBeInTheDocument();
+      expect(screen.queryByText('Dependencies')).not.toBeInTheDocument();
     });
   });
 
@@ -260,21 +259,21 @@ describe('ResourceSummaryTable', () => {
     it('shows "Item" header when showStatus or showDependencies is true', () => {
       render(<ResourceSummaryTable items={mockItems} showStatus={true} />);
 
-      expect(screen.getByText('table.item')).toBeInTheDocument();
-      expect(screen.queryByText('table.resourceType')).not.toBeInTheDocument();
+      expect(screen.getByText('Item')).toBeInTheDocument();
+      expect(screen.queryByText('Resource Type')).not.toBeInTheDocument();
     });
 
     it('shows "Resource Type" header when both flags are false', () => {
       render(<ResourceSummaryTable items={mockItems} showStatus={false} showDependencies={false} />);
 
-      expect(screen.getByText('table.resourceType')).toBeInTheDocument();
-      expect(screen.queryByText('table.item')).not.toBeInTheDocument();
+      expect(screen.getByText('Resource Type')).toBeInTheDocument();
+      expect(screen.queryByText('Item')).not.toBeInTheDocument();
     });
 
     it('does not show count column when showStatus or showDependencies is true', () => {
       render(<ResourceSummaryTable items={mockItems} showStatus={true} />);
 
-      expect(screen.queryByText('table.count')).not.toBeInTheDocument();
+      expect(screen.queryByText('Count')).not.toBeInTheDocument();
     });
   });
 
@@ -300,7 +299,7 @@ describe('ResourceSummaryTable', () => {
     it('falls back to default t function when not provided', () => {
       render(<ResourceSummaryTable items={mockItems} />);
 
-      expect(screen.getByText('table.resourceType')).toBeInTheDocument();
+      expect(screen.getByText('Resource Type')).toBeInTheDocument();
     });
   });
 
diff --git a/frontend/apps/console/src/features/import-export/components/__tests__/TemplateVariableDisplay.test.tsx b/frontend/packages/configure-import-export/src/components/__tests__/TemplateVariableDisplay.test.tsx
similarity index 96%
rename from frontend/apps/console/src/features/import-export/components/__tests__/TemplateVariableDisplay.test.tsx
rename to frontend/packages/configure-import-export/src/components/__tests__/TemplateVariableDisplay.test.tsx
index f704e817b6..7a63c66a6b 100644
--- a/frontend/apps/console/src/features/import-export/components/__tests__/TemplateVariableDisplay.test.tsx
+++ b/frontend/packages/configure-import-export/src/components/__tests__/TemplateVariableDisplay.test.tsx
@@ -2,15 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {render, screen} from '@thunderid/test-utils';
-import {describe, expect, it, vi} from 'vitest';
+import {describe, expect, it} from 'vitest';
 import TemplateVariableDisplay from '../TemplateVariableDisplay';
 
-const mockT = (key: string) => key;
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: mockT}),
-}));
-
 describe('TemplateVariableDisplay', () => {
   describe('template variable display', () => {
     it('displays template variable with success color when value exists', () => {
@@ -31,7 +25,7 @@ describe('TemplateVariableDisplay', () => {
 
       const chip = container.querySelector('[class*="MuiChip-colorWarning"]');
       expect(chip).toBeInTheDocument();
-      expect(screen.getByText('templateVariable.valueMissing')).toBeInTheDocument();
+      expect(screen.getByText('value is missing')).toBeInTheDocument();
     });
 
     it('displays template variable with error color when value is missing', () => {
@@ -39,7 +33,7 @@ describe('TemplateVariableDisplay', () => {
 
       const chip = container.querySelector('[class*="MuiChip-colorError"]');
       expect(chip).toBeInTheDocument();
-      expect(screen.getByText('templateVariable.valueMissing')).toBeInTheDocument();
+      expect(screen.getByText('value is missing')).toBeInTheDocument();
     });
 
     it('displays template variable with warning color when value is only whitespace', () => {
diff --git a/frontend/apps/console/src/features/import-export/constants/file-names.ts b/frontend/packages/configure-import-export/src/constants/file-names.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/constants/file-names.ts
rename to frontend/packages/configure-import-export/src/constants/file-names.ts
diff --git a/frontend/apps/console/src/features/import-export/constants/import-export-query-keys.ts b/frontend/packages/configure-import-export/src/constants/import-export-query-keys.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/constants/import-export-query-keys.ts
rename to frontend/packages/configure-import-export/src/constants/import-export-query-keys.ts
diff --git a/frontend/apps/console/src/features/import-export/constants/resource-types.ts b/frontend/packages/configure-import-export/src/constants/resource-types.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/constants/resource-types.ts
rename to frontend/packages/configure-import-export/src/constants/resource-types.ts
diff --git a/frontend/packages/configure-import-export/src/hooks/useImportExportRoutes.ts b/frontend/packages/configure-import-export/src/hooks/useImportExportRoutes.ts
new file mode 100644
index 0000000000..0efed8e38f
--- /dev/null
+++ b/frontend/packages/configure-import-export/src/hooks/useImportExportRoutes.ts
@@ -0,0 +1,89 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {useRoutes} from '@thunderid/contexts';
+
+/**
+ * Route paths this package needs from the host application.
+ *
+ * `home` and `welcome` are owned by the host (console implements them itself, not through a
+ * package), but this package's pages navigate to a handful of their paths as part of the
+ * first-run "welcome" import flow, so their shapes are declared here too — narrowed to only the
+ * members this package actually calls.
+ *
+ * The host supplies all of these via `@thunderid/contexts`'s `RoutesProvider`. When absent (e.g.
+ * this package rendered standalone in Storybook or a unit test), `useImportExportRoutes` falls
+ * back to `defaultImportExportRoutePaths` below.
+ *
+ * @public
+ */
+export interface ImportExportRoutePaths {
+  home: {
+    list: () => string;
+  };
+  importExport: {
+    list: () => string;
+  };
+  export: {
+    page: () => string;
+  };
+  importConfiguration: {
+    upload: () => string;
+    validate: () => string;
+    summary: () => string;
+  };
+  welcome: {
+    root: () => string;
+    importConfigurationUpload: () => string;
+    importConfigurationValidate: () => string;
+    importConfigurationSummary: () => string;
+  };
+}
+
+/**
+ * Default import/export (and welcome-flow) paths, used when no host-supplied override is present.
+ *
+ * @public
+ */
+export const defaultImportExportRoutePaths: ImportExportRoutePaths = {
+  home: {
+    list: () => '/home',
+  },
+  importExport: {
+    list: () => '/import-export',
+  },
+  export: {
+    page: () => '/export',
+  },
+  importConfiguration: {
+    upload: () => '/import-configuration',
+    validate: () => '/import-configuration/validate',
+    summary: () => '/import-configuration/summary',
+  },
+  welcome: {
+    root: () => '/welcome',
+    importConfigurationUpload: () => '/welcome/import-configuration',
+    importConfigurationValidate: () => '/welcome/import-configuration/validate',
+    importConfigurationSummary: () => '/welcome/import-configuration/summary',
+  },
+};
+
+/**
+ * Resolves the import/export (and welcome-flow) route paths, preferring the host application's
+ * configuration (supplied via `RoutesProvider`) and falling back to this package's own defaults.
+ *
+ * Components should never hardcode these destination paths; they should call this hook and build
+ * the destination from the returned functions instead.
+ *
+ * @public
+ */
+export default function useImportExportRoutes(): ImportExportRoutePaths {
+  const routes = useRoutes<Partial<ImportExportRoutePaths>>();
+  return {
+    home: routes.home ?? defaultImportExportRoutePaths.home,
+    importExport: routes.importExport ?? defaultImportExportRoutePaths.importExport,
+    export: routes.export ?? defaultImportExportRoutePaths.export,
+    importConfiguration: routes.importConfiguration ?? defaultImportExportRoutePaths.importConfiguration,
+    welcome: routes.welcome ?? defaultImportExportRoutePaths.welcome,
+  };
+}
diff --git a/frontend/packages/configure-import-export/src/index.ts b/frontend/packages/configure-import-export/src/index.ts
new file mode 100644
index 0000000000..57baf91fdf
--- /dev/null
+++ b/frontend/packages/configure-import-export/src/index.ts
@@ -0,0 +1,34 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// APIs
+export {default as useExportConfiguration} from './api/useExportConfiguration';
+export {default as useImportConfiguration} from './api/useImportConfiguration';
+
+// Components
+export {default as ConfigureExport} from './components/ConfigureExport';
+export {default as EnvVariablesViewer} from './components/EnvVariablesViewer';
+export {default as FileContentViewer} from './components/FileContentViewer';
+export {default as HowProductRunInHostedIllustration} from './components/HowProductRunInHostedIllustration';
+export {default as ResourceSummaryTable} from './components/ResourceSummaryTable';
+export {default as TemplateVariableDisplay} from './components/TemplateVariableDisplay';
+
+// Constants
+export {default as ImportExportFileNames} from './constants/file-names';
+export {default as ImportExportQueryKeys} from './constants/import-export-query-keys';
+export * from './constants/resource-types';
+
+// Models
+export * from './models/export-configuration';
+export * from './models/import-configuration';
+
+// Pages
+export {default as ExportPage} from './pages/ExportPage';
+export {default as ImportConfigurationSummaryPage} from './pages/ImportConfigurationSummaryPage';
+export {default as ImportConfigurationUploadPage} from './pages/ImportConfigurationUploadPage';
+export {default as ImportConfigurationValidatePage} from './pages/ImportConfigurationValidatePage';
+export {default as ImportExportPage} from './pages/ImportExportPage';
+
+// Routes
+export type {ImportExportRoutePaths} from './hooks/useImportExportRoutes';
+export {defaultImportExportRoutePaths, default as useImportExportRoutes} from './hooks/useImportExportRoutes';
diff --git a/frontend/apps/console/src/features/import-export/models/export-configuration.ts b/frontend/packages/configure-import-export/src/models/export-configuration.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/models/export-configuration.ts
rename to frontend/packages/configure-import-export/src/models/export-configuration.ts
diff --git a/frontend/apps/console/src/features/import-export/models/import-configuration.ts b/frontend/packages/configure-import-export/src/models/import-configuration.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/models/import-configuration.ts
rename to frontend/packages/configure-import-export/src/models/import-configuration.ts
diff --git a/frontend/apps/console/src/features/import-export/pages/ExportPage.tsx b/frontend/packages/configure-import-export/src/pages/ExportPage.tsx
similarity index 95%
rename from frontend/apps/console/src/features/import-export/pages/ExportPage.tsx
rename to frontend/packages/configure-import-export/src/pages/ExportPage.tsx
index fd463e2bd1..05260de166 100644
--- a/frontend/apps/console/src/features/import-export/pages/ExportPage.tsx
+++ b/frontend/packages/configure-import-export/src/pages/ExportPage.tsx
@@ -9,14 +9,15 @@ import type {JSX} from 'react';
 import {useCallback, useEffect, useMemo} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
 import useExportConfiguration from '../api/useExportConfiguration';
 import ConfigureExport from '../components/ConfigureExport';
+import useImportExportRoutes from '../hooks/useImportExportRoutes';
 
 export default function ExportPage(): JSX.Element {
   const {t} = useTranslation('importExport');
   const navigate = useNavigate();
   const logger = useLogger('ExportPage');
+  const routes = useImportExportRoutes();
   const {mutate, data, isPending, error} = useExportConfiguration();
 
   const fetchExport = useCallback((): void => {
@@ -82,7 +83,7 @@ export default function ExportPage(): JSX.Element {
               {
                 key: 'import-export',
                 label: t('landing.title', 'Import / Export'),
-                onClick: () => void navigate(RouteConfig.importExport.list()),
+                onClick: () => void navigate(routes.importExport.list()),
               },
               {key: 'export', label: t('export.page.title')},
             ]}
diff --git a/frontend/apps/console/src/features/import-export/pages/ImportConfigurationSummaryPage.tsx b/frontend/packages/configure-import-export/src/pages/ImportConfigurationSummaryPage.tsx
similarity index 98%
rename from frontend/apps/console/src/features/import-export/pages/ImportConfigurationSummaryPage.tsx
rename to frontend/packages/configure-import-export/src/pages/ImportConfigurationSummaryPage.tsx
index ad76be3cf4..4bf4195b84 100644
--- a/frontend/apps/console/src/features/import-export/pages/ImportConfigurationSummaryPage.tsx
+++ b/frontend/packages/configure-import-export/src/pages/ImportConfigurationSummaryPage.tsx
@@ -43,11 +43,11 @@ import type {ComponentType, JSX} from 'react';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate, useLocation} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
 import useImportConfiguration from '../api/useImportConfiguration';
 import EnvVariablesViewer from '../components/EnvVariablesViewer';
 import ResourceSummaryTable from '../components/ResourceSummaryTable';
 import TemplateVariableDisplay from '../components/TemplateVariableDisplay';
+import useImportExportRoutes from '../hooks/useImportExportRoutes';
 import type {ConfigSummaryItem, ImportItemOutcome, ProductConfig} from '../models/import-configuration';
 import getEnvFileName from '../utils/getEnvFileName';
 
@@ -428,7 +428,8 @@ export default function ImportConfigurationSummaryPage(): JSX.Element {
   const {t} = useTranslation('importExport');
   const navigate = useNavigate();
   const location = useLocation();
-  const isWelcomeFlow = location.pathname.startsWith(RouteConfig.welcome.root());
+  const routes = useImportExportRoutes();
+  const isWelcomeFlow = location.pathname.startsWith(routes.welcome.root());
   const logger = useLogger('ImportConfigurationSummaryPage');
   const {showToast} = useToast();
   const {config} = useConfig();
@@ -702,7 +703,7 @@ export default function ImportConfigurationSummaryPage(): JSX.Element {
   });
 
   const handleClose = (): void => {
-    void navigate(RouteConfig.home.list());
+    void navigate(routes.home.list());
   };
 
   const handleProceed = (): void => {
@@ -729,7 +730,7 @@ export default function ImportConfigurationSummaryPage(): JSX.Element {
         showToast(t('summary.import.completedSuccessfully', {count: response.summary.imported}), 'success');
       }
 
-      await navigate(RouteConfig.home.list());
+      await navigate(routes.home.list());
     })().catch((_error: unknown) => {
       logger.error('Failed to import configuration', {error: _error});
     });
@@ -763,7 +764,7 @@ export default function ImportConfigurationSummaryPage(): JSX.Element {
                     {
                       key: 'welcome',
                       label: t('common:welcome.header'),
-                      onClick: () => void navigate(RouteConfig.welcome.root()),
+                      onClick: () => void navigate(routes.welcome.root()),
                     },
                   ]
                 : []),
@@ -772,9 +773,7 @@ export default function ImportConfigurationSummaryPage(): JSX.Element {
                 label: t('upload.breadcrumb.openProject'),
                 onClick: () =>
                   void navigate(
-                    isWelcomeFlow
-                      ? RouteConfig.welcome.importConfigurationUpload()
-                      : RouteConfig.importConfiguration.upload(),
+                    isWelcomeFlow ? routes.welcome.importConfigurationUpload() : routes.importConfiguration.upload(),
                   ),
               },
               {key: 'summary', label: t('summary.breadcrumb')},
diff --git a/frontend/apps/console/src/features/import-export/pages/ImportConfigurationUploadPage.tsx b/frontend/packages/configure-import-export/src/pages/ImportConfigurationUploadPage.tsx
similarity index 97%
rename from frontend/apps/console/src/features/import-export/pages/ImportConfigurationUploadPage.tsx
rename to frontend/packages/configure-import-export/src/pages/ImportConfigurationUploadPage.tsx
index 86e1422db4..c2b7f6fe0d 100644
--- a/frontend/apps/console/src/features/import-export/pages/ImportConfigurationUploadPage.tsx
+++ b/frontend/packages/configure-import-export/src/pages/ImportConfigurationUploadPage.tsx
@@ -9,8 +9,8 @@ import {useState, useCallback, type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useLocation, useNavigate} from 'react-router';
 import yaml from 'yaml';
-import RouteConfig from '../../../configs/RouteConfig';
 import {ALLOWED_RESOURCE_TYPES, type ResourceType} from '../constants/resource-types';
+import useImportExportRoutes from '../hooks/useImportExportRoutes';
 import getConfigFileName from '../utils/getConfigFileName';
 import getEnvFileName from '../utils/getEnvFileName';
 
@@ -22,7 +22,8 @@ export default function ImportConfigurationUploadPage(): JSX.Element {
   const configFileName = getConfigFileName(config.brand.product_name);
   const envFileName = getEnvFileName(config.brand.product_name);
   const {pathname} = useLocation();
-  const isWelcomeFlow = pathname.startsWith(RouteConfig.welcome.root());
+  const routes = useImportExportRoutes();
+  const isWelcomeFlow = pathname.startsWith(routes.welcome.root());
   const [dragActive, setDragActive] = useState(false);
   const [envDragActive, setEnvDragActive] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
@@ -30,11 +31,11 @@ export default function ImportConfigurationUploadPage(): JSX.Element {
   const [error, setError] = useState<string | null>(null);
 
   const handleClose = (): void => {
-    void navigate(RouteConfig.home.list());
+    void navigate(routes.home.list());
   };
 
   const handleCancel = (): void => {
-    void navigate(RouteConfig.home.list());
+    void navigate(routes.home.list());
   };
 
   const handleDrag = useCallback((e: React.DragEvent) => {
@@ -278,7 +279,7 @@ export default function ImportConfigurationUploadPage(): JSX.Element {
       }
 
       // Navigate to validation page
-      await navigate(RouteConfig.welcome.importConfigurationValidate(), {
+      await navigate(routes.welcome.importConfigurationValidate(), {
         state: {
           method: 'file',
           file: selectedFile,
@@ -328,14 +329,14 @@ export default function ImportConfigurationUploadPage(): JSX.Element {
                     {
                       key: 'welcome',
                       label: t('common:welcome.header'),
-                      onClick: () => void navigate(RouteConfig.welcome.root()),
+                      onClick: () => void navigate(routes.welcome.root()),
                     },
                   ]
                 : [
                     {
                       key: 'import-export',
                       label: t('landing.title', 'Import / Export'),
-                      onClick: () => void navigate(RouteConfig.importExport.list()),
+                      onClick: () => void navigate(routes.importExport.list()),
                     },
                   ]),
               {key: 'import-configuration', label: t('upload.breadcrumb.openProject')},
diff --git a/frontend/apps/console/src/features/import-export/pages/ImportConfigurationValidatePage.tsx b/frontend/packages/configure-import-export/src/pages/ImportConfigurationValidatePage.tsx
similarity index 94%
rename from frontend/apps/console/src/features/import-export/pages/ImportConfigurationValidatePage.tsx
rename to frontend/packages/configure-import-export/src/pages/ImportConfigurationValidatePage.tsx
index 6ee1b3bf0f..e30447a3f6 100644
--- a/frontend/apps/console/src/features/import-export/pages/ImportConfigurationValidatePage.tsx
+++ b/frontend/packages/configure-import-export/src/pages/ImportConfigurationValidatePage.tsx
@@ -8,14 +8,15 @@ import type {JSX} from 'react';
 import {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useLocation, useNavigate} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
+import useImportExportRoutes from '../hooks/useImportExportRoutes';
 import type {ValidationStep, ParseError} from '../models/import-configuration';
 
 export default function ImportConfigurationValidatePage(): JSX.Element {
   const {t} = useTranslation('importExport');
   const navigate = useNavigate();
   const location = useLocation();
-  const isWelcomeFlow = location.pathname.startsWith(RouteConfig.welcome.root());
+  const routes = useImportExportRoutes();
+  const isWelcomeFlow = location.pathname.startsWith(routes.welcome.root());
   const logger = useLogger('ImportConfigurationValidatePage');
 
   const state = location.state as {
@@ -34,11 +35,11 @@ export default function ImportConfigurationValidatePage(): JSX.Element {
   ]);
 
   const handleClose = (): void => {
-    void navigate(RouteConfig.home.list());
+    void navigate(routes.home.list());
   };
 
   const handleCancel = (): void => {
-    void navigate(RouteConfig.home.list());
+    void navigate(routes.home.list());
   };
 
   useEffect(() => {
@@ -89,9 +90,7 @@ export default function ImportConfigurationValidatePage(): JSX.Element {
             setTimeout(() => {
               (async () => {
                 await navigate(
-                  isWelcomeFlow
-                    ? RouteConfig.welcome.importConfigurationSummary()
-                    : RouteConfig.importConfiguration.summary(),
+                  isWelcomeFlow ? routes.welcome.importConfigurationSummary() : routes.importConfiguration.summary(),
                   {state: location.state as Record<string, unknown>},
                 );
               })().catch((_error: unknown) => {
@@ -104,7 +103,16 @@ export default function ImportConfigurationValidatePage(): JSX.Element {
     }, 1500);
 
     return () => clearInterval(interval);
-  }, [navigate, location.state, logger, validationSteps.length, hasParseErrors, isWelcomeFlow]);
+  }, [
+    navigate,
+    location.state,
+    logger,
+    validationSteps.length,
+    hasParseErrors,
+    isWelcomeFlow,
+    routes.importConfiguration,
+    routes.welcome,
+  ]);
 
   const completedSteps = validationSteps.filter((step) => step.status === 'completed').length;
   const progress = (completedSteps / validationSteps.length) * 100;
@@ -137,7 +145,7 @@ export default function ImportConfigurationValidatePage(): JSX.Element {
                     {
                       key: 'welcome',
                       label: t('common:welcome.header'),
-                      onClick: () => void navigate(RouteConfig.welcome.root()),
+                      onClick: () => void navigate(routes.welcome.root()),
                     },
                   ]
                 : []),
@@ -316,7 +324,7 @@ export default function ImportConfigurationValidatePage(): JSX.Element {
                 <Button
                   variant="outlined"
                   color="error"
-                  onClick={() => void navigate(RouteConfig.welcome.importConfigurationUpload())}
+                  onClick={() => void navigate(routes.welcome.importConfigurationUpload())}
                 >
                   {t('validate.actions.uploadDifferentFile')}
                 </Button>
diff --git a/frontend/apps/console/src/features/import-export/pages/ImportExportPage.tsx b/frontend/packages/configure-import-export/src/pages/ImportExportPage.tsx
similarity index 96%
rename from frontend/apps/console/src/features/import-export/pages/ImportExportPage.tsx
rename to frontend/packages/configure-import-export/src/pages/ImportExportPage.tsx
index 79bc9d1951..b45d14bb91 100644
--- a/frontend/apps/console/src/features/import-export/pages/ImportExportPage.tsx
+++ b/frontend/packages/configure-import-export/src/pages/ImportExportPage.tsx
@@ -8,7 +8,7 @@ import {FileOutput, FileInput, X} from '@wso2/oxygen-ui-icons-react';
 import type {JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
+import useImportExportRoutes from '../hooks/useImportExportRoutes';
 
 interface ImportExportOption {
   route: string;
@@ -23,10 +23,11 @@ export default function ImportExportPage(): JSX.Element {
   const {t} = useTranslation('importExport');
   const navigate = useNavigate();
   const logger = useLogger('ImportExportPage');
+  const routes = useImportExportRoutes();
 
   const handleClose = (): void => {
     (async () => {
-      await navigate(RouteConfig.home.list());
+      await navigate(routes.home.list());
     })().catch((error: unknown) => {
       logger.error('Failed to navigate to home page', {error});
     });
@@ -42,7 +43,7 @@ export default function ImportExportPage(): JSX.Element {
 
   const options: ImportExportOption[] = [
     {
-      route: RouteConfig.importConfiguration.upload(),
+      route: routes.importConfiguration.upload(),
       labelKey: 'landing.type.import.label',
       labelDefault: 'Import',
       descriptionKey: 'landing.type.import.description',
@@ -50,7 +51,7 @@ export default function ImportExportPage(): JSX.Element {
       icon: <FileInput size={28} />,
     },
     {
-      route: RouteConfig.export.page(),
+      route: routes.export.page(),
       labelKey: 'landing.type.export.label',
       labelDefault: 'Export',
       descriptionKey: 'landing.type.export.description',
diff --git a/frontend/apps/console/src/features/import-export/pages/__tests__/ExportPage.test.tsx b/frontend/packages/configure-import-export/src/pages/__tests__/ExportPage.test.tsx
similarity index 79%
rename from frontend/apps/console/src/features/import-export/pages/__tests__/ExportPage.test.tsx
rename to frontend/packages/configure-import-export/src/pages/__tests__/ExportPage.test.tsx
index e5da597225..a525117b91 100644
--- a/frontend/apps/console/src/features/import-export/pages/__tests__/ExportPage.test.tsx
+++ b/frontend/packages/configure-import-export/src/pages/__tests__/ExportPage.test.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type {UseMutationResult} from '@tanstack/react-query';
-import {render, screen, userEvent} from '@thunderid/test-utils';
+import {render, screen, userEvent, waitFor} from '@thunderid/test-utils';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import type {ExportRequest, JSONExportResponse} from '../../models/export-configuration';
 
@@ -22,10 +22,6 @@ vi.mock('../../api/useExportConfiguration', () => ({
   default: () => mockMutationState,
 }));
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: (key: string) => key}),
-}));
-
 vi.mock('react-router', async () => {
   const actual = await vi.importActual<typeof import('react-router')>('react-router');
   return {...actual, useNavigate: () => mockNavigate};
@@ -84,7 +80,7 @@ describe('ExportPage', () => {
 
     it('renders loading indicator', () => {
       render(<ExportPage />);
-      expect(screen.getByText('export.page.loading')).toBeInTheDocument();
+      expect(screen.getByText('Loading export configuration...')).toBeInTheDocument();
     });
 
     it('does not render ConfigureExport while loading', () => {
@@ -106,7 +102,7 @@ describe('ExportPage', () => {
 
     it('renders the resolved error message', () => {
       render(<ExportPage />);
-      expect(screen.getByText('export.page.loadError')).toBeInTheDocument();
+      expect(screen.getByText('Failed to load export configuration')).toBeInTheDocument();
     });
 
     it('does not render ConfigureExport on error', () => {
@@ -146,16 +142,37 @@ describe('ExportPage', () => {
   describe('navigation', () => {
     it('renders page title', () => {
       render(<ExportPage />);
-      expect(screen.getByText('export.page.title')).toBeInTheDocument();
+      expect(screen.getByText('Export Configuration')).toBeInTheDocument();
     });
 
     it('calls navigate(-1) when close button is clicked', async () => {
       const user = userEvent.setup();
       render(<ExportPage />);
 
-      await user.click(screen.getByRole('button', {name: 'common:actions.close'}));
+      await user.click(screen.getByRole('button', {name: 'Close'}));
 
       expect(mockNavigate).toHaveBeenCalledWith(-1);
     });
+
+    it('logs an error when navigating back fails', async () => {
+      const user = userEvent.setup();
+      mockNavigate.mockRejectedValueOnce(new Error('navigation failed'));
+      render(<ExportPage />);
+
+      await user.click(screen.getByRole('button', {name: 'Close'}));
+
+      await waitFor(() => {
+        expect(mockLogger.error).toHaveBeenCalledWith('Failed to navigate back', {error: expect.any(Error) as Error});
+      });
+    });
+
+    it('navigates to the import/export list when the breadcrumb is clicked', async () => {
+      const user = userEvent.setup();
+      render(<ExportPage />);
+
+      await user.click(screen.getByText('Import / Export'));
+
+      expect(mockNavigate).toHaveBeenCalledWith('/import-export');
+    });
   });
 });
diff --git a/frontend/apps/console/src/features/import-export/pages/__tests__/ImportConfigurationSummaryPage.test.tsx b/frontend/packages/configure-import-export/src/pages/__tests__/ImportConfigurationSummaryPage.test.tsx
similarity index 65%
rename from frontend/apps/console/src/features/import-export/pages/__tests__/ImportConfigurationSummaryPage.test.tsx
rename to frontend/packages/configure-import-export/src/pages/__tests__/ImportConfigurationSummaryPage.test.tsx
index 2abe3adc50..5132ffe752 100644
--- a/frontend/apps/console/src/features/import-export/pages/__tests__/ImportConfigurationSummaryPage.test.tsx
+++ b/frontend/packages/configure-import-export/src/pages/__tests__/ImportConfigurationSummaryPage.test.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type {UseMutationResult} from '@tanstack/react-query';
-import {render, screen, userEvent, waitFor} from '@thunderid/test-utils';
+import {render, screen, userEvent, waitFor, fireEvent} from '@thunderid/test-utils';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import type {ConfigSummaryItem, ImportResponse, ProductConfig} from '../../models/import-configuration';
 
@@ -33,9 +33,13 @@ const mockLocationState = {
 
 let mockPathname = '/import/summary';
 
-const IMPORT_EXPORT_TRANSLATIONS: Record<string, string> = {
-  'errors.IMP-1002': 'The uploaded YAML content could not be parsed.',
-};
+// "Import Configuration" is used both as the breadcrumb label (upload.breadcrumb.openProject)
+// and as the submit button label (summary.import.action). Disambiguate by element tag: the
+// submit action is a real <button>, the breadcrumb item is a non-button element with role="button".
+const getImportConfigurationButton = (): HTMLElement =>
+  screen.getAllByRole('button', {name: 'Import Configuration'}).find((el) => el.tagName === 'BUTTON')!;
+const getImportConfigurationBreadcrumb = (): HTMLElement =>
+  screen.getAllByRole('button', {name: 'Import Configuration'}).find((el) => el.tagName !== 'BUTTON')!;
 
 vi.mock('react-router', async () => {
   const actual = await vi.importActual<typeof import('react-router')>('react-router');
@@ -53,33 +57,6 @@ vi.mock('../../api/useImportConfiguration', () => ({
   default: () => mockMutationState,
 }));
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, paramsOrDefaultValue?: string | Record<string, unknown>) => {
-      if (IMPORT_EXPORT_TRANSLATIONS[key] !== undefined) {
-        return IMPORT_EXPORT_TRANSLATIONS[key];
-      }
-      const params = typeof paramsOrDefaultValue === 'object' ? paramsOrDefaultValue : undefined;
-      if (key === 'summary.resourceCount' && params?.count !== undefined) {
-        const count = typeof params.count === 'number' ? params.count : Number(params.count);
-        return `${count} resources`;
-      }
-      if (key === 'summary.envVariables' && params?.resolved !== undefined && params?.total !== undefined) {
-        const resolved = typeof params.resolved === 'number' ? params.resolved : Number(params.resolved);
-        const total = typeof params.total === 'number' ? params.total : Number(params.total);
-        return `${resolved} of ${total} resolved`;
-      }
-      if (typeof paramsOrDefaultValue === 'string') {
-        return paramsOrDefaultValue;
-      }
-      if (typeof params?.defaultValue === 'string') {
-        return params.defaultValue;
-      }
-      return key;
-    },
-  }),
-}));
-
 vi.mock('@thunderid/contexts', async () => {
   const actual = await vi.importActual<typeof import('@thunderid/contexts')>('@thunderid/contexts');
   return {
@@ -150,13 +127,13 @@ describe('ImportConfigurationSummaryPage', () => {
     it('renders page title', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.title')).toBeInTheDocument();
+      expect(screen.getByText('Configuration Summary')).toBeInTheDocument();
     });
 
     it('renders resource summary section', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.projectDetails')).toBeInTheDocument();
+      expect(screen.getByText('Project Details')).toBeInTheDocument();
     });
 
     it('renders environment variables section', () => {
@@ -168,15 +145,15 @@ describe('ImportConfigurationSummaryPage', () => {
     it('renders import test section', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.importTest.status')).toBeInTheDocument();
+      expect(screen.getByText('Import Test Status')).toBeInTheDocument();
     });
 
     it('displays resource counts', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText(/application.*1/i)).toBeInTheDocument();
-      expect(screen.getByText(/user.*1/i)).toBeInTheDocument();
-      expect(screen.getByText(/flow.*1/i)).toBeInTheDocument();
+      expect(screen.getByText('Applications: 1')).toBeInTheDocument();
+      expect(screen.getByText('Users: 1')).toBeInTheDocument();
+      expect(screen.getByText('Flows: 1')).toBeInTheDocument();
     });
 
     it('displays a server configurations section', () => {
@@ -185,7 +162,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText(/serverConfigs.*1/i)).toBeInTheDocument();
+      expect(screen.getByText(/Server Configurations.*1/i)).toBeInTheDocument();
 
       mockLocationState.configData = original;
     });
@@ -195,13 +172,13 @@ describe('ImportConfigurationSummaryPage', () => {
     it('renders breadcrumb with steps', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.breadcrumb')).toBeInTheDocument();
+      expect(screen.getByText('Summary')).toBeInTheDocument();
     });
 
     it('navigates to upload page when clicking breadcrumb', async () => {
       render(<ImportConfigurationSummaryPage />);
 
-      const uploadLink = screen.getByText('upload.breadcrumb.openProject');
+      const uploadLink = getImportConfigurationBreadcrumb();
       await userEvent.click(uploadLink);
 
       expect(mockNavigate).toHaveBeenCalledWith('/import-configuration');
@@ -211,7 +188,7 @@ describe('ImportConfigurationSummaryPage', () => {
       mockPathname = '/welcome/import-configuration/summary';
       render(<ImportConfigurationSummaryPage />);
 
-      const welcomeLink = screen.getByText('common:welcome.header');
+      const welcomeLink = screen.getByText('Welcome');
       await userEvent.click(welcomeLink);
 
       expect(mockNavigate).toHaveBeenCalledWith('/welcome');
@@ -244,7 +221,7 @@ describe('ImportConfigurationSummaryPage', () => {
     it('allows uploading new env file', async () => {
       render(<ImportConfigurationSummaryPage />);
 
-      const uploadButton = screen.getByText('summary.actions.reuploadEnv');
+      const uploadButton = screen.getByText('Re-upload .env file');
       await userEvent.click(uploadButton);
 
       // Input should be triggered (we can't actually test file upload in JSDOM)
@@ -256,13 +233,13 @@ describe('ImportConfigurationSummaryPage', () => {
     it('shows run dry run button', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.importTest.test')).toBeInTheDocument();
+      expect(screen.getByText('Test')).toBeInTheDocument();
     });
 
     it('executes dry run when button clicked', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      const runButton = screen.getByText('summary.importTest.test');
+      const runButton = screen.getByText('Test');
 
       // Button exists but may not trigger mutation if env variables are missing
       expect(runButton).toBeInTheDocument();
@@ -273,13 +250,13 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.importTest.runningShort')).toBeInTheDocument();
+      expect(screen.getByText('Running...')).toBeInTheDocument();
     });
 
     it('disables import button when dry run has not passed', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      const importButton = screen.getByText('summary.import.action');
+      const importButton = getImportConfigurationButton();
       expect(importButton).toBeDisabled();
     });
 
@@ -328,7 +305,7 @@ describe('ImportConfigurationSummaryPage', () => {
     it('shows import button', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.import.action')).toBeInTheDocument();
+      expect(getImportConfigurationButton()).toBeInTheDocument();
     });
 
     it('executes import when button clicked after dry run passes', async () => {
@@ -345,7 +322,7 @@ describe('ImportConfigurationSummaryPage', () => {
       const {rerender} = render(<ImportConfigurationSummaryPage />);
 
       // First run dry run
-      const runButton = screen.getByText('summary.importTest.test');
+      const runButton = screen.getByText('Test');
       await userEvent.click(runButton);
 
       // Mock successful dry run
@@ -361,7 +338,7 @@ describe('ImportConfigurationSummaryPage', () => {
       rerender(<ImportConfigurationSummaryPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('summary.import.action')).toBeInTheDocument();
+        expect(getImportConfigurationButton()).toBeInTheDocument();
       });
     });
 
@@ -404,10 +381,10 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      await userEvent.click(screen.getByText('summary.importTest.test'));
+      await userEvent.click(screen.getByText('Test'));
 
       const importButton = await waitFor(() => {
-        const button = screen.getByText('summary.import.action');
+        const button = getImportConfigurationButton();
         expect(button).not.toBeDisabled();
         return button;
       });
@@ -433,7 +410,7 @@ describe('ImportConfigurationSummaryPage', () => {
     it('disables dry run when env variables are missing', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      const runButton = screen.getByText('summary.importTest.test');
+      const runButton = screen.getByText('Test');
       // Button may be disabled if missing required variables
       expect(runButton).toBeInTheDocument();
     });
@@ -450,13 +427,13 @@ describe('ImportConfigurationSummaryPage', () => {
     it('shows cancel button', () => {
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByLabelText('common:actions.close')).toBeInTheDocument();
+      expect(screen.getByLabelText('Close')).toBeInTheDocument();
     });
 
     it('navigates back on cancel', async () => {
       render(<ImportConfigurationSummaryPage />);
 
-      const cancelButton = screen.getByLabelText('common:actions.close');
+      const cancelButton = screen.getByLabelText('Close');
       await userEvent.click(cancelButton);
 
       expect(mockNavigate).toHaveBeenCalledWith('/home');
@@ -469,7 +446,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.title')).toBeInTheDocument();
+      expect(screen.getByText('Configuration Summary')).toBeInTheDocument();
     });
 
     it('handles missing env data', () => {
@@ -478,7 +455,7 @@ describe('ImportConfigurationSummaryPage', () => {
       render(<ImportConfigurationSummaryPage />);
 
       // Page still renders without env data
-      expect(screen.getByText('summary.title')).toBeInTheDocument();
+      expect(screen.getByText('Configuration Summary')).toBeInTheDocument();
     });
 
     it('handles empty resource arrays', () => {
@@ -490,7 +467,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.title')).toBeInTheDocument();
+      expect(screen.getByText('Configuration Summary')).toBeInTheDocument();
     });
 
     it('handles undefined resource arrays', () => {
@@ -498,7 +475,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.title')).toBeInTheDocument();
+      expect(screen.getByText('Configuration Summary')).toBeInTheDocument();
     });
   });
 
@@ -507,7 +484,7 @@ describe('ImportConfigurationSummaryPage', () => {
       render(<ImportConfigurationSummaryPage />);
 
       // Test validates that the page renders successfully
-      expect(screen.getByText('summary.title')).toBeInTheDocument();
+      expect(screen.getByText('Configuration Summary')).toBeInTheDocument();
     });
 
     it('logs warning for invalid file types', () => {
@@ -521,7 +498,7 @@ describe('ImportConfigurationSummaryPage', () => {
       render(<ImportConfigurationSummaryPage />);
 
       // Page renders successfully with env data
-      expect(screen.getByText('summary.title')).toBeInTheDocument();
+      expect(screen.getByText('Configuration Summary')).toBeInTheDocument();
     });
   });
 
@@ -544,7 +521,7 @@ describe('ImportConfigurationSummaryPage', () => {
       render(<ImportConfigurationSummaryPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('summary.importTest.passed')).toBeInTheDocument();
+        expect(screen.getByText('Import test passed. 2 of 2 resources validated.')).toBeInTheDocument();
       });
     });
 
@@ -560,7 +537,7 @@ describe('ImportConfigurationSummaryPage', () => {
       render(<ImportConfigurationSummaryPage />);
 
       await waitFor(() => {
-        expect(screen.getByRole('button', {name: /summary\.importTest\.retry/})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: /Retry Import Test/})).toBeInTheDocument();
       });
     });
 
@@ -585,7 +562,7 @@ describe('ImportConfigurationSummaryPage', () => {
       render(<ImportConfigurationSummaryPage />);
 
       await waitFor(() => {
-        expect(screen.getByText(/summary\.importTest\.failures/)).toBeInTheDocument();
+        expect(screen.getByText('Import Test failures')).toBeInTheDocument();
         expect(screen.getByText(/MyApp/)).toBeInTheDocument();
         expect(screen.getByText(/The uploaded YAML content could not be parsed\./)).toBeInTheDocument();
         expect(screen.queryByText(/raw server text/)).not.toBeInTheDocument();
@@ -623,7 +600,7 @@ describe('ImportConfigurationSummaryPage', () => {
       render(<ImportConfigurationSummaryPage />);
 
       await waitFor(() => {
-        expect(screen.getByRole('button', {name: /summary\.importTest\.retry/})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: /Retry Import Test/})).toBeInTheDocument();
       });
     });
   });
@@ -663,7 +640,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText(/configureExport\.labels\.agents.*2/i)).toBeInTheDocument();
+      expect(screen.getByText(/Agents.*2/i)).toBeInTheDocument();
     });
 
     it('does not display agents section when no agents present', () => {
@@ -673,7 +650,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.queryByText(/configureExport\.labels\.agents/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/Agents/i)).not.toBeInTheDocument();
     });
 
     it('displays connections when connection data is present', () => {
@@ -686,7 +663,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText(/configureExport\.labels\.connections.*2/i)).toBeInTheDocument();
+      expect(screen.getByText(/Connections.*2/i)).toBeInTheDocument();
     });
 
     it('displays resource servers when resource_server data is present', () => {
@@ -696,7 +673,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText(/configureExport\.labels\.resourceServers.*2/i)).toBeInTheDocument();
+      expect(screen.getByText(/Resource Servers.*2/i)).toBeInTheDocument();
     });
 
     it('displays roles when role data is present', () => {
@@ -706,7 +683,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText(/configureExport\.labels\.roles.*1/i)).toBeInTheDocument();
+      expect(screen.getByText(/Roles.*1/i)).toBeInTheDocument();
     });
 
     it('displays groups when group data is present', () => {
@@ -720,7 +697,7 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText(/configureExport\.labels\.groups.*3/i)).toBeInTheDocument();
+      expect(screen.getByText(/Groups.*3/i)).toBeInTheDocument();
     });
 
     it('does not display resource server, role, or group sections when absent', () => {
@@ -730,9 +707,9 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.queryByText(/configureExport\.labels\.resourceServers/i)).not.toBeInTheDocument();
-      expect(screen.queryByText(/configureExport\.labels\.roles/i)).not.toBeInTheDocument();
-      expect(screen.queryByText(/configureExport\.labels\.groups/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/Resource Servers/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/Roles/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/Groups/i)).not.toBeInTheDocument();
     });
   });
 
@@ -783,7 +760,7 @@ describe('ImportConfigurationSummaryPage', () => {
       expect(screen.getByText('OIDC')).toBeInTheDocument();
       expect(screen.getByText('SMTP')).toBeInTheDocument();
       expect(screen.getByText('customer')).toBeInTheDocument();
-      expect(screen.getAllByText('configureExport.labels.selfRegistration')).toHaveLength(2);
+      expect(screen.getAllByText('Self Registration')).toHaveLength(2);
       expect(screen.getByText('Enterprise Agent')).toBeInTheDocument();
 
       // Handle detail lines shown when distinct from the name.
@@ -820,11 +797,11 @@ describe('ImportConfigurationSummaryPage', () => {
       expect(screen.getByText('App 5')).toBeInTheDocument();
       expect(screen.queryByText('App 7')).not.toBeInTheDocument();
 
-      await user.click(screen.getByText('configureExport.actions.more'));
+      await user.click(screen.getByText('+ 2 more'));
 
       // After expanding, all items are shown and a collapse control appears.
       expect(screen.getByText('App 7')).toBeInTheDocument();
-      const collapse = screen.getByText('configureExport.actions.showLess');
+      const collapse = screen.getByText('Show less');
 
       await user.click(collapse);
 
@@ -844,13 +821,236 @@ describe('ImportConfigurationSummaryPage', () => {
 
       render(<ImportConfigurationSummaryPage />);
 
-      expect(screen.getByText('summary.fallback.flow')).toBeInTheDocument();
-      expect(screen.getByText('summary.fallback.theme')).toBeInTheDocument();
-      expect(screen.getByText('summary.fallback.schema')).toBeInTheDocument();
-      expect(screen.getByText('summary.fallback.agentType')).toBeInTheDocument();
-      expect(screen.getByText('configureExport.fallback.unnamedTranslation')).toBeInTheDocument();
-      expect(screen.getByText('summary.fallback.user')).toBeInTheDocument();
-      expect(screen.getByText('configureExport.fallback.unnamedGroup')).toBeInTheDocument();
+      expect(screen.getByText('Flow 1')).toBeInTheDocument();
+      expect(screen.getByText('Theme 1')).toBeInTheDocument();
+      expect(screen.getByText('Schema 1')).toBeInTheDocument();
+      expect(screen.getByText('Agent Type 1')).toBeInTheDocument();
+      expect(screen.getByText('Unnamed Translation')).toBeInTheDocument();
+      expect(screen.getByText('User 1')).toBeInTheDocument();
+      expect(screen.getByText('Unnamed Group')).toBeInTheDocument();
+    });
+
+    it('renders credential configurations and presentation definitions with chips and detail lines', () => {
+      mockLocationState.configData = {
+        credential_configuration: [{handle: 'cc-1', display: {name: 'My Credential'}, vct: 'VCT-1'}],
+        presentation_definition: [{handle: 'pd-1', displayName: 'My Presentation', vct: 'VCT-2'}],
+      } as ProductConfig;
+
+      render(<ImportConfigurationSummaryPage />);
+
+      expect(screen.getByText('Credential Configurations: 1')).toBeInTheDocument();
+      expect(screen.getByText('Presentation Definitions: 1')).toBeInTheDocument();
+      expect(screen.getByText('My Credential')).toBeInTheDocument();
+      expect(screen.getByText('My Presentation')).toBeInTheDocument();
+      expect(screen.getByText('VCT-1')).toBeInTheDocument();
+      expect(screen.getByText('VCT-2')).toBeInTheDocument();
+      expect(screen.getByText('cc-1')).toBeInTheDocument();
+      expect(screen.getByText('pd-1')).toBeInTheDocument();
+    });
+
+    it('falls back to unnamed labels for credential configurations and presentation definitions', () => {
+      mockLocationState.configData = {
+        credential_configuration: [{}],
+        presentation_definition: [{}],
+      } as ProductConfig;
+
+      render(<ImportConfigurationSummaryPage />);
+
+      expect(screen.getByText('Unnamed Credential Configuration')).toBeInTheDocument();
+      expect(screen.getByText('Unnamed Presentation Definition')).toBeInTheDocument();
+    });
+  });
+
+  describe('array-valued environment variables', () => {
+    it('parses range-templated env variables as arrays, including blank and delimited formats', async () => {
+      const originalConfigContent = mockLocationState.configContent;
+      const originalEnvData = mockLocationState.envData;
+      mockLocationState.configContent =
+        '{{- range .EMPTY_LIST}}\n{{- range .BRACKET_LIST}}\n{{- range .PLAIN_LIST}}\n{{- range .EMPTY_BRACKET_LIST}}\n';
+      mockLocationState.envData = "EMPTY_LIST=\nBRACKET_LIST=['a', 'b']\nPLAIN_LIST=x, y, z\nEMPTY_BRACKET_LIST=[]\n";
+      mockMutateAsync.mockResolvedValue({
+        results: [],
+        summary: {imported: 0, totalDocuments: 0, failed: 0, importedAt: new Date(0).toISOString()},
+      });
+
+      render(<ImportConfigurationSummaryPage />);
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variables: {
+              EMPTY_LIST: [],
+              BRACKET_LIST: ['a', 'b'],
+              PLAIN_LIST: ['x', 'y', 'z'],
+              EMPTY_BRACKET_LIST: [],
+            },
+          }),
+        );
+      });
+
+      mockLocationState.configContent = originalConfigContent;
+      mockLocationState.envData = originalEnvData;
+    });
+  });
+
+  describe('missing required environment variables from config data', () => {
+    const originalConfigContent = mockLocationState.configContent;
+    const originalConfigData = mockLocationState.configData;
+    const originalEnvData = mockLocationState.envData;
+
+    beforeEach(() => {
+      mockLocationState.configData = {
+        application: [{name: 'App', description: '{{ .APP_DESC }}'}],
+      } as ProductConfig;
+      mockLocationState.envData = '';
+    });
+
+    afterEach(() => {
+      mockLocationState.configContent = originalConfigContent;
+      mockLocationState.configData = originalConfigData;
+      mockLocationState.envData = originalEnvData;
+    });
+
+    it('lists the missing template variable and disables the dry run message', () => {
+      render(<ImportConfigurationSummaryPage />);
+
+      expect(screen.getByText('1 environment value(s) are missing. Add them before importing.')).toBeInTheDocument();
+      expect(screen.getByTestId('template-variable')).toHaveTextContent('{{.APP_DESC}}');
+      expect(screen.getByText('Fix missing environment values, then run test.')).toBeInTheDocument();
+    });
+  });
+
+  describe('dry run status message when configuration content is unavailable', () => {
+    it('shows the config-unavailable message', () => {
+      const originalConfigContent = mockLocationState.configContent;
+      mockLocationState.configContent = null as unknown as string;
+
+      render(<ImportConfigurationSummaryPage />);
+
+      expect(
+        screen.getByText('Configuration content is unavailable. Re-upload the configuration file.'),
+      ).toBeInTheDocument();
+
+      mockLocationState.configContent = originalConfigContent;
+    });
+  });
+
+  describe('manually triggering the dry run test', () => {
+    it('calls the dry run mutation when the Test button is clicked', () => {
+      const originalConfigContent = mockLocationState.configContent;
+      const originalEnvData = mockLocationState.envData;
+      mockLocationState.configContent = 'application:\n  - name: static-app\n';
+      mockLocationState.envData = '';
+
+      render(<ImportConfigurationSummaryPage />);
+
+      fireEvent.click(screen.getByText('Test'));
+
+      expect(mockMutateAsync).toHaveBeenCalled();
+
+      mockLocationState.configContent = originalConfigContent;
+      mockLocationState.envData = originalEnvData;
+    });
+  });
+
+  describe('re-uploading the environment file from the summary page', () => {
+    it('replaces the env data when a valid .env file is re-uploaded', async () => {
+      render(<ImportConfigurationSummaryPage />);
+
+      const envInput = document.querySelector('input[type="file"][accept=".env"]')!;
+      expect(envInput).toBeInTheDocument();
+
+      const file = new File(['NEW_KEY=new-value'], '.env', {type: 'text/plain'});
+      await userEvent.upload(envInput, file);
+
+      await waitFor(() => {
+        expect(screen.getByTestId<HTMLTextAreaElement>('env-editor').value).toBe('NEW_KEY=new-value');
+      });
+    });
+
+    it('logs a warning and skips non-.env files re-uploaded', async () => {
+      render(<ImportConfigurationSummaryPage />);
+
+      const envInput = document.querySelector('input[type="file"][accept=".env"]')!;
+      const file = new File(['not an env file'], 'notes.txt', {type: 'text/plain'});
+      fireEvent.change(envInput, {target: {files: [file]}});
+
+      await waitFor(() => {
+        expect(mockLogger.warn).toHaveBeenCalledWith('Invalid file type', {fileName: 'notes.txt'});
+      });
+    });
+
+    it('does nothing when the change event fires with no selected file', () => {
+      render(<ImportConfigurationSummaryPage />);
+
+      const envInput = document.querySelector('input[type="file"][accept=".env"]')!;
+      fireEvent.change(envInput, {target: {files: []}});
+
+      expect(mockLogger.warn).not.toHaveBeenCalled();
+      expect(screen.getByTestId<HTMLTextAreaElement>('env-editor').value).toBe(mockLocationState.envData);
+    });
+  });
+
+  describe('import completion outcomes', () => {
+    const noTemplateState = {
+      configContent: 'application:\n  - name: static-app\n',
+      envData: '',
+    };
+
+    it('shows a warning toast when the import completes with failures', async () => {
+      mockLocationState.configContent = noTemplateState.configContent;
+      mockLocationState.envData = noTemplateState.envData;
+      mockMutateAsync
+        .mockResolvedValueOnce({
+          results: [],
+          summary: {imported: 1, totalDocuments: 1, failed: 0, importedAt: new Date(0).toISOString()},
+        })
+        .mockResolvedValueOnce({
+          summary: {imported: 0, totalDocuments: 1, failed: 1, importedAt: new Date(0).toISOString()},
+        });
+
+      render(<ImportConfigurationSummaryPage />);
+
+      await userEvent.click(screen.getByText('Test'));
+
+      const importButton = await waitFor(() => {
+        const button = getImportConfigurationButton();
+        expect(button).not.toBeDisabled();
+        return button;
+      });
+      await userEvent.click(importButton);
+
+      await waitFor(() => {
+        expect(mockShowToast).toHaveBeenCalledWith('Import completed with 1 failed resource.', 'warning');
+      });
+    });
+
+    it('logs an error when the import mutation rejects', async () => {
+      mockLocationState.configContent = noTemplateState.configContent;
+      mockLocationState.envData = noTemplateState.envData;
+      mockMutateAsync
+        .mockResolvedValueOnce({
+          results: [],
+          summary: {imported: 1, totalDocuments: 1, failed: 0, importedAt: new Date(0).toISOString()},
+        })
+        .mockRejectedValueOnce(new Error('import network error'));
+
+      render(<ImportConfigurationSummaryPage />);
+
+      await userEvent.click(screen.getByText('Test'));
+
+      const importButton = await waitFor(() => {
+        const button = getImportConfigurationButton();
+        expect(button).not.toBeDisabled();
+        return button;
+      });
+      await userEvent.click(importButton);
+
+      await waitFor(() => {
+        expect(mockLogger.error).toHaveBeenCalledWith('Failed to import configuration', {
+          error: expect.any(Error) as Error,
+        });
+      });
     });
   });
 });
diff --git a/frontend/apps/console/src/features/import-export/pages/__tests__/ImportConfigurationUploadPage.test.tsx b/frontend/packages/configure-import-export/src/pages/__tests__/ImportConfigurationUploadPage.test.tsx
similarity index 57%
rename from frontend/apps/console/src/features/import-export/pages/__tests__/ImportConfigurationUploadPage.test.tsx
rename to frontend/packages/configure-import-export/src/pages/__tests__/ImportConfigurationUploadPage.test.tsx
index 4c96a8fb8c..88393b3c00 100644
--- a/frontend/apps/console/src/features/import-export/pages/__tests__/ImportConfigurationUploadPage.test.tsx
+++ b/frontend/packages/configure-import-export/src/pages/__tests__/ImportConfigurationUploadPage.test.tsx
@@ -7,10 +7,6 @@ import {afterEach, describe, expect, it, vi} from 'vitest';
 const mockNavigate = vi.fn();
 let mockPathname = '/import-configuration';
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: (key: string) => key}),
-}));
-
 vi.mock('react-router', async () => {
   const actual = await vi.importActual<typeof import('react-router')>('react-router');
   return {...actual, useNavigate: () => mockNavigate, useLocation: () => ({pathname: mockPathname})};
@@ -59,35 +55,37 @@ describe('ImportConfigurationUploadPage', () => {
 
   it('renders upload title', () => {
     render(<ImportConfigurationUploadPage />);
-    expect(screen.getByText('upload.title')).toBeInTheDocument();
+    // "Import Configuration" is used both as the page title and the (non-clickable) trailing
+    // breadcrumb crumb; disambiguate via heading level (h2 title vs h5 breadcrumb item).
+    expect(screen.getByRole('heading', {level: 2, name: 'Import Configuration'})).toBeInTheDocument();
   });
 
   it('renders the file drop area', () => {
     render(<ImportConfigurationUploadPage />);
-    expect(screen.getByText('upload.dropConfig')).toBeInTheDocument();
+    expect(screen.getByText('Drop your configuration file here')).toBeInTheDocument();
   });
 
   it('renders the env file drop area', () => {
     render(<ImportConfigurationUploadPage />);
-    expect(screen.getByText('upload.env.title')).toBeInTheDocument();
+    expect(screen.getByText('Environment Variables')).toBeInTheDocument();
   });
 
   it('renders cancel and continue buttons', () => {
     render(<ImportConfigurationUploadPage />);
-    expect(screen.getByRole('button', {name: 'common:actions.cancel'})).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'common:actions.continue'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Cancel'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Continue'})).toBeInTheDocument();
   });
 
   it('continue button is disabled when no files selected', () => {
     render(<ImportConfigurationUploadPage />);
-    expect(screen.getByRole('button', {name: 'common:actions.continue'})).toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Continue'})).toBeDisabled();
   });
 
   it('navigates to /home on cancel', async () => {
     const user = userEvent.setup();
     render(<ImportConfigurationUploadPage />);
 
-    await user.click(screen.getByRole('button', {name: 'common:actions.cancel'}));
+    await user.click(screen.getByRole('button', {name: 'Cancel'}));
 
     expect(mockNavigate).toHaveBeenCalledWith('/home');
   });
@@ -96,7 +94,7 @@ describe('ImportConfigurationUploadPage', () => {
     const user = userEvent.setup();
     render(<ImportConfigurationUploadPage />);
 
-    await user.click(screen.getByRole('button', {name: 'common:actions.close'}));
+    await user.click(screen.getByRole('button', {name: 'Close'}));
 
     expect(mockNavigate).toHaveBeenCalledWith('/home');
   });
@@ -105,7 +103,7 @@ describe('ImportConfigurationUploadPage', () => {
     const user = userEvent.setup();
     render(<ImportConfigurationUploadPage />);
 
-    await user.click(screen.getByText('landing.title'));
+    await user.click(screen.getByText('Import / Export'));
 
     expect(mockNavigate).toHaveBeenCalledWith('/import-export');
   });
@@ -115,7 +113,7 @@ describe('ImportConfigurationUploadPage', () => {
     const user = userEvent.setup();
     render(<ImportConfigurationUploadPage />);
 
-    await user.click(screen.getByText('common:welcome.header'));
+    await user.click(screen.getByText('Welcome'));
 
     expect(mockNavigate).toHaveBeenCalledWith('/welcome');
   });
@@ -128,7 +126,7 @@ describe('ImportConfigurationUploadPage', () => {
     fireEvent.change(input, {target: {files: [file]}});
 
     expect(screen.getByRole('alert')).toBeInTheDocument();
-    expect(screen.getByText('upload.errors.uploadYaml')).toBeInTheDocument();
+    expect(screen.getByText('Please upload a YAML file (thunderid-config.yml)')).toBeInTheDocument();
   });
 
   it('shows file name after valid yaml file is selected', async () => {
@@ -150,7 +148,7 @@ describe('ImportConfigurationUploadPage', () => {
     fireEvent.change(input, {target: {files: [file]}});
 
     expect(screen.getByRole('alert')).toBeInTheDocument();
-    expect(screen.getByText('upload.errors.uploadEnv')).toBeInTheDocument();
+    expect(screen.getByText('Please upload an .env file')).toBeInTheDocument();
   });
 
   it('shows env file name after valid .env file is selected', async () => {
@@ -174,7 +172,7 @@ describe('ImportConfigurationUploadPage', () => {
     const envFile = new File(['KEY=VALUE'], '.env', {type: 'text/plain'});
     await user.upload(document.getElementById('env-file-upload') as HTMLInputElement, envFile);
 
-    expect(screen.getByRole('button', {name: 'common:actions.continue'})).not.toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Continue'})).not.toBeDisabled();
   });
 
   it('continue button is enabled with only a YAML file selected (env file is optional)', async () => {
@@ -184,7 +182,7 @@ describe('ImportConfigurationUploadPage', () => {
     const yamlFile = new File(['key: value'], 'config.yaml', {type: 'text/yaml'});
     await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
 
-    expect(screen.getByRole('button', {name: 'common:actions.continue'})).not.toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Continue'})).not.toBeDisabled();
   });
 
   it('navigates to validate page with envFile and envData absent when only YAML is provided', async () => {
@@ -196,7 +194,7 @@ describe('ImportConfigurationUploadPage', () => {
     Object.defineProperty(yamlFile, 'text', {value: () => Promise.resolve(yamlContent)});
 
     await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
-    await user.click(screen.getByRole('button', {name: 'common:actions.continue'}));
+    await user.click(screen.getByRole('button', {name: 'Continue'}));
 
     await waitFor(
       () => {
@@ -230,7 +228,7 @@ describe('ImportConfigurationUploadPage', () => {
 
     await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
     await user.upload(document.getElementById('env-file-upload') as HTMLInputElement, envFile);
-    await user.click(screen.getByRole('button', {name: 'common:actions.continue'}));
+    await user.click(screen.getByRole('button', {name: 'Continue'}));
 
     await waitFor(
       () => {
@@ -253,7 +251,7 @@ describe('ImportConfigurationUploadPage', () => {
     Object.defineProperty(yamlFile, 'text', {value: () => Promise.resolve(yamlContent)});
 
     await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
-    await user.click(screen.getByRole('button', {name: 'common:actions.continue'}));
+    await user.click(screen.getByRole('button', {name: 'Continue'}));
 
     await waitFor(
       () => {
@@ -291,7 +289,7 @@ describe('ImportConfigurationUploadPage', () => {
     Object.defineProperty(yamlFile, 'text', {value: () => Promise.resolve(yamlContent)});
 
     await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
-    await user.click(screen.getByRole('button', {name: 'common:actions.continue'}));
+    await user.click(screen.getByRole('button', {name: 'Continue'}));
 
     await waitFor(
       () => {
@@ -323,7 +321,7 @@ describe('ImportConfigurationUploadPage', () => {
     Object.defineProperty(yamlFile, 'text', {value: () => Promise.reject(new Error('read error'))});
 
     await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
-    await user.click(screen.getByRole('button', {name: 'common:actions.continue'}));
+    await user.click(screen.getByRole('button', {name: 'Continue'}));
 
     await waitFor(() => {
       expect(screen.getByRole('alert')).toBeInTheDocument();
@@ -344,58 +342,233 @@ describe('ImportConfigurationUploadPage', () => {
   it('handles drag and drop events on config file area', () => {
     render(<ImportConfigurationUploadPage />);
 
-    const dropZone = screen.getByText('upload.dropConfig').closest('div')?.parentElement;
+    const dropZone = screen.getByText('Drop your configuration file here').closest('div')?.parentElement;
     expect(dropZone).toBeInTheDocument();
 
+    const dataTransfer = new DataTransfer();
+
     // Simulate drag enter
     fireEvent.dragEnter(dropZone!, {
-      dataTransfer: {files: []},
+      dataTransfer,
     });
 
     // Simulate drag over
     fireEvent.dragOver(dropZone!, {
-      dataTransfer: {files: []},
+      dataTransfer,
     });
 
     // Simulate drag leave
     fireEvent.dragLeave(dropZone!, {
-      dataTransfer: {files: []},
+      dataTransfer,
     });
   });
 
   it('handles drag and drop events on env file area', () => {
     render(<ImportConfigurationUploadPage />);
 
-    const envLabel = screen.getByText('upload.env.title');
+    const envLabel = screen.getByText('Environment Variables');
     const dropZone = envLabel.closest('div')?.nextElementSibling;
     expect(dropZone).toBeInTheDocument();
 
+    const dataTransfer = new DataTransfer();
+
     // Simulate drag enter
     fireEvent.dragEnter(dropZone!, {
-      dataTransfer: {files: []},
+      dataTransfer,
     });
 
     // Simulate drag over
     fireEvent.dragOver(dropZone!, {
-      dataTransfer: {files: []},
+      dataTransfer,
     });
 
     // Simulate drag leave
     fireEvent.dragLeave(dropZone!, {
-      dataTransfer: {files: []},
+      dataTransfer,
     });
   });
 
   it('accepts .yml file format via drag and drop', () => {
     render(<ImportConfigurationUploadPage />);
 
-    const dropZone = screen.getByText('upload.dropConfig').closest('div')?.parentElement;
+    const dropZone = screen.getByText('Drop your configuration file here').closest('div')?.parentElement;
     const ymlFile = new File(['key: value'], 'config.yml', {type: 'text/yaml'});
 
-    fireEvent.drop(dropZone!, {
-      dataTransfer: {files: [ymlFile]},
-    });
+    // Real browsers only populate `dataTransfer.files` for events that originate from a genuine
+    // OS-level drag gesture; a `DataTransfer` built and dispatched from script reports an empty
+    // file list on read (unlike jsdom). Dispatch a plain `Event` with a stubbed `dataTransfer`
+    // instead, since the component only reads `dataTransfer.files` off the event.
+    const event = new Event('drop', {bubbles: true, cancelable: true});
+    Object.defineProperty(event, 'dataTransfer', {value: {files: [ymlFile]}});
+    fireEvent(dropZone!, event);
 
     expect(screen.getByText('config.yml')).toBeInTheDocument();
   });
+
+  it('shows an error when a non-yaml file is dropped onto the config drop zone', () => {
+    render(<ImportConfigurationUploadPage />);
+
+    const dropZone = screen.getByText('Drop your configuration file here').closest('div')?.parentElement;
+    const txtFile = new File(['not yaml'], 'notes.txt', {type: 'text/plain'});
+
+    const event = new Event('drop', {bubbles: true, cancelable: true});
+    Object.defineProperty(event, 'dataTransfer', {value: {files: [txtFile]}});
+    fireEvent(dropZone!, event);
+
+    expect(screen.getByText('Please upload a YAML file (thunderid-config.yml)')).toBeInTheDocument();
+  });
+
+  it('handles drag and drop events on the env drop zone', () => {
+    render(<ImportConfigurationUploadPage />);
+
+    const dropZone = document.getElementById('env-file-upload')!.parentElement;
+    const dataTransfer = new DataTransfer();
+
+    fireEvent.dragEnter(dropZone!, {dataTransfer});
+    fireEvent.dragOver(dropZone!, {dataTransfer});
+    fireEvent.dragLeave(dropZone!, {dataTransfer});
+  });
+
+  it('accepts a valid .env file dropped onto the env drop zone', () => {
+    render(<ImportConfigurationUploadPage />);
+
+    const dropZone = document.getElementById('env-file-upload')!.parentElement;
+    const envFile = new File(['KEY=VALUE'], '.env', {type: 'text/plain'});
+
+    const event = new Event('drop', {bubbles: true, cancelable: true});
+    Object.defineProperty(event, 'dataTransfer', {value: {files: [envFile]}});
+    fireEvent(dropZone!, event);
+
+    expect(screen.getByText('.env')).toBeInTheDocument();
+  });
+
+  it('shows an error when a non-env file is dropped onto the env drop zone', () => {
+    render(<ImportConfigurationUploadPage />);
+
+    const dropZone = document.getElementById('env-file-upload')!.parentElement;
+    const txtFile = new File(['not env'], 'secrets.txt', {type: 'text/plain'});
+
+    const event = new Event('drop', {bubbles: true, cancelable: true});
+    Object.defineProperty(event, 'dataTransfer', {value: {files: [txtFile]}});
+    fireEvent(dropZone!, event);
+
+    expect(screen.getByText('Please upload an .env file')).toBeInTheDocument();
+  });
+
+  it('skips an empty first section produced when the file starts with a document separator', async () => {
+    const user = userEvent.setup();
+    render(<ImportConfigurationUploadPage />);
+
+    const yamlContent = '---\nresource_type: application\nname: leading-separator-app\n';
+    const yamlFile = new File([yamlContent], 'config.yaml', {type: 'text/yaml'});
+    Object.defineProperty(yamlFile, 'text', {value: () => Promise.resolve(yamlContent)});
+
+    await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
+    await user.click(screen.getByRole('button', {name: 'Continue'}));
+
+    await waitFor(
+      () => {
+        expect(mockNavigate).toHaveBeenCalledWith(
+          '/welcome/import-configuration/validate',
+          expect.objectContaining({
+            state: expect.objectContaining({
+              method: 'file',
+              parseStats: {successCount: 1, failCount: 0},
+            }) as Record<string, unknown>,
+          }),
+        );
+      },
+      {timeout: 5000},
+    );
+  });
+
+  it('extracts the original file name from a leading File: comment', async () => {
+    const user = userEvent.setup();
+    render(<ImportConfigurationUploadPage />);
+
+    const yamlContent = '# File: applications/my-app.yaml\nresource_type: application\nname: My App\n';
+    const yamlFile = new File([yamlContent], 'config.yaml', {type: 'text/yaml'});
+    Object.defineProperty(yamlFile, 'text', {value: () => Promise.resolve(yamlContent)});
+
+    await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
+    await user.click(screen.getByRole('button', {name: 'Continue'}));
+
+    await waitFor(
+      () => {
+        expect(mockNavigate).toHaveBeenCalledWith(
+          '/welcome/import-configuration/validate',
+          expect.objectContaining({
+            state: expect.objectContaining({parseStats: {successCount: 1, failCount: 0}}) as Record<string, unknown>,
+          }),
+        );
+      },
+      {timeout: 5000},
+    );
+
+    const [, {state}] = mockNavigate.mock.calls[0] as [
+      string,
+      {state: {configData: Record<string, {_metadata?: {originalFileName?: string}}[]>}},
+    ];
+    expect(state.configData.application[0]._metadata?.originalFileName).toBe('applications/my-app.yaml');
+  });
+
+  it('records a parse error and warns when a section is not valid YAML', async () => {
+    const user = userEvent.setup();
+    render(<ImportConfigurationUploadPage />);
+
+    const yamlContent = 'resource_type: application\nname: [unterminated\n';
+    const yamlFile = new File([yamlContent], 'config.yaml', {type: 'text/yaml'});
+    Object.defineProperty(yamlFile, 'text', {value: () => Promise.resolve(yamlContent)});
+
+    await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
+    await user.click(screen.getByRole('button', {name: 'Continue'}));
+
+    await waitFor(
+      () => {
+        expect(mockNavigate).toHaveBeenCalledWith(
+          '/welcome/import-configuration/validate',
+          expect.objectContaining({
+            state: expect.objectContaining({
+              parseStats: {successCount: 0, failCount: 1},
+            }) as Record<string, unknown>,
+          }),
+        );
+      },
+      {timeout: 5000},
+    );
+  });
+
+  it('strips unknown resource types and records a parse error for each', async () => {
+    const user = userEvent.setup();
+    render(<ImportConfigurationUploadPage />);
+
+    const yamlContent = 'resource_type: not_a_real_type\nname: bogus\n';
+    const yamlFile = new File([yamlContent], 'config.yaml', {type: 'text/yaml'});
+    Object.defineProperty(yamlFile, 'text', {value: () => Promise.resolve(yamlContent)});
+
+    await user.upload(document.getElementById('file-upload') as HTMLInputElement, yamlFile);
+    await user.click(screen.getByRole('button', {name: 'Continue'}));
+
+    await waitFor(
+      () => {
+        expect(mockNavigate).toHaveBeenCalledWith(
+          '/welcome/import-configuration/validate',
+          expect.objectContaining({
+            state: expect.objectContaining({
+              parseStats: {successCount: 1, failCount: 1},
+            }) as Record<string, unknown>,
+          }),
+        );
+      },
+      {timeout: 5000},
+    );
+
+    const [, {state}] = mockNavigate.mock.calls[0] as [
+      string,
+      {state: {configData: Record<string, unknown>; parseErrors: {resourceType: string; error: string}[]}},
+    ];
+    expect(state.configData.not_a_real_type).toBeUndefined();
+    expect(state.parseErrors).toHaveLength(1);
+    expect(state.parseErrors[0].resourceType).toBe('not_a_real_type');
+  });
 });
diff --git a/frontend/apps/console/src/features/import-export/pages/__tests__/ImportConfigurationValidatePage.test.tsx b/frontend/packages/configure-import-export/src/pages/__tests__/ImportConfigurationValidatePage.test.tsx
similarity index 79%
rename from frontend/apps/console/src/features/import-export/pages/__tests__/ImportConfigurationValidatePage.test.tsx
rename to frontend/packages/configure-import-export/src/pages/__tests__/ImportConfigurationValidatePage.test.tsx
index 4dccd8f730..714b2a0131 100644
--- a/frontend/apps/console/src/features/import-export/pages/__tests__/ImportConfigurationValidatePage.test.tsx
+++ b/frontend/packages/configure-import-export/src/pages/__tests__/ImportConfigurationValidatePage.test.tsx
@@ -7,12 +7,6 @@ import {afterEach, describe, expect, it, vi} from 'vitest';
 const mockNavigate = vi.fn();
 let mockLocationState: unknown = null;
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, opts?: Record<string, unknown>) => (opts ? `${key}:${JSON.stringify(opts)}` : key),
-  }),
-}));
-
 vi.mock('react-router', async () => {
   const actual = await vi.importActual<typeof import('react-router')>('react-router');
   return {
@@ -54,27 +48,27 @@ describe('ImportConfigurationValidatePage', () => {
 
   it('renders validate title', () => {
     render(<ImportConfigurationValidatePage />);
-    expect(screen.getByText('validate.title')).toBeInTheDocument();
+    expect(screen.getByText('Validating Configuration')).toBeInTheDocument();
   });
 
   it('renders the four validation steps', () => {
     render(<ImportConfigurationValidatePage />);
-    expect(screen.getByText('validate.steps.readingFile')).toBeInTheDocument();
-    expect(screen.getByText('validate.steps.validatingYaml')).toBeInTheDocument();
-    expect(screen.getByText('validate.steps.checkingCompatibility')).toBeInTheDocument();
-    expect(screen.getByText('validate.steps.validatingResources')).toBeInTheDocument();
+    expect(screen.getByText('Reading configuration file')).toBeInTheDocument();
+    expect(screen.getByText('Validating YAML syntax')).toBeInTheDocument();
+    expect(screen.getByText('Checking compatibility')).toBeInTheDocument();
+    expect(screen.getByText('Validating resources')).toBeInTheDocument();
   });
 
   it('renders close button', () => {
     render(<ImportConfigurationValidatePage />);
-    expect(screen.getByRole('button', {name: 'common:actions.close'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Close'})).toBeInTheDocument();
   });
 
   it('navigates to /home on close', async () => {
     const user = userEvent.setup();
     render(<ImportConfigurationValidatePage />);
 
-    await user.click(screen.getByRole('button', {name: 'common:actions.close'}));
+    await user.click(screen.getByRole('button', {name: 'Close'}));
 
     expect(mockNavigate).toHaveBeenCalledWith('/home');
   });
@@ -83,7 +77,7 @@ describe('ImportConfigurationValidatePage', () => {
     mockLocationState = {parseErrors: [], configData: {application: []}};
     render(<ImportConfigurationValidatePage />);
 
-    const cancelButton = screen.queryByRole('button', {name: 'common:actions.cancel'});
+    const cancelButton = screen.queryByRole('button', {name: 'Cancel'});
     // Cancel is only shown when there are parse errors
     expect(cancelButton).not.toBeInTheDocument();
   });
@@ -107,7 +101,7 @@ describe('ImportConfigurationValidatePage', () => {
 
     render(<ImportConfigurationValidatePage />);
 
-    expect(screen.getByRole('button', {name: 'validate.actions.uploadDifferentFile'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Upload Different File'})).toBeInTheDocument();
   });
 
   it('navigates to /welcome/import-configuration when upload different file is clicked', async () => {
@@ -119,21 +113,21 @@ describe('ImportConfigurationValidatePage', () => {
     const user = userEvent.setup();
     render(<ImportConfigurationValidatePage />);
 
-    await user.click(screen.getByRole('button', {name: 'validate.actions.uploadDifferentFile'}));
+    await user.click(screen.getByRole('button', {name: 'Upload Different File'}));
 
     expect(mockNavigate).toHaveBeenCalledWith('/welcome/import-configuration');
   });
 
   it('renders breadcrumb with welcome header', () => {
     render(<ImportConfigurationValidatePage />);
-    expect(screen.getByText('common:welcome.header')).toBeInTheDocument();
+    expect(screen.getByText('Welcome')).toBeInTheDocument();
   });
 
   it('navigates to /welcome when breadcrumb welcome is clicked', async () => {
     const user = userEvent.setup();
     render(<ImportConfigurationValidatePage />);
 
-    await user.click(screen.getByText('common:welcome.header'));
+    await user.click(screen.getByText('Welcome'));
 
     expect(mockNavigate).toHaveBeenCalledWith('/welcome');
   });
@@ -147,7 +141,7 @@ describe('ImportConfigurationValidatePage', () => {
     const user = userEvent.setup();
     render(<ImportConfigurationValidatePage />);
 
-    await user.click(screen.getByRole('button', {name: 'common:actions.cancel'}));
+    await user.click(screen.getByRole('button', {name: 'Cancel'}));
 
     expect(mockNavigate).toHaveBeenCalledWith('/home');
   });
diff --git a/frontend/apps/console/src/features/import-export/pages/__tests__/ImportExportPage.test.tsx b/frontend/packages/configure-import-export/src/pages/__tests__/ImportExportPage.test.tsx
similarity index 96%
rename from frontend/apps/console/src/features/import-export/pages/__tests__/ImportExportPage.test.tsx
rename to frontend/packages/configure-import-export/src/pages/__tests__/ImportExportPage.test.tsx
index 90c52f9c42..495c874f43 100644
--- a/frontend/apps/console/src/features/import-export/pages/__tests__/ImportExportPage.test.tsx
+++ b/frontend/packages/configure-import-export/src/pages/__tests__/ImportExportPage.test.tsx
@@ -26,16 +26,6 @@ vi.mock('@thunderid/logger/react', () => ({
   }),
 }));
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({
-      t: (_key: string, defaultValue: string) => defaultValue,
-    }),
-  };
-});
-
 describe('ImportExportPage', () => {
   beforeEach(() => {
     vi.clearAllMocks();
diff --git a/frontend/apps/console/src/features/import-export/utils/getConfigFileName.ts b/frontend/packages/configure-import-export/src/utils/getConfigFileName.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/utils/getConfigFileName.ts
rename to frontend/packages/configure-import-export/src/utils/getConfigFileName.ts
diff --git a/frontend/apps/console/src/features/import-export/utils/getEnvFileName.ts b/frontend/packages/configure-import-export/src/utils/getEnvFileName.ts
similarity index 100%
rename from frontend/apps/console/src/features/import-export/utils/getEnvFileName.ts
rename to frontend/packages/configure-import-export/src/utils/getEnvFileName.ts
diff --git a/frontend/packages/configure-import-export/tsconfig.eslint.json b/frontend/packages/configure-import-export/tsconfig.eslint.json
new file mode 100644
index 0000000000..5440b11d0a
--- /dev/null
+++ b/frontend/packages/configure-import-export/tsconfig.eslint.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.config.js", "**/*.config.cjs", "**/*.config.ts"]
+}
diff --git a/frontend/packages/configure-import-export/tsconfig.json b/frontend/packages/configure-import-export/tsconfig.json
new file mode 100644
index 0000000000..4f254611c4
--- /dev/null
+++ b/frontend/packages/configure-import-export/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "ESNext",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "exclude": ["node_modules", "tmp", "dist"],
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/frontend/packages/configure-import-export/tsconfig.lib.json b/frontend/packages/configure-import-export/tsconfig.lib.json
new file mode 100644
index 0000000000..8d37e00dfd
--- /dev/null
+++ b/frontend/packages/configure-import-export/tsconfig.lib.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist",
+    "declarationDir": "dist",
+    "types": ["node"]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.jsx", "src/**/*.tsx", "types/**/*.d.ts"]
+}
diff --git a/frontend/packages/configure-import-export/tsconfig.spec.json b/frontend/packages/configure-import-export/tsconfig.spec.json
new file mode 100644
index 0000000000..f4f74171e7
--- /dev/null
+++ b/frontend/packages/configure-import-export/tsconfig.spec.json
@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "types": ["vitest/globals"]
+  },
+  "include": [
+    "test-configs",
+    "vitest.config.ts",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.test.jsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}
diff --git a/frontend/packages/configure-import-export/vitest.config.ts b/frontend/packages/configure-import-export/vitest.config.ts
new file mode 100644
index 0000000000..c86c0219e9
--- /dev/null
+++ b/frontend/packages/configure-import-export/vitest.config.ts
@@ -0,0 +1,31 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {playwright} from '@vitest/browser-playwright';
+import {defineConfig} from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    coverage: {
+      provider: 'istanbul',
+      reporter: [['lcov', {projectRoot: '../../..'}], 'text-summary'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: [
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/__tests__/**',
+        '**/test/**',
+        '**/*.{test,spec}.{ts,tsx}',
+        '**/test-setup.{ts,tsx}',
+        '**/index.ts',
+      ],
+    },
+    browser: {
+      enabled: true,
+      headless: true,
+      instances: [{browser: 'chromium'}],
+      provider: playwright(),
+    },
+    setupFiles: ['@thunderid/test-utils/setup'],
+  },
+});
diff --git a/frontend/packages/configure-resource-servers/src/components/resource-tree/__tests__/AddNodeDialog.test.tsx b/frontend/packages/configure-resource-servers/src/components/resource-tree/__tests__/AddNodeDialog.test.tsx
index 1257227a28..a13b7d7c6f 100644
--- a/frontend/packages/configure-resource-servers/src/components/resource-tree/__tests__/AddNodeDialog.test.tsx
+++ b/frontend/packages/configure-resource-servers/src/components/resource-tree/__tests__/AddNodeDialog.test.tsx
@@ -51,7 +51,7 @@ describe('AddNodeDialog', () => {
   it('renders the Add Resource title when mode is resource', () => {
     renderWithProviders(<AddNodeDialog {...defaultProps} />);
 
-    expect(screen.getByText('Add Resource')).toBeInTheDocument();
+    expect(screen.getByText('Add resource')).toBeInTheDocument();
   });
 
   it('renders the Name label when the dialog is open', () => {
@@ -129,7 +129,7 @@ describe('AddNodeDialog', () => {
   it('does not render when open is false', () => {
     renderWithProviders(<AddNodeDialog {...defaultProps} open={false} />);
 
-    expect(screen.queryByText('Add Resource')).not.toBeInTheDocument();
+    expect(screen.queryByText('Add resource')).not.toBeInTheDocument();
   });
 
   it('shows an error and disables the Add button when the handle contains the delimiter character', async () => {
@@ -144,7 +144,7 @@ describe('AddNodeDialog', () => {
       expect(handleInput).toHaveValue('foo/bar');
     });
 
-    expect(screen.getByText('Handle cannot contain the delimiter character "/".')).toBeInTheDocument();
+    expect(screen.getByText('Handle cannot contain the delimiter character /.')).toBeInTheDocument();
 
     const addButton = screen.getByRole('button', {name: /^add$/i});
     expect(addButton).toBeDisabled();
diff --git a/frontend/packages/configure-settings/.editorconfig b/frontend/packages/configure-settings/.editorconfig
new file mode 100644
index 0000000000..54a161112c
--- /dev/null
+++ b/frontend/packages/configure-settings/.editorconfig
@@ -0,0 +1 @@
+../../.editorconfig
diff --git a/frontend/packages/configure-settings/.gitignore b/frontend/packages/configure-settings/.gitignore
new file mode 100644
index 0000000000..0ccb8df8de
--- /dev/null
+++ b/frontend/packages/configure-settings/.gitignore
@@ -0,0 +1,141 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+.output
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vite/
diff --git a/frontend/packages/configure-settings/.prettierignore b/frontend/packages/configure-settings/.prettierignore
new file mode 100644
index 0000000000..99b0b518a7
--- /dev/null
+++ b/frontend/packages/configure-settings/.prettierignore
@@ -0,0 +1,4 @@
+/dist
+/build
+/node_modules
+/coverage
diff --git a/frontend/packages/configure-settings/eslint.config.js b/frontend/packages/configure-settings/eslint.config.js
new file mode 100644
index 0000000000..f5fd8bcdcc
--- /dev/null
+++ b/frontend/packages/configure-settings/eslint.config.js
@@ -0,0 +1,11 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import thunderIdPlugin from '@thunderid/eslint-plugin';
+
+export default [
+  {
+    ignores: ['dist/**', 'build/**', 'node_modules/**', 'coverage/**'],
+  },
+  ...thunderIdPlugin.configs.react,
+];
diff --git a/frontend/packages/configure-verifiable-presentations/package.json b/frontend/packages/configure-settings/package.json
similarity index 77%
rename from frontend/packages/configure-verifiable-presentations/package.json
rename to frontend/packages/configure-settings/package.json
index 2e881c1c64..2da47fe003 100644
--- a/frontend/packages/configure-verifiable-presentations/package.json
+++ b/frontend/packages/configure-settings/package.json
@@ -1,15 +1,16 @@
 {
-  "name": "@thunderid/configure-verifiable-presentations",
+  "private": true,
+  "name": "@thunderid/configure-settings",
   "version": "0.0.0",
-  "description": "verifiable-presentations feature for ⚡️ ThunderID applications",
+  "description": "Settings feature for ⚡️ ThunderID applications",
   "keywords": [
     "thunderid",
     "configure",
-    "verifiable-presentations",
+    "settings",
     "react",
     "feature"
   ],
-  "homepage": "https://github.com/thunder-id/thunderid/tree/main/frontend/packages/configure-verifiable-presentations#readme",
+  "homepage": "https://github.com/thunder-id/thunderid/tree/main/frontend/packages/configure-settings#readme",
   "bugs": {
     "url": "https://github.com/thunder-id/thunderid/issues"
   },
@@ -35,7 +36,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/thunder-id/thunderid",
-    "directory": "frontend/packages/configure-verifiable-presentations"
+    "directory": "frontend/packages/configure-settings"
   },
   "scripts": {
     "build": "pnpm clean:dist && rolldown -c rolldown.config.js && tsc -p tsconfig.lib.json --emitDeclarationOnly --outDir dist",
@@ -55,19 +56,24 @@
     "@testing-library/jest-dom": "catalog:",
     "@testing-library/react": "catalog:",
     "@testing-library/user-event": "catalog:",
+    "@thunderid/components": "workspace:^",
     "@thunderid/contexts": "workspace:^",
     "@thunderid/eslint-plugin": "workspace:^",
     "@thunderid/prettier-config": "workspace:^",
     "@thunderid/react": "catalog:",
     "@thunderid/test-utils": "workspace:^",
+    "@thunderid/utils": "workspace:^",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@vitest/browser-playwright": "catalog:",
     "@vitest/coverage-istanbul": "catalog:",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
     "eslint": "catalog:",
     "prettier": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
+    "react-i18next": "catalog:",
     "rimraf": "catalog:",
     "rolldown": "catalog:",
     "tslib": "catalog:",
@@ -80,8 +86,13 @@
   "dependencies": {},
   "peerDependencies": {
     "@tanstack/react-query": "catalog:",
+    "@thunderid/components": "workspace:^",
     "@thunderid/contexts": "workspace:^",
     "@thunderid/react": "catalog:",
-    "react": "catalog:"
+    "@thunderid/utils": "workspace:^",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
+    "react": "catalog:",
+    "react-i18next": "catalog:"
   }
 }
diff --git a/frontend/packages/configure-settings/prettier.config.js b/frontend/packages/configure-settings/prettier.config.js
new file mode 100644
index 0000000000..f054cd507c
--- /dev/null
+++ b/frontend/packages/configure-settings/prettier.config.js
@@ -0,0 +1,6 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import config from '@thunderid/prettier-config';
+
+export default config;
diff --git a/frontend/packages/configure-settings/rolldown.config.js b/frontend/packages/configure-settings/rolldown.config.js
new file mode 100644
index 0000000000..a4911bb7fd
--- /dev/null
+++ b/frontend/packages/configure-settings/rolldown.config.js
@@ -0,0 +1,49 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {readFileSync} from 'fs';
+import {join} from 'path';
+import {defineConfig} from 'rolldown';
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
+
+const external = [
+  ...Object.keys(pkg.dependencies || {}),
+  ...Object.keys(pkg.peerDependencies || {}),
+  'react/jsx-runtime',
+  // Needed to avoid hook ordering issues.
+  /^@mui\//,
+];
+
+const commonOptions = {
+  input: join('src', 'index.ts'),
+  external,
+  target: 'es2020',
+  sourcemap: true,
+};
+
+export default defineConfig([
+  // ✅ ESM build (for browsers/bundlers)
+  {
+    ...commonOptions,
+    platform: 'browser',
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+  // ✅ CommonJS build (for Node/SSR/testing)
+  {
+    ...commonOptions,
+    platform: 'node',
+    output: {
+      dir: join('dist', 'cjs'),
+      entryFileNames: '[name].cjs',
+      format: 'cjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+]);
diff --git a/frontend/apps/console/src/features/settings/api/__tests__/useGetCorsConfig.test.ts b/frontend/packages/configure-settings/src/api/__tests__/useGetCorsConfig.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/api/__tests__/useGetCorsConfig.test.ts
rename to frontend/packages/configure-settings/src/api/__tests__/useGetCorsConfig.test.ts
diff --git a/frontend/apps/console/src/features/settings/api/__tests__/useUpdateCorsConfig.test.ts b/frontend/packages/configure-settings/src/api/__tests__/useUpdateCorsConfig.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/api/__tests__/useUpdateCorsConfig.test.ts
rename to frontend/packages/configure-settings/src/api/__tests__/useUpdateCorsConfig.test.ts
diff --git a/frontend/apps/console/src/features/settings/api/useGetCorsConfig.ts b/frontend/packages/configure-settings/src/api/useGetCorsConfig.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/api/useGetCorsConfig.ts
rename to frontend/packages/configure-settings/src/api/useGetCorsConfig.ts
diff --git a/frontend/apps/console/src/features/settings/api/useUpdateCorsConfig.ts b/frontend/packages/configure-settings/src/api/useUpdateCorsConfig.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/api/useUpdateCorsConfig.ts
rename to frontend/packages/configure-settings/src/api/useUpdateCorsConfig.ts
diff --git a/frontend/apps/console/src/features/settings/components/cors/CorsSection.tsx b/frontend/packages/configure-settings/src/components/cors/CorsSection.tsx
similarity index 100%
rename from frontend/apps/console/src/features/settings/components/cors/CorsSection.tsx
rename to frontend/packages/configure-settings/src/components/cors/CorsSection.tsx
diff --git a/frontend/apps/console/src/features/settings/components/cors/OriginRow.tsx b/frontend/packages/configure-settings/src/components/cors/OriginRow.tsx
similarity index 100%
rename from frontend/apps/console/src/features/settings/components/cors/OriginRow.tsx
rename to frontend/packages/configure-settings/src/components/cors/OriginRow.tsx
diff --git a/frontend/apps/console/src/features/settings/components/cors/__tests__/CorsSection.test.tsx b/frontend/packages/configure-settings/src/components/cors/__tests__/CorsSection.test.tsx
similarity index 76%
rename from frontend/apps/console/src/features/settings/components/cors/__tests__/CorsSection.test.tsx
rename to frontend/packages/configure-settings/src/components/cors/__tests__/CorsSection.test.tsx
index 6d2a314bc0..834ca9f640 100644
--- a/frontend/apps/console/src/features/settings/components/cors/__tests__/CorsSection.test.tsx
+++ b/frontend/packages/configure-settings/src/components/cors/__tests__/CorsSection.test.tsx
@@ -7,10 +7,6 @@ import {renderWithProviders} from '@thunderid/test-utils';
 import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
 import type {CorsConfigResponse} from '../../../models/responses';
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: (key: string) => key}),
-}));
-
 const mockUseGetCorsConfig =
   vi.fn<() => {data: CorsConfigResponse | undefined; isLoading: boolean; error: Error | null}>();
 vi.mock('../../../api/useGetCorsConfig', () => ({
@@ -46,7 +42,7 @@ describe('CorsSection', () => {
   it('does not render the editor while loading', () => {
     mockUseGetCorsConfig.mockReturnValue({data: undefined, isLoading: true, error: null});
     renderWithProviders(<CorsSection />);
-    expect(screen.queryByRole('button', {name: 'settings:cors.addOrigin'})).toBeNull();
+    expect(screen.queryByRole('button', {name: 'Add origin'})).toBeNull();
   });
 
   it('shows an alert on load error', () => {
@@ -66,9 +62,9 @@ describe('CorsSection', () => {
     expect(screen.getByDisplayValue('https://console.example.com')).toHaveAttribute('readonly');
     expect(screen.getByDisplayValue('^https://x$')).toHaveAttribute('readonly');
     expect(screen.getByDisplayValue('https://app.acme.com')).not.toHaveAttribute('readonly');
-    expect(screen.getByRole('button', {name: 'settings:cors.addOrigin'})).toBeInTheDocument();
-    expect(screen.getByText('settings:cors.readOnlyHint')).toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'settings:cors.removeOrigin'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Add origin'})).toBeInTheDocument();
+    expect(screen.getByText("Some origins are read-only because they're managed declaratively.")).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Remove origin'})).toBeInTheDocument();
   });
 
   it('removes an editable origin when its delete button is clicked', async () => {
@@ -81,7 +77,7 @@ describe('CorsSection', () => {
     renderWithProviders(<CorsSection />);
 
     expect(screen.getByDisplayValue('https://remove.example.com')).toBeInTheDocument();
-    await user.click(screen.getByRole('button', {name: 'settings:cors.removeOrigin'}));
+    await user.click(screen.getByRole('button', {name: 'Remove origin'}));
     expect(screen.queryByDisplayValue('https://remove.example.com')).toBeNull();
   });
 
@@ -94,9 +90,9 @@ describe('CorsSection', () => {
     });
     renderWithProviders(<CorsSection />);
 
-    expect(screen.queryByPlaceholderText('settings:cors.originPlaceholder')).toBeNull();
-    await user.click(screen.getByRole('button', {name: 'settings:cors.addOrigin'}));
-    expect(screen.getByPlaceholderText('settings:cors.originPlaceholder')).toBeInTheDocument();
+    expect(screen.queryByPlaceholderText('https://app.example.com')).toBeNull();
+    await user.click(screen.getByRole('button', {name: 'Add origin'}));
+    expect(screen.getByPlaceholderText('https://app.example.com')).toBeInTheDocument();
   });
 
   it('saves the edited origins via the update mutation and clears the unsaved bar on success', async () => {
@@ -112,10 +108,10 @@ describe('CorsSection', () => {
     });
     renderWithProviders(<CorsSection />);
 
-    await user.click(screen.getByRole('button', {name: 'settings:cors.addOrigin'}));
-    await user.type(screen.getByPlaceholderText('settings:cors.originPlaceholder'), 'https://new.example.com');
+    await user.click(screen.getByRole('button', {name: 'Add origin'}));
+    await user.type(screen.getByPlaceholderText('https://app.example.com'), 'https://new.example.com');
 
-    const saveButton = await screen.findByRole('button', {name: 'settings:cors.save'});
+    const saveButton = await screen.findByRole('button', {name: 'Save changes'});
     await user.click(saveButton);
 
     expect(mockMutate).toHaveBeenCalledWith(
@@ -124,7 +120,7 @@ describe('CorsSection', () => {
     );
     // onSuccess → reset() clears the overlay, so the unsaved bar disappears.
     await waitFor(() => {
-      expect(screen.queryByRole('button', {name: 'settings:cors.save'})).toBeNull();
+      expect(screen.queryByRole('button', {name: 'Save changes'})).toBeNull();
     });
   });
 
@@ -137,11 +133,11 @@ describe('CorsSection', () => {
     });
     renderWithProviders(<CorsSection />);
 
-    await user.click(screen.getByRole('button', {name: 'settings:cors.addOrigin'}));
+    await user.click(screen.getByRole('button', {name: 'Add origin'}));
     // Change without blurring (fireEvent), so the row-level error isn't shown yet and Save is enabled.
     // '(bad' is neither a valid origin nor a compilable regex, so the submit-time guard must block it.
-    fireEvent.change(screen.getByPlaceholderText('settings:cors.originPlaceholder'), {target: {value: '(bad'}});
-    fireEvent.click(screen.getByRole('button', {name: 'settings:cors.save'}));
+    fireEvent.change(screen.getByPlaceholderText('https://app.example.com'), {target: {value: '(bad'}});
+    fireEvent.click(screen.getByRole('button', {name: 'Save changes'}));
 
     expect(mockMutate).not.toHaveBeenCalled();
   });
@@ -155,13 +151,13 @@ describe('CorsSection', () => {
     });
     renderWithProviders(<CorsSection />);
 
-    await user.click(screen.getByRole('button', {name: 'settings:cors.addOrigin'}));
-    await user.click(screen.getByRole('button', {name: 'settings:cors.addOrigin'}));
-    const inputs = screen.getAllByPlaceholderText('settings:cors.originPlaceholder');
+    await user.click(screen.getByRole('button', {name: 'Add origin'}));
+    await user.click(screen.getByRole('button', {name: 'Add origin'}));
+    const inputs = screen.getAllByPlaceholderText('https://app.example.com');
     await user.type(inputs[0], 'https://dup.example.com');
     await user.type(inputs[1], 'https://dup.example.com');
 
-    const saveButton = await screen.findByRole('button', {name: 'settings:cors.save'});
+    const saveButton = await screen.findByRole('button', {name: 'Save changes'});
     expect(saveButton).toBeDisabled();
     expect(mockMutate).not.toHaveBeenCalled();
   });
diff --git a/frontend/apps/console/src/features/settings/constants/settings-query-keys.ts b/frontend/packages/configure-settings/src/constants/settings-query-keys.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/constants/settings-query-keys.ts
rename to frontend/packages/configure-settings/src/constants/settings-query-keys.ts
diff --git a/frontend/apps/console/src/features/settings/hooks/__tests__/useAllowedOriginsDraft.test.ts b/frontend/packages/configure-settings/src/hooks/__tests__/useAllowedOriginsDraft.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/hooks/__tests__/useAllowedOriginsDraft.test.ts
rename to frontend/packages/configure-settings/src/hooks/__tests__/useAllowedOriginsDraft.test.ts
diff --git a/frontend/apps/console/src/features/settings/hooks/useAllowedOriginsDraft.ts b/frontend/packages/configure-settings/src/hooks/useAllowedOriginsDraft.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/hooks/useAllowedOriginsDraft.ts
rename to frontend/packages/configure-settings/src/hooks/useAllowedOriginsDraft.ts
diff --git a/frontend/packages/configure-settings/src/index.ts b/frontend/packages/configure-settings/src/index.ts
new file mode 100644
index 0000000000..3ef03d8e94
--- /dev/null
+++ b/frontend/packages/configure-settings/src/index.ts
@@ -0,0 +1,23 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// APIs
+export {default as useGetCorsConfig} from './api/useGetCorsConfig';
+export {default as useUpdateCorsConfig} from './api/useUpdateCorsConfig';
+export type {UpdateCorsConfigVariables} from './api/useUpdateCorsConfig';
+
+// Components
+export {default as CorsSection} from './components/cors/CorsSection';
+
+// Constants
+export {default as SettingsQueryKeys} from './constants/settings-query-keys';
+
+// Models
+export * from './models/responses';
+
+// Pages
+export {default as SettingsPage} from './pages/SettingsPage';
+
+// Utils
+export {isValidOrigin, isValidRegex, normalizeOrigin} from './utils/origin';
+export {default as originValueText} from './utils/originValueText';
diff --git a/frontend/apps/console/src/features/settings/models/responses.ts b/frontend/packages/configure-settings/src/models/responses.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/models/responses.ts
rename to frontend/packages/configure-settings/src/models/responses.ts
diff --git a/frontend/apps/console/src/features/settings/pages/SettingsPage.tsx b/frontend/packages/configure-settings/src/pages/SettingsPage.tsx
similarity index 100%
rename from frontend/apps/console/src/features/settings/pages/SettingsPage.tsx
rename to frontend/packages/configure-settings/src/pages/SettingsPage.tsx
diff --git a/frontend/apps/console/src/features/settings/pages/__tests__/SettingsPage.test.tsx b/frontend/packages/configure-settings/src/pages/__tests__/SettingsPage.test.tsx
similarity index 70%
rename from frontend/apps/console/src/features/settings/pages/__tests__/SettingsPage.test.tsx
rename to frontend/packages/configure-settings/src/pages/__tests__/SettingsPage.test.tsx
index 283dc1b959..93149a7fff 100644
--- a/frontend/apps/console/src/features/settings/pages/__tests__/SettingsPage.test.tsx
+++ b/frontend/packages/configure-settings/src/pages/__tests__/SettingsPage.test.tsx
@@ -6,10 +6,6 @@ import userEvent from '@testing-library/user-event';
 import {renderWithProviders} from '@thunderid/test-utils';
 import {describe, it, expect, vi} from 'vitest';
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({t: (key: string) => key}),
-}));
-
 vi.mock('../../components/cors/CorsSection', () => ({
   default: () => <div data-testid="cors-section" />,
 }));
@@ -20,16 +16,16 @@ describe('SettingsPage', () => {
   it('renders the title, subtitle, the CORS tab, and the CORS panel', () => {
     renderWithProviders(<SettingsPage />);
 
-    expect(screen.getByText('settings:page.title')).toBeInTheDocument();
-    expect(screen.getByText('settings:page.subtitle')).toBeInTheDocument();
-    expect(screen.getByRole('tab', {name: 'settings:tabs.cors'})).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText('Settings that apply across your entire ThunderID deployment.')).toBeInTheDocument();
+    expect(screen.getByRole('tab', {name: 'CORS'})).toBeInTheDocument();
     expect(screen.getByTestId('cors-section')).toBeInTheDocument();
   });
 
   it('keeps the CORS panel active when its tab is clicked', async () => {
     const user = userEvent.setup();
     renderWithProviders(<SettingsPage />);
-    await user.click(screen.getByRole('tab', {name: 'settings:tabs.cors'}));
+    await user.click(screen.getByRole('tab', {name: 'CORS'}));
     expect(screen.getByTestId('cors-section')).toBeInTheDocument();
   });
 });
diff --git a/frontend/apps/console/src/features/settings/utils/__tests__/baselineKey.test.ts b/frontend/packages/configure-settings/src/utils/__tests__/baselineKey.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/__tests__/baselineKey.test.ts
rename to frontend/packages/configure-settings/src/utils/__tests__/baselineKey.test.ts
diff --git a/frontend/apps/console/src/features/settings/utils/__tests__/isStringOrigin.test.ts b/frontend/packages/configure-settings/src/utils/__tests__/isStringOrigin.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/__tests__/isStringOrigin.test.ts
rename to frontend/packages/configure-settings/src/utils/__tests__/isStringOrigin.test.ts
diff --git a/frontend/apps/console/src/features/settings/utils/__tests__/normalizedNonEmpty.test.ts b/frontend/packages/configure-settings/src/utils/__tests__/normalizedNonEmpty.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/__tests__/normalizedNonEmpty.test.ts
rename to frontend/packages/configure-settings/src/utils/__tests__/normalizedNonEmpty.test.ts
diff --git a/frontend/apps/console/src/features/settings/utils/__tests__/origin.test.ts b/frontend/packages/configure-settings/src/utils/__tests__/origin.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/__tests__/origin.test.ts
rename to frontend/packages/configure-settings/src/utils/__tests__/origin.test.ts
diff --git a/frontend/apps/console/src/features/settings/utils/__tests__/originValueText.test.ts b/frontend/packages/configure-settings/src/utils/__tests__/originValueText.test.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/__tests__/originValueText.test.ts
rename to frontend/packages/configure-settings/src/utils/__tests__/originValueText.test.ts
diff --git a/frontend/apps/console/src/features/settings/utils/baselineKey.ts b/frontend/packages/configure-settings/src/utils/baselineKey.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/baselineKey.ts
rename to frontend/packages/configure-settings/src/utils/baselineKey.ts
diff --git a/frontend/apps/console/src/features/settings/utils/isStringOrigin.ts b/frontend/packages/configure-settings/src/utils/isStringOrigin.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/isStringOrigin.ts
rename to frontend/packages/configure-settings/src/utils/isStringOrigin.ts
diff --git a/frontend/apps/console/src/features/settings/utils/normalizedNonEmpty.ts b/frontend/packages/configure-settings/src/utils/normalizedNonEmpty.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/normalizedNonEmpty.ts
rename to frontend/packages/configure-settings/src/utils/normalizedNonEmpty.ts
diff --git a/frontend/apps/console/src/features/settings/utils/origin.ts b/frontend/packages/configure-settings/src/utils/origin.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/origin.ts
rename to frontend/packages/configure-settings/src/utils/origin.ts
diff --git a/frontend/apps/console/src/features/settings/utils/originValueText.ts b/frontend/packages/configure-settings/src/utils/originValueText.ts
similarity index 100%
rename from frontend/apps/console/src/features/settings/utils/originValueText.ts
rename to frontend/packages/configure-settings/src/utils/originValueText.ts
diff --git a/frontend/packages/configure-settings/tsconfig.eslint.json b/frontend/packages/configure-settings/tsconfig.eslint.json
new file mode 100644
index 0000000000..5440b11d0a
--- /dev/null
+++ b/frontend/packages/configure-settings/tsconfig.eslint.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.config.js", "**/*.config.cjs", "**/*.config.ts"]
+}
diff --git a/frontend/packages/configure-settings/tsconfig.json b/frontend/packages/configure-settings/tsconfig.json
new file mode 100644
index 0000000000..4f254611c4
--- /dev/null
+++ b/frontend/packages/configure-settings/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "ESNext",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "exclude": ["node_modules", "tmp", "dist"],
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/frontend/packages/configure-settings/tsconfig.lib.json b/frontend/packages/configure-settings/tsconfig.lib.json
new file mode 100644
index 0000000000..8d37e00dfd
--- /dev/null
+++ b/frontend/packages/configure-settings/tsconfig.lib.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist",
+    "declarationDir": "dist",
+    "types": ["node"]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.jsx", "src/**/*.tsx", "types/**/*.d.ts"]
+}
diff --git a/frontend/packages/configure-settings/tsconfig.spec.json b/frontend/packages/configure-settings/tsconfig.spec.json
new file mode 100644
index 0000000000..f4f74171e7
--- /dev/null
+++ b/frontend/packages/configure-settings/tsconfig.spec.json
@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "types": ["vitest/globals"]
+  },
+  "include": [
+    "test-configs",
+    "vitest.config.ts",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.test.jsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}
diff --git a/frontend/packages/configure-settings/vitest.config.ts b/frontend/packages/configure-settings/vitest.config.ts
new file mode 100644
index 0000000000..c86c0219e9
--- /dev/null
+++ b/frontend/packages/configure-settings/vitest.config.ts
@@ -0,0 +1,31 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {playwright} from '@vitest/browser-playwright';
+import {defineConfig} from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    coverage: {
+      provider: 'istanbul',
+      reporter: [['lcov', {projectRoot: '../../..'}], 'text-summary'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: [
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/__tests__/**',
+        '**/test/**',
+        '**/*.{test,spec}.{ts,tsx}',
+        '**/test-setup.{ts,tsx}',
+        '**/index.ts',
+      ],
+    },
+    browser: {
+      enabled: true,
+      headless: true,
+      instances: [{browser: 'chromium'}],
+      provider: playwright(),
+    },
+    setupFiles: ['@thunderid/test-utils/setup'],
+  },
+});
diff --git a/frontend/packages/configure-translations/src/components/__tests__/TranslationDeleteDialog.test.tsx b/frontend/packages/configure-translations/src/components/__tests__/TranslationDeleteDialog.test.tsx
index b1a836189f..016eb1b209 100644
--- a/frontend/packages/configure-translations/src/components/__tests__/TranslationDeleteDialog.test.tsx
+++ b/frontend/packages/configure-translations/src/components/__tests__/TranslationDeleteDialog.test.tsx
@@ -21,7 +21,7 @@ const defaultProps = {
 };
 
 describe('TranslationDeleteDialog', () => {
-  let t: (key: string) => string;
+  let t: (key: string, options?: Record<string, unknown>) => string;
 
   beforeAll(() => {
     ({t} = renderHook(() => useTranslation()).result.current);
@@ -35,19 +35,19 @@ describe('TranslationDeleteDialog', () => {
     it('renders the dialog title', () => {
       render(<TranslationDeleteDialog {...defaultProps} />);
 
-      expect(screen.getByText('delete.title')).toBeInTheDocument();
+      expect(screen.getByText(t('translations:delete.title'))).toBeInTheDocument();
     });
 
     it('renders the confirmation message', () => {
       render(<TranslationDeleteDialog {...defaultProps} />);
 
-      expect(screen.getByText('delete.message')).toBeInTheDocument();
+      expect(screen.getByText(t('translations:delete.message', {language: 'DisplayName(fr-FR)'}))).toBeInTheDocument();
     });
 
     it('renders the warning disclaimer', () => {
       render(<TranslationDeleteDialog {...defaultProps} />);
 
-      expect(screen.getByText('delete.disclaimer')).toBeInTheDocument();
+      expect(screen.getByText(t('translations:delete.disclaimer'))).toBeInTheDocument();
     });
 
     it('renders cancel and delete buttons', () => {
diff --git a/frontend/packages/configure-translations/src/components/create-translation/__tests__/ReviewLocaleCode.test.tsx b/frontend/packages/configure-translations/src/components/create-translation/__tests__/ReviewLocaleCode.test.tsx
index 4fec810529..095938332a 100644
--- a/frontend/packages/configure-translations/src/components/create-translation/__tests__/ReviewLocaleCode.test.tsx
+++ b/frontend/packages/configure-translations/src/components/create-translation/__tests__/ReviewLocaleCode.test.tsx
@@ -2,18 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import userEvent from '@testing-library/user-event';
-import {render, screen} from '@thunderid/test-utils';
-import {describe, expect, it, vi, beforeEach} from 'vitest';
+import {render, renderHook, screen} from '@thunderid/test-utils';
+import {useTranslation} from 'react-i18next';
+import {describe, expect, it, vi, beforeAll, beforeEach} from 'vitest';
 import ReviewLocaleCode from '@/components/create-translation/ReviewLocaleCode';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string) => key}),
-  };
-});
-
 vi.mock('@thunderid/i18n', () => ({
   getDisplayNameForCode: (code: string) => (code ? `Name(${code})` : null),
   toFlagEmoji: (code: string) => (code ? `Flag(${code})` : ''),
@@ -29,6 +22,12 @@ const defaultProps = {
 };
 
 describe('ReviewLocaleCode', () => {
+  let t: (key: string) => string;
+
+  beforeAll(() => {
+    ({t} = renderHook(() => useTranslation('translations')).result.current);
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -37,8 +36,8 @@ describe('ReviewLocaleCode', () => {
     it('renders the step title and subtitle', () => {
       render(<ReviewLocaleCode {...defaultProps} />);
 
-      expect(screen.getByText('language.create.localeCode.title')).toBeInTheDocument();
-      expect(screen.getByText('language.create.localeCode.subtitle')).toBeInTheDocument();
+      expect(screen.getByText(t('language.create.localeCode.title'))).toBeInTheDocument();
+      expect(screen.getByText(t('language.create.localeCode.subtitle'))).toBeInTheDocument();
     });
 
     it('renders the locale code input with the derived locale as placeholder', () => {
@@ -50,7 +49,7 @@ describe('ReviewLocaleCode', () => {
     it('renders the BCP 47 helper tip', () => {
       render(<ReviewLocaleCode {...defaultProps} />);
 
-      expect(screen.getByText('language.add.code.helperText')).toBeInTheDocument();
+      expect(screen.getByText(t('language.add.code.helperText'))).toBeInTheDocument();
     });
   });
 
diff --git a/frontend/packages/configure-translations/src/components/create-translation/__tests__/SelectCountry.test.tsx b/frontend/packages/configure-translations/src/components/create-translation/__tests__/SelectCountry.test.tsx
index 9c52c7961a..d06e10bcee 100644
--- a/frontend/packages/configure-translations/src/components/create-translation/__tests__/SelectCountry.test.tsx
+++ b/frontend/packages/configure-translations/src/components/create-translation/__tests__/SelectCountry.test.tsx
@@ -2,18 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import userEvent from '@testing-library/user-event';
-import {render, screen} from '@thunderid/test-utils';
-import {describe, expect, it, vi, beforeEach} from 'vitest';
+import {render, renderHook, screen} from '@thunderid/test-utils';
+import {useTranslation} from 'react-i18next';
+import {describe, expect, it, vi, beforeAll, beforeEach} from 'vitest';
 import SelectCountry from '@/components/create-translation/SelectCountry';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string) => key}),
-  };
-});
-
 const mockCountries = [
   {name: 'France', regionCode: 'FR', flag: '🇫🇷'},
   {name: 'Germany', regionCode: 'DE', flag: '🇩🇪'},
@@ -31,6 +24,12 @@ const defaultProps = {
 };
 
 describe('SelectCountry', () => {
+  let t: (key: string) => string;
+
+  beforeAll(() => {
+    ({t} = renderHook(() => useTranslation('translations')).result.current);
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -39,20 +38,20 @@ describe('SelectCountry', () => {
     it('renders the step title and subtitle', () => {
       render(<SelectCountry {...defaultProps} />);
 
-      expect(screen.getByText('language.create.country.title')).toBeInTheDocument();
-      expect(screen.getByText('language.create.country.subtitle')).toBeInTheDocument();
+      expect(screen.getByText(t('language.create.country.title'))).toBeInTheDocument();
+      expect(screen.getByText(t('language.create.country.subtitle'))).toBeInTheDocument();
     });
 
     it('renders the country autocomplete label', () => {
       render(<SelectCountry {...defaultProps} />);
 
-      expect(screen.getByText('language.create.countryLabel')).toBeInTheDocument();
+      expect(screen.getByText(t('language.create.countryLabel'))).toBeInTheDocument();
     });
 
     it('renders the helper tip', () => {
       render(<SelectCountry {...defaultProps} />);
 
-      expect(screen.getByText('language.create.country.helperText')).toBeInTheDocument();
+      expect(screen.getByText(t('language.create.country.helperText'))).toBeInTheDocument();
     });
 
     it('renders the autocomplete combobox', () => {
diff --git a/frontend/packages/configure-translations/src/components/create-translation/__tests__/SelectLanguage.test.tsx b/frontend/packages/configure-translations/src/components/create-translation/__tests__/SelectLanguage.test.tsx
index 463b7b8654..a83e889b3a 100644
--- a/frontend/packages/configure-translations/src/components/create-translation/__tests__/SelectLanguage.test.tsx
+++ b/frontend/packages/configure-translations/src/components/create-translation/__tests__/SelectLanguage.test.tsx
@@ -2,18 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import userEvent from '@testing-library/user-event';
-import {render, screen} from '@thunderid/test-utils';
-import {describe, expect, it, vi, beforeEach} from 'vitest';
+import {render, renderHook, screen} from '@thunderid/test-utils';
+import {useTranslation} from 'react-i18next';
+import {describe, expect, it, vi, beforeAll, beforeEach} from 'vitest';
 import SelectLanguage from '@/components/create-translation/SelectLanguage';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string, opts?: Record<string, unknown>) => (opts ? `${key}` : key)}),
-  };
-});
-
 const mockLocales = [
   {code: 'fr-FR', displayName: 'French (France)', flag: '🇫🇷'},
   {code: 'fr-BE', displayName: 'French (Belgium)', flag: '🇧🇪'},
@@ -34,6 +27,12 @@ const defaultProps = {
 };
 
 describe('SelectLanguage', () => {
+  let t: (key: string, options?: Record<string, unknown>) => string;
+
+  beforeAll(() => {
+    ({t} = renderHook(() => useTranslation('translations')).result.current);
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -42,20 +41,22 @@ describe('SelectLanguage', () => {
     it('renders the step title and subtitle', () => {
       render(<SelectLanguage {...defaultProps} />);
 
-      expect(screen.getByText('language.create.language.title')).toBeInTheDocument();
-      expect(screen.getByText('language.create.language.subtitle')).toBeInTheDocument();
+      expect(screen.getByText(t('language.create.language.title'))).toBeInTheDocument();
+      expect(
+        screen.getByText(t('language.create.language.subtitle', {country: selectedCountry.name})),
+      ).toBeInTheDocument();
     });
 
     it('renders the language autocomplete label', () => {
       render(<SelectLanguage {...defaultProps} />);
 
-      expect(screen.getByText('language.create.language.label')).toBeInTheDocument();
+      expect(screen.getByText(t('language.create.language.label'))).toBeInTheDocument();
     });
 
     it('renders the helper tip', () => {
       render(<SelectLanguage {...defaultProps} />);
 
-      expect(screen.getByText('language.create.language.helperText')).toBeInTheDocument();
+      expect(screen.getByText(t('language.create.language.helperText'))).toBeInTheDocument();
     });
 
     it('renders the autocomplete combobox', () => {
diff --git a/frontend/packages/configure-translations/src/components/edit-translation/__tests__/NamespaceSelector.test.tsx b/frontend/packages/configure-translations/src/components/edit-translation/__tests__/NamespaceSelector.test.tsx
index 2709e06d47..828df9c9ca 100644
--- a/frontend/packages/configure-translations/src/components/edit-translation/__tests__/NamespaceSelector.test.tsx
+++ b/frontend/packages/configure-translations/src/components/edit-translation/__tests__/NamespaceSelector.test.tsx
@@ -2,18 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import userEvent from '@testing-library/user-event';
-import {render, screen} from '@thunderid/test-utils';
-import {describe, expect, it, vi, beforeEach} from 'vitest';
+import {render, renderHook, screen} from '@thunderid/test-utils';
+import {useTranslation} from 'react-i18next';
+import {describe, expect, it, vi, beforeAll, beforeEach} from 'vitest';
 import NamespaceSelector from '@/components/edit-translation/NamespaceSelector';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string) => key}),
-  };
-});
-
 const defaultProps = {
   namespaces: ['commonNamespace', 'loginFlow', 'userProfile'],
   value: 'commonNamespace',
@@ -22,6 +15,12 @@ const defaultProps = {
 };
 
 describe('NamespaceSelector', () => {
+  let t: (key: string) => string;
+
+  beforeAll(() => {
+    ({t} = renderHook(() => useTranslation('translations')).result.current);
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -30,13 +29,13 @@ describe('NamespaceSelector', () => {
     it('renders the namespace label', () => {
       render(<NamespaceSelector {...defaultProps} />);
 
-      expect(screen.getByText('editor.namespace')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.namespace'))).toBeInTheDocument();
     });
 
     it('renders the helper text', () => {
       render(<NamespaceSelector {...defaultProps} />);
 
-      expect(screen.getByText('editor.namespace.helperText')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.namespace.helperText'))).toBeInTheDocument();
     });
 
     it('renders with the current value displayed in the input', () => {
diff --git a/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationEditorCard.test.tsx b/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationEditorCard.test.tsx
index 1b9a278deb..b0aa8d4c2f 100644
--- a/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationEditorCard.test.tsx
+++ b/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationEditorCard.test.tsx
@@ -2,18 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import userEvent from '@testing-library/user-event';
-import {render, screen} from '@thunderid/test-utils';
-import {describe, expect, it, vi, beforeEach} from 'vitest';
+import {render, renderHook, screen} from '@thunderid/test-utils';
+import {useTranslation} from 'react-i18next';
+import {describe, expect, it, vi, beforeAll, beforeEach} from 'vitest';
 import TranslationEditorCard from '@/components/edit-translation/TranslationEditorCard';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string) => key}),
-  };
-});
-
 vi.mock('@/components/edit-translation/TranslationFieldsView', () => ({
   default: () => <div data-testid="fields-view" />,
 }));
@@ -39,6 +32,12 @@ const defaultProps = {
 };
 
 describe('TranslationEditorCard', () => {
+  let t: (key: string) => string;
+
+  beforeAll(() => {
+    ({t} = renderHook(() => useTranslation('translations')).result.current);
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -48,7 +47,7 @@ describe('TranslationEditorCard', () => {
       render(<TranslationEditorCard {...defaultProps} isLoading />);
 
       expect(screen.getByRole('progressbar')).toBeInTheDocument();
-      expect(screen.getByText('editor.loading')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.loading'))).toBeInTheDocument();
     });
 
     it('hides the spinner once loading is complete', () => {
@@ -62,7 +61,7 @@ describe('TranslationEditorCard', () => {
     it('renders the Fields and Raw JSON tabs', () => {
       render(<TranslationEditorCard {...defaultProps} />);
 
-      expect(screen.getByRole('tab', {name: 'editor.textFields'})).toBeInTheDocument();
+      expect(screen.getByRole('tab', {name: t('editor.textFields')})).toBeInTheDocument();
       expect(screen.getByRole('tab', {name: 'JSON'})).toBeInTheDocument();
     });
 
@@ -88,7 +87,7 @@ describe('TranslationEditorCard', () => {
     it('renders the search input in fields view', () => {
       render(<TranslationEditorCard {...defaultProps} editView="fields" />);
 
-      expect(screen.getByPlaceholderText('editor.searchPlaceholder')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText(t('editor.searchPlaceholder'))).toBeInTheDocument();
     });
 
     it('calls onSearchChange when text is typed in the search input', async () => {
@@ -99,7 +98,7 @@ describe('TranslationEditorCard', () => {
 
       // The search input is controlled (value={search} prop stays ''), so
       // each keystroke fires onSearchChange with just that character.
-      await user.type(screen.getByPlaceholderText('editor.searchPlaceholder'), 's');
+      await user.type(screen.getByPlaceholderText(t('editor.searchPlaceholder')), 's');
 
       expect(onSearchChange).toHaveBeenCalledWith('s');
     });
@@ -127,7 +126,7 @@ describe('TranslationEditorCard', () => {
     it('does not render the search input in JSON view', () => {
       render(<TranslationEditorCard {...defaultProps} editView="json" />);
 
-      expect(screen.queryByPlaceholderText('editor.searchPlaceholder')).not.toBeInTheDocument();
+      expect(screen.queryByPlaceholderText(t('editor.searchPlaceholder'))).not.toBeInTheDocument();
     });
   });
 
diff --git a/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationFieldsView.test.tsx b/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationFieldsView.test.tsx
index a9a1e02f16..286a5e5a92 100644
--- a/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationFieldsView.test.tsx
+++ b/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationFieldsView.test.tsx
@@ -2,18 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import userEvent from '@testing-library/user-event';
-import {render, screen, fireEvent} from '@thunderid/test-utils';
-import {describe, expect, it, vi, beforeEach} from 'vitest';
+import {render, renderHook, screen, fireEvent} from '@thunderid/test-utils';
+import {useTranslation} from 'react-i18next';
+import {describe, expect, it, vi, beforeAll, beforeEach} from 'vitest';
 import TranslationFieldsView from '@/components/edit-translation/TranslationFieldsView';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string) => key}),
-  };
-});
-
 const sampleValues = {
   'actions.save': 'Save',
   'actions.cancel': 'Cancel',
@@ -30,6 +23,12 @@ const defaultProps = {
 };
 
 describe('TranslationFieldsView', () => {
+  let t: (key: string) => string;
+
+  beforeAll(() => {
+    ({t} = renderHook(() => useTranslation('translations')).result.current);
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -53,7 +52,7 @@ describe('TranslationFieldsView', () => {
     it('shows no-keys message when localValues is empty', () => {
       render(<TranslationFieldsView {...defaultProps} localValues={{}} serverValues={{}} />);
 
-      expect(screen.getByText('editor.noKeys')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.noKeys'))).toBeInTheDocument();
     });
   });
 
@@ -82,7 +81,7 @@ describe('TranslationFieldsView', () => {
     it('shows no-results message when search matches nothing', () => {
       render(<TranslationFieldsView {...defaultProps} search="nonexistent" />);
 
-      expect(screen.getByText('editor.noResults')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.noResults'))).toBeInTheDocument();
     });
   });
 
@@ -157,23 +156,23 @@ describe('TranslationFieldsView', () => {
     it('shows the Add Key button when isCustomNamespace is true', () => {
       render(<TranslationFieldsView {...defaultProps} isCustomNamespace />);
 
-      expect(screen.getByText('editor.addKey')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.addKey'))).toBeInTheDocument();
     });
 
     it('does not show the Add Key button when isCustomNamespace is false', () => {
       render(<TranslationFieldsView {...defaultProps} isCustomNamespace={false} />);
 
-      expect(screen.queryByText('editor.addKey')).not.toBeInTheDocument();
+      expect(screen.queryByText(t('editor.addKey'))).not.toBeInTheDocument();
     });
 
     it('shows the add key form when the Add Key button is clicked', async () => {
       const user = userEvent.setup();
       render(<TranslationFieldsView {...defaultProps} isCustomNamespace />);
 
-      await user.click(screen.getByText('editor.addKey'));
+      await user.click(screen.getByText(t('editor.addKey')));
 
-      expect(screen.getByLabelText('editor.addKey.keyLabel')).toBeInTheDocument();
-      expect(screen.getByLabelText('editor.addKey.valueLabel')).toBeInTheDocument();
+      expect(screen.getByLabelText(t('editor.addKey.keyLabel'))).toBeInTheDocument();
+      expect(screen.getByLabelText(t('editor.addKey.valueLabel'))).toBeInTheDocument();
     });
 
     it('calls onChange and closes the form when a new key is submitted', async () => {
@@ -181,58 +180,58 @@ describe('TranslationFieldsView', () => {
       const user = userEvent.setup();
       render(<TranslationFieldsView {...defaultProps} isCustomNamespace onChange={onChange} />);
 
-      await user.click(screen.getByText('editor.addKey'));
+      await user.click(screen.getByText(t('editor.addKey')));
 
-      fireEvent.change(screen.getByPlaceholderText('editor.addKey.keyPlaceholder'), {
+      fireEvent.change(screen.getByPlaceholderText(t('editor.addKey.keyPlaceholder')), {
         target: {value: 'new.key'},
       });
-      fireEvent.change(screen.getByPlaceholderText('editor.addKey.valuePlaceholder'), {
+      fireEvent.change(screen.getByPlaceholderText(t('editor.addKey.valuePlaceholder')), {
         target: {value: 'New Value'},
       });
 
-      await user.click(screen.getByText('editor.addKey.submit'));
+      await user.click(screen.getByText(t('editor.addKey.submit')));
 
       expect(onChange).toHaveBeenCalledWith('new.key', 'New Value');
       // Form should be closed, Add Key button visible again
-      expect(screen.getByText('editor.addKey')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.addKey'))).toBeInTheDocument();
     });
 
     it('closes the form and clears inputs when Cancel is clicked', async () => {
       const user = userEvent.setup();
       render(<TranslationFieldsView {...defaultProps} isCustomNamespace />);
 
-      await user.click(screen.getByText('editor.addKey'));
+      await user.click(screen.getByText(t('editor.addKey')));
 
-      fireEvent.change(screen.getByPlaceholderText('editor.addKey.keyPlaceholder'), {
+      fireEvent.change(screen.getByPlaceholderText(t('editor.addKey.keyPlaceholder')), {
         target: {value: 'some.key'},
       });
 
-      await user.click(screen.getByText('editor.addKey.cancel'));
+      await user.click(screen.getByRole('button', {name: t('editor.addKey.cancel')}));
 
       // Form should be closed, Add Key button visible again
-      expect(screen.getByText('editor.addKey')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.addKey'))).toBeInTheDocument();
     });
 
     it('shows a duplicate key error when the entered key already exists', async () => {
       const user = userEvent.setup();
       render(<TranslationFieldsView {...defaultProps} isCustomNamespace />);
 
-      await user.click(screen.getByText('editor.addKey'));
+      await user.click(screen.getByText(t('editor.addKey')));
 
-      fireEvent.change(screen.getByPlaceholderText('editor.addKey.keyPlaceholder'), {
+      fireEvent.change(screen.getByPlaceholderText(t('editor.addKey.keyPlaceholder')), {
         target: {value: 'actions.save'},
       });
 
-      expect(screen.getByText('editor.addKey.duplicateKey')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.addKey.duplicateKey'))).toBeInTheDocument();
     });
 
     it('disables the submit button when the key is empty', async () => {
       const user = userEvent.setup();
       render(<TranslationFieldsView {...defaultProps} isCustomNamespace />);
 
-      await user.click(screen.getByText('editor.addKey'));
+      await user.click(screen.getByText(t('editor.addKey')));
 
-      const submitButton = screen.getByText('editor.addKey.submit').closest('button');
+      const submitButton = screen.getByText(t('editor.addKey.submit')).closest('button');
       expect(submitButton).toBeDisabled();
     });
 
@@ -240,13 +239,13 @@ describe('TranslationFieldsView', () => {
       const user = userEvent.setup();
       render(<TranslationFieldsView {...defaultProps} isCustomNamespace />);
 
-      await user.click(screen.getByText('editor.addKey'));
+      await user.click(screen.getByText(t('editor.addKey')));
 
-      fireEvent.change(screen.getByPlaceholderText('editor.addKey.keyPlaceholder'), {
+      fireEvent.change(screen.getByPlaceholderText(t('editor.addKey.keyPlaceholder')), {
         target: {value: 'actions.save'},
       });
 
-      const submitButton = screen.getByText('editor.addKey.submit').closest('button');
+      const submitButton = screen.getByText(t('editor.addKey.submit')).closest('button');
       expect(submitButton).toBeDisabled();
     });
   });
diff --git a/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationJsonEditor.test.tsx b/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationJsonEditor.test.tsx
index 1fd9454244..d0a795ddca 100644
--- a/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationJsonEditor.test.tsx
+++ b/frontend/packages/configure-translations/src/components/edit-translation/__tests__/TranslationJsonEditor.test.tsx
@@ -1,18 +1,11 @@
 // Copyright 2026 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import {render, screen, act, fireEvent} from '@thunderid/test-utils';
-import {describe, expect, it, vi, beforeEach, afterEach} from 'vitest';
+import {render, renderHook, screen, act, fireEvent} from '@thunderid/test-utils';
+import {useTranslation} from 'react-i18next';
+import {describe, expect, it, vi, beforeAll, beforeEach, afterEach} from 'vitest';
 import TranslationJsonEditor from '@/components/edit-translation/TranslationJsonEditor';
 
-vi.mock('react-i18next', async () => {
-  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
-  return {
-    ...actual,
-    useTranslation: () => ({t: (key: string) => key}),
-  };
-});
-
 // Monaco Editor is not available in jsdom; replace it with a plain textarea
 // that mirrors the same value/onChange contract.
 vi.mock('@monaco-editor/react', () => ({
@@ -36,6 +29,12 @@ function changeEditor(editor: HTMLElement, value: string) {
 }
 
 describe('TranslationJsonEditor', () => {
+  let t: (key: string) => string;
+
+  beforeAll(() => {
+    ({t} = renderHook(() => useTranslation('translations')).result.current);
+  });
+
   beforeEach(() => {
     vi.clearAllMocks();
     vi.useFakeTimers();
@@ -74,7 +73,7 @@ describe('TranslationJsonEditor', () => {
         />,
       );
 
-      expect(screen.queryByText('editor.jsonInvalid')).not.toBeInTheDocument();
+      expect(screen.queryByText(t('editor.jsonInvalid'))).not.toBeInTheDocument();
     });
   });
 
@@ -110,7 +109,7 @@ describe('TranslationJsonEditor', () => {
 
       changeEditor(screen.getByTestId('monaco-editor'), '{"key": "value"}');
 
-      expect(screen.queryByText('editor.jsonInvalid')).not.toBeInTheDocument();
+      expect(screen.queryByText(t('editor.jsonInvalid'))).not.toBeInTheDocument();
     });
   });
 
@@ -128,7 +127,7 @@ describe('TranslationJsonEditor', () => {
 
       changeEditor(screen.getByTestId('monaco-editor'), '{not valid json');
 
-      expect(screen.getByText('editor.jsonInvalid')).toBeInTheDocument();
+      expect(screen.getByText(t('editor.jsonInvalid'))).toBeInTheDocument();
     });
 
     it('does not call onChange while JSON is invalid', () => {
@@ -162,7 +161,7 @@ describe('TranslationJsonEditor', () => {
 
       changeEditor(screen.getByTestId('monaco-editor'), '');
 
-      expect(screen.queryByText('editor.jsonInvalid')).not.toBeInTheDocument();
+      expect(screen.queryByText(t('editor.jsonInvalid'))).not.toBeInTheDocument();
     });
   });
 
diff --git a/frontend/packages/configure-translations/src/pages/__tests__/TranslationCreatePage.test.tsx b/frontend/packages/configure-translations/src/pages/__tests__/TranslationCreatePage.test.tsx
index 54410a6672..90d37d9377 100644
--- a/frontend/packages/configure-translations/src/pages/__tests__/TranslationCreatePage.test.tsx
+++ b/frontend/packages/configure-translations/src/pages/__tests__/TranslationCreatePage.test.tsx
@@ -102,7 +102,7 @@ vi.mock('@/contexts/TranslationCreate/useTranslationCreate', () => ({
 }));
 
 describe('TranslationCreatePage', () => {
-  let t: (key: string) => string;
+  let t: (key: string, options?: Record<string, unknown>) => string;
 
   beforeAll(() => {
     ({t} = renderHook(() => useTranslation()).result.current);
@@ -123,7 +123,7 @@ describe('TranslationCreatePage', () => {
     it('renders the current step breadcrumb label', () => {
       render(<TranslationCreatePage />);
 
-      expect(screen.getByText('language.create.steps.country')).toBeInTheDocument();
+      expect(screen.getByText(t('translations:language.create.steps.country'))).toBeInTheDocument();
     });
 
     it('renders the SelectCountry step on mount', () => {
@@ -152,7 +152,9 @@ describe('TranslationCreatePage', () => {
 
       render(<TranslationCreatePage />);
 
-      expect(screen.getByText('Create')).toBeInTheDocument();
+      expect(
+        screen.getByText(t('translations:language.create.createButton', {defaultValue: 'Create'})),
+      ).toBeInTheDocument();
     });
 
     it('renders the SelectLanguage step when currentStep is LANGUAGE', () => {
@@ -292,7 +294,9 @@ describe('TranslationCreatePage', () => {
 
       mockReviewLocaleCode.mock.calls[0][0].onReadyChange(true);
 
-      expect(screen.getByText('Create').closest('button')).not.toBeDisabled();
+      expect(
+        screen.getByText(t('translations:language.create.createButton', {defaultValue: 'Create'})).closest('button'),
+      ).not.toBeDisabled();
     });
   });
 
@@ -467,7 +471,7 @@ describe('TranslationCreatePage', () => {
       const user = userEvent.setup();
       render(<TranslationCreatePage />);
 
-      await user.click(screen.getByText('Create'));
+      await user.click(screen.getByText(t('translations:language.create.createButton', {defaultValue: 'Create'})));
 
       expect(setIsCreating).toHaveBeenCalledWith(true);
       expect(mockRefetch).toHaveBeenCalled();
@@ -503,7 +507,7 @@ describe('TranslationCreatePage', () => {
       const user = userEvent.setup();
       render(<TranslationCreatePage />);
 
-      await user.click(screen.getByText('Create'));
+      await user.click(screen.getByText(t('translations:language.create.createButton', {defaultValue: 'Create'})));
 
       await vi.waitFor(() => {
         expect(setError).toHaveBeenCalledWith('Failed to add language. Please try again.');
@@ -536,7 +540,7 @@ describe('TranslationCreatePage', () => {
       const user = userEvent.setup();
       render(<TranslationCreatePage />);
 
-      await user.click(screen.getByText('Create'));
+      await user.click(screen.getByText(t('translations:language.create.createButton', {defaultValue: 'Create'})));
 
       await vi.waitFor(() => {
         expect(setError).toHaveBeenCalledWith('Failed to add language. Please try again.');
@@ -563,7 +567,7 @@ describe('TranslationCreatePage', () => {
       const user = userEvent.setup();
       render(<TranslationCreatePage />);
 
-      await user.click(screen.getByText('Create'));
+      await user.click(screen.getByText(t('translations:language.create.createButton', {defaultValue: 'Create'})));
 
       await vi.waitFor(() => {
         expect(mockNavigate).toHaveBeenCalledWith('/translations/fr-FR');
@@ -586,7 +590,7 @@ describe('TranslationCreatePage', () => {
       const user = userEvent.setup();
       render(<TranslationCreatePage />);
 
-      await user.click(screen.getByText('Create'));
+      await user.click(screen.getByText(t('translations:language.create.createButton', {defaultValue: 'Create'})));
 
       await vi.waitFor(() => {
         expect(mockRefetch).toHaveBeenCalled();
@@ -606,7 +610,7 @@ describe('TranslationCreatePage', () => {
       const user = userEvent.setup();
       render(<TranslationCreatePage />);
 
-      await user.click(screen.getByText('Create'));
+      await user.click(screen.getByText(t('translations:language.create.createButton', {defaultValue: 'Create'})));
 
       expect(mockRefetch).not.toHaveBeenCalled();
     });
@@ -626,7 +630,7 @@ describe('TranslationCreatePage', () => {
       render(<TranslationCreatePage />);
 
       // Click on the first breadcrumb (COUNTRY)
-      await user.click(screen.getByText('language.create.steps.country'));
+      await user.click(screen.getByText(t('translations:language.create.steps.country')));
 
       expect(setCurrentStep).toHaveBeenCalledWith(TranslationCreateFlowStep.COUNTRY);
     });
diff --git a/frontend/packages/configure-translations/src/pages/__tests__/TranslationsListPage.test.tsx b/frontend/packages/configure-translations/src/pages/__tests__/TranslationsListPage.test.tsx
index 4c78851aad..d0a579a49c 100644
--- a/frontend/packages/configure-translations/src/pages/__tests__/TranslationsListPage.test.tsx
+++ b/frontend/packages/configure-translations/src/pages/__tests__/TranslationsListPage.test.tsx
@@ -108,13 +108,13 @@ describe('TranslationsListPage', () => {
     it('renders the page title', () => {
       render(<TranslationsListPage />);
 
-      expect(screen.getByText('page.title')).toBeInTheDocument();
+      expect(screen.getByText(t('translations:page.title'))).toBeInTheDocument();
     });
 
     it('renders the page subtitle', () => {
       render(<TranslationsListPage />);
 
-      expect(screen.getByText('page.subtitle')).toBeInTheDocument();
+      expect(screen.getByText(t('translations:page.subtitle'))).toBeInTheDocument();
     });
 
     it('renders the Add Language button', () => {
diff --git a/frontend/packages/configure-verifiable-credentials/.editorconfig b/frontend/packages/configure-verifiable-credentials/.editorconfig
new file mode 100644
index 0000000000..54a161112c
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/.editorconfig
@@ -0,0 +1 @@
+../../.editorconfig
diff --git a/frontend/packages/configure-verifiable-credentials/.gitignore b/frontend/packages/configure-verifiable-credentials/.gitignore
new file mode 100644
index 0000000000..0ccb8df8de
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/.gitignore
@@ -0,0 +1,141 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+.output
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vite/
diff --git a/frontend/packages/configure-verifiable-credentials/.prettierignore b/frontend/packages/configure-verifiable-credentials/.prettierignore
new file mode 100644
index 0000000000..99b0b518a7
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/.prettierignore
@@ -0,0 +1,4 @@
+/dist
+/build
+/node_modules
+/coverage
diff --git a/frontend/packages/configure-verifiable-credentials/eslint.config.js b/frontend/packages/configure-verifiable-credentials/eslint.config.js
new file mode 100644
index 0000000000..f5fd8bcdcc
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/eslint.config.js
@@ -0,0 +1,11 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import thunderIdPlugin from '@thunderid/eslint-plugin';
+
+export default [
+  {
+    ignores: ['dist/**', 'build/**', 'node_modules/**', 'coverage/**'],
+  },
+  ...thunderIdPlugin.configs.react,
+];
diff --git a/frontend/packages/configure-verifiable-credentials/package.json b/frontend/packages/configure-verifiable-credentials/package.json
new file mode 100644
index 0000000000..c27fa95888
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/package.json
@@ -0,0 +1,108 @@
+{
+  "name": "@thunderid/configure-verifiable-credentials",
+  "version": "0.0.0",
+  "description": "verifiable-credentials feature for ⚡️ ThunderID applications",
+  "keywords": [
+    "thunderid",
+    "configure",
+    "verifiable-credentials",
+    "react",
+    "feature"
+  ],
+  "homepage": "https://github.com/thunder-id/thunderid/tree/main/frontend/packages/configure-verifiable-credentials#readme",
+  "bugs": {
+    "url": "https://github.com/thunder-id/thunderid/issues"
+  },
+  "author": "The ThunderID Authors",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thunder-id/thunderid",
+    "directory": "frontend/packages/configure-verifiable-credentials"
+  },
+  "scripts": {
+    "build": "pnpm clean:dist && rolldown -c rolldown.config.js && tsc -p tsconfig.lib.json --emitDeclarationOnly --outDir dist",
+    "clean": "pnpm clean:node_modules && pnpm clean:dist",
+    "clean:dist": "rimraf dist",
+    "clean:node_modules": "rimraf node_modules",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run --passWithNoTests",
+    "test:coverage": "vitest run --coverage --passWithNoTests",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.lib.json"
+  },
+  "devDependencies": {
+    "@playwright/test": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@testing-library/user-event": "catalog:",
+    "@thunderid/components": "workspace:^",
+    "@thunderid/configure-organization-units": "workspace:^",
+    "@thunderid/contexts": "workspace:^",
+    "@thunderid/design": "workspace:^",
+    "@thunderid/eslint-plugin": "workspace:^",
+    "@thunderid/hooks": "workspace:^",
+    "@thunderid/logger": "workspace:^",
+    "@thunderid/prettier-config": "workspace:^",
+    "@thunderid/react": "catalog:",
+    "@thunderid/test-utils": "workspace:^",
+    "@thunderid/utils": "workspace:^",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@vitest/browser-playwright": "catalog:",
+    "@vitest/coverage-istanbul": "catalog:",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
+    "eslint": "catalog:",
+    "prettier": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-i18next": "catalog:",
+    "react-router": "catalog:",
+    "rimraf": "catalog:",
+    "rolldown": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@tanstack/react-query": "catalog:",
+    "@thunderid/components": "workspace:^",
+    "@thunderid/configure-organization-units": "workspace:^",
+    "@thunderid/contexts": "workspace:^",
+    "@thunderid/design": "workspace:^",
+    "@thunderid/hooks": "workspace:^",
+    "@thunderid/logger": "workspace:^",
+    "@thunderid/react": "catalog:",
+    "@thunderid/utils": "workspace:^",
+    "@wso2/oxygen-ui": "catalog:",
+    "@wso2/oxygen-ui-icons-react": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-i18next": "catalog:",
+    "react-router": "catalog:"
+  }
+}
diff --git a/frontend/packages/configure-verifiable-credentials/prettier.config.js b/frontend/packages/configure-verifiable-credentials/prettier.config.js
new file mode 100644
index 0000000000..f054cd507c
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/prettier.config.js
@@ -0,0 +1,6 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import config from '@thunderid/prettier-config';
+
+export default config;
diff --git a/frontend/packages/configure-verifiable-credentials/rolldown.config.js b/frontend/packages/configure-verifiable-credentials/rolldown.config.js
new file mode 100644
index 0000000000..a4911bb7fd
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/rolldown.config.js
@@ -0,0 +1,49 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {readFileSync} from 'fs';
+import {join} from 'path';
+import {defineConfig} from 'rolldown';
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
+
+const external = [
+  ...Object.keys(pkg.dependencies || {}),
+  ...Object.keys(pkg.peerDependencies || {}),
+  'react/jsx-runtime',
+  // Needed to avoid hook ordering issues.
+  /^@mui\//,
+];
+
+const commonOptions = {
+  input: join('src', 'index.ts'),
+  external,
+  target: 'es2020',
+  sourcemap: true,
+};
+
+export default defineConfig([
+  // ✅ ESM build (for browsers/bundlers)
+  {
+    ...commonOptions,
+    platform: 'browser',
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+  // ✅ CommonJS build (for Node/SSR/testing)
+  {
+    ...commonOptions,
+    platform: 'node',
+    output: {
+      dir: join('dist', 'cjs'),
+      entryFileNames: '[name].cjs',
+      format: 'cjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+  },
+]);
diff --git a/frontend/apps/console/src/features/verifiable-credentials/api/useCreateCredentialOffer.ts b/frontend/packages/configure-verifiable-credentials/src/api/useCreateCredentialOffer.ts
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/api/useCreateCredentialOffer.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useCreateCredentialOffer.ts
diff --git a/frontend/apps/console/src/features/verifiable-credentials/api/useCreateVerifiableCredential.ts b/frontend/packages/configure-verifiable-credentials/src/api/useCreateVerifiableCredential.ts
similarity index 98%
rename from frontend/apps/console/src/features/verifiable-credentials/api/useCreateVerifiableCredential.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useCreateVerifiableCredential.ts
index 106fef5e40..148b6046ae 100644
--- a/frontend/apps/console/src/features/verifiable-credentials/api/useCreateVerifiableCredential.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/api/useCreateVerifiableCredential.ts
@@ -6,7 +6,7 @@ import {useConfig, useToast} from '@thunderid/contexts';
 import {useThunderID} from '@thunderid/react';
 import {useTranslation} from 'react-i18next';
 import VerifiableCredentialQueryKeys from '../constants/vc-query-keys';
-import type {CreateVerifiableCredentialRequest} from '../models/requests';
+import type {CreateVerifiableCredentialRequest} from '../models/credential-requests';
 import type {VerifiableCredential} from '../models/vc';
 
 /**
diff --git a/frontend/apps/console/src/features/verifiable-presentations/api/useCreateVerifiablePresentation.ts b/frontend/packages/configure-verifiable-credentials/src/api/useCreateVerifiablePresentation.ts
similarity index 89%
rename from frontend/apps/console/src/features/verifiable-presentations/api/useCreateVerifiablePresentation.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useCreateVerifiablePresentation.ts
index 5f0e463dcd..28ec358335 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/api/useCreateVerifiablePresentation.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/api/useCreateVerifiablePresentation.ts
@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useMutation, useQueryClient, type UseMutationResult} from '@tanstack/react-query';
-import {VerifiablePresentationQueryKeys} from '@thunderid/configure-verifiable-presentations';
-import type {VerifiablePresentation} from '@thunderid/configure-verifiable-presentations';
 import {useConfig, useToast} from '@thunderid/contexts';
 import {useThunderID} from '@thunderid/react';
 import {useTranslation} from 'react-i18next';
-import type {CreateVerifiablePresentationRequest} from '../models/requests';
+import VerifiablePresentationQueryKeys from '../constants/vp-query-keys';
+import type {CreateVerifiablePresentationRequest} from '../models/presentation-requests';
+import type {VerifiablePresentation} from '../models/vp';
 
 /**
  * Creates a new OpenID4VP presentation definition.
diff --git a/frontend/apps/console/src/features/verifiable-credentials/api/useDeleteVerifiableCredential.ts b/frontend/packages/configure-verifiable-credentials/src/api/useDeleteVerifiableCredential.ts
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/api/useDeleteVerifiableCredential.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useDeleteVerifiableCredential.ts
diff --git a/frontend/apps/console/src/features/verifiable-presentations/api/useDeleteVerifiablePresentation.ts b/frontend/packages/configure-verifiable-credentials/src/api/useDeleteVerifiablePresentation.ts
similarity index 93%
rename from frontend/apps/console/src/features/verifiable-presentations/api/useDeleteVerifiablePresentation.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useDeleteVerifiablePresentation.ts
index c05bcb574f..8c3e52245a 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/api/useDeleteVerifiablePresentation.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/api/useDeleteVerifiablePresentation.ts
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useMutation, useQueryClient, type UseMutationResult} from '@tanstack/react-query';
-import {VerifiablePresentationQueryKeys} from '@thunderid/configure-verifiable-presentations';
 import {useConfig, useToast} from '@thunderid/contexts';
 import {useThunderID} from '@thunderid/react';
 import {useTranslation} from 'react-i18next';
+import VerifiablePresentationQueryKeys from '../constants/vp-query-keys';
 
 /**
  * Deletes an OpenID4VP presentation definition by id.
diff --git a/frontend/apps/console/src/features/verifiable-presentations/api/useGetTrustAnchors.ts b/frontend/packages/configure-verifiable-credentials/src/api/useGetTrustAnchors.ts
similarity index 84%
rename from frontend/apps/console/src/features/verifiable-presentations/api/useGetTrustAnchors.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useGetTrustAnchors.ts
index 7103b16e13..8e2efa28f8 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/api/useGetTrustAnchors.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/api/useGetTrustAnchors.ts
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useQuery, type UseQueryResult} from '@tanstack/react-query';
-import {VerifiablePresentationQueryKeys} from '@thunderid/configure-verifiable-presentations';
-import type {TrustAnchor} from '@thunderid/configure-verifiable-presentations';
 import {useConfig} from '@thunderid/contexts';
 import {useThunderID} from '@thunderid/react';
+import VerifiablePresentationQueryKeys from '../constants/vp-query-keys';
+import type {TrustAnchor} from '../models/vp';
 
 /**
  * Fetches the trust anchors (issuer trust) registered with the server.
diff --git a/frontend/apps/console/src/features/verifiable-credentials/api/useGetVerifiableCredential.ts b/frontend/packages/configure-verifiable-credentials/src/api/useGetVerifiableCredential.ts
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/api/useGetVerifiableCredential.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useGetVerifiableCredential.ts
diff --git a/frontend/apps/console/src/features/verifiable-credentials/api/useGetVerifiableCredentials.ts b/frontend/packages/configure-verifiable-credentials/src/api/useGetVerifiableCredentials.ts
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/api/useGetVerifiableCredentials.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useGetVerifiableCredentials.ts
diff --git a/frontend/apps/console/src/features/verifiable-presentations/api/useGetVerifiablePresentation.ts b/frontend/packages/configure-verifiable-credentials/src/api/useGetVerifiablePresentation.ts
similarity index 84%
rename from frontend/apps/console/src/features/verifiable-presentations/api/useGetVerifiablePresentation.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useGetVerifiablePresentation.ts
index bd5fd3fe08..393b578e7f 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/api/useGetVerifiablePresentation.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/api/useGetVerifiablePresentation.ts
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useQuery, type UseQueryResult} from '@tanstack/react-query';
-import {VerifiablePresentationQueryKeys} from '@thunderid/configure-verifiable-presentations';
-import type {VerifiablePresentation} from '@thunderid/configure-verifiable-presentations';
 import {useConfig} from '@thunderid/contexts';
 import {useThunderID} from '@thunderid/react';
+import VerifiablePresentationQueryKeys from '../constants/vp-query-keys';
+import type {VerifiablePresentation} from '../models/vp';
 
 /**
  * Fetches a single OpenID4VP presentation definition by id.
diff --git a/frontend/packages/configure-verifiable-presentations/src/api/useGetVerifiablePresentations.ts b/frontend/packages/configure-verifiable-credentials/src/api/useGetVerifiablePresentations.ts
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/src/api/useGetVerifiablePresentations.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useGetVerifiablePresentations.ts
diff --git a/frontend/apps/console/src/features/verifiable-presentations/api/useInitiateVerification.ts b/frontend/packages/configure-verifiable-credentials/src/api/useInitiateVerification.ts
similarity index 92%
rename from frontend/apps/console/src/features/verifiable-presentations/api/useInitiateVerification.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useInitiateVerification.ts
index f7656268e5..ae44ed95ae 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/api/useInitiateVerification.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/api/useInitiateVerification.ts
@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useMutation, type UseMutationResult} from '@tanstack/react-query';
-import type {InitiateVerificationResponse} from '@thunderid/configure-verifiable-presentations';
 import {useConfig} from '@thunderid/contexts';
 import {useThunderID} from '@thunderid/react';
+import type {InitiateVerificationResponse} from '../models/vp';
 
 /**
  * Initiates an OpenID4VP verification transaction for a presentation definition
diff --git a/frontend/apps/console/src/features/verifiable-credentials/api/useUpdateVerifiableCredential.ts b/frontend/packages/configure-verifiable-credentials/src/api/useUpdateVerifiableCredential.ts
similarity index 98%
rename from frontend/apps/console/src/features/verifiable-credentials/api/useUpdateVerifiableCredential.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useUpdateVerifiableCredential.ts
index 477881f11a..fe5d241cf8 100644
--- a/frontend/apps/console/src/features/verifiable-credentials/api/useUpdateVerifiableCredential.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/api/useUpdateVerifiableCredential.ts
@@ -6,7 +6,7 @@ import {useConfig, useToast} from '@thunderid/contexts';
 import {useThunderID} from '@thunderid/react';
 import {useTranslation} from 'react-i18next';
 import VerifiableCredentialQueryKeys from '../constants/vc-query-keys';
-import type {UpdateVerifiableCredentialRequest} from '../models/requests';
+import type {UpdateVerifiableCredentialRequest} from '../models/credential-requests';
 import type {VerifiableCredential} from '../models/vc';
 
 interface UpdateArgs {
diff --git a/frontend/apps/console/src/features/verifiable-presentations/api/useUpdateVerifiablePresentation.ts b/frontend/packages/configure-verifiable-credentials/src/api/useUpdateVerifiablePresentation.ts
similarity index 90%
rename from frontend/apps/console/src/features/verifiable-presentations/api/useUpdateVerifiablePresentation.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useUpdateVerifiablePresentation.ts
index 979ab7009a..38b713d783 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/api/useUpdateVerifiablePresentation.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/api/useUpdateVerifiablePresentation.ts
@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useMutation, useQueryClient, type UseMutationResult} from '@tanstack/react-query';
-import {VerifiablePresentationQueryKeys} from '@thunderid/configure-verifiable-presentations';
-import type {VerifiablePresentation} from '@thunderid/configure-verifiable-presentations';
 import {useConfig, useToast} from '@thunderid/contexts';
 import {useThunderID} from '@thunderid/react';
 import {useTranslation} from 'react-i18next';
-import type {UpdateVerifiablePresentationRequest} from '../models/requests';
+import VerifiablePresentationQueryKeys from '../constants/vp-query-keys';
+import type {UpdateVerifiablePresentationRequest} from '../models/presentation-requests';
+import type {VerifiablePresentation} from '../models/vp';
 
 interface UpdateArgs {
   id: string;
diff --git a/frontend/apps/console/src/features/verifiable-presentations/api/useVerificationStatus.ts b/frontend/packages/configure-verifiable-credentials/src/api/useVerificationStatus.ts
similarity index 93%
rename from frontend/apps/console/src/features/verifiable-presentations/api/useVerificationStatus.ts
rename to frontend/packages/configure-verifiable-credentials/src/api/useVerificationStatus.ts
index c544fcbcb8..ee5444a9d0 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/api/useVerificationStatus.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/api/useVerificationStatus.ts
@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {useQuery, type UseQueryResult} from '@tanstack/react-query';
-import type {VerificationStatusResponse} from '@thunderid/configure-verifiable-presentations';
 import {useConfig} from '@thunderid/contexts';
 import {useThunderID} from '@thunderid/react';
+import type {VerificationStatusResponse} from '../models/vp';
 
 const TERMINAL_STATUSES: ReadonlySet<string> = new Set(['COMPLETED', 'FAILED', 'EXPIRED']);
 
diff --git a/frontend/apps/console/src/features/verifiable-credentials/components/ClaimsEditor.tsx b/frontend/packages/configure-verifiable-credentials/src/components/CredentialClaimsEditor.tsx
similarity index 97%
rename from frontend/apps/console/src/features/verifiable-credentials/components/ClaimsEditor.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/CredentialClaimsEditor.tsx
index deba59c1ae..138298c719 100644
--- a/frontend/apps/console/src/features/verifiable-credentials/components/ClaimsEditor.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/components/CredentialClaimsEditor.tsx
@@ -17,7 +17,7 @@ import {
 import {Plus, Trash2} from '@wso2/oxygen-ui-icons-react';
 import {type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
-import {emptyClaimRow, type ClaimRow} from '../models/claims';
+import {emptyClaimRow, type ClaimRow} from '../models/credential-claims';
 
 export interface ClaimsEditorProps {
   claims: ClaimRow[];
diff --git a/frontend/apps/console/src/features/verifiable-credentials/components/CredentialOfferDialog.tsx b/frontend/packages/configure-verifiable-credentials/src/components/CredentialOfferDialog.tsx
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/components/CredentialOfferDialog.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/CredentialOfferDialog.tsx
diff --git a/frontend/apps/console/src/features/verifiable-presentations/components/ClaimsEditor.tsx b/frontend/packages/configure-verifiable-credentials/src/components/PresentationClaimsEditor.tsx
similarity index 99%
rename from frontend/apps/console/src/features/verifiable-presentations/components/ClaimsEditor.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/PresentationClaimsEditor.tsx
index 391d07b08c..c64c919b25 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/components/ClaimsEditor.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/components/PresentationClaimsEditor.tsx
@@ -20,7 +20,7 @@ import {
 import {Plus, Trash2} from '@wso2/oxygen-ui-icons-react';
 import {useState, type JSX, type KeyboardEvent} from 'react';
 import {useTranslation} from 'react-i18next';
-import {emptyClaimRow, type ClaimRequirement, type ClaimRow} from '../models/claims';
+import {emptyClaimRow, type ClaimRequirement, type ClaimRow} from '../models/presentation-claims';
 
 export interface ClaimsEditorProps {
   claims: ClaimRow[];
diff --git a/frontend/apps/console/src/features/verifiable-credentials/components/VerifiableCredentialDeleteDialog.tsx b/frontend/packages/configure-verifiable-credentials/src/components/VerifiableCredentialDeleteDialog.tsx
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/components/VerifiableCredentialDeleteDialog.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/VerifiableCredentialDeleteDialog.tsx
diff --git a/frontend/apps/console/src/features/verifiable-credentials/components/VerifiableCredentialForm.tsx b/frontend/packages/configure-verifiable-credentials/src/components/VerifiableCredentialForm.tsx
similarity index 99%
rename from frontend/apps/console/src/features/verifiable-credentials/components/VerifiableCredentialForm.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/VerifiableCredentialForm.tsx
index f3dc1912fa..b78f4288c3 100644
--- a/frontend/apps/console/src/features/verifiable-credentials/components/VerifiableCredentialForm.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/components/VerifiableCredentialForm.tsx
@@ -33,9 +33,9 @@ import {
   type SyntheticEvent,
 } from 'react';
 import {useTranslation} from 'react-i18next';
-import ClaimsEditor from './ClaimsEditor';
-import {claimRowsToRequest, credentialToClaimRows, type ClaimRow} from '../models/claims';
-import type {CreateVerifiableCredentialRequest} from '../models/requests';
+import ClaimsEditor from './CredentialClaimsEditor';
+import {claimRowsToRequest, credentialToClaimRows, type ClaimRow} from '../models/credential-claims';
+import type {CreateVerifiableCredentialRequest} from '../models/credential-requests';
 import type {VerifiableCredential} from '../models/vc';
 
 export interface VerifiableCredentialFormProps {
diff --git a/frontend/apps/console/src/features/verifiable-credentials/components/VerifiableCredentialsList.tsx b/frontend/packages/configure-verifiable-credentials/src/components/VerifiableCredentialsList.tsx
similarity index 96%
rename from frontend/apps/console/src/features/verifiable-credentials/components/VerifiableCredentialsList.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/VerifiableCredentialsList.tsx
index 3b0263c4fc..3def6965ff 100644
--- a/frontend/apps/console/src/features/verifiable-credentials/components/VerifiableCredentialsList.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/components/VerifiableCredentialsList.tsx
@@ -11,8 +11,8 @@ import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
 import CredentialOfferDialog from './CredentialOfferDialog';
 import VerifiableCredentialDeleteDialog from './VerifiableCredentialDeleteDialog';
-import RouteConfig from '../../../configs/RouteConfig';
 import useGetVerifiableCredentials from '../api/useGetVerifiableCredentials';
+import useVerifiableCredentialRoutes from '../hooks/useVerifiableCredentialRoutes';
 import type {VerifiableCredentialSummary} from '../models/vc';
 
 /**
@@ -23,6 +23,7 @@ export default function VerifiableCredentialsList(): JSX.Element {
   const {t} = useTranslation();
   const logger = useLogger('VerifiableCredentialsList');
   const dataGridLocaleText = useDataGridLocaleText();
+  const routes = useVerifiableCredentialRoutes();
 
   const {data, isLoading, error, refetch} = useGetVerifiableCredentials();
 
@@ -42,12 +43,12 @@ export default function VerifiableCredentialsList(): JSX.Element {
   const handleEditClick = useCallback(
     (id: string): void => {
       (async (): Promise<void> => {
-        await navigate(RouteConfig.verifiableCredentials.detail(id));
+        await navigate(routes.verifiableCredentials.detail(id));
       })().catch((_error: unknown) => {
         logger.error('Failed to navigate to credential configuration', {error: _error, id});
       });
     },
-    [navigate, logger],
+    [navigate, logger, routes],
   );
 
   const handleDeleteClick = useCallback((id: string): void => {
diff --git a/frontend/apps/console/src/features/verifiable-presentations/components/VerifiablePresentationDeleteDialog.tsx b/frontend/packages/configure-verifiable-credentials/src/components/VerifiablePresentationDeleteDialog.tsx
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-presentations/components/VerifiablePresentationDeleteDialog.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/VerifiablePresentationDeleteDialog.tsx
diff --git a/frontend/apps/console/src/features/verifiable-presentations/components/VerifiablePresentationForm.tsx b/frontend/packages/configure-verifiable-credentials/src/components/VerifiablePresentationForm.tsx
similarity index 99%
rename from frontend/apps/console/src/features/verifiable-presentations/components/VerifiablePresentationForm.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/VerifiablePresentationForm.tsx
index 926bc7f3c4..a34f922853 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/components/VerifiablePresentationForm.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/components/VerifiablePresentationForm.tsx
@@ -3,7 +3,6 @@
 
 import {QueryErrorNotice, SettingsCard, UnsavedChangesBar} from '@thunderid/components';
 import {OrganizationUnitTreePicker, useHasMultipleOUs} from '@thunderid/configure-organization-units';
-import type {TrustAnchor, VerifiablePresentation} from '@thunderid/configure-verifiable-presentations';
 import {
   Autocomplete,
   Box,
@@ -39,10 +38,11 @@ import {
   type SyntheticEvent,
 } from 'react';
 import {useTranslation} from 'react-i18next';
-import ClaimsEditor from './ClaimsEditor';
+import ClaimsEditor from './PresentationClaimsEditor';
 import useGetTrustAnchors from '../api/useGetTrustAnchors';
-import {claimRowsToRequest, definitionToClaimRows, type ClaimRow} from '../models/claims';
-import type {CreateVerifiablePresentationRequest} from '../models/requests';
+import {claimRowsToRequest, definitionToClaimRows, type ClaimRow} from '../models/presentation-claims';
+import type {CreateVerifiablePresentationRequest} from '../models/presentation-requests';
+import type {TrustAnchor, VerifiablePresentation} from '../models/vp';
 
 export interface VerifiablePresentationFormProps {
   initial?: VerifiablePresentation;
diff --git a/frontend/apps/console/src/features/verifiable-presentations/components/VerifiablePresentationsList.tsx b/frontend/packages/configure-verifiable-credentials/src/components/VerifiablePresentationsList.tsx
similarity index 94%
rename from frontend/apps/console/src/features/verifiable-presentations/components/VerifiablePresentationsList.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/VerifiablePresentationsList.tsx
index 281020d37c..7938baa9bb 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/components/VerifiablePresentationsList.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/components/VerifiablePresentationsList.tsx
@@ -2,8 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {QueryErrorNotice} from '@thunderid/components';
-import {useGetVerifiablePresentations} from '@thunderid/configure-verifiable-presentations';
-import type {VerifiablePresentationSummary} from '@thunderid/configure-verifiable-presentations';
 import {useDataGridLocaleText} from '@thunderid/hooks';
 import {useLogger} from '@thunderid/logger/react';
 import {IconButton, Typography, Tooltip, DataGrid, ListingTable} from '@wso2/oxygen-ui';
@@ -13,7 +11,9 @@ import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
 import VerifiablePresentationDeleteDialog from './VerifiablePresentationDeleteDialog';
 import VerificationDialog from './VerificationDialog';
-import RouteConfig from '../../../configs/RouteConfig';
+import useGetVerifiablePresentations from '../api/useGetVerifiablePresentations';
+import useVerifiableCredentialRoutes from '../hooks/useVerifiableCredentialRoutes';
+import type {VerifiablePresentationSummary} from '../models/vp';
 
 /**
  * DataGrid listing of OpenID4VP presentation definitions.
@@ -23,6 +23,7 @@ export default function VerifiablePresentationsList(): JSX.Element {
   const {t} = useTranslation();
   const logger = useLogger('VerifiablePresentationsList');
   const dataGridLocaleText = useDataGridLocaleText();
+  const routes = useVerifiableCredentialRoutes();
 
   // Resolves an error through the `verifiable-presentations` catalog. `t` defaults to the `common`
   // namespace, so this forwards explicit `ns:` prefixes unchanged and prefixes bare keys, per
@@ -42,12 +43,12 @@ export default function VerifiablePresentationsList(): JSX.Element {
   const handleEditClick = useCallback(
     (id: string): void => {
       (async (): Promise<void> => {
-        await navigate(RouteConfig.verifiablePresentations.detail(id));
+        await navigate(routes.verifiablePresentations.detail(id));
       })().catch((_error: unknown) => {
         logger.error('Failed to navigate to presentation definition', {error: _error, id});
       });
     },
-    [navigate, logger],
+    [navigate, logger, routes],
   );
 
   const handleDeleteClick = useCallback((id: string): void => {
diff --git a/frontend/apps/console/src/features/verifiable-presentations/components/VerificationDialog.tsx b/frontend/packages/configure-verifiable-credentials/src/components/VerificationDialog.tsx
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-presentations/components/VerificationDialog.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/VerificationDialog.tsx
diff --git a/frontend/apps/console/src/features/verifiable-credentials/components/create-verifiable-credential/ConfigureName.tsx b/frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-credential/ConfigureName.tsx
similarity index 98%
rename from frontend/apps/console/src/features/verifiable-credentials/components/create-verifiable-credential/ConfigureName.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-credential/ConfigureName.tsx
index 657b00f194..a52722b8dc 100644
--- a/frontend/apps/console/src/features/verifiable-credentials/components/create-verifiable-credential/ConfigureName.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-credential/ConfigureName.tsx
@@ -7,7 +7,7 @@ import {Stack, TextField, FormControl, FormLabel, Typography} from '@wso2/oxygen
 import type {ChangeEvent, JSX} from 'react';
 import {useEffect} from 'react';
 import {useTranslation} from 'react-i18next';
-import deriveHandle from '@/lib/deriveHandle';
+import deriveHandle from '../../utils/deriveHandle';
 
 export interface ConfigureNameProps {
   name: string;
diff --git a/frontend/apps/console/src/features/verifiable-credentials/components/create-verifiable-credential/__tests__/ConfigureName.test.tsx b/frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-credential/__tests__/ConfigureName.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/components/create-verifiable-credential/__tests__/ConfigureName.test.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-credential/__tests__/ConfigureName.test.tsx
diff --git a/frontend/apps/console/src/features/verifiable-presentations/components/create-verifiable-presentation/ConfigureName.tsx b/frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-presentation/ConfigureName.tsx
similarity index 98%
rename from frontend/apps/console/src/features/verifiable-presentations/components/create-verifiable-presentation/ConfigureName.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-presentation/ConfigureName.tsx
index 95ca4270fd..272813174d 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/components/create-verifiable-presentation/ConfigureName.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-presentation/ConfigureName.tsx
@@ -7,7 +7,7 @@ import {Stack, TextField, FormControl, FormLabel, Typography} from '@wso2/oxygen
 import type {ChangeEvent, JSX} from 'react';
 import {useEffect} from 'react';
 import {useTranslation} from 'react-i18next';
-import deriveHandle from '@/lib/deriveHandle';
+import deriveHandle from '../../utils/deriveHandle';
 
 export interface ConfigureNameProps {
   name: string;
diff --git a/frontend/apps/console/src/features/verifiable-presentations/components/create-verifiable-presentation/__tests__/ConfigureName.test.tsx b/frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-presentation/__tests__/ConfigureName.test.tsx
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-presentations/components/create-verifiable-presentation/__tests__/ConfigureName.test.tsx
rename to frontend/packages/configure-verifiable-credentials/src/components/create-verifiable-presentation/__tests__/ConfigureName.test.tsx
diff --git a/frontend/apps/console/src/features/verifiable-credentials/constants/vc-query-keys.ts b/frontend/packages/configure-verifiable-credentials/src/constants/vc-query-keys.ts
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/constants/vc-query-keys.ts
rename to frontend/packages/configure-verifiable-credentials/src/constants/vc-query-keys.ts
diff --git a/frontend/packages/configure-verifiable-presentations/src/constants/vp-query-keys.ts b/frontend/packages/configure-verifiable-credentials/src/constants/vp-query-keys.ts
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/src/constants/vp-query-keys.ts
rename to frontend/packages/configure-verifiable-credentials/src/constants/vp-query-keys.ts
diff --git a/frontend/packages/configure-verifiable-credentials/src/hooks/useVerifiableCredentialRoutes.ts b/frontend/packages/configure-verifiable-credentials/src/hooks/useVerifiableCredentialRoutes.ts
new file mode 100644
index 0000000000..4af581f2a1
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/src/hooks/useVerifiableCredentialRoutes.ts
@@ -0,0 +1,64 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {useRoutes} from '@thunderid/contexts';
+
+/**
+ * Route paths this package needs from the host application.
+ *
+ * The host supplies these via `@thunderid/contexts`'s `RoutesProvider`. When absent (e.g. this
+ * package rendered standalone in Storybook or a unit test), `useVerifiableCredentialRoutes` falls
+ * back to `defaultVerifiableCredentialRoutePaths` below.
+ *
+ * @public
+ */
+export interface VerifiableCredentialRoutePaths {
+  verifiableCredentials: {
+    list: () => string;
+    detail: (id: string) => string;
+    create: () => string;
+  };
+  verifiablePresentations: {
+    list: () => string;
+    detail: (id: string) => string;
+    create: () => string;
+  };
+}
+
+/**
+ * Default verifiable-credential (and verifiable-presentation) paths, used when no host-supplied
+ * override is present.
+ *
+ * @public
+ */
+export const defaultVerifiableCredentialRoutePaths: VerifiableCredentialRoutePaths = {
+  verifiableCredentials: {
+    list: () => '/verifiable-credentials',
+    detail: (id) => `/verifiable-credentials/${id}`,
+    create: () => '/verifiable-credentials/create',
+  },
+  verifiablePresentations: {
+    list: () => '/verifiable-presentations',
+    detail: (id) => `/verifiable-presentations/${id}`,
+    create: () => '/verifiable-presentations/create',
+  },
+};
+
+/**
+ * Resolves the verifiable-credential (and verifiable-presentation) route paths, preferring the
+ * host application's configuration (supplied via `RoutesProvider`) and falling back to this
+ * package's own defaults.
+ *
+ * Components should never hardcode these destination paths; they should call this hook and build
+ * the destination from the returned functions instead.
+ *
+ * @public
+ */
+export default function useVerifiableCredentialRoutes(): VerifiableCredentialRoutePaths {
+  const routes = useRoutes<Partial<VerifiableCredentialRoutePaths>>();
+  return {
+    verifiableCredentials: routes.verifiableCredentials ?? defaultVerifiableCredentialRoutePaths.verifiableCredentials,
+    verifiablePresentations:
+      routes.verifiablePresentations ?? defaultVerifiableCredentialRoutePaths.verifiablePresentations,
+  };
+}
diff --git a/frontend/packages/configure-verifiable-credentials/src/index.ts b/frontend/packages/configure-verifiable-credentials/src/index.ts
new file mode 100644
index 0000000000..63e001664a
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/src/index.ts
@@ -0,0 +1,56 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// APIs
+export {default as useCreateCredentialOffer} from './api/useCreateCredentialOffer';
+export {default as useCreateVerifiableCredential} from './api/useCreateVerifiableCredential';
+export {default as useCreateVerifiablePresentation} from './api/useCreateVerifiablePresentation';
+export {default as useDeleteVerifiableCredential} from './api/useDeleteVerifiableCredential';
+export {default as useDeleteVerifiablePresentation} from './api/useDeleteVerifiablePresentation';
+export {default as useGetTrustAnchors} from './api/useGetTrustAnchors';
+export {default as useGetVerifiableCredential} from './api/useGetVerifiableCredential';
+export {default as useGetVerifiableCredentials} from './api/useGetVerifiableCredentials';
+export {default as useGetVerifiablePresentation} from './api/useGetVerifiablePresentation';
+export {default as useGetVerifiablePresentations} from './api/useGetVerifiablePresentations';
+export {default as useInitiateVerification} from './api/useInitiateVerification';
+export {default as useUpdateVerifiableCredential} from './api/useUpdateVerifiableCredential';
+export {default as useUpdateVerifiablePresentation} from './api/useUpdateVerifiablePresentation';
+export {default as useVerificationStatus} from './api/useVerificationStatus';
+
+// Components
+export {default as CredentialOfferDialog} from './components/CredentialOfferDialog';
+export {default as VerifiableCredentialDeleteDialog} from './components/VerifiableCredentialDeleteDialog';
+export {default as VerifiableCredentialForm} from './components/VerifiableCredentialForm';
+export {default as VerifiableCredentialsList} from './components/VerifiableCredentialsList';
+export {default as VerifiablePresentationDeleteDialog} from './components/VerifiablePresentationDeleteDialog';
+export {default as VerifiablePresentationForm} from './components/VerifiablePresentationForm';
+export {default as VerifiablePresentationsList} from './components/VerifiablePresentationsList';
+export {default as VerificationDialog} from './components/VerificationDialog';
+
+// Constants
+export {default as VerifiableCredentialQueryKeys} from './constants/vc-query-keys';
+export {default as VerifiablePresentationQueryKeys} from './constants/vp-query-keys';
+
+// Models
+export * from './models/vc';
+export * from './models/vp';
+export type {CreateVerifiableCredentialRequest, UpdateVerifiableCredentialRequest} from './models/credential-requests';
+export type {
+  CreateVerifiablePresentationRequest,
+  UpdateVerifiablePresentationRequest,
+} from './models/presentation-requests';
+
+// Pages
+export {default as VerifiableCredentialCreatePage} from './pages/VerifiableCredentialCreatePage';
+export {default as VerifiableCredentialEditPage} from './pages/VerifiableCredentialEditPage';
+export {default as VerifiableCredentialsListPage} from './pages/VerifiableCredentialsListPage';
+export {default as VerifiablePresentationCreatePage} from './pages/VerifiablePresentationCreatePage';
+export {default as VerifiablePresentationEditPage} from './pages/VerifiablePresentationEditPage';
+export {default as VerifiablePresentationsListPage} from './pages/VerifiablePresentationsListPage';
+
+// Routes
+export type {VerifiableCredentialRoutePaths} from './hooks/useVerifiableCredentialRoutes';
+export {
+  defaultVerifiableCredentialRoutePaths,
+  default as useVerifiableCredentialRoutes,
+} from './hooks/useVerifiableCredentialRoutes';
diff --git a/frontend/apps/console/src/features/verifiable-credentials/models/claims.ts b/frontend/packages/configure-verifiable-credentials/src/models/credential-claims.ts
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/models/claims.ts
rename to frontend/packages/configure-verifiable-credentials/src/models/credential-claims.ts
diff --git a/frontend/apps/console/src/features/verifiable-credentials/models/requests.ts b/frontend/packages/configure-verifiable-credentials/src/models/credential-requests.ts
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/models/requests.ts
rename to frontend/packages/configure-verifiable-credentials/src/models/credential-requests.ts
diff --git a/frontend/apps/console/src/features/verifiable-presentations/models/claims.ts b/frontend/packages/configure-verifiable-credentials/src/models/presentation-claims.ts
similarity index 94%
rename from frontend/apps/console/src/features/verifiable-presentations/models/claims.ts
rename to frontend/packages/configure-verifiable-credentials/src/models/presentation-claims.ts
index 244cb825a2..98cdae9888 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/models/claims.ts
+++ b/frontend/packages/configure-verifiable-credentials/src/models/presentation-claims.ts
@@ -1,8 +1,8 @@
 // Copyright 2026 The ThunderID Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import type {VerifiablePresentation} from '@thunderid/configure-verifiable-presentations';
-import type {CreateVerifiablePresentationRequest} from './requests';
+import type {CreateVerifiablePresentationRequest} from './presentation-requests';
+import type {VerifiablePresentation} from './vp';
 
 export type ClaimRequirement = 'mandatory' | 'optional';
 
diff --git a/frontend/apps/console/src/features/verifiable-presentations/models/requests.ts b/frontend/packages/configure-verifiable-credentials/src/models/presentation-requests.ts
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-presentations/models/requests.ts
rename to frontend/packages/configure-verifiable-credentials/src/models/presentation-requests.ts
diff --git a/frontend/apps/console/src/features/verifiable-credentials/models/vc.ts b/frontend/packages/configure-verifiable-credentials/src/models/vc.ts
similarity index 100%
rename from frontend/apps/console/src/features/verifiable-credentials/models/vc.ts
rename to frontend/packages/configure-verifiable-credentials/src/models/vc.ts
diff --git a/frontend/packages/configure-verifiable-presentations/src/models/vp.ts b/frontend/packages/configure-verifiable-credentials/src/models/vp.ts
similarity index 100%
rename from frontend/packages/configure-verifiable-presentations/src/models/vp.ts
rename to frontend/packages/configure-verifiable-credentials/src/models/vp.ts
diff --git a/frontend/apps/console/src/features/verifiable-credentials/pages/VerifiableCredentialCreatePage.tsx b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiableCredentialCreatePage.tsx
similarity index 96%
rename from frontend/apps/console/src/features/verifiable-credentials/pages/VerifiableCredentialCreatePage.tsx
rename to frontend/packages/configure-verifiable-credentials/src/pages/VerifiableCredentialCreatePage.tsx
index daf082b471..e72eb67e0a 100644
--- a/frontend/apps/console/src/features/verifiable-credentials/pages/VerifiableCredentialCreatePage.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiableCredentialCreatePage.tsx
@@ -28,18 +28,18 @@ import {useMemo, useState, type ChangeEvent, type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
 import useCreateVerifiableCredential from '../api/useCreateVerifiableCredential';
-import ClaimsEditor from '../components/ClaimsEditor';
 import ConfigureName from '../components/create-verifiable-credential/ConfigureName';
-import {claimRowsToRequest, credentialToClaimRows, type ClaimRow} from '../models/claims';
+import ClaimsEditor from '../components/CredentialClaimsEditor';
+import useVerifiableCredentialRoutes from '../hooks/useVerifiableCredentialRoutes';
+import {claimRowsToRequest, credentialToClaimRows, type ClaimRow} from '../models/credential-claims';
 
 type Step = 'ORGANIZATION_UNIT' | 'NAME' | 'DETAILS' | 'CLAIMS';
 
-const LIST_URL = '/verifiable-credentials';
-
 export default function VerifiableCredentialCreatePage(): JSX.Element {
   const navigate = useNavigate();
   const {t} = useTranslation('verifiable-credentials');
   const logger = useLogger('VerifiableCredentialCreatePage');
+  const routes = useVerifiableCredentialRoutes();
   const createVC = useCreateVerifiableCredential();
 
   const {hasMultipleOUs, isLoading: isOuLoading, ouList} = useHasMultipleOUs();
@@ -121,7 +121,7 @@ export default function VerifiableCredentialCreatePage(): JSX.Element {
   const progress = ((stepIndex + 1) / stepOrder.length) * 100;
 
   const close = (): void => {
-    void navigate(LIST_URL);
+    void navigate(routes.verifiableCredentials.list());
   };
 
   const buildRequest = () => ({
@@ -137,7 +137,7 @@ export default function VerifiableCredentialCreatePage(): JSX.Element {
     createVC.mutate(buildRequest(), {
       onSuccess: () => {
         (async () => {
-          await navigate(LIST_URL);
+          await navigate(routes.verifiableCredentials.list());
         })().catch((error: unknown) => {
           logger.error('Failed to navigate after create', {error});
         });
diff --git a/frontend/apps/console/src/features/verifiable-credentials/pages/VerifiableCredentialEditPage.tsx b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiableCredentialEditPage.tsx
similarity index 96%
rename from frontend/apps/console/src/features/verifiable-credentials/pages/VerifiableCredentialEditPage.tsx
rename to frontend/packages/configure-verifiable-credentials/src/pages/VerifiableCredentialEditPage.tsx
index 891ac77bac..9a3d108afd 100644
--- a/frontend/apps/console/src/features/verifiable-credentials/pages/VerifiableCredentialEditPage.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiableCredentialEditPage.tsx
@@ -12,14 +12,15 @@ import useGetVerifiableCredential from '../api/useGetVerifiableCredential';
 import useUpdateVerifiableCredential from '../api/useUpdateVerifiableCredential';
 import VerifiableCredentialDeleteDialog from '../components/VerifiableCredentialDeleteDialog';
 import VerifiableCredentialForm from '../components/VerifiableCredentialForm';
-import type {UpdateVerifiableCredentialRequest} from '../models/requests';
-
-const LIST_URL = '/verifiable-credentials';
+import useVerifiableCredentialRoutes from '../hooks/useVerifiableCredentialRoutes';
+import type {UpdateVerifiableCredentialRequest} from '../models/credential-requests';
 
 export default function VerifiableCredentialEditPage(): JSX.Element {
   const {vcId = ''} = useParams<{vcId: string}>();
   const navigate = useNavigate();
   const {t} = useTranslation();
+  const routes = useVerifiableCredentialRoutes();
+  const listUrl = routes.verifiableCredentials.list();
 
   const {data, isLoading, error, refetch} = useGetVerifiableCredential(vcId);
   const updateVC = useUpdateVerifiableCredential();
@@ -51,7 +52,7 @@ export default function VerifiableCredentialEditPage(): JSX.Element {
   }
 
   const handleDeleted = (): void => {
-    void navigate(LIST_URL);
+    void navigate(listUrl);
   };
 
   const handleSubmit = (formData: UpdateVerifiableCredentialRequest): void => {
@@ -65,7 +66,7 @@ export default function VerifiableCredentialEditPage(): JSX.Element {
   const backButton = (
     <Button
       onClick={(): void => {
-        void navigate(LIST_URL);
+        void navigate(listUrl);
       }}
       startIcon={<ArrowLeft size={16} />}
     >
@@ -105,7 +106,7 @@ export default function VerifiableCredentialEditPage(): JSX.Element {
   return (
     <PageContent>
       <PageTitle>
-        <PageTitle.BackButton component={<Link to={LIST_URL} />}>
+        <PageTitle.BackButton component={<Link to={listUrl} />}>
           {t('verifiable-credentials:edit.back')}
         </PageTitle.BackButton>
         <PageTitle.Header component="div">
diff --git a/frontend/apps/console/src/features/verifiable-credentials/pages/VerifiableCredentialsListPage.tsx b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiableCredentialsListPage.tsx
similarity index 89%
rename from frontend/apps/console/src/features/verifiable-credentials/pages/VerifiableCredentialsListPage.tsx
rename to frontend/packages/configure-verifiable-credentials/src/pages/VerifiableCredentialsListPage.tsx
index bd4a0e1709..42666b4019 100644
--- a/frontend/apps/console/src/features/verifiable-credentials/pages/VerifiableCredentialsListPage.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiableCredentialsListPage.tsx
@@ -8,13 +8,14 @@ import {Plus} from '@wso2/oxygen-ui-icons-react';
 import {type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
 import VerifiableCredentialsList from '../components/VerifiableCredentialsList';
+import useVerifiableCredentialRoutes from '../hooks/useVerifiableCredentialRoutes';
 
 export default function VerifiableCredentialsListPage(): JSX.Element {
   const navigate = useNavigate();
   const {t} = useTranslation();
   const logger = useLogger('VerifiableCredentialsListPage');
+  const routes = useVerifiableCredentialRoutes();
 
   return (
     <PageContent>
@@ -31,7 +32,7 @@ export default function VerifiableCredentialsListPage(): JSX.Element {
               startIcon={<Plus size={18} />}
               onClick={() => {
                 (async () => {
-                  await navigate(RouteConfig.verifiableCredentials.create());
+                  await navigate(routes.verifiableCredentials.create());
                 })().catch((error: unknown) => {
                   logger.error('Failed to navigate to create page', {error});
                 });
diff --git a/frontend/apps/console/src/features/verifiable-presentations/pages/VerifiablePresentationCreatePage.tsx b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiablePresentationCreatePage.tsx
similarity index 96%
rename from frontend/apps/console/src/features/verifiable-presentations/pages/VerifiablePresentationCreatePage.tsx
rename to frontend/packages/configure-verifiable-credentials/src/pages/VerifiablePresentationCreatePage.tsx
index 8261f3be60..21a68881c7 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/pages/VerifiablePresentationCreatePage.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiablePresentationCreatePage.tsx
@@ -27,11 +27,11 @@ import {Home} from '@wso2/oxygen-ui-icons-react';
 import {useMemo, useState, type ChangeEvent, type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
 import useCreateVerifiablePresentation from '../api/useCreateVerifiablePresentation';
-import ClaimsEditor from '../components/ClaimsEditor';
 import ConfigureName from '../components/create-verifiable-presentation/ConfigureName';
-import {claimRowsToRequest, emptyClaimRow, type ClaimRow} from '../models/claims';
+import ClaimsEditor from '../components/PresentationClaimsEditor';
+import useVerifiableCredentialRoutes from '../hooks/useVerifiableCredentialRoutes';
+import {claimRowsToRequest, emptyClaimRow, type ClaimRow} from '../models/presentation-claims';
 
 type Step = 'ORGANIZATION_UNIT' | 'NAME' | 'DETAILS' | 'CLAIMS';
 
@@ -39,6 +39,7 @@ export default function VerifiablePresentationCreatePage(): JSX.Element {
   const navigate = useNavigate();
   const {t} = useTranslation('verifiable-presentations');
   const logger = useLogger('VerifiablePresentationCreatePage');
+  const routes = useVerifiableCredentialRoutes();
   const createVP = useCreateVerifiablePresentation();
 
   const {hasMultipleOUs, isLoading: isOuLoading, ouList} = useHasMultipleOUs();
@@ -90,7 +91,7 @@ export default function VerifiablePresentationCreatePage(): JSX.Element {
   const progress = ((stepIndex + 1) / stepOrder.length) * 100;
 
   const close = (): void => {
-    void navigate(RouteConfig.verifiablePresentations.list());
+    void navigate(routes.verifiablePresentations.list());
   };
 
   // A create error is stale once the user changes a field or moves between steps to fix something.
@@ -111,7 +112,7 @@ export default function VerifiablePresentationCreatePage(): JSX.Element {
       {
         onSuccess: () => {
           (async () => {
-            await navigate(RouteConfig.verifiablePresentations.list());
+            await navigate(routes.verifiablePresentations.list());
           })().catch((error: unknown) => {
             logger.error('Failed to navigate after create', {error});
           });
diff --git a/frontend/apps/console/src/features/verifiable-presentations/pages/VerifiablePresentationEditPage.tsx b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiablePresentationEditPage.tsx
similarity index 96%
rename from frontend/apps/console/src/features/verifiable-presentations/pages/VerifiablePresentationEditPage.tsx
rename to frontend/packages/configure-verifiable-credentials/src/pages/VerifiablePresentationEditPage.tsx
index 22cc417dcf..2b2f329036 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/pages/VerifiablePresentationEditPage.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiablePresentationEditPage.tsx
@@ -12,14 +12,15 @@ import useGetVerifiablePresentation from '../api/useGetVerifiablePresentation';
 import useUpdateVerifiablePresentation from '../api/useUpdateVerifiablePresentation';
 import VerifiablePresentationDeleteDialog from '../components/VerifiablePresentationDeleteDialog';
 import VerifiablePresentationForm from '../components/VerifiablePresentationForm';
-import type {UpdateVerifiablePresentationRequest} from '../models/requests';
-
-const LIST_URL = '/verifiable-presentations';
+import useVerifiableCredentialRoutes from '../hooks/useVerifiableCredentialRoutes';
+import type {UpdateVerifiablePresentationRequest} from '../models/presentation-requests';
 
 export default function VerifiablePresentationEditPage(): JSX.Element {
   const {vpId = ''} = useParams<{vpId: string}>();
   const navigate = useNavigate();
   const {t} = useTranslation();
+  const routes = useVerifiableCredentialRoutes();
+  const listUrl = routes.verifiablePresentations.list();
 
   // Resolves an error through the `verifiable-presentations` catalog. `t` defaults to the `common`
   // namespace, so this forwards explicit `ns:` prefixes unchanged and prefixes bare keys, per
@@ -51,7 +52,7 @@ export default function VerifiablePresentationEditPage(): JSX.Element {
   }
 
   const handleDeleted = (): void => {
-    void navigate(LIST_URL);
+    void navigate(listUrl);
   };
 
   const handleSubmit = (formData: UpdateVerifiablePresentationRequest): void => {
@@ -67,7 +68,7 @@ export default function VerifiablePresentationEditPage(): JSX.Element {
   const backButton = (
     <Button
       onClick={(): void => {
-        void navigate(LIST_URL);
+        void navigate(listUrl);
       }}
       startIcon={<ArrowLeft size={16} />}
     >
@@ -110,7 +111,7 @@ export default function VerifiablePresentationEditPage(): JSX.Element {
   return (
     <PageContent>
       <PageTitle>
-        <PageTitle.BackButton component={<Link to={LIST_URL} />}>
+        <PageTitle.BackButton component={<Link to={listUrl} />}>
           {t('verifiable-presentations:edit.back')}
         </PageTitle.BackButton>
         <PageTitle.Header component="div">
diff --git a/frontend/apps/console/src/features/verifiable-presentations/pages/VerifiablePresentationsListPage.tsx b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiablePresentationsListPage.tsx
similarity index 89%
rename from frontend/apps/console/src/features/verifiable-presentations/pages/VerifiablePresentationsListPage.tsx
rename to frontend/packages/configure-verifiable-credentials/src/pages/VerifiablePresentationsListPage.tsx
index 711728845a..b3c69556be 100644
--- a/frontend/apps/console/src/features/verifiable-presentations/pages/VerifiablePresentationsListPage.tsx
+++ b/frontend/packages/configure-verifiable-credentials/src/pages/VerifiablePresentationsListPage.tsx
@@ -8,13 +8,14 @@ import {Plus} from '@wso2/oxygen-ui-icons-react';
 import {type JSX} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';
-import RouteConfig from '../../../configs/RouteConfig';
 import VerifiablePresentationsList from '../components/VerifiablePresentationsList';
+import useVerifiableCredentialRoutes from '../hooks/useVerifiableCredentialRoutes';
 
 export default function VerifiablePresentationsListPage(): JSX.Element {
   const navigate = useNavigate();
   const {t} = useTranslation();
   const logger = useLogger('VerifiablePresentationsListPage');
+  const routes = useVerifiableCredentialRoutes();
 
   return (
     <PageContent>
@@ -31,7 +32,7 @@ export default function VerifiablePresentationsListPage(): JSX.Element {
               startIcon={<Plus size={18} />}
               onClick={() => {
                 (async () => {
-                  await navigate(RouteConfig.verifiablePresentations.create());
+                  await navigate(routes.verifiablePresentations.create());
                 })().catch((error: unknown) => {
                   logger.error('Failed to navigate to create page', {error});
                 });
diff --git a/frontend/apps/console/src/lib/deriveHandle.ts b/frontend/packages/configure-verifiable-credentials/src/utils/deriveHandle.ts
similarity index 100%
rename from frontend/apps/console/src/lib/deriveHandle.ts
rename to frontend/packages/configure-verifiable-credentials/src/utils/deriveHandle.ts
diff --git a/frontend/packages/configure-verifiable-credentials/tsconfig.eslint.json b/frontend/packages/configure-verifiable-credentials/tsconfig.eslint.json
new file mode 100644
index 0000000000..5440b11d0a
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/tsconfig.eslint.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.config.js", "**/*.config.cjs", "**/*.config.ts"]
+}
diff --git a/frontend/packages/configure-verifiable-credentials/tsconfig.json b/frontend/packages/configure-verifiable-credentials/tsconfig.json
new file mode 100644
index 0000000000..4f254611c4
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "ESNext",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "exclude": ["node_modules", "tmp", "dist"],
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/frontend/packages/configure-verifiable-credentials/tsconfig.lib.json b/frontend/packages/configure-verifiable-credentials/tsconfig.lib.json
new file mode 100644
index 0000000000..8d37e00dfd
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/tsconfig.lib.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist",
+    "declarationDir": "dist",
+    "types": ["node"]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.jsx", "src/**/*.tsx", "types/**/*.d.ts"]
+}
diff --git a/frontend/packages/configure-verifiable-credentials/tsconfig.spec.json b/frontend/packages/configure-verifiable-credentials/tsconfig.spec.json
new file mode 100644
index 0000000000..f4f74171e7
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/tsconfig.spec.json
@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "types": ["vitest/globals"]
+  },
+  "include": [
+    "test-configs",
+    "vitest.config.ts",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.test.jsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}
diff --git a/frontend/packages/configure-verifiable-credentials/vitest.config.ts b/frontend/packages/configure-verifiable-credentials/vitest.config.ts
new file mode 100644
index 0000000000..c86c0219e9
--- /dev/null
+++ b/frontend/packages/configure-verifiable-credentials/vitest.config.ts
@@ -0,0 +1,31 @@
+// Copyright 2026 The ThunderID Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import {playwright} from '@vitest/browser-playwright';
+import {defineConfig} from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    coverage: {
+      provider: 'istanbul',
+      reporter: [['lcov', {projectRoot: '../../..'}], 'text-summary'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: [
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/__tests__/**',
+        '**/test/**',
+        '**/*.{test,spec}.{ts,tsx}',
+        '**/test-setup.{ts,tsx}',
+        '**/index.ts',
+      ],
+    },
+    browser: {
+      enabled: true,
+      headless: true,
+      instances: [{browser: 'chromium'}],
+      provider: playwright(),
+    },
+    setupFiles: ['@thunderid/test-utils/setup'],
+  },
+});
diff --git a/frontend/packages/configure-verifiable-presentations/src/index.ts b/frontend/packages/configure-verifiable-presentations/src/index.ts
deleted file mode 100644
index 94277663e7..0000000000
--- a/frontend/packages/configure-verifiable-presentations/src/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2026 The ThunderID Authors
-// SPDX-License-Identifier: Apache-2.0
-
-// API Hooks
-export {default as useGetVerifiablePresentations} from './api/useGetVerifiablePresentations';
-
-// Models & Types
-export type {
-  InitiateVerificationResponse,
-  TrustAnchor,
-  VerifiablePresentation,
-  VerifiablePresentationSummary,
-  VerificationStatusResponse,
-  VPListResponse,
-} from './models/vp';
-
-// Constants
-export {default as VerifiablePresentationQueryKeys} from './constants/vp-query-keys';
diff --git a/frontend/packages/test-utils/src/setup.ts b/frontend/packages/test-utils/src/setup.ts
index fb8265c964..b8f96a4324 100644
--- a/frontend/packages/test-utils/src/setup.ts
+++ b/frontend/packages/test-utils/src/setup.ts
@@ -13,24 +13,7 @@ beforeAll(async () => {
   await i18n.use(initReactI18next).init({
     resources: {
       'en-US': {
-        common: enUS.common,
-        navigation: enUS.navigation,
-        users: enUS.users,
-        userTypes: enUS.userTypes,
-        connections: enUS.connections,
-        applications: enUS.applications,
-        groups: enUS.groups,
-        organizationUnits: enUS.organizationUnits,
-        roles: enUS.roles,
-        auth: enUS.auth,
-        mfa: enUS.mfa,
-        social: enUS.social,
-        consent: enUS.consent,
-        elements: enUS.elements,
-        errors: enUS.errors,
-        signin: enUS.signin,
-        signup: enUS.signup,
-        validations: enUS.validations,
+        ...enUS,
       },
     },
     lng: 'en-US',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 274bdab6ac..5d428f00c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -662,12 +662,24 @@ importers:
       '@thunderid/configure-connections':
         specifier: workspace:^
         version: link:../../packages/configure-connections
+      '@thunderid/configure-design':
+        specifier: workspace:^
+        version: link:../../packages/configure-design
+      '@thunderid/configure-groups':
+        specifier: workspace:^
+        version: link:../../packages/configure-groups
+      '@thunderid/configure-import-export':
+        specifier: workspace:^
+        version: link:../../packages/configure-import-export
       '@thunderid/configure-organization-units':
         specifier: workspace:^
         version: link:../../packages/configure-organization-units
       '@thunderid/configure-resource-servers':
         specifier: workspace:^
         version: link:../../packages/configure-resource-servers
+      '@thunderid/configure-settings':
+        specifier: workspace:^
+        version: link:../../packages/configure-settings
       '@thunderid/configure-translations':
         specifier: workspace:^
         version: link:../../packages/configure-translations
@@ -677,9 +689,9 @@ importers:
       '@thunderid/configure-users':
         specifier: workspace:^
         version: link:../../packages/configure-users
-      '@thunderid/configure-verifiable-presentations':
+      '@thunderid/configure-verifiable-credentials':
         specifier: workspace:^
-        version: link:../../packages/configure-verifiable-presentations
+        version: link:../../packages/configure-verifiable-credentials
       '@thunderid/contexts':
         specifier: workspace:^
         version: link:../../packages/contexts
@@ -1394,6 +1406,333 @@ importers:
         specifier: '>=4.1.0'
         version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.7.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-istanbul@4.1.10)(jsdom@27.0.1)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))
 
+  frontend/packages/configure-design:
+    devDependencies:
+      '@emotion/cache':
+        specifier: ^11.14.0
+        version: 11.14.0
+      '@emotion/react':
+        specifier: ^11.14.0
+        version: 11.14.0(@types/react@19.2.14)(react@19.2.3)
+      '@monaco-editor/react':
+        specifier: 'catalog:'
+        version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@playwright/test':
+        specifier: 'catalog:'
+        version: 1.60.0
+      '@tanstack/react-query':
+        specifier: 'catalog:'
+        version: 5.90.5(react@19.2.3)
+      '@testing-library/jest-dom':
+        specifier: 'catalog:'
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: 'catalog:'
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@testing-library/user-event':
+        specifier: 'catalog:'
+        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@thunderid/components':
+        specifier: workspace:^
+        version: link:../components
+      '@thunderid/configure-connections':
+        specifier: workspace:^
+        version: link:../configure-connections
+      '@thunderid/contexts':
+        specifier: workspace:^
+        version: link:../contexts
+      '@thunderid/design':
+        specifier: workspace:^
+        version: link:../design
+      '@thunderid/eslint-plugin':
+        specifier: workspace:^
+        version: link:../eslint-plugin
+      '@thunderid/hooks':
+        specifier: workspace:^
+        version: link:../hooks
+      '@thunderid/logger':
+        specifier: workspace:^
+        version: link:../logger
+      '@thunderid/prettier-config':
+        specifier: workspace:^
+        version: link:../prettier-config
+      '@thunderid/react':
+        specifier: 'catalog:'
+        version: 0.13.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@thunderid/test-utils':
+        specifier: workspace:^
+        version: link:../test-utils
+      '@thunderid/utils':
+        specifier: workspace:^
+        version: link:../utils
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.7.2
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitest/browser-playwright':
+        specifier: 'catalog:'
+        version: 4.1.10(playwright@1.60.0)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))(vitest@4.1.10)
+      '@vitest/coverage-istanbul':
+        specifier: 'catalog:'
+        version: 4.1.10(vitest@4.1.10)
+      '@wso2/oxygen-ui':
+        specifier: 'catalog:'
+        version: 0.13.0(@mui/system@7.3.11(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(@wso2/oxygen-ui-icons-react@0.13.0(react@19.2.3))(dayjs@1.11.21)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@wso2/oxygen-ui-icons-react':
+        specifier: 'catalog:'
+        version: 0.13.0(react@19.2.3)
+      eslint:
+        specifier: 'catalog:'
+        version: 9.39.5(jiti@2.7.0)
+      prettier:
+        specifier: 'catalog:'
+        version: 3.6.2
+      react:
+        specifier: 'catalog:'
+        version: 19.2.3
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.3(react@19.2.3)
+      react-i18next:
+        specifier: 'catalog:'
+        version: 16.0.1(i18next@25.6.0(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      react-router:
+        specifier: 'catalog:'
+        version: 8.3.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      rimraf:
+        specifier: 'catalog:'
+        version: 6.1.3
+      rolldown:
+        specifier: 'catalog:'
+        version: 1.0.0-beta.45(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)
+      tslib:
+        specifier: 'catalog:'
+        version: 2.8.1
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+      vite:
+        specifier: 8.0.16
+        version: 8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3)
+      vitest:
+        specifier: '>=4.1.0'
+        version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.7.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-istanbul@4.1.10)(jsdom@27.0.1)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))
+
+  frontend/packages/configure-groups:
+    devDependencies:
+      '@playwright/test':
+        specifier: 'catalog:'
+        version: 1.60.0
+      '@tanstack/react-query':
+        specifier: 'catalog:'
+        version: 5.90.5(react@19.2.3)
+      '@testing-library/jest-dom':
+        specifier: 'catalog:'
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: 'catalog:'
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@testing-library/user-event':
+        specifier: 'catalog:'
+        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@thunderid/components':
+        specifier: workspace:^
+        version: link:../components
+      '@thunderid/configure-applications':
+        specifier: workspace:^
+        version: link:../configure-applications
+      '@thunderid/configure-organization-units':
+        specifier: workspace:^
+        version: link:../configure-organization-units
+      '@thunderid/configure-users':
+        specifier: workspace:^
+        version: link:../configure-users
+      '@thunderid/contexts':
+        specifier: workspace:^
+        version: link:../contexts
+      '@thunderid/eslint-plugin':
+        specifier: workspace:^
+        version: link:../eslint-plugin
+      '@thunderid/hooks':
+        specifier: workspace:^
+        version: link:../hooks
+      '@thunderid/logger':
+        specifier: workspace:^
+        version: link:../logger
+      '@thunderid/prettier-config':
+        specifier: workspace:^
+        version: link:../prettier-config
+      '@thunderid/react':
+        specifier: 'catalog:'
+        version: 0.13.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@thunderid/test-utils':
+        specifier: workspace:^
+        version: link:../test-utils
+      '@thunderid/types':
+        specifier: workspace:^
+        version: link:../types
+      '@thunderid/utils':
+        specifier: workspace:^
+        version: link:../utils
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.7.2
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.14
+      '@vitest/browser-playwright':
+        specifier: 'catalog:'
+        version: 4.1.10(playwright@1.60.0)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))(vitest@4.1.10)
+      '@vitest/coverage-istanbul':
+        specifier: 'catalog:'
+        version: 4.1.10(vitest@4.1.10)
+      '@wso2/oxygen-ui':
+        specifier: 'catalog:'
+        version: 0.13.0(@mui/system@7.3.11(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(@wso2/oxygen-ui-icons-react@0.13.0(react@19.2.3))(dayjs@1.11.21)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@wso2/oxygen-ui-icons-react':
+        specifier: 'catalog:'
+        version: 0.13.0(react@19.2.3)
+      eslint:
+        specifier: 'catalog:'
+        version: 9.39.5(jiti@2.7.0)
+      prettier:
+        specifier: 'catalog:'
+        version: 3.6.2
+      react:
+        specifier: 'catalog:'
+        version: 19.2.3
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.3(react@19.2.3)
+      react-i18next:
+        specifier: 'catalog:'
+        version: 16.0.1(i18next@25.6.0(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      react-router:
+        specifier: 'catalog:'
+        version: 8.3.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      rimraf:
+        specifier: 'catalog:'
+        version: 6.1.3
+      rolldown:
+        specifier: 'catalog:'
+        version: 1.0.0-beta.45(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)
+      tslib:
+        specifier: 'catalog:'
+        version: 2.8.1
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+      vitest:
+        specifier: '>=4.1.0'
+        version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.7.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-istanbul@4.1.10)(jsdom@27.0.1)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))
+
+  frontend/packages/configure-import-export:
+    devDependencies:
+      '@monaco-editor/react':
+        specifier: 'catalog:'
+        version: 4.7.0(monaco-editor@0.55.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@playwright/test':
+        specifier: 'catalog:'
+        version: 1.60.0
+      '@tanstack/react-query':
+        specifier: 'catalog:'
+        version: 5.90.5(react@19.2.3)
+      '@testing-library/jest-dom':
+        specifier: 'catalog:'
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: 'catalog:'
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@testing-library/user-event':
+        specifier: 'catalog:'
+        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@thunderid/components':
+        specifier: workspace:^
+        version: link:../components
+      '@thunderid/contexts':
+        specifier: workspace:^
+        version: link:../contexts
+      '@thunderid/eslint-plugin':
+        specifier: workspace:^
+        version: link:../eslint-plugin
+      '@thunderid/logger':
+        specifier: workspace:^
+        version: link:../logger
+      '@thunderid/prettier-config':
+        specifier: workspace:^
+        version: link:../prettier-config
+      '@thunderid/react':
+        specifier: 'catalog:'
+        version: 0.13.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@thunderid/test-utils':
+        specifier: workspace:^
+        version: link:../test-utils
+      '@thunderid/utils':
+        specifier: workspace:^
+        version: link:../utils
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.7.2
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.14
+      '@vitest/browser-playwright':
+        specifier: 'catalog:'
+        version: 4.1.10(playwright@1.60.0)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))(vitest@4.1.10)
+      '@vitest/coverage-istanbul':
+        specifier: 'catalog:'
+        version: 4.1.10(vitest@4.1.10)
+      '@wso2/oxygen-ui':
+        specifier: 'catalog:'
+        version: 0.13.0(@mui/system@7.3.11(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(@wso2/oxygen-ui-icons-react@0.13.0(react@19.2.3))(dayjs@1.11.21)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@wso2/oxygen-ui-icons-react':
+        specifier: 'catalog:'
+        version: 0.13.0(react@19.2.3)
+      eslint:
+        specifier: 'catalog:'
+        version: 9.39.5(jiti@2.7.0)
+      i18next:
+        specifier: 25.6.0
+        version: 25.6.0(typescript@5.9.3)
+      prettier:
+        specifier: 'catalog:'
+        version: 3.6.2
+      react:
+        specifier: 'catalog:'
+        version: 19.2.3
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.3(react@19.2.3)
+      react-i18next:
+        specifier: 'catalog:'
+        version: 16.0.1(i18next@25.6.0(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      react-router:
+        specifier: 'catalog:'
+        version: 8.3.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      rimraf:
+        specifier: 'catalog:'
+        version: 6.1.3
+      rolldown:
+        specifier: 'catalog:'
+        version: 1.0.0-beta.45(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)
+      tslib:
+        specifier: 'catalog:'
+        version: 2.8.1
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+      vitest:
+        specifier: '>=4.1.0'
+        version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.7.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-istanbul@4.1.10)(jsdom@27.0.1)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))
+      yaml:
+        specifier: 2.8.3
+        version: 2.8.3
+
   frontend/packages/configure-organization-units:
     dependencies:
       '@hookform/resolvers':
@@ -1627,6 +1966,93 @@ importers:
         specifier: '>=4.1.0'
         version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.7.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-istanbul@4.1.10)(jsdom@27.0.1)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))
 
+  frontend/packages/configure-settings:
+    devDependencies:
+      '@playwright/test':
+        specifier: 'catalog:'
+        version: 1.60.0
+      '@tanstack/react-query':
+        specifier: 'catalog:'
+        version: 5.90.5(react@19.2.3)
+      '@testing-library/jest-dom':
+        specifier: 'catalog:'
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: 'catalog:'
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@testing-library/user-event':
+        specifier: 'catalog:'
+        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@thunderid/components':
+        specifier: workspace:^
+        version: link:../components
+      '@thunderid/contexts':
+        specifier: workspace:^
+        version: link:../contexts
+      '@thunderid/eslint-plugin':
+        specifier: workspace:^
+        version: link:../eslint-plugin
+      '@thunderid/prettier-config':
+        specifier: workspace:^
+        version: link:../prettier-config
+      '@thunderid/react':
+        specifier: 'catalog:'
+        version: 0.13.0(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@thunderid/test-utils':
+        specifier: workspace:^
+        version: link:../test-utils
+      '@thunderid/utils':
+        specifier: workspace:^
+        version: link:../utils
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.7.2
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.14
+      '@vitest/browser-playwright':
+        specifier: 'catalog:'
+        version: 4.1.10(playwright@1.60.0)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))(vitest@4.1.10)
+      '@vitest/coverage-istanbul':
+        specifier: 'catalog:'
+        version: 4.1.10(vitest@4.1.10)
+      '@wso2/oxygen-ui':
+        specifier: 'catalog:'
+        version: 0.13.0(@mui/system@7.3.11(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(@wso2/oxygen-ui-icons-react@0.13.0(react@19.2.3))(dayjs@1.11.21)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@wso2/oxygen-ui-icons-react':
+        specifier: 'catalog:'
+        version: 0.13.0(react@19.2.3)
+      eslint:
+        specifier: 'catalog:'
+        version: 9.39.5(jiti@2.7.0)
+      prettier:
+        specifier: 'catalog:'
+        version: 3.6.2
+      react:
+        specifier: 'catalog:'
+        version: 19.2.3
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.3(react@19.2.3)
+      react-i18next:
+        specifier: 'catalog:'
+        version: 16.0.1(i18next@25.6.0(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      rimraf:
+        specifier: 'catalog:'
+        version: 6.1.3
+      rolldown:
+        specifier: 'catalog:'
+        version: 1.0.0-beta.45(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)
+      tslib:
+        specifier: 'catalog:'
+        version: 2.8.1
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.3
+      vitest:
+        specifier: '>=4.1.0'
+        version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.7.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-istanbul@4.1.10)(jsdom@27.0.1)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))
+
   frontend/packages/configure-translations:
     dependencies:
       '@monaco-editor/react':
@@ -1966,7 +2392,7 @@ importers:
         specifier: '>=4.1.0'
         version: 4.1.10(@opentelemetry/api@1.9.0)(@types/node@24.7.2)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-istanbul@4.1.10)(jsdom@27.0.1)(vite@8.0.16(@types/node@24.7.2)(esbuild@0.28.1)(jiti@2.7.0)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.47.1)(tsx@4.22.4)(yaml@2.8.3))
 
-  frontend/packages/configure-verifiable-presentations:
+  frontend/packages/configure-verifiable-credentials:
     devDependencies:
       '@playwright/test':
         specifier: 'catalog:'
@@ -1983,12 +2409,27 @@ importers:
       '@testing-library/user-event':
         specifier: 'catalog:'
         version: 14.6.1(@testing-library/dom@10.4.1)
+      '@thunderid/components':
+        specifier: workspace:^
+        version: link:../components
+      '@thunderid/configure-organization-units':
+        specifier: workspace:^
+        version: link:../configure-organization-units
       '@thunderid/contexts':
         specifier: workspace:^
         version: link:../contexts
+      '@thunderid/design':
+        specifier: workspace:^
+        version: link:../design
       '@thunderid/eslint-plugin':
         specifier: workspace:^
         version: link:../eslint-plugin
+      '@thunderid/hooks':
+        specifier: workspace:^
+        version: link:../hooks
+      '@thunderid/logger':
+        specifier: workspace:^
+        version: link:../logger
       '@thunderid/prettier-config':
         specifier: workspace:^
         version: link:../prettier-config
@@ -1998,6 +2439,9 @@ importers:
       '@thunderid/test-utils':
         specifier: workspace:^
         version: link:../test-utils
+      '@thunderid/utils':
+        specifier: workspace:^
+        version: link:../utils
       '@types/node':
         specifier: 'catalog:'
         version: 24.7.2
@@ -2010,6 +2454,12 @@ importers:
       '@vitest/coverage-istanbul':
         specifier: 'catalog:'
         version: 4.1.10(vitest@4.1.10)
+      '@wso2/oxygen-ui':
+        specifier: 'catalog:'
+        version: 0.13.0(@mui/system@7.3.11(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(react@19.2.3))(@types/react@19.2.14)(@wso2/oxygen-ui-icons-react@0.13.0(react@19.2.3))(dayjs@1.11.21)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@wso2/oxygen-ui-icons-react':
+        specifier: 'catalog:'
+        version: 0.13.0(react@19.2.3)
       eslint:
         specifier: 'catalog:'
         version: 9.39.5(jiti@2.7.0)
@@ -2022,6 +2472,12 @@ importers:
       react-dom:
         specifier: 'catalog:'
         version: 19.2.3(react@19.2.3)
+      react-i18next:
+        specifier: 'catalog:'
+        version: 16.0.1(i18next@25.6.0(typescript@5.9.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
+      react-router:
+        specifier: 'catalog:'
+        version: 8.3.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       rimraf:
         specifier: 'catalog:'
         version: 6.1.3