diff --git a/src/authentication/AuthenticationSection.tsx b/src/authentication/AuthenticationSection.tsx
index 54f29c3057..248f9dd6c6 100644
--- a/src/authentication/AuthenticationSection.tsx
+++ b/src/authentication/AuthenticationSection.tsx
@@ -46,7 +46,7 @@ const realmFlows = [
   "dockerAuthenticationFlow",
 ];
 
-export const AuthenticationSection = () => {
+export default function AuthenticationSection() {
   const { t } = useTranslation("authentication");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -293,4 +293,4 @@ export const AuthenticationSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/authentication/FlowDetails.tsx b/src/authentication/FlowDetails.tsx
index 43803121fc..c33cae1d2c 100644
--- a/src/authentication/FlowDetails.tsx
+++ b/src/authentication/FlowDetails.tsx
@@ -47,7 +47,7 @@ export const providerConditionFilter = (
   value: AuthenticationProviderRepresentation
 ) => value.displayName?.startsWith("Condition ");
 
-export const FlowDetails = () => {
+export default function FlowDetails() {
   const { t } = useTranslation("authentication");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -466,4 +466,4 @@ export const FlowDetails = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/authentication/form/CreateFlow.tsx b/src/authentication/form/CreateFlow.tsx
index 8fa74b23c1..7babac3378 100644
--- a/src/authentication/form/CreateFlow.tsx
+++ b/src/authentication/form/CreateFlow.tsx
@@ -19,7 +19,7 @@ import { NameDescription } from "./NameDescription";
 import { FlowType } from "./FlowType";
 import { toFlow } from "../routes/Flow";
 
-export const CreateFlow = () => {
+export default function CreateFlow() {
   const { t } = useTranslation("authentication");
   const history = useHistory();
   const { realm } = useRealm();
@@ -88,4 +88,4 @@ export const CreateFlow = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/authentication/routes/Authentication.ts b/src/authentication/routes/Authentication.ts
index e00a385416..9dd7439eb4 100644
--- a/src/authentication/routes/Authentication.ts
+++ b/src/authentication/routes/Authentication.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AuthenticationSection } from "../AuthenticationSection";
 
 export type AuthenticationParams = { realm: string; tab?: string };
 
 export const AuthenticationRoute: RouteDef = {
   path: "/:realm/authentication/:tab?",
-  component: AuthenticationSection,
+  component: lazy(() => import("../AuthenticationSection")),
   breadcrumb: (t) => t("authentication"),
   access: "view-realm",
 };
diff --git a/src/authentication/routes/CreateFlow.ts b/src/authentication/routes/CreateFlow.ts
index d997ceb4c5..46c370bd42 100644
--- a/src/authentication/routes/CreateFlow.ts
+++ b/src/authentication/routes/CreateFlow.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { CreateFlow } from "../form/CreateFlow";
 
 export type CreateFlowParams = { realm: string };
 
 export const CreateFlowRoute: RouteDef = {
   path: "/:realm/authentication/flows/create",
-  component: CreateFlow,
+  component: lazy(() => import("../form/CreateFlow")),
   breadcrumb: (t) => t("authentication:createFlow"),
   access: "manage-authorization",
 };
diff --git a/src/authentication/routes/Flow.ts b/src/authentication/routes/Flow.ts
index 839589b6a3..23b648c533 100644
--- a/src/authentication/routes/Flow.ts
+++ b/src/authentication/routes/Flow.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { FlowDetails } from "../FlowDetails";
 
 export type FlowParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type FlowParams = {
 
 export const FlowRoute: RouteDef = {
   path: "/:realm/authentication/:id/:usedBy/:builtIn?",
-  component: FlowDetails,
+  component: lazy(() => import("../FlowDetails")),
   breadcrumb: (t) => t("authentication:flowDetails"),
   access: "manage-authorization",
 };
diff --git a/src/client-scopes/ClientScopesSection.tsx b/src/client-scopes/ClientScopesSection.tsx
index 1eb1404bc6..7de0fc594e 100644
--- a/src/client-scopes/ClientScopesSection.tsx
+++ b/src/client-scopes/ClientScopesSection.tsx
@@ -45,7 +45,7 @@ import {
 } from "./details/SearchFilter";
 import type { Row } from "../clients/scopes/ClientScopes";
 
-export const ClientScopesSection = () => {
+export default function ClientScopesSection() {
   const { realm } = useRealm();
   const { whoAmI } = useWhoAmI();
   const { t } = useTranslation("client-scopes");
@@ -282,4 +282,4 @@ export const ClientScopesSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/client-scopes/details/MappingDetails.tsx b/src/client-scopes/details/MappingDetails.tsx
index 00edd1cf6d..f76f25115c 100644
--- a/src/client-scopes/details/MappingDetails.tsx
+++ b/src/client-scopes/details/MappingDetails.tsx
@@ -31,7 +31,7 @@ import { toClientScope } from "../routes/ClientScope";
 
 import "./mapping-details.css";
 
-export const MappingDetails = () => {
+export default function MappingDetails() {
   const { t } = useTranslation("client-scopes");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -269,4 +269,4 @@ export const MappingDetails = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/client-scopes/form/ClientScopeForm.tsx b/src/client-scopes/form/ClientScopeForm.tsx
index 3451070145..534f4e2a52 100644
--- a/src/client-scopes/form/ClientScopeForm.tsx
+++ b/src/client-scopes/form/ClientScopeForm.tsx
@@ -35,7 +35,7 @@ import {
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { toMapper } from "../routes/Mapper";
 
-export const ClientScopeForm = () => {
+export default function ClientScopeForm() {
   const { t } = useTranslation("client-scopes");
   const [clientScope, setClientScope] =
     useState<ClientScopeDefaultOptionalType>();
@@ -307,4 +307,4 @@ export const ClientScopeForm = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/client-scopes/routes/ClientScope.ts b/src/client-scopes/routes/ClientScope.ts
index d1f2fff4d1..c49a15fa26 100644
--- a/src/client-scopes/routes/ClientScope.ts
+++ b/src/client-scopes/routes/ClientScope.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientScopeForm } from "../form/ClientScopeForm";
 
 export type ClientScopeTab = "settings" | "mappers" | "scope";
 
@@ -14,7 +14,7 @@ export type ClientScopeParams = {
 
 export const ClientScopeRoute: RouteDef = {
   path: "/:realm/client-scopes/:id/:type/:tab",
-  component: ClientScopeForm,
+  component: lazy(() => import("../form/ClientScopeForm")),
   breadcrumb: (t) => t("client-scopes:clientScopeDetails"),
   access: "view-clients",
 };
diff --git a/src/client-scopes/routes/ClientScopes.ts b/src/client-scopes/routes/ClientScopes.ts
index 60fefa10fb..61c7b4c02e 100644
--- a/src/client-scopes/routes/ClientScopes.ts
+++ b/src/client-scopes/routes/ClientScopes.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientScopesSection } from "../ClientScopesSection";
 
 export type ClientScopesParams = { realm: string };
 
 export const ClientScopesRoute: RouteDef = {
   path: "/:realm/client-scopes",
-  component: ClientScopesSection,
+  component: lazy(() => import("../ClientScopesSection")),
   breadcrumb: (t) => t("client-scopes:clientScopeList"),
   access: "view-clients",
 };
diff --git a/src/client-scopes/routes/Mapper.ts b/src/client-scopes/routes/Mapper.ts
index 597cca80e9..348cab033b 100644
--- a/src/client-scopes/routes/Mapper.ts
+++ b/src/client-scopes/routes/Mapper.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { MappingDetails } from "../details/MappingDetails";
 
 export type MapperParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type MapperParams = {
 
 export const MapperRoute: RouteDef = {
   path: "/:realm/client-scopes/:id/:type/mappers/:mapperId",
-  component: MappingDetails,
+  component: lazy(() => import("../details/MappingDetails")),
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-clients",
 };
diff --git a/src/client-scopes/routes/NewClientScope.ts b/src/client-scopes/routes/NewClientScope.ts
index c536a35cf3..8735134cd2 100644
--- a/src/client-scopes/routes/NewClientScope.ts
+++ b/src/client-scopes/routes/NewClientScope.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientScopeForm } from "../form/ClientScopeForm";
 
 export type NewClientScopeParams = { realm: string };
 
 export const NewClientScopeRoute: RouteDef = {
   path: "/:realm/client-scopes/new",
-  component: ClientScopeForm,
+  component: lazy(() => import("../form/ClientScopeForm")),
   breadcrumb: (t) => t("client-scopes:createClientScope"),
   access: "manage-clients",
 };
diff --git a/src/clients/ClientDetails.tsx b/src/clients/ClientDetails.tsx
index 9f4a395165..5e79d6b609 100644
--- a/src/clients/ClientDetails.tsx
+++ b/src/clients/ClientDetails.tsx
@@ -170,7 +170,7 @@ export type SaveOptions = {
   messageKey?: string;
 };
 
-export const ClientDetails = () => {
+export default function ClientDetails() {
   const { t } = useTranslation("clients");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -497,4 +497,4 @@ export const ClientDetails = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/clients/ClientsSection.tsx b/src/clients/ClientsSection.tsx
index 220b88afe2..faff6c60c3 100644
--- a/src/clients/ClientsSection.tsx
+++ b/src/clients/ClientsSection.tsx
@@ -32,7 +32,7 @@ import { toClient } from "./routes/Client";
 import { toImportClient } from "./routes/ImportClient";
 import { isRealmClient, getProtocolName } from "./utils";
 
-export const ClientsSection = () => {
+export default function ClientsSection() {
   const { t } = useTranslation("clients");
   const { addAlert, addError } = useAlerts();
 
@@ -213,4 +213,4 @@ export const ClientsSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/clients/add/NewClientForm.tsx b/src/clients/add/NewClientForm.tsx
index 39dd3ad5bf..b27b2ce960 100644
--- a/src/clients/add/NewClientForm.tsx
+++ b/src/clients/add/NewClientForm.tsx
@@ -20,7 +20,7 @@ import { toClients } from "../routes/Clients";
 import { CapabilityConfig } from "./CapabilityConfig";
 import { GeneralSettings } from "./GeneralSettings";
 
-export const NewClientForm = () => {
+export default function NewClientForm() {
   const { t } = useTranslation("clients");
   const { realm } = useRealm();
   const adminClient = useAdminClient();
@@ -151,4 +151,4 @@ export const NewClientForm = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/clients/import/ImportForm.tsx b/src/clients/import/ImportForm.tsx
index 53fbf5164d..dcaf6abb91 100644
--- a/src/clients/import/ImportForm.tsx
+++ b/src/clients/import/ImportForm.tsx
@@ -23,7 +23,7 @@ import { ClientDescription } from "../ClientDescription";
 import { toClient } from "../routes/Client";
 import { toClients } from "../routes/Clients";
 
-export const ImportForm = () => {
+export default function ImportForm() {
   const { t } = useTranslation("clients");
   const history = useHistory();
   const adminClient = useAdminClient();
@@ -111,4 +111,4 @@ export const ImportForm = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/clients/initial-access/CreateInitialAccessToken.tsx b/src/clients/initial-access/CreateInitialAccessToken.tsx
index 996f4cda29..a7c8409526 100644
--- a/src/clients/initial-access/CreateInitialAccessToken.tsx
+++ b/src/clients/initial-access/CreateInitialAccessToken.tsx
@@ -22,7 +22,7 @@ import { useAlerts } from "../../components/alert/Alerts";
 import { AccessTokenDialog } from "./AccessTokenDialog";
 import { toClients } from "../routes/Clients";
 
-export const CreateInitialAccessToken = () => {
+export default function CreateInitialAccessToken() {
   const { t } = useTranslation("clients");
   const { handleSubmit, control } = useForm();
 
@@ -144,4 +144,4 @@ export const CreateInitialAccessToken = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/clients/routes/AddClient.ts b/src/clients/routes/AddClient.ts
index 8050a9b023..19f2e4f033 100644
--- a/src/clients/routes/AddClient.ts
+++ b/src/clients/routes/AddClient.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewClientForm } from "../add/NewClientForm";
 
 export type AddClientParams = { realm: string };
 
 export const AddClientRoute: RouteDef = {
   path: "/:realm/clients/add-client",
-  component: NewClientForm,
+  component: lazy(() => import("../add/NewClientForm")),
   breadcrumb: (t) => t("clients:createClient"),
   access: "manage-clients",
 };
diff --git a/src/clients/routes/Client.ts b/src/clients/routes/Client.ts
index 112aa770b8..f380c5088f 100644
--- a/src/clients/routes/Client.ts
+++ b/src/clients/routes/Client.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientDetails } from "../ClientDetails";
 
 export type ClientTab =
   | "settings"
@@ -18,7 +18,7 @@ export type ClientParams = {
 
 export const ClientRoute: RouteDef = {
   path: "/:realm/clients/:clientId/:tab",
-  component: ClientDetails,
+  component: lazy(() => import("../ClientDetails")),
   breadcrumb: (t) => t("clients:clientSettings"),
   access: "view-clients",
 };
diff --git a/src/clients/routes/Clients.ts b/src/clients/routes/Clients.ts
index e96bd5602d..71bbb8f478 100644
--- a/src/clients/routes/Clients.ts
+++ b/src/clients/routes/Clients.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientsSection } from "../ClientsSection";
 
 export type ClientsTab = "list" | "initialAccessToken";
 
@@ -12,7 +12,7 @@ export type ClientsParams = {
 
 export const ClientsRoute: RouteDef = {
   path: "/:realm/clients/:tab?",
-  component: ClientsSection,
+  component: lazy(() => import("../ClientsSection")),
   breadcrumb: (t) => t("clients:clientList"),
   access: "query-clients",
 };
diff --git a/src/clients/routes/CreateInitialAccessToken.ts b/src/clients/routes/CreateInitialAccessToken.ts
index 7255034855..7d8ecd4e21 100644
--- a/src/clients/routes/CreateInitialAccessToken.ts
+++ b/src/clients/routes/CreateInitialAccessToken.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { CreateInitialAccessToken } from "../initial-access/CreateInitialAccessToken";
 
 export type CreateInitialAccessTokenParams = { realm: string };
 
 export const CreateInitialAccessTokenRoute: RouteDef = {
   path: "/:realm/clients/initialAccessToken/create",
-  component: CreateInitialAccessToken,
+  component: lazy(() => import("../initial-access/CreateInitialAccessToken")),
   breadcrumb: (t) => t("clients:createToken"),
   access: "manage-clients",
 };
diff --git a/src/clients/routes/ImportClient.ts b/src/clients/routes/ImportClient.ts
index 46ead9eae4..b023e6c1c5 100644
--- a/src/clients/routes/ImportClient.ts
+++ b/src/clients/routes/ImportClient.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ImportForm } from "../import/ImportForm";
 
 export type ImportClientParams = { realm: string };
 
 export const ImportClientRoute: RouteDef = {
   path: "/:realm/clients/import-client",
-  component: ImportForm,
+  component: lazy(() => import("../import/ImportForm")),
   breadcrumb: (t) => t("clients:importClient"),
   access: "manage-clients",
 };
diff --git a/src/clients/routes/Mapper.ts b/src/clients/routes/Mapper.ts
index e840c6891e..9cbcb1b914 100644
--- a/src/clients/routes/Mapper.ts
+++ b/src/clients/routes/Mapper.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { MappingDetails } from "../../client-scopes/details/MappingDetails";
+import { lazy } from "react";
 
 export type MapperParams = {
   realm: string;
@@ -11,7 +11,7 @@ export type MapperParams = {
 
 export const MapperRoute: RouteDef = {
   path: "/:realm/clients/:id/mappers/:mapperId",
-  component: MappingDetails,
+  component: lazy(() => import("../../client-scopes/details/MappingDetails")),
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-clients",
 };
diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx
index 7b9018ea3b..9d050fb543 100644
--- a/src/dashboard/Dashboard.tsx
+++ b/src/dashboard/Dashboard.tsx
@@ -165,7 +165,7 @@ const Dashboard = () => {
   );
 };
 
-export const DashboardSection = () => {
+export default function DashboardSection() {
   const { realm } = useRealm();
   const isMasterRealm = realm === "master";
   return (
@@ -174,4 +174,4 @@ export const DashboardSection = () => {
       {isMasterRealm && <Dashboard />}
     </>
   );
-};
+}
diff --git a/src/dashboard/routes/Dashboard.ts b/src/dashboard/routes/Dashboard.ts
index 9a2564c3c1..05942518ff 100644
--- a/src/dashboard/routes/Dashboard.ts
+++ b/src/dashboard/routes/Dashboard.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { DashboardSection } from "../Dashboard";
 
 export type DashboardParams = { realm?: string };
 
 export const DashboardRoute: RouteDef = {
   path: "/:realm?",
-  component: DashboardSection,
+  component: lazy(() => import("../Dashboard")),
   breadcrumb: (t) => t("common:home"),
   access: "anyone",
 };
diff --git a/src/events/EventsSection.tsx b/src/events/EventsSection.tsx
index bf28716a1c..51c3f09777 100644
--- a/src/events/EventsSection.tsx
+++ b/src/events/EventsSection.tsx
@@ -84,7 +84,7 @@ const DetailCell = (event: EventRepresentation) => (
   </DescriptionList>
 );
 
-export const EventsSection = () => {
+export default function EventsSection() {
   const { t } = useTranslation("events");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -482,4 +482,4 @@ export const EventsSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/events/routes/Events.ts b/src/events/routes/Events.ts
index 2ae0cafd34..41a60ab2ca 100644
--- a/src/events/routes/Events.ts
+++ b/src/events/routes/Events.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { EventsSection } from "../EventsSection";
 
 export type EventsTab = "userEvents" | "adminEvents";
 
@@ -12,7 +12,7 @@ export type EventsParams = {
 
 export const EventsRoute: RouteDef = {
   path: "/:realm/events/:tab?",
-  component: EventsSection,
+  component: lazy(() => import("../EventsSection")),
   breadcrumb: (t) => t("events:title"),
   access: "view-events",
 };
diff --git a/src/groups/GroupsSection.tsx b/src/groups/GroupsSection.tsx
index dee9040e31..ef9e6dc58b 100644
--- a/src/groups/GroupsSection.tsx
+++ b/src/groups/GroupsSection.tsx
@@ -26,7 +26,7 @@ import { GroupsModal } from "./GroupsModal";
 
 import "./GroupsSection.css";
 
-export const GroupsSection = () => {
+export default function GroupsSection() {
   const { t } = useTranslation("groups");
   const [activeTab, setActiveTab] = useState(0);
 
@@ -174,4 +174,4 @@ export const GroupsSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/groups/SearchGroups.tsx b/src/groups/SearchGroups.tsx
index d4517e79e3..95adeac5af 100644
--- a/src/groups/SearchGroups.tsx
+++ b/src/groups/SearchGroups.tsx
@@ -29,7 +29,7 @@ type SearchGroup = GroupRepresentation & {
   link?: string;
 };
 
-export const SearchGroups = () => {
+export default function SearchGroups() {
   const { t } = useTranslation("groups");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -185,4 +185,4 @@ export const SearchGroups = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/groups/routes/Groups.tsx b/src/groups/routes/Groups.tsx
index 84b1057f77..c2ba2fb63a 100644
--- a/src/groups/routes/Groups.tsx
+++ b/src/groups/routes/Groups.tsx
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { GroupsSection } from "../GroupsSection";
 
 export type GroupsParams = { realm: string };
 
 export const GroupsRoute: RouteDef = {
   path: "/:realm/groups",
-  component: GroupsSection,
+  component: lazy(() => import("../GroupsSection")),
   access: "query-groups",
   matchOptions: {
     exact: false,
diff --git a/src/groups/routes/GroupsSearch.tsx b/src/groups/routes/GroupsSearch.tsx
index d8be74dbd7..905de81c7a 100644
--- a/src/groups/routes/GroupsSearch.tsx
+++ b/src/groups/routes/GroupsSearch.tsx
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { SearchGroups } from "../SearchGroups";
 
 export type GroupsSearchParams = { realm: string };
 
 export const GroupsSearchRoute: RouteDef = {
   path: "/:realm/groups/search",
-  component: SearchGroups,
+  component: lazy(() => import("../SearchGroups")),
   breadcrumb: (t) => t("groups:searchGroups"),
   access: "query-groups",
 };
diff --git a/src/identity-providers/IdentityProvidersSection.tsx b/src/identity-providers/IdentityProvidersSection.tsx
index 6f648148e5..e75cdf7b59 100644
--- a/src/identity-providers/IdentityProvidersSection.tsx
+++ b/src/identity-providers/IdentityProvidersSection.tsx
@@ -37,7 +37,7 @@ import { ManageOderDialog } from "./ManageOrderDialog";
 import { toIdentityProvider } from "./routes/IdentityProvider";
 import { toIdentityProviderCreate } from "./routes/IdentityProviderCreate";
 
-export const IdentityProvidersSection = () => {
+export default function IdentityProvidersSection() {
   const { t } = useTranslation("identity-providers");
   const identityProviders = _.groupBy(
     useServerInfo().identityProviders,
@@ -269,4 +269,4 @@ export const IdentityProvidersSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/identity-providers/add/AddIdentityProvider.tsx b/src/identity-providers/add/AddIdentityProvider.tsx
index 4edcb4828a..06a957665c 100644
--- a/src/identity-providers/add/AddIdentityProvider.tsx
+++ b/src/identity-providers/add/AddIdentityProvider.tsx
@@ -20,7 +20,7 @@ import { GeneralSettings } from "./GeneralSettings";
 import { toIdentityProvider } from "../routes/IdentityProvider";
 import type { IdentityProviderCreateParams } from "../routes/IdentityProviderCreate";
 
-export const AddIdentityProvider = () => {
+export default function AddIdentityProvider() {
   const { t } = useTranslation("identity-providers");
   const { providerId } = useParams<IdentityProviderCreateParams>();
   const form = useForm<IdentityProviderRepresentation>();
@@ -92,4 +92,4 @@ export const AddIdentityProvider = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/identity-providers/add/AddMapper.tsx b/src/identity-providers/add/AddMapper.tsx
index 0a4948aaef..260ec74afd 100644
--- a/src/identity-providers/add/AddMapper.tsx
+++ b/src/identity-providers/add/AddMapper.tsx
@@ -47,7 +47,7 @@ type Role = RoleRepresentation & {
   clientId?: string;
 };
 
-export const AddMapper = () => {
+export default function AddMapper() {
   const { t } = useTranslation("identity-providers");
 
   const form = useForm<IdPMapperRepresentationWithAttributes>();
@@ -901,4 +901,4 @@ export const AddMapper = () => {
       </FormAccess>
     </PageSection>
   );
-};
+}
diff --git a/src/identity-providers/add/AddOpenIdConnect.tsx b/src/identity-providers/add/AddOpenIdConnect.tsx
index fea58e83f1..96427464c5 100644
--- a/src/identity-providers/add/AddOpenIdConnect.tsx
+++ b/src/identity-providers/add/AddOpenIdConnect.tsx
@@ -23,7 +23,7 @@ type DiscoveryIdentity = IdentityProviderRepresentation & {
   discoveryEndpoint?: string;
 };
 
-export const AddOpenIdConnect = () => {
+export default function AddOpenIdConnect() {
   const { t } = useTranslation("identity-providers");
   const history = useHistory();
   const { url } = useRouteMatch();
@@ -97,4 +97,4 @@ export const AddOpenIdConnect = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/identity-providers/add/AddSamlConnect.tsx b/src/identity-providers/add/AddSamlConnect.tsx
index 0ed36b73dd..dafbe4f421 100644
--- a/src/identity-providers/add/AddSamlConnect.tsx
+++ b/src/identity-providers/add/AddSamlConnect.tsx
@@ -18,7 +18,7 @@ import { SamlConnectSettings } from "./SamlConnectSettings";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { useAlerts } from "../../components/alert/Alerts";
 
-export const AddSamlConnect = () => {
+export default function AddSamlConnect() {
   const { t } = useTranslation("identity-providers");
   const history = useHistory();
   const id = "saml";
@@ -89,4 +89,4 @@ export const AddSamlConnect = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/identity-providers/add/DetailSettings.tsx b/src/identity-providers/add/DetailSettings.tsx
index 14673a98b4..a781b2da3c 100644
--- a/src/identity-providers/add/DetailSettings.tsx
+++ b/src/identity-providers/add/DetailSettings.tsx
@@ -101,7 +101,7 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
   );
 };
 
-export const DetailSettings = () => {
+export default function DetailSettings() {
   const { t } = useTranslation("identity-providers");
   const { alias, providerId } = useParams<IdentityProviderParams>();
 
@@ -397,4 +397,4 @@ export const DetailSettings = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/identity-providers/routes/AddMapper.ts b/src/identity-providers/routes/AddMapper.ts
index 582192bb26..b69174d597 100644
--- a/src/identity-providers/routes/AddMapper.ts
+++ b/src/identity-providers/routes/AddMapper.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddMapper } from "../add/AddMapper";
 
 export type IdentityProviderAddMapperParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type IdentityProviderAddMapperParams = {
 
 export const IdentityProviderAddMapperRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/:tab/create",
-  component: AddMapper,
+  component: lazy(() => import("../add/AddMapper")),
   access: "manage-identity-providers",
   breadcrumb: (t) => t("identity-providers:addIdPMapper"),
 };
diff --git a/src/identity-providers/routes/EditMapper.ts b/src/identity-providers/routes/EditMapper.ts
index 45684037b2..98a7945fcb 100644
--- a/src/identity-providers/routes/EditMapper.ts
+++ b/src/identity-providers/routes/EditMapper.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddMapper } from "../add/AddMapper";
 
 export type IdentityProviderEditMapperParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type IdentityProviderEditMapperParams = {
 
 export const IdentityProviderEditMapperRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/mappers/:id",
-  component: AddMapper,
+  component: lazy(() => import("../add/AddMapper")),
   access: "manage-identity-providers",
   breadcrumb: (t) => t("identity-providers:editIdPMapper"),
 };
diff --git a/src/identity-providers/routes/IdentityProvider.ts b/src/identity-providers/routes/IdentityProvider.ts
index bc351538cf..0fb42b4d62 100644
--- a/src/identity-providers/routes/IdentityProvider.ts
+++ b/src/identity-providers/routes/IdentityProvider.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { DetailSettings } from "../add/DetailSettings";
 
 type IdentityProviderTabs = "settings" | "mappers";
 
@@ -14,7 +14,7 @@ export type IdentityProviderParams = {
 
 export const IdentityProviderRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/:alias/:tab",
-  component: DetailSettings,
+  component: lazy(() => import("../add/DetailSettings")),
   breadcrumb: (t) => t("identity-providers:providerDetails"),
   access: "manage-identity-providers",
 };
diff --git a/src/identity-providers/routes/IdentityProviderCreate.ts b/src/identity-providers/routes/IdentityProviderCreate.ts
index 634272a1ee..17b916c5ed 100644
--- a/src/identity-providers/routes/IdentityProviderCreate.ts
+++ b/src/identity-providers/routes/IdentityProviderCreate.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddIdentityProvider } from "../add/AddIdentityProvider";
 
 export type IdentityProviderCreateParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type IdentityProviderCreateParams = {
 
 export const IdentityProviderCreateRoute: RouteDef = {
   path: "/:realm/identity-providers/:providerId/add",
-  component: AddIdentityProvider,
+  component: lazy(() => import("../add/AddIdentityProvider")),
   breadcrumb: (t) => t("identity-providers:addProvider"),
   access: "manage-identity-providers",
 };
diff --git a/src/identity-providers/routes/IdentityProviderKeycloakOidc.ts b/src/identity-providers/routes/IdentityProviderKeycloakOidc.ts
index 1541f7da43..8fbb4b0958 100644
--- a/src/identity-providers/routes/IdentityProviderKeycloakOidc.ts
+++ b/src/identity-providers/routes/IdentityProviderKeycloakOidc.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddOpenIdConnect } from "../add/AddOpenIdConnect";
 
 export type IdentityProviderKeycloakOidcParams = { realm: string };
 
 export const IdentityProviderKeycloakOidcRoute: RouteDef = {
   path: "/:realm/identity-providers/keycloak-oidc/add",
-  component: AddOpenIdConnect,
+  component: lazy(() => import("../add/AddOpenIdConnect")),
   breadcrumb: (t) => t("identity-providers:addKeycloakOpenIdProvider"),
   access: "manage-identity-providers",
 };
diff --git a/src/identity-providers/routes/IdentityProviderOidc.ts b/src/identity-providers/routes/IdentityProviderOidc.ts
index dde40a1684..8d688aee6a 100644
--- a/src/identity-providers/routes/IdentityProviderOidc.ts
+++ b/src/identity-providers/routes/IdentityProviderOidc.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddOpenIdConnect } from "../add/AddOpenIdConnect";
 
 export type IdentityProviderOidcParams = { realm: string };
 
 export const IdentityProviderOidcRoute: RouteDef = {
   path: "/:realm/identity-providers/oidc/add",
-  component: AddOpenIdConnect,
+  component: lazy(() => import("../add/AddOpenIdConnect")),
   breadcrumb: (t) => t("identity-providers:addOpenIdProvider"),
   access: "manage-identity-providers",
 };
diff --git a/src/identity-providers/routes/IdentityProviderSaml.ts b/src/identity-providers/routes/IdentityProviderSaml.ts
index 04a548ac22..6e670ae7e9 100644
--- a/src/identity-providers/routes/IdentityProviderSaml.ts
+++ b/src/identity-providers/routes/IdentityProviderSaml.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AddSamlConnect } from "../add/AddSamlConnect";
 
 export type IdentityProviderSamlParams = { realm: string };
 
 export const IdentityProviderSamlRoute: RouteDef = {
   path: "/:realm/identity-providers/saml/add",
-  component: AddSamlConnect,
+  component: lazy(() => import("../add/AddSamlConnect")),
   breadcrumb: (t) => t("identity-providers:addSamlProvider"),
   access: "manage-identity-providers",
 };
diff --git a/src/identity-providers/routes/IdentityProviders.ts b/src/identity-providers/routes/IdentityProviders.ts
index 433e6ce5f8..d4cae21350 100644
--- a/src/identity-providers/routes/IdentityProviders.ts
+++ b/src/identity-providers/routes/IdentityProviders.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { IdentityProvidersSection } from "../IdentityProvidersSection";
 
 export type IdentityProvidersParams = { realm: string };
 
 export const IdentityProvidersRoute: RouteDef = {
   path: "/:realm/identity-providers",
-  component: IdentityProvidersSection,
+  component: lazy(() => import("../IdentityProvidersSection")),
   breadcrumb: (t) => t("identityProviders"),
   access: "view-identity-providers",
 };
diff --git a/src/realm-roles/RealmRoleTabs.tsx b/src/realm-roles/RealmRoleTabs.tsx
index d1f4acd887..30ae8c919e 100644
--- a/src/realm-roles/RealmRoleTabs.tsx
+++ b/src/realm-roles/RealmRoleTabs.tsx
@@ -42,7 +42,7 @@ type myRealmRepresentation = RealmRepresentation & {
   };
 };
 
-export const RealmRoleTabs = () => {
+export default function RealmRoleTabs() {
   const { t } = useTranslation("roles");
   const form = useForm<RoleFormType>({ mode: "onChange" });
   const history = useHistory();
@@ -408,4 +408,4 @@ export const RealmRoleTabs = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-roles/RealmRolesSection.tsx b/src/realm-roles/RealmRolesSection.tsx
index ffc2923271..008046a6f3 100644
--- a/src/realm-roles/RealmRolesSection.tsx
+++ b/src/realm-roles/RealmRolesSection.tsx
@@ -4,7 +4,7 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useAdminClient } from "../context/auth/AdminClient";
 import { RolesList } from "./RolesList";
 
-export const RealmRolesSection = () => {
+export default function RealmRolesSection() {
   const adminClient = useAdminClient();
 
   const loader = (first?: number, max?: number, search?: string) => {
@@ -30,4 +30,4 @@ export const RealmRolesSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-roles/routes/AddRole.ts b/src/realm-roles/routes/AddRole.ts
index 72a9fb5bf5..e1569d2c00 100644
--- a/src/realm-roles/routes/AddRole.ts
+++ b/src/realm-roles/routes/AddRole.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmRoleTabs } from "../RealmRoleTabs";
 
 export type AddRoleParams = { realm: string };
 
 export const AddRoleRoute: RouteDef = {
   path: "/:realm/roles/add-role",
-  component: RealmRoleTabs,
+  component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:createRole"),
   access: "manage-realm",
 };
diff --git a/src/realm-roles/routes/AddRoleToClient.ts b/src/realm-roles/routes/AddRoleToClient.ts
index 1ab28b7347..1a6e2dcf06 100644
--- a/src/realm-roles/routes/AddRoleToClient.ts
+++ b/src/realm-roles/routes/AddRoleToClient.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmRoleTabs } from "../RealmRoleTabs";
 
 export type AddRoleToClientParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type AddRoleToClientParams = {
 
 export const AddRoleToClientRoute: RouteDef = {
   path: "/:realm/clients/:clientId/roles/add-role",
-  component: RealmRoleTabs,
+  component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:createRole"),
   access: "manage-realm",
 };
diff --git a/src/realm-roles/routes/ClientRole.ts b/src/realm-roles/routes/ClientRole.ts
index b6c3939ebc..41026ce810 100644
--- a/src/realm-roles/routes/ClientRole.ts
+++ b/src/realm-roles/routes/ClientRole.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmRoleTabs } from "../RealmRoleTabs";
 
 export type ClientRoleTab = "details" | "attributes" | "users-in-role";
 
@@ -14,7 +14,7 @@ export type ClientRoleParams = {
 
 export const ClientRoleRoute: RouteDef = {
   path: "/:realm/clients/:clientId/roles/:id/:tab?",
-  component: RealmRoleTabs,
+  component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:roleDetails"),
   access: "view-realm",
 };
diff --git a/src/realm-roles/routes/RealmRole.ts b/src/realm-roles/routes/RealmRole.ts
index 6bb0454708..925836ef9a 100644
--- a/src/realm-roles/routes/RealmRole.ts
+++ b/src/realm-roles/routes/RealmRole.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router";
 import type { RouteDef } from "../../route-config";
-import { RealmRoleTabs } from "../RealmRoleTabs";
 
 export type RealmRoleTab =
   | "details"
@@ -17,7 +17,7 @@ export type RealmRoleParams = {
 
 export const RealmRoleRoute: RouteDef = {
   path: "/:realm/roles/:id/:tab?",
-  component: RealmRoleTabs,
+  component: lazy(() => import("../RealmRoleTabs")),
   breadcrumb: (t) => t("roles:roleDetails"),
   access: ["view-realm", "view-users"],
 };
diff --git a/src/realm-roles/routes/RealmRoles.ts b/src/realm-roles/routes/RealmRoles.ts
index 36ad75a2c3..00fbe852b2 100644
--- a/src/realm-roles/routes/RealmRoles.ts
+++ b/src/realm-roles/routes/RealmRoles.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmRolesSection } from "../RealmRolesSection";
 
 export type RealmRolesParams = { realm: string };
 
 export const RealmRolesRoute: RouteDef = {
   path: "/:realm/roles",
-  component: RealmRolesSection,
+  component: lazy(() => import("../RealmRolesSection")),
   breadcrumb: (t) => t("roles:roleList"),
   access: "view-realm",
 };
diff --git a/src/realm-settings/ClientProfileForm.tsx b/src/realm-settings/ClientProfileForm.tsx
index f813c7ff9e..63a4a54c87 100644
--- a/src/realm-settings/ClientProfileForm.tsx
+++ b/src/realm-settings/ClientProfileForm.tsx
@@ -45,7 +45,7 @@ const defaultValues: ClientProfileForm = {
   executors: [],
 };
 
-export const ClientProfileForm = () => {
+export default function ClientProfileForm() {
   const { t } = useTranslation("realm-settings");
   const history = useHistory();
   const {
@@ -479,4 +479,4 @@ export const ClientProfileForm = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-settings/ExecutorForm.tsx b/src/realm-settings/ExecutorForm.tsx
index 39b5f633fb..278ab46020 100644
--- a/src/realm-settings/ExecutorForm.tsx
+++ b/src/realm-settings/ExecutorForm.tsx
@@ -35,7 +35,7 @@ const defaultValues: ExecutorForm = {
   executor: "",
 };
 
-export const ExecutorForm = () => {
+export default function ExecutorForm() {
   const { t } = useTranslation("realm-settings");
   const history = useHistory();
   const { realm, profileName } = useParams<ClientProfileParams>();
@@ -204,4 +204,4 @@ export const ExecutorForm = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-settings/NewClientPolicyCondition.tsx b/src/realm-settings/NewClientPolicyCondition.tsx
index bc6fc4f5c9..4a182272fb 100644
--- a/src/realm-settings/NewClientPolicyCondition.tsx
+++ b/src/realm-settings/NewClientPolicyCondition.tsx
@@ -26,7 +26,7 @@ import type ComponentTypeRepresentation from "@keycloak/keycloak-admin-client/li
 import { useRealm } from "../context/realm-context/RealmContext";
 import type { EditClientPolicyParams } from "./routes/EditClientPolicy";
 
-export const NewClientPolicyCondition = () => {
+export default function NewClientPolicyCondition() {
   const { t } = useTranslation("realm-settings");
   const { addAlert, addError } = useAlerts();
   const history = useHistory();
@@ -194,4 +194,4 @@ export const NewClientPolicyCondition = () => {
       </FormPanel>
     </PageSection>
   );
-};
+}
diff --git a/src/realm-settings/NewClientPolicyForm.tsx b/src/realm-settings/NewClientPolicyForm.tsx
index 4913ba46df..93b9b25e9d 100644
--- a/src/realm-settings/NewClientPolicyForm.tsx
+++ b/src/realm-settings/NewClientPolicyForm.tsx
@@ -56,7 +56,7 @@ type PolicyDetailAttributes = {
   name: string;
 };
 
-export const NewClientPolicyForm = () => {
+export default function NewClientPolicyForm() {
   const { t } = useTranslation("realm-settings");
   const { errors, reset: resetForm } = useForm<NewClientPolicyForm>({
     defaultValues,
@@ -655,4 +655,4 @@ export const NewClientPolicyForm = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-settings/ProfilesTab.tsx b/src/realm-settings/ProfilesTab.tsx
index 5c0428cf9a..aac1e0e767 100644
--- a/src/realm-settings/ProfilesTab.tsx
+++ b/src/realm-settings/ProfilesTab.tsx
@@ -24,14 +24,15 @@ import { prettyPrintJSON } from "../util";
 import { Link } from "react-router-dom";
 import { toAddClientProfile } from "./routes/AddClientProfile";
 import type ClientProfileRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfileRepresentation";
-import "./RealmSettingsSection.css";
 import { toClientProfile } from "./routes/ClientProfile";
 
+import "./RealmSettingsSection.css";
+
 type ClientProfile = ClientProfileRepresentation & {
   global: boolean;
 };
 
-export const ProfilesTab = () => {
+export default function ProfilesTab() {
   const { t } = useTranslation("realm-settings");
   const adminClient = useAdminClient();
   const { realm } = useRealm();
@@ -281,4 +282,4 @@ export const ProfilesTab = () => {
       )}
     </>
   );
-};
+}
diff --git a/src/realm-settings/RealmSettingsSection.tsx b/src/realm-settings/RealmSettingsSection.tsx
index 22e4784123..43a1252e36 100644
--- a/src/realm-settings/RealmSettingsSection.tsx
+++ b/src/realm-settings/RealmSettingsSection.tsx
@@ -87,7 +87,7 @@ const sortByPriority = (components: ComponentRepresentation[]) => {
   return sortedComponents;
 };
 
-export const RealmSettingsSection = () => {
+export default function RealmSettingsSection() {
   const adminClient = useAdminClient();
   const { realm: realmName } = useRealm();
   const [realm, setRealm] = useState<RealmRepresentation>();
@@ -130,4 +130,4 @@ export const RealmSettingsSection = () => {
       realmComponents={realmComponents}
     />
   );
-};
+}
diff --git a/src/realm-settings/RealmSettingsTabs.tsx b/src/realm-settings/RealmSettingsTabs.tsx
index bb0d184d08..ddb7289ad1 100644
--- a/src/realm-settings/RealmSettingsTabs.tsx
+++ b/src/realm-settings/RealmSettingsTabs.tsx
@@ -40,7 +40,7 @@ import { SecurityDefences } from "./security-defences/SecurityDefences";
 import { RealmSettingsSessionsTab } from "./SessionsTab";
 import { RealmSettingsThemesTab } from "./ThemesTab";
 import { RealmSettingsTokensTab } from "./TokensTab";
-import { ProfilesTab } from "./ProfilesTab";
+import ProfilesTab from "./ProfilesTab";
 import { PoliciesTab } from "./PoliciesTab";
 import { PartialImportDialog } from "./PartialImport";
 import { PartialExportDialog } from "./PartialExport";
diff --git a/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx b/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx
index 244860d5e4..a8473849bf 100644
--- a/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/aes-generated/AESGeneratedForm.tsx
@@ -92,7 +92,7 @@ export const AESGeneratedForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active
+        component.config.active
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -338,7 +338,7 @@ export const AESGeneratedForm = ({
   );
 };
 
-export const AESGeneratedSettings = () => {
+export default function AESGeneratedSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -351,4 +351,4 @@ export const AESGeneratedSettings = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx b/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx
index f11aa91bc8..dc25398ff5 100644
--- a/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/ecdsa-generated/ECDSAGeneratedForm.tsx
@@ -92,7 +92,7 @@ export const ECDSAGeneratedForm = ({
       if (
         key === "config" &&
         component.config?.ecdsaEllipticCurveKey &&
-        component.config?.active
+        component.config.active
       ) {
         form.setValue("config.secretSize", value.ecdsaEllipticCurveKey[0]);
 
@@ -329,7 +329,7 @@ export const ECDSAGeneratedForm = ({
   );
 };
 
-export const ECDSAGeneratedSettings = () => {
+export default function ECDSAGeneratedSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -342,4 +342,4 @@ export const ECDSAGeneratedSettings = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx b/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx
index 08a0fcf9c5..d7f5eb306c 100644
--- a/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/hmac-generated/HMACGeneratedForm.tsx
@@ -94,8 +94,8 @@ export const HMACGeneratedForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active &&
-        component.config?.algorithm
+        component.config.active &&
+        component.config.algorithm
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -380,7 +380,7 @@ export const HMACGeneratedForm = ({
   );
 };
 
-export const HMACGeneratedSettings = () => {
+export default function HMACGeneratedSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -393,4 +393,4 @@ export const HMACGeneratedSettings = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx b/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx
index 586de2e95a..f56176bb02 100644
--- a/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx
+++ b/src/realm-settings/key-providers/java-keystore/JavaKeystoreForm.tsx
@@ -92,12 +92,12 @@ export const JavaKeystoreForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active &&
-        component.config?.algorithm &&
-        component.config?.keystore &&
-        component.config?.keystorePassword &&
-        component.config?.keyAlias &&
-        component.config?.keyPassword
+        component.config.active &&
+        component.config.algorithm &&
+        component.config.keystore &&
+        component.config.keystorePassword &&
+        component.config.keyAlias &&
+        component.config.keyPassword
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -449,7 +449,7 @@ export const JavaKeystoreForm = ({
   );
 };
 
-export const JavaKeystoreSettings = () => {
+export default function JavaKeystoreSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -462,4 +462,4 @@ export const JavaKeystoreSettings = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx b/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx
index 69b7d3375d..fe12c812bd 100644
--- a/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx
+++ b/src/realm-settings/key-providers/rsa-generated/RSAGeneratedForm.tsx
@@ -94,8 +94,8 @@ export const RSAGeneratedForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active &&
-        component.config?.algorithm
+        component.config.active &&
+        component.config.algorithm
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -381,7 +381,7 @@ export const RSAGeneratedForm = ({
   );
 };
 
-export const RSAGeneratedSettings = () => {
+export default function RSAGeneratedSettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -394,4 +394,4 @@ export const RSAGeneratedSettings = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-settings/key-providers/rsa/RSAForm.tsx b/src/realm-settings/key-providers/rsa/RSAForm.tsx
index 727ade955d..3234137ebb 100644
--- a/src/realm-settings/key-providers/rsa/RSAForm.tsx
+++ b/src/realm-settings/key-providers/rsa/RSAForm.tsx
@@ -99,10 +99,10 @@ export const RSAForm = ({
       if (
         key === "config" &&
         component.config?.secretSize &&
-        component.config?.active &&
-        component.config?.algorithm &&
-        component.config?.privateKey &&
-        component.config?.certificate
+        component.config.active &&
+        component.config.algorithm &&
+        component.config.privateKey &&
+        component.config.certificate
       ) {
         form.setValue("config.secretSize", value.secretSize[0]);
 
@@ -407,7 +407,7 @@ export const RSAForm = ({
   );
 };
 
-export const RSASettings = () => {
+export default function RSASettings() {
   const { t } = useTranslation("realm-settings");
   const providerId = useRouteMatch<MatchParams>(
     "/:realm/realm-settings/keys/:id?/:providerType?/settings"
@@ -420,4 +420,4 @@ export const RSASettings = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm-settings/routes/AddClientPolicy.ts b/src/realm-settings/routes/AddClientPolicy.ts
index 6f6be416c1..27f2a1d564 100644
--- a/src/realm-settings/routes/AddClientPolicy.ts
+++ b/src/realm-settings/routes/AddClientPolicy.ts
@@ -1,14 +1,14 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewClientPolicyForm } from "../NewClientPolicyForm";
 import { NewPolicyCrumb } from "../RealmSettingsSection";
 
 export type AddClientPolicyParams = { realm: string };
 
 export const AddClientPolicyRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/add-client-policy",
-  component: NewClientPolicyForm,
+  component: lazy(() => import("../NewClientPolicyForm")),
   breadcrumb: () => NewPolicyCrumb,
   access: "manage-clients",
 };
diff --git a/src/realm-settings/routes/AddClientProfile.ts b/src/realm-settings/routes/AddClientProfile.ts
index a02e79f83f..d6b480b0ea 100644
--- a/src/realm-settings/routes/AddClientProfile.ts
+++ b/src/realm-settings/routes/AddClientProfile.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientProfileForm } from "../ClientProfileForm";
 
 export type AddClientProfileParams = {
   realm: string;
@@ -9,7 +9,7 @@ export type AddClientProfileParams = {
 
 export const AddClientProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/add-profile",
-  component: ClientProfileForm,
+  component: lazy(() => import("../ClientProfileForm")),
   breadcrumb: (t) => t("realm-settings:newClientProfile"),
   access: "manage-realm",
 };
diff --git a/src/realm-settings/routes/AddCondition.ts b/src/realm-settings/routes/AddCondition.ts
index 35570011ea..7748aba60b 100644
--- a/src/realm-settings/routes/AddCondition.ts
+++ b/src/realm-settings/routes/AddCondition.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewClientPolicyCondition } from "../NewClientPolicyCondition";
 
 export type NewClientPolicyConditionParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type NewClientPolicyConditionParams = {
 
 export const NewClientPolicyConditionRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/:policyName?/edit-policy/create-condition",
-  component: NewClientPolicyCondition,
+  component: lazy(() => import("../NewClientPolicyCondition")),
   breadcrumb: (t) => t("realm-settings:addCondition"),
   access: "manage-clients",
 };
diff --git a/src/realm-settings/routes/AddExecutor.ts b/src/realm-settings/routes/AddExecutor.ts
index b080674b8a..963176c665 100644
--- a/src/realm-settings/routes/AddExecutor.ts
+++ b/src/realm-settings/routes/AddExecutor.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ExecutorForm } from "../ExecutorForm";
 
 export type AddExecutorParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type AddExecutorParams = {
 
 export const AddExecutorRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/:profileName/add-executor",
-  component: ExecutorForm,
+  component: lazy(() => import("../ExecutorForm")),
   breadcrumb: (t) => t("realm-settings:addExecutor"),
   access: "manage-realm",
 };
diff --git a/src/realm-settings/routes/AesGeneratedSettings.ts b/src/realm-settings/routes/AesGeneratedSettings.ts
index aadc14eb3f..b357113ad4 100644
--- a/src/realm-settings/routes/AesGeneratedSettings.ts
+++ b/src/realm-settings/routes/AesGeneratedSettings.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { AESGeneratedSettings } from "../key-providers/aes-generated/AESGeneratedForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type AesGeneratedSettingsParams = {
@@ -11,7 +11,9 @@ export type AesGeneratedSettingsParams = {
 
 export const AesGeneratedSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/aes-generated/settings",
-  component: AESGeneratedSettings,
+  component: lazy(
+    () => import("../key-providers/aes-generated/AESGeneratedForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };
diff --git a/src/realm-settings/routes/ClientPolicies.ts b/src/realm-settings/routes/ClientPolicies.ts
index 0d21b0a891..b6d16b9a47 100644
--- a/src/realm-settings/routes/ClientPolicies.ts
+++ b/src/realm-settings/routes/ClientPolicies.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ProfilesTab } from "../ProfilesTab";
 
 export type ClientPoliciesParams = {
   realm: string;
@@ -9,7 +9,7 @@ export type ClientPoliciesParams = {
 
 export const ClientPoliciesRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies",
-  component: ProfilesTab,
+  component: lazy(() => import("../ProfilesTab")),
   breadcrumb: (t) => t("realm-settings:allClientPolicies"),
   access: "view-realm",
 };
diff --git a/src/realm-settings/routes/ClientProfile.ts b/src/realm-settings/routes/ClientProfile.ts
index 7a78f0b2e8..5b1ece3520 100644
--- a/src/realm-settings/routes/ClientProfile.ts
+++ b/src/realm-settings/routes/ClientProfile.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ClientProfileForm } from "../ClientProfileForm";
 
 export type ClientProfileParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type ClientProfileParams = {
 
 export const ClientProfileRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/:profileName/edit-profile",
-  component: ClientProfileForm,
+  component: lazy(() => import("../ClientProfileForm")),
   breadcrumb: (t) => t("realm-settings:clientProfile"),
   access: ["view-realm", "view-users"],
 };
diff --git a/src/realm-settings/routes/EcdsaGeneratedSettings.ts b/src/realm-settings/routes/EcdsaGeneratedSettings.ts
index 51d854ec77..7ef630a34c 100644
--- a/src/realm-settings/routes/EcdsaGeneratedSettings.ts
+++ b/src/realm-settings/routes/EcdsaGeneratedSettings.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { ECDSAGeneratedSettings } from "../key-providers/ecdsa-generated/ECDSAGeneratedForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type EcdsaGeneratedSettingsParams = {
@@ -11,7 +11,9 @@ export type EcdsaGeneratedSettingsParams = {
 
 export const EcdsaGeneratedSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/ecdsa-generated/settings",
-  component: ECDSAGeneratedSettings,
+  component: lazy(
+    () => import("../key-providers/ecdsa-generated/ECDSAGeneratedForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };
diff --git a/src/realm-settings/routes/EditClientPolicy.ts b/src/realm-settings/routes/EditClientPolicy.ts
index 253668e7ae..20ba9af88d 100644
--- a/src/realm-settings/routes/EditClientPolicy.ts
+++ b/src/realm-settings/routes/EditClientPolicy.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewClientPolicyForm } from "../NewClientPolicyForm";
 import { EditPolicyCrumb } from "../RealmSettingsSection";
 
 export type EditClientPolicyParams = {
@@ -11,7 +11,7 @@ export type EditClientPolicyParams = {
 
 export const EditClientPolicyRoute: RouteDef = {
   path: "/:realm/realm-settings/clientPolicies/:policyName/edit-policy",
-  component: NewClientPolicyForm,
+  component: lazy(() => import("../NewClientPolicyForm")),
   access: "manage-realm",
   breadcrumb: () => EditPolicyCrumb,
 };
diff --git a/src/realm-settings/routes/HmacGeneratedSettings.ts b/src/realm-settings/routes/HmacGeneratedSettings.ts
index ff4c5dcda5..a721237f2f 100644
--- a/src/realm-settings/routes/HmacGeneratedSettings.ts
+++ b/src/realm-settings/routes/HmacGeneratedSettings.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { HMACGeneratedSettings } from "../key-providers/hmac-generated/HMACGeneratedForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type HmacGeneratedSettingsParams = {
@@ -11,7 +11,9 @@ export type HmacGeneratedSettingsParams = {
 
 export const HmacGeneratedSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/hmac-generated/settings",
-  component: HMACGeneratedSettings,
+  component: lazy(
+    () => import("../key-providers/hmac-generated/HMACGeneratedForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };
diff --git a/src/realm-settings/routes/JavaKeystoreSettings.ts b/src/realm-settings/routes/JavaKeystoreSettings.ts
index 7b62f77aa6..77a156e559 100644
--- a/src/realm-settings/routes/JavaKeystoreSettings.ts
+++ b/src/realm-settings/routes/JavaKeystoreSettings.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { JavaKeystoreSettings } from "../key-providers/java-keystore/JavaKeystoreForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type JavaKeystoreSettingsParams = {
@@ -11,7 +11,9 @@ export type JavaKeystoreSettingsParams = {
 
 export const JavaKeystoreSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/java-keystore/settings",
-  component: JavaKeystoreSettings,
+  component: lazy(
+    () => import("../key-providers/java-keystore/JavaKeystoreForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };
diff --git a/src/realm-settings/routes/RealmSettings.ts b/src/realm-settings/routes/RealmSettings.ts
index 5f6a725f93..a232524de8 100644
--- a/src/realm-settings/routes/RealmSettings.ts
+++ b/src/realm-settings/routes/RealmSettings.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RealmSettingsSection } from "../RealmSettingsSection";
 
 export type RealmSettingsTab =
   | "general"
@@ -22,7 +22,7 @@ export type RealmSettingsParams = {
 
 export const RealmSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/:tab?",
-  component: RealmSettingsSection,
+  component: lazy(() => import("../RealmSettingsSection")),
   breadcrumb: (t) => t("realmSettings"),
   access: "view-realm",
 };
diff --git a/src/realm-settings/routes/RsaGeneratedSettings.ts b/src/realm-settings/routes/RsaGeneratedSettings.ts
index 9eb77fbe59..cf507df94e 100644
--- a/src/realm-settings/routes/RsaGeneratedSettings.ts
+++ b/src/realm-settings/routes/RsaGeneratedSettings.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RSAGeneratedSettings } from "../key-providers/rsa-generated/RSAGeneratedForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type RsaGeneratedSettingsParams = {
@@ -11,7 +11,9 @@ export type RsaGeneratedSettingsParams = {
 
 export const RsaGeneratedSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/rsa-generated/settings",
-  component: RSAGeneratedSettings,
+  component: lazy(
+    () => import("../key-providers/rsa-generated/RSAGeneratedForm")
+  ),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };
diff --git a/src/realm-settings/routes/RsaSettings.ts b/src/realm-settings/routes/RsaSettings.ts
index ac757989a2..09fddb3de8 100644
--- a/src/realm-settings/routes/RsaSettings.ts
+++ b/src/realm-settings/routes/RsaSettings.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { RSASettings } from "../key-providers/rsa/RSAForm";
 import { EditProviderCrumb } from "../RealmSettingsSection";
 
 export type RsaSettingsParams = {
@@ -11,7 +11,7 @@ export type RsaSettingsParams = {
 
 export const RsaSettingsRoute: RouteDef = {
   path: "/:realm/realm-settings/keys/:id/rsa/settings",
-  component: RSASettings,
+  component: lazy(() => import("../key-providers/rsa/RSAForm")),
   breadcrumb: () => EditProviderCrumb,
   access: "view-realm",
 };
diff --git a/src/realm/add/NewRealmForm.tsx b/src/realm/add/NewRealmForm.tsx
index 44f78ae786..146f5d2295 100644
--- a/src/realm/add/NewRealmForm.tsx
+++ b/src/realm/add/NewRealmForm.tsx
@@ -21,7 +21,7 @@ import { useRealm } from "../../context/realm-context/RealmContext";
 import { useWhoAmI } from "../../context/whoami/WhoAmI";
 import { toDashboard } from "../../dashboard/routes/Dashboard";
 
-export const NewRealmForm = () => {
+export default function NewRealmForm() {
   const { t } = useTranslation("realm");
   const history = useHistory();
   const { refresh } = useWhoAmI();
@@ -111,4 +111,4 @@ export const NewRealmForm = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/realm/routes/AddRealm.ts b/src/realm/routes/AddRealm.ts
index 2f5d4125af..b1cbbae6a8 100644
--- a/src/realm/routes/AddRealm.ts
+++ b/src/realm/routes/AddRealm.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { NewRealmForm } from "../add/NewRealmForm";
 
 export type AddRealmParams = { realm: string };
 
 export const AddRealmRoute: RouteDef = {
   path: "/:realm/add-realm",
-  component: NewRealmForm,
+  component: lazy(() => import("../add/NewRealmForm")),
   breadcrumb: (t) => t("realm:createRealm"),
   access: "manage-realm",
 };
diff --git a/src/sessions/SessionsSection.tsx b/src/sessions/SessionsSection.tsx
index 1e6a5ec79a..c544039c71 100644
--- a/src/sessions/SessionsSection.tsx
+++ b/src/sessions/SessionsSection.tsx
@@ -35,7 +35,7 @@ const Clients = (row: UserSessionRepresentation) => {
   );
 };
 
-export const SessionsSection = () => {
+export default function SessionsSection() {
   const { t } = useTranslation("sessions");
   const adminClient = useAdminClient();
   const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
@@ -213,4 +213,4 @@ export const SessionsSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/sessions/routes/Sessions.ts b/src/sessions/routes/Sessions.ts
index 9516fd4961..5e225490ae 100644
--- a/src/sessions/routes/Sessions.ts
+++ b/src/sessions/routes/Sessions.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { SessionsSection } from "../SessionsSection";
 
 export type SessionsParams = { realm: string };
 
 export const SessionsRoute: RouteDef = {
   path: "/:realm/sessions",
-  component: SessionsSection,
+  component: lazy(() => import("../SessionsSection")),
   breadcrumb: (t) => t("sessions:title"),
   access: "view-realm",
 };
diff --git a/src/user-federation/UserFederationKerberosSettings.tsx b/src/user-federation/UserFederationKerberosSettings.tsx
index 7a88426e1c..14c2c5c108 100644
--- a/src/user-federation/UserFederationKerberosSettings.tsx
+++ b/src/user-federation/UserFederationKerberosSettings.tsx
@@ -79,7 +79,7 @@ const KerberosSettingsHeader = ({
   );
 };
 
-export const UserFederationKerberosSettings = () => {
+export default function UserFederationKerberosSettings() {
   const { t } = useTranslation("user-federation");
   const form = useForm<ComponentRepresentation>({ mode: "onChange" });
   const history = useHistory();
@@ -199,4 +199,4 @@ export const UserFederationKerberosSettings = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/user-federation/UserFederationLdapSettings.tsx b/src/user-federation/UserFederationLdapSettings.tsx
index 965751c097..606aeb4d19 100644
--- a/src/user-federation/UserFederationLdapSettings.tsx
+++ b/src/user-federation/UserFederationLdapSettings.tsx
@@ -172,7 +172,7 @@ const LdapSettingsHeader = ({
   );
 };
 
-export const UserFederationLdapSettings = () => {
+export default function UserFederationLdapSettings() {
   const { t } = useTranslation("user-federation");
   const form = useForm<ComponentRepresentation>({ mode: "onChange" });
   const history = useHistory();
@@ -373,4 +373,4 @@ export const UserFederationLdapSettings = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/user-federation/UserFederationSection.tsx b/src/user-federation/UserFederationSection.tsx
index 4adeea47f7..e0bf1a54d9 100644
--- a/src/user-federation/UserFederationSection.tsx
+++ b/src/user-federation/UserFederationSection.tsx
@@ -26,7 +26,7 @@ import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useRealm } from "../context/realm-context/RealmContext";
 import "./user-federation.css";
 
-export const UserFederationSection = () => {
+export default function UserFederationSection() {
   const [userFederations, setUserFederations] =
     useState<ComponentRepresentation[]>();
   const { addAlert, addError } = useAlerts();
@@ -205,4 +205,4 @@ export const UserFederationSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/user-federation/ldap/mappers/LdapMapperDetails.tsx b/src/user-federation/ldap/mappers/LdapMapperDetails.tsx
index 5f72d539fe..c80ebbc8e5 100644
--- a/src/user-federation/ldap/mappers/LdapMapperDetails.tsx
+++ b/src/user-federation/ldap/mappers/LdapMapperDetails.tsx
@@ -35,7 +35,7 @@ import { LdapMapperHardcodedAttribute } from "./LdapMapperHardcodedAttribute";
 import { LdapMapperRoleGroup } from "./LdapMapperRoleGroup";
 import { useRealm } from "../../../context/realm-context/RealmContext";
 
-export const LdapMapperDetails = () => {
+export default function LdapMapperDetails() {
   const form = useForm<ComponentRepresentation>();
   const [mapping, setMapping] = useState<ComponentRepresentation>();
 
@@ -400,4 +400,4 @@ export const LdapMapperDetails = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/user-federation/routes/NewKerberosUserFederation.ts b/src/user-federation/routes/NewKerberosUserFederation.ts
index c7f2b2d28b..8d0cfe8f9d 100644
--- a/src/user-federation/routes/NewKerberosUserFederation.ts
+++ b/src/user-federation/routes/NewKerberosUserFederation.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationKerberosSettings } from "../UserFederationKerberosSettings";
 
 export type NewKerberosUserFederationParams = { realm: string };
 
 export const NewKerberosUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos/new",
-  component: UserFederationKerberosSettings,
+  component: lazy(() => import("../UserFederationKerberosSettings")),
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
 };
diff --git a/src/user-federation/routes/NewLdapUserFederation.ts b/src/user-federation/routes/NewLdapUserFederation.ts
index 05a786382a..603ac843ee 100644
--- a/src/user-federation/routes/NewLdapUserFederation.ts
+++ b/src/user-federation/routes/NewLdapUserFederation.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationLdapSettings } from "../UserFederationLdapSettings";
 
 export type NewLdapUserFederationParams = { realm: string };
 
 export const NewLdapUserFederationRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/new",
-  component: UserFederationLdapSettings,
+  component: lazy(() => import("../UserFederationLdapSettings")),
   breadcrumb: (t) => t("user-federation:addOneLdap"),
   access: "view-realm",
 };
diff --git a/src/user-federation/routes/UserFederation.ts b/src/user-federation/routes/UserFederation.ts
index dbccd1eb68..1a562ed5a1 100644
--- a/src/user-federation/routes/UserFederation.ts
+++ b/src/user-federation/routes/UserFederation.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationSection } from "../UserFederationSection";
 
 export type UserFederationParams = { realm: string };
 
 export const UserFederationRoute: RouteDef = {
   path: "/:realm/user-federation",
-  component: UserFederationSection,
+  component: lazy(() => import("../UserFederationSection")),
   breadcrumb: (t) => t("userFederation"),
   access: "view-realm",
 };
diff --git a/src/user-federation/routes/UserFederationKerberos.ts b/src/user-federation/routes/UserFederationKerberos.ts
index f3379d62c7..cc8b3a5752 100644
--- a/src/user-federation/routes/UserFederationKerberos.ts
+++ b/src/user-federation/routes/UserFederationKerberos.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationKerberosSettings } from "../UserFederationKerberosSettings";
 
 export type UserFederationKerberosParams = {
   realm: string;
@@ -10,7 +10,7 @@ export type UserFederationKerberosParams = {
 
 export const UserFederationKerberosRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos/:id",
-  component: UserFederationKerberosSettings,
+  component: lazy(() => import("../UserFederationKerberosSettings")),
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
 };
diff --git a/src/user-federation/routes/UserFederationLdap.ts b/src/user-federation/routes/UserFederationLdap.ts
index 3539f34eb9..b7767c6749 100644
--- a/src/user-federation/routes/UserFederationLdap.ts
+++ b/src/user-federation/routes/UserFederationLdap.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationLdapSettings } from "../UserFederationLdapSettings";
 
 export type UserFederationLdapParams = {
   realm: string;
@@ -11,7 +11,7 @@ export type UserFederationLdapParams = {
 
 export const UserFederationLdapRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/:id/:tab?",
-  component: UserFederationLdapSettings,
+  component: lazy(() => import("../UserFederationLdapSettings")),
   breadcrumb: (t) => t("common:settings"),
   access: "view-realm",
 };
diff --git a/src/user-federation/routes/UserFederationLdapMapper.ts b/src/user-federation/routes/UserFederationLdapMapper.ts
index 314dfc2af4..58aedd239f 100644
--- a/src/user-federation/routes/UserFederationLdapMapper.ts
+++ b/src/user-federation/routes/UserFederationLdapMapper.ts
@@ -1,7 +1,7 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { LdapMapperDetails } from "../ldap/mappers/LdapMapperDetails";
 
 export type UserFederationLdapMapperParams = {
   realm: string;
@@ -12,7 +12,7 @@ export type UserFederationLdapMapperParams = {
 
 export const UserFederationLdapMapperRoute: RouteDef = {
   path: "/:realm/user-federation/ldap/:id/:tab/:mapperId",
-  component: LdapMapperDetails,
+  component: lazy(() => import("../ldap/mappers/LdapMapperDetails")),
   breadcrumb: (t) => t("common:mappingDetails"),
   access: "view-realm",
 };
diff --git a/src/user-federation/routes/UserFederationsKerberos.ts b/src/user-federation/routes/UserFederationsKerberos.ts
index b2f8a6731f..0c4d371d3f 100644
--- a/src/user-federation/routes/UserFederationsKerberos.ts
+++ b/src/user-federation/routes/UserFederationsKerberos.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationSection } from "../UserFederationSection";
 
 export type UserFederationsKerberosParams = { realm: string };
 
 export const UserFederationsKerberosRoute: RouteDef = {
   path: "/:realm/user-federation/kerberos",
-  component: UserFederationSection,
+  component: lazy(() => import("../UserFederationSection")),
   access: "view-realm",
 };
 
diff --git a/src/user-federation/routes/UserFederationsLdap.ts b/src/user-federation/routes/UserFederationsLdap.ts
index eebf091df5..881e18c5d1 100644
--- a/src/user-federation/routes/UserFederationsLdap.ts
+++ b/src/user-federation/routes/UserFederationsLdap.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UserFederationSection } from "../UserFederationSection";
 
 export type UserFederationsLdapParams = { realm: string };
 
 export const UserFederationsLdapRoute: RouteDef = {
   path: "/:realm/user-federation/ldap",
-  component: UserFederationSection,
+  component: lazy(() => import("../UserFederationSection")),
   access: "view-realm",
 };
 
diff --git a/src/user/UsersSection.tsx b/src/user/UsersSection.tsx
index 37774a71f0..e3a429fc9c 100644
--- a/src/user/UsersSection.tsx
+++ b/src/user/UsersSection.tsx
@@ -44,7 +44,7 @@ type BruteUser = UserRepresentation & {
   brute?: Record<string, object>;
 };
 
-export const UsersSection = () => {
+export default function UsersSection() {
   const { t } = useTranslation("users");
   const adminClient = useAdminClient();
   const { addAlert, addError } = useAlerts();
@@ -355,4 +355,4 @@ export const UsersSection = () => {
       </PageSection>
     </>
   );
-};
+}
diff --git a/src/user/routes/Users.ts b/src/user/routes/Users.ts
index 3ff7df6adc..450b068e57 100644
--- a/src/user/routes/Users.ts
+++ b/src/user/routes/Users.ts
@@ -1,13 +1,13 @@
 import type { LocationDescriptorObject } from "history";
+import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
-import { UsersSection } from "../UsersSection";
 
 export type UsersParams = { realm: string };
 
 export const UsersRoute: RouteDef = {
   path: "/:realm/users",
-  component: UsersSection,
+  component: lazy(() => import("../UsersSection")),
   breadcrumb: (t) => t("users:title"),
   access: "query-users",
 };