diff --git a/.changeset/brave-jobs-invite.md b/.changeset/brave-jobs-invite.md
new file mode 100644
index 0000000000..402c5cebe7
--- /dev/null
+++ b/.changeset/brave-jobs-invite.md
@@ -0,0 +1,5 @@
+---
+'@backstage/backend-common': patch
+---
+
+Added a new `LegacyRootDatabaseService` interface that can be used to avoid direct dependencies on the `DatabaseManager`.
diff --git a/.changeset/khaki-seahorses-joke.md b/.changeset/khaki-seahorses-joke.md
new file mode 100644
index 0000000000..9382d6f108
--- /dev/null
+++ b/.changeset/khaki-seahorses-joke.md
@@ -0,0 +1,6 @@
+---
+'@backstage/integration-aws-node': patch
+'@backstage/integration': patch
+---
+
+All single-line secrets read from config will now have both leading and trailing whitespace trimmed. This is done to ensure that the secrets are always valid HTTP header values, since many fetch implementations will include the header value itself when an error is thrown due to invalid header values.
diff --git a/.changeset/lazy-dolls-roll.md b/.changeset/lazy-dolls-roll.md
new file mode 100644
index 0000000000..da375727cc
--- /dev/null
+++ b/.changeset/lazy-dolls-roll.md
@@ -0,0 +1,5 @@
+---
+'@backstage/backend-tasks': patch
+---
+
+The `TaskScheduler.fromConfig` method now accepts the `LegacyRootDatabaseService` interface rather than the full `DatabaseManager` implementation.
diff --git a/.changeset/long-wasps-wait.md b/.changeset/long-wasps-wait.md
new file mode 100644
index 0000000000..f027fb97ce
--- /dev/null
+++ b/.changeset/long-wasps-wait.md
@@ -0,0 +1,5 @@
+---
+'@backstage/config-loader': patch
+---
+
+Make schema processing gracefully handle an empty config.
diff --git a/.changeset/modern-peaches-clean.md b/.changeset/modern-peaches-clean.md
new file mode 100644
index 0000000000..13dbb75183
--- /dev/null
+++ b/.changeset/modern-peaches-clean.md
@@ -0,0 +1,5 @@
+---
+'@backstage/create-app': patch
+---
+
+Updated the default app index template at `packages/app/public/index.html` to have a fallback value for the `app.title` config.
diff --git a/.changeset/poor-jeans-rescue.md b/.changeset/poor-jeans-rescue.md
new file mode 100644
index 0000000000..e44b9c6bc6
--- /dev/null
+++ b/.changeset/poor-jeans-rescue.md
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Make `http://localhost:3000` the default base URL for serving locally, and `/` the default public path for built apps. The app build no longer requires any configuration values to be present.
diff --git a/.changeset/renovate-f253121.md b/.changeset/renovate-f253121.md
new file mode 100644
index 0000000000..42899973fd
--- /dev/null
+++ b/.changeset/renovate-f253121.md
@@ -0,0 +1,16 @@
+---
+'@backstage/backend-common': patch
+'@backstage/cli': patch
+'@backstage/integration': patch
+'@backstage/plugin-catalog-backend-module-github': patch
+'@backstage/plugin-catalog-backend': patch
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-github-actions': patch
+'@backstage/plugin-scaffolder-backend-module-confluence-to-markdown': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-techdocs-module-addons-contrib': patch
+'@backstage/plugin-techdocs-node': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Updated dependency `git-url-parse` to `^14.0.0`.
diff --git a/.changeset/serious-dryers-grin.md b/.changeset/serious-dryers-grin.md
new file mode 100644
index 0000000000..24d17f4959
--- /dev/null
+++ b/.changeset/serious-dryers-grin.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Fix entity content extension filtering.
diff --git a/.changeset/silver-crabs-exercise.md b/.changeset/silver-crabs-exercise.md
new file mode 100644
index 0000000000..ff34b5a3c3
--- /dev/null
+++ b/.changeset/silver-crabs-exercise.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': minor
+---
+
+Migrate the `api-docs` to the new frontend system. It is experimental and available via alpha subpath.
diff --git a/OWNERS.md b/OWNERS.md
index 7ad21c6fee..1e92e68c40 100644
--- a/OWNERS.md
+++ b/OWNERS.md
@@ -148,6 +148,7 @@ Scope: The Scaffolder frontend and backend plugins, and related tooling.
 | Brian Fletcher                 | Roadie.io                 | [punkle](https://github.com/punkle)                   | `Brian Fletcher#7051`          |
 | Carlos Esteban Lopez Jaramillo | VMWare                    | [luchillo17](https://github.com/luchillo17)           | `luchillo17#8777`              |
 | David Tuite                    | Roadie.io                 | [dtuite](https://github.com/dtuite)                   | `David Tuite (roadie.io)#1010` |
+| Deepankumar Loganathan         |                           | [deepan10](https://github.com/deepan10)               | `deepan10`                     |
 | Himanshu Mishra                | Harness.io                | [OrkoHunter](https://github.com/OrkoHunter)           | `OrkoHunter#1520`              |
 | Irma Solakovic                 | Roadie.io                 | [Irma12](https://github.com/Irma12)                   | `Irma#7629`                    |
 | Jamie Klassen                  | VMware                    | [jamieklassen](https://github.com/jamieklassen)       | `jamieklassen#3047`            |
diff --git a/beps/0003-auth-architecture-evolution/README.md b/beps/0003-auth-architecture-evolution/README.md
index e5937aab0d..ec2660a9cc 100644
--- a/beps/0003-auth-architecture-evolution/README.md
+++ b/beps/0003-auth-architecture-evolution/README.md
@@ -113,7 +113,9 @@ export interface AuthService {
 
   // TODO: should the caller provide the target plugin ID?
   // TODO: how can we make it very difficult to forget to forward credentials
-  issueToken(credentials: BackstageCredentials): Promise<{ token: string }>;
+  issueToken(options: {
+    forward?: BackstageCredentials;
+  }): Promise<{ token: string }>;
 }
 ```
 
@@ -138,15 +140,18 @@ The `UserInfoService` is exported by `@backstage/auth-node`, and the initial imp
 The `HttpRouterService` interface will be extended with the ability to opt-out of the default protection of endpoints, enabling either cookie auth or unauthenticated access.
 
 ```ts
+export interface HttpRouterServiceAuthPolicy {
+  // The path matches in the same way as if it was passed to `express.Router.use(path, ...)`
+  path: string;
+  allow: 'unauthenticated' | 'user-cookie';
+}
+
 export interface HttpRouterService {
   // All routes only allow authenticated users and services by default.
   use(handler: Handler): void;
 
-  // Exact option structure is TBD, just highlighting the general idea for now
-  configure(options: {
-    allowCookieAuthOnPaths?: string[];
-    allowUnauthenticatedAccessPaths?: string[];
-  }): void;
+  // These are additive and the most relaxed access level takes precedence
+  addAuthPolicy(policy: HttpRouterServiceAuthPolicy): void;
 }
 ```
 
@@ -187,8 +192,9 @@ export default createBackendPlugin({
       async init({ http }) {
         // The order of these two calls does not matter
         http.use(await createRouter(/* ... */));
-        http.configure({
-          allowCookieAuthOnPaths: ['/static'],
+        http.addAuthPolicy({
+          path: '/static',
+          allow: 'user-cookie',
         });
       },
     });
@@ -208,10 +214,16 @@ export default createBackendPlugin({
       },
       async init({ http }) {
         http.use(await createRouter(/* ... */));
-        http.configure({
-          allowCookieAuthOnPaths: ['/'],
-          // Unauthenticated access takes precedence, the /public endpoint does not require cookie auth
-          allowUnauthenticatedAccessPaths: ['/public'],
+
+        http.addAuthPolicy({
+          path: '/',
+          allow: 'user-cookie',
+        });
+
+        // Unauthenticated access takes precedence, the /public endpoint does not require cookie auth
+        http.addAuthPolicy({
+          path: '/public',
+          allow: 'unauthenticated',
         });
       },
     });
@@ -232,22 +244,21 @@ export type BackstageUnauthorizedCredentials = {
 
 type BackstageCredentialTypes = {
   user: BackstageUserCredentials;
+  'user-cookie': BackstageUserCredentials;
   service: BackstageServiceCredentials;
   unauthorized: BackstageUnauthorizedCredentials;
 };
 
 export interface HttpAuthService {
-  createHttpPluginRouterMiddleware(options: OptionsTBD): Handler;
-
+  // Implementations should cache resolved credentials on the request object
   credentials<TAllowed extends keyof BackstageCredentialTypes>(
     req: Request,
     options?: HttpAuthServiceMiddlewareOptions<TAllowed>,
   ): Promise<BackstageCredentialTypes[TAllowed]>;
 
-  // TODO: Keep an eye on this, might not be needed
-  requestHeaders(
-    credentials: BackstageCredentials,
-  ): Promise<Record<string, string>>;
+  requestHeaders(options?: {
+    forward?: BackstageCredentials;
+  }): Promise<Record<string, string>>;
 
   issueUserCookie(res: Response): Promise<void>;
 }
@@ -336,11 +347,11 @@ router.get('/cookie', async (req, res) => {
   res.json({ ok: true });
 });
 
-// Allowing cookie auth is a separate step where you call the configure method
+// Allowing cookie auth is a separate step where you call the addAuthPolicy method
 // of the httpRouter API in your plugin setup code.
-httpRouter.configure({
-  // In practice we can make this configuration a lot more capable, this is just a minimal example
-  allowCookieAuthOnPaths: ['/static'], // router.use('/static', cookieAuthMiddleware()) under the hood
+httpRouter.addAuthPolicy({
+  path: '/static',
+  allow: 'user-cookie',
 });
 
 // Separate endpoint that serves static content, allowing user cookie auth as
@@ -377,10 +388,11 @@ The release plan for the `HttpAuthService` is TBD, but is likely to be shipped a
 
 - [ ] Implement `AuthService`
 - [ ] Implement `HttpAuthService` - leave cookie auth as unimplemented for now
-- [ ] Add `configure()` for `HttpRouterService`, using `HttpAuthService`
+- [ ] Add `addAuthPolicy()` for `HttpRouterService`, using `HttpAuthService`
 - [ ] Implement a compatibility wrapper in `backend-common` that accepts `AuthService`, `HttpAuthService`, `IdentityService`, and `TokenManagerService` (all optional), and returns implementations for `AuthService` and `HttpAuthService`, such hat existing plugins can use a single `createRouter` implementation for both the old and new backend systems.
 - [ ] Implement `UserInfoService` in `@backstage/auth-node` - for now it will just extract the ownership entity refs from the token stored in the credentials
 - [ ] Implement cookie auth in `HttpAuthService` - just put the user token in the cookie for now
+- [ ] Deprecate `IdentityService` and `TokenManagerService`, switch to using default factories that depend on the `AuthService` and `HttpAuthService`. Stop supplying implementations for these in `backend-defaults` and `backend-test-utils`
 - [ ] Migrate plugins:
   - [ ] Permission backend
   - [ ] TechDocs backend
@@ -432,13 +444,13 @@ http.use(cookieRouter, { allow: ['user-cookie'] });
 
 Similar to the previous approach, but also require that a path is provided. This removes much of the confusion around what middleware are applied.
 
-The downside of this approach is that it still has the drawback of forcing a separation of the router, but at the same it provides very little benefit over a top-level path configuration approach like `http.configure()`. The `'/static'` path in the below example essentially has the exact same logic as `.configure({ cookieAuthPaths: ['/static'] })` since it'd be implemented in the same way. The `.configure()` approach has the benefit of allowing plugin authors to decide whether they want to keep the routes separate or not.
+The downside of this approach is that it still has the drawback of forcing a separation of the router, but at the same it provides very little benefit over a top-level path configuration approach like `http.addAuthPolicy()`. The `'/static'` path in the below example essentially has the exact same logic as `.addAuthPolicy({ path: '/static', allow: 'user-cookie' })` since it'd be implemented in the same way. The `.addAuthPolicy()` approach has the benefit of allowing plugin authors to decide whether they want to keep the routes separate or not.
 
-This does have the benefit of letting the framework know which exact routes are protected, which can be useful for introspection, although that benefit also applies to the `.configure()` approach.
+This does have the benefit of letting the framework know which exact routes are protected, which can be useful for introspection, although that benefit also applies to the `.addAuthPolicy()` approach.
 
 ```ts
-// This isn't too bad, but it's extremely similar to the configure() method since
-// we're just matching on the path. The benefit of configure is that it allows you
+// This isn't too bad, but it's extremely similar to the addAuthPolicy() method since
+// we're just matching on the path. The benefit of addAuthPolicy is that it allows you
 // to keep everything in a singe router if desired.
 http.use('/static', cookieRouter, { allow: ['user-cookie'] });
 ```
diff --git a/docs/features/software-templates/writing-custom-step-layouts.md b/docs/features/software-templates/writing-custom-step-layouts.md
index b965f60f6b..d3c7c8fe82 100644
--- a/docs/features/software-templates/writing-custom-step-layouts.md
+++ b/docs/features/software-templates/writing-custom-step-layouts.md
@@ -20,11 +20,11 @@ The [createScaffolderLayout](https://backstage.io/docs/reference/plugin-scaffold
 
 ```ts
 import React from 'react';
+import { scaffolderPlugin } from '@backstage/plugin-scaffolder';
 import {
   createScaffolderLayout,
   LayoutTemplate,
-  scaffolderPlugin,
-} from '@backstage/plugin-scaffolder';
+} from '@backstage/plugin-scaffolder-react';
 import { Grid } from '@material-ui/core';
 
 const TwoColumn: LayoutTemplate = ({ properties, description, title }) => {
diff --git a/packages/app-next/app-config.yaml b/packages/app-next/app-config.yaml
index b07f556742..28d05c902b 100644
--- a/packages/app-next/app-config.yaml
+++ b/packages/app-next/app-config.yaml
@@ -1,6 +1,7 @@
 app:
   experimental:
     packages: 'all' # ✨
+
   routes:
     bindings:
       catalog.viewTechDoc: techdocs.docRoot
@@ -11,6 +12,7 @@ app:
     # - apis.plugin.graphiql.browse.gitlab: true
     - graphiql-endpoint:graphiql/gitlab: true
 
+    # Entity page cards
     - entity-card:catalog/about
     - entity-card:catalog/labels
     - entity-card:catalog/links:
@@ -21,7 +23,15 @@ app:
         config:
           height: 300
     - entity-card:azure-devops/readme
+    - entity-card:api-docs/has-apis
+    - entity-card:api-docs/consumed-apis
+    - entity-card:api-docs/provided-apis
+    - entity-card:api-docs/providing-components
+    - entity-card:api-docs/consuming-components
+
     # Entity page content
+    - entity-content:api-docs/definition
+    - entity-content:api-docs/apis
     - entity-content:techdocs
     - entity-content:azure-devops/pipelines
     - entity-content:azure-devops/pull-requests
diff --git a/packages/app/public/index.html b/packages/app/public/index.html
index a3c3ef19b8..231e96b309 100644
--- a/packages/app/public/index.html
+++ b/packages/app/public/index.html
@@ -41,7 +41,7 @@
       href="<%= publicPath %>/safari-pinned-tab.svg"
       color="#5bbad5"
     />
-    <title><%= config.getString('app.title') %></title>
+    <title><%= config.getOptionalString('app.title') ?? 'Backstage' %></title>
 
     <% if (config.has('app.datadogRum')) { %>
     <script>
diff --git a/packages/backend-common/api-report.md b/packages/backend-common/api-report.md
index e4a1ecfdf1..6c9b63ae11 100644
--- a/packages/backend-common/api-report.md
+++ b/packages/backend-common/api-report.md
@@ -249,7 +249,7 @@ export function createStatusCheckRouter(options: {
 }): Promise<express.Router>;
 
 // @public
-export class DatabaseManager {
+export class DatabaseManager implements LegacyRootDatabaseService {
   forPlugin(
     pluginId: string,
     deps?: {
@@ -555,6 +555,11 @@ export const legacyPlugin: (
   }>,
 ) => BackendFeature;
 
+// @public
+export type LegacyRootDatabaseService = {
+  forPlugin(pluginId: string): PluginDatabaseManager;
+};
+
 // @public
 export function loadBackendConfig(options: {
   logger: LoggerService;
diff --git a/packages/backend-common/package.json b/packages/backend-common/package.json
index 3f8bcbb25e..62d9c6ec71 100644
--- a/packages/backend-common/package.json
+++ b/packages/backend-common/package.json
@@ -84,7 +84,7 @@
     "express": "^4.17.1",
     "express-promise-router": "^4.1.0",
     "fs-extra": "10.1.0",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "helmet": "^6.0.0",
     "isomorphic-git": "^1.23.0",
     "jose": "^4.6.0",
diff --git a/packages/backend-common/src/database/DatabaseManager.ts b/packages/backend-common/src/database/DatabaseManager.ts
index 7564f82028..8a4a4b50fa 100644
--- a/packages/backend-common/src/database/DatabaseManager.ts
+++ b/packages/backend-common/src/database/DatabaseManager.ts
@@ -30,6 +30,7 @@ import {
 import { PluginDatabaseManager } from './types';
 import path from 'path';
 import {
+  DatabaseService,
   LifecycleService,
   LoggerService,
   PluginMetadataService,
@@ -53,6 +54,14 @@ export type DatabaseManagerOptions = {
   logger?: LoggerService;
 };
 
+/**
+ * An interface that represents the legacy global DatabaseManager implementation.
+ * @public
+ */
+export type LegacyRootDatabaseService = {
+  forPlugin(pluginId: string): DatabaseService;
+};
+
 /**
  * Manages database connections for Backstage backend plugins.
  *
@@ -65,7 +74,7 @@ export type DatabaseManagerOptions = {
  * set `prefix` which is used to prefix generated database names if config is
  * not provided.
  */
-export class DatabaseManager {
+export class DatabaseManager implements LegacyRootDatabaseService {
   /**
    * Creates a {@link DatabaseManager} from `backend.database` config.
    *
diff --git a/packages/backend-tasks/api-report.md b/packages/backend-tasks/api-report.md
index 1d978068b3..417fc93ed4 100644
--- a/packages/backend-tasks/api-report.md
+++ b/packages/backend-tasks/api-report.md
@@ -4,10 +4,10 @@
 
 ```ts
 import { Config } from '@backstage/config';
-import { DatabaseManager } from '@backstage/backend-common';
 import { Duration } from 'luxon';
 import { HumanDuration as HumanDuration_2 } from '@backstage/types';
 import { JsonObject } from '@backstage/types';
+import { LegacyRootDatabaseService } from '@backstage/backend-common';
 import { Logger } from 'winston';
 import { PluginDatabaseManager } from '@backstage/backend-common';
 
@@ -83,7 +83,7 @@ export interface TaskScheduleDefinitionConfig {
 
 // @public
 export class TaskScheduler {
-  constructor(databaseManager: DatabaseManager, logger: Logger);
+  constructor(databaseManager: LegacyRootDatabaseService, logger: Logger);
   forPlugin(pluginId: string): PluginTaskScheduler;
   // (undocumented)
   static forPlugin(opts: {
@@ -95,7 +95,7 @@ export class TaskScheduler {
   static fromConfig(
     config: Config,
     options?: {
-      databaseManager?: DatabaseManager;
+      databaseManager?: LegacyRootDatabaseService;
       logger?: Logger;
     },
   ): TaskScheduler;
diff --git a/packages/backend-tasks/src/tasks/TaskScheduler.ts b/packages/backend-tasks/src/tasks/TaskScheduler.ts
index 6b6436e52a..bd7bf0f776 100644
--- a/packages/backend-tasks/src/tasks/TaskScheduler.ts
+++ b/packages/backend-tasks/src/tasks/TaskScheduler.ts
@@ -17,6 +17,7 @@
 import {
   DatabaseManager,
   getRootLogger,
+  LegacyRootDatabaseService,
   PluginDatabaseManager,
 } from '@backstage/backend-common';
 import { Config } from '@backstage/config';
@@ -37,7 +38,7 @@ export class TaskScheduler {
   static fromConfig(
     config: Config,
     options?: {
-      databaseManager?: DatabaseManager;
+      databaseManager?: LegacyRootDatabaseService;
       logger?: Logger;
     },
   ): TaskScheduler {
@@ -50,7 +51,7 @@ export class TaskScheduler {
   }
 
   constructor(
-    private readonly databaseManager: DatabaseManager,
+    private readonly databaseManager: LegacyRootDatabaseService,
     private readonly logger: Logger,
   ) {}
 
diff --git a/packages/cli/package.json b/packages/cli/package.json
index d8af2ce910..d55f0745e0 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -94,7 +94,7 @@
     "express": "^4.17.1",
     "fork-ts-checker-webpack-plugin": "^7.0.0-alpha.8",
     "fs-extra": "10.1.0",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "glob": "^7.1.7",
     "global-agent": "^3.0.0",
     "handlebars": "^4.7.3",
diff --git a/packages/cli/src/lib/bundler/bundle.ts b/packages/cli/src/lib/bundler/bundle.ts
index c5dda4b1cd..98ef2017b9 100644
--- a/packages/cli/src/lib/bundler/bundle.ts
+++ b/packages/cli/src/lib/bundler/bundle.ts
@@ -23,7 +23,7 @@ import {
   printFileSizesAfterBuild,
 } from 'react-dev-utils/FileSizeReporter';
 import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
-import { createConfig, resolveBaseUrl } from './config';
+import { createConfig } from './config';
 import { BuildOptions } from './types';
 import { resolveBundlingPaths, resolveOptionalBundlingPaths } from './paths';
 import chalk from 'chalk';
@@ -51,7 +51,6 @@ export async function buildBundle(options: BuildOptions) {
     ...options,
     checksEnabled: false,
     isDev: false,
-    baseUrl: resolveBaseUrl(options.frontendConfig),
     getFrontendAppConfigs: () => options.frontendAppConfigs,
   };
   const configs = [
diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts
index 7c72dc81f7..581ead8575 100644
--- a/packages/cli/src/lib/bundler/config.ts
+++ b/packages/cli/src/lib/bundler/config.ts
@@ -44,9 +44,9 @@ import { hasReactDomClient } from './hasReactDomClient';
 const BUILD_CACHE_ENV_VAR = 'BACKSTAGE_CLI_EXPERIMENTAL_BUILD_CACHE';
 
 export function resolveBaseUrl(config: Config): URL {
-  const baseUrl = config.getString('app.baseUrl');
+  const baseUrl = config.getOptionalString('app.baseUrl');
   try {
-    return new URL(baseUrl);
+    return new URL(baseUrl ?? '/', 'http://localhost:3000');
   } catch (error) {
     throw new Error(`Invalid app.baseUrl, ${error}`);
   }
@@ -100,8 +100,7 @@ export async function createConfig(
   const { packages } = await getPackages(cliPaths.targetDir);
   const externalPkgs = packages.filter(p => !isChildPath(paths.root, p.dir));
 
-  const baseUrl = frontendConfig.getString('app.baseUrl');
-  const validBaseUrl = new URL(baseUrl);
+  const validBaseUrl = resolveBaseUrl(frontendConfig);
   let publicPath = validBaseUrl.pathname.replace(/\/$/, '');
   if (publicSubPath) {
     publicPath = `${publicPath}${publicSubPath}`.replace('//', '/');
diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts
index f1eb2e923d..5690dcae72 100644
--- a/packages/cli/src/lib/bundler/server.ts
+++ b/packages/cli/src/lib/bundler/server.ts
@@ -110,9 +110,10 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
   });
   latestFrontendAppConfigs = cliConfig.frontendAppConfigs;
 
-  const appBaseUrl = cliConfig.frontendConfig.getString('app.baseUrl');
-  const backendBaseUrl = cliConfig.frontendConfig.getString('backend.baseUrl');
-  if (appBaseUrl === backendBaseUrl) {
+  const appBaseUrl = cliConfig.frontendConfig.getOptionalString('app.baseUrl');
+  const backendBaseUrl =
+    cliConfig.frontendConfig.getOptionalString('backend.baseUrl');
+  if (appBaseUrl && appBaseUrl === backendBaseUrl) {
     console.log(
       chalk.yellow(
         `⚠️   Conflict between app baseUrl and backend baseUrl:
diff --git a/packages/cli/src/lib/bundler/types.ts b/packages/cli/src/lib/bundler/types.ts
index 4a9424dedb..eeb42ef6a3 100644
--- a/packages/cli/src/lib/bundler/types.ts
+++ b/packages/cli/src/lib/bundler/types.ts
@@ -23,7 +23,6 @@ export type BundlingOptions = {
   isDev: boolean;
   frontendConfig: Config;
   getFrontendAppConfigs(): AppConfig[];
-  baseUrl: URL;
   parallelism?: number;
   additionalEntryPoints?: string[];
   // Path to append to the detected public path, e.g. '/public'
diff --git a/packages/config-loader/src/schema/compile.ts b/packages/config-loader/src/schema/compile.ts
index fd39b0def9..be47b6c906 100644
--- a/packages/config-loader/src/schema/compile.ts
+++ b/packages/config-loader/src/schema/compile.ts
@@ -190,7 +190,7 @@ export function compileConfigSchemas(
   });
 
   return configs => {
-    const config = ConfigReader.fromConfigs(configs).get();
+    const config = ConfigReader.fromConfigs(configs).getOptional();
 
     visibilityByDataPath.clear();
     deepVisibilityByDataPath.clear();
diff --git a/packages/create-app/templates/default-app/packages/app/public/index.html b/packages/create-app/templates/default-app/packages/app/public/index.html
index fc758eee32..3337729dbe 100644
--- a/packages/create-app/templates/default-app/packages/app/public/index.html
+++ b/packages/create-app/templates/default-app/packages/app/public/index.html
@@ -41,7 +41,7 @@
       href="<%= publicPath %>/safari-pinned-tab.svg"
       color="#5bbad5"
     />
-    <title><%= config.getString('app.title') %></title>
+    <title><%= config.getOptionalString('app.title') ?? 'Backstage' %></title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/packages/integration-aws-node/src/config.ts b/packages/integration-aws-node/src/config.ts
index 0bc8c0ed06..5cf34e4dd3 100644
--- a/packages/integration-aws-node/src/config.ts
+++ b/packages/integration-aws-node/src/config.ts
@@ -152,7 +152,7 @@ function readAwsIntegrationAccountConfig(
   const accountConfig = {
     accountId: config.getString('accountId'),
     accessKeyId: config.getOptionalString('accessKeyId'),
-    secretAccessKey: config.getOptionalString('secretAccessKey'),
+    secretAccessKey: config.getOptionalString('secretAccessKey')?.trim(),
     profile: config.getOptionalString('profile'),
     roleName: config.getOptionalString('roleName'),
     region: config.getOptionalString('region'),
@@ -216,7 +216,7 @@ function readMainAwsIntegrationAccountConfig(
 ): AwsIntegrationMainAccountConfig {
   const mainAccountConfig = {
     accessKeyId: config.getOptionalString('accessKeyId'),
-    secretAccessKey: config.getOptionalString('secretAccessKey'),
+    secretAccessKey: config.getOptionalString('secretAccessKey')?.trim(),
     profile: config.getOptionalString('profile'),
     region: config.getOptionalString('region'),
   };
diff --git a/packages/integration/package.json b/packages/integration/package.json
index 4191e0da34..5b1d292e5d 100644
--- a/packages/integration/package.json
+++ b/packages/integration/package.json
@@ -39,7 +39,7 @@
     "@octokit/auth-app": "^4.0.0",
     "@octokit/rest": "^19.0.3",
     "cross-fetch": "^4.0.0",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "lodash": "^4.17.21",
     "luxon": "^3.0.0"
   },
diff --git a/packages/integration/src/awsS3/AwsS3Integration.test.ts b/packages/integration/src/awsS3/AwsS3Integration.test.ts
index 2987f46a8a..6f3b603dc9 100644
--- a/packages/integration/src/awsS3/AwsS3Integration.test.ts
+++ b/packages/integration/src/awsS3/AwsS3Integration.test.ts
@@ -26,7 +26,7 @@ describe('AwsS3Integration', () => {
             {
               endpoint: 'https://a.com',
               accessKeyId: 'access key',
-              secretAccessKey: 'secret key',
+              secretAccessKey: ' secret key ',
             },
           ],
         },
diff --git a/packages/integration/src/awsS3/config.ts b/packages/integration/src/awsS3/config.ts
index 477741b839..83f0fb60d6 100644
--- a/packages/integration/src/awsS3/config.ts
+++ b/packages/integration/src/awsS3/config.ts
@@ -101,7 +101,7 @@ export function readAwsS3IntegrationConfig(
   }
 
   const accessKeyId = config.getOptionalString('accessKeyId');
-  const secretAccessKey = config.getOptionalString('secretAccessKey');
+  const secretAccessKey = config.getOptionalString('secretAccessKey')?.trim();
   const roleArn = config.getOptionalString('roleArn');
   const externalId = config.getOptionalString('externalId');
 
diff --git a/packages/integration/src/azure/config.test.ts b/packages/integration/src/azure/config.test.ts
index eb36120c32..dc6781c45e 100644
--- a/packages/integration/src/azure/config.test.ts
+++ b/packages/integration/src/azure/config.test.ts
@@ -70,7 +70,7 @@ describe('readAzureIntegrationConfig', () => {
         credentials: [
           {
             organizations: ['org1'],
-            personalAccessToken: 't',
+            personalAccessToken: 't      ',
           },
         ],
       }),
@@ -119,7 +119,7 @@ describe('readAzureIntegrationConfig', () => {
           {
             organizations: ['org1', 'org2'],
             clientId: 'id',
-            clientSecret: 'secret',
+            clientSecret: 'secret\n\n\n',
             tenantId: 'tenant',
           },
         ],
diff --git a/packages/integration/src/azure/config.ts b/packages/integration/src/azure/config.ts
index 5c16394484..5ed1914ea2 100644
--- a/packages/integration/src/azure/config.ts
+++ b/packages/integration/src/azure/config.ts
@@ -205,18 +205,18 @@ export function readAzureIntegrationConfig(
     ?.map(credential => {
       const result: Partial<AzureDevOpsCredentialLike> = {
         organizations: credential.getOptionalStringArray('organizations'),
-        personalAccessToken: credential.getOptionalString(
-          'personalAccessToken',
-        ),
+        personalAccessToken: credential
+          .getOptionalString('personalAccessToken')
+          ?.trim(),
         tenantId: credential.getOptionalString('tenantId'),
         clientId: credential.getOptionalString('clientId'),
-        clientSecret: credential.getOptionalString('clientSecret'),
+        clientSecret: credential.getOptionalString('clientSecret')?.trim(),
       };
 
       return result;
     });
 
-  const token = config.getOptionalString('token');
+  const token = config.getOptionalString('token')?.trim();
 
   if (
     config.getOptional('credential') !== undefined &&
@@ -247,10 +247,12 @@ export function readAzureIntegrationConfig(
         organizations: config.getOptionalStringArray(
           'credential.organizations',
         ),
-        token: config.getOptionalString('credential.token'),
+        token: config.getOptionalString('credential.token')?.trim(),
         tenantId: config.getOptionalString('credential.tenantId'),
         clientId: config.getOptionalString('credential.clientId'),
-        clientSecret: config.getOptionalString('credential.clientSecret'),
+        clientSecret: config
+          .getOptionalString('credential.clientSecret')
+          ?.trim(),
       },
     ];
     credentialConfigs = credentialConfigs?.concat(mapped) ?? mapped;
diff --git a/packages/integration/src/bitbucket/config.test.ts b/packages/integration/src/bitbucket/config.test.ts
index 5440b174c8..8dd20cade7 100644
--- a/packages/integration/src/bitbucket/config.test.ts
+++ b/packages/integration/src/bitbucket/config.test.ts
@@ -58,9 +58,9 @@ describe('readBitbucketIntegrationConfig', () => {
       buildConfig({
         host: 'a.com',
         apiBaseUrl: 'https://a.com/api',
-        token: 't',
+        token: 't\n\n\n',
         username: 'u',
-        appPassword: 'p',
+        appPassword: '\n\n\np',
       }),
     );
     expect(output).toEqual({
diff --git a/packages/integration/src/bitbucket/config.ts b/packages/integration/src/bitbucket/config.ts
index 11839094da..4b6296b0e9 100644
--- a/packages/integration/src/bitbucket/config.ts
+++ b/packages/integration/src/bitbucket/config.ts
@@ -76,9 +76,9 @@ export function readBitbucketIntegrationConfig(
 ): BitbucketIntegrationConfig {
   const host = config.getOptionalString('host') ?? BITBUCKET_HOST;
   let apiBaseUrl = config.getOptionalString('apiBaseUrl');
-  const token = config.getOptionalString('token');
+  const token = config.getOptionalString('token')?.trim();
   const username = config.getOptionalString('username');
-  const appPassword = config.getOptionalString('appPassword');
+  const appPassword = config.getOptionalString('appPassword')?.trim();
 
   if (!isValidHost(host)) {
     throw new Error(
diff --git a/packages/integration/src/bitbucketCloud/config.test.ts b/packages/integration/src/bitbucketCloud/config.test.ts
index 9f7a66e2bf..2c68059196 100644
--- a/packages/integration/src/bitbucketCloud/config.test.ts
+++ b/packages/integration/src/bitbucketCloud/config.test.ts
@@ -55,7 +55,7 @@ describe('readBitbucketCloudIntegrationConfig', () => {
     const output = readBitbucketCloudIntegrationConfig(
       buildConfig({
         username: 'u',
-        appPassword: 'p',
+        appPassword: '\n\n\np',
       }),
     );
     expect(output).toEqual({
diff --git a/packages/integration/src/bitbucketCloud/config.ts b/packages/integration/src/bitbucketCloud/config.ts
index 710957900e..5ecabfedc4 100644
--- a/packages/integration/src/bitbucketCloud/config.ts
+++ b/packages/integration/src/bitbucketCloud/config.ts
@@ -62,7 +62,7 @@ export function readBitbucketCloudIntegrationConfig(
   // If config is provided, we assume authenticated access is desired
   // (as the anonymous one is provided by default).
   const username = config.getString('username');
-  const appPassword = config.getString('appPassword');
+  const appPassword = config.getString('appPassword')?.trim();
 
   return {
     host,
diff --git a/packages/integration/src/bitbucketServer/config.test.ts b/packages/integration/src/bitbucketServer/config.test.ts
index 985165f23f..425ffc5ca4 100644
--- a/packages/integration/src/bitbucketServer/config.test.ts
+++ b/packages/integration/src/bitbucketServer/config.test.ts
@@ -60,7 +60,7 @@ describe('readBitbucketServerIntegrationConfig', () => {
       buildConfig({
         host: 'a.com',
         apiBaseUrl: 'https://a.com/api',
-        token: 't',
+        token: '\tt\t',
       }),
     );
     expect(output).toEqual({
diff --git a/packages/integration/src/bitbucketServer/config.ts b/packages/integration/src/bitbucketServer/config.ts
index 2f93bdeb07..1412b7ab17 100644
--- a/packages/integration/src/bitbucketServer/config.ts
+++ b/packages/integration/src/bitbucketServer/config.ts
@@ -77,7 +77,7 @@ export function readBitbucketServerIntegrationConfig(
 ): BitbucketServerIntegrationConfig {
   const host = config.getString('host');
   let apiBaseUrl = config.getOptionalString('apiBaseUrl');
-  const token = config.getOptionalString('token');
+  const token = config.getOptionalString('token')?.trim();
   const username = config.getOptionalString('username');
   const password = config.getOptionalString('password');
 
diff --git a/packages/integration/src/gerrit/config.test.ts b/packages/integration/src/gerrit/config.test.ts
index f9287f6801..583687bd23 100644
--- a/packages/integration/src/gerrit/config.test.ts
+++ b/packages/integration/src/gerrit/config.test.ts
@@ -59,7 +59,7 @@ describe('readGerritIntegrationConfig', () => {
         cloneUrl: 'https:a.com/clone',
         gitilesBaseUrl: 'https://a.com/git',
         username: 'u',
-        password: 'p',
+        password: '     p      ',
       }),
     );
     expect(output).toEqual({
diff --git a/packages/integration/src/gerrit/config.ts b/packages/integration/src/gerrit/config.ts
index 8558ff0c1b..c3ee3aaa24 100644
--- a/packages/integration/src/gerrit/config.ts
+++ b/packages/integration/src/gerrit/config.ts
@@ -78,7 +78,7 @@ export function readGerritIntegrationConfig(
   let cloneUrl = config.getOptionalString('cloneUrl');
   let gitilesBaseUrl = config.getOptionalString('gitilesBaseUrl');
   const username = config.getOptionalString('username');
-  const password = config.getOptionalString('password');
+  const password = config.getOptionalString('password')?.trim();
 
   if (!isValidHost(host)) {
     throw new Error(
diff --git a/packages/integration/src/gitea/config.test.ts b/packages/integration/src/gitea/config.test.ts
index cdcc7e3f3e..5a85c12aab 100644
--- a/packages/integration/src/gitea/config.test.ts
+++ b/packages/integration/src/gitea/config.test.ts
@@ -53,7 +53,7 @@ describe('readGiteaConfig', () => {
         host: 'a.com',
         baseUrl: 'https://a.com/route/api',
         username: 'u',
-        password: 'p',
+        password: 'p        ',
       }),
     );
     expect(output).toEqual({
diff --git a/packages/integration/src/gitea/config.ts b/packages/integration/src/gitea/config.ts
index 99c5b5c1f7..28070d570d 100644
--- a/packages/integration/src/gitea/config.ts
+++ b/packages/integration/src/gitea/config.ts
@@ -56,7 +56,7 @@ export function readGiteaConfig(config: Config): GiteaIntegrationConfig {
   const host = config.getString('host');
   let baseUrl = config.getOptionalString('baseUrl');
   const username = config.getOptionalString('username');
-  const password = config.getOptionalString('password');
+  const password = config.getOptionalString('password')?.trim();
 
   if (!isValidHost(host)) {
     throw new Error(
diff --git a/packages/integration/src/github/config.test.ts b/packages/integration/src/github/config.test.ts
index c4d9eb1900..9eca82701f 100644
--- a/packages/integration/src/github/config.test.ts
+++ b/packages/integration/src/github/config.test.ts
@@ -57,7 +57,7 @@ describe('readGithubIntegrationConfig', () => {
         host: 'a.com',
         apiBaseUrl: 'https://a.com/api',
         rawBaseUrl: 'https://a.com/raw',
-        token: 't',
+        token: '\nt\t',
       }),
     );
     expect(output).toEqual({
diff --git a/packages/integration/src/github/config.ts b/packages/integration/src/github/config.ts
index cd76eba3d3..1ff4779be2 100644
--- a/packages/integration/src/github/config.ts
+++ b/packages/integration/src/github/config.ts
@@ -123,7 +123,7 @@ export function readGithubIntegrationConfig(
   const host = config.getOptionalString('host') ?? GITHUB_HOST;
   let apiBaseUrl = config.getOptionalString('apiBaseUrl');
   let rawBaseUrl = config.getOptionalString('rawBaseUrl');
-  const token = config.getOptionalString('token');
+  const token = config.getOptionalString('token')?.trim();
   const apps = config.getOptionalConfigArray('apps')?.map(c => ({
     appId: c.getNumber('appId'),
     clientId: c.getString('clientId'),
diff --git a/packages/integration/src/gitlab/config.test.ts b/packages/integration/src/gitlab/config.test.ts
index db03285206..f1d17a6d7e 100644
--- a/packages/integration/src/gitlab/config.test.ts
+++ b/packages/integration/src/gitlab/config.test.ts
@@ -55,7 +55,7 @@ describe('readGitLabIntegrationConfig', () => {
     const output = readGitLabIntegrationConfig(
       buildConfig({
         host: 'a.com',
-        token: 't',
+        token: ' t\n',
         apiBaseUrl: 'https://a.com',
         baseUrl: 'https://baseurl.for.me/gitlab',
       }),
diff --git a/packages/integration/src/gitlab/config.ts b/packages/integration/src/gitlab/config.ts
index 301fe46f90..79161561f3 100644
--- a/packages/integration/src/gitlab/config.ts
+++ b/packages/integration/src/gitlab/config.ts
@@ -67,7 +67,7 @@ export function readGitLabIntegrationConfig(
 ): GitLabIntegrationConfig {
   const host = config.getString('host');
   let apiBaseUrl = config.getOptionalString('apiBaseUrl');
-  const token = config.getOptionalString('token');
+  const token = config.getOptionalString('token')?.trim();
   let baseUrl = config.getOptionalString('baseUrl');
   if (apiBaseUrl) {
     apiBaseUrl = trimEnd(apiBaseUrl, '/');
diff --git a/plugins/api-docs/README-alpha.md b/plugins/api-docs/README-alpha.md
new file mode 100644
index 0000000000..cb94144e0c
--- /dev/null
+++ b/plugins/api-docs/README-alpha.md
@@ -0,0 +1,1168 @@
+# Api Docs
+
+> [!WARNING]
+> This documentation is made for those using the experimental new Frontend system.
+> If you are not using the new frontend system, please go [here](./README.md).
+
+This is an extension for the catalog plugin that provides components to discover and display API entities.
+APIs define the interface between components, see the [system model](https://backstage.io/docs/features/software-catalog/system-model) for details.
+They are defined in machine readable formats and provide a human readable documentation.
+
+The plugin provides a standalone list of APIs, as well as an integration into the API tab of a catalog entity.
+
+<img src="./docs/api_list.png" width="800" />
+
+<img src="./docs/openapi_definition.png" width="800" />
+
+<img src="./docs/entity_tab_api.png" width="800" />
+
+Right now, the following API formats are supported:
+
+- [OpenAPI](https://swagger.io/specification/) 2 & 3
+- [AsyncAPI](https://www.asyncapi.com/docs/reference/specification/latest)
+- [GraphQL](https://graphql.org/learn/schema/)
+
+Other formats are displayed as plain text, but this can easily be extended.
+
+To fill the catalog with APIs, [provide entities of kind API](https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api).
+To link that a component provides or consumes an API, see the [`providesApis`](https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional) and [`consumesApis`](https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional) properties on the Component kind.
+
+## Table of Content
+
+- [Installation](#installation)
+- [Customization](#customization)
+  - [Packages](#packages)
+  - [Routes](#routes)
+  - [Extensions](#extensions)
+    - [Apis Nav Item](#apis-nav-item)
+    - [Apis Explorer Page](#apis-explore-page)
+    - [Apis Entity Cards](#apis-entities-cards)
+      - [Has Apis Entity Card](#has-apis-entity-card)
+      - [Definition Entity Card](#definition-entity-card)
+      - [Provided Apis Entity Card](#provided-apis-entity-card)
+      - [Consumed Apis Entity Card](#consumed-apis-entity-card)
+      - [Providing Components Entity Card](#providing-components-entity-card)
+      - [Consuming Components Entity Card](#consuming-components-entity-card)
+    - [Apis Entity Contents](#apis-entity-contents)
+      - [Definition Entity Content](#definition-entity-content)
+      - [Apis Entity Content](#apis-entity-content)
+    - [Apis Config Api](#apis-config-api)
+      - [Custom Api Renderings](#custom-api-renderings)
+      - [Adding Swagger UI Interceptor](#adding-requestinterceptor-to-swagger-ui)
+      - [Providing Swagger UI Specific Supported Methods](#provide-specific-supported-methods-to-swagger-ui)
+    - [Integrations](#integrations)
+      - [Implementing OAuth 2 Authorization Code flow with Swagger UI](#implementing-oauth-2-authorization-code-flow-with-swagger-ui)
+
+## Installation
+
+1. Install the `api-docs` plugin in you Backstage app:
+
+   ```bash
+   # From your Backstage root directory
+   yarn --cwd packages/app add @backstage/plugin-api-docs
+   ```
+
+2. Enable which entity cards and tabs you would like to see on the catalog entity page:
+
+   ```yaml
+   # app-config.yaml
+   app:
+     experimental:
+       # Auto discovering all plugins extensions
+       packages: all
+     extensions:
+       # Enabling some entity Cards
+       # The cards will be displayed in the same order it appears in this setting list
+       # Shows a table of components that provides a particular api
+       - entity-card:api-docs/providing-components:
+           config:
+             # Presenting the card ony for entites of kind api
+             filter: kind:api
+       # Shows a table of components that consumes a particular api
+       - entity-card:api-docs/consuming-components:
+           config:
+             # Presenting the card ony for entites of kind api
+             filter: kind:api
+       # Enabling some Contents
+       # The contents will be displayed in the same order it appears in this setting list
+       # Shows a "Definition" tab for entities of kind api
+       - entity-content:api-docs/definition
+       # Shows an "Apis" tab for entities of kind component
+       - entity-content:api-docs/apis
+   ```
+
+3. Then start the app, navigate to an entity's page and see the cards and contents in there;
+4. You can also access the Apis explorer page by clicking on the "APIs" sidebar item.
+
+## Customization
+
+### Packages
+
+By default, the `api-docs` can be automatically discovered, and it is also possible to enable this plugin only in certain [environments](https://backstage.io/docs/conf/writing/#configuration-files). For more package configuration options, see [this](https://backstage.io/docs/frontend-system/architecture/app/#feature-discovery) documentation.
+
+### Routes
+
+The `api-docs` plugin exposes regular and external routes that can be used to configure route bindings.
+
+| Key           | Type           | Description                            |
+| ------------- | -------------- | -------------------------------------- |
+| `root`        | Regular route  | A route ref to the Apis Explorer page. |
+| `registerApi` | External route | A route ref to Register Api page.      |
+
+As an example, here is an association between the external register api page and a regular route from another plugin:
+
+```yaml
+# app-config.yaml
+app:
+  routes:
+    bindings:
+      # example binding the external register api route
+      api-docs.registerApi: <plugin-id>.<regular-route-key>
+```
+
+Additionally, it is possible to point a route from another plugin to the Apis explorer page:
+
+```yaml
+# app-config.yaml
+app:
+  routes:
+    bindings:
+      # example binding a external route to the apis explorer page
+      <plugin-id>.<external-route-key>: api-docs.root
+```
+
+Route binding is also possible through code. For more information, see [this](https://backstage.io/docs/frontend-system/architecture/routes#binding-external-route-references) documentation.
+
+### Extensions
+
+#### Apis Nav Item
+
+This [nav item](https://backstage.io/docs/reference/frontend-plugin-api.createnavitemextension) extension adds a link to the Apis Explorer page in the main app sidebar.
+
+| Kind       | Namespace  | Name | Id                  |
+| ---------- | ---------- | ---- | ------------------- |
+| `nav-item` | `api-docs` | -    | `nav-item:api-docs` |
+
+##### Disable
+
+This extension is enabled by default when you install the `api-docs` plugin, but you can disable it and prevent it from showing up in the sidebar by setting the following configuration:
+
+```yaml
+# app-config.yaml
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    # example disabling the apis docs nav item extension
+    - nav-item:api-docs: false
+    # or
+    # - nav-item:api-docs:
+    #     disabled: true
+```
+
+To enable the extension again, simple remove the previous `nav-item:api-docs: false` configuration or do:
+
+```yaml
+# app-config.yaml
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - nav-item:api-docs
+    # or
+    # - nav-item:api-docs: true
+    # or
+    # - nav-item:api-docs:
+    #     disabled: false
+```
+
+##### Config
+
+The apis nav item can be customized under the `app.extensions.nav-item:api-docs.config` key in `app-config.yaml`. Configurations include:
+
+```yaml
+# app-config.yaml
+# example configuring the apis docs nav item extension
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - nav-item:api-docs:
+        config:
+          # The nav item title text, defaults to "APIs"
+          title: 'Apis Explorer'
+          # The nav item path text, defaults to "/api-docs"
+          path: '/apis-explorer'
+```
+
+##### Override
+
+The apis nav item icon can only be changed by overriding the extension, as the icon cannot be changed via the `app-config.yaml` file.
+
+Here is an example overriding the nav item extension with a custom icon component:
+
+```tsx
+import { createExtensionOverrides, createNavItemExtension } from '@backstage/backstage-plugin-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
+
+export default createExtensionOverrides(
+  extensions: [
+    createNavItemExtension({
+      // These namespace is necessary so the system knows that this extension will override the default nav item provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      // It's your choice whether to use the original extension's title or a different one
+      title: 'APIs',
+      // To continue pointing to the same page as the original extension, use the same route ref
+      routeRef: convertLegacyRouteRef(rootRoute),
+      // Custom icon components are loaded here
+      loader: () => import('./components').then(m => <m.MyCustomApiDocsComponent />)
+    })
+  ]
+);
+```
+
+For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
+
+#### Apis Explore Page
+
+This `api-docs` plugin installs an "Apis Explore" page extension that helps you visualize apis registered in the Backstage software catalog.
+
+| Kind   | Namespace  | Name | Id              |
+| ------ | ---------- | ---- | --------------- |
+| `page` | `api-docs` | -    | `page:api-docs` |
+
+##### Disable/Enable
+
+The explore page extension is enable by default when you install the `api-docs` plugin, for disabling it, set the configuration below:
+
+> [!CAUTION]
+> The `api-docs` plugin also install a sidebar item that points to this page, remember to disable the nav item as well otherwise it will point to a not found page.
+
+```yaml
+# app-config.yaml
+# example disabling the apis docs explorer page
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - page:api-docs: false
+    # or
+    # - page:api-docs:
+    #     disabled: true
+```
+
+To enable the extension again, simple remove the previous `page:api-docs: false` configuration or do:
+
+```yaml
+# app-config.yaml
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - page:api-docs
+    # or
+    # - page:api-docs: true
+    # or
+    # - page:api-docs:
+    #     disabled: false
+```
+
+##### Override
+
+The explorer page implementation can be [overridden](https://backstage.io/docs/frontend-system/architecture/extension-overrides) in situations where its default extension is not customizable enough.
+
+Here is an example overriding the APIs Explorer page component:
+
+```tsx
+import { createExtensionOverrides, createPageExtension } from '@backstage/backstage-plugin-api';
+import { convertLegacyRouteRef } from '@backstage/core-compat-api';
+
+export default createExtensionOverrides(
+  extensions: [
+    createPageExtension({
+      // These namespace is necessary so the system knows that this extension will override the default explorer page provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      // Ommitting name since we are overriding a plugin index page
+      // It's up to you whether to use the original default path or not, but links that are hardcoded to the default path won't work if you change it
+      defaultPath: '/api-docs',
+      // Associating the page with a different route ref may result in the sidebar item or external plugin route pointing to an unreachable page
+      routeRef: convertLegacyRouteRef(rootRoute),
+      // Custom page components are loaded here
+      loader: () => import('./components').then(m => <m.MyCustomApiExplorerPage />)
+    })
+  ]
+);
+```
+
+#### Apis Entities Cards
+
+The `api-docs` provide some entity cards you can enable to customize the Software Catalog entity page.
+
+> [!IMPORTANT]
+> The order in which cards are listed in the configuration file will determine the order in which they appear in overview cards and tab lists on entity pages.
+
+See a complete cards list below:
+
+##### Has Apis Entity Card
+
+An [entity card](https://github.com/backstage/backstage/blob/master/plugins/catalog-react/api-report-alpha.md) extension that renders a table of entities that have an api relation with a particular Software catalog entity.
+
+| Kind          | Namespace  | Name       | Id                              |
+| ------------- | ---------- | ---------- | ------------------------------- |
+| `entity-card` | `api-docs` | `has-apis` | `entity-card:api-docs/has-apis` |
+
+###### Disable
+
+This card is disabled by default when you install the `api-docs` plugin, but to ensure the card will always be disabled or enabled regardless of the extension's default definition, add the following configuration:
+
+```yaml
+# app-config.yaml
+# example disabling the apis docs has apis entity card extension
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    # use false as value for disabling the extension and true for enabling
+    - entity-card:api-docs/has-apis: false
+    # or
+    # - entity-card:api-docs/has-apis:
+    #   - config:
+    #       # set 'true' for enabling it again
+    #       disabled: true
+```
+
+###### Config
+
+For now there is only one configuration available for this entity card extension, which is setting an entity filter that determines when the card should be displayed on the entity page.
+
+Here is an example showing the `has-apis` overview cards only for entities of kind component:
+
+```yaml
+# app-config.yaml
+# example setting the extension to only show up for entities with kind "component"
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - entity-card:api-docs/has-apis:
+        config:
+          # The default value is a function that verifies it is a components has api pat of relations
+          # For more information about entity cards filters, check out this pull request
+          # https://github.com/backstage/backstage/pull/21480
+          filter: 'kind:component'
+```
+
+###### Override
+
+Use extension overrides for completely re-implementing the has apis entity card extension:
+
+```tsx
+import { createExtensionOverrides } from '@backstage/backstage-plugin-api';
+import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
+
+export default createExtensionOverrides({
+  extensions: [
+    createEntityCardExtension({
+      // These namespace and name necessary so the system knows that this extension will override the default 'has-apis' entity card extension provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      name: 'has-apis',
+      // Returing a custom card component
+      loader: () =>
+        import('./components').then(m => <m.MyCustomHasApisEntityCard />),
+    }),
+  ],
+});
+```
+
+For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
+
+##### Definition Entity Card
+
+An [entity card](https://github.com/backstage/backstage/blob/master/plugins/catalog-react/api-report-alpha.md) extension that renders an entity api definition widget.
+
+| Kind          | Namespace  | Name         | Id                                |
+| ------------- | ---------- | ------------ | --------------------------------- |
+| `entity-card` | `api-docs` | `definition` | `entity-card:api-docs/definition` |
+
+###### Disable
+
+This card is disabled by default when you install the `api-docs` plugin, but to ensure the card will always be disabled or enabled regardless of the extension's default definition, add the following configuration:
+
+```yaml
+# app-config.yaml
+# example disabling the definition entity card extension
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    # use false as value for disabling the extension and true for enabling
+    - entity-card:api-docs/definition: false
+    # or
+    # - entity-card:api-docs/definition:
+    #   - config:
+    #       # set 'true' for enabling it again
+    #       disabled: true
+```
+
+###### Config
+
+For now there is only one configuration available for this entity card extension, which is setting an entity filter that determines when the card should be displayed on the entity page.
+
+Here is an example showing the `definition` overview cards only for entities of kind component:
+
+```yaml
+# app-config.yaml
+# example setting the extension to only show up for entities with kind "component"
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - entity-card:api-docs/definition:
+        config:
+          # Default to 'kind:api'
+          # For more information about entity cards filters, check out this pull request
+          # https://github.com/backstage/backstage/pull/21480
+          filter: 'kind:component'
+```
+
+###### Override
+
+Use extension overrides for completely re-implementing the has apis entity card extension:
+
+```tsx
+import { createExtensionOverrides } from '@backstage/backstage-plugin-api';
+import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
+
+export default createExtensionOverrides({
+  extensions: [
+    createEntityCardExtension({
+      // These namespace and name necessary so the system knows that this extension will override the default 'definition' entity card extension provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      name: 'definition',
+      // Returing a custom card component
+      loader: () =>
+        import('./components').then(m => <m.MyCustomApiDefinitionEntityCard />),
+    }),
+  ],
+});
+```
+
+For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
+
+##### Provided Apis Entity Card
+
+An [entity card](https://github.com/backstage/backstage/blob/master/plugins/catalog-react/api-report-alpha.md) extension that renders a table of apis provided by a particular Software Catalog Component.
+
+| Kind          | Namespace  | Name            | Id                                   |
+| ------------- | ---------- | --------------- | ------------------------------------ |
+| `entity-card` | `api-docs` | `provided-apis` | `entity-card:api-docs/provided-apis` |
+
+###### Disable
+
+This card is disabled by default when you install the `api-docs` plugin, but to ensure the card will always be disabled or enabled regardless of the extension's default definition, add the following configuration:
+
+```yaml
+# app-config.yaml
+# example disabling the provided apis entity card extension
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    # use false as value for disabling the extension and true for enabling
+    - entity-card:api-docs/provided-apis: false
+    # or
+    # - entity-card:api-docs/provided-apis:
+    #   - config:
+    #       # set 'true' for enabling it again
+    #       disabled: true
+```
+
+###### Config
+
+For now there is only one configuration available for this entity card extension, which is setting an entity filter that determines when the card should be displayed on the entity page.
+
+Here is an example showing the `provided-apis` overview cards only for entities of kind component:
+
+```yaml
+# app-config.yaml
+# example setting the extension to only show up for entities with kind "component"
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - entity-card:api-docs/provided-apis:
+        config:
+          # Default to 'kind:component'
+          # For more information about entity cards filters, check out this pull request
+          # https://github.com/backstage/backstage/pull/21480
+          filter: 'kind:component'
+```
+
+###### Override
+
+Use extension overrides for completely re-implementing the has apis entity card extension:
+
+```tsx
+import { createExtensionOverrides } from '@backstage/backstage-plugin-api';
+import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
+
+export default createExtensionOverrides({
+  extensions: [
+    createEntityCardExtension({
+      // These namespace and name necessary so the system knows that this extension will override the default 'provided-apis' entity card extension provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      name: 'provided-apis',
+      // Returing a custom card component
+      loader: () =>
+        import('./components').then(m => <m.MyCustomProvidedApisEntityCard />),
+    }),
+  ],
+});
+```
+
+For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
+
+##### Consumed Apis Entity Card
+
+An [entity card](https://github.com/backstage/backstage/blob/master/plugins/catalog-react/api-report-alpha.md) extension that renders a table of apis consumed by a particular Software Catalog Component.
+
+| Kind          | Namespace  | Name            | Id                                   |
+| ------------- | ---------- | --------------- | ------------------------------------ |
+| `entity-card` | `api-docs` | `consumed-apis` | `entity-card:api-docs/consumed-apis` |
+
+###### Disable
+
+This card is disabled by default when you install the `api-docs` plugin, but to ensure the card will always be disabled or enabled regardless of the extension's default definition, add the following configuration:
+
+```yaml
+# app-config.yaml
+# example disabling the consumed apis entity card extension
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    # use false as value for disabling the extension and true for enabling
+    - entity-card:api-docs/consumed-apis: false
+    # or
+    # - entity-card:api-docs/consumed-apis:
+    #   - config:
+    #       # set 'true' for enabling it again
+    #       disabled: true
+```
+
+###### Config
+
+For now there is only one configuration available for this entity card extension, which is setting an entity filter that determines when the card should be displayed on the entity page.
+
+Here is an example showing the `consumed-apis` overview cards only for entities of kind component:
+
+```yaml
+# app-config.yaml
+# example setting the extension to only show up for entities with kind "component"
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - entity-card:api-docs/consumed-apis:
+        config:
+          # Default to 'kind:component'
+          # For more information about entity cards filters, check out this pull request
+          # https://github.com/backstage/backstage/pull/21480
+          filter: 'kind:component'
+```
+
+###### Override
+
+Use extension overrides for completely re-implementing the has apis entity card extension:
+
+```tsx
+import { createExtensionOverrides } from '@backstage/backstage-plugin-api';
+import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
+
+export default createExtensionOverrides({
+  extensions: [
+    createEntityCardExtension({
+      // These namespace and name necessary so the system knows that this extension will override the default 'consumed-apis' entity card extension provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      name: 'consumed-apis',
+      // Returing a custom card component
+      loader: () =>
+        import('./components').then(m => <m.MyCustomConsumedApisEntityCard />),
+    }),
+  ],
+});
+```
+
+For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
+
+##### Providing Components Entity Card
+
+An [entity card](https://github.com/backstage/backstage/blob/master/plugins/catalog-react/api-report-alpha.md) extension that renders a table of components that provides a particular Software Catalog api.
+
+| Kind          | Namespace  | Name                   | Id                                          |
+| ------------- | ---------- | ---------------------- | ------------------------------------------- |
+| `entity-card` | `api-docs` | `providing-components` | `entity-card:api-docs/providing-components` |
+
+###### Disable
+
+This card is disabled by default when you install the `api-docs` plugin, but to ensure the card will always be disabled or enabled regardless of the extension's default definition, add the following configuration:
+
+```yaml
+# app-config.yaml
+# example disabling the providing components entity card extension
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    # use false as value for disabling the extension and true for enabling
+    - entity-card:api-docs/providing-components: false
+    # or
+    # - entity-card:api-docs/providing-components:
+    #   - config:
+    #       # set 'true' for enabling it again
+    #       disabled: true
+```
+
+###### Config
+
+For now there is only one configuration available for this entity card extension, which is setting an entity filter that determines when the card should be displayed on the entity page.
+
+Here is an example showing the `providing-components` overview cards only for entities of kind component:
+
+```yaml
+# app-config.yaml
+# example setting the extension to only show up for entities with kind "component"
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - entity-card:api-docs/providing-components:
+        config:
+          # Default to 'kind:api'
+          # For more information about entity cards filters, check out this pull request
+          # https://github.com/backstage/backstage/pull/21480
+          filter: 'kind:component'
+```
+
+###### Override
+
+Use extension overrides for completely re-implementing the has apis entity card extension:
+
+```tsx
+import { createExtensionOverrides } from '@backstage/backstage-plugin-api';
+import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
+
+export default createExtensionOverrides({
+  extensions: [
+    createEntityCardExtension({
+      // These namespace and name necessary so the system knows that this extension will override the default 'providing-components' entity card extension provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      name: 'providing-components',
+      // Returing a custom card component
+      loader: () =>
+        import('./components').then(m => (
+          <m.MyCustomProvidingComponentsEntityCard />
+        )),
+    }),
+  ],
+});
+```
+
+For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
+
+##### Consuming Components Entity Card
+
+An [entity card](https://github.com/backstage/backstage/blob/master/plugins/catalog-react/api-report-alpha.md) extension that renders a table of components that consumes a particular Software Catalog api.
+
+| Kind          | Namespace  | Name                   | Id                                          |
+| ------------- | ---------- | ---------------------- | ------------------------------------------- |
+| `entity-card` | `api-docs` | `consuming-components` | `entity-card:api-docs/consuming-components` |
+
+###### Disable
+
+This card is disabled by default when you install the `api-docs` plugin, but to ensure the card will always be disabled or enabled regardless of the extension's default definition, add the following configuration:
+
+```yaml
+# app-config.yaml
+# example disabling the consuming components entity card extension
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    # use false as value for disabling the extension and true for enabling
+    - entity-card:api-docs/consuming-components: false
+    # or
+    # - entity-card:api-docs/consuming-components:
+    #   - config:
+    #       # set 'true' for enabling it again
+    #       disabled: true
+```
+
+###### Config
+
+For now there is only one configuration available for this entity card extension, which is setting an entity filter that determines when the card should be displayed on the entity page.
+
+Here is an example showing the `consuming-components` overview cards only for entities of kind component:
+
+```yaml
+# app-config.yaml
+# example setting the extension to only show up for entities with kind "component"
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - entity-card:api-docs/consuming-components:
+        config:
+          # Default to 'kind:api'
+          # For more information about entity cards filters, check out this pull request
+          # https://github.com/backstage/backstage/pull/21480
+          filter: 'kind:component'
+```
+
+###### Override
+
+Use extension overrides for completely re-implementing the has apis entity card extension:
+
+```tsx
+import { createExtensionOverrides } from '@backstage/backstage-plugin-api';
+import { createEntityCardExtension } from '@backstage/plugin-catalog-react/alpha';
+
+export default createExtensionOverrides({
+  extensions: [
+    createEntityCardExtension({
+      // These namespace and name necessary so the system knows that this extension will override the default 'consuming-components' entity card extension provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      name: 'consuming-components',
+      // Returing a custom card component
+      loader: () =>
+        import('./components').then(m => (
+          <m.MyCustomConsumingComponentsEntityCard />
+        )),
+    }),
+  ],
+});
+```
+
+For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
+
+### Apis Entity Contents
+
+The `api-docs` provide some entity contents you can enable to customize the Software Catalog entity page.
+
+> [!IMPORTANT]
+> The order in which contents are listed in the configuration file will determine the order in which they appear in overview contents and tabs on entity pages.
+
+See a complete contents list below:
+
+##### Definition Entity Content
+
+An [entity content](https://github.com/backstage/backstage/blob/master/plugins/catalog-react/api-report-alpha.md) extension that renders a tab in the entity page showing a particular entity api definition.
+
+| Kind             | Namespace  | Name         | Id                                   |
+| ---------------- | ---------- | ------------ | ------------------------------------ |
+| `entity-content` | `api-docs` | `definition` | `entity-content:api-docs/definition` |
+
+###### Disable
+
+This content is disabled by default when you install the `api-docs` plugin, but to ensure the content will always be disabled or enabled regardless of the extension's default definition, add the following configuration:
+
+```yaml
+# app-config.yaml
+# example disabling the definition entity content extension
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    # use false as value for disabling the extension and true for enabling
+    - entity-content:api-docs/definition: false
+    # or
+    # - entity-content:api-docs/definition:
+    #   - config:
+    #       # set 'true' for enabling it again
+    #       disabled: true
+```
+
+###### Config
+
+There are a few configuration options for this entity content extension, see the list below:
+
+```yaml
+# app-config.yaml
+# example setting the extension to only show up for entities with kind "api"
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - entity-content:api-docs/definition:
+        config:
+          # A text-based query used to filter whether the entity contentextension should be rendered or not.
+          # For more information about entity cards filters, check out this pull request
+          # https://github.com/backstage/backstage/pull/21480
+          # defaults to 'kind:api'
+          filter: 'kind:api'
+          # The entity content table title
+          # defaults to 'Definition'
+          title: 'Definition'
+          # the content tab path
+          # default to "/definition"
+          path: '/definition'
+```
+
+###### Override
+
+Use extension overrides for completely re-implementing the has apis entity card extension:
+
+```tsx
+import { createExtensionOverrides } from '@backstage/backstage-plugin-api';
+import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha';
+
+export default createExtensionOverrides({
+  extensions: [
+    createEntityContentExtension({
+      // These namespace and name necessary so the system knows that this extension will override the default 'definition' entity content extension provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      name: 'definition',
+      // Returing a custom content component
+      loader: () =>
+        import('./components').then(m => (
+          <m.MyCustomApiDefintionEntityContent />
+        )),
+    }),
+  ],
+});
+```
+
+For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
+
+##### Apis Entity Content
+
+An Entity Content extension that renders a tab in the entity page showing a particular entity consumed and provided apis.
+
+| Kind             | Namespace  | Name   | Id                             |
+| ---------------- | ---------- | ------ | ------------------------------ |
+| `entity-content` | `api-docs` | `apis` | `entity-content:api-docs/apis` |
+
+###### Disable
+
+This content is disabled by default when you install the `api-docs` plugin, but to ensure the content will always be disabled or enabled regardless of the extension's default definition, add the following configuration:
+
+```yaml
+# app-config.yaml
+# example disabling the apis entity content extension
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    # use false as value for disabling the extension and true for enabling
+    - entity-content:api-docs/apis: false
+    # or
+    # - entity-content:api-docs/apis:
+    #   - config:
+    #       # set 'true' for enabling it again
+    #       disabled: true
+```
+
+###### Config
+
+There are a few configuration options for this entity content extension, see the list below:
+
+```yaml
+# app-config.yaml
+# example setting the extension to only show up for entities of kind "content"
+app:
+  extensions:
+    # this is the extension id and it follows the naming pattern bellow:
+    # <extension-kind>/<plugin-namespace>:<extension-name>
+    - entity-content:api-docs/apis:
+        config:
+          # A text-based query used to filter whether the entity contentextension should be rendered or not.
+          # For more information about entity cards filters, check out this pull request
+          # https://github.com/backstage/backstage/pull/21480
+          # defaults to 'kind:component'
+          filter: 'kind:component'
+          # The entity content table title
+          # defaults to 'Definition'
+          title: 'Definition'
+          # the content tab path
+          # default to "/definition"
+          path: '/definition'
+```
+
+###### Override
+
+Use extension overrides for completely re-implementing the apis entity content extension:
+
+```tsx
+import { createExtensionOverrides } from '@backstage/backstage-plugin-api';
+import { createEntityContentExtension } from '@backstage/plugin-catalog-react/alpha';
+
+export default createExtensionOverrides({
+  extensions: [
+    createEntityContentExtension({
+      // These namespace and name necessary so the system knows that this extension will override the default 'apis' entity content extension provided by the 'api-docs' plugin
+      namespace: 'api-docs',
+      name: 'apis',
+      // Returing a custom content component
+      loader: () =>
+        import('./components').then(m => <m.MyCustomApisEntityContent />),
+    }),
+  ],
+});
+```
+
+For more information about where to place extension overrides, see the official [documentation](https://backstage.io/docs/frontend-system/architecture/extension-overrides).
+
+#### Apis Config Api
+
+This is an api used by the `api-docs` plugin to get the api definition widget.
+
+| Kind  | Namespace                | Name | Id                           |
+| ----- | ------------------------ | ---- | ---------------------------- |
+| `api` | `plugin.api-docs.config` | -    | `api:plugin.api-docs.config` |
+
+Changing the widgets returned by this API requires [overriding](https://backstage.io/docs/frontend-system/architecture/extension-overrides) the default extension implementation. Here are a few common override cases:
+
+##### Custom Api Renderings
+
+Add support for additional API types by providing a custom implementation for the `apiDocsConfigRef` and also use this to override the rendering of one of the already supported types.
+
+This is an example with a made-up renderer for SQL schemas:
+
+```tsx
+import {
+  createExtensionOverrides,
+  createApiExtenion,
+  createApiFactory,
+} from '@backstage/frontend-plugin-api';
+import { ApiEntity } from '@backstage/catalog-model';
+import {
+  apiDocsConfigRef,
+  ApiDefinitionWidget,
+  defaultDefinitionWidgets,
+} from '@backstage/plugin-api-docs';
+import { SqlRenderer } from '...';
+
+export default createExtensionOverrides({
+  extensions: [
+    createApiExtenion({
+      factory: createApiFactory({
+        api: apiDocsConfigRef,
+        deps: {},
+        factory: () => {
+          // load the default widgets
+          const definitionWidgets = defaultDefinitionWidgets();
+          return {
+            getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+              // custom rendering for sql
+              if (apiEntity.spec.type === 'sql') {
+                return {
+                  type: 'sql',
+                  title: 'SQL',
+                  component: definition => (
+                    <SqlRenderer definition={definition} />
+                  ),
+                } as ApiDefinitionWidget;
+              }
+
+              // fallback to the defaults
+              return definitionWidgets.find(
+                d => d.type === apiEntity.spec.type,
+              );
+            },
+          };
+        },
+      }),
+    }),
+  ],
+});
+```
+
+##### Adding `requestInterceptor` to Swagger UI
+
+Override the config api to configure a [`requestInterceptor` for Swagger UI](https://github.com/swagger-api/swagger-ui/tree/master/flavors/swagger-ui-react#requestinterceptor-proptypesfunc) as following:
+
+```tsx
+import {
+  createExtensionOverrides,
+  createApiExtenion,
+  createApiFactory,
+} from '@backstage/frontend-plugin-api';
+import {
+  apiDocsConfigRef,
+  defaultDefinitionWidgets,
+  OpenApiDefinitionWidget,
+} from '@backstage/plugin-api-docs';
+import { ApiEntity } from '@backstage/catalog-model';
+
+export default createExtensionOverrides({
+  extensions: [
+    createApiExtenion({
+      factory: createApiFactory({
+        api: apiDocsConfigRef,
+        deps: {},
+        factory: () => {
+          // Overriding openapi definition widget to add header
+          const requestInterceptor = (req: any) => {
+            req.headers.append('myheader', 'wombats');
+            return req;
+          };
+          const definitionWidgets = defaultDefinitionWidgets().map(obj => {
+            if (obj.type === 'openapi') {
+              return {
+                ...obj,
+                component: definition => (
+                  <OpenApiDefinitionWidget
+                    definition={definition}
+                    requestInterceptor={requestInterceptor}
+                  />
+                ),
+              };
+            }
+            return obj;
+          });
+
+          return {
+            getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+              return definitionWidgets.find(
+                d => d.type === apiEntity.spec.type,
+              );
+            },
+          };
+        },
+      }),
+    }),
+  ],
+});
+```
+
+In the same way as the `requestInterceptor` you can override any property of Swagger UI.
+
+##### Provide Specific Supported Methods to Swagger UI
+
+This can be done through utilising the [supportedSubmitMethods prop](https://github.com/swagger-api/swagger-ui/tree/master/flavors/swagger-ui-react#supportedsubmitmethods-proptypesarrayofproptypesoneofget-put-post-delete-options-head-patch-trace).
+If you want to limit the HTTP methods available for the `Try It Out` feature of an OpenAPI API component, you will need to override the config api and list the permitted methods for your API in the `supportedSubmitMethods` parameter:
+
+```tsx
+import {
+  createExtensionOverrides,
+  createApiExtenion,
+  createApiFactory,
+} from '@backstage/frontend-plugin-api';
+import {
+  apiDocsConfigRef,
+  defaultDefinitionWidgets,
+  OpenApiDefinitionWidget,
+} from '@backstage/plugin-api-docs';
+import { ApiEntity } from '@backstage/catalog-model';
+
+export default createExtensionOverrides({
+  extensions: [
+    createApiExtenion({
+      factory: createApiFactory({
+        api: apiDocsConfigRef,
+        deps: {},
+        factory: () => {
+          const supportedSubmitMethods = ['get', 'post', 'put', 'delete'];
+          const definitionWidgets = defaultDefinitionWidgets().map(obj => {
+            if (obj.type === 'openapi') {
+              return {
+                ...obj,
+                component: definition => (
+                  <OpenApiDefinitionWidget
+                    definition={definition}
+                    supportedSubmitMethods={supportedSubmitMethods}
+                  />
+                ),
+              };
+            }
+            return obj;
+          });
+
+          return {
+            getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+              return definitionWidgets.find(
+                d => d.type === apiEntity.spec.type,
+              );
+            },
+          };
+        },
+      }),
+    }),
+  ],
+});
+```
+
+N.B. if you wish to disable the `Try It Out` feature for your API, you can provide an empty list to the `supportedSubmitMethods` parameter.
+
+### Integrations
+
+#### Implementing OAuth 2 Authorization Code flow with Swagger UI
+
+##### Adding `oauth2-redirect.html` to support OAuth2 `redirect_uri` route
+
+The Swagger UI package by expects to have a route to `/oauth2-redirect.html` which processes
+the redirect callback for the OAuth2 Authorization Code flow, however, this file is not installed
+by this plugin.
+
+Grab a copy of [`oauth2-redirect.html`](https://github.com/swagger-api/swagger-ui/blob/master/dist/oauth2-redirect.html)
+and put it in the `app/public/` directory in order to enable Swagger UI to complete this redirection.
+
+This also may require you to adjust `Content Security Policy` header settings of your Backstage application, so that the script in `oauth2-redirect.html` can be executed. Since the script is static we can add the hash of it directly to our CSP policy, which we do by adding the following to the `csp` section of the app configuration:
+
+```yaml
+script-src:
+  - "'self'"
+  - "'unsafe-eval'" # this is required for scaffolder usage, and ajv validation.
+  - "'sha256-GeDavzSZ8O71Jggf/pQkKbt52dfZkrdNMQ3e+Ox+AkI='" # oauth2-redirect.html
+```
+
+##### Configuring your OAuth2 Client
+
+You'll need to make sure your OAuth2 client has been registered in your OAuth2 Authentication Server (AS)
+with the appropriate `redirect_uris`, `scopes` and `grant_types`. For example, if your AS supports
+the [OAuth 2.0 Dynamic Client Registration Protocol](https://tools.ietf.org/html/rfc7591), an example
+POST request body would look like this:
+
+```json
+{
+    "client_name": "Example Backstage api-docs plugin Swagger UI Client",
+    "redirect_uris": [
+        "https://www.getpostman.com/oauth2/callback",
+        "http://localhost:3000/oauth2-redirect.html"
+        "https://<yourhost>/oauth2-redirect.html"
+    ],
+    "scope": "read_pets write_pets",
+    "grant_types": [
+        "authorization_code"
+    ]
+}
+```
+
+The above `redirect_uris` are:
+
+- [Postman](https://www.postman.com/) testing: `https://www.getpostman.com/oauth2/callback`
+- Local Backstage app development: `http://localhost:3000/oauth2-redirect.html`
+- Backstage app production: `https://<yourhost>/oauth2-redirect.html`
+
+##### Configuring OAuth2 in your OpenAPI 3.0 schema
+
+To configure [OAuth 2 Authorization Code](https://swagger.io/docs/specification/authentication/oauth2/) flow
+in your OpenAPI 3.0 schema you'll need something like this snippet:
+
+```yaml
+components:
+  securitySchemes:
+    oauth:
+      type: oauth2
+      description: OAuth2 service
+      flows:
+        authorizationCode:
+          authorizationUrl: https://api.example.com/oauth2/authorize
+          tokenUrl: https://api.example.com/oauth2/token
+          scopes:
+            read_pets: read your pets
+            write_pets: modify pets in your account
+security:
+  oauth:
+    - [read_pets, write_pets]
+```
diff --git a/plugins/api-docs/README.md b/plugins/api-docs/README.md
index 9b8eb1669e..c9a8073982 100644
--- a/plugins/api-docs/README.md
+++ b/plugins/api-docs/README.md
@@ -1,5 +1,8 @@
 # API Documentation
 
+> Disclaimer:
+> If you are looking for documentation on the experimental new frontend system support, please go [here](./README-alpha.md).
+
 This is an extension for the catalog plugin that provides components to discover and display API entities.
 APIs define the interface between components, see the [system model](https://backstage.io/docs/features/software-catalog/system-model) for details.
 They are defined in machine readable formats and provide a human readable documentation.
diff --git a/plugins/api-docs/api-report-alpha.md b/plugins/api-docs/api-report-alpha.md
new file mode 100644
index 0000000000..1d22283884
--- /dev/null
+++ b/plugins/api-docs/api-report-alpha.md
@@ -0,0 +1,22 @@
+## API Report File for "@backstage/plugin-api-docs"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { BackstagePlugin } from '@backstage/frontend-plugin-api';
+import { ExternalRouteRef } from '@backstage/frontend-plugin-api';
+import { RouteRef } from '@backstage/frontend-plugin-api';
+
+// @public (undocumented)
+const _default: BackstagePlugin<
+  {
+    root: RouteRef<undefined>;
+  },
+  {
+    registerApi: ExternalRouteRef<undefined, true>;
+  }
+>;
+export default _default;
+
+// (No @packageDocumentation comment for this package)
+```
diff --git a/plugins/api-docs/package.json b/plugins/api-docs/package.json
index 0cdf564de9..d29a389911 100644
--- a/plugins/api-docs/package.json
+++ b/plugins/api-docs/package.json
@@ -6,9 +6,22 @@
   "types": "src/index.ts",
   "license": "Apache-2.0",
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./alpha": "./src/alpha.tsx",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "alpha": [
+        "src/alpha.tsx"
+      ],
+      "package.json": [
+        "package.json"
+      ]
+    }
   },
   "backstage": {
     "role": "frontend-plugin"
@@ -35,8 +48,10 @@
   "dependencies": {
     "@asyncapi/react-component": "1.2.13",
     "@backstage/catalog-model": "workspace:^",
+    "@backstage/core-compat-api": "workspace:^",
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
+    "@backstage/frontend-plugin-api": "workspace:^",
     "@backstage/plugin-catalog": "workspace:^",
     "@backstage/plugin-catalog-common": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
diff --git a/plugins/api-docs/src/alpha.tsx b/plugins/api-docs/src/alpha.tsx
new file mode 100644
index 0000000000..38b8db89c6
--- /dev/null
+++ b/plugins/api-docs/src/alpha.tsx
@@ -0,0 +1,233 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Grid } from '@material-ui/core';
+
+import {
+  createApiExtension,
+  createApiFactory,
+  createNavItemExtension,
+  createPageExtension,
+  createPlugin,
+  createSchemaFromZod,
+} from '@backstage/frontend-plugin-api';
+
+import {
+  compatWrapper,
+  convertLegacyRouteRef,
+} from '@backstage/core-compat-api';
+import { useApp } from '@backstage/core-plugin-api';
+
+import {
+  createEntityCardExtension,
+  createEntityContentExtension,
+} from '@backstage/plugin-catalog-react/alpha';
+import {
+  ApiEntity,
+  parseEntityRef,
+  RELATION_HAS_PART,
+} from '@backstage/catalog-model';
+
+import { defaultDefinitionWidgets } from './components/ApiDefinitionCard';
+import { rootRoute, registerComponentRouteRef } from './routes';
+import { apiDocsConfigRef } from './config';
+
+function ApiIcon() {
+  const app = useApp();
+  const KindApiSystemIcon = app.getSystemIcon('kind:api')!;
+  return <KindApiSystemIcon />;
+}
+
+const apiDocsNavItem = createNavItemExtension({
+  title: 'APIs',
+  routeRef: convertLegacyRouteRef(rootRoute),
+  icon: () => compatWrapper(<ApiIcon />),
+});
+
+const apiDocsConfigApi = createApiExtension({
+  factory: createApiFactory({
+    api: apiDocsConfigRef,
+    deps: {},
+    factory: () => {
+      const definitionWidgets = defaultDefinitionWidgets();
+      return {
+        getApiDefinitionWidget: (apiEntity: ApiEntity) => {
+          return definitionWidgets.find(d => d.type === apiEntity.spec.type);
+        },
+      };
+    },
+  }),
+});
+
+const apiDocsExplorerPage = createPageExtension({
+  defaultPath: '/api-docs',
+  routeRef: convertLegacyRouteRef(rootRoute),
+  // Mapping DefaultApiExplorerPageProps to config
+  configSchema: createSchemaFromZod(z =>
+    z.object({
+      path: z.string().default('/api-docs'),
+      initiallySelectedFilter: z.enum(['owned', 'starred', 'all']).optional(),
+      // Ommiting columns and actions for now as their types are too complex to map to zod
+    }),
+  ),
+  loader: ({ config }) =>
+    import('./components/ApiExplorerPage').then(m =>
+      compatWrapper(
+        <m.ApiExplorerIndexPage
+          initiallySelectedFilter={config.initiallySelectedFilter}
+        />,
+      ),
+    ),
+});
+
+const apiDocsHasApisEntityCard = createEntityCardExtension({
+  name: 'has-apis',
+  // Ommiting configSchema for now
+  // We are skipping variants and columns are too complex to map to zod
+  // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
+  filter: entity => {
+    return (
+      entity.kind === 'Component' &&
+      entity.relations?.some(
+        ({ type, targetRef }) =>
+          type.toLocaleLowerCase('en-US') === RELATION_HAS_PART &&
+          parseEntityRef(targetRef).kind === 'API',
+      )!!
+    );
+  },
+  loader: () =>
+    import('./components/ApisCards').then(m =>
+      compatWrapper(<m.HasApisCard />),
+    ),
+});
+
+const apiDocsDefinitionEntityCard = createEntityCardExtension({
+  name: 'definition',
+  filter: 'kind:api',
+  loader: () =>
+    import('./components/ApiDefinitionCard').then(m =>
+      compatWrapper(<m.ApiDefinitionCard />),
+    ),
+});
+
+const apiDocsConsumedApisEntityCard = createEntityCardExtension({
+  name: 'consumed-apis',
+  // Ommiting configSchema for now
+  // We are skipping variants and columns are too complex to map to zod
+  // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
+  filter: 'kind:component',
+  loader: () =>
+    import('./components/ApisCards').then(m =>
+      compatWrapper(<m.ConsumedApisCard />),
+    ),
+});
+
+const apiDocsProvidedApisEntityCard = createEntityCardExtension({
+  name: 'provided-apis',
+  // Ommiting configSchema for now
+  // We are skipping variants and columns are too complex to map to zod
+  // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
+  filter: 'kind:component',
+  loader: () =>
+    import('./components/ApisCards').then(m =>
+      compatWrapper(<m.ProvidedApisCard />),
+    ),
+});
+
+const apiDocsConsumingComponentsEntityCard = createEntityCardExtension({
+  name: 'consuming-components',
+  // Ommiting configSchema for now
+  // We are skipping variants
+  // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
+  filter: 'kind:api',
+  loader: () =>
+    import('./components/ComponentsCards').then(m =>
+      compatWrapper(<m.ConsumingComponentsCard />),
+    ),
+});
+
+const apiDocsProvidingComponentsEntityCard = createEntityCardExtension({
+  name: 'providing-components',
+  // Ommiting configSchema for now
+  // We are skipping variants
+  // See: https://github.com/backstage/backstage/pull/22619#discussion_r1477333252
+  filter: 'kind:api',
+  loader: () =>
+    import('./components/ComponentsCards').then(m =>
+      compatWrapper(<m.ProvidingComponentsCard />),
+    ),
+});
+
+const apiDocsDefinitionEntityContent = createEntityContentExtension({
+  name: 'definition',
+  defaultPath: '/defintion',
+  defaultTitle: 'Definition',
+  filter: 'kind:api',
+  loader: async () =>
+    import('./components/ApiDefinitionCard').then(m =>
+      compatWrapper(
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <m.ApiDefinitionCard />
+          </Grid>
+        </Grid>,
+      ),
+    ),
+});
+
+const apiDocsApisEntityContent = createEntityContentExtension({
+  name: 'apis',
+  defaultPath: '/apis',
+  defaultTitle: 'APIs',
+  filter: 'kind:component',
+  loader: async () =>
+    import('./components/ApisCards').then(m =>
+      compatWrapper(
+        <Grid container spacing={3} alignItems="stretch">
+          <Grid item xs={12}>
+            <m.ProvidedApisCard />
+          </Grid>
+          <Grid item xs={12}>
+            <m.ConsumedApisCard />
+          </Grid>
+        </Grid>,
+      ),
+    ),
+});
+
+export default createPlugin({
+  id: 'api-docs',
+  routes: {
+    root: convertLegacyRouteRef(rootRoute),
+  },
+  externalRoutes: {
+    registerApi: convertLegacyRouteRef(registerComponentRouteRef),
+  },
+  extensions: [
+    apiDocsNavItem,
+    apiDocsConfigApi,
+    apiDocsExplorerPage,
+    apiDocsHasApisEntityCard,
+    apiDocsDefinitionEntityCard,
+    apiDocsProvidedApisEntityCard,
+    apiDocsConsumedApisEntityCard,
+    apiDocsConsumingComponentsEntityCard,
+    apiDocsProvidingComponentsEntityCard,
+    apiDocsDefinitionEntityContent,
+    apiDocsApisEntityContent,
+  ],
+});
diff --git a/plugins/catalog-backend-module-github/package.json b/plugins/catalog-backend-module-github/package.json
index c985026960..4d38a3049d 100644
--- a/plugins/catalog-backend-module-github/package.json
+++ b/plugins/catalog-backend-module-github/package.json
@@ -58,7 +58,7 @@
     "@backstage/plugin-events-node": "workspace:^",
     "@octokit/graphql": "^5.0.0",
     "@octokit/rest": "^19.0.3",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "lodash": "^4.17.21",
     "minimatch": "^5.1.2",
     "node-fetch": "^2.6.7",
diff --git a/plugins/catalog-backend/package.json b/plugins/catalog-backend/package.json
index 3cb5ebdc00..2943de7378 100644
--- a/plugins/catalog-backend/package.json
+++ b/plugins/catalog-backend/package.json
@@ -71,7 +71,7 @@
     "express": "^4.17.1",
     "fast-json-stable-stringify": "^2.1.0",
     "fs-extra": "10.1.0",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "glob": "^7.1.6",
     "knex": "^3.0.0",
     "lodash": "^4.17.21",
diff --git a/plugins/catalog-import/package.json b/plugins/catalog-import/package.json
index 2fd7881743..a46cb470eb 100644
--- a/plugins/catalog-import/package.json
+++ b/plugins/catalog-import/package.json
@@ -63,7 +63,7 @@
     "@material-ui/lab": "4.0.0-alpha.61",
     "@octokit/rest": "^19.0.3",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "js-base64": "^3.6.0",
     "lodash": "^4.17.21",
     "react-hook-form": "^7.12.2",
diff --git a/plugins/catalog/src/alpha/EntityOverviewPage.tsx b/plugins/catalog/src/alpha/EntityOverviewPage.tsx
index 932e13d962..85c318cf3f 100644
--- a/plugins/catalog/src/alpha/EntityOverviewPage.tsx
+++ b/plugins/catalog/src/alpha/EntityOverviewPage.tsx
@@ -17,8 +17,8 @@
 import { Entity } from '@backstage/catalog-model';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import Grid from '@material-ui/core/Grid';
-import React, { useMemo } from 'react';
-import { parseFilterExpression } from './filter/parseFilterExpression';
+import React from 'react';
+import { FilterWrapper } from './filter/FilterWrapper';
 
 interface EntityOverviewPageProps {
   cards: Array<{
@@ -28,80 +28,12 @@ interface EntityOverviewPageProps {
   }>;
 }
 
-// Keeps track of what filter expression strings that we've seen duplicates of
-// with functions, or which emitted parsing errors for so far
-const seenParseErrorExpressionStrings = new Set<string>();
-const seenDuplicateExpressionStrings = new Set<string>();
-
-// Given an optional filter function and an optional filter expression, make
-// sure that at most one of them was given, and return a filter function that
-// does the right thing.
-function buildFilterFn(
-  filterFunction?: (entity: Entity) => boolean,
-  filterExpression?: string,
-): (entity: Entity) => boolean {
-  if (
-    filterFunction &&
-    filterExpression &&
-    !seenDuplicateExpressionStrings.has(filterExpression)
-  ) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `Duplicate entity filter methods found, both '${filterExpression}' as well as a callback function, which is not permitted - using the callback`,
-    );
-    seenDuplicateExpressionStrings.add(filterExpression);
-  }
-
-  const filter = filterFunction || filterExpression;
-  if (!filter) {
-    return () => true;
-  } else if (typeof filter === 'function') {
-    return subject => filter(subject);
-  }
-
-  const result = parseFilterExpression(filter);
-  if (
-    result.expressionParseErrors.length &&
-    !seenParseErrorExpressionStrings.has(filter)
-  ) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `Error(s) in entity filter expression '${filter}'`,
-      result.expressionParseErrors,
-    );
-    seenParseErrorExpressionStrings.add(filter);
-  }
-
-  return result.filterFn;
-}
-
-// Handles the memoized parsing of filter expressions for each card
-function CardWrapper(props: {
-  entity: Entity;
-  element: React.JSX.Element;
-  filterFunction?: (entity: Entity) => boolean;
-  filterExpression?: string;
-}) {
-  const { entity, element, filterFunction, filterExpression } = props;
-
-  const filterFn = useMemo(
-    () => buildFilterFn(filterFunction, filterExpression),
-    [filterFunction, filterExpression],
-  );
-
-  return filterFn(entity) ? (
-    <Grid item md={6} xs={12}>
-      {element}
-    </Grid>
-  ) : null;
-}
-
 export function EntityOverviewPage(props: EntityOverviewPageProps) {
   const { entity } = useEntity();
   return (
     <Grid container spacing={3} alignItems="stretch">
       {props.cards.map((card, index) => (
-        <CardWrapper key={index} entity={entity} {...card} />
+        <FilterWrapper key={index} entity={entity} {...card} />
       ))}
     </Grid>
   );
diff --git a/plugins/catalog/src/alpha/filter/FilterWrapper.tsx b/plugins/catalog/src/alpha/filter/FilterWrapper.tsx
new file mode 100644
index 0000000000..e0e74fe481
--- /dev/null
+++ b/plugins/catalog/src/alpha/filter/FilterWrapper.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Entity } from '@backstage/catalog-model';
+import Grid from '@material-ui/core/Grid';
+import React, { useMemo } from 'react';
+import { parseFilterExpression } from './parseFilterExpression';
+
+// Keeps track of what filter expression strings that we've seen duplicates of
+// with functions, or which emitted parsing errors for so far
+const seenParseErrorExpressionStrings = new Set<string>();
+const seenDuplicateExpressionStrings = new Set<string>();
+
+// Given an optional filter function and an optional filter expression, make
+// sure that at most one of them was given, and return a filter function that
+// does the right thing.
+export function buildFilterFn(
+  filterFunction?: (entity: Entity) => boolean,
+  filterExpression?: string,
+): (entity: Entity) => boolean {
+  if (
+    filterFunction &&
+    filterExpression &&
+    !seenDuplicateExpressionStrings.has(filterExpression)
+  ) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Duplicate entity filter methods found, both '${filterExpression}' as well as a callback function, which is not permitted - using the callback`,
+    );
+    seenDuplicateExpressionStrings.add(filterExpression);
+  }
+
+  const filter = filterFunction || filterExpression;
+  if (!filter) {
+    return () => true;
+  } else if (typeof filter === 'function') {
+    return subject => filter(subject);
+  }
+
+  const result = parseFilterExpression(filter);
+  if (
+    result.expressionParseErrors.length &&
+    !seenParseErrorExpressionStrings.has(filter)
+  ) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Error(s) in entity filter expression '${filter}'`,
+      result.expressionParseErrors,
+    );
+    seenParseErrorExpressionStrings.add(filter);
+  }
+
+  return result.filterFn;
+}
+
+// Handles the memoized parsing of filter expressions
+export function FilterWrapper(props: {
+  entity: Entity;
+  element: React.JSX.Element;
+  filterFunction?: (entity: Entity) => boolean;
+  filterExpression?: string;
+}) {
+  const { entity, element, filterFunction, filterExpression } = props;
+
+  const filterFn = useMemo(
+    () => buildFilterFn(filterFunction, filterExpression),
+    [filterFunction, filterExpression],
+  );
+
+  return filterFn(entity) ? (
+    <Grid item md={6} xs={12}>
+      {element}
+    </Grid>
+  ) : null;
+}
diff --git a/plugins/catalog/src/alpha/pages.tsx b/plugins/catalog/src/alpha/pages.tsx
index 3f40796da9..15f7d6cc91 100644
--- a/plugins/catalog/src/alpha/pages.tsx
+++ b/plugins/catalog/src/alpha/pages.tsx
@@ -31,6 +31,7 @@ import {
 import { catalogExtensionData } from '@backstage/plugin-catalog-react/alpha';
 import { rootRouteRef } from '../routes';
 import { useEntityFromUrl } from '../components/CatalogEntityPage/useEntityFromUrl';
+import { buildFilterFn } from './filter/FilterWrapper';
 
 export const catalogPage = createPageExtension({
   defaultPath: '/catalog',
@@ -57,24 +58,29 @@ export const catalogEntityPage = createPageExtension({
       path: coreExtensionData.routePath,
       routeRef: coreExtensionData.routeRef.optional(),
       title: catalogExtensionData.entityContentTitle,
+      filterFunction: catalogExtensionData.entityFilterFunction.optional(),
+      filterExpression: catalogExtensionData.entityFilterExpression.optional(),
     }),
   },
   loader: async ({ inputs }) => {
     const { EntityLayout } = await import('../components/EntityLayout');
     const Component = () => {
+      const { entity, ...rest } = useEntityFromUrl();
       return (
-        <AsyncEntityProvider {...useEntityFromUrl()}>
-          <EntityLayout>
-            {inputs.contents.map(content => (
-              <EntityLayout.Route
-                key={content.output.path}
-                path={content.output.path}
-                title={content.output.title}
-              >
-                {content.output.element}
-              </EntityLayout.Route>
-            ))}
-          </EntityLayout>
+        <AsyncEntityProvider entity={entity} {...rest}>
+          {entity ? (
+            <EntityLayout>
+              {inputs.contents
+                .filter(({ output: { filterFunction, filterExpression } }) =>
+                  buildFilterFn(filterFunction, filterExpression)(entity),
+                )
+                .map(({ output: { path, title, element } }) => (
+                  <EntityLayout.Route key={path} path={path} title={title}>
+                    {element}
+                  </EntityLayout.Route>
+                ))}
+            </EntityLayout>
+          ) : null}
         </AsyncEntityProvider>
       );
     };
diff --git a/plugins/events-backend/src/service/EventsPlugin.test.ts b/plugins/events-backend/src/service/EventsPlugin.test.ts
index e65147ebbb..7f555a0b6f 100644
--- a/plugins/events-backend/src/service/EventsPlugin.test.ts
+++ b/plugins/events-backend/src/service/EventsPlugin.test.ts
@@ -14,21 +14,14 @@
  * limitations under the License.
  */
 
-import { errorHandler } from '@backstage/backend-common';
-import {
-  coreServices,
-  createBackendModule,
-  createServiceFactory,
-} from '@backstage/backend-plugin-api';
+import { createBackendModule } from '@backstage/backend-plugin-api';
 import { mockServices, startTestBackend } from '@backstage/backend-test-utils';
-import { eventsExtensionPoint } from '@backstage/plugin-events-node/alpha';
 import {
   TestEventBroker,
   TestEventPublisher,
   TestEventSubscriber,
 } from '@backstage/plugin-events-backend-test-utils';
-import express from 'express';
-import Router from 'express-promise-router';
+import { eventsExtensionPoint } from '@backstage/plugin-events-node/alpha';
 import request from 'supertest';
 import { eventsPlugin } from './EventsPlugin';
 
@@ -38,11 +31,6 @@ describe('eventPlugin', () => {
     const publisher = new TestEventPublisher();
     const subscriber = new TestEventSubscriber('sub', ['fake']);
 
-    const httpRouter = Router();
-    httpRouter.use(express.json());
-    httpRouter.use(errorHandler());
-    const app = express().use(httpRouter);
-
     const testModule = createBackendModule({
       pluginId: 'events',
       moduleId: 'test',
@@ -60,7 +48,7 @@ describe('eventPlugin', () => {
       },
     });
 
-    await startTestBackend({
+    const { server } = await startTestBackend({
       extensionPoints: [],
       features: [
         eventsPlugin(),
@@ -75,11 +63,6 @@ describe('eventPlugin', () => {
             },
           },
         }),
-        createServiceFactory({
-          service: coreServices.httpRouter,
-          deps: {},
-          factory: async () => httpRouter,
-        }),
       ],
     });
 
@@ -87,8 +70,8 @@ describe('eventPlugin', () => {
     expect(eventBroker.subscribed.length).toEqual(1);
     expect(eventBroker.subscribed[0]).toBe(subscriber);
 
-    const response = await request(app)
-      .post('/http/fake')
+    const response = await request(server)
+      .post('/api/events/http/fake')
       .timeout(1000)
       .send({ test: 'fake' });
     expect(response.status).toBe(202);
diff --git a/plugins/github-actions/package.json b/plugins/github-actions/package.json
index 8371d674d2..16e1ee7d2b 100644
--- a/plugins/github-actions/package.json
+++ b/plugins/github-actions/package.json
@@ -46,7 +46,7 @@
     "@material-ui/lab": "4.0.0-alpha.61",
     "@octokit/rest": "^19.0.3",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "luxon": "^3.0.0",
     "react-use": "^17.2.4"
   },
diff --git a/plugins/scaffolder-backend-module-confluence-to-markdown/package.json b/plugins/scaffolder-backend-module-confluence-to-markdown/package.json
index d584f8e555..7d20be9a9b 100644
--- a/plugins/scaffolder-backend-module-confluence-to-markdown/package.json
+++ b/plugins/scaffolder-backend-module-confluence-to-markdown/package.json
@@ -46,7 +46,7 @@
     "@backstage/integration": "workspace:^",
     "@backstage/plugin-scaffolder-node": "workspace:^",
     "fs-extra": "10.1.0",
-    "git-url-parse": "^13.1.0",
+    "git-url-parse": "^14.0.0",
     "node-fetch": "^2.6.7",
     "node-html-markdown": "^1.3.0",
     "yaml": "^2.0.0"
diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json
index 53e17ee1f4..4a346a5068 100644
--- a/plugins/scaffolder/package.json
+++ b/plugins/scaffolder/package.json
@@ -76,7 +76,7 @@
     "@uiw/react-codemirror": "^4.9.3",
     "classnames": "^2.2.6",
     "event-source-polyfill": "^1.0.31",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "humanize-duration": "^3.25.1",
     "immer": "^9.0.1",
     "json-schema": "^0.4.0",
diff --git a/plugins/techdocs-module-addons-contrib/package.json b/plugins/techdocs-module-addons-contrib/package.json
index 5357fbb736..d6f241046f 100644
--- a/plugins/techdocs-module-addons-contrib/package.json
+++ b/plugins/techdocs-module-addons-contrib/package.json
@@ -42,7 +42,7 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@react-hookz/web": "^24.0.0",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "photoswipe": "^5.3.7"
   },
   "peerDependencies": {
diff --git a/plugins/techdocs-node/package.json b/plugins/techdocs-node/package.json
index 417de9cf90..55fc9f61b9 100644
--- a/plugins/techdocs-node/package.json
+++ b/plugins/techdocs-node/package.json
@@ -59,7 +59,7 @@
     "@types/express": "^4.17.6",
     "express": "^4.17.1",
     "fs-extra": "10.1.0",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "hpagent": "^1.2.0",
     "js-yaml": "^4.0.0",
     "json5": "^2.1.3",
diff --git a/plugins/techdocs/package.json b/plugins/techdocs/package.json
index 3544b62589..19e98b9ef1 100644
--- a/plugins/techdocs/package.json
+++ b/plugins/techdocs/package.json
@@ -68,7 +68,7 @@
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "dompurify": "^3.0.0",
     "event-source-polyfill": "1.0.25",
-    "git-url-parse": "^13.0.0",
+    "git-url-parse": "^14.0.0",
     "jss": "~10.10.0",
     "lodash": "^4.17.21",
     "react-helmet": "6.1.0",
diff --git a/yarn.lock b/yarn.lock
index c53abaacb4..aed5933fb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3316,7 +3316,7 @@ __metadata:
     express: ^4.17.1
     express-promise-router: ^4.1.0
     fs-extra: 10.1.0
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     helmet: ^6.0.0
     http-errors: ^2.0.0
     isomorphic-git: ^1.23.0
@@ -3664,7 +3664,7 @@ __metadata:
     express: ^4.17.1
     fork-ts-checker-webpack-plugin: ^7.0.0-alpha.8
     fs-extra: 10.1.0
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     glob: ^7.1.7
     global-agent: ^3.0.0
     handlebars: ^4.7.3
@@ -4293,7 +4293,7 @@ __metadata:
     "@octokit/rest": ^19.0.3
     "@types/luxon": ^3.0.0
     cross-fetch: ^4.0.0
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     lodash: ^4.17.21
     luxon: ^3.0.0
     msw: ^1.0.0
@@ -4557,9 +4557,11 @@ __metadata:
     "@backstage/catalog-model": "workspace:^"
     "@backstage/cli": "workspace:^"
     "@backstage/core-app-api": "workspace:^"
+    "@backstage/core-compat-api": "workspace:^"
     "@backstage/core-components": "workspace:^"
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
+    "@backstage/frontend-plugin-api": "workspace:^"
     "@backstage/plugin-catalog": "workspace:^"
     "@backstage/plugin-catalog-common": "workspace:^"
     "@backstage/plugin-catalog-react": "workspace:^"
@@ -5497,7 +5499,7 @@ __metadata:
     "@octokit/graphql": ^5.0.0
     "@octokit/rest": ^19.0.3
     "@types/lodash": ^4.14.151
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     lodash: ^4.17.21
     luxon: ^3.0.0
     minimatch: ^5.1.2
@@ -5720,7 +5722,7 @@ __metadata:
     express: ^4.17.1
     fast-json-stable-stringify: ^2.1.0
     fs-extra: 10.1.0
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     glob: ^7.1.6
     knex: ^3.0.0
     lodash: ^4.17.21
@@ -5828,7 +5830,7 @@ __metadata:
     "@testing-library/react": ^14.0.0
     "@testing-library/user-event": ^14.0.0
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     js-base64: ^3.6.0
     lodash: ^4.17.21
     msw: ^1.0.0
@@ -6882,7 +6884,7 @@ __metadata:
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^14.0.0
     "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     luxon: ^3.0.0
     react-use: ^17.2.4
   peerDependencies:
@@ -8437,7 +8439,7 @@ __metadata:
     "@backstage/integration": "workspace:^"
     "@backstage/plugin-scaffolder-node": "workspace:^"
     fs-extra: 10.1.0
-    git-url-parse: ^13.1.0
+    git-url-parse: ^14.0.0
     msw: ^1.0.0
     node-fetch: ^2.6.7
     node-html-markdown: ^1.3.0
@@ -8782,7 +8784,7 @@ __metadata:
     "@uiw/react-codemirror": ^4.9.3
     classnames: ^2.2.6
     event-source-polyfill: ^1.0.31
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     humanize-duration: ^3.25.1
     immer: ^9.0.1
     json-schema: ^0.4.0
@@ -9598,7 +9600,7 @@ __metadata:
     "@testing-library/jest-dom": ^6.0.0
     "@testing-library/react": ^14.0.0
     "@types/react": ^16.13.1 || ^17.0.0
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     photoswipe: ^5.3.7
   peerDependencies:
     react: ^16.13.1 || ^17.0.0 || ^18.0.0
@@ -9639,7 +9641,7 @@ __metadata:
     aws-sdk-client-mock: ^3.0.0
     express: ^4.17.1
     fs-extra: 10.1.0
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     hpagent: ^1.2.0
     js-yaml: ^4.0.0
     json5: ^2.1.3
@@ -9716,7 +9718,7 @@ __metadata:
     canvas: ^2.10.2
     dompurify: ^3.0.0
     event-source-polyfill: 1.0.25
-    git-url-parse: ^13.0.0
+    git-url-parse: ^14.0.0
     jss: ~10.10.0
     lodash: ^4.17.21
     react-helmet: 6.1.0
@@ -29277,6 +29279,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"git-url-parse@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "git-url-parse@npm:14.0.0"
+  dependencies:
+    git-up: ^7.0.0
+  checksum: b011c5de652e60e5f19de9815d1b78b2f725deb07e73d1b9ff8ca6657406d0a6c691fbe4460017822676a80635f93099345cadbd06361b76f53c4556265d3e48
+  languageName: node
+  linkType: hard
+
 "github-from-package@npm:0.0.0":
   version: 0.0.0
   resolution: "github-from-package@npm:0.0.0"