diff --git a/packages/entities/entities-plugins/README.md b/packages/entities/entities-plugins/README.md
index 8d9ec8b01b..8711178ee5 100644
--- a/packages/entities/entities-plugins/README.md
+++ b/packages/entities/entities-plugins/README.md
@@ -37,11 +37,13 @@ yarn add @kong-ui-public/entities-plugins
 Import the component(s) in your host application as well as the package styles
 
 ```ts
-import { PluginList, PluginConfigCard } from '@kong-ui-public/entities-plugins'
+import { PluginList, PluginSelect, PluginForm, PluginConfigCard } from '@kong-ui-public/entities-plugins'
 import '@kong-ui-public/entities-plugins/dist/style.css'
 ```
 
 ## Individual component documentation
 
 - [`<PluginList.vue />`](docs/plugin-list.md)
+- [`<PluginSelect.vue />`](docs/plugin-select.md)
+- [`<PluginForm.vue />`](docs/plugin-form.md)
 - [`<PluginConfigCard.vue />`](docs/plugin-config-card.md)
diff --git a/packages/entities/entities-plugins/docs/plugin-form.md b/packages/entities/entities-plugins/docs/plugin-form.md
new file mode 100644
index 0000000000..bbcda141e0
--- /dev/null
+++ b/packages/entities/entities-plugins/docs/plugin-form.md
@@ -0,0 +1,113 @@
+# PluginForm.vue
+
+A form component for Plugins.
+
+- [Requirements](#requirements)
+- [Usage](#usage)
+  - [Install](#install)
+  - [Props](#props)
+  - [Events](#events)
+  - [Usage example](#usage-example)
+- [TypeScript interfaces](#typescript-interfaces)
+
+## Requirements
+
+- `vue` and `vue-router` must be initialized in the host application
+- `@kong/kongponents` must be added as a dependency in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
+- `@kong-ui-public/i18n` must be available as a `dependency` in the host application.
+- `axios` must be installed as a dependency in the host application
+
+## Usage
+
+### Install
+
+[See instructions for installing the `@kong-ui-public/entities-plugins` package.](../README.md#install)
+
+### Props
+
+#### `config`
+
+- type: `Object as PropType<KonnectPluginFormConfig | KongManagerPluginFormConfig>`
+- required: `true`
+- default: `undefined`
+- properties:
+  - `app`:
+    - type: `'konnect' | 'kongManager'`
+    - required: `true`
+    - default: `undefined`
+    - App name.
+
+  - `apiBaseUrl`:
+    - type: `string`
+    - required: `true`
+    - default: `undefined`
+    - Base URL for API requests.
+
+  - `requestHeaders`:
+    - type: `RawAxiosRequestHeaders | AxiosHeaders`
+    - required: `false`
+    - default: `undefined`
+    - Additional headers to send with all Axios requests.
+
+  - `cancelRoute`:
+    - type: `RouteLocationRaw`
+    - required: `true`
+    - default: `undefined`
+    - Route to return to when canceling creation of a plugin.
+
+  - `workspace`:
+    - type: `string`
+    - required: `true`
+    - default: `undefined`
+    - *Specific to Kong Manager*. Name of the current workspace.
+
+  - `controlPlaneId`:
+    - type: `string`
+    - required: `true`
+    - default: `undefined`
+    - *Specific to Konnect*. Name of the current control plane.
+
+  - `entityId`:
+    - type: `string`
+    - required: `false`
+    - default: `''`
+    - Id of the entity to bind the plugin to on creation.
+
+The base konnect or kongManger config.
+
+#### `pluginId`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+If showing the `Edit` type form, the ID of the plugin.
+
+### Events
+
+#### error
+
+An `@error` event is emitted when form validation fails. The event payload is the response error.
+
+#### loading
+
+A `@loading` event is emitted when loading state changes. The event payload is a boolean.
+
+#### update
+
+A `@update` event is emitted when the form is saved. The event payload is the plugin object.
+
+### Usage example
+
+Please refer to the [sandbox](../sandbox/pages/PluginListPage.vue). The form is accessible by clicking the `Edit` action of an existing plugin or after selecting a plugin when creating a new one.
+
+## TypeScript interfaces
+
+TypeScript interfaces [are available here](https://github.com/Kong/public-ui-components/blob/main/packages/entities/entities-plugins/src/types/plugin-form.ts) and can be directly imported into your host application. The following type interfaces are available for import:
+
+```ts
+import type {
+  KonnectPluginFormConfig,
+  KongManagerPluginFormConfig,
+} from '@kong-ui-public/entities-plugins'
+```
diff --git a/packages/entities/entities-plugins/docs/plugin-select.md b/packages/entities/entities-plugins/docs/plugin-select.md
new file mode 100644
index 0000000000..643c0b1658
--- /dev/null
+++ b/packages/entities/entities-plugins/docs/plugin-select.md
@@ -0,0 +1,193 @@
+# PluginSelect.vue
+
+A grid component for selecting Plugins.
+
+- [Requirements](#requirements)
+- [Usage](#usage)
+  - [Install](#install)
+  - [Props](#props)
+  - [Events](#events)
+  - [Usage example](#usage-example)
+- [TypeScript interfaces](#typescript-interfaces)
+
+## Requirements
+
+- `vue` and `vue-router` must be initialized in the host application
+- `@kong/kongponents` must be added as a dependency in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
+- `@kong-ui-public/i18n` must be available as a `dependency` in the host application.
+- `axios` must be installed as a dependency in the host application
+
+## Usage
+
+### Install
+
+[See instructions for installing the `@kong-ui-public/entities-plugins` package.](../README.md#install)
+
+### Props
+
+#### `config`
+
+- type: `Object as PropType<KonnectPluginFormConfig | KongManagerPluginFormConfig>`
+- required: `true`
+- properties:
+  - `app`:
+    - type: `'konnect' | 'kongManager'`
+    - required: `true`
+    - default: `undefined`
+    - App name.
+
+  - `apiBaseUrl`:
+    - type: `string`
+    - required: `true`
+    - default: `undefined`
+    - Base URL for API requests.
+
+  - `requestHeaders`:
+    - type: `RawAxiosRequestHeaders | AxiosHeaders`
+    - required: `false`
+    - default: `undefined`
+    - Additional headers to send with all Axios requests.
+
+  - `getCreateRoute`:
+    - type: `(plugin: string) => RouteLocationRaw`
+    - required: `true`
+    - default: `undefined`
+    - A function that returns the route for creating a specific plugin type.
+
+  - `createCustomRoute`:
+    - type: RouteLocationRaw
+    - required: `false`
+    - default: `undefined`
+    - The route for creating a custom plugin.
+
+  - `getCustomEditRoute`:
+    - type: `(plugin: string) => RouteLocationRaw`
+    - required: `false`
+    - default: `undefined`
+    - A function that returns the route for editing a custom plugin.
+
+  - `workspace`:
+    - type: `string`
+    - required: `true`
+    - default: `undefined`
+    - *Specific to Kong Manager*. Name of the current workspace.
+
+  - `controlPlaneId`:
+    - type: `string`
+    - required: `true`
+    - default: `undefined`
+    - *Specific to Konnect*. Name of the current control plane.
+
+  - `entityId`:
+    - type: `string`
+    - required: `false`
+    - default: `null`
+    - Current entity id if the PluginSelect is being launched from the plugins tab on a consumer, consumer group, gateway service, or route detail page.
+
+  - `entityType`:
+    - type: `'consumers' | 'consumer_groups' | 'services' | 'routes'`
+    - required: `false`
+    - default: `null`
+    - Current entity type if the PluginSelect is being launched from the plugins tab on a consumer, consumer group, gateway service, or route detail page.
+
+The base konnect or kongManger config.
+
+#### `canCreateCustomPlugin`
+
+- type: `Function as PropType<() => boolean | Promise<boolean>>`
+- required: `false`
+- default: `async () => true`
+
+A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can create a new custom plugin.
+
+#### `canDeleteCustomPlugin`
+
+- type: `Function as PropType<(row: object) => boolean | Promise<boolean>>`
+- required: `false`
+- default: `async () => true`
+
+A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can delete a given custom plugin.
+
+#### `canEditCustomPlugin`
+
+- type: `Function as PropType<(row: object) => boolean | Promise<boolean>>`
+- required: `false`
+- default: `async () => true`
+
+A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can edit a given custom plugin.
+
+#### `navigateOnClick`
+
+- type: `boolean`
+- required: `false`
+- default: `true`
+
+If false, let consuming component handle event when clicking on a plugin. Used in conjunction with `@plugin-clicked` event.
+
+#### `availableOnServer`
+
+- type: `boolean`
+- required: `false`
+- default: `false`
+
+Checks the kong config plugins.available_on_server and if true, then it will not show plugins from PluginMeta that are outside of the available_on_server array.
+
+#### `ignoredPlugins`
+
+- type: `string[]`
+- required: `false`
+- default: '[]'
+
+An array of the plugin names. These are plugins that should not be displayed.
+
+#### `disabledPlugins`
+
+- type: `DisabledPlugin`
+- required: `false`
+- default: `{}`
+
+Plugins that should be disabled and their disabled messages.
+Example:
+
+```json
+{
+  'acl': 'ACL is not supported for this entity type',
+}
+```
+
+#### `pluginsPerRow`
+
+- type: `number`
+- required: `false`
+- default: `4`
+
+Number of plugins to always have visible (never will be collapsed).
+
+### Events
+
+#### plugin-clicked
+
+An `@plugin-clicked` event is emitted when a plugin in the selection grid is clicked. The event payload is the plugin object.
+
+#### loading
+
+A `@loading` event is emitted when loading state changes. The event payload is a boolean.
+
+#### delete-custom:success
+
+A `@delete-custom:success` event is emitted when custom plugin is successfully deleted. The event payload is the deleted plugin's name.
+
+### Usage example
+
+Please refer to the [sandbox](../sandbox/pages/PluginListPage.vue). The form is accessible by clicking the `+ New Plugin` button.
+
+## TypeScript interfaces
+
+TypeScript interfaces [are available here](https://github.com/Kong/public-ui-components/blob/main/packages/entities/entities-plugins/src/types/plugin-form.ts) and can be directly imported into your host application. The following type interfaces are available for import:
+
+```ts
+import type {
+  KonnectPluginFormConfig,
+  KongManagerPluginFormConfig,
+} from '@kong-ui-public/entities-plugins'
+```
diff --git a/packages/entities/entities-plugins/fixtures/mockData.ts b/packages/entities/entities-plugins/fixtures/mockData.ts
index 9f7f5a3b10..72a763fd64 100644
--- a/packages/entities/entities-plugins/fixtures/mockData.ts
+++ b/packages/entities/entities-plugins/fixtures/mockData.ts
@@ -72,3 +72,421 @@ export const paginate = (
     offset,
   }
 }
+
+export const kmLimitedAvailablePlugins = {
+  plugins: {
+    enabled_in_cluster: [],
+    available_on_server: {
+      'hmac-auth': {
+        version: '3.6.0',
+        priority: 1030,
+      },
+      'ip-restriction': {
+        version: '3.6.0',
+        priority: 990,
+      },
+    },
+  },
+}
+
+export const firstShownPlugin = 'basic-auth'
+export const kmAvailablePlugins = {
+  plugins: {
+    enabled_in_cluster: [],
+    available_on_server: {
+      'hmac-auth': {
+        version: '3.6.0',
+        priority: 1030,
+      },
+      [firstShownPlugin]: {
+        version: '3.6.0',
+        priority: 1100,
+      },
+      'ip-restriction': {
+        version: '3.6.0',
+        priority: 990,
+      },
+      'request-transformer': {
+        version: '3.6.0',
+        priority: 801,
+      },
+      'response-transformer': {
+        version: '3.6.0',
+        priority: 800,
+      },
+      'request-size-limiting': {
+        version: '3.6.0',
+        priority: 951,
+      },
+      'rate-limiting': {
+        version: '3.6.0',
+        priority: 910,
+      },
+      'response-ratelimiting': {
+        version: '3.6.0',
+        priority: 900,
+      },
+      syslog: {
+        version: '3.6.0',
+        priority: 4,
+      },
+      loggly: {
+        version: '3.6.0',
+        priority: 6,
+      },
+      datadog: {
+        version: '3.6.0',
+        priority: 10,
+      },
+      'ldap-auth': {
+        version: '3.6.0',
+        priority: 1200,
+      },
+      statsd: {
+        version: '3.6.0',
+        priority: 11,
+      },
+      'bot-detection': {
+        version: '3.6.0',
+        priority: 2500,
+      },
+      'aws-lambda': {
+        version: '3.6.0',
+        priority: 750,
+      },
+      'request-termination': {
+        version: '3.6.0',
+        priority: 2,
+      },
+      prometheus: {
+        version: '3.6.0',
+        priority: 13,
+      },
+      'proxy-cache': {
+        version: '3.6.0',
+        priority: 100,
+      },
+      session: {
+        version: '3.6.0',
+        priority: 1900,
+      },
+      acme: {
+        version: '3.6.0',
+        priority: 1705,
+      },
+      'grpc-gateway': {
+        version: '3.6.0',
+        priority: 998,
+      },
+      'grpc-web': {
+        version: '3.6.0',
+        priority: 3,
+      },
+      'pre-function': {
+        version: '3.6.0',
+        priority: 1000000,
+      },
+      'post-function': {
+        version: '3.6.0',
+        priority: -1000,
+      },
+      'azure-functions': {
+        version: '3.6.0',
+        priority: 749,
+      },
+      zipkin: {
+        version: '3.6.0',
+        priority: 100000,
+      },
+      opentelemetry: {
+        version: '3.6.0',
+        priority: 14,
+      },
+      'key-auth': {
+        version: '3.6.0',
+        priority: 1250,
+      },
+      'http-log': {
+        version: '3.6.0',
+        priority: 12,
+      },
+      'file-log': {
+        version: '3.6.0',
+        priority: 9,
+      },
+      'udp-log': {
+        version: '3.6.0',
+        priority: 8,
+      },
+      'tcp-log': {
+        version: '3.6.0',
+        priority: 7,
+      },
+      oauth2: {
+        version: '3.6.0',
+        priority: 1400,
+      },
+      cors: {
+        version: '3.6.0',
+        priority: 2000,
+      },
+      'correlation-id': {
+        version: '3.6.0',
+        priority: 100001,
+      },
+      acl: {
+        version: '3.6.0',
+        priority: 950,
+      },
+      jwt: {
+        version: '3.6.0',
+        priority: 1450,
+      },
+      'tls-metadata-headers': {
+        version: '3.6.0',
+        priority: 996,
+      },
+      saml: {
+        version: '3.6.0',
+        priority: 900,
+      },
+      'xml-threat-protection': {
+        version: '3.6.0',
+        priority: 999,
+      },
+      'jwe-decrypt': {
+        version: '3.6.0',
+        priority: 1999,
+      },
+      'oas-validation': {
+        version: '3.6.0',
+        priority: 850,
+      },
+      'tls-handshake-modifier': {
+        version: '3.6.0',
+        priority: 997,
+      },
+      'konnect-application-auth': {
+        version: '3.6.0',
+        priority: 950,
+      },
+      'websocket-validator': {
+        version: '3.6.0',
+        priority: 999,
+      },
+      'websocket-size-limit': {
+        version: '3.6.0',
+        priority: 999,
+      },
+      jq: {
+        version: '3.6.0',
+        priority: 811,
+      },
+      opa: {
+        version: '3.6.0',
+        priority: 920,
+      },
+      'application-registration': {
+        version: '3.6.0',
+        priority: 995,
+      },
+      'oauth2-introspection': {
+        version: '3.6.0',
+        priority: 1700,
+      },
+      'proxy-cache-advanced': {
+        version: '3.6.0',
+        priority: 100,
+      },
+      'openid-connect': {
+        version: '3.6.0',
+        priority: 1050,
+      },
+      'forward-proxy': {
+        version: '3.6.0',
+        priority: 50,
+      },
+      canary: {
+        version: '3.6.0',
+        priority: 20,
+      },
+      'request-transformer-advanced': {
+        version: '3.6.0',
+        priority: 802,
+      },
+      'response-transformer-advanced': {
+        version: '3.6.0',
+        priority: 800,
+      },
+      'rate-limiting-advanced': {
+        version: '3.6.0',
+        priority: 910,
+      },
+      'ldap-auth-advanced': {
+        version: '3.6.0',
+        priority: 1200,
+      },
+      'statsd-advanced': {
+        version: '3.6.0',
+        priority: 11,
+      },
+      'route-by-header': {
+        version: '3.6.0',
+        priority: 850,
+      },
+      'jwt-signer': {
+        version: '3.6.0',
+        priority: 1020,
+      },
+      'vault-auth': {
+        version: '3.6.0',
+        priority: 1350,
+      },
+      'request-validator': {
+        version: '3.6.0',
+        priority: 999,
+      },
+      'mtls-auth': {
+        version: '3.6.0',
+        priority: 1600,
+      },
+      'graphql-proxy-cache-advanced': {
+        version: '3.6.0',
+        priority: 99,
+      },
+      'graphql-rate-limiting-advanced': {
+        version: '3.6.0',
+        priority: 902,
+      },
+      degraphql: {
+        version: '3.6.0',
+        priority: 1500,
+      },
+      'route-transformer-advanced': {
+        version: '3.6.0',
+        priority: 780,
+      },
+      'kafka-log': {
+        version: '3.6.0',
+        priority: 5,
+      },
+      'kafka-upstream': {
+        version: '3.6.0',
+        priority: 751,
+      },
+      'exit-transformer': {
+        version: '3.6.0',
+        priority: 9999,
+      },
+      'key-auth-enc': {
+        version: '3.6.0',
+        priority: 1250,
+      },
+      'upstream-timeout': {
+        version: '3.6.0',
+        priority: 400,
+      },
+      mocking: {
+        version: '3.6.0',
+        priority: -1,
+      },
+    },
+    disabled_on_server: {},
+  },
+}
+
+// keep this list sorted alphabetically!!!
+export const firstShownCustomPlugin = 'moesif'
+export const customPluginNames = [
+  firstShownCustomPlugin,
+  'myplugin',
+  'myplugin2',
+  'myplugin3',
+  'myplugin4',
+]
+export const kongPluginNames = [
+  'acl',
+  'acme',
+  'app-dynamics',
+  'aws-lambda',
+  'azure-functions',
+  firstShownPlugin,
+  'bot-detection',
+  'canary',
+  'correlation-id',
+  'cors',
+  'datadog',
+  'degraphql',
+  'exit-transformer',
+  'file-log',
+  'forward-proxy',
+  'graphql-proxy-cache-advanced',
+  'graphql-rate-limiting-advanced',
+  'grpc-gateway',
+  'grpc-web',
+  'hmac-auth',
+  'http-log',
+  'ip-restriction',
+  'jq',
+  'jwe-decrypt',
+  'jwt',
+  'kafka-log',
+  'kafka-upstream',
+  'key-auth',
+  'ldap-auth',
+  'ldap-auth-advanced',
+  'loggly',
+  'mocking',
+  'mtls-auth',
+  'oas-validation',
+  'oauth2-introspection',
+  'opa',
+  'openid-connect',
+  'opentelemetry',
+  'post-function',
+  'pre-function',
+  'prometheus',
+  'proxy-cache',
+  'proxy-cache-advanced',
+  'rate-limiting',
+  'rate-limiting-advanced',
+  'request-size-limiting',
+  'request-termination',
+  'request-transformer',
+  'request-transformer-advanced',
+  'request-validator',
+  'response-ratelimiting',
+  'response-transformer',
+  'response-transformer-advanced',
+  'route-by-header',
+  'route-transformer-advanced',
+  'saml',
+  'session',
+  'statsd',
+  'statsd-advanced',
+  'syslog',
+  'tcp-log',
+  'tls-handshake-modifier',
+  'tls-metadata-headers',
+  'udp-log',
+  // 'upstream-authenticator',
+  'upstream-timeout',
+  'websocket-size-limit',
+  'websocket-validator',
+  'xml-threat-protection',
+  'zipkin',
+]
+
+export const konnectLimitedAvailablePlugins = {
+  names: [
+    'hmac-auth',
+    'ip-restriction',
+  ],
+}
+
+export const konnectAvailablePlugins = {
+  names: [
+    ...kongPluginNames,
+    ...customPluginNames,
+  ],
+}
diff --git a/packages/entities/entities-plugins/package.json b/packages/entities/entities-plugins/package.json
index 798a7de3c9..3deee8e209 100644
--- a/packages/entities/entities-plugins/package.json
+++ b/packages/entities/entities-plugins/package.json
@@ -64,7 +64,7 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "1MB"
+    "errorLimit": "1.6MB"
   },
   "dependencies": {
     "@kong-ui-public/copy-uuid": "workspace:^",
@@ -72,6 +72,7 @@
     "@kong-ui-public/entities-consumers": "workspace:^",
     "@kong-ui-public/entities-gateway-services": "workspace:^",
     "@kong-ui-public/entities-routes": "workspace:^",
-    "@kong-ui-public/entities-shared": "workspace:^"
+    "@kong-ui-public/entities-shared": "workspace:^",
+    "@kong/icons": "^1.7.8"
   }
 }
diff --git a/packages/entities/entities-plugins/sandbox/index.ts b/packages/entities/entities-plugins/sandbox/index.ts
index bc99ab7b01..7b1545a7e7 100644
--- a/packages/entities/entities-plugins/sandbox/index.ts
+++ b/packages/entities/entities-plugins/sandbox/index.ts
@@ -16,16 +16,31 @@ const init = async () => {
         component: () => import('./pages/PluginListPage.vue'),
       },
       {
-        path: '/plugin/create',
+        path: '/plugin/select',
+        name: 'select-plugin',
+        component: () => import('./pages/PluginSelectPage.vue'),
+      },
+      {
+        path: '/plugin/create/:plugin',
         name: 'create-plugin',
         component: () => import('./pages/FallbackPage.vue'),
       },
+      {
+        path: '/custom-plugin/create',
+        name: 'create-custom-plugin',
+        component: () => import('./pages/FallbackPage.vue'),
+      },
       {
         path: '/plugin/:plugin/:id',
         name: 'view-plugin',
         component: () => import('./pages/PluginConfigCardPage.vue'),
         props: true,
       },
+      {
+        path: '/custom-plugin/:plugin/edit',
+        name: 'edit-custom-plugin',
+        component: () => import('./pages/FallbackPage.vue'),
+      },
       {
         path: '/plugin/:id/edit',
         name: 'edit-plugin',
diff --git a/packages/entities/entities-plugins/sandbox/pages/PluginListPage.vue b/packages/entities/entities-plugins/sandbox/pages/PluginListPage.vue
index c260517b62..591263b8c7 100644
--- a/packages/entities/entities-plugins/sandbox/pages/PluginListPage.vue
+++ b/packages/entities/entities-plugins/sandbox/pages/PluginListPage.vue
@@ -56,7 +56,7 @@ const konnectConfig = ref<KonnectPluginListConfig>({
   apiBaseUrl: '/us/kong-api/konnect-api', // `/{geo}/kong-api/konnect-api`, with leading slash and no trailing slash
   // Set the root `.env.development.local` variable to a control plane your PAT can access
   controlPlaneId,
-  createRoute: { name: 'create-plugin' },
+  createRoute: { name: 'select-plugin' },
   getViewRoute: (plugin: EntityRow) => ({ name: 'view-plugin', params: { id: plugin.id, plugin: plugin.name } }),
   getEditRoute: (plugin: EntityRow) => ({ name: 'edit-plugin', params: { id: plugin.id } }),
   getScopedEntityViewRoute: (type: ViewRouteType, id: string) => ({ name: `view-${type}`, params: { id } }),
@@ -73,7 +73,7 @@ const kongManagerConfig = ref<KongManagerPluginListConfig>({
   workspace: 'default',
   apiBaseUrl: '/kong-manager', // For local dev server proxy
   isExactMatch: false,
-  createRoute: { name: 'create-plugin' },
+  createRoute: { name: 'select-plugin' },
   getViewRoute: (plugin: EntityRow) => ({ name: 'view-plugin', params: { id: plugin.id, plugin: plugin.name } }),
   getEditRoute: (plugin: EntityRow) => ({ name: 'edit-plugin', params: { id: plugin.id } }),
   getScopedEntityViewRoute: (type: ViewRouteType, id: string) => ({ name: `view-${type}`, params: { id } }),
diff --git a/packages/entities/entities-plugins/sandbox/pages/PluginSelectPage.vue b/packages/entities/entities-plugins/sandbox/pages/PluginSelectPage.vue
new file mode 100644
index 0000000000..3579c52a78
--- /dev/null
+++ b/packages/entities/entities-plugins/sandbox/pages/PluginSelectPage.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="plugin-select-sandbox">
+    <h2>Konnect API</h2>
+    <PluginSelect
+      :config="konnectConfig"
+      @delete-custom:success="handleDeleteSuccess"
+    />
+
+    <h2>Kong Manager API</h2>
+    <PluginSelect
+      :config="kongManagerConfig"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { KonnectPluginFormConfig, KongManagerPluginFormConfig } from '../../src'
+import { PluginSelect } from '../../src'
+
+const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
+
+const konnectConfig = ref<KonnectPluginFormConfig>({
+  app: 'konnect',
+  apiBaseUrl: '/us/kong-api/konnect-api', // `/{geo}/kong-api`, with leading slash and no trailing slash; Consuming app would pass in something like `https://us.api.konghq.com`
+  // Set the root `.env.development.local` variable to a control plane your PAT can access
+  controlPlaneId,
+  // force the scope
+  entityType: 'services',
+  entityId: '6f1ef200-d3d4-4979-9376-726f2216d90c',
+  getCreateRoute: (plugin: string) => ({
+    name: 'create-plugin',
+    params: {
+      control_plane_id: controlPlaneId.value,
+      plugin,
+    },
+  }),
+  // custom plugins
+  createCustomRoute: { name: 'create-custom-plugin' },
+  getCustomEditRoute: (plugin: string) => ({
+    name: 'edit-custom-plugin',
+    params: {
+      control_plane_id: controlPlaneId.value,
+      plugin,
+    },
+  }),
+})
+
+const kongManagerConfig = ref<KongManagerPluginFormConfig>({
+  app: 'kongManager',
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager', // For local dev server proxy
+  // force the scope
+  // entityType: 'consumers',
+  // entityId: '123-abc-i-lover-cats',
+  getCreateRoute: (plugin: string) => ({
+    name: 'create-plugin',
+    params: {
+      plugin,
+    },
+  }),
+})
+
+const handleDeleteSuccess = (plugin: string): void => {
+  console.log(`Custom plugin ${plugin} deleted`)
+}
+</script>
+
+<style lang="scss" scoped>
+.plugin-select-sandbox {
+  padding: 20px;
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/components/PluginForm.vue b/packages/entities/entities-plugins/src/components/PluginForm.vue
new file mode 100644
index 0000000000..6aa94c4876
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/PluginForm.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="kong-ui-entities-plugin-form">
+    <EntityBaseForm
+      :can-submit="canSubmit"
+      :config="config"
+      :edit-id="pluginId"
+      :error-message="form.errorMessage"
+      :fetch-url="fetchUrl"
+      :is-readonly="form.isReadonly"
+      @cancel="handleClickCancel"
+      @fetch:error="(err: any) => $emit('error', err)"
+      @fetch:success="initForm"
+      @loading="(val: boolean) => $emit('loading', val)"
+      @submit="saveFormData"
+    >
+      <!-- <EntityFormSection
+        :description="t('form.sections.general.description')"
+        :title="t('form.sections.general.title')"
+      >
+        <KInput
+          v-model.trim="form.fields.name"
+          autocomplete="off"
+          data-testid="plugin-form-name"
+          :label="t('form.fields.name.label')"
+          :placeholder="t('form.fields.name.placeholder')"
+          :readonly="form.isReadonly"
+          required
+          type="text"
+        />
+
+        <KInput
+          v-model.trim="form.fields.tags"
+          autocomplete="off"
+          data-testid="plugin-form-tags"
+          :help="t('form.fields.tags.help')"
+          :label="t('form.fields.tags.label')"
+          :label-attributes="{ help: t('form.fields.tags.tooltip') }"
+          :placeholder="t('form.fields.tags.placeholder')"
+          :readonly="form.isReadonly"
+          type="text"
+        />
+      </EntityFormSection>
+
+      <EntityFormSection
+        :description="t('form.sections.certificate.description')"
+        has-divider
+        :title="t('form.sections.certificate.title')"
+      >
+        <p>
+          content
+        </p>
+      </EntityFormSection> -->
+    </EntityBaseForm>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { computed, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import type { AxiosError, AxiosResponse } from 'axios'
+import type {
+  KonnectPluginFormConfig,
+  KongManagerPluginFormConfig,
+  PluginFormState,
+  PluginFormFields,
+} from '../types'
+import endpoints from '../plugins-endpoints'
+// import composables from '../composables'
+import { useAxios, useErrors, /* EntityFormSection, */ EntityBaseForm, EntityBaseFormType } from '@kong-ui-public/entities-shared'
+import '@kong-ui-public/entities-shared/dist/style.css'
+
+const emit = defineEmits<{
+  (e: 'update', data: Record<string, any>): void,
+  (e: 'error', error: AxiosError): void,
+  (e: 'loading', isLoading: boolean): void,
+}>()
+
+// Component props - This structure must exist in ALL entity components, with the exclusion of unneeded action props (e.g. if you don't need `canDelete`, just exclude it)
+const props = defineProps({
+  /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+  config: {
+    type: Object as PropType<KonnectPluginFormConfig | KongManagerPluginFormConfig>,
+    required: true,
+    validator: (config: KonnectPluginFormConfig | KongManagerPluginFormConfig): boolean => {
+      if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
+      if (config.app === 'konnect' && !config.controlPlaneId) return false
+      if (config.app === 'kongManager' && typeof config.workspace !== 'string') return false
+      if (!config.cancelRoute) return false
+      return true
+    },
+  },
+  /** If a valid Plugin ID is provided, it will put the form in Edit mode instead of Create */
+  pluginId: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+
+const router = useRouter()
+// const { i18n: { t } } = composables.useI18n()
+const { getMessageFromError } = useErrors()
+
+const { axiosInstance } = useAxios({
+  headers: props.config?.requestHeaders,
+})
+
+const fetchUrl = computed<string>(() => endpoints.form[props.config.app].edit)
+const formType = computed((): EntityBaseFormType => props.pluginId ? EntityBaseFormType.Edit : EntityBaseFormType.Create)
+
+const form = reactive<PluginFormState>({
+  fields: {
+    name: '',
+    tags: '',
+    entity_id: '',
+  },
+  isReadonly: false,
+  errorMessage: '',
+})
+
+const formFieldsOriginal = reactive<PluginFormFields>({
+  name: '',
+  tags: '',
+  entity_id: '',
+})
+
+/**
+ * Is the form submit button enabled?
+ * If the form.fields and formFieldsOriginal are equal, always return false
+ */
+const canSubmit = computed((): boolean => JSON.stringify(form.fields) !== JSON.stringify(formFieldsOriginal) && !!form.fields.name)
+
+const initForm = (data: Record<string, any>): void => {
+  form.fields.name = data?.name || ''
+  form.fields.tags = data?.tags?.join(', ') || ''
+  // TODO:
+  // form.fields.entity_id = data?.certificate?.id || ''
+
+  // Set initial state of `formFieldsOriginal` to these values in order to detect changes
+  Object.assign(formFieldsOriginal, form.fields)
+}
+
+const handleClickCancel = (): void => {
+  if (props.config.cancelRoute) {
+    router.push(props.config.cancelRoute)
+  }
+}
+
+/* ---------------
+ * Saving
+ * ---------------
+ */
+
+/**
+ * Build the validate and submit URL
+ */
+const validateSubmitUrl = computed((): string => {
+  let url = `${props.config.apiBaseUrl}${endpoints.form[props.config.app].validate}`
+
+  if (props.config.app === 'konnect') {
+    url = url.replace(/{controlPlaneId}/gi, props.config?.controlPlaneId || '')
+  } else if (props.config.app === 'kongManager') {
+    url = url.replace(/\/{workspace}/gi, props.config?.workspace ? `/${props.config.workspace}` : '')
+  }
+  // Always replace the id when editing
+  url = url.replace(/{id}/gi, props.pluginId)
+  return url
+})
+
+/**
+ * Build the submit URL
+ */
+const submitUrl = computed<string>(() => {
+  let url = `${props.config.apiBaseUrl}${endpoints.form[props.config.app][formType.value]}`
+
+  if (props.config.app === 'konnect') {
+    url = url.replace(/{controlPlaneId}/gi, props.config?.controlPlaneId || '')
+  } else if (props.config.app === 'kongManager') {
+    url = url.replace(/\/{workspace}/gi, props.config?.workspace ? `/${props.config.workspace}` : '')
+  }
+
+  // Always replace the id when editing
+  url = url.replace(/{id}/gi, props.pluginId)
+
+  return url
+})
+
+const saveFormData = async (): Promise<void> => {
+  try {
+    form.isReadonly = true
+
+    const requestBody: Record<string, any> = {
+      name: form.fields.name,
+      tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '').trim())?.filter((tag: string) => tag !== ''),
+    }
+
+    let response: AxiosResponse | undefined
+
+    await axiosInstance.post(validateSubmitUrl.value, requestBody)
+
+    if (formType.value === 'create') {
+      response = await axiosInstance.post(submitUrl.value, requestBody)
+    } else if (formType.value === 'edit') {
+      response = props.config?.app === 'konnect'
+        // Note: Konnect currently uses PUT because PATCH is not fully supported in Koko
+        //       If this changes, the `edit` form methods should be re-evaluated/updated accordingly
+        ? await axiosInstance.put(submitUrl.value, requestBody)
+        : await axiosInstance.patch(submitUrl.value, requestBody)
+    }
+
+    form.fields.name = response?.data?.name || ''
+    form.fields.tags = response?.data?.tags?.join(', ') || ''
+    // TODO:
+    // form.fields.entity_id = response?.data?.certificate?.id || ''
+
+    // Set initial state of `formFieldsOriginal` to these values in order to detect changes
+    Object.assign(formFieldsOriginal, form.fields)
+
+    // Emit an update event for the host app to respond to
+    emit('update', response?.data)
+  } catch (error: any) {
+    form.errorMessage = getMessageFromError(error)
+    // Emit the error for the host app
+    emit('error', error)
+  } finally {
+    form.isReadonly = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.kong-ui-entities-plugin-form {
+  width: 100%;
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
index 95328e1a30..85aa7fa53f 100644
--- a/packages/entities/entities-plugins/src/components/PluginList.vue
+++ b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -237,6 +237,7 @@ import {
   useDeleteUrlBuilder,
   useGatewayFeatureSupported,
 } from '@kong-ui-public/entities-shared'
+import '@kong-ui-public/entities-shared/dist/style.css'
 
 import type {
   BaseTableHeaders,
@@ -259,8 +260,6 @@ import type {
 
 import PluginIcon from './PluginIcon.vue'
 
-import '@kong-ui-public/entities-shared/dist/style.css'
-
 const pluginMetaData = composables.usePluginMetaData()
 
 const emit = defineEmits<{
diff --git a/packages/entities/entities-plugins/src/components/PluginSelect.cy.ts b/packages/entities/entities-plugins/src/components/PluginSelect.cy.ts
new file mode 100644
index 0000000000..ff5bf0d8dd
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/PluginSelect.cy.ts
@@ -0,0 +1,614 @@
+// Cypress component test spec file
+import { PluginGroupArray, PluginGroup, type KongManagerPluginFormConfig, type KonnectPluginFormConfig } from '../types'
+import {
+  kmAvailablePlugins,
+  kmLimitedAvailablePlugins,
+  konnectAvailablePlugins,
+  konnectLimitedAvailablePlugins,
+  firstShownPlugin,
+  firstShownCustomPlugin,
+  kongPluginNames,
+  customPluginNames,
+} from '../../fixtures/mockData'
+import type { Router } from 'vue-router'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import PluginSelect from './PluginSelect.vue'
+
+const baseConfigKonnect: KonnectPluginFormConfig = {
+  app: 'konnect',
+  apiBaseUrl: '/us/kong-api/konnect-api',
+  controlPlaneId: 'abc-123-i-love-cats',
+  // force the scope
+  // entityType: 'services',
+  // entityId: '6f1ef200-d3d4-4979-9376-726f2216d90c',
+  getCreateRoute: (plugin: string) => ({
+    name: 'create-plugin',
+    params: {
+      control_plane_id: 'abc-123-i-love-cats',
+      plugin,
+    },
+  }),
+  // custom plugins
+  createCustomRoute: { name: 'create-custom-plugin' },
+  getCustomEditRoute: (plugin: string) => ({
+    name: 'edit-custom-plugin',
+    params: {
+      control_plane_id: 'abc-123-i-love-cats',
+      plugin,
+    },
+  }),
+}
+
+const baseConfigKM:KongManagerPluginFormConfig = {
+  app: 'kongManager',
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager',
+  // force the scope
+  // entityType: 'consumers',
+  // entityId: '123-abc-i-lover-cats',
+  getCreateRoute: (plugin: string) => ({
+    name: 'create-plugin',
+    params: {
+      plugin,
+    },
+  }),
+}
+
+// filter out these 3 groups because we currently don't have
+// any plugins for 'Deployment' and 'WebSocket Plugins'.
+// Custom plugins are not shown in Kong Manager and displayed
+// separately in Konnect.
+const PLUGIN_GROUPS_IN_USE = PluginGroupArray.filter((group: string) => {
+  if (group === PluginGroup.CUSTOM_PLUGINS || group === PluginGroup.DEPLOYMENT ||
+      group === PluginGroup.WEBSOCKET) {
+    return false
+  }
+
+  return true
+})
+
+describe('<PluginSelect />', () => {
+  describe('Kong Manager', () => {
+    const interceptKM = (params?: {
+      mockData?: object
+      alias?: string
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/kong`,
+        },
+        {
+          statusCode: 200,
+          body: params?.mockData ?? kmAvailablePlugins,
+        },
+      ).as(params?.alias ?? 'getAvailablePlugins')
+    }
+
+    it('should show the select page', () => {
+      interceptKM()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKM,
+        },
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+      cy.get('.plugins-filter-input-container').should('be.visible')
+      cy.get('.plugin-select-grid').should('be.visible')
+      cy.getTestId(`${firstShownPlugin}-card`).should('be.visible')
+
+      // plugin group collapses show
+      PLUGIN_GROUPS_IN_USE.forEach((pluginGroup: string) => {
+        cy.get('[data-testid="k-collapse-title"]').should('contain.text', pluginGroup)
+      })
+      // renders all plugins
+      for (const pluginName in kmAvailablePlugins.plugins.available_on_server) {
+        cy.getTestId(`${pluginName}-card`).should('exist')
+      }
+    })
+
+    it('should allow customizing the pluginsPerRow', () => {
+      const pluginsPerRow = 3
+      const expectedCount = pluginsPerRow * PLUGIN_GROUPS_IN_USE.length
+
+      interceptKM()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKM,
+          pluginsPerRow,
+        },
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+      cy.get('.k-collapse-visible-content .plugin-card-content').should('have.length', expectedCount)
+    })
+
+    it('should correctly render disabled plugins', () => {
+      const disabledPlugins = { 'basic-auth': 'This plugin is disabled' }
+
+      interceptKM()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKM,
+          disabledPlugins,
+        },
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      for (const key in disabledPlugins) {
+        cy.get(`.plugin-card.disabled [data-testid="${key}-card"]`).should('be.visible')
+      }
+    })
+
+    it('should correctly hide ignored plugins', () => {
+      const ignoredPlugins = ['basic-auth']
+
+      interceptKM()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKM,
+          ignoredPlugins,
+        },
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      ignoredPlugins.forEach((pluginName) => {
+        cy.getTestId(`${pluginName}-card`).should('not.exist')
+      })
+    })
+
+    it('should correctly render available plugins when isAvailableOnly is true', () => {
+      interceptKM({
+        mockData: kmLimitedAvailablePlugins,
+      })
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKM,
+          showAvailableOnly: true,
+        },
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      // renders all plugins
+      for (const pluginName in kmLimitedAvailablePlugins.plugins.available_on_server) {
+        cy.getTestId(`${pluginName}-card`).should('exist')
+      }
+
+      // does not render a plugin when not available
+      cy.getTestId(`${firstShownPlugin}-card`).should('not.exist')
+    })
+
+    it('should allow filtering of plugins', () => {
+      interceptKM()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKM,
+        },
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      // search
+      cy.getTestId('plugins-filter').should('be.visible')
+      cy.getTestId('plugins-filter').type(firstShownPlugin)
+
+      cy.getTestId(`${firstShownPlugin}-card`).should('be.visible')
+      cy.get('.plugin-card-content').should('have.length', 1)
+    })
+
+    it('should handle error state - available plugins failed to load', () => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/kong`,
+        },
+        {
+          statusCode: 500,
+          body: {},
+        },
+      ).as('getAvailablePlugins2')
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKM,
+        },
+      })
+
+      cy.wait('@getAvailablePlugins2')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.getTestId('plugins-fetch-error').should('be.visible')
+    })
+
+    it('should handle empty state - invalid plugin name', () => {
+      interceptKM()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKM,
+        },
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      // search
+      cy.getTestId('plugins-filter').should('be.visible')
+      cy.getTestId('plugins-filter').type('xxxxx')
+
+      cy.getTestId('plugins-empty-state').should('be.visible')
+    })
+
+    it('click event should be emitted when Plugin was clicked and navigateOnClick is false', () => {
+      interceptKM()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKM,
+          onPluginClicked: cy.spy().as('onPluginClickedSpy'),
+          navigateOnClick: false,
+        },
+      }).then(({ wrapper }) => wrapper)
+        .as('vueWrapper')
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.getTestId(`${firstShownPlugin}-card`).should('be.visible')
+      cy.getTestId(`${firstShownPlugin}-card`).click()
+
+      cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(PluginSelect)
+        .vm.$emit('plugin-clicked', {}))
+
+      cy.get('@onPluginClickedSpy').should('have.been.called')
+    })
+  })
+
+  describe('Konnect', () => {
+    // Create a new router instance for each test
+    let router: Router
+    const interceptKonnect = (params?: {
+      mockData?: object
+      alias?: string
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/v1/available-plugins`,
+        },
+        {
+          statusCode: 200,
+          body: params?.mockData ?? konnectAvailablePlugins,
+        },
+      ).as(params?.alias ?? 'getAvailablePlugins')
+    }
+
+    beforeEach(() => {
+      // Initialize a new router before each test
+      router = createRouter({
+        routes: [
+          { path: '/', name: 'list-plugin', component: { template: '<div>ListPage</div>' } },
+        ],
+        history: createMemoryHistory(),
+      })
+    })
+
+    it('should show the select page tabs', () => {
+      interceptKonnect()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKonnect,
+        },
+        router,
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+      cy.get('.plugins-filter-input-container').should('be.visible')
+
+      // kong plugins
+      cy.get('#kong-tab').should('be.visible')
+      cy.get('.plugin-select-grid').should('be.visible')
+      // kong visible / custom not
+      cy.getTestId(`${firstShownPlugin}-card`).should('be.visible')
+      cy.getTestId(`${firstShownCustomPlugin}-card`).should('not.exist')
+
+      // renders all plugins (kong)
+      kongPluginNames.forEach((pluginName: string) => {
+        cy.getTestId(`${pluginName}-card`).should('exist')
+      })
+
+      // plugin group collapses show
+      PLUGIN_GROUPS_IN_USE.forEach((pluginGroup: string) => {
+        cy.get('[data-testid="k-collapse-title"]').should('contain.text', pluginGroup)
+      })
+
+      // custom plugins
+      cy.get('#custom-tab').should('be.visible')
+      cy.get('#custom-tab').click()
+      cy.get('.custom-plugins-grid').should('be.visible')
+      // kong hidden / custom not
+      cy.getTestId(`${firstShownPlugin}-card`).should('not.exist')
+      cy.getTestId(`${firstShownCustomPlugin}-card`).should('be.visible')
+
+      // renders all plugins (custom)
+      customPluginNames.forEach((pluginName: string) => {
+        cy.getTestId(`${pluginName}-card`).should('exist')
+      })
+    })
+
+    it('should allow customizing the pluginsPerRow', () => {
+      const pluginsPerRow = 3
+      const expectedCount = pluginsPerRow * PLUGIN_GROUPS_IN_USE.length
+
+      interceptKonnect()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKonnect,
+          pluginsPerRow,
+        },
+        router,
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+      cy.get('.k-collapse-visible-content .plugin-card-content').should('have.length', expectedCount)
+    })
+
+    it('should correctly render disabled plugins', () => {
+      const disabledPlugins = { 'basic-auth': 'This plugin is disabled' }
+
+      interceptKonnect()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKonnect,
+          disabledPlugins,
+        },
+        router,
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      for (const key in disabledPlugins) {
+        cy.get(`.plugin-card.disabled [data-testid="${key}-card"]`).should('be.visible')
+      }
+    })
+
+    it('should correctly render ignored plugins', () => {
+      const ignoredPlugins = ['basic-auth']
+
+      interceptKonnect()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKonnect,
+          ignoredPlugins,
+        },
+        router,
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      ignoredPlugins.forEach((pluginName) => {
+        cy.getTestId(`${pluginName}-card`).should('not.exist')
+      })
+    })
+
+    it('should correctly render available plugins when isAvailableOnly is true', () => {
+      interceptKonnect({
+        mockData: konnectLimitedAvailablePlugins,
+      })
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKonnect,
+          showAvailableOnly: true,
+        },
+        router,
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      // renders all plugins
+      konnectLimitedAvailablePlugins.names.forEach((pluginName: string) => {
+        cy.getTestId(`${pluginName}-card`).should('exist')
+      })
+
+      // does not render a plugin when not available
+      cy.getTestId(`${firstShownPlugin}-card`).should('not.exist')
+    })
+
+    it('should allow filtering of plugins', () => {
+      interceptKonnect()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKonnect,
+        },
+        router,
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      // search
+      cy.getTestId('plugins-filter').should('be.visible')
+      cy.getTestId('plugins-filter').type(firstShownPlugin)
+
+      cy.getTestId(`${firstShownPlugin}-card`).should('be.visible')
+      cy.get('.plugin-card-content').should('have.length', 1)
+    })
+
+    it('should handle error state - available plugins failed to load', () => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/v1/available-plugins`,
+        },
+        {
+          statusCode: 500,
+          body: {},
+        },
+      ).as('getAvailablePlugins')
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKonnect,
+        },
+        router,
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.getTestId('plugins-fetch-error').should('be.visible')
+    })
+
+    it('should handle empty state - invalid plugin name', () => {
+      interceptKonnect()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKonnect,
+        },
+        router,
+      })
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.get('.kong-ui-entities-plugin-select-form').should('be.visible')
+      cy.get('.kong-ui-entities-plugin-select-form .plugins-results-container').should('be.visible')
+
+      // search
+      cy.getTestId('plugins-filter').should('be.visible')
+      cy.getTestId('plugins-filter').type('xxxxx')
+
+      cy.getTestId('plugins-empty-state').should('be.visible')
+    })
+
+    it('click event should be emitted when Plugin was clicked and navigateOnClick is false', () => {
+      interceptKonnect()
+
+      cy.mount(PluginSelect, {
+        props: {
+          config: baseConfigKonnect,
+          onPluginClicked: cy.spy().as('onPluginClickedSpy'),
+          navigateOnClick: false,
+        },
+        router,
+      }).then(({ wrapper }) => wrapper)
+        .as('vueWrapper')
+
+      cy.wait('@getAvailablePlugins')
+
+      cy.getTestId(`${firstShownPlugin}-card`).should('be.visible')
+      cy.getTestId(`${firstShownPlugin}-card`).click()
+
+      cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(PluginSelect)
+        .vm.$emit('plugin-clicked', {}))
+
+      cy.get('@onPluginClickedSpy').should('have.been.called')
+    })
+
+    describe('custom plugin actions', () => {
+      it('should correctly render custom plugin actions', () => {
+        interceptKonnect()
+
+        cy.mount(PluginSelect, {
+          props: {
+            config: baseConfigKonnect,
+            canCreateCustomPlugin: () => false,
+            canEditCustomPlugin: () => true,
+            canDeleteCustomPlugin: () => true,
+          },
+          router,
+        })
+
+        cy.wait('@getAvailablePlugins')
+
+        // custom plugins
+        cy.get('#custom-tab').should('be.visible')
+        cy.get('#custom-tab').click()
+        cy.get('.custom-plugins-grid').should('be.visible')
+
+        cy.getTestId('custom-plugin-actions').eq(0).click()
+        cy.getTestId('edit-plugin-schema').should('be.visible')
+        cy.getTestId('delete-plugin-schema').should('be.visible')
+        // negative test for create
+        cy.getTestId('custom-plugin-create-card').should('not.exist')
+      })
+
+      it('should render create card if user has create rights', () => {
+        interceptKonnect()
+
+        cy.mount(PluginSelect, {
+          props: {
+            config: baseConfigKonnect,
+            canCreateCustomPlugin: () => true,
+            canEditCustomPlugin: () => false,
+            canDeleteCustomPlugin: () => false,
+          },
+          router,
+        })
+
+        cy.wait('@getAvailablePlugins')
+
+        // custom plugins
+        cy.get('#custom-tab').should('be.visible')
+        cy.get('#custom-tab').click()
+        cy.get('.custom-plugins-grid').should('be.visible')
+
+        cy.getTestId('custom-plugin-create-card').should('be.visible')
+        // negative test for edit and delete
+        cy.getTestId('custom-plugin-actions').should('not.exist')
+      })
+    })
+  })
+})
diff --git a/packages/entities/entities-plugins/src/components/PluginSelect.vue b/packages/entities/entities-plugins/src/components/PluginSelect.vue
new file mode 100644
index 0000000000..70d3b803ae
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/PluginSelect.vue
@@ -0,0 +1,498 @@
+<template>
+  <div class="kong-ui-entities-plugin-select-form">
+    <div class="plugins-filter-input-container">
+      <KInput
+        v-model.trim="filter"
+        class="plugins-filter-input"
+        data-testid="plugins-filter"
+        :placeholder="t('search.placeholder.select')"
+        type="search"
+      />
+    </div>
+
+    <section v-if="isLoading">
+      <KSkeleton
+        :table-rows="1"
+        type="table"
+      >
+        <KSkeletonBox
+          width="6"
+        />
+        <KSkeletonBox
+          class="title-loading-skeleton"
+          width="6"
+        />
+      </KSkeleton>
+      <PluginCardSkeleton
+        :card-count="8"
+        type="card"
+      />
+    </section>
+
+    <KEmptyState
+      v-else-if="hasError"
+      data-testid="plugins-fetch-error"
+      hide-cta
+      is-error
+    >
+      <template #message>
+        <h3>{{ fetchErrorMessage }}</h3>
+      </template>
+    </KEmptyState>
+
+    <KEmptyState
+      v-else-if="noSearchResults && filter"
+      cta-is-hidden
+      data-testid="plugins-empty-state"
+      icon="stateNoSearchResults"
+      icon-size="96"
+    >
+      <template #message>
+        <h5>{{ t('search.no_results', { filter }) }}</h5>
+      </template>
+    </KEmptyState>
+
+    <section
+      v-else
+      aria-live="polite"
+      class="plugins-results-container"
+    >
+      <!-- Konnect -->
+      <KTabs
+        v-if="tabs.length"
+        v-model="activeTab"
+        data-testid="plugins-tabs"
+        :tabs="tabs"
+        @changed="(hash: string) => $router.replace({ hash })"
+      >
+        <template #kong>
+          <div data-testid="kong-tab">
+            <p class="tab-description">
+              {{ t('plugins.select.tabs.kong.description') }}
+            </p>
+            <PluginSelectGrid
+              :config="config"
+              :navigate-on-click="navigateOnClick"
+              :plugin-list="filteredPlugins"
+              :plugins-per-row="pluginsPerRow"
+              @plugin-clicked="(val: PluginType) => $emit('plugin-clicked', val)"
+            />
+          </div>
+        </template>
+
+        <template #custom>
+          <div data-testid="custom-tab">
+            <p class="tab-description">
+              {{ t('plugins.select.tabs.custom.description') }}
+            </p>
+
+            <PluginCustomGrid
+              :can-create-custom-plugin="usercanCreateCustomPlugin"
+              :can-delete-custom-plugin="usercanDeleteCustomPlugin"
+              :can-edit-custom-plugin="usercanEditCustomPlugin"
+              :config="config"
+              :navigate-on-click="navigateOnClick"
+              :plugin-list="filteredPlugins"
+              :plugins-per-row="pluginsPerRow"
+              @delete:success="(name: string) => $emit('delete-custom:success', name)"
+              @plugin-clicked="(val: PluginType) => $emit('plugin-clicked', val)"
+              @revalidate="() => pluginsList = buildPluginList()"
+            />
+          </div>
+        </template>
+      </KTabs>
+
+      <!-- Kong Manager -->
+      <PluginSelectGrid
+        v-else
+        :config="config"
+        :navigate-on-click="navigateOnClick"
+        :plugin-list="filteredPlugins"
+        :plugins-per-row="pluginsPerRow"
+        @plugin-clicked="(val: PluginType) => $emit('plugin-clicked', val)"
+      />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onBeforeMount, onMounted, type PropType } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  PluginGroup,
+  PluginScope,
+  type KongManagerPluginFormConfig,
+  type KonnectPluginFormConfig,
+  type PluginType,
+  type DisabledPlugin,
+  type PluginCardList,
+} from '../types'
+import { useAxios, useHelpers, useErrors } from '@kong-ui-public/entities-shared'
+import composables from '../composables'
+import endpoints from '../plugins-endpoints'
+import PluginCardSkeleton from './select/PluginCardSkeleton.vue'
+import PluginCustomGrid from './custom-plugins/PluginCustomGrid.vue'
+import PluginSelectGrid from './select/PluginSelectGrid.vue'
+
+const props = defineProps({
+  /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+  config: {
+    type: Object as PropType<KonnectPluginFormConfig | KongManagerPluginFormConfig>,
+    required: true,
+    validator: (config: KonnectPluginFormConfig | KongManagerPluginFormConfig): boolean => {
+      if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
+      if (!config.getCreateRoute) return false
+      return true
+    },
+  },
+  /** A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can create a custom plugin */
+  canCreateCustomPlugin: {
+    type: Function as PropType<() => boolean | Promise<boolean>>,
+    required: false,
+    default: async () => true,
+  },
+  /** A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can delete a custom plugin */
+  canDeleteCustomPlugin: {
+    type: Function as PropType<() => boolean | Promise<boolean>>,
+    required: false,
+    default: async () => true,
+  },
+  /** A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can edit custom plugin */
+  canEditCustomPlugin: {
+    type: Function as PropType<() => boolean | Promise<boolean>>,
+    required: false,
+    default: async () => true,
+  },
+  /**
+   * @param {boolean} navigateOnClick if false, let consuming component handle event when clicking on a plugin
+   * Used in conjunction with `@plugin-clicked` event
+   */
+  navigateOnClick: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+    * @param {boolean} availableOnServer checks kong config plugins.available_on_server and if
+    * availableOnServer = true, then it will not show plugins from PluginMeta that are outside
+    * of the available_on_server array.
+    */
+  availableOnServer: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Plugins that should not be displayed
+   */
+  ignoredPlugins: {
+    type: Array as PropType<String[]>,
+    default: () => [],
+  },
+  /**
+   * Plugins that should be disabled and their disabled messages.
+   * ex. {
+   *  'acl': 'ACL is not supported for this entity type',
+   * }
+   */
+  disabledPlugins: {
+    type: Object as PropType<DisabledPlugin>,
+    default: () => ({}),
+  },
+  /**
+   * Number of plugins to always have visible (never will be collapsed)
+   */
+  pluginsPerRow: {
+    type: Number,
+    default: 4,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'loading', isLoading: boolean): void,
+  (e: 'plugin-clicked', plugin: PluginType): void,
+  (e: 'delete-custom:success', pluginName: string): void,
+}>()
+
+const route = useRoute()
+const { i18n: { t } } = composables.useI18n()
+const { pluginMetaData } = composables.usePluginMetaData()
+const { getMessageFromError } = useErrors()
+const { sortAlpha, objectsAreEqual } = useHelpers()
+
+const filter = ref('')
+const isLoading = ref(true)
+const hasError = ref(false)
+const fetchErrorMessage = ref('')
+const availablePlugins = ref<string[]>([])
+const pluginsList = ref<PluginCardList>({})
+const existingEntityPlugins = ref<string[]>([])
+
+const { axiosInstance } = useAxios({
+  headers: props.config?.requestHeaders,
+})
+
+const filteredPlugins = computed((): PluginCardList => {
+  if (!pluginsList.value) {
+    return {}
+  }
+
+  const query = filter.value.toLowerCase()
+  const results = JSON.parse(JSON.stringify(pluginsList.value))
+
+  for (const type in pluginsList.value) {
+    const matches = pluginsList.value[type as keyof PluginCardList]?.filter((plugin: PluginType) => plugin.name.toLowerCase().includes(query) || plugin.id.toLowerCase().includes(query) || plugin.group.toLowerCase().includes(query)) || []
+
+    if (!matches.length) {
+      delete results[type]
+    } else {
+      results[type] = matches
+    }
+  }
+
+  return results
+})
+
+const hasFilteredResults = computed((): boolean => {
+  return Object.keys(filteredPlugins.value).length > 0
+})
+
+const noSearchResults = computed((): boolean => {
+  return (Object.keys(pluginsList.value).length > 0 && !hasFilteredResults.value)
+})
+
+const tabs = props.config.app === 'konnect'
+  ? [
+    {
+      hash: '#kong',
+      title: t('plugins.select.tabs.kong.title'),
+    },
+    {
+      hash: '#custom',
+      title: t('plugins.select.tabs.custom.title'),
+    },
+  ]
+  : []
+const activeTab = ref(tabs.length ? route.hash || tabs[0].hash : '')
+
+const buildPluginList = (): PluginCardList => {
+  // If availableOnServer is false, we included unavailable plugins from pluginMeta in addition to available plugins
+  // returning an array of unique plugin ids
+  // either grab all plugins from metadata file or use list of available plugins provided by API
+  return [...new Set(
+    Object.assign(
+      Object.keys({ ...(!props.availableOnServer ? pluginMetaData : {}) }),
+      availablePlugins.value,
+    ),
+  )]
+    // Filter out ignored plugins
+    .filter((plugin: string) => !props.ignoredPlugins.includes(plugin))
+    // Filter plugins by entity type if adding scoped plugin
+    .filter((plugin: string) => {
+      // For Global Plugins
+      if (!props.config.entityType) {
+        return plugin
+      }
+
+      if (props.config.entityType === 'services') {
+        const isNotServicePlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.SERVICE))
+        if (isNotServicePlugin) {
+          return false
+        }
+      }
+
+      if (props.config.entityType === 'routes') {
+        const isNotRoutePlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.ROUTE))
+        if (isNotRoutePlugin) {
+          return false
+        }
+      }
+
+      if (props.config.entityType === 'consumer_groups') {
+        const isNotConsumerGroupPlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.CONSUMER_GROUP))
+        if (isNotConsumerGroupPlugin) {
+          return false
+        }
+      }
+
+      if (props.config.entityType === 'consumers') {
+        const isNotConsumerPlugin = (pluginMetaData[plugin] && !pluginMetaData[plugin].scope.includes(PluginScope.CONSUMER))
+        if (isNotConsumerPlugin) {
+          return false
+        }
+      }
+
+      return plugin
+    })
+    // build the actual card list
+    .reduce((list: PluginCardList, pluginId: string) => {
+      const pluginName = (pluginMetaData[pluginId] && pluginMetaData[pluginId].name) || pluginId
+      const plugin = {
+        ...pluginMetaData[pluginId],
+        id: pluginId,
+        name: pluginName,
+        available: availablePlugins.value.includes(pluginId),
+        disabledMessage: '',
+        group: pluginMetaData[pluginId]?.group || PluginGroup.CUSTOM_PLUGINS,
+      } as PluginType
+
+      if (props.disabledPlugins) {
+        plugin.disabledMessage = props.disabledPlugins[pluginId]
+      }
+
+      if (existingEntityPlugins.value.includes(pluginId)) {
+        plugin.exists = true
+
+        if (!plugin.disabledMessage) {
+          plugin.disabledMessage = t('plugins.select.already_exists')
+        }
+      }
+
+      const groupName = plugin.group || t('plugins.select.misc_plugins')
+      let plugins = list[groupName]
+
+      if (!plugins) {
+        plugins = []
+      }
+
+      plugins.push(plugin)
+      plugins.sort(sortAlpha('name'))
+
+      list[groupName] = plugins
+
+      return list
+    }, {})
+}
+
+const availablePluginsUrl = computed((): string => {
+  let url = `${props.config.apiBaseUrl}${endpoints.select[props.config.app].availablePlugins}`
+
+  if (props.config.app === 'konnect') {
+    url = url.replace(/{controlPlaneId}/gi, props.config?.controlPlaneId || '')
+  } else if (props.config.app === 'kongManager') {
+    url = url.replace(/\/{workspace}/gi, props.config?.workspace ? `/${props.config.workspace}` : '')
+  }
+
+  return url
+})
+
+const fetchEntityPluginsUrl = computed((): string => {
+  if (props.config?.entityType && props.config?.entityId) {
+    let url = `${props.config.apiBaseUrl}${endpoints.list[props.config.app].forEntity}`
+
+    if (props.config.app === 'konnect') {
+      url = url.replace(/{controlPlaneId}/gi, props.config?.controlPlaneId || '')
+    } else if (props.config.app === 'kongManager') {
+      url = url.replace(/\/{workspace}/gi, props.config?.workspace ? `/${props.config.workspace}` : '')
+    }
+
+    return url
+      .replace(/{entityType}/gi, props.config.entityType || '')
+      .replace(/{entityId}/gi, props.config.entityId || '')
+  }
+
+  return ''
+})
+
+// race condition between fetch of available plugins and setting
+// disabled/ignored plugins
+// if disabled/ignored plugins changes before availablePlugins fetch
+// wait for fetch to finish and don't attempt to build plugin list yet
+// if disabled/ignored plugins changes AFTER availablePlugins fetch
+// rebuild the list
+watch(() => props.disabledPlugins, (val, oldVal) => {
+  if (!objectsAreEqual(val, oldVal) && !isLoading.value) {
+    pluginsList.value = buildPluginList()
+  }
+})
+
+watch(() => props.ignoredPlugins, (val, oldVal) => {
+  if (!objectsAreEqual(val, oldVal) && !isLoading.value) {
+    pluginsList.value = buildPluginList()
+  }
+})
+
+watch((isLoading), (loading: boolean) => {
+  emit('loading', loading)
+})
+
+const usercanCreateCustomPlugin = ref(false)
+const usercanEditCustomPlugin = ref(false)
+const usercanDeleteCustomPlugin = ref(false)
+
+onBeforeMount(async () => {
+  // Evaluate the user permissions
+  usercanCreateCustomPlugin.value = await props.canCreateCustomPlugin()
+  usercanEditCustomPlugin.value = await props.canEditCustomPlugin()
+  usercanDeleteCustomPlugin.value = await props.canDeleteCustomPlugin()
+})
+
+onMounted(async () => {
+  try {
+    const { data } = await axiosInstance.get(availablePluginsUrl.value)
+
+    // TODO: endpoints temporarily return different formats
+    if (props.config.app === 'konnect') {
+      const { names: available } = data
+      availablePlugins.value = available || []
+    } else if (props.config.app === 'kongManager') {
+      const { plugins: { available_on_server: aPlugins } } = data
+      availablePlugins.value = aPlugins ? Object.keys(aPlugins) : []
+    }
+  } catch (error: any) {
+    hasError.value = true
+    fetchErrorMessage.value = getMessageFromError(error)
+  }
+
+  // fetch scoped entity to check for pre-existing plugins
+  if (fetchEntityPluginsUrl.value) {
+    try {
+      const { data: { data } } = await axiosInstance.get(fetchEntityPluginsUrl.value)
+
+      if (data?.length) {
+        const eplugins = data.reduce((plugins: string[], plugin: Record<string, any>) => {
+          if (plugin.name) {
+            plugins.push(plugin.name)
+          }
+
+          return plugins
+        }, [])
+
+        existingEntityPlugins.value = existingEntityPlugins.value.concat(eplugins)
+      }
+    } catch (error: any) {
+      // no op if it fails, backend will catch if they try to create
+      // duplicate plugins
+    }
+  }
+
+  if (!hasError.value) {
+    pluginsList.value = buildPluginList()
+  }
+
+  isLoading.value = false
+})
+</script>
+
+<style lang="scss" scoped>
+.kong-ui-entities-plugin-select-form {
+  .title-loading-skeleton {
+    margin-left: $kui-space-40;
+  }
+
+  .plugins-filter-input-container {
+    display: flex;
+
+    .plugins-filter-input {
+      margin-bottom: $kui-space-60;
+    }
+  }
+
+  .plugins-results-container {
+    margin-top: $kui-space-60;
+
+    .tab-description {
+      margin-bottom: $kui-space-80;
+      margin-top: $kui-space-80;
+    }
+  }
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/components/custom-plugins/DeleteCustomPluginSchemaModal.vue b/packages/entities/entities-plugins/src/components/custom-plugins/DeleteCustomPluginSchemaModal.vue
new file mode 100644
index 0000000000..05fc055bf8
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/custom-plugins/DeleteCustomPluginSchemaModal.vue
@@ -0,0 +1,147 @@
+<template>
+  <EntityDeleteModal
+    v-if="!isPluginSchemaInUse && plugin"
+    :action-pending="isLoading"
+    class="delete-custom-plugin-schema-modal"
+    data-testid="delete-custom-plugin-schema-modal"
+    :description="t('delete.description_custom')"
+    :entity-name="plugin.name"
+    :entity-type="EntityTypes.Plugin"
+    :error="errorMessage"
+    need-confirm
+    :title="title"
+    visible
+    @cancel="$emit('closed')"
+    @proceed="handleSubmit"
+  />
+
+  <KPrompt
+    v-else-if="plugin"
+    :action-pending="isLoading"
+    class="delete-custom-plugin-schema-modal"
+    data-testid="delete-custom-plugin-schema-modal"
+    is-visible
+    :title="title"
+    type="warning"
+    @canceled="$emit('closed')"
+  >
+    <template #body-content>
+      <div>
+        <i18n-t
+          keypath="delete.plugin_schema_in_use_message"
+          tag="p"
+        >
+          <template #name>
+            <strong>{{ plugin.name }}</strong>
+          </template>
+        </i18n-t>
+      </div>
+    </template>
+    <template #action-buttons>
+      <div>
+        <KButton
+          appearance="outline"
+          class="cancel-button"
+          data-testid="delete-custom-plugin-form-cancel"
+          @click="$emit('closed')"
+        >
+          {{ t('actions.cancel') }}
+        </KButton>
+      </div>
+    </template>
+  </KPrompt>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, type PropType } from 'vue'
+import {
+  type KongManagerPluginFormConfig,
+  type KonnectPluginFormConfig,
+} from '../../types'
+import composables from '../../composables'
+import { useAxios, useErrors, EntityTypes, EntityDeleteModal } from '@kong-ui-public/entities-shared'
+
+const props = defineProps({
+  /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+  config: {
+    type: Object as PropType<KonnectPluginFormConfig | KongManagerPluginFormConfig>,
+    required: true,
+    validator: (config: KonnectPluginFormConfig | KongManagerPluginFormConfig): boolean => {
+      if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
+      return true
+    },
+  },
+  plugin: {
+    type: Object as PropType<{ name: string, id: string }>,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['closed', 'proceed'])
+
+const { i18nT, i18n: { t } } = composables.useI18n()
+const { getMessageFromError } = useErrors()
+
+const { axiosInstance } = useAxios({
+  headers: props.config?.requestHeaders,
+})
+
+const title = computed((): string => {
+  return isPluginSchemaInUse.value
+    ? t('delete.plugin_schema_in_use_title')
+    : t('delete.title', { name: props.plugin?.name || t('delete.custom_plugin') })
+})
+
+const isLoading = ref(false)
+const errorMessage = ref('')
+const isPluginSchemaInUse = ref(false)
+
+const handleSubmit = async (): Promise<void> => {
+  isLoading.value = true
+  errorMessage.value = ''
+
+  if (!props.plugin?.name || props.config?.app !== 'konnect') {
+    return
+  }
+
+  try {
+    const url = `${props.config.apiBaseUrl}/api/runtime_groups/${props.config.controlPlaneId}/v1/plugin-schemas/${props.plugin?.name}`
+    await axiosInstance.delete(url)
+
+    emit('proceed')
+  } catch (err: any) {
+    const { response } = err
+
+    if (
+      response?.status === 400 &&
+      response.data?.message?.includes('plugin schema is currently in use')
+    ) {
+      isPluginSchemaInUse.value = true
+    } else {
+      errorMessage.value = getMessageFromError(err)
+    }
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.delete-custom-plugin-schema-modal {
+  & :deep(.k-modal-dialog) {
+    max-width: 550px;
+  }
+}
+
+.error-wrapper {
+  margin-bottom: $kui-space-60;
+}
+
+.confirm-text {
+  margin-bottom: $kui-space-40;
+}
+
+.cancel-button {
+  margin-right: $kui-space-40;
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/components/custom-plugins/PluginCustomGrid.vue b/packages/entities/entities-plugins/src/components/custom-plugins/PluginCustomGrid.vue
new file mode 100644
index 0000000000..04d7a3efdb
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/custom-plugins/PluginCustomGrid.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="custom-plugins-grid">
+    <KEmptyState
+      v-if="!modifiedCustomPlugins.length"
+      class="custom-plugins-empty-state"
+      cta-is-hidden
+      icon="stateGruceo"
+      icon-size="96"
+    >
+      <!-- this will only be shown if not allowed to create custom plugins -->
+      <template #title>
+        <span class="empty-state-title">
+          {{ t('plugins.select.tabs.custom.empty_title') }}
+        </span>
+      </template>
+
+      <template #message>
+        <span class="empty-state-description">
+          {{ t('plugins.select.tabs.custom.empty_description') }}
+        </span>
+      </template>
+    </KEmptyState>
+
+    <KCollapse
+      v-else
+      v-model="shouldCollapsedCustomPlugins"
+      class="custom-plugins-collapse"
+      :data-testid="`${PluginGroup.CUSTOM_PLUGINS}-collapse`"
+      :title="PluginGroup.CUSTOM_PLUGINS"
+      :trigger-label="triggerLabel"
+    >
+      <!-- don't display a trigger if all plugins will already be visible -->
+      <template
+        v-if="modifiedCustomPlugins.length <= pluginsPerRow"
+        #trigger
+      >
+        &nbsp;
+      </template>
+      <template #visible-content>
+        <div class="plugin-card-container">
+          <PluginSelectCard
+            v-for="(plugin, index) in getPluginCards('visible', modifiedCustomPlugins, pluginsPerRow)"
+            :key="`plugin-card-${index}`"
+            :can-delete-custom-plugin="canDeleteCustomPlugin"
+            :can-edit-custom-plugin="canEditCustomPlugin"
+            :config="config"
+            :navigate-on-click="navigateOnClick"
+            :plugin="plugin"
+            @custom-plugin-delete="handleCustomPluginDelete(plugin)"
+            @plugin-clicked="emitPluginData"
+          />
+        </div>
+      </template>
+
+      <div class="plugin-card-container">
+        <PluginSelectCard
+          v-for="(plugin, index) in getPluginCards('hidden', modifiedCustomPlugins, pluginsPerRow)"
+          :key="`plugin-card-${index}`"
+          :can-delete-custom-plugin="canDeleteCustomPlugin"
+          :can-edit-custom-plugin="canEditCustomPlugin"
+          :config="config"
+          :navigate-on-click="navigateOnClick"
+          :plugin="plugin"
+          @plugin-clicked="emitPluginData"
+        />
+      </div>
+    </KCollapse>
+
+    <DeleteCustomPluginSchemaModal
+      v-if="openDeleteModal && selectedPlugin"
+      :config="config"
+      :plugin="selectedPlugin"
+      @closed="handleClose"
+      @proceed="handleClose(true)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type PropType } from 'vue'
+import {
+  PluginGroup,
+  type KongManagerPluginFormConfig,
+  type KonnectPluginFormConfig,
+  type PluginType,
+  type PluginCardList,
+} from '../../types'
+import composables from '../../composables'
+import PluginSelectCard from '../select/PluginSelectCard.vue'
+import DeleteCustomPluginSchemaModal from './DeleteCustomPluginSchemaModal.vue'
+
+const props = defineProps({
+  /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+  config: {
+    type: Object as PropType<KonnectPluginFormConfig | KongManagerPluginFormConfig>,
+    required: true,
+    validator: (config: KonnectPluginFormConfig | KongManagerPluginFormConfig): boolean => {
+      if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
+      if (!config.getCreateRoute) return false
+      return true
+    },
+  },
+  /**
+   * Whether or not user has rights to create custom plugins
+   */
+  canCreateCustomPlugin: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Whether or not user has rights to delete custom plugins
+   */
+  canDeleteCustomPlugin: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Whether or not user has rights to edit custom plugins
+   */
+  canEditCustomPlugin: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Plugins to display in the grid
+   */
+  pluginList: {
+    type: Object as PropType<PluginCardList>,
+    default: () => ({}),
+  },
+  /**
+   * @param {boolean} navigateOnClick if false, let consuming component handle event when clicking on a plugin
+   * Used in conjunction with `@plugin-clicked` event
+   */
+  navigateOnClick: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Number of plugins to always have visible (never will be collapsed)
+   */
+  pluginsPerRow: {
+    type: Number,
+    default: 4,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'plugin-clicked', plugin: PluginType): void,
+  (e: 'revalidate'): void, /** internal use only */
+  (e: 'delete:success', pluginName: string): void,
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+const { getPluginCards } = composables.usePluginHelpers()
+const shouldCollapsedCustomPlugins = ref(true)
+
+const emitPluginData = (plugin: PluginType) => {
+  emit('plugin-clicked', plugin)
+}
+
+const modifiedCustomPlugins = computed((): PluginType[] => {
+  if (props.config.app === 'kongManager') {
+    return []
+  }
+
+  const customPlugins: PluginType[] = JSON.parse(JSON.stringify(props.pluginList))[PluginGroup.CUSTOM_PLUGINS] || []
+
+  // ADD CUSTOM_PLUGIN_CREATE as the first card if allowed creation
+  return props.canCreateCustomPlugin && props.navigateOnClick && props.config.createCustomRoute
+    ? ([{
+      id: 'custom-plugin-create',
+      name: t('plugins.select.tabs.custom.create.name'),
+      available: true,
+      group: PluginGroup.CUSTOM_PLUGINS,
+      description: t('plugins.select.tabs.custom.create.description'),
+    }] as PluginType[]).concat(customPlugins)
+    : customPlugins
+})
+
+// text for plugin group "view x more" label
+const triggerLabel = computed((): string => {
+  const totalCount = getPluginCards('all', modifiedCustomPlugins.value, props.pluginsPerRow)?.length
+  const hiddenCount = getPluginCards('hidden', modifiedCustomPlugins.value, props.pluginsPerRow)?.length
+
+  if (totalCount > props.pluginsPerRow) {
+    return t('plugins.select.view_more', { count: hiddenCount })
+  }
+
+  return t('plugins.select.view_less')
+})
+
+const openDeleteModal = ref(false)
+const selectedPlugin = ref<{ name: string, id: string } | null>(null)
+
+const handleCustomPluginDelete = (plugin: PluginType): void => {
+  openDeleteModal.value = true
+  selectedPlugin.value = {
+    id: plugin.id,
+    name: plugin.name,
+  }
+}
+
+const handleClose = (revalidate?: boolean): void => {
+  if (revalidate) {
+    emit('revalidate')
+    emit('delete:success', selectedPlugin.value?.name || '')
+  }
+
+  openDeleteModal.value = false
+  selectedPlugin.value = null
+}
+</script>
+
+<style lang="scss" scoped>
+  :deep(.empty-state-wrapper) {
+    .custom-plugins-empty-state {
+      padding-bottom: $kui-space-0;
+
+      .empty-state-title {
+        font-size: $kui-font-size-40;
+        font-weight: $kui-font-weight-semibold;
+      }
+
+      .empty-state-description {
+        font-size: $kui-font-size-30;
+        margin-left: $kui-space-60;
+        margin-right: $kui-space-60;
+      }
+    }
+  }
+
+  .plugins-collapse {
+    margin-bottom: $kui-space-90;
+  }
+
+  .plugin-card-container {
+    column-gap: 50px;
+    display: grid;
+    grid-auto-rows: 1fr;
+    margin-top: $kui-space-90;
+    row-gap: $kui-space-90;
+
+    :deep(.kong-card) {
+      display: flex;
+      flex: 1 0 0;
+      flex-direction: column;
+      margin: $kui-space-0;
+      padding: $kui-space-0;
+      text-align: center;
+    }
+
+    :deep(.k-card-body) {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+    }
+
+    @media (min-width: $kui-breakpoint-phablet) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: $kui-breakpoint-tablet) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (min-width: $kui-breakpoint-laptop) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+</style>
diff --git a/packages/entities/entities-plugins/src/components/select/PluginCardSkeleton.vue b/packages/entities/entities-plugins/src/components/select/PluginCardSkeleton.vue
new file mode 100644
index 0000000000..654636c4d4
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/select/PluginCardSkeleton.vue
@@ -0,0 +1,65 @@
+<template>
+  <KSkeleton
+    :card-count="cardCount"
+    class="plugin-card-skeleton"
+    type="card"
+  >
+    <template #card-header>
+      <div class="plugin-card-header">
+        <KSkeletonBox width="5" />
+      </div>
+    </template>
+    <template #card-content>
+      &nbsp;
+    </template>
+    <template #card-footer>
+      <div class="plugin-card-footer">
+        <hr class="plugin-card-footer-divider">
+        <div class="footer-skeleton">
+          <KSkeletonBox width="5" />
+        </div>
+      </div>
+    </template>
+  </KSkeleton>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  cardCount: {
+    type: Number,
+    default: 1,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.plugin-card-skeleton {
+  :deep(.skeleton-card-column) {
+    width: calc(25% - $kui-space-70);
+  }
+
+  :deep(.skeleton-card-footer) {
+    height: 50px;
+  }
+
+  .plugin-card-header {
+    margin: $kui-space-0 $kui-space-auto;
+  }
+
+  .plugin-card-footer {
+    width: 100%;
+
+    &-divider {
+      background-color: #afb7c538;
+      border-color: #afb7c538;
+      color: #afb7c538;
+      margin: $kui-space-0 $kui-space-70;
+    }
+
+    .footer-skeleton {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/components/select/PluginSelectCard.vue b/packages/entities/entities-plugins/src/components/select/PluginSelectCard.vue
new file mode 100644
index 0000000000..746a2ff6f4
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/select/PluginSelectCard.vue
@@ -0,0 +1,328 @@
+<template>
+  <KTooltip
+    class="plugin-card plugin-card-cursor-pointer"
+    :class="{
+      'disabled': isDisabled,
+    }"
+    :label="plugin.disabledMessage"
+    position-fixed
+  >
+    <KCard
+      class="plugin-card-content"
+      :data-testid="`${plugin.id}-card`"
+      :disabled="isDisabled"
+      has-hover
+      @click="isDisabled || isCustomPlugin ? undefined : handleClick()"
+    >
+      <template
+        v-if="isCustomPlugin"
+        #statusHat
+      >
+        <div class="header-wrapper">
+          <KBadge v-if="!isCreateCustomPlugin">
+            {{ t('plugins.select.custom_badge_text') }}
+          </KBadge>
+        </div>
+      </template>
+
+      <template
+        v-if="hasActions"
+        #actions
+      >
+        <KDropdownMenu
+          data-testid="custom-plugin-actions"
+          :kpop-attributes="{ placement: 'bottomEnd' }"
+          width="150"
+        >
+          <template #default>
+            <KButton
+              class="actions-trigger"
+              data-testid="overflow-actions-button"
+              size="small"
+            >
+              <template #icon>
+                <MoreIcon :size="KUI_ICON_SIZE_30" />
+              </template>
+            </KButton>
+          </template>
+
+          <template #items>
+            <KDropdownItem
+              v-if="canDeleteCustomPlugin"
+              data-testid="edit-plugin-schema"
+              @click.stop="handleCustomEdit(plugin.name)"
+            >
+              {{ t('actions.edit') }}
+            </KDropdownItem>
+            <KDropdownItem
+              v-if="canDeleteCustomPlugin"
+              data-testid="delete-plugin-schema"
+              has-divider
+              is-dangerous
+              @click.stop="handleCustomDelete"
+            >
+              {{ t('actions.delete') }}
+            </KDropdownItem>
+          </template>
+        </KDropdownMenu>
+      </template>
+
+      <template #body>
+        <div
+          class="plugin-card-body"
+          :class="{ 'custom-plugin': isCustomPlugin }"
+          :title="!plugin.available ? t('plugins.select.unavailable_tooltip') : plugin.name"
+          @click="handleCustomClick"
+        >
+          <h4 class="plugin-card-title">
+            {{ plugin.name }}
+          </h4>
+          <PluginIcon
+            :alt="plugin.name"
+            class="plugin-card-icon"
+            :name="plugin.imageName || plugin.id"
+            :size="55"
+          />
+          <p
+            v-if="plugin.description"
+            class="plugin-card-text"
+          >
+            {{ plugin.description }}
+          </p>
+        </div>
+        <div
+          :class="{
+            'plugin-card-create-footer': isCreateCustomPlugin,
+            'plugin-card-footer': !isCreateCustomPlugin,
+          }"
+          @click="handleCustomClick"
+        >
+          {{ isCreateCustomPlugin ? t('actions.create_custom') : plugin.exists ? t('actions.enabled') : t('actions.enable') }}
+        </div>
+      </template>
+    </KCard>
+  </KTooltip>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  PluginGroup,
+  type KongManagerPluginFormConfig,
+  type KonnectPluginFormConfig,
+  type PluginType,
+} from '../../types'
+import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import { MoreIcon } from '@kong/icons'
+import composables from '../../composables'
+import PluginIcon from '../PluginIcon.vue'
+
+const emit = defineEmits<{
+  (e: 'plugin-clicked', plugin: PluginType) : void,
+  (e: 'custom-plugin-delete'): void, /** internal use only */
+}>()
+
+const props = defineProps({
+  /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+  config: {
+    type: Object as PropType<KonnectPluginFormConfig | KongManagerPluginFormConfig>,
+    required: true,
+    validator: (config: KonnectPluginFormConfig | KongManagerPluginFormConfig): boolean => {
+      if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
+      if (!config.getCreateRoute) return false
+      return true
+    },
+  },
+  /**
+   * Whether or not user has rights to delete custom plugins
+   */
+  canDeleteCustomPlugin: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Whether or not user has rights to edit custom plugins
+   */
+  canEditCustomPlugin: {
+    type: Boolean,
+    default: false,
+  },
+  plugin: {
+    type: Object as PropType<PluginType>,
+    required: true,
+  },
+  navigateOnClick: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const router = useRouter()
+const { i18n: { t } } = composables.useI18n()
+const controlPlaneId = computed((): string => props.config.app === 'konnect' ? props.config.controlPlaneId : '')
+const isDisabled = computed((): boolean => !!(!props.plugin.available || props.plugin.disabledMessage))
+const hasActions = computed((): boolean => !!(isCustomPlugin.value && !isCreateCustomPlugin.value && props.navigateOnClick && controlPlaneId.value && (props.canDeleteCustomPlugin || props.canEditCustomPlugin)))
+
+const handleCreateClick = (): void => {
+  router.push(props.config.getCreateRoute(props.plugin.id))
+}
+
+const handleClick = (): void => {
+  if (!props.navigateOnClick) {
+    emitPluginData()
+  } else {
+    handleCreateClick()
+  }
+}
+
+const emitPluginData = (): void => {
+  emit('plugin-clicked', props.plugin)
+}
+
+/**
+ * Custom Plugin logic
+ */
+const isCreateCustomPlugin = computed((): boolean => props.plugin.id === 'custom-plugin-create')
+const isCustomPlugin = computed((): boolean => props.config.app === 'konnect' && props.plugin.group === PluginGroup.CUSTOM_PLUGINS)
+
+const handleCustomDelete = (): void => {
+  if (props.config.app === 'konnect') {
+    emit('custom-plugin-delete')
+  }
+}
+
+const handleCustomEdit = (pluginName: string): void => {
+  if (props.config.app === 'konnect' && props.config.getCustomEditRoute) {
+    router.push(props.config.getCustomEditRoute(pluginName))
+  }
+}
+
+const handleCustomClick = (): void => {
+  // handle custom plugin card click only
+  if (!isDisabled.value && props.config.app === 'konnect') {
+    if (isCreateCustomPlugin.value && props.config.createCustomRoute) {
+      router.push(props.config.createCustomRoute)
+    } else if (isCustomPlugin.value) {
+      handleCreateClick()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.plugin-card,
+.plugin-card-content {
+  color: initial;
+  display: flex;
+  flex-basis: 100%;
+  flex-flow: row-wrap;
+  max-width: 335px;
+
+  .actions-trigger {
+    color: $kui-color-text-neutral-stronger;
+  }
+
+  .header-wrapper {
+    // maintain the specified height if slot has no content
+    min-height: 25px;
+  }
+
+  &-title {
+    font-size: $kui-font-size-40;
+    font-weight: $kui-font-weight-medium;
+    margin-bottom: $kui-space-60;
+    margin-top: $kui-space-60;
+  }
+
+  &-icon {
+    margin-bottom: $kui-space-60;
+  }
+
+  &-text {
+    color: $kui-color-text;
+    font-size: $kui-font-size-30;
+    font-weight: $kui-font-weight-regular;
+  }
+
+  :deep(.k-card-body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  &-body {
+    background-color: $kui-color-background;
+    flex: 1;
+    padding: $kui-space-60;
+
+    &.custom-plugin {
+      cursor: pointer;
+      padding-top: $kui-space-0;
+
+      .plugin-card-title {
+        margin-top: $kui-space-0;
+      }
+    }
+  }
+
+  &-footer {
+    background-color: $kui-color-background-primary-weakest;
+    color: $kui-color-text-primary;
+    font-size: $kui-font-size-30;
+    font-weight: $kui-font-weight-semibold;
+    padding: $kui-space-60;
+  }
+
+  &-create-footer {
+    background-color: $kui-color-background-primary;
+    color: $kui-color-text-inverse;
+    font-size: $kui-font-size-30;
+    font-weight: $kui-font-weight-semibold;
+    padding: $kui-space-60;
+  }
+
+  &.disabled * {
+    cursor: not-allowed;
+    filter: grayscale(100%);
+    opacity: 0.9;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  :deep(.k-card-header) {
+    padding-left: $kui-space-60;
+    padding-right: $kui-space-40;
+    padding-top: $kui-space-60;
+  }
+
+  :deep(.k-plugin-card-body) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.k-card-content) {
+    display: flex;
+    flex: 1 !important;
+    height: 100%;
+  }
+
+  :deep(.k-card-actions .k-button.outline) {
+    border: none;
+  }
+
+  @media (min-width: $kui-breakpoint-phablet) {
+    flex-basis: calc(50% - #{$kui-space-80});
+  }
+
+  @media (min-width: $kui-breakpoint-tablet) {
+    flex-basis: calc(33.33333% - #{$kui-space-80});
+  }
+
+  @media (min-width: $kui-breakpoint-laptop) {
+    flex-basis: calc(25% - #{$kui-space-80});
+  }
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/components/select/PluginSelectGrid.vue b/packages/entities/entities-plugins/src/components/select/PluginSelectGrid.vue
new file mode 100644
index 0000000000..7255193aa1
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/select/PluginSelectGrid.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="plugin-select-grid">
+    <KEmptyState
+      v-if="!Object.keys(nonCustomPlugins).length"
+      class="plugins-empty-state"
+      cta-is-hidden
+      data-testid="plugins-empty-state"
+      icon="stateGruceo"
+      icon-size="96"
+    >
+      <!-- this will only be shown if there are no existing Kong plugins -->
+      <template #title>
+        <span class="empty-state-title">
+          {{ t('plugins.select.tabs.kong.empty_title') }}
+        </span>
+      </template>
+
+      <template #message>
+        <span class="empty-state-description">
+          {{ t('plugins.select.tabs.kong.empty_description') }}
+        </span>
+      </template>
+    </KEmptyState>
+
+    <template v-for="(group, idx) in PluginGroupArray">
+      <div
+        v-if="nonCustomPlugins[group]"
+        :key="idx"
+      >
+        <KCollapse
+          v-model="shouldCollapsed[idx]"
+          class="plugins-collapse"
+          :title="group"
+          :trigger-label="!shouldCollapsed[idx] ? triggerLabels[group] : t('plugins.select.view_less')"
+        >
+          <!-- don't display a trigger if all plugins will already be visible -->
+          <template
+            v-if="getGroupPluginCount(group) <= pluginsPerRow"
+            #trigger
+          >
+            &nbsp;
+          </template>
+          <template #visible-content>
+            <div class="plugin-card-container">
+              <PluginSelectCard
+                v-for="(plugin, index) in getPluginCards('visible', nonCustomPlugins[group as keyof PluginCardList] || [], pluginsPerRow)"
+                :key="`plugin-card-${index}`"
+                :config="config"
+                :navigate-on-click="navigateOnClick"
+                :plugin="plugin"
+                @plugin-clicked="emitPluginData"
+              />
+            </div>
+          </template>
+
+          <div class="plugin-card-container">
+            <PluginSelectCard
+              v-for="(plugin, index) in getPluginCards('hidden', nonCustomPlugins[group as keyof PluginCardList] || [], pluginsPerRow)"
+              :key="`plugin-card-${index}`"
+              :config="config"
+              :navigate-on-click="navigateOnClick"
+              :plugin="plugin"
+              @plugin-clicked="emitPluginData"
+            />
+          </div>
+        </KCollapse>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type PropType } from 'vue'
+import {
+  PluginGroup,
+  PluginGroupArray,
+  PLUGIN_GROUPS_COLLAPSE_STATUS,
+  type KongManagerPluginFormConfig,
+  type KonnectPluginFormConfig,
+  type PluginType,
+  type PluginCardList,
+  type TriggerLabels,
+} from '../../types'
+import composables from '../../composables'
+import PluginSelectCard from './PluginSelectCard.vue'
+
+const props = defineProps({
+  /** The base konnect or kongManger config. Pass additional config props in the shared entity component as needed. */
+  config: {
+    type: Object as PropType<KonnectPluginFormConfig | KongManagerPluginFormConfig>,
+    required: true,
+    validator: (config: KonnectPluginFormConfig | KongManagerPluginFormConfig): boolean => {
+      if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
+      if (!config.getCreateRoute) return false
+      return true
+    },
+  },
+  /**
+   * Plugins to display in the grid
+   */
+  pluginList: {
+    type: Object as PropType<PluginCardList>,
+    default: () => ({}),
+  },
+  /**
+   * @param {boolean} navigateOnClick if false, let consuming component handle event when clicking on a plugin
+   * Used in conjunction with `@plugin-clicked` event
+   */
+  navigateOnClick: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Number of plugins to always have visible (never will be collapsed)
+   */
+  pluginsPerRow: {
+    type: Number,
+    default: 4,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'plugin-clicked', plugin: PluginType): void
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+const { getPluginCards } = composables.usePluginHelpers()
+const shouldCollapsed = ref<Record<string, boolean>>(PLUGIN_GROUPS_COLLAPSE_STATUS)
+
+const emitPluginData = (plugin: PluginType) => {
+  emit('plugin-clicked', plugin)
+}
+
+// remove custom plugin from original pluginList
+const nonCustomPlugins = computed((): PluginCardList => {
+  const kongPlugins = JSON.parse(JSON.stringify(props.pluginList))
+
+  delete kongPlugins[PluginGroup.CUSTOM_PLUGINS]
+
+  return kongPlugins
+})
+
+const getGroupPluginCount = (group: string) => {
+  return nonCustomPlugins.value[group as keyof PluginCardList]?.length || 0
+}
+
+// text for plugin group "view x more" label
+const triggerLabels = computed(() => {
+  return Object.keys(nonCustomPlugins.value).reduce((acc: TriggerLabels, pluginGroup: string): TriggerLabels => {
+    const totalCount = getPluginCards('all', nonCustomPlugins.value[pluginGroup as keyof PluginCardList] || [], props.pluginsPerRow)?.length || 0
+    const hiddenCount = getPluginCards('hidden', nonCustomPlugins.value[pluginGroup as keyof PluginCardList] || [], props.pluginsPerRow)?.length || 0
+
+    if (totalCount > props.pluginsPerRow) {
+      acc[pluginGroup as keyof TriggerLabels] = t('plugins.select.view_more', { count: hiddenCount })
+    }
+
+    return acc
+  }, {})
+})
+</script>
+
+<style lang="scss" scoped>
+.plugins-collapse {
+  margin-bottom: $kui-space-90;
+}
+
+.plugin-card-container {
+  column-gap: 50px;
+  display: grid;
+  grid-auto-rows: 1fr;
+  margin-top: $kui-space-90;
+  row-gap: $kui-space-90;
+
+  .plugin-card-cursor-pointer {
+    cursor: pointer;
+  }
+
+  :deep(.kong-card) {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    margin: $kui-space-0;
+    padding: $kui-space-0;
+    text-align: center;
+  }
+
+  :deep(.k-card-body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  @media (min-width: $kui-breakpoint-phablet) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (min-width: $kui-breakpoint-tablet) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (min-width: $kui-breakpoint-laptop) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/composables/usePluginHelpers.ts b/packages/entities/entities-plugins/src/composables/usePluginHelpers.ts
index 205849c907..066834c4a3 100644
--- a/packages/entities/entities-plugins/src/composables/usePluginHelpers.ts
+++ b/packages/entities/entities-plugins/src/composables/usePluginHelpers.ts
@@ -1,5 +1,6 @@
 import type { ConfigurationSchema } from '@kong-ui-public/entities-shared'
 import { ConfigurationSchemaType } from '@kong-ui-public/entities-shared'
+import type { PluginType } from '../types'
 
 export default function useHelpers() {
   const METHOD_KEYS = ['methods', 'logout_methods']
@@ -88,7 +89,18 @@ export default function useHelpers() {
     }
   }
 
+  const getPluginCards = (type: 'all' | 'visible' | 'hidden', plugins: PluginType[], pluginsPerRow: number) => {
+    if (type === 'all') {
+      return plugins
+    } else if (type === 'visible') {
+      return plugins.slice(0, pluginsPerRow)
+    }
+
+    return plugins.slice(pluginsPerRow)
+  }
+
   return {
     setFieldType,
+    getPluginCards,
   }
 }
diff --git a/packages/entities/entities-plugins/src/index.ts b/packages/entities/entities-plugins/src/index.ts
index 55d3d14213..38a360b351 100644
--- a/packages/entities/entities-plugins/src/index.ts
+++ b/packages/entities/entities-plugins/src/index.ts
@@ -1,5 +1,7 @@
 import PluginIcon from './components/PluginIcon.vue'
 import PluginList from './components/PluginList.vue'
+import PluginSelect from './components/PluginSelect.vue'
+import PluginSelectGrid from './components/select/PluginSelectGrid.vue'
 import PluginConfigCard from './components/PluginConfigCard.vue'
 import composables from './composables'
 
@@ -8,6 +10,8 @@ const { getPluginIconURL, usePluginMetaData } = composables
 export {
   PluginIcon,
   PluginList,
+  PluginSelect,
+  PluginSelectGrid,
   PluginConfigCard,
   getPluginIconURL,
   usePluginMetaData,
diff --git a/packages/entities/entities-plugins/src/locales/en.json b/packages/entities/entities-plugins/src/locales/en.json
index 1d64dedb23..e768f0685f 100644
--- a/packages/entities/entities-plugins/src/locales/en.json
+++ b/packages/entities/entities-plugins/src/locales/en.json
@@ -1,16 +1,31 @@
 {
   "actions": {
+    "cancel": "Cancel",
     "create": "New Plugin",
+    "create_custom": "Create",
     "copy_id": "Copy ID",
     "copy_json": "Copy JSON",
     "edit": "Edit",
+    "enable": "Enable",
+    "enabled": "Enabled",
     "delete": "Delete",
+    "confirm_delete": "Yes, delete",
     "view": "View Details",
-    "configure_dynamic_ordering": "Configure Dynamic Ordering"
+    "configure_dynamic_ordering": "Configure Dynamic Ordering",
+    "go_to_plugins": "Go to Plugins"
   },
   "delete": {
     "title": "Delete a Plugin",
-    "description": "Are you sure you want to delete this plugin? This action cannot be reversed."
+    "custom_title": "Delete {name}",
+    "custom_plugin": "Custom Plugin",
+    "description": "Are you sure you want to delete this plugin? This action cannot be reversed.",
+    "description_custom": "Please ensure this plugin is not in use. This action cannot be reversed.",
+    "plugin_schema_in_use_title": "Unable to Delete Custom Plugin",
+    "plugin_schema_in_use_message": "The custom plugin schema {name} is being used in this control plane, please delete any existing instances before you delete this schema.",
+    "confirmModalText1": "Are you sure you want to delete",
+    "confirmModalText2": "Please ensure this plugin is not in use. This delete action cannot be reversed.",
+    "confirm_text": "Type {name} to confirm your action",
+    "success_message": "Successfully deleted custom plugin {name}"
   },
   "copy": {
     "success": "Copied {val} to clipboard",
@@ -21,17 +36,20 @@
   "errors": {
     "general": "Plugins could not be retrieved",
     "delete": "The plugin could not be deleted at this time.",
-    "copy": "Failed to copy to clipboard"
+    "copy": "Failed to copy to clipboard",
+    "load_results": "Error loading available plugins"
   },
   "search": {
     "placeholder": {
-      "konnect": "Filter by exact instance name or ID"
+      "konnect": "Filter by exact instance name or ID",
+      "select": "Filter plugins"
     },
     "filter": {
       "field": {
         "enabled": "Enabled"
       }
-    }
+    },
+    "no_results": "No results found for \"{filter}\""
   },
   "plugins": {
     "title": "Plugins",
@@ -391,6 +409,32 @@
       "route": "Route ID",
       "consumer": "Consumer ID",
       "consumer_group": "Consumer Group ID"
+    },
+    "select": {
+      "custom_badge_text": "Data Plane Node Specific",
+      "unavailable_tooltip": "This plugin is not available",
+      "already_exists": "This plugin is already applied to this resource",
+      "misc_plugins": "Other Plugins",
+      "view_more": "View {count} more",
+      "view_less": "View less",
+      "tabs": {
+        "kong": {
+          "title": "Kong Plugins",
+          "description": "Kong plugins are bundled by default with Kong Gateway and are available across all control planes.",
+          "empty_title": "No Plugins",
+          "empty_description": "No plugins are available."
+        },
+        "custom": {
+          "title": "Custom Plugins",
+          "description": "Custom plugins will be available in this control plane only.",
+          "empty_title": "No Custom Plugins",
+          "empty_description": "No custom plugins have been added to this Control Plane.",
+          "create": {
+            "name": "Custom Plugin",
+            "description": "Upload schema file to create custom plugin"
+          }
+        }
+      }
     }
   },
   "glossary": {
diff --git a/packages/entities/entities-plugins/src/plugins-endpoints.ts b/packages/entities/entities-plugins/src/plugins-endpoints.ts
index 432723bf26..c6fcfb1d44 100644
--- a/packages/entities/entities-plugins/src/plugins-endpoints.ts
+++ b/packages/entities/entities-plugins/src/plugins-endpoints.ts
@@ -9,14 +9,26 @@ export default {
       forEntity: '/{workspace}/{entityType}/{entityId}/plugins',
     },
   },
+  select: {
+    konnect: {
+      availablePlugins: '/api/runtime_groups/{controlPlaneId}/v1/available-plugins',
+    },
+    kongManager: {
+      availablePlugins: '/{workspace}/kong',
+    },
+  },
   form: {
     konnect: {
+      create: '/api/runtime_groups/{controlPlaneId}/plugins',
       edit: '/api/runtime_groups/{controlPlaneId}/plugins/{id}',
       pluginSchema: '/api/runtime_groups/{controlPlaneId}/schemas/plugins/{plugin}',
+      validate: '/api/runtime_groups/{controlPlaneId}/v1/schemas/json/plugin/validate',
     },
     kongManager: {
+      create: '/{workspace}/plugins',
       edit: '/{workspace}/plugins/{id}',
       pluginSchema: '/{workspace}/schemas/plugins/{plugin}',
+      validate: '/{workspace}/schemas/plugins/validate',
     },
   },
   item: {
diff --git a/packages/entities/entities-plugins/src/types/index.ts b/packages/entities/entities-plugins/src/types/index.ts
index 323770ab02..50c9c2cd36 100644
--- a/packages/entities/entities-plugins/src/types/index.ts
+++ b/packages/entities/entities-plugins/src/types/index.ts
@@ -1,3 +1,4 @@
 export * from './plugin-config-card'
+export * from './plugin-form'
 export * from './plugin-list'
 export * from './plugin'
diff --git a/packages/entities/entities-plugins/src/types/plugin-form.ts b/packages/entities/entities-plugins/src/types/plugin-form.ts
new file mode 100644
index 0000000000..2fb7eaf226
--- /dev/null
+++ b/packages/entities/entities-plugins/src/types/plugin-form.ts
@@ -0,0 +1,37 @@
+import type { RouteLocationRaw } from 'vue-router'
+import type { KonnectBaseFormConfig, KongManagerBaseFormConfig } from '@kong-ui-public/entities-shared'
+import type { EntityType } from './plugin'
+
+export interface BasePluginFormConfig {
+  /** A function that returns the route for creating a plugin */
+  getCreateRoute: (id: string) => RouteLocationRaw
+  /** Current entity type and id for plugins for specific entity */
+  entityType?: EntityType
+  entityId?: string
+}
+
+/** Konnect Plugin form config */
+export interface KonnectPluginFormConfig extends BasePluginFormConfig, KonnectBaseFormConfig {
+  /** Route for creating a custom plugin */
+  createCustomRoute?: RouteLocationRaw
+  /** A function that returns the route for editing a custom plugin */
+  getCustomEditRoute?: (id: string) => RouteLocationRaw
+}
+
+/** Kong Manager Plugin form config */
+export interface KongManagerPluginFormConfig extends BasePluginFormConfig, KongManagerBaseFormConfig {}
+
+export interface PluginFormFields {
+  name: string
+  tags: string
+  entity_id: string
+}
+
+export interface PluginFormState {
+  /** Form fields */
+  fields: PluginFormFields
+  /** Form readonly state (only used when saving entity details) */
+  isReadonly: boolean
+  /** The error message to show on the form */
+  errorMessage: string
+}
diff --git a/packages/entities/entities-plugins/src/types/plugin-list.ts b/packages/entities/entities-plugins/src/types/plugin-list.ts
index 446b01dac9..03c7352129 100644
--- a/packages/entities/entities-plugins/src/types/plugin-list.ts
+++ b/packages/entities/entities-plugins/src/types/plugin-list.ts
@@ -1,13 +1,13 @@
 import type { RouteLocationRaw } from 'vue-router'
 import type { FilterSchema, KongManagerBaseTableConfig, KonnectBaseTableConfig } from '@kong-ui-public/entities-shared'
 
+import type { EntityType } from './plugin'
 import type { EntityRow as ServiceEntity } from '@kong-ui-public/entities-gateway-services'
 import type { EntityRow as ConsumerEntity } from '@kong-ui-public/entities-consumers'
 import type { EntityRow as RouteEntity } from '@kong-ui-public/entities-routes'
 import type { EntityRow as ConsumerGroupEntity } from '@kong-ui-public/entities-consumer-groups'
 
 export type ViewRouteType = 'consumer' | 'route' | 'service' | 'consumer_group'
-export type EntityType = 'consumers' | 'routes' | 'services' | 'consumer_groups'
 
 export interface EntityRow extends Record<string, any> {
   config: any
diff --git a/packages/entities/entities-plugins/src/types/plugin.ts b/packages/entities/entities-plugins/src/types/plugin.ts
index c8777722a9..36fa9ac1a1 100644
--- a/packages/entities/entities-plugins/src/types/plugin.ts
+++ b/packages/entities/entities-plugins/src/types/plugin.ts
@@ -8,9 +8,36 @@ export enum PluginGroup {
   LOGGING = 'Logging',
   DEPLOYMENT = 'Deployment',
   WEBSOCKET = 'WebSocket Plugins',
-  CUSTOM_PLUGINS = 'Other Plugins',
+  CUSTOM_PLUGINS = 'Custom Plugins',
 }
 
+export const PluginGroupArray = [
+  PluginGroup.AUTHENTICATION,
+  PluginGroup.SECURITY,
+  PluginGroup.TRAFFIC_CONTROL,
+  PluginGroup.SERVERLESS,
+  PluginGroup.ANALYTICS_AND_MONITORING,
+  PluginGroup.TRANSFORMATIONS,
+  PluginGroup.LOGGING,
+  PluginGroup.DEPLOYMENT,
+  PluginGroup.WEBSOCKET,
+  PluginGroup.CUSTOM_PLUGINS,
+]
+
+export const PLUGIN_GROUPS_COLLAPSE_STATUS = {
+  AUTHENTICATION: true,
+  SECURITY: true,
+  TRAFFIC_CONTROL: true,
+  SERVERLESS: true,
+  ANALYTICS_AND_MONITORING: true,
+  TRANSFORMATIONS: true,
+  LOGGING: true,
+  DEPLOYMENT: true,
+  CUSTOM_PLUGINS: true,
+}
+
+export type EntityType = 'consumers' | 'routes' | 'services' | 'consumer_groups'
+
 export enum PluginScope {
   GLOBAL = 'global',
   SERVICE = 'service',
@@ -28,3 +55,22 @@ export type PluginMetaData = {
   name: string // A display name of the Plugin.
   scope: PluginScope[] // The scope supported by the Plugin.
 }
+
+export interface PluginType extends PluginMetaData {
+  id: string // the plugin schema name
+  available?: boolean // whether the plugin is available or not
+  exists?: boolean // whether the plugin exists already for the current entity
+  disabledMessage?: string // An optional field for plugin's disabled message.
+}
+
+export type DisabledPlugin = {
+  [key: string]: string // [plugin.id]: plugin.disabledMessage
+}
+
+export type PluginCardList = {
+  [key in PluginGroup]?: PluginType[]
+}
+
+export type TriggerLabels = {
+  [key in PluginGroup]?: string // [plugin.group]: label
+}
diff --git a/packages/entities/entities-shared/src/composables/useHelpers.ts b/packages/entities/entities-shared/src/composables/useHelpers.ts
index ebfd40a499..56585671a9 100644
--- a/packages/entities/entities-shared/src/composables/useHelpers.ts
+++ b/packages/entities/entities-shared/src/composables/useHelpers.ts
@@ -10,7 +10,47 @@ export default function useHelpers() {
     return slotProps?.[propName] ?? undefined
   }
 
+  /**
+   * Check if 2 objects are equal
+   * @param {Object} a first object to compare
+   * @param {Object} b second object to compare
+   * @returns {Boolean} whether or not the objects are equal
+   */
+  const objectsAreEqual = (a: Record<string, any>, b: Record<string, any>): boolean => {
+    try {
+      return JSON.stringify(a) === JSON.stringify(b)
+    } catch (e) {
+      return false
+    }
+  }
+
+  /**
+   * A comparator function that given a key, compares object values with that key, and returns the results of
+   * localCompare on those values (see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare for reference)
+   * Also checks for undefined, nulls and sub-Arrays.
+   * @param {String} property the key to sort on
+   * @returns {Function} a comparator function
+   */
+  const sortAlpha = (property: string) => {
+    return (a: Record<string, any>, b: Record<string, any>) => {
+      let propertyA = a[property] === undefined || a[property] === null ? '' : a[property]
+      let propertyB = b[property] === undefined || b[property] === null ? '' : b[property]
+
+      if (Array.isArray(a[property])) {
+        propertyA = a[property][0]
+      }
+
+      if (Array.isArray(b[property])) {
+        propertyB = b[property][0]
+      }
+
+      return propertyA.localeCompare(propertyB)
+    }
+  }
+
   return {
     getPropValue,
+    objectsAreEqual,
+    sortAlpha,
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d219181ea2..27c047030a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: false
-  excludeLinksFromLockfile: false
-
 importers:
 
   .:
@@ -666,6 +662,9 @@ importers:
       '@kong-ui-public/entities-shared':
         specifier: workspace:^
         version: link:../entities-shared
+      '@kong/icons':
+        specifier: ^1.7.8
+        version: 1.7.8(vue@3.3.4)
     devDependencies:
       '@kong-ui-public/i18n':
         specifier: workspace:^
@@ -2046,10 +2045,11 @@ packages:
     resolution: {integrity: sha512-+VT9MeR3EcKXhst0KLoMme8dRYQef5skGaob1bR6xbyRXbwHG34ymLmYUeZ+ObIqISz7yTPGgarMJfDyzuX/YQ==}
     engines: {node: '>=v16.20.2'}
     peerDependencies:
+      axios: ^0.27.2
       vue: '>= 3.3.4 < 4'
       vue-router: ^4.2.4
     dependencies:
-      axios: 0.27.2
+      axios: 1.5.1
       date-fns: 2.30.0
       date-fns-tz: 2.0.0(date-fns@2.30.0)
       focus-trap: 7.5.3
@@ -2062,8 +2062,6 @@ packages:
       vue: 3.3.4
       vue-draggable-next: 2.2.1(sortablejs@1.15.0)(vue@3.3.4)
       vue-router: 4.2.5(vue@3.3.4)
-    transitivePeerDependencies:
-      - debug
 
   /@kong/swagger-ui-kong-theme-universal@4.2.8(react-dom@17.0.2)(react@17.0.2)(vue-router@4.2.5)(vue@3.3.4):
     resolution: {integrity: sha512-HS2Fjjd/tLWCmcEeRefzsDotsdNcF2d10L5ugzOYOuIMTRbCXq6wB7lTKJZQDCa7uy5syIeDuku1QSNpnmHOyw==}
@@ -2087,7 +2085,7 @@ packages:
       util: 0.12.5
     transitivePeerDependencies:
       - '@babel/core'
-      - debug
+      - axios
       - mkdirp
       - prop-types
       - react-dom
@@ -4528,14 +4526,6 @@ packages:
     resolution: {integrity: sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==}
     dev: true
 
-  /axios@0.27.2:
-    resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
-    dependencies:
-      follow-redirects: 1.15.2
-      form-data: 4.0.0
-    transitivePeerDependencies:
-      - debug
-
   /axios@1.5.1:
     resolution: {integrity: sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==}
     dependencies:
@@ -14399,3 +14389,7 @@ packages:
   /zenscroll@4.0.2:
     resolution: {integrity: sha512-jEA1znR7b4C/NnaycInCU6h/d15ZzCd1jmsruqOKnZP6WXQSMH3W2GL+OXbkruslU4h+Tzuos0HdswzRUk/Vgg==}
     dev: false
+
+settings:
+  autoInstallPeers: false
+  excludeLinksFromLockfile: false