diff --git a/packages/entities/entities-routes/LICENSE b/packages/entities/entities-routes/LICENSE
new file mode 100644
index 0000000000..47c89644eb
--- /dev/null
+++ b/packages/entities/entities-routes/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2023 Kong, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/packages/entities/entities-routes/README.md b/packages/entities/entities-routes/README.md
new file mode 100644
index 0000000000..f7aa7696e3
--- /dev/null
+++ b/packages/entities/entities-routes/README.md
@@ -0,0 +1,50 @@
+# @kong-ui-public/entities-routes
+
+Route entity components.
+
+- [Requirements](#requirements)
+- [Included components](#included-components)
+- [Usage](#usage)
+  - [Install](#install)
+  - [Registration](#registration)
+- [Individual component documentation](#individual-component-documentation)
+
+## 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
+
+## Included components
+
+- `RouteList`
+- `RouteForm`
+- `RouteConfigCard`
+
+Reference the [individual component docs](#individual-component-documentation) for more info.
+
+## Usage
+
+### Install
+
+Install the component in your host application
+
+```sh
+yarn add @kong-ui-public/entities-routes
+```
+
+### Registration
+
+Import the component(s) in your host application as well as the package styles
+
+```ts
+import { RouteList, RouteForm, RouteConfigCard } from '@kong-ui-public/entities-routes'
+import '@kong-ui-public/entities-routes/dist/style.css'
+```
+
+## Individual component documentation
+
+- [`<RouteList.vue />`](docs/route-list.md)
+- [`<RouteForm.vue />`](docs/route-form.md)
+- [`<RouteConfigCard.vue />`](docs/route-config-card.md)
diff --git a/packages/entities/entities-routes/docs/compatibility.md b/packages/entities/entities-routes/docs/compatibility.md
new file mode 100644
index 0000000000..c3ed523fd0
--- /dev/null
+++ b/packages/entities/entities-routes/docs/compatibility.md
@@ -0,0 +1,6 @@
+# Compatibility in the Route entity
+
+## Protocol
+
+`'ws'` and `'wss'` are not valid values for the `protocol` field in Gateway Community Edition or before Gateway Enterprise Edition 3.0:
+- In the `RouteForm` component, `'ws'` and `'wss'` are hidden from the `protocol` select dropdown.
\ No newline at end of file
diff --git a/packages/entities/entities-routes/docs/route-config-card.md b/packages/entities/entities-routes/docs/route-config-card.md
new file mode 100644
index 0000000000..a58145d167
--- /dev/null
+++ b/packages/entities/entities-routes/docs/route-config-card.md
@@ -0,0 +1,123 @@
+# RouteConfigCard.vue
+
+A config card component for routes.
+
+- [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-routes` package.](../README.md#install)
+
+### Props
+
+#### `config`
+
+- type: `Object as PropType<KonnectRouteEntityConfig | KongManagerRouteEntityConfig>`
+- 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.
+
+  - `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: `true`
+    - default: `''`
+    - The ID of the Route to display the config for
+
+The base konnect or kongManger config.
+
+#### `hideTitle`
+
+- type: `Boolean`
+- required: `false`
+- default: `false`
+
+Set this value to `true` to hide the card title.
+
+#### `serviceId`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+The id of the service with which the route is associated.
+
+### Events
+
+#### fetch:error
+
+An `@fetch:error` event is emitted when the component fails to fetch the route. The event payload is the response error.
+
+#### fetch:success
+
+A `@fetch:success` event is emitted when the route is successfully fetched. The event payload is the Route object.
+
+#### loading
+
+A `@loading` event is emitted when loading state changes. The event payload is a boolean.
+
+#### copy:success
+
+A `@copy:success` event is emitted when a user clicks the `Copy JSON` button and the JSON object is copied successfully.
+
+#### navigation-click
+
+A `@navigation-click` event is emitted when a user clicks the `service name` button and the event payload is the entity type (`services`) and the service id.
+
+### Usage example
+
+Please refer to the [sandbox](../sandbox/pages/RouteConfigCardPage.vue). The page is accessible by clicking on the row or `View details` button of an existing Route.
+
+## TypeScript interfaces
+
+TypeScript interfaces [are available here](https://github.com/Kong/public-ui-components/blob/main/packages/entities/entities-routes/src/types/route-config-card.ts) and can be directly imported into your host application. The following type interfaces are available for import:
+
+```ts
+import type {
+  RouteConfigurationSchema,
+  KonnectRouteEntityConfig,
+  KongManagerRouteEntityConfig,
+} from '@kong-ui-public/entities-routes'
diff --git a/packages/entities/entities-routes/docs/route-form.md b/packages/entities/entities-routes/docs/route-form.md
new file mode 100644
index 0000000000..4188dbdff8
--- /dev/null
+++ b/packages/entities/entities-routes/docs/route-form.md
@@ -0,0 +1,183 @@
+# RouteForm.vue
+
+A form component for Routes.
+
+- [Requirements](#requirements)
+- [Usage](#usage)
+  - [Install](#install)
+  - [Props](#props)
+  - [Slots](#slots)
+  - [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-routes` package.](../README.md#install)
+
+### Props
+
+#### `config`
+
+- type: `Object as PropType<KonnectRouteFormConfig | KongManagerRouteFormConfig>`
+- 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 Route.
+
+  - `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.
+
+The base konnect or kongManger config.
+
+#### `routeId`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+If showing the `Edit` type form, the ID of the Route.
+
+#### `serviceId`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+If service is pre-selected, hides service select dropdown.
+
+#### `hideSectionsInfo`
+
+- type: `Boolean`
+- required: `false`
+- default: `false`
+
+Show/hide `EntityFormSection` component info column.
+
+#### `hideNameField`
+
+- type: `Boolean`
+- required: `false`
+- default: `false`
+
+Show/hide Route name field. If `true`, `name` field is stripped from payload object.
+
+#### `hideServiceField`
+
+- type: `Boolean`
+- required: `false`
+- default: `false`
+
+Show/hide Service Select field. Should be used in case of manual adding `service_id` in payload. 
+
+#### `showTagsFiledUnderAdvanced`
+
+- type: `Boolean`
+- required: `false`
+- default: `false`
+
+Show tags field under _Advanced Fields_ collapse or in it's default place (before protocols field).
+
+### Slots
+
+#### `form-actions`
+
+Content to be displayed instead of the default `Cancel` and `Save` buttons, at the bottom of the form.
+
+Slot props:
+- `canSubmit`
+  - type: `Boolean`
+  - Should the submit button be enabled or disabled.
+- `submit`
+  - type: `Function`
+  - Form submit handler function.
+- `cancel`
+  - type: `Function`
+  - Cancel handler function.
+
+### 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 Route object.
+
+#### model-updated
+
+A `@model-updated` event is emitted when any form value was changed. The event payload is the Route payload object.
+
+### Usage example
+
+Please refer to the [sandbox](../sandbox/pages/RouteListPage.vue). The form is accessible by clicking the `+ New Route` button or `Edit` action of an existing Route.
+
+## TypeScript interfaces
+
+TypeScript interfaces [are available here](../src/types/route-form.ts) and can be directly imported into your host application. The following type interfaces are available for import:
+
+```ts
+import type {
+  BaseRouteFormConfig,
+  KonnectRouteFormConfig,
+  KongManagerRouteFormConfig,
+  RoutingRulesEntities,
+  RoutingRuleEntity,
+  PathHandlingVersion,
+  Protocol,
+  HeaderFields,
+  MethodsFields,
+  Sources,
+  Destinations,
+  RouteStateFields,
+  RouteState,
+  Headers,
+  RoutePayload,
+  SelectItem
+} from '@kong-ui-public/entities-routes'
+```
diff --git a/packages/entities/entities-routes/docs/route-list.md b/packages/entities/entities-routes/docs/route-list.md
new file mode 100644
index 0000000000..dd9d086bc7
--- /dev/null
+++ b/packages/entities/entities-routes/docs/route-list.md
@@ -0,0 +1,189 @@
+# RouteList.vue
+
+A table component for routes.
+
+- [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).
+
+## Usage
+
+### Install
+
+[See instructions for installing the `@kong-ui-public/entities-routes` package.](../README.md#install)
+
+### Props
+
+#### `config`
+
+- type: `Object as PropType<KonnectRouteListConfig | KongManagerRouteListConfig>`
+- 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.
+
+  - `createRoute`:
+    - type: `RouteLocationRaw`
+    - required: `true`
+    - default: `undefined`
+    - Route for creating a route.
+
+  - `getViewRoute`:
+    - type: `(id: string) => RouteLocationRaw`
+    - required: `true`
+    - default: `undefined`
+    - A function that returns the route for viewing a route.
+
+  - `getEditRoute`:
+    - type: `(id: string) => RouteLocationRaw`
+    - required: `true`
+    - default: `undefined`
+    - A function that returns the route for editing a route.
+
+  - `useExpression`:
+    - type: `boolean`
+    - required: `false`
+    - default: `undefined`
+    - Whether to use expression flavored routes.
+
+  - `serviceId`:
+    - type: `string`
+    - required: `false`
+    - default: `null`
+    - Current service id if the RouteList is nested in the routes tab on a service detail page.
+
+  - `workspace`:
+    - type: `string`
+    - required: `true`
+    - default: `undefined`
+    - *Specific to Kong Manager*. Name of the current workspace.
+
+  - `isExactMatch`:
+    - type: `boolean`
+    - required: `false`
+    - default: `undefined`
+    - *Specific to Kong Manager*. Whether to use exact match.
+
+  - `disableSorting`:
+    - type: `boolean`
+    - required: `false`
+    - default: `undefined`
+    - *Specific to Kong Manager*. Whether to disable table sorting.
+
+  - `filterSchema`:
+    - type: `FilterSchema`
+    - required: `false`
+    - default: `undefined`
+    - *Specific to Kong Manager*. FilterSchema for fuzzy match.
+
+  - `controlPlaneId`:
+    - type: `string`
+    - required: `true`
+    - default: `undefined`
+    - *Specific to Konnect*. Name of the current control plane.
+
+The base konnect or kongManger config.
+
+#### `cacheIdentifier`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+Used to override the default unique identifier for the table's entry in the cache. This should be unique across the Vue App.
+Note: the default value is usually sufficient unless the app needs to support multiple separate instances of the table.
+
+#### `canCreate`
+
+- type: `Function as PropType<() => Promise<boolean>>`
+- required: `false`
+- default: `async () => true`
+
+An asynchronous function, that returns a boolean, that evaluates if the user can create a new entity.
+
+#### `canDelete`
+
+- type: `Function as PropType<(row: object) => Promise<boolean>>`
+- required: `false`
+- default: `async () => true`
+
+An asynchronous function, that returns a boolean, that evaluates if the user can delete a given entity.
+
+#### `canEdit`
+
+- type: `Function as PropType<(row: object) => Promise<boolean>>`
+- required: `false`
+- default: `async () => true`
+
+An asynchronous function, that returns a boolean, that evaluates if the user can edit a given entity.
+
+#### `canRetrieve`
+
+- type: `Function as PropType<(row: object) => Promise<boolean>>`
+- required: `false`
+- default: `async () => true`
+
+An asynchronous function, that returns a boolean, that evaluates if the user can retrieve (view details) a given entity.
+
+#### `title`
+
+The table is rendered inside a `KCard`. `title` text is displayed in the upper left corner of the `KCard` above the table.
+
+### Events
+
+#### error
+
+An `@error` event is emitted when the table fails to fetch routes or delete a route. The event payload is the response error.
+
+#### copy:success
+
+A `@copy:success` event is emitted when a route ID or the entity JSON is successfully copied to clipboard. The event payload shape is CopyEventPayload.
+
+#### copy:error
+
+A `@copy:error` event is emitted when an error occurs when trying to copy a route ID or the entity JSON. The event payload shape is CopyEventPayload.
+
+#### delete:success
+
+A `@delete:success` event is emitted when a route is successfully deleted. The event payload is the route item data object.
+
+### Usage example
+
+Please refer to the [sandbox](../sandbox/pages/RouteListPage.vue).
+
+## TypeScript interfaces
+
+TypeScript interfaces [are available here](https://github.com/Kong/public-ui-components/blob/main/packages/entities/entities-routes/src/types/index.ts) and can be directly imported into your host application. The following type interfaces are available for import:
+
+```ts
+import type {
+  BaseRouteListConfig,
+  KonnectRouteListConfig,
+  KongManagerRouteListConfig,
+} from '@kong-ui-public/entities-routes'
+```
diff --git a/packages/entities/entities-routes/fixtures/mockData.ts b/packages/entities/entities-routes/fixtures/mockData.ts
new file mode 100644
index 0000000000..1550e54e83
--- /dev/null
+++ b/packages/entities/entities-routes/fixtures/mockData.ts
@@ -0,0 +1,79 @@
+// FetcherRawResponse is the raw format of the endpoint's response
+export interface FetcherRawResponse {
+  data: any[];
+  total: number;
+  offset?: string;
+}
+
+export const routes: FetcherRawResponse = {
+  data: [
+    {
+      id: '1',
+      name: 'route-1',
+      methods: ['GET'],
+      hosts: ['example.com'],
+    },
+    {
+      id: '2',
+      name: 'route-2',
+      hosts: ['example.com'],
+      tags: ['tag1', 'tag2'],
+    },
+  ],
+  total: 2,
+}
+
+export const routes100: any[] = Array(100)
+  .fill(null)
+  .map((_, i) => ({
+    id: `${i + 1}`,
+    name: `route-${i + 1}`,
+    methods: ['GET'],
+    hosts: [`${i + 1}.example.com`],
+  }))
+
+export const paginate = (
+  routes: any[],
+  size: number,
+  _offset: number,
+): FetcherRawResponse => {
+  const sliced = routes.slice(_offset, _offset + size)
+  const offset =
+    _offset + size < routes.length ? String(_offset + size) : undefined
+
+  return {
+    data: sliced,
+    total: sliced.length,
+    offset,
+  }
+}
+
+export const services = [
+  {
+    id: '1',
+    name: 'service-1',
+  },
+  {
+    id: '2',
+    name: 'service-2',
+  },
+]
+
+export const route = {
+  service: {
+    id: services[0].id,
+  },
+  id: '1',
+  name: 'route-1',
+  methods: ['GET', 'CASTOM'],
+  service_id: '',
+  tags: ['dev', 'test'],
+  regex_priority: 1,
+  path_handling: 'v1',
+  preserve_host: true,
+  https_redirect_status_code: 426,
+  protocols: ['http', 'https'],
+  strip_path: false,
+  paths: ['/foo', '/bar'],
+  headers: { Header1: ['cropped-jeans', 'expensive-petroleum'] },
+}
diff --git a/packages/entities/entities-routes/package.json b/packages/entities/entities-routes/package.json
new file mode 100644
index 0000000000..92f2ea7441
--- /dev/null
+++ b/packages/entities/entities-routes/package.json
@@ -0,0 +1,72 @@
+{
+  "name": "@kong-ui-public/entities-routes",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/entities-routes.umd.js",
+  "module": "./dist/entities-routes.es.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/entities-routes.es.js",
+      "require": "./dist/entities-routes.umd.js"
+    },
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@kong-ui-public/i18n": "workspace:^",
+    "@kong/kongponents": "^8.116.2",
+    "axios": "^1.4.0",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
+  },
+  "devDependencies": {
+    "@kong-ui-public/i18n": "workspace:^",
+    "@kong/design-tokens": "^1.8.0",
+    "@kong/kongponents": "^8.116.2",
+    "axios": "^1.4.0",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
+  },
+  "scripts": {
+    "dev": "cross-env USE_SANDBOX=true vite",
+    "build": "run-s typecheck build:package build:types",
+    "build:package": "vite build -m production",
+    "build:analyzer": "BUILD_VISUALIZER='entities/entities-routes' vite build -m production",
+    "build:types": "vue-tsc -p './tsconfig.build.json' --emitDeclarationOnly",
+    "preview:package": "vite preview --port 4173",
+    "preview": "cross-env USE_SANDBOX=true PREVIEW_SANDBOX=true run-s build:package preview:package",
+    "lint": "eslint '**/*.{js,jsx,ts,tsx,vue}' --ignore-path '../../../.eslintignore'",
+    "lint:fix": "eslint '**/*.{js,jsx,ts,tsx,vue}' --ignore-path '../../../.eslintignore' --fix",
+    "stylelint": "stylelint --allow-empty-input './src/**/*.{css,scss,sass,less,styl,vue}'",
+    "stylelint:fix": "stylelint --allow-empty-input './src/**/*.{css,scss,sass,less,styl,vue}' --fix",
+    "typecheck": "vue-tsc -p './tsconfig.build.json' --noEmit",
+    "test:component": "BABEL_ENV=cypress cross-env FORCE_COLOR=1 cypress run --component -b chrome --spec './src/**/*.cy.ts' --project '../../../.'",
+    "test:component:open": "BABEL_ENV=cypress cross-env FORCE_COLOR=1 cypress open --component -b chrome --project '../../../.'",
+    "test:unit": "cross-env FORCE_COLOR=1 vitest run",
+    "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Kong/public-ui-components.git",
+    "directory": "packages/entities/entities-routes"
+  },
+  "homepage": "https://github.com/Kong/public-ui-components/tree/main/packages/entities/entities-routes",
+  "author": "Kong, Inc.",
+  "license": "Apache-2.0",
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "distSizeChecker": {
+    "errorLimit": "700KB"
+  },
+  "dependencies": {
+    "@kong-ui-public/entities-shared": "workspace:^"
+  }
+}
diff --git a/packages/entities/entities-routes/sandbox/App.vue b/packages/entities/entities-routes/sandbox/App.vue
new file mode 100644
index 0000000000..656df1b4e6
--- /dev/null
+++ b/packages/entities/entities-routes/sandbox/App.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="sandbox-container">
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+</style>
+
+<style lang="scss" scoped>
+.sandbox-container {
+  padding: 32px;
+}
+</style>
diff --git a/packages/entities/entities-routes/sandbox/index.html b/packages/entities/entities-routes/sandbox/index.html
new file mode 100644
index 0000000000..26b5c57857
--- /dev/null
+++ b/packages/entities/entities-routes/sandbox/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>EntitiesRoutes Component Sandbox</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+      html,
+      body {
+        font-family: 'Inter', sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+
+    </style>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+
+</html>
diff --git a/packages/entities/entities-routes/sandbox/index.ts b/packages/entities/entities-routes/sandbox/index.ts
new file mode 100644
index 0000000000..431312a604
--- /dev/null
+++ b/packages/entities/entities-routes/sandbox/index.ts
@@ -0,0 +1,49 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './App.vue'
+import Kongponents from '@kong/kongponents'
+import '@kong/kongponents/dist/style.css'
+
+const app = createApp(App)
+
+// Initializing in an async function in order to fetch session and permissions data for the sandbox ONLY.
+// DO NOT DO THIS IN AN ACTUAL APP
+const init = async () => {
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+      {
+        path: '/',
+        name: 'home',
+        redirect: { name: 'route-list' },
+      },
+      {
+        path: '/route-list',
+        name: 'route-list',
+        component: () => import('./pages/RouteListPage.vue'),
+      },
+      {
+        path: '/route/create',
+        name: 'create-route',
+        component: () => import('./pages/RouteFormPage.vue'),
+      },
+      {
+        path: '/route/:id',
+        name: 'view-route',
+        component: () => import('./pages/RouteConfigCardPage.vue'),
+        props: true,
+      },
+      {
+        path: '/route/:id/edit',
+        name: 'edit-route',
+        component: () => import('./pages/RouteFormPage.vue'),
+      },
+    ],
+  })
+
+  app.use(Kongponents)
+  app.use(router)
+  app.mount('#app')
+}
+
+init()
diff --git a/packages/entities/entities-routes/sandbox/pages/HomePage.vue b/packages/entities/entities-routes/sandbox/pages/HomePage.vue
new file mode 100644
index 0000000000..fc86373ad6
--- /dev/null
+++ b/packages/entities/entities-routes/sandbox/pages/HomePage.vue
@@ -0,0 +1,9 @@
+<template>
+  <ul>
+    <li>
+      <router-link :to="{ name: 'route-list' }">
+        RouteList
+      </router-link>
+    </li>
+  </ul>
+</template>
diff --git a/packages/entities/entities-routes/sandbox/pages/RouteConfigCardPage.vue b/packages/entities/entities-routes/sandbox/pages/RouteConfigCardPage.vue
new file mode 100644
index 0000000000..36a465935a
--- /dev/null
+++ b/packages/entities/entities-routes/sandbox/pages/RouteConfigCardPage.vue
@@ -0,0 +1,55 @@
+<template>
+  <h2>Konnect API</h2>
+  <RouteConfigCard
+    :config="konnectConfig"
+    @copy:success="onCopy"
+    @fetch:error="onError"
+    @fetch:success="onSuccess"
+  />
+
+  <h2>Kong Manager API</h2>
+  <RouteConfigCard
+    :config="kongManagerConfig"
+    @copy:success="onCopy"
+    @fetch:error="onError"
+    @fetch:success="onSuccess"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { AxiosError } from 'axios'
+import type { KonnectRouteEntityConfig, KongManagerRouteEntityConfig } from '../../src'
+import { RouteConfigCard } from '../../src'
+const props = defineProps({
+  /** Grab the GatewayService id from the route params */
+  id: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
+const konnectConfig = ref<KonnectRouteEntityConfig>({
+  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,
+  entityId: props.id,
+})
+const kongManagerConfig = ref<KongManagerRouteEntityConfig>({
+  app: 'kongManager',
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager', // For local dev server proxy
+  entityId: props.id,
+})
+const onError = (error: AxiosError) => {
+  console.log(`Error: ${error}`)
+}
+const onSuccess = (payload: Record<string, any>) => {
+  console.log('fetch:success', payload)
+}
+const onCopy = (payload: Record<string, any>) => {
+  console.log('copy:success', payload)
+}
+</script>
diff --git a/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue b/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue
new file mode 100644
index 0000000000..9b90a0fab3
--- /dev/null
+++ b/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue
@@ -0,0 +1,93 @@
+<template>
+  <h2>Konnect API</h2>
+  <RouteForm
+    :config="konnectConfig"
+    :route-id="routeId"
+    @error="onError"
+    @update="onUpdate"
+  >
+    <template #form-actions="{ canSubmit, submit, cancel }">
+      <KButton
+        appearance="outline"
+        @click="cancel"
+      >
+        Cancel
+      </KButton>
+      <KButton
+        appearance="primary"
+        :disabled="!canSubmit"
+        @click="submit"
+      >
+        Next
+      </KButton>
+    </template>
+  </RouteForm>
+
+  <h2>Kong Manager API</h2>
+  <RouteForm
+    :config="kongManagerConfig"
+    :route-id="routeId"
+    @error="onError"
+    @update="onUpdate"
+  >
+    <template #form-actions="{ canSubmit, submit, cancel }">
+      <KButton
+        appearance="outline"
+        @click="cancel"
+      >
+        Cancel
+      </KButton>
+      <KButton
+        appearance="primary"
+        :disabled="!canSubmit"
+        @click="submit"
+      >
+        Next
+      </KButton>
+    </template>
+  </RouteForm>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { AxiosError } from 'axios'
+import type { KonnectRouteFormConfig, KongManagerRouteFormConfig } from '../../src'
+import { RouteForm } from '../../src'
+
+const route = useRoute()
+const router = useRouter()
+const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
+
+const routeId = computed((): string => route?.params?.id as string || '')
+
+const konnectConfig = ref<KonnectRouteFormConfig>({
+  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,
+  cancelRoute: { name: 'route-list' },
+})
+
+const kongManagerConfig = ref<KongManagerRouteFormConfig>({
+  app: 'kongManager',
+  // Uncomment to test compatibility with different Gateway editions and versions
+  // gatewayInfo: {
+  //   edition: 'community',
+  //   version: '3.3.0',
+  // },
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager', // For local dev server proxy
+  cancelRoute: { name: 'route-list' },
+})
+
+const onError = (error: AxiosError) => {
+  console.log(`Error: ${error}`)
+}
+
+const onUpdate = (payload: Record<string, any>) => {
+  console.log('update', payload)
+
+  router.push({ name: 'route-list' })
+}
+</script>
diff --git a/packages/entities/entities-routes/sandbox/pages/RouteListPage.vue b/packages/entities/entities-routes/sandbox/pages/RouteListPage.vue
new file mode 100644
index 0000000000..cb0658accd
--- /dev/null
+++ b/packages/entities/entities-routes/sandbox/pages/RouteListPage.vue
@@ -0,0 +1,109 @@
+<template>
+  <SandboxPermissionsControl
+    @update="handlePermissionsUpdate"
+  />
+  <h2>Konnect API</h2>
+  <RouteList
+    v-if="permissions"
+    :key="key"
+    cache-identifier="konnect"
+    :can-create="permissions.canCreate"
+    :can-delete="permissions.canDelete"
+    :can-edit="permissions.canEdit"
+    :can-retrieve="permissions.canRetrieve"
+    :config="konnectConfig"
+    title="Routes"
+    @copy:error="onCopyIdError"
+    @copy:success="onCopyIdSuccess"
+    @delete:success="onDeleteRouteSuccess"
+    @error="onError"
+  />
+
+  <h2>Kong Manager API</h2>
+  <RouteList
+    v-if="permissions"
+    :key="key"
+    cache-identifier="kong-manager"
+    :can-create="permissions.canCreate"
+    :can-delete="permissions.canDelete"
+    :can-edit="permissions.canEdit"
+    :can-retrieve="permissions.canRetrieve"
+    :config="kongManagerConfig"
+    title="Routes"
+    @copy:error="onCopyIdError"
+    @copy:success="onCopyIdSuccess"
+    @delete:success="onDeleteRouteSuccess"
+    @error="onError"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { AxiosError } from 'axios'
+import { RouteList } from '../../src'
+import type { KonnectRouteListConfig, KongManagerRouteListConfig, EntityRow, CopyEventPayload } from '../../src'
+import SandboxPermissionsControl, { PermissionsActions } from '@entities-shared-sandbox/components/SandboxPermissionsControl.vue'
+
+const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
+
+const konnectConfig = ref<KonnectRouteListConfig>({
+  app: 'konnect',
+  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-route' },
+  getViewRoute: (id: string) => ({ name: 'view-route', params: { id } }),
+  getEditRoute: (id: string) => ({ name: 'edit-route', params: { id } }),
+})
+
+const kongManagerConfig = ref<KongManagerRouteListConfig>({
+  app: 'kongManager',
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager', // For local dev server proxy
+  isExactMatch: false,
+  createRoute: { name: 'create-route' },
+  getViewRoute: (id: string) => ({ name: 'view-route', params: { id } }),
+  getEditRoute: (id: string) => ({ name: 'edit-route', params: { id } }),
+  filterSchema: {
+    name: {
+      type: 'text',
+    },
+    protocols: {
+      type: 'text',
+    },
+    hosts: {
+      type: 'text',
+    },
+    methods: {
+      type: 'text',
+    },
+    paths: {
+      type: 'text',
+    },
+  },
+})
+
+// Remount the tables in the sandbox when the permission props change; not needed outside of a sandbox
+const key = ref(1)
+const permissions = ref<PermissionsActions | null>(null)
+const handlePermissionsUpdate = (newPermissions: PermissionsActions) => {
+  permissions.value = newPermissions
+  key.value++
+}
+
+const onCopyIdSuccess = (payload: CopyEventPayload) => {
+  console.log(payload.message)
+}
+
+const onCopyIdError = (payload: CopyEventPayload) => {
+  console.error(payload.message)
+}
+
+const onDeleteRouteSuccess = (row: EntityRow) => {
+  console.log(`${row.id} successfully deleted`)
+}
+
+const onError = (error: AxiosError) => {
+  console.error(`Error: ${error}`)
+}
+</script>
diff --git a/packages/entities/entities-routes/sandbox/tsconfig.json b/packages/entities/entities-routes/sandbox/tsconfig.json
new file mode 100644
index 0000000000..6b0bff7930
--- /dev/null
+++ b/packages/entities/entities-routes/sandbox/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@entities-shared-sandbox/*": [
+        "../../entities-shared/sandbox/shared/*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.vue",
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/packages/entities/entities-routes/src/components/RouteConfigCard.vue b/packages/entities/entities-routes/src/components/RouteConfigCard.vue
new file mode 100644
index 0000000000..1a507e9f46
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteConfigCard.vue
@@ -0,0 +1,336 @@
+<template>
+  <div class="kong-ui-entities-route-entity-config-card">
+    <EntityBaseConfigCard
+      :config="config"
+      :config-schema="configSchema"
+      :fetch-url="fetchUrl"
+      :hide-title="hideTitle"
+      @copy:success="(entity: any) => $emit('copy:success', entity)"
+      @fetch:error="(err: any) => $emit('fetch:error', err)"
+      @fetch:success="handleSuccess"
+      @loading="(val: boolean) => $emit('loading', val)"
+    >
+      <template #https_redirect_status_code-label-tooltip>
+        <i18nT
+          keypath="form.fields.https_redirect_status_code.tooltip"
+          scope="global"
+        >
+          <template #code1>
+            <code>{{ t('form.fields.https_redirect_status_code.code1') }}</code>
+          </template>
+          <template #code2>
+            <code>{{ t('form.fields.https_redirect_status_code.code2') }}</code>
+          </template>
+          <template #code3>
+            <code>{{ t('form.fields.https_redirect_status_code.code3') }}</code>
+          </template>
+          <template #code4>
+            <code>{{ t('form.fields.https_redirect_status_code.code4') }}</code>
+          </template>
+        </i18nT>
+      </template>
+
+      <template #regex_priority-label-tooltip>
+        <i18nT
+          keypath="form.fields.regex_priority.tooltip"
+          scope="global"
+        >
+          <template #code1>
+            <code>{{ t('form.fields.regex_priority.code1') }}</code>
+          </template>
+          <template #code2>
+            <code>{{ t('form.fields.regex_priority.code2') }}</code>
+          </template>
+        </i18nT>
+      </template>
+
+      <template #protocols-label-tooltip>
+        <i18nT
+          keypath="form.fields.protocols.tooltipConfig"
+          scope="global"
+        >
+          <template #code1>
+            <code>{{ t('form.fields.protocols.code1') }}</code>
+          </template>
+          <template #code2>
+            <code>{{ t('form.fields.protocols.code2') }}</code>
+          </template>
+          <template #code3>
+            <code>{{ t('form.fields.protocols.code3') }}</code>
+          </template>
+          <template #code4>
+            <code>{{ t('form.fields.protocols.code4') }}</code>
+          </template>
+          <template #code5>
+            <code>{{ t('form.fields.protocols.code5') }}</code>
+          </template>
+        </i18nT>
+      </template>
+
+      <template #headers-label-tooltip>
+        <i18nT
+          keypath="form.fields.headers.tooltipConfig"
+          scope="global"
+        >
+          <template #code1>
+            <code>{{ t('form.fields.headers.code1') }}</code>
+          </template>
+          <template #code2>
+            <code>{{ t('form.fields.headers.code2') }}</code>
+          </template>
+          <template #code3>
+            <code>{{ t('form.fields.headers.code3') }}</code>
+          </template>
+          <template #code4>
+            <code>{{ t('form.fields.headers.code4') }}</code>
+          </template>
+        </i18nT>
+      </template>
+
+      <template #strip_path-label-tooltip>
+        <i18nT
+          keypath="form.fields.strip_path.tooltip"
+          scope="global"
+        >
+          <template #code1>
+            <code>{{ t('form.fields.headers.code1') }}</code>
+          </template>
+        </i18nT>
+      </template>
+
+      <template #preserve_host-label-tooltip>
+        <i18nT
+          keypath="form.fields.preserve_host.tooltip"
+          scope="global"
+        >
+          <template #code1>
+            <code>{{ t('form.fields.preserve_host.code1') }}</code>
+          </template>
+          <template #code2>
+            <code>{{ t('form.fields.preserve_host.code2') }}</code>
+          </template>
+          <template #code3>
+            <code>{{ t('form.fields.preserve_host.code3') }}</code>
+          </template>
+          <template #code4>
+            <code>{{ t('form.fields.preserve_host.code4') }}</code>
+          </template>
+          <template #code5>
+            <code>{{ t('form.fields.preserve_host.code5') }}</code>
+          </template>
+        </i18nT>
+      </template>
+
+      <template #service="{ row }">
+        <!-- Loading -->
+        <KSkeleton
+          v-if="isServiceNameLoading"
+          data-testid="service-name-loader"
+          type="spinner"
+        />
+        <InternalLinkItem
+          v-else-if="row.value && row.value.id === internalServiceId && serviceName"
+          :item="{
+            key: row.value.id,
+            value: serviceName,
+            type: ConfigurationSchemaType.LinkInternal
+          }"
+          @navigation-click="() => $emit('navigation-click', row.value.id, 'services')"
+        />
+        <div
+          v-else
+        >
+          {{ '-' }}
+        </div>
+      </template>
+    </EntityBaseConfigCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, PropType } from 'vue'
+import type { AxiosError } from 'axios'
+import {
+  useAxios, EntityBaseConfigCard, ConfigurationSchemaSection, ConfigurationSchemaType, InternalLinkItem,
+} from '@kong-ui-public/entities-shared'
+
+import endpoints from '../routes-endpoints'
+import composables from '../composables'
+import type {
+  KongManagerRouteEntityConfig, KonnectRouteEntityConfig, RouteConfigurationSchema,
+} from '../types'
+
+import '@kong-ui-public/entities-shared/dist/style.css'
+
+const emit = defineEmits<{
+  (e: 'loading', isLoading: boolean): void
+  (e: 'fetch:error', error: AxiosError): void,
+  (e: 'fetch:success', data: Record<string, any>): void,
+  (e: 'copy:success', data: Record<string, any>): void,
+  (e: 'navigation-click', id: string, entityType: string): 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<KonnectRouteEntityConfig | KongManagerRouteEntityConfig>,
+    required: true,
+    validator: (config: KonnectRouteEntityConfig | KongManagerRouteEntityConfig): 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.entityId) return false
+      return true
+    },
+  },
+  /**
+   * Control visibility of card title content
+   */
+  hideTitle: {
+    type: Boolean,
+    default: false,
+  },
+  /** The id of the service with which the route is associated */
+  serviceId: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+
+const { axiosInstance } = useAxios({
+  headers: props.config?.requestHeaders,
+})
+const { i18n: { t }, i18nT } = composables.useI18n()
+const internalServiceId = ref('')
+const serviceName = ref('')
+const isServiceNameLoading = ref(false)
+const fetchUrl = computed<string>(
+  () => endpoints.item[props.config?.app]?.[props.serviceId ? 'forGatewayService' : 'all']
+    .replace(/{serviceId}/gi, props.serviceId),
+)
+
+const fetchServiceName = computed<string>(() => endpoints.item[props.config.app]?.getService)
+
+const handleSuccess = async (entity: any) => {
+  internalServiceId.value = props.serviceId || entity?.service?.id
+  emit('fetch:success', entity)
+
+  if (!internalServiceId.value) {
+    return
+  }
+
+  let url = `${props.config.apiBaseUrl}${fetchServiceName.value}`
+  if (props.config.app === 'konnect') {
+    url = url
+      .replace(/{controlPlaneId}/gi, props.config?.controlPlaneId || '')
+      .replace(/{serviceId}/gi, internalServiceId.value || '')
+  } else if (props.config.app === 'kongManager') {
+    url = url
+      .replace(/\/{workspace}/gi, props.config?.workspace ? `/${props.config.workspace}` : '')
+      .replace(/{serviceId}/gi, internalServiceId.value || '')
+  }
+
+  try {
+    isServiceNameLoading.value = true
+    // make the call to get ServiceName
+    const { data } = await axiosInstance.get(url)
+    serviceName.value = data?.name || data?.id
+  } catch (err: any) {
+    // emit this error for the host app
+    emit('fetch:error', err)
+  } finally {
+    isServiceNameLoading.value = false
+  }
+}
+
+const configSchema = ref<RouteConfigurationSchema>({
+  id: {},
+  name: {
+    tooltip: t('form.fields.name.tooltip'),
+  },
+  created_at: {},
+  updated_at: {},
+  service: {
+    label: t('form.fields.service.label'),
+    section: ConfigurationSchemaSection.Basic,
+    tooltip: t('form.fields.service.tooltip'),
+    order: 5,
+  },
+  tags: {
+    tooltip: t('form.fields.tags.tooltip'),
+    order: 6,
+  },
+  protocols: {
+    section: ConfigurationSchemaSection.Basic,
+    type: ConfigurationSchemaType.BadgeTag,
+    order: 7,
+  },
+  paths: {
+    section: ConfigurationSchemaSection.Basic,
+    tooltip: t('form.fields.paths.tooltip'),
+    type: ConfigurationSchemaType.BadgeTag,
+    order: 8,
+  },
+  hosts: {
+    section: ConfigurationSchemaSection.Basic,
+    tooltip: t('form.fields.hosts.tooltipConfig'),
+    type: ConfigurationSchemaType.BadgeTag,
+    order: 9,
+  },
+  snis: {
+    label: t('form.fields.snis.label'),
+    tooltip: t('form.fields.snis.tooltip'),
+    order: 10,
+  },
+  headers: {
+    section: ConfigurationSchemaSection.Basic,
+    order: 11,
+  },
+  methods: {
+    section: ConfigurationSchemaSection.Basic,
+    tooltip: t('form.fields.methods.tooltip'),
+    type: ConfigurationSchemaType.BadgeMethod,
+    order: 12,
+  },
+  sources: {
+    section: ConfigurationSchemaSection.Basic,
+    tooltip: t('form.fields.sources.tooltip'),
+    type: ConfigurationSchemaType.JsonArray,
+    order: 13,
+  },
+  destinations: {
+    section: ConfigurationSchemaSection.Basic,
+    tooltip: t('form.fields.destinations.tooltip'),
+    type: ConfigurationSchemaType.JsonArray,
+    order: 14,
+  },
+  // advanced fields
+  https_redirect_status_code: {
+    order: 1,
+  },
+  regex_priority: {
+    tooltip: t('form.fields.regex_priority.tooltip'),
+    order: 2,
+  },
+  strip_path: {
+    order: 3,
+  },
+  preserve_host: {
+    order: 4,
+  },
+  request_buffering: {
+    tooltip: t('form.fields.request_buffering.tooltip'),
+    order: 5,
+  },
+  response_buffering: {
+    tooltip: t('form.fields.response_buffering.tooltip'),
+    order: 6,
+  },
+  path_handling: {
+    tooltip: t('form.fields.path_handling.tooltipConfig'),
+    order: 7,
+  },
+})
+</script>
diff --git a/packages/entities/entities-routes/src/components/RouteForm.cy.ts b/packages/entities/entities-routes/src/components/RouteForm.cy.ts
new file mode 100644
index 0000000000..263ee508df
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteForm.cy.ts
@@ -0,0 +1,965 @@
+import { KonnectRouteFormConfig, KongManagerRouteFormConfig } from '../types'
+import RouteForm from './RouteForm.vue'
+import { route, services } from '../../fixtures/mockData'
+import { EntityBaseForm } from '@kong-ui-public/entities-shared'
+
+const cancelRoute = { name: 'route-list' }
+
+const baseConfigKonnect: KonnectRouteFormConfig = {
+  app: 'konnect',
+  controlPlaneId: '1235-abcd-ilove-dogs',
+  apiBaseUrl: '/us/kong-api/konnect-api',
+  cancelRoute,
+}
+
+const baseConfigKM: KongManagerRouteFormConfig = {
+  app: 'kongManager',
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager',
+  cancelRoute,
+}
+
+describe('<RouteForm />', { viewportHeight: 700, viewportWidth: 700 }, () => {
+  describe('Kong Manager', () => {
+    const interceptKM = (params?: {
+      mockData?: object
+      alias?: string
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes/*`,
+        },
+        {
+          statusCode: 200,
+          body: params?.mockData ?? route,
+        },
+      ).as(params?.alias ?? 'getRoute')
+    }
+
+    const interceptKMServices = (params?: {
+      mockData?: object
+      alias?: string
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/services/*`,
+        },
+        {
+          statusCode: 200,
+          body: { data: params?.mockData ?? services },
+        },
+      ).as(params?.alias ?? 'getServices')
+    }
+
+    const interceptUpdate = (status = 200): void => {
+      cy.intercept(
+        {
+          method: 'PATCH',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes/*`,
+        },
+        {
+          statusCode: status,
+          body: { ...route, tags: ['tag1', 'tag2'] },
+        },
+      ).as('updateRoute')
+    }
+
+    it('should show create form', () => {
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKM,
+        },
+      })
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+      cy.get('.kong-ui-entities-route-form form').should('be.visible')
+
+      // button state
+      cy.getTestId('form-cancel').should('be.visible')
+      cy.getTestId('form-submit').should('be.visible')
+      cy.getTestId('form-cancel').should('be.enabled')
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // form fields - general
+      cy.getTestId('route-form-name').should('be.visible')
+      cy.getTestId('route-form-service-id').should('be.visible')
+      cy.getTestId('route-form-tags').should('be.visible')
+
+      // advanced fields
+      cy.getTestId('k-collapse-trigger-content').should('be.visible').click()
+      cy.getTestId('route-form-path-handling').should('be.visible')
+      cy.getTestId('route-form-http-redirect-status-code').should('be.visible')
+      cy.getTestId('route-form-regex-priority').should('be.visible')
+      cy.getTestId('route-form-strip-path').should('be.visible')
+      cy.getTestId('route-form-preserve-host').should('be.visible')
+      cy.getTestId('route-form-request-buffering').should('be.visible')
+      cy.getTestId('route-form-response-buffering').should('be.visible')
+
+      // routing rules fields
+      cy.getTestId('route-form-protocols').should('be.visible')
+
+      // paths
+      cy.getTestId('route-form-paths-input-1').should('be.visible')
+      cy.getTestId('add-paths').should('be.visible').click()
+      cy.getTestId('route-form-paths-input-2').should('be.visible')
+      cy.getTestId('remove-paths').first().should('be.visible').click()
+      cy.getTestId('route-form-paths-input-2').should('not.exist')
+
+      cy.getTestId('route-form-paths-input-1').should('be.visible')
+      cy.getTestId('remove-paths').first().should('be.visible').click()
+      cy.get('.route-form-routing-rules-selector-options').should('be.visible')
+
+      // snis
+      cy.getTestId('routing-rule-snis').should('be.visible').click()
+      cy.getTestId('route-form-snis-input-1').should('be.visible')
+      cy.getTestId('add-snis').should('be.visible').click()
+      cy.getTestId('route-form-snis-input-2').should('be.visible')
+      cy.getTestId('remove-snis').first().should('be.visible').click()
+      cy.getTestId('route-form-snis-input-2').should('not.exist')
+
+      // hosts
+      cy.getTestId('routing-rule-hosts').should('be.visible').click()
+      cy.getTestId('route-form-hosts-input-1').should('be.visible')
+      cy.getTestId('add-hosts').should('be.visible').click()
+      cy.getTestId('route-form-hosts-input-2').should('be.visible')
+      cy.getTestId('remove-hosts').first().should('be.visible').click()
+      cy.getTestId('route-form-hosts-input-2').should('not.exist')
+
+      // methods and custom methods
+      cy.getTestId('routing-rule-methods').should('be.visible').click()
+      cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'true')
+      cy.getTestId('get-method-toggle').should('exist').should('be.visible')
+      cy.getTestId('post-method-toggle').should('exist').should('be.visible')
+      cy.getTestId('put-method-toggle').should('exist').should('be.visible')
+      cy.get('[data-testid="custom-method-toggle"] input').should('exist').should('not.be.visible').check({ force: true })
+      cy.getTestId('route-form-custom-method-input-1').should('be.visible')
+      cy.getTestId('add-custom-method').should('be.visible').click()
+      cy.getTestId('route-form-custom-method-input-2').should('be.visible')
+      cy.getTestId('remove-custom-method').first().should('be.visible').click()
+      cy.getTestId('route-form-custom-method-input-2').should('not.exist')
+      cy.getTestId('remove-methods').should('be.visible').click()
+      cy.getTestId('get-method-toggle').should('not.exist')
+      cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'false')
+
+      // headers
+      cy.getTestId('routing-rule-headers').should('be.visible').click()
+      cy.getTestId('route-form-headers-name-input-1').should('be.visible')
+      cy.getTestId('route-form-headers-values-input-1').should('be.visible')
+      cy.getTestId('add-headers').should('be.visible').click()
+      cy.getTestId('route-form-headers-name-input-2').should('be.visible')
+      cy.getTestId('route-form-headers-values-input-2').should('be.visible')
+      cy.getTestId('remove-headers').first().should('be.visible').click()
+      cy.getTestId('route-form-headers-name-input-2').should('not.exist')
+      cy.getTestId('route-form-headers-values-input-2').should('not.exist')
+
+      cy.getTestId('route-form-protocols').click({ force: true })
+      cy.get("[data-testid='k-select-item-tcp,tls,udp']").click()
+      cy.getTestId('routing-rule-paths').should('not.exist')
+      cy.getTestId('routing-rule-hosts').should('not.exist')
+      cy.getTestId('routing-rule-methods').should('not.exist')
+      cy.getTestId('routing-rule-headers').should('not.exist')
+
+      // sources
+      cy.getTestId('routing-rule-sources').should('be.visible').click()
+      cy.getTestId('route-form-sources-ip-input-1').should('be.visible')
+      cy.getTestId('route-form-sources-port-input-1').should('be.visible')
+      cy.getTestId('add-sources').should('be.visible').click()
+      cy.getTestId('route-form-sources-ip-input-2').should('be.visible')
+      cy.getTestId('route-form-sources-port-input-2').should('be.visible')
+      cy.getTestId('remove-sources').first().should('be.visible').click()
+      cy.getTestId('route-form-sources-ip-input-2').should('not.exist')
+      cy.getTestId('route-form-sources-port-input-2').should('not.exist')
+
+      // destinations
+      cy.getTestId('routing-rule-destinations').should('be.visible').click()
+      cy.getTestId('route-form-destinations-ip-input-1').should('be.visible')
+      cy.getTestId('route-form-destinations-port-input-1').should('be.visible')
+      cy.getTestId('add-destinations').should('be.visible').click()
+      cy.getTestId('route-form-destinations-ip-input-2').should('be.visible')
+      cy.getTestId('route-form-destinations-port-input-2').should('be.visible')
+      cy.getTestId('remove-destinations').first().should('be.visible').click()
+      cy.getTestId('route-form-destinations-ip-input-2').should('not.exist')
+      cy.getTestId('route-form-destinations-port-input-2').should('not.exist')
+    })
+
+    it('should correctly handle button state - create', () => {
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKM,
+        },
+      })
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // default button state
+      cy.getTestId('form-cancel').should('be.visible')
+      cy.getTestId('form-submit').should('be.visible')
+      cy.getTestId('form-cancel').should('be.enabled')
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // enables save when required fields have values
+      // form fields - general
+      cy.getTestId('route-form-name').should('be.visible')
+
+      // paths
+      cy.getTestId('route-form-paths-input-1').type(route.paths[0])
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-paths-input-1').clear()
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // snis
+      cy.getTestId('routing-rule-snis').click()
+      cy.getTestId('route-form-snis-input-1').type('sni')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-snis-input-1').clear()
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // hosts
+      cy.getTestId('routing-rule-hosts').click()
+      cy.getTestId('route-form-hosts-input-1').type('host')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-hosts-input-1').clear()
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // methods and custom methods
+      cy.getTestId('routing-rule-methods').click()
+      cy.get('[data-testid="get-method-toggle"] input').check({ force: true })
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.get('[data-testid="get-method-toggle"] input').uncheck({ force: true })
+      cy.getTestId('form-submit').should('be.disabled')
+      cy.get('[data-testid="custom-method-toggle"] input').check({ force: true })
+      cy.getTestId('form-submit').should('be.disabled')
+      cy.getTestId('route-form-custom-method-input-1').type('castom')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-custom-method-input-1').clear()
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // headers
+      cy.getTestId('routing-rule-headers').click()
+      cy.getTestId('route-form-headers-name-input-1').type(Object.keys(route.headers)[0])
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-headers-name-input-1').clear()
+      cy.getTestId('route-form-headers-values-input-1').type(route.headers.Header1[0])
+      cy.getTestId('form-submit').should('be.disabled')
+
+      cy.getTestId('route-form-protocols').click({ force: true })
+      cy.get("[data-testid='k-select-item-tcp,tls,udp']").click()
+
+      // sources
+      cy.getTestId('routing-rule-sources').click()
+      cy.getTestId('route-form-sources-ip-input-1').type('127.0.0.1')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-sources-ip-input-1').clear()
+      cy.getTestId('route-form-sources-port-input-1').type('8080')
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // destinations
+      cy.getTestId('routing-rule-destinations').click()
+      cy.getTestId('route-form-destinations-ip-input-1').type('127.0.0.2')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-destinations-ip-input-1').clear()
+      cy.getTestId('route-form-destinations-port-input-1').type('8000')
+      cy.getTestId('form-submit').should('be.disabled')
+    })
+
+    it('should show edit form', () => {
+      interceptKM()
+      interceptKMServices()
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKM,
+          routeId: route.id,
+        },
+      })
+
+      cy.wait('@getRoute')
+      cy.wait('@getServices')
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // button state
+      cy.getTestId('form-cancel').should('be.visible')
+      cy.getTestId('form-submit').should('be.visible')
+      cy.getTestId('form-cancel').should('be.enabled')
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // form fields
+      cy.getTestId('route-form-name').should('have.value', route.name)
+      cy.getTestId('route-form-service-id').should('have.value', route.service.id)
+      cy.getTestId('route-form-tags').should('have.value', route.tags.join(', '))
+      cy.getTestId('route-form-paths-input-1').should('have.value', route.paths[0])
+      cy.getTestId('route-form-paths-input-2').should('have.value', route.paths[1])
+      cy.get(`[data-testid="${route.methods[0].toLowerCase()}-method-toggle"] input`).should('be.checked')
+      cy.get(`[data-testid="${route.methods[1].toLowerCase()}-method-toggle"] input`).should('be.checked')
+      cy.getTestId('route-form-headers-name-input-1').should('have.value', Object.keys(route.headers)[0])
+      cy.getTestId('route-form-headers-values-input-1').should('have.value', route.headers.Header1.join(','))
+
+      cy.getTestId('k-collapse-trigger-content').click()
+      cy.getTestId('route-form-path-handling').should('have.value', route.path_handling)
+      cy.getTestId('route-form-regex-priority').should('have.value', route.regex_priority)
+      cy.getTestId('route-form-strip-path').should(`${route.strip_path ? '' : 'not.'}be.checked`)
+      cy.getTestId('route-form-preserve-host').should(`${route.preserve_host ? '' : 'not.'}be.checked`)
+    })
+
+    it('should correctly handle button state - edit', () => {
+      interceptKM()
+      interceptKMServices()
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKM,
+          routeId: route.id,
+        },
+      })
+
+      cy.wait('@getRoute')
+      cy.wait('@getServices')
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // default button state
+      cy.getTestId('form-cancel').should('be.visible')
+      cy.getTestId('form-submit').should('be.visible')
+      cy.getTestId('form-cancel').should('be.enabled')
+      cy.getTestId('form-submit').should('be.disabled')
+      cy.getTestId('routing-rules-warning').should('not.exist')
+
+      // enables save when form has changes
+      cy.getTestId('route-form-service-id').click({ force: true })
+      cy.get("[data-testid='k-select-item-2']").click()
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('remove-methods').click()
+      cy.getTestId('remove-paths').first().click()
+      cy.getTestId('remove-paths').click()
+      cy.getTestId('remove-headers').click()
+      cy.getTestId('routing-rules-warning').should('be.visible')
+      cy.getTestId('form-submit').should('be.disabled')
+    })
+
+    it('should handle error state - failed to load route', () => {
+      interceptKMServices()
+
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes/*`,
+        },
+        {
+          statusCode: 404,
+          body: {},
+        },
+      ).as('getRoute')
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKM,
+          routeId: route.id,
+        },
+      })
+
+      cy.wait('@getRoute')
+      cy.wait('@getServices')
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // error state is displayed
+      cy.getTestId('form-fetch-error').should('be.visible')
+
+      // buttons and form hidden
+      cy.getTestId('form-cancel').should('not.exist')
+      cy.getTestId('form-submit').should('not.exist')
+      cy.get('.kong-ui-entities-route-form form').should('not.exist')
+    })
+
+    it('should allow exact match filtering of services', () => {
+      interceptKMServices()
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKM,
+        },
+      })
+
+      cy.wait('@getServices')
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // search
+      cy.getTestId('route-form-service-id').should('be.visible')
+      cy.getTestId('route-form-service-id').type(services[1].name)
+
+      // click kselect item
+      cy.getTestId(`k-select-item-${services[1].id}`).should('be.visible')
+      cy.get(`[data-testid="k-select-item-${services[1].id}"] button`).click()
+      cy.getTestId('route-form-service-id').should('have.value', services[1].id)
+    })
+
+    it('should handle error state - failed to load services', () => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/services/*`,
+        },
+        {
+          statusCode: 500,
+          body: {},
+        },
+      ).as('getServices')
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKM,
+        },
+      })
+
+      cy.wait('@getServices')
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+      cy.getTestId('form-error').should('be.visible')
+    })
+
+    it('should correctly render with all props and slot content', () => {
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKM,
+          serviceId: services[0].id,
+          hideSectionsInfo: true,
+          hideNameField: true,
+          showTagsFiledUnderAdvanced: true,
+        },
+        slots: {
+          'form-actions': '<button data-testid="slotted-cancel-button">Cancel</button><button data-testid="slotted-submit-button">Submit</button>',
+        },
+      })
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+      cy.get('.kong-ui-entities-route-form form').should('be.visible')
+
+      // name field should be hidden when hideNameField is true
+      cy.getTestId('route-form-name').should('not.exist')
+
+      // tags field should render under advanced fields
+      cy.getTestId('route-form-tags').should('not.be.visible')
+      cy.getTestId('k-collapse-trigger-content').click()
+      cy.getTestId('route-form-tags').should('be.visible')
+
+      // service id field should be hidden when serviceId is provided
+      cy.getTestId('route-form-service-id').should('not.exist')
+
+      // sections info should be hidden when hideSectionsInfo is true
+      cy.get('.form-section-info sticky').should('not.exist')
+
+      // default buttons should be replaced with slotted content
+      cy.getTestId('form-cancel').should('not.exist')
+      cy.getTestId('form-submit').should('not.exist')
+      cy.getTestId('slotted-cancel-button').should('be.visible')
+      cy.getTestId('slotted-submit-button').should('be.visible')
+    })
+
+    it('update event should be emitted when Route was edited', () => {
+      interceptKM()
+      interceptUpdate()
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKM,
+          routeId: route.id,
+          onUpdate: cy.spy().as('onUpdateSpy'),
+        },
+      }).then(({ wrapper }) => wrapper)
+        .as('vueWrapper')
+
+      cy.wait('@getRoute')
+      cy.getTestId('route-form-tags').clear()
+      cy.getTestId('route-form-tags').type('tag1,tag2')
+
+      cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(EntityBaseForm)
+        .vm.$emit('submit'))
+
+      cy.wait('@updateRoute')
+
+      cy.get('@onUpdateSpy').should('have.been.calledOnce')
+    })
+
+    it('should hide `ws` options when not supported', () => {
+      cy.mount(RouteForm, {
+        props: {
+          config: {
+            ...baseConfigKM,
+            gatewayInfo: {
+              edition: 'enterprise',
+              version: '2.8.0.0',
+            },
+          },
+        },
+      })
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      cy.getTestId('route-form-protocols').click({ force: true })
+      cy.getTestId('k-select-item-http').should('exist')
+      cy.getTestId('k-select-item-ws').should('not.exist')
+      cy.getTestId('k-select-item-wss').should('not.exist')
+    })
+  })
+
+  describe('Konnect', { viewportHeight: 700, viewportWidth: 700 }, () => {
+    const interceptKonnect = (params?: {
+      mockData?: object
+      alias?: string
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/routes/*`,
+        },
+        {
+          statusCode: 200,
+          body: params?.mockData ?? route,
+        },
+      ).as(params?.alias ?? 'getRoute')
+    }
+
+    const interceptKonnectServices = (params?: {
+      mockData?: object
+      alias?: string
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/services*`,
+        },
+        {
+          statusCode: 200,
+          body: { data: params?.mockData ?? services },
+        },
+      ).as(params?.alias ?? 'getServices')
+    }
+
+    const interceptUpdate = (status = 200): void => {
+      cy.intercept(
+        {
+          method: 'PUT',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/routes/*`,
+        },
+        {
+          statusCode: status,
+          body: { ...route, tags: ['tag1', 'tag2'] },
+        },
+      ).as('updateRoute')
+    }
+
+    it('should show create form', () => {
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKonnect,
+        },
+      })
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+      cy.get('.kong-ui-entities-route-form form').should('be.visible')
+
+      // button state
+      cy.getTestId('form-cancel').should('be.visible')
+      cy.getTestId('form-submit').should('be.visible')
+      cy.getTestId('form-cancel').should('be.enabled')
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // form fields - general
+      cy.getTestId('route-form-name').should('be.visible')
+      cy.getTestId('route-form-service-id').should('be.visible')
+      cy.getTestId('route-form-tags').should('be.visible')
+
+      // advanced fields
+      cy.getTestId('k-collapse-trigger-content').should('be.visible').click()
+      cy.getTestId('route-form-path-handling').should('be.visible')
+      cy.getTestId('route-form-http-redirect-status-code').should('be.visible')
+      cy.getTestId('route-form-regex-priority').should('be.visible')
+      cy.getTestId('route-form-strip-path').should('be.visible')
+      cy.getTestId('route-form-preserve-host').should('be.visible')
+
+      // routing rules fields
+      cy.getTestId('route-form-protocols').should('be.visible')
+
+      // paths
+      cy.getTestId('route-form-paths-input-1').should('be.visible')
+      cy.getTestId('add-paths').should('be.visible').click()
+      cy.getTestId('route-form-paths-input-2').should('be.visible')
+      cy.getTestId('remove-paths').first().should('be.visible').click()
+      cy.getTestId('route-form-paths-input-2').should('not.exist')
+
+      cy.getTestId('route-form-paths-input-1').should('be.visible')
+      cy.getTestId('remove-paths').first().should('be.visible').click()
+      cy.get('.route-form-routing-rules-selector-options').should('be.visible')
+
+      // snis
+      cy.getTestId('routing-rule-snis').should('be.visible').click()
+      cy.getTestId('route-form-snis-input-1').should('be.visible')
+      cy.getTestId('add-snis').should('be.visible').click()
+      cy.getTestId('route-form-snis-input-2').should('be.visible')
+      cy.getTestId('remove-snis').first().should('be.visible').click()
+      cy.getTestId('route-form-snis-input-2').should('not.exist')
+
+      // hosts
+      cy.getTestId('routing-rule-hosts').should('be.visible').click()
+      cy.getTestId('route-form-hosts-input-1').should('be.visible')
+      cy.getTestId('add-hosts').should('be.visible').click()
+      cy.getTestId('route-form-hosts-input-2').should('be.visible')
+      cy.getTestId('remove-hosts').first().should('be.visible').click()
+      cy.getTestId('route-form-hosts-input-2').should('not.exist')
+
+      // methods and custom methods
+      cy.getTestId('routing-rule-methods').should('be.visible').click()
+      cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'true')
+      cy.getTestId('get-method-toggle').should('exist').should('be.visible')
+      cy.getTestId('post-method-toggle').should('exist').should('be.visible')
+      cy.getTestId('put-method-toggle').should('exist').should('be.visible')
+      cy.get('[data-testid="custom-method-toggle"] input').should('exist').should('not.be.visible').check({ force: true })
+      cy.getTestId('route-form-custom-method-input-1').should('be.visible')
+      cy.getTestId('add-custom-method').should('be.visible').click()
+      cy.getTestId('route-form-custom-method-input-2').should('be.visible')
+      cy.getTestId('remove-custom-method').first().should('be.visible').click()
+      cy.getTestId('route-form-custom-method-input-2').should('not.exist')
+      cy.getTestId('remove-methods').should('be.visible').click()
+      cy.getTestId('get-method-toggle').should('not.exist')
+      cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'false')
+
+      // headers
+      cy.getTestId('routing-rule-headers').should('be.visible').click()
+      cy.getTestId('route-form-headers-name-input-1').should('be.visible')
+      cy.getTestId('route-form-headers-values-input-1').should('be.visible')
+      cy.getTestId('add-headers').should('be.visible').click()
+      cy.getTestId('route-form-headers-name-input-2').should('be.visible')
+      cy.getTestId('route-form-headers-values-input-2').should('be.visible')
+      cy.getTestId('remove-headers').first().should('be.visible').click()
+      cy.getTestId('route-form-headers-name-input-2').should('not.exist')
+      cy.getTestId('route-form-headers-values-input-2').should('not.exist')
+
+      cy.getTestId('route-form-protocols').click({ force: true })
+      cy.get("[data-testid='k-select-item-tcp,tls,udp']").click()
+      cy.getTestId('routing-rule-paths').should('not.exist')
+      cy.getTestId('routing-rule-hosts').should('not.exist')
+      cy.getTestId('routing-rule-methods').should('not.exist')
+      cy.getTestId('routing-rule-headers').should('not.exist')
+
+      // sources
+      cy.getTestId('routing-rule-sources').should('be.visible').click()
+      cy.getTestId('route-form-sources-ip-input-1').should('be.visible')
+      cy.getTestId('route-form-sources-port-input-1').should('be.visible')
+      cy.getTestId('add-sources').should('be.visible').click()
+      cy.getTestId('route-form-sources-ip-input-2').should('be.visible')
+      cy.getTestId('route-form-sources-port-input-2').should('be.visible')
+      cy.getTestId('remove-sources').first().should('be.visible').click()
+      cy.getTestId('route-form-sources-ip-input-2').should('not.exist')
+      cy.getTestId('route-form-sources-port-input-2').should('not.exist')
+
+      // destinations
+      cy.getTestId('routing-rule-destinations').should('be.visible').click()
+      cy.getTestId('route-form-destinations-ip-input-1').should('be.visible')
+      cy.getTestId('route-form-destinations-port-input-1').should('be.visible')
+      cy.getTestId('add-destinations').should('be.visible').click()
+      cy.getTestId('route-form-destinations-ip-input-2').should('be.visible')
+      cy.getTestId('route-form-destinations-port-input-2').should('be.visible')
+      cy.getTestId('remove-destinations').first().should('be.visible').click()
+      cy.getTestId('route-form-destinations-ip-input-2').should('not.exist')
+      cy.getTestId('route-form-destinations-port-input-2').should('not.exist')
+    })
+
+    it('should correctly handle button state - create', () => {
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKonnect,
+        },
+      })
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // default button state
+      cy.getTestId('form-cancel').should('be.visible')
+      cy.getTestId('form-submit').should('be.visible')
+      cy.getTestId('form-cancel').should('be.enabled')
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // enables save when required fields have values
+      // form fields - general
+      cy.getTestId('route-form-name').should('be.visible')
+
+      // paths
+      cy.getTestId('route-form-paths-input-1').type(route.paths[0])
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-paths-input-1').clear()
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // snis
+      cy.getTestId('routing-rule-snis').click()
+      cy.getTestId('route-form-snis-input-1').type('sni')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-snis-input-1').clear()
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // hosts
+      cy.getTestId('routing-rule-hosts').click()
+      cy.getTestId('route-form-hosts-input-1').type('host')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-hosts-input-1').clear()
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // methods and custom methods
+      cy.getTestId('routing-rule-methods').click()
+      cy.get('[data-testid="get-method-toggle"] input').check({ force: true })
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.get('[data-testid="get-method-toggle"] input').uncheck({ force: true })
+      cy.getTestId('form-submit').should('be.disabled')
+      cy.get('[data-testid="custom-method-toggle"] input').check({ force: true })
+      cy.getTestId('form-submit').should('be.disabled')
+      cy.getTestId('route-form-custom-method-input-1').type('castom')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-custom-method-input-1').clear()
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // headers
+      cy.getTestId('routing-rule-headers').click()
+      cy.getTestId('route-form-headers-name-input-1').type(Object.keys(route.headers)[0])
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-headers-name-input-1').clear()
+      cy.getTestId('route-form-headers-values-input-1').type(route.headers.Header1[0])
+      cy.getTestId('form-submit').should('be.disabled')
+
+      cy.getTestId('route-form-protocols').click({ force: true })
+      cy.get("[data-testid='k-select-item-tcp,tls,udp']").click()
+
+      // sources
+      cy.getTestId('routing-rule-sources').click()
+      cy.getTestId('route-form-sources-ip-input-1').type('127.0.0.1')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-sources-ip-input-1').clear()
+      cy.getTestId('route-form-sources-port-input-1').type('8080')
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // destinations
+      cy.getTestId('routing-rule-destinations').click()
+      cy.getTestId('route-form-destinations-ip-input-1').type('127.0.0.2')
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('route-form-destinations-ip-input-1').clear()
+      cy.getTestId('route-form-destinations-port-input-1').type('8000')
+      cy.getTestId('form-submit').should('be.disabled')
+    })
+
+    it('should show edit form', () => {
+      interceptKonnect()
+      interceptKonnectServices()
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKonnect,
+          routeId: route.id,
+        },
+      })
+
+      cy.wait('@getRoute')
+      cy.wait('@getServices')
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // button state
+      cy.getTestId('form-cancel').should('be.visible')
+      cy.getTestId('form-submit').should('be.visible')
+      cy.getTestId('form-cancel').should('be.enabled')
+      cy.getTestId('form-submit').should('be.disabled')
+
+      // form fields
+      cy.getTestId('route-form-name').should('have.value', route.name)
+      cy.getTestId('route-form-service-id').should('have.value', route.service.id)
+      cy.getTestId('route-form-tags').should('have.value', route.tags.join(', '))
+      cy.getTestId('route-form-paths-input-1').should('have.value', route.paths[0])
+      cy.getTestId('route-form-paths-input-2').should('have.value', route.paths[1])
+      cy.get(`[data-testid="${route.methods[0].toLowerCase()}-method-toggle"] input`).should('be.checked')
+      cy.get(`[data-testid="${route.methods[1].toLowerCase()}-method-toggle"] input`).should('be.checked')
+      cy.getTestId('route-form-headers-name-input-1').should('have.value', Object.keys(route.headers)[0])
+      cy.getTestId('route-form-headers-values-input-1').should('have.value', route.headers.Header1.join(','))
+
+      cy.getTestId('k-collapse-trigger-content').click()
+      cy.getTestId('route-form-path-handling').should('have.value', route.path_handling)
+      cy.getTestId('route-form-regex-priority').should('have.value', route.regex_priority)
+      cy.getTestId('route-form-strip-path').should(`${route.strip_path ? '' : 'not.'}be.checked`)
+      cy.getTestId('route-form-preserve-host').should(`${route.preserve_host ? '' : 'not.'}be.checked`)
+    })
+
+    it('should correctly handle button state - edit', () => {
+      interceptKonnect()
+      interceptKonnectServices()
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKonnect,
+          routeId: route.id,
+        },
+      })
+
+      cy.wait('@getRoute')
+      cy.wait('@getServices')
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // default button state
+      cy.getTestId('form-cancel').should('be.visible')
+      cy.getTestId('form-submit').should('be.visible')
+      cy.getTestId('form-cancel').should('be.enabled')
+      cy.getTestId('form-submit').should('be.disabled')
+      cy.getTestId('routing-rules-warning').should('not.exist')
+
+      // enables save when form has changes
+      cy.getTestId('route-form-service-id').click({ force: true })
+      cy.get("[data-testid='k-select-item-2']").click()
+      cy.getTestId('form-submit').should('be.enabled')
+      cy.getTestId('remove-methods').click()
+      cy.getTestId('remove-paths').first().click()
+      cy.getTestId('remove-paths').click()
+      cy.getTestId('remove-headers').click()
+      cy.getTestId('routing-rules-warning').should('be.visible')
+      cy.getTestId('form-submit').should('be.disabled')
+    })
+
+    it('should handle error state - failed to load route', () => {
+      interceptKonnectServices()
+
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/routes/*`,
+        },
+        {
+          statusCode: 404,
+          body: {},
+        },
+      ).as('getRoute')
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKonnect,
+          routeId: route.id,
+        },
+      })
+
+      cy.wait('@getRoute')
+      cy.wait('@getServices')
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // error state is displayed
+      cy.getTestId('form-fetch-error').should('be.visible')
+
+      // buttons and form hidden
+      cy.getTestId('form-cancel').should('not.exist')
+      cy.getTestId('form-submit').should('not.exist')
+      cy.get('.kong-ui-entities-route-form form').should('not.exist')
+    })
+
+    it('should allow exact match filtering of certs', () => {
+      interceptKonnectServices()
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKonnect,
+        },
+      })
+
+      cy.wait('@getServices')
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+      // search
+      cy.getTestId('route-form-service-id').should('be.visible')
+      cy.getTestId('route-form-service-id').type(services[1].name)
+
+      // click kselect item
+      cy.getTestId(`k-select-item-${services[1].id}`).should('be.visible')
+      cy.get(`[data-testid="k-select-item-${services[1].id}"] button`).click()
+      cy.getTestId('route-form-service-id').should('have.value', services[1].id)
+    })
+
+    it('should handle error state - failed to load services', () => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/services*`,
+        },
+        {
+          statusCode: 500,
+          body: {},
+        },
+      ).as('getServices')
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKonnect,
+        },
+      })
+
+      cy.wait('@getServices')
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+      cy.getTestId('form-error').should('be.visible')
+    })
+
+    it('should correctly render with all props and slot content', () => {
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKonnect,
+          serviceId: services[0].id,
+          hideSectionsInfo: true,
+          hideNameField: true,
+          showTagsFiledUnderAdvanced: true,
+        },
+        slots: {
+          'form-actions': '<button data-testid="slotted-cancel-button">Cancel</button><button data-testid="slotted-submit-button">Submit</button>',
+        },
+      })
+
+      cy.get('.kong-ui-entities-route-form').should('be.visible')
+      cy.get('.kong-ui-entities-route-form form').should('be.visible')
+
+      // name field should be hidden when hideNameField is true
+      cy.getTestId('route-form-name').should('not.exist')
+
+      // tags field should render under advanced fields
+      cy.getTestId('route-form-tags').should('not.be.visible')
+      cy.getTestId('k-collapse-trigger-content').click()
+      cy.getTestId('route-form-tags').should('be.visible')
+
+      // service id field should be hidden when serviceId is provided
+      cy.getTestId('route-form-service-id').should('not.exist')
+
+      // sections info should be hidden when hideSectionsInfo is true
+      cy.get('.form-section-info sticky').should('not.exist')
+
+      // default buttons should be replaced with slotted content
+      cy.getTestId('form-cancel').should('not.exist')
+      cy.getTestId('form-submit').should('not.exist')
+      cy.getTestId('slotted-cancel-button').should('be.visible')
+      cy.getTestId('slotted-submit-button').should('be.visible')
+    })
+
+    it('update event should be emitted when Route was edited', () => {
+      interceptKonnect()
+      interceptUpdate()
+
+      cy.mount(RouteForm, {
+        props: {
+          config: baseConfigKonnect,
+          routeId: route.id,
+          onUpdate: cy.spy().as('onUpdateSpy'),
+        },
+      }).then(({ wrapper }) => wrapper)
+        .as('vueWrapper')
+
+      cy.wait('@getRoute')
+      cy.getTestId('route-form-tags').clear()
+      cy.getTestId('route-form-tags').type('tag1,tag2')
+
+      cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(EntityBaseForm)
+        .vm.$emit('submit'))
+
+      cy.wait('@updateRoute')
+
+      cy.get('@onUpdateSpy').should('have.been.calledOnce')
+    })
+  })
+})
diff --git a/packages/entities/entities-routes/src/components/RouteForm.vue b/packages/entities/entities-routes/src/components/RouteForm.vue
new file mode 100644
index 0000000000..30b9db3f99
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteForm.vue
@@ -0,0 +1,1049 @@
+<template>
+  <div class="kong-ui-entities-route-form">
+    <EntityBaseForm
+      :can-submit="isFormValid && changesExist"
+      :config="config"
+      :edit-id="routeId"
+      :error-message="form.errorMessage || fetchServicesErrorMessage"
+      :fetch-url="fetchUrl"
+      :is-readonly="form.isReadonly"
+      @cancel="cancelHandler"
+      @fetch:error="fetchErrorHandler"
+      @fetch:success="updateFormValues"
+      @loading="loadingHandler"
+      @submit="saveFormData"
+    >
+      <EntityFormSection
+        v-if="showGeneralInfoSection"
+        :description="t('form.sections.general.description')"
+        :hide-info-header="hideSectionsInfo"
+        :title="t('form.sections.general.title')"
+      >
+        <KInput
+          v-if="!hideNameField"
+          v-model.trim="form.fields.name"
+          autocomplete="off"
+          data-testid="route-form-name"
+          :label="t('form.fields.name.label')"
+          :placeholder="t('form.fields.name.placeholder')"
+          :readonly="form.isReadonly"
+          type="text"
+        />
+        <div v-if="hideServiceField ? false : !serviceId">
+          <KSelect
+            v-model="form.fields.service_id"
+            appearance="select"
+            autosuggest
+            clearable
+            data-testid="route-form-service-id"
+            enable-filtering
+            :items="availableServices"
+            :label="t('form.fields.service_id.label')"
+            :loading="loadingServices"
+            :placeholder="t('form.fields.service_id.placeholder')"
+            :readonly="form.isReadonly"
+            reuse-item-template
+            width="100%"
+            @query-change="debouncedServicesQuery"
+          >
+            <template #loading>
+              <div>{{ t('actions.loading') }}</div>
+            </template>
+            <template #empty>
+              <div data-testid="no-search-results">
+                {{ t('search.no_results') }}
+              </div>
+            </template>
+            <template #selected-item-template="{ item }">
+              <span class="k-select-selected-item-label">{{ getSelectedService(item) }}</span>
+            </template>
+            <template #item-template="{ item }">
+              <div class="route-form-service-dropdown-item">
+                <span class="select-item-label">{{ item.name }}</span>
+                <span class="select-item-desc">{{ item.value }}</span>
+              </div>
+            </template>
+          </KSelect>
+        </div>
+        <KInput
+          v-if="!showTagsFiledUnderAdvanced"
+          v-model.trim="form.fields.tags"
+          autocomplete="off"
+          data-testid="route-form-tags"
+          :help="t('form.fields.tags.help')"
+          :label="t('form.fields.tags.label')"
+          :placeholder="t('form.fields.tags.placeholder')"
+          :readonly="form.isReadonly"
+          type="text"
+        />
+      </EntityFormSection>
+      <EntityFormSection
+        :description="t('form.sections.config.description')"
+        :hide-info-header="hideSectionsInfo"
+        :title="t('form.sections.config.title')"
+      >
+        <KSelect
+          v-model="form.fields.protocols"
+          appearance="select"
+          data-testid="route-form-protocols"
+          :items="protocols"
+          :label="t('form.fields.protocols.label')"
+          :label-attributes="{ info: t('form.fields.protocols.tooltip') }"
+          :readonly="form.isReadonly"
+          required
+          width="100%"
+        />
+        <KCard v-if="form.fields.protocols">
+          <template #title>
+            <div class="route-form-routing-rules-title-container">
+              <span
+                v-for="protocol in protocolsArr"
+                :key="protocol"
+                class="protocol-title"
+              >
+                {{ protocol.toUpperCase() }}
+              </span>
+              <span class="routing-rules-title">{{ t('form.sections.routingRules.title') }}</span>
+            </div>
+          </template>
+          <template #body>
+            <KAlert
+              v-if="showRoutingRulesWarning"
+              appearance="warning"
+              data-testid="routing-rules-warning"
+            >
+              <template #alertMessage>
+                <i18nT keypath="form.warning.rulesMessage">
+                  <template #protocol>
+                    <b>{{ protocolsLabels[form.fields.protocols] }}</b>
+                  </template>
+                  <template #routingRules>
+                    <i18nT :keypath="warningMessageRoutingRules[1] ? 'form.warning.multipleRules' : 'form.warning.singleRule'">
+                      <template #routingRules>
+                        <b>{{ warningMessageRoutingRules[0] }}</b>
+                      </template>
+                      <template #lastRoutingRule>
+                        <b>{{ warningMessageRoutingRules[1] }}</b>
+                      </template>
+                    </i18nT>
+                  </template>
+                </i18nT>
+              </template>
+            </KAlert>
+
+            <!-- Routing Rules Fields -->
+            <TransitionGroup name="appear">
+              <!-- paths -->
+              <RouteFormPathsFields
+                v-if="form.fields.paths"
+                key="paths-container"
+                v-model="form.fields.paths"
+                @add="handleAddRoutingRuleEntity(RoutingRulesEntities.PATHS)"
+                @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.PATHS, index)"
+              />
+
+              <!-- snis -->
+              <RouteFormSnisFields
+                v-if="form.fields.snis"
+                key="snis-container"
+                v-model="form.fields.snis"
+                @add="handleAddRoutingRuleEntity(RoutingRulesEntities.SNIS)"
+                @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.SNIS, index)"
+              />
+
+              <!-- hosts -->
+              <RouteFormHostsFields
+                v-if="form.fields.hosts"
+                key="hosts-container"
+                v-model="form.fields.hosts"
+                @add="handleAddRoutingRuleEntity(RoutingRulesEntities.HOSTS)"
+                @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.HOSTS, index)"
+              />
+
+              <!-- methods -->
+              <RouteFormMethodsFields
+                v-if="form.fields.methods"
+                key="methods-container"
+                v-model="form.fields.methods"
+                :custom-methods="customMethods"
+                @remove="handleRemoveRoutingRuleEntity(RoutingRulesEntities.METHODS)"
+                @update-custom-methods="(methods: string[]) => customMethods = methods"
+              />
+
+              <!-- headers -->
+              <RouteFormHeadersFields
+                v-if="form.fields.headers"
+                key="headers-container"
+                v-model="form.fields.headers"
+                @add="handleAddRoutingRuleEntity(RoutingRulesEntities.HEADERS)"
+                @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.HEADERS, index)"
+              />
+
+              <!-- sources -->
+              <RouteFormSourcesFields
+                v-if="form.fields.sources"
+                key="sources-container"
+                v-model="form.fields.sources"
+                @add="handleAddRoutingRuleEntity(RoutingRulesEntities.SOURCES)"
+                @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.SOURCES, index)"
+              />
+
+              <!-- destinations -->
+              <RouteFormDestinationsFields
+                v-if="form.fields.destinations"
+                key="destinations-container"
+                v-model="form.fields.destinations"
+                @add="handleAddRoutingRuleEntity(RoutingRulesEntities.DESTINATIONS)"
+                @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.DESTINATIONS, index)"
+              />
+            </TransitionGroup>
+
+            <!-- routing rules selector  -->
+            <div
+              v-if="displayRoutingRulesSelector"
+              class="route-form-routing-rules-selector-container"
+            >
+              <hr>
+              <div class="route-form-routing-rules-selector-options">
+                <ul>
+                  <li
+                    v-for="entity in routingRulesPerProtocolMap[form.fields.protocols]"
+                    :key="entity"
+                  >
+                    <label
+                      :aria-disabled="!!form.fields[entity as RoutingRuleEntity]"
+                      class="option"
+                      :class="{ 'is-selected': form.fields[entity as RoutingRuleEntity] }"
+                      :data-testid="`routing-rule-${entity}`"
+                      role="button"
+                      @click="handleAddRoutingRuleEntity(entity)"
+                    >
+                      {{ getRoutingRuleLabel(entity) }}
+                    </label>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </template>
+        </KCard>
+
+        <!-- Advanced Fields -->
+        <KCollapse
+          trigger-alignment="leading"
+          :trigger-label="t('form.viewAdvancedFields')"
+        >
+          <div class="route-form-fields-container route-form-advanced-fields-container">
+            <KSelect
+              v-if="form.fields.paths"
+              v-model="form.fields.path_handling"
+              appearance="select"
+              data-testid="route-form-path-handling"
+              :items="pathHandlingOptions"
+              :label="t('form.fields.path_handling.label')"
+              :label-attributes="{ info: t('form.fields.path_handling.tooltip') }"
+              :readonly="form.isReadonly"
+              width="100%"
+            />
+            <KSelect
+              v-model="form.fields.https_redirect_status_code"
+              appearance="select"
+              data-testid="route-form-http-redirect-status-code"
+              :items="httpsRedirectStatusCodes"
+              :label="t('form.fields.https_redirect_status_code.label')"
+              :readonly="form.isReadonly"
+              width="100%"
+            />
+            <KInput
+              v-model="form.fields.regex_priority"
+              autocomplete="off"
+              data-testid="route-form-regex-priority"
+              :label="t('form.fields.regex_priority.label')"
+              :readonly="form.isReadonly"
+              type="number"
+            />
+            <KInput
+              v-if="showTagsFiledUnderAdvanced"
+              v-model.trim="form.fields.tags"
+              autocomplete="off"
+              data-testid="route-form-tags"
+              :help="t('form.fields.tags.help')"
+              :label="t('form.fields.tags.label')"
+              :placeholder="t('form.fields.tags.placeholder')"
+              :readonly="form.isReadonly"
+              type="text"
+            />
+            <KCheckbox
+              v-if="isProtocolSelected(['http', 'https', 'ws', 'wss', 'tls', 'tcp', 'udp', 'tls_passthrough'])"
+              v-model="form.fields.strip_path"
+              data-testid="route-form-strip-path"
+              :label="t('form.fields.strip_path.label')"
+            />
+            <KCheckbox
+              v-model="form.fields.preserve_host"
+              data-testid="route-form-preserve-host"
+              :label="t('form.fields.preserve_host.label')"
+            />
+            <KCheckbox
+              v-model="form.fields.request_buffering"
+              data-testid="route-form-request-buffering"
+              :label="t('form.fields.request_buffering.label')"
+            />
+            <KCheckbox
+              v-model="form.fields.response_buffering"
+              data-testid="route-form-response-buffering"
+              :label="t('form.fields.response_buffering.label')"
+            />
+          </div>
+        </KCollapse>
+      </EntityFormSection>
+
+      <template #form-actions>
+        <slot
+          :can-submit="isFormValid && changesExist"
+          :cancel="cancelHandler"
+          name="form-actions"
+          :submit="saveFormData"
+        />
+      </template>
+    </EntityBaseForm>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  useAxios,
+  useErrors,
+  useDebouncedFilter,
+  useGatewayFeatureSupported,
+  EntityFormSection,
+  EntityBaseForm,
+  EntityBaseFormType,
+} from '@kong-ui-public/entities-shared'
+import composables from '../composables'
+import '@kong-ui-public/entities-shared/dist/style.css'
+import { computed, nextTick, onBeforeMount, onMounted, PropType, reactive, ref, watch } from 'vue'
+import {
+  KonnectRouteFormConfig,
+  KongManagerRouteFormConfig,
+  RouteStateFields,
+  RouteState,
+  RoutePayload,
+  RoutingRulesEntities,
+  RoutingRuleEntity,
+  Method,
+  HeaderFields,
+  MethodsFields,
+  Sources,
+  Destinations,
+  Headers,
+  Protocol,
+} from '../types'
+import { useRouter } from 'vue-router'
+import { AxiosError, AxiosResponse } from 'axios'
+import endpoints from '../routes-endpoints'
+import RouteFormPathsFields from './RouteFormPathsFields.vue'
+import RouteFormSnisFields from './RouteFormSnisFields.vue'
+import RouteFormHostsFields from './RouteFormHostsFields.vue'
+import RouteFormMethodsFields from './RouteFormMethodsFields.vue'
+import RouteFormHeadersFields from './RouteFormHeadersFields.vue'
+import RouteFormSourcesFields from './RouteFormSourcesFields.vue'
+import RouteFormDestinationsFields from './RouteFormDestinationsFields.vue'
+import { isRoutePayloadValid } from '../utilities'
+import { SelectItem } from '@kong/kongponents'
+
+// 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<KonnectRouteFormConfig | KongManagerRouteFormConfig>,
+    required: true,
+    validator: (config: KonnectRouteFormConfig | KongManagerRouteFormConfig): 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 routeId is provided, it will put the form in Edit mode instead of Create */
+  routeId: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  /** If valid serviceId is provided, don't show service select field */
+  serviceId: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  /** Whether show or hide EntityFormSection info column */
+  hideSectionsInfo: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  /** Whether show or hide Route name field */
+  hideNameField: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  /** Whether show or hide Service Select field */
+  hideServiceField: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  /** Show tags field under advance fields */
+  showTagsFiledUnderAdvanced: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'update', data: RoutePayload): void,
+  (e: 'error', error: AxiosError): void,
+  (e: 'loading', isLoading: boolean): void,
+  (e: 'model-updated', val: RoutePayload): void,
+}>()
+
+const { i18nT, i18n, i18n: { t } } = composables.useI18n()
+const protocolsLabels = i18n.source.form.protocols as Record<string, string>
+const router = useRouter()
+const { axiosInstance } = useAxios({
+  headers: props.config?.requestHeaders,
+})
+const { getMessageFromError } = useErrors()
+
+const showGeneralInfoSection = computed<boolean>(() => !(props.hideNameField && (props.hideServiceField || !!props.serviceId) && props.showTagsFiledUnderAdvanced))
+
+const getSelectedService = (item: any) => {
+  return item.name ? `${item.name} - ${item.value}` : item.value
+}
+
+const form = reactive<RouteState>({
+  fields: {
+    service_id: '',
+    name: '',
+    tags: '',
+    regex_priority: 0,
+    path_handling: 'v0',
+    preserve_host: false,
+    https_redirect_status_code: 426,
+    protocols: 'http,https',
+    request_buffering: true,
+    response_buffering: true,
+    strip_path: true,
+    ...(!props.routeId && { paths: [''] }),
+  },
+  isReadonly: false,
+  errorMessage: '',
+})
+const customMethods = ref<string[]>([''])
+
+const originalFields = reactive<RouteStateFields>({
+  service_id: '',
+  name: '',
+  tags: '',
+  regex_priority: 0,
+  path_handling: 'v0',
+  preserve_host: false,
+  https_redirect_status_code: 426,
+  protocols: 'http,https',
+  request_buffering: true,
+  response_buffering: true,
+  strip_path: true,
+})
+
+const initialRoutingRulesValues = {
+  [RoutingRulesEntities.PATHS]: [''] as string[],
+  [RoutingRulesEntities.SNIS]: [''] as string[],
+  [RoutingRulesEntities.HOSTS]: [''] as string[],
+  [RoutingRulesEntities.METHODS]: {
+    GET: false,
+    PUT: false,
+    POST: false,
+    PATCH: false,
+    DELETE: false,
+    OPTIONS: false,
+    HEAD: false,
+    CONNECT: false,
+    TRACE: false,
+    CUSTOM: false,
+  } as MethodsFields,
+  [RoutingRulesEntities.HEADERS]: [{ header: '', values: '' }] as HeaderFields[],
+  [RoutingRulesEntities.SOURCES]: [{ ip: '', port: null }] as unknown as Sources[],
+  [RoutingRulesEntities.DESTINATIONS]: [{ ip: '', port: null }] as unknown as Destinations[],
+}
+
+const isWsSupported = props.config.app === 'konnect' || useGatewayFeatureSupported({
+  gatewayInfo: props.config.gatewayInfo,
+  // 'ws' and 'wss' are not valid values for the protocol field in Gateway Community Edition or before Gateway Enterprise Edition 3.0
+  supportedRange: {
+    enterprise: ['3.0'],
+  },
+})
+
+const protocols = [
+  { label: t('form.protocols.grpc'), value: 'grpc' },
+  { label: t('form.protocols.grpcs'), value: 'grpcs' },
+  { label: t('form.protocols.grpc,grpcs'), value: 'grpc,grpcs' },
+  { label: t('form.protocols.http'), value: 'http' },
+  { label: t('form.protocols.https'), value: 'https' },
+  { label: t('form.protocols.http,https'), value: 'http,https' },
+  { label: t('form.protocols.tcp'), value: 'tcp' },
+  { label: t('form.protocols.tls'), value: 'tls' },
+  { label: t('form.protocols.tls,udp'), value: 'tls,udp' },
+  { label: t('form.protocols.tcp,udp'), value: 'tcp,udp' },
+  { label: t('form.protocols.tcp,tls'), value: 'tcp,tls' },
+  { label: t('form.protocols.tcp,tls,udp'), value: 'tcp,tls,udp' },
+  { label: t('form.protocols.tls_passthrough'), value: 'tls_passthrough' },
+  { label: t('form.protocols.udp'), value: 'udp' },
+  ...(
+    isWsSupported
+      ? [
+        { label: t('form.protocols.ws'), value: 'ws' },
+        { label: t('form.protocols.wss'), value: 'wss' },
+        { label: t('form.protocols.ws,wss'), value: 'ws,wss' },
+      ]
+      : []
+  ),
+]
+
+const pathHandlingOptions = [
+  { label: 'v0', value: 'v0' },
+  { label: 'v1', value: 'v1' },
+]
+
+const httpsRedirectStatusCodes = [
+  { label: '426', value: 426 },
+  { label: '301', value: 301 },
+  { label: '302', value: 302 },
+  { label: '307', value: 307 },
+  { label: '308', value: 308 },
+]
+
+const routingRulesPerProtocolMap: Record<string, string[]> = {
+  http: [RoutingRulesEntities.HOSTS, RoutingRulesEntities.METHODS, RoutingRulesEntities.PATHS, RoutingRulesEntities.HEADERS],
+  https: [RoutingRulesEntities.HOSTS, RoutingRulesEntities.METHODS, RoutingRulesEntities.PATHS, RoutingRulesEntities.HEADERS, RoutingRulesEntities.SNIS],
+  'http,https': [RoutingRulesEntities.HOSTS, RoutingRulesEntities.METHODS, RoutingRulesEntities.PATHS, RoutingRulesEntities.HEADERS, RoutingRulesEntities.SNIS],
+  grpc: [RoutingRulesEntities.HOSTS, RoutingRulesEntities.PATHS, RoutingRulesEntities.HEADERS],
+  grpcs: [RoutingRulesEntities.HOSTS, RoutingRulesEntities.PATHS, RoutingRulesEntities.HEADERS, RoutingRulesEntities.SNIS],
+  'grpc,grpcs': [RoutingRulesEntities.HOSTS, RoutingRulesEntities.PATHS, RoutingRulesEntities.HEADERS, RoutingRulesEntities.SNIS],
+  udp: [RoutingRulesEntities.SOURCES, RoutingRulesEntities.DESTINATIONS],
+  tls: [RoutingRulesEntities.SOURCES, RoutingRulesEntities.DESTINATIONS, RoutingRulesEntities.SNIS],
+  tcp: [RoutingRulesEntities.SOURCES, RoutingRulesEntities.DESTINATIONS],
+  'tls,udp': [RoutingRulesEntities.SOURCES, RoutingRulesEntities.DESTINATIONS, RoutingRulesEntities.SNIS],
+  'tcp,udp': [RoutingRulesEntities.SOURCES, RoutingRulesEntities.DESTINATIONS],
+  'tcp,tls': [RoutingRulesEntities.SOURCES, RoutingRulesEntities.DESTINATIONS, RoutingRulesEntities.SNIS],
+  'tcp,tls,udp': [RoutingRulesEntities.SOURCES, RoutingRulesEntities.DESTINATIONS, RoutingRulesEntities.SNIS],
+  tls_passthrough: [RoutingRulesEntities.SNIS],
+  ws: [RoutingRulesEntities.HOSTS, RoutingRulesEntities.PATHS, RoutingRulesEntities.HEADERS],
+  wss: [RoutingRulesEntities.HOSTS, RoutingRulesEntities.PATHS, RoutingRulesEntities.HEADERS, RoutingRulesEntities.SNIS],
+  'ws,wss': [RoutingRulesEntities.HOSTS, RoutingRulesEntities.PATHS, RoutingRulesEntities.HEADERS, RoutingRulesEntities.SNIS],
+}
+
+const formType = computed((): EntityBaseFormType => props.routeId
+  ? EntityBaseFormType.Edit
+  : EntityBaseFormType.Create)
+
+const fetchUrl = computed<string>(() => endpoints.form[props.config?.app]?.fetch?.[props.serviceId ? 'forGatewayService' : 'all'].replace(/{serviceId}/gi, props.serviceId || ''))
+
+const cancelHandler = (): void => {
+  router.push(props.config?.cancelRoute)
+}
+
+const loadingHandler = (val: boolean): void => {
+  emit('loading', val)
+}
+
+const fetchErrorHandler = (err: AxiosError): void => {
+  emit('error', err)
+}
+
+const setMethods = (methods: Method[]): void => {
+  form.fields.methods = initialRoutingRulesValues[RoutingRulesEntities.METHODS]
+  methods.forEach(method => {
+    if (form.fields.methods) {
+      form.fields.methods[method] = true
+    }
+  })
+}
+
+const formatHeaders = (items: Headers): HeaderFields[] => {
+  return Object.entries(items).map(item => {
+    return { header: item[0], values: item[1]?.join() }
+  })
+}
+
+const isProtocolSelected = (protocols: string[]): boolean => {
+  return protocols.some(protocol => form.fields.protocols.includes(protocol))
+}
+
+// removes any empty values left behind by empty fields on the form
+const cleanDataArr = (entity: string, originalData: any) => {
+  if (entity === RoutingRulesEntities.PATHS || entity === RoutingRulesEntities.HOSTS || entity === RoutingRulesEntities.SNIS) {
+    return [...originalData].filter((item: string) => !!item)
+  } else if (entity === RoutingRulesEntities.SOURCES || entity === RoutingRulesEntities.DESTINATIONS) {
+    return [...originalData]
+      .filter((item: Sources | Destinations) => !!item.ip)
+      .map((item: Sources | Destinations) => ({
+        ...item,
+        port: !item.port && item.port !== 0 ? null : item.port,
+      }))
+  } else if (entity === RoutingRulesEntities.HEADERS) {
+    return [...originalData].filter((item: Headers) => !!item.header)
+  }
+}
+
+const getHeaders = (): Headers | null => {
+  const headers: HeaderFields[] = cleanDataArr(RoutingRulesEntities.HEADERS, form.fields.headers || []) || initialRoutingRulesValues[RoutingRulesEntities.HEADERS]
+  if (headers.length === 0) {
+    return null
+  }
+  const headerObj = {} as Headers
+
+  headers.forEach(item => {
+    headerObj[item.header] = item.values.split(',')
+  })
+
+  return headerObj
+}
+
+const handleAddRoutingRuleEntity = (entity: string): void => {
+  if (entity === RoutingRulesEntities.PATHS) {
+    if (!form.fields.paths) {
+      // spread objects and arrays to avoid mutating the original values
+      form.fields.paths = [...initialRoutingRulesValues[RoutingRulesEntities.PATHS]]
+    } else {
+      form.fields.paths.push([...initialRoutingRulesValues[RoutingRulesEntities.PATHS]][0])
+    }
+  }
+
+  if (entity === RoutingRulesEntities.SNIS) {
+    if (!form.fields.snis) {
+      form.fields.snis = [...initialRoutingRulesValues[RoutingRulesEntities.SNIS]]
+    } else {
+      form.fields.snis.push([...initialRoutingRulesValues[RoutingRulesEntities.SNIS]][0])
+    }
+  }
+
+  if (entity === RoutingRulesEntities.HOSTS) {
+    if (!form.fields.hosts) {
+      form.fields.hosts = [...initialRoutingRulesValues[RoutingRulesEntities.HOSTS]]
+    } else {
+      form.fields.hosts.push([...initialRoutingRulesValues[RoutingRulesEntities.HOSTS]][0])
+    }
+  }
+
+  if (entity === RoutingRulesEntities.METHODS) {
+    if (!form.fields.methods) {
+      form.fields.methods = { ...initialRoutingRulesValues[RoutingRulesEntities.METHODS] }
+    }
+  }
+
+  if (entity === RoutingRulesEntities.HEADERS) {
+    if (!form.fields.headers) {
+      form.fields.headers = [{ ...initialRoutingRulesValues[RoutingRulesEntities.HEADERS][0] }]
+    } else {
+      form.fields.headers.push({ ...initialRoutingRulesValues[RoutingRulesEntities.HEADERS][0] })
+    }
+  }
+
+  if (entity === RoutingRulesEntities.SOURCES) {
+    if (!form.fields.sources) {
+      form.fields.sources = [{ ...initialRoutingRulesValues[RoutingRulesEntities.SOURCES][0] }]
+    } else {
+      form.fields.sources.push({ ...initialRoutingRulesValues[RoutingRulesEntities.SOURCES][0] })
+    }
+  }
+
+  if (entity === RoutingRulesEntities.DESTINATIONS) {
+    if (!form.fields.destinations) {
+      form.fields.destinations = [{ ...initialRoutingRulesValues[RoutingRulesEntities.DESTINATIONS][0] }]
+    } else {
+      form.fields.destinations.push({ ...initialRoutingRulesValues[RoutingRulesEntities.DESTINATIONS][0] })
+    }
+  }
+}
+
+// display or hide routing rules selector
+const displayRoutingRulesSelector = computed(() => {
+  return routingRulesPerProtocolMap[form.fields.protocols].filter(protocol => !form.fields[protocol as RoutingRuleEntity])
+})
+
+// removes rule entity from the form
+// or particular entry from particular rule entity if index is provided
+const handleRemoveRoutingRuleEntity = async (entity: string, index?: number): Promise<void> => {
+  if (typeof index !== 'undefined') {
+    let items: any = []
+
+    items = form.fields[entity as RoutingRuleEntity]
+
+    items.splice(index, 1)
+
+    if (items.length) {
+      form.fields[entity as RoutingRuleEntity] = items
+
+      // skip removing rule entity if it's not empty
+      return
+    }
+  }
+
+  await nextTick(() => {
+    delete form.fields[entity as RoutingRuleEntity]
+
+    if (entity === RoutingRulesEntities.METHODS) {
+      customMethods.value = ['']
+    }
+  })
+}
+
+const getRoutingRuleLabel = (entity: string): string => {
+  const formFields = i18n.source.form.fields as Record<string, any>
+
+  return formFields[entity]?.label || ''
+}
+
+watch(() => form.fields.protocols, () => {
+  sanitizeRoutingRulesEntities()
+})
+
+// removes objects for routing rules that are not configurable for the chosen protocols
+const sanitizeRoutingRulesEntities = () => {
+  const allRoutingRulesEntities = Object.keys(initialRoutingRulesValues)
+  const protocolEntities = routingRulesPerProtocolMap[form.fields.protocols]
+  const routingRulesEntities = Object.keys(form.fields).filter(element => allRoutingRulesEntities.includes(element))
+
+  routingRulesEntities.forEach(entity => {
+    if (!protocolEntities.includes(entity)) {
+      handleRemoveRoutingRuleEntity(entity)
+    }
+  })
+}
+
+// returns methods formatted in the payload format, except for custom methods (those are handled separately)
+const selectedMethods = computed((): Method[] => {
+  const methods: Method[] = []
+
+  if (form.fields.methods) {
+    Object.entries(form.fields.methods).forEach(([key, value]) => {
+      if (value) {
+        methods.push(key as Method)
+      }
+    })
+  }
+
+  return methods
+})
+
+const protocolsArr = computed((): string[] => form.fields.protocols?.split(',') || [])
+
+const showRoutingRulesWarning = computed((): boolean => {
+  const allRoutingRulesEntities = Object.keys(initialRoutingRulesValues)
+  const routingRulesEntities = Object.keys(form.fields).filter(element => allRoutingRulesEntities.includes(element))
+
+  return !routingRulesEntities.length
+})
+const warningMessageRoutingRules = computed((): string[] => {
+  if (isProtocolSelected(['tls_passthrough'])) {
+    return [getRoutingRuleLabel(RoutingRulesEntities.SNIS)]
+  }
+
+  const protocolEntitiesLabels = routingRulesPerProtocolMap[form.fields.protocols].map(entity => getRoutingRuleLabel(entity))
+  return [[...protocolEntitiesLabels].splice(0, protocolEntitiesLabels.length - 1).join(', '), protocolEntitiesLabels[protocolEntitiesLabels.length - 1]]
+})
+
+const updateFormValues = (data: Record<string, any>): void => {
+  if (data?.service?.id) {
+    form.fields.service_id = data.service.id
+  }
+
+  form.fields.name = data?.name || ''
+
+  const tags = data?.tags || []
+  form.fields.tags = tags?.join(', ') || ''
+
+  form.fields.regex_priority = data?.regex_priority || 0
+  form.fields.path_handling = data?.path_handling || 'v0'
+  form.fields.preserve_host = typeof data?.preserve_host === 'undefined' ? false : data?.preserve_host
+  form.fields.https_redirect_status_code = data?.https_redirect_status_code || 426
+
+  if (data?.protocols?.length) {
+    if (data.protocols.length > 1) {
+      form.fields.protocols = data.protocols.join()
+    } else {
+      form.fields.protocols = data.protocols[0]
+    }
+  }
+
+  form.fields.request_buffering = typeof data?.request_buffering === 'undefined' ? true : data?.request_buffering
+  form.fields.response_buffering = typeof data?.response_buffering === 'undefined' ? true : data?.response_buffering
+
+  form.fields.strip_path = typeof data?.strip_path === 'undefined' ? true : data?.strip_path
+
+  if (data?.paths) {
+    form.fields.paths = data.paths
+  }
+
+  if (data?.snis) {
+    form.fields.snis = data.snis
+  }
+
+  if (data?.hosts) {
+    form.fields.hosts = data.hosts
+  }
+
+  if (data?.methods) {
+    setMethods(data.methods)
+  }
+
+  if (data?.headers) {
+    form.fields.headers = formatHeaders(data.headers)
+  }
+
+  if (data?.sources) {
+    form.fields.sources = data.sources
+  }
+
+  if (data?.destinations) {
+    form.fields.destinations = data.destinations
+  }
+
+  // copy form.fields to avoid referencing the original object in originalFields
+  Object.assign(originalFields, JSON.parse(JSON.stringify(form.fields)))
+}
+
+/**
+ * Is the form submit button enabled?
+ */
+const isFormValid = computed((): boolean => {
+  const hosts = form.fields.hosts ? !!form.fields.hosts.filter(Boolean).length : null
+  const paths = form.fields.paths ? !!form.fields.paths.filter(Boolean).length : null
+  const headers = form.fields.headers ? form.fields.headers.some(({ header }) => !!header) : null
+  const snis = form.fields.snis ? !!form.fields.snis.filter(Boolean).length : null
+  const destinations = form.fields.destinations ? form.fields.destinations.some(({ ip }) => !!ip) : null
+  const sources = form.fields.sources ? form.fields.sources.some(({ ip }) => !!ip) : null
+  const hasCustomMethod = form.fields.methods?.CUSTOM
+  const methods = hasCustomMethod ? customMethods.value.some(item => !!item) : Object.values(form.fields.methods || {}).includes(true)
+
+  return !!form.fields.protocols && ((isProtocolSelected(['http']) && !!(hosts || methods || paths || headers)) ||
+    (isProtocolSelected(['https']) && !!(hosts || methods || paths || headers || snis)) ||
+    (isProtocolSelected(['grpc']) && !!(hosts || paths || headers)) ||
+    (isProtocolSelected(['grpcs', 'wss']) && !!(hosts || paths || headers || snis)) ||
+    (isProtocolSelected(['udp', 'tls']) && !!(destinations || sources || snis)) ||
+    (isProtocolSelected(['tcp']) && !!(destinations || sources)) ||
+    (isProtocolSelected(['tls_passthrough']) && !!snis) ||
+    (isProtocolSelected(['ws']) && !!(hosts || paths || headers)))
+})
+const changesExist = computed((): boolean => JSON.stringify(form.fields) !== JSON.stringify(originalFields))
+
+/* ---------------
+ * Saving
+ * ---------------
+ */
+
+/**
+ * Build the submit URL
+ */
+const submitUrl = computed<string>(() => {
+  let url = `${props.config.apiBaseUrl}${endpoints.form[props.config.app][formType.value][props.serviceId ? 'forGatewayService' : 'all']}`
+
+  if (props.config.app === 'konnect') {
+    url = url
+      .replace(/{controlPlaneId}/gi, props.config?.controlPlaneId || '')
+      .replace(/{serviceId}/gi, props.serviceId || '')
+  } else if (props.config.app === 'kongManager') {
+    url = url
+      .replace(/\/{workspace}/gi, props.config?.workspace ? `/${props.config.workspace}` : '')
+      .replace(/{serviceId}/gi, props.serviceId || '')
+  }
+
+  // Always replace the id when editing
+  url = url.replace(/{id}/gi, props.routeId)
+
+  return url
+})
+
+watch(() => form.fields, () => {
+  emit('model-updated', getPayload())
+}, { deep: true })
+
+const getArrPayload = (arr?: any[]) => arr?.length ? arr : null
+
+const getPayload = (serviceId?: string): RoutePayload => {
+  const payload: RoutePayload = {
+    service: (form.fields.service_id || serviceId) ? { id: serviceId || form.fields.service_id } : null,
+    ...(!props.hideNameField && { name: form.fields.name || null }),
+    paths: getArrPayload(cleanDataArr(RoutingRulesEntities.PATHS, form.fields.paths || [])),
+    snis: getArrPayload(cleanDataArr(RoutingRulesEntities.SNIS, form.fields.snis || [])),
+    hosts: getArrPayload(cleanDataArr(RoutingRulesEntities.HOSTS, form.fields.hosts || [])),
+    methods: null,
+    headers: getHeaders(),
+    sources: getArrPayload(cleanDataArr(RoutingRulesEntities.SOURCES, form.fields.sources || [])),
+    destinations: getArrPayload(cleanDataArr(RoutingRulesEntities.DESTINATIONS, form.fields.destinations || [])),
+    tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '')
+      .trim())?.filter((tag: string) => tag !== ''),
+    regex_priority: Number(form.fields.regex_priority),
+    path_handling: form.fields.path_handling,
+    strip_path: isProtocolSelected(['grpc', 'gprcs']) ? false : form.fields.strip_path,
+    preserve_host: form.fields.preserve_host,
+    https_redirect_status_code: form.fields.https_redirect_status_code,
+    protocols: form.fields.protocols.split(',') as Protocol[],
+    request_buffering: form.fields.request_buffering,
+    response_buffering: form.fields.response_buffering,
+  }
+
+  if (selectedMethods.value?.length) {
+    payload.methods = [...selectedMethods.value]
+
+    // handle custom method input
+    // add any custom methods from input field, avoid duplicate
+
+    if (selectedMethods.value?.includes('CUSTOM')) {
+      const customMethodIndex = payload.methods.indexOf('CUSTOM')
+      if (customMethodIndex !== -1) {
+        payload.methods.splice(customMethodIndex, 1)
+      }
+
+      customMethods.value.forEach(method => {
+        if (method && payload.methods && !payload.methods?.includes(method)) {
+          payload.methods.push(method.toUpperCase())
+        }
+      })
+    }
+  }
+
+  return payload
+}
+
+const saveFormData = async (payload?: RoutePayload): Promise<void> => {
+  const validPayload: RoutePayload = (payload && isRoutePayloadValid(payload)) ? payload : getPayload()
+
+  try {
+    form.isReadonly = true
+
+    let response: AxiosResponse | undefined
+
+    if (formType.value === 'create') {
+      response = await axiosInstance.post(submitUrl.value, validPayload)
+    } else if (formType.value === 'edit') {
+      response = props.config?.app === 'konnect'
+        ? await axiosInstance.put(submitUrl.value, validPayload)
+        : await axiosInstance.patch(submitUrl.value, validPayload)
+    }
+
+    updateFormValues(response?.data)
+
+    emit('update', response?.data)
+  } catch (error: any) {
+    form.errorMessage = getMessageFromError(error)
+    emit('error', error as AxiosError)
+  } finally {
+    form.isReadonly = false
+  }
+}
+
+/**
+ * Services Handling
+ */
+
+const {
+  debouncedQueryChange: debouncedServicesQuery,
+  loading: loadingServices,
+  error: servicesFetchError,
+  loadItems: loadServices,
+  results: servicesResults,
+} = useDebouncedFilter(props.config, endpoints.form[props.config.app].services, undefined, {
+  fetchedItemsKey: 'data',
+  searchKeys: ['id', 'name'],
+})
+
+const fetchServicesErrorMessage = computed((): string => servicesFetchError.value ? t('errors.services.fetch') : '')
+
+const availableServices = computed((): SelectItem[] => servicesResults.value?.map(el => ({ label: el.id, name: el.name, value: el.id })))
+
+onBeforeMount(async () => {
+  if (!props.hideServiceField && !props.serviceId) {
+    // load services for filtering
+    await loadServices()
+  } else {
+    form.fields.service_id = props.serviceId
+  }
+})
+
+onMounted(() => {
+  emit('model-updated', getPayload())
+})
+
+defineExpose({ saveFormData, getPayload })
+</script>
+
+<style lang="scss">
+.appear-enter-active {
+  transition: all 0.5s ease;
+}
+.appear-enter-from,
+.appear-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>
+
+<style lang="scss" scoped>
+@import '../styles/mixins';
+
+.kong-ui-entities-route-form {
+  width: 100%;
+
+  .route-form {
+    &-service-dropdown-item {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-routing-rules-title-container {
+      display: flex;
+      justify-content: center;
+
+      .protocol-title {
+        font-size: $kui_font_size_40;
+
+        &:not(:first-child) {
+          &::before {
+            content: '/';
+            margin-right: $kui_space_40;
+            padding-left: $kui_space_40;
+          }
+        }
+      }
+      .routing-rules-title {
+        font-size: $kui_font_size_40;
+        margin-left: $kui_space_40;
+      }
+    }
+
+    &-routing-rules-selector {
+      @include routing-rules-selector;
+    }
+
+    &-advanced-fields-container {
+      margin-top: $kui_space_80;
+    }
+
+    &-fields-container {
+      > * {
+        &:not(:first-child) {
+          margin-top: $kui_space_80;
+        }
+      }
+    }
+  }
+  .k-select-selected-item-label {
+    margin-left: 30px;
+  }
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteFormDestinationsFields.vue b/packages/entities/entities-routes/src/components/RouteFormDestinationsFields.vue
new file mode 100644
index 0000000000..6e96dfaa84
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormDestinationsFields.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="routing-rule-container">
+    <hr>
+    <KLabel :info="t('form.fields.destinations.tooltip')">
+      {{ t('form.fields.destinations.label') }}
+    </KLabel>
+    <TransitionGroup name="appear">
+      <div
+        v-for="_, index in fieldsValue"
+        :key="index"
+        class="routing-rule-input"
+      >
+        <KInput
+          v-model.trim="fieldsValue[index].ip"
+          :data-testid="`route-form-destinations-ip-input-${index + 1}`"
+          :placeholder="t('form.fields.destinations.ip.placeholder')"
+        />
+        <KInput
+          v-model.number="fieldsValue[index].port"
+          :data-testid="`route-form-destinations-port-input-${index + 1}`"
+          max="65535"
+          min="0"
+          :placeholder="t('form.fields.destinations.port.placeholder')"
+          type="number"
+        />
+        <RoutingRulesEntitiesControls
+          :is-add-disabled="index !== fieldsValue.length - 1"
+          :routing-rules-entity="RoutingRulesEntities.DESTINATIONS"
+          @add="$emit('add')"
+          @remove="$emit('remove', index)"
+        />
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } from 'vue'
+import { RoutingRulesEntities, Destinations } from '../types'
+import composables from '../composables'
+import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
+
+/** Local types, not exported
+ * Same pattern used other fields components
+ */
+type FieldsValue = Destinations[]
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<FieldsValue>,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'add'): void,
+  (e: 'remove', index: number): void,
+  (e: 'update:modelValue', value: FieldsValue): void,
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const fieldsValue = ref<FieldsValue>([])
+
+watch(props.modelValue, (value) => {
+  fieldsValue.value = [...value]
+}, { immediate: true, deep: true })
+
+watch(fieldsValue, (value) => {
+  emit('update:modelValue', value)
+}, { deep: true })
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/mixins';
+
+.routing-rule {
+  @include routing-rule;
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteFormHeadersFields.vue b/packages/entities/entities-routes/src/components/RouteFormHeadersFields.vue
new file mode 100644
index 0000000000..fab9093164
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormHeadersFields.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="routing-rule-container">
+    <hr>
+    <KLabel :info="t('form.fields.headers.tooltip')">
+      {{ t('form.fields.headers.label') }}
+    </KLabel>
+    <TransitionGroup name="appear">
+      <div
+        v-for="_, index in fieldsValue"
+        :key="index"
+        class="routing-rule-input"
+      >
+        <KInput
+          v-model.trim="fieldsValue[index].header"
+          :data-testid="`route-form-headers-name-input-${index + 1}`"
+          :placeholder="t('form.fields.headers.name.placeholder')"
+        />
+        <KInput
+          v-model.trim="fieldsValue[index].values"
+          :data-testid="`route-form-headers-values-input-${index + 1}`"
+          :placeholder="t('form.fields.headers.values.placeholder')"
+        />
+        <RoutingRulesEntitiesControls
+          :is-add-disabled="index !== fieldsValue.length - 1"
+          :routing-rules-entity="RoutingRulesEntities.HEADERS"
+          @add="$emit('add')"
+          @remove="$emit('remove', index)"
+        />
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } from 'vue'
+import { RoutingRulesEntities, HeaderFields } from '../types'
+import composables from '../composables'
+import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
+
+/** Local types, not exported
+ * Same pattern used other fields components
+ */
+type FieldsValue = HeaderFields[]
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<FieldsValue>,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'add'): void,
+  (e: 'remove', index: number): void,
+  (e: 'update:modelValue', value: FieldsValue): void,
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const fieldsValue = ref<FieldsValue>([])
+
+watch(props.modelValue, (value) => {
+  fieldsValue.value = [...value]
+}, { immediate: true, deep: true })
+
+watch(fieldsValue, (value) => {
+  emit('update:modelValue', value)
+}, { deep: true })
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/mixins';
+
+.routing-rule {
+  @include routing-rule;
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteFormHostsFields.vue b/packages/entities/entities-routes/src/components/RouteFormHostsFields.vue
new file mode 100644
index 0000000000..8d1551a774
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormHostsFields.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="routing-rule-container">
+    <hr>
+    <KLabel :info="t('form.fields.hosts.tooltip')">
+      {{ t('form.fields.hosts.label') }}
+    </KLabel>
+    <TransitionGroup name="appear">
+      <div
+        v-for="_, index in fieldsValue"
+        :key="index"
+        class="routing-rule-input"
+      >
+        <KInput
+          v-model.trim="fieldsValue[index]"
+          :data-testid="`route-form-hosts-input-${index + 1}`"
+          :placeholder="t('form.fields.hosts.placeholder')"
+        />
+        <RoutingRulesEntitiesControls
+          :is-add-disabled="index !== fieldsValue.length - 1"
+          :routing-rules-entity="RoutingRulesEntities.HOSTS"
+          @add="$emit('add')"
+          @remove="$emit('remove', index)"
+        />
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } from 'vue'
+import { RoutingRulesEntities } from '../types'
+import composables from '../composables'
+import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
+
+/** Local types, not exported
+ * Same pattern used other fields components
+ */
+type FieldsValue = Array<string>
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<FieldsValue>,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'add'): void,
+  (e: 'remove', index: number): void,
+  (e: 'update:modelValue', value: FieldsValue): void,
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const fieldsValue = ref<FieldsValue>([])
+
+watch(props.modelValue, (value) => {
+  fieldsValue.value = [...value]
+}, { immediate: true, deep: true })
+
+watch(fieldsValue, (value) => {
+  emit('update:modelValue', value)
+}, { deep: true })
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/mixins';
+
+.routing-rule {
+  @include routing-rule;
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue b/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
new file mode 100644
index 0000000000..83a1d08e22
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormMethodsFields.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="routing-rule-container">
+    <hr>
+    <KLabel>
+      {{ t('form.fields.methods.label') }}
+    </KLabel>
+    <div class="routing-rule-input">
+      <div class="methods-input">
+        <KMethodBadge
+          v-for="method in Object.keys(fieldsValue)"
+          :key="method"
+          v-model="fieldsValue[method]"
+          :data-testid="`${method.toLowerCase()}-method-toggle`"
+          is-toggle
+          :label="MethodsArray.includes(method.toLowerCase() as Method) ? '' : method"
+          :method="(MethodsArray.includes(method.toLowerCase() as Method) ? method.toLowerCase() as Method : 'custom')"
+        />
+      </div>
+      <KButton
+        appearance="btn-link"
+        class="remove-button"
+        data-testid="remove-methods"
+        @click="$emit('remove')"
+      >
+        <template #icon>
+          <KIcon icon="trash" />
+        </template>
+      </KButton>
+    </div>
+
+    <!-- custom methods -->
+    <div
+      v-if="fieldsValue.CUSTOM"
+      class="routing-rule-container"
+    >
+      <KLabel :info="t('form.fields.methods.custom.tooltip')">
+        {{ t('form.fields.methods.custom.label') }}
+      </KLabel>
+      <TransitionGroup name="appear">
+        <div
+          v-for="_, index in customMethodsValue"
+          :key="index"
+          class="routing-rule-input"
+        >
+          <KInput
+            v-model.trim="customMethodsValue[index]"
+            :data-testid="`route-form-custom-method-input-${index + 1}`"
+            :placeholder="t('form.fields.methods.custom.placeholder')"
+          />
+          <RoutingRulesEntitiesControls
+            :is-add-disabled="index !== customMethodsValue.length - 1"
+            :routing-rules-entity="RoutingRulesEntities.CUSTOM_METHOD"
+            @add="customMethodsValue.push('')"
+            @remove="handleRemoveCustomMethod(index)"
+          />
+        </div>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } from 'vue'
+import { RoutingRulesEntities, MethodsFields } from '../types'
+import composables from '../composables'
+import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
+import { Method, MethodsArray } from '@kong/kongponents'
+
+/** Local types, not exported
+ * Same pattern used other fields components
+ */
+type FieldsValue = MethodsFields
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<FieldsValue>,
+    required: true,
+  },
+  customMethods: {
+    type: Array as PropType<Array<string>>,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'add'): void,
+  (e: 'remove', index: number): void,
+  (e: 'update:modelValue', value: FieldsValue): void,
+  (e: 'update-custom-methods', value: Array<string>): void,
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const fieldsValue = ref<FieldsValue>({})
+const customMethodsValue = ref<Array<string>>([...props.customMethods])
+
+const handleRemoveCustomMethod = (index: number) => {
+  if (customMethodsValue.value.length === 1) {
+    customMethodsValue.value[0] = ''
+  } else {
+    customMethodsValue.value.splice(index, 1)
+  }
+}
+
+watch(props.modelValue, (value) => {
+  fieldsValue.value = { ...value }
+}, { immediate: true, deep: true })
+
+watch(fieldsValue, (value) => {
+  emit('update:modelValue', value)
+}, { deep: true })
+
+watch(customMethodsValue, (value) => {
+  emit('update-custom-methods', value)
+}, { deep: true })
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/mixins';
+
+.routing-rule {
+  @include routing-rule;
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteFormPathsFields.vue b/packages/entities/entities-routes/src/components/RouteFormPathsFields.vue
new file mode 100644
index 0000000000..4cbaca6188
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormPathsFields.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="routing-rule-container">
+    <KLabel>{{ t('form.fields.paths.label') }}</KLabel>
+    <TransitionGroup name="appear">
+      <div
+        v-for="_, index in fieldsValue"
+        :key="index"
+        class="routing-rule-input"
+      >
+        <KInput
+          v-model.trim="fieldsValue[index]"
+          :data-testid="`route-form-paths-input-${index + 1}`"
+          :placeholder="t('form.fields.paths.placeholder')"
+        />
+        <RoutingRulesEntitiesControls
+          :is-add-disabled="index !== fieldsValue.length - 1"
+          :routing-rules-entity="RoutingRulesEntities.PATHS"
+          @add="$emit('add')"
+          @remove="$emit('remove', index)"
+        />
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } from 'vue'
+import { RoutingRulesEntities } from '../types'
+import composables from '../composables'
+import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
+
+/** Local types, not exported
+ * Same pattern used other fields components
+ */
+type FieldsValue = Array<string>
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<FieldsValue>,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'add'): void,
+  (e: 'remove', index: number): void,
+  (e: 'update:modelValue', value: FieldsValue): void,
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const fieldsValue = ref<FieldsValue>([])
+
+watch(props.modelValue, (value) => {
+  fieldsValue.value = [...value]
+}, { immediate: true, deep: true })
+
+watch(fieldsValue, (value) => {
+  emit('update:modelValue', value)
+}, { deep: true })
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/mixins';
+
+.routing-rule {
+  @include routing-rule;
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteFormSnisFields.vue b/packages/entities/entities-routes/src/components/RouteFormSnisFields.vue
new file mode 100644
index 0000000000..591a7d3c5e
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormSnisFields.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="routing-rule-container">
+    <hr>
+    <KLabel :info="t('form.fields.snis.tooltip')">
+      {{ t('form.fields.snis.label') }}
+    </KLabel>
+    <TransitionGroup name="appear">
+      <div
+        v-for="_, index in fieldsValue"
+        :key="index"
+        class="routing-rule-input"
+      >
+        <KInput
+          v-model.trim="fieldsValue[index]"
+          :data-testid="`route-form-snis-input-${index + 1}`"
+          :placeholder="t('form.fields.snis.placeholder')"
+        />
+        <RoutingRulesEntitiesControls
+          :is-add-disabled="index !== fieldsValue.length - 1"
+          :routing-rules-entity="RoutingRulesEntities.SNIS"
+          @add="$emit('add')"
+          @remove="$emit('remove', index)"
+        />
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } from 'vue'
+import { RoutingRulesEntities } from '../types'
+import composables from '../composables'
+import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
+
+/** Local types, not exported
+ * Same pattern used other fields components
+ */
+type FieldsValue = Array<string>
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<FieldsValue>,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'add'): void,
+  (e: 'remove', index: number): void,
+  (e: 'update:modelValue', value: FieldsValue): void,
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const fieldsValue = ref<FieldsValue>([])
+
+watch(props.modelValue, (value) => {
+  fieldsValue.value = [...value]
+}, { immediate: true, deep: true })
+
+watch(fieldsValue, (value) => {
+  emit('update:modelValue', value)
+}, { deep: true })
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/mixins';
+
+.routing-rule {
+  @include routing-rule;
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteFormSourcesFields.vue b/packages/entities/entities-routes/src/components/RouteFormSourcesFields.vue
new file mode 100644
index 0000000000..ec9f66e925
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormSourcesFields.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="routing-rule-container">
+    <hr>
+    <KLabel :info="t('form.fields.sources.tooltip')">
+      {{ t('form.fields.sources.label') }}
+    </KLabel>
+    <TransitionGroup name="appear">
+      <div
+        v-for="_, index in fieldsValue"
+        :key="index"
+        class="routing-rule-input"
+      >
+        <KInput
+          v-model.trim="fieldsValue[index].ip"
+          :data-testid="`route-form-sources-ip-input-${index + 1}`"
+          :placeholder="t('form.fields.sources.ip.placeholder')"
+        />
+        <KInput
+          v-model.number="fieldsValue[index].port"
+          :data-testid="`route-form-sources-port-input-${index + 1}`"
+          max="65535"
+          min="0"
+          :placeholder="t('form.fields.sources.port.placeholder')"
+          type="number"
+        />
+        <RoutingRulesEntitiesControls
+          :is-add-disabled="index !== fieldsValue.length - 1"
+          :routing-rules-entity="RoutingRulesEntities.SOURCES"
+          @add="$emit('add')"
+          @remove="$emit('remove', index)"
+        />
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } from 'vue'
+import { RoutingRulesEntities, Sources } from '../types'
+import composables from '../composables'
+import RoutingRulesEntitiesControls from './RoutingRulesEntitiesControls.vue'
+
+/** Local types, not exported
+ * Same pattern used other fields components
+ */
+type FieldsValue = Sources[]
+
+const props = defineProps({
+  modelValue: {
+    type: Array as PropType<FieldsValue>,
+    required: true,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'add'): void,
+  (e: 'remove', index: number): void,
+  (e: 'update:modelValue', value: FieldsValue): void,
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const fieldsValue = ref<FieldsValue>([])
+
+watch(props.modelValue, (value) => {
+  fieldsValue.value = [...value]
+}, { immediate: true, deep: true })
+
+watch(fieldsValue, (value) => {
+  emit('update:modelValue', value)
+}, { deep: true })
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/mixins';
+
+.routing-rule {
+  @include routing-rule;
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteList.cy.ts b/packages/entities/entities-routes/src/components/RouteList.cy.ts
new file mode 100644
index 0000000000..fbfbac50f0
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteList.cy.ts
@@ -0,0 +1,767 @@
+// Cypress component test spec file
+import RouteList from './RouteList.vue'
+import type { FetcherResponse } from '@kong-ui-public/entities-shared'
+import {
+  FetcherRawResponse,
+  paginate,
+  routes,
+  routes100,
+} from '../../fixtures/mockData'
+import { KongManagerRouteListConfig, KonnectRouteListConfig } from '../types'
+import { createMemoryHistory, createRouter, Router } from 'vue-router'
+import { v4 as uuidv4 } from 'uuid'
+
+const viewRoute = 'view-route'
+const editRoute = 'edit-route'
+const createRoute = 'create-route'
+
+const baseConfigKonnect: KonnectRouteListConfig = {
+  app: 'konnect',
+  controlPlaneId: '1234-abcd-ilove-cats',
+  apiBaseUrl: '/us/kong-api/konnect-api',
+  createRoute,
+  getViewRoute: () => viewRoute,
+  getEditRoute: () => editRoute,
+}
+
+const baseConfigKM: KongManagerRouteListConfig = {
+  app: 'kongManager',
+  workspace: 'default',
+  apiBaseUrl: '/kong-manager',
+  isExactMatch: false,
+  filterSchema: {},
+  createRoute,
+  getViewRoute: () => viewRoute,
+  getEditRoute: () => editRoute,
+}
+
+describe('<RouteList />', () => {
+  beforeEach(() => {
+    cy.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop limit exceeded'))
+  })
+
+  describe('actions', () => {
+    // Create a new router instance for each test
+    let router: Router
+
+    beforeEach(() => {
+      // Initialize a new router before each test
+      router = createRouter({
+        routes: [
+          { path: '/', name: 'list-route', component: { template: '<div>ListPage</div>' } },
+          { path: `/${viewRoute}`, name: viewRoute, component: { template: '<div>DetailPage</div>' } },
+        ],
+        history: createMemoryHistory(),
+      })
+
+      // Mock data for each test in this block; doesn't matter if we use KM or Konnect
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/routes*`,
+        },
+        {
+          statusCode: 200,
+          body: routes,
+        },
+      )
+    })
+
+    it('should always show the Copy ID action', () => {
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.getTestId('k-dropdown-trigger').eq(0).click()
+      cy.getTestId('action-entity-copy-id').should('be.visible')
+    })
+
+    for (const expected of [false, true]) {
+      describe(`${expected ? 'allowed' : 'denied'}`, () => {
+        it(`should ${expected ? 'allow' : 'prevent'} row click if canRetrieve evaluates to ${expected}`, () => {
+          expect(router.currentRoute.value.fullPath).not.to.include(viewRoute)
+
+          cy.mount(RouteList, {
+            props: {
+              cacheIdentifier: `route-list-${uuidv4()}`,
+              config: baseConfigKonnect,
+              canCreate: () => {},
+              canEdit: () => {},
+              canDelete: () => {},
+              canRetrieve: () => expected,
+            },
+            router,
+          })
+
+          // eslint-disable-next-line cypress/unsafe-to-chain-command
+          cy.get('table tbody td').eq(0).click().then(() => {
+            if (expected) {
+              expect(router.currentRoute.value.fullPath).to.include(viewRoute)
+            } else {
+              expect(router.currentRoute.value.fullPath).not.to.include(viewRoute)
+            }
+          })
+        })
+
+        it(`should ${expected ? 'show' : 'hide'} the View Details action if canRetrieve evaluates to ${expected}`, () => {
+          cy.mount(RouteList, {
+            props: {
+              cacheIdentifier: `route-list-${uuidv4()}`,
+              config: baseConfigKonnect,
+              canCreate: () => {},
+              canEdit: () => {},
+              canDelete: () => {},
+              canRetrieve: () => expected,
+            },
+          })
+
+          cy.getTestId('k-dropdown-trigger').eq(0).click()
+          cy.getTestId('action-entity-view').should(`${!expected ? 'not.' : ''}exist`)
+        })
+
+        it(`should ${expected ? '' : 'not'} include the Edit action if canEdit evaluates to ${expected}`, () => {
+          cy.mount(RouteList, {
+            props: {
+              cacheIdentifier: `route-list-${uuidv4()}`,
+              config: baseConfigKonnect,
+              canCreate: () => {},
+              canEdit: () => expected,
+              canDelete: () => {},
+              canRetrieve: () => {},
+            },
+          })
+
+          cy.getTestId('k-dropdown-trigger').eq(0).click()
+          cy.getTestId('action-entity-edit').should(`${expected ? '' : 'not.'}exist`)
+        })
+
+        it(`should ${expected ? '' : 'not'} include the Delete action if canDelete evaluates to ${expected}`, () => {
+          cy.mount(RouteList, {
+            props: {
+              cacheIdentifier: `route-list-${uuidv4()}`,
+              config: baseConfigKonnect,
+              canCreate: () => {},
+              canEdit: () => {},
+              canDelete: () => expected,
+              canRetrieve: () => {},
+            },
+          })
+
+          cy.getTestId('k-dropdown-trigger').eq(0).click()
+          cy.getTestId('action-entity-delete').should(`${expected ? '' : 'not.'}exist`)
+        })
+      })
+    }
+  })
+
+  describe('Kong Manager', () => {
+    const interceptKM = (params?: {
+      mockData?: FetcherRawResponse;
+      alias?: string;
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes*`,
+        },
+        {
+          statusCode: 200,
+          body: params?.mockData ?? {
+            data: [],
+            total: 0,
+          },
+        },
+      ).as(params?.alias ?? 'getRoutes')
+    }
+
+    const interceptKMMultiPage = (params?: {
+      mockData?: FetcherRawResponse[];
+      alias?: string;
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes*`,
+        },
+        (req) => {
+          const size = req.query.size ? Number(req.query.size) : 30
+          const offset = req.query.offset ? Number(req.query.offset) : 0
+
+          req.reply({
+            statusCode: 200,
+            body: paginate(params?.mockData ?? [], size, offset),
+          })
+        },
+      ).as(params?.alias ?? 'getRoutesMultiPage')
+    }
+
+    it('should show empty state and create route cta', () => {
+      interceptKM()
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKM,
+          canCreate: () => true,
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutes')
+      cy.get('.kong-ui-entities-routes-list').should('be.visible')
+      cy.get('.k-table-empty-state').should('be.visible')
+      cy.get('.k-table-empty-state .k-empty-state-cta .k-button').should('be.visible')
+    })
+
+    it('should hide empty state and create route cta if user can not create', () => {
+      interceptKM()
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKM,
+          canCreate: () => false,
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutes')
+      cy.get('.kong-ui-entities-routes-list').should('be.visible')
+      cy.get('.k-table-empty-state').should('be.visible')
+      cy.get('.k-table-empty-state .k-empty-state-cta .k-button').should('not.exist')
+    })
+
+    it('should handle error state', () => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes*`,
+        },
+        {
+          statusCode: 500,
+          body: {},
+        },
+      ).as('getRoutes')
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKM,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutes')
+      cy.get('.kong-ui-entities-routes-list').should('be.visible')
+      cy.get('.k-table-error-state').should('be.visible')
+    })
+
+    it('should show route items', () => {
+      interceptKM({
+        mockData: routes,
+      })
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKM,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutes')
+      cy.get('.kong-ui-entities-routes-list tr[data-testid="route-1"]').should(
+        'exist',
+      )
+      cy.get('.kong-ui-entities-routes-list tr[data-testid="route-2"]').should(
+        'exist',
+      )
+    })
+
+    it('should allow switching between pages', () => {
+      interceptKMMultiPage({
+        mockData: routes100,
+      })
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKM,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      const l = '.kong-ui-entities-routes-list'
+      const p = '[data-testid="k-table-pagination"]'
+
+      cy.wait('@getRoutesMultiPage')
+
+      // Page #1
+      cy.get(`${l} tbody tr`).should('have.length', 30)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-29"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-30"]`).should('exist')
+
+      cy.get(`${l} ${p}`).should('exist')
+      cy.get(`${l} ${p} [data-testid="prev-btn"]`).should(
+        'have.class',
+        'disabled',
+      )
+      cy.get(`${l} ${p} [data-testid="next-btn"]`)
+        .should('not.have.class', 'disabled')
+        .click() // next page
+
+      cy.wait('@getRoutesMultiPage')
+
+      // Page #2
+      cy.get(`${l} tbody tr`).should('have.length', 30)
+      cy.get(`${l} tbody tr[data-testid="route-31"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-32"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-59"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-60"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="prev-btn"]`).should(
+        'not.have.class',
+        'disabled',
+      )
+      cy.get(`${l} ${p} [data-testid="next-btn"]`)
+        .should('not.have.class', 'disabled')
+        .click() // next page
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} ${p} [data-testid="next-btn"]`)
+        .should('not.have.class', 'disabled')
+        .click() // next page
+
+      // Page #4
+      cy.get(`${l} tbody tr`).should('have.length', 10)
+      cy.get(`${l} tbody tr[data-testid="route-91"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-92"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-99"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-100"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="prev-btn"]`).should(
+        'not.have.class',
+        'disabled',
+      )
+      cy.get(`${l} ${p} [data-testid="next-btn"]`).should(
+        'have.class',
+        'disabled',
+      )
+    })
+
+    it('should allow picking different page sizes and persist the preference', () => {
+      interceptKMMultiPage({
+        mockData: routes100,
+      })
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKM,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+        .then(({ wrapper }) => wrapper)
+        .as('vueWrapper')
+
+      const l = '.kong-ui-entities-routes-list'
+      const p = '[data-testid="k-table-pagination"]'
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} tbody tr`).should('have.length', 30)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-29"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-30"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).should(
+        'contain.text',
+        '30 items per page',
+      )
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).click()
+      cy.get(
+        `${l} ${p} [data-testid="page-size-dropdown"] [value="15"]`,
+      ).click()
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} tbody tr`).should('have.length', 15)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-14"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-15"]`).should('exist')
+
+      // Unmount and mount
+      cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKM,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} tbody tr`).should('have.length', 15)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-14"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-15"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).should(
+        'contain.text',
+        '15 items per page',
+      )
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).click()
+      cy.get(
+        `${l} ${p} [data-testid="page-size-dropdown"] [value="50"]`,
+      ).click()
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} tbody tr`).should('have.length', 50)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-49"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-50"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).should(
+        'contain.text',
+        '50 items per page',
+      )
+    })
+  })
+
+  describe('Konnect', () => {
+    const interceptKonnect = (params?: {
+      mockData?: FetcherResponse;
+      alias?: string;
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/routes*`,
+        },
+        {
+          statusCode: 200,
+          body: params?.mockData ?? {
+            data: [],
+            total: 0,
+          },
+        },
+      ).as(params?.alias ?? 'getRoutes')
+    }
+
+    const interceptKonnectMultiPage = (params?: {
+      mockData?: FetcherRawResponse[];
+      alias?: string;
+    }) => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/routes*`,
+        },
+        (req) => {
+          const size = req.query.size ? Number(req.query.size) : 30
+          const offset = req.query.offset ? Number(req.query.offset) : 0
+
+          req.reply({
+            statusCode: 200,
+            body: paginate(params?.mockData ?? [], size, offset),
+          })
+        },
+      ).as(params?.alias ?? 'getRoutesMultiPage')
+    }
+
+    it('should show empty state and create route cta', () => {
+      interceptKonnect()
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => true,
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutes')
+      cy.get('.kong-ui-entities-routes-list').should('be.visible')
+      cy.get('.k-table-empty-state').should('be.visible')
+      cy.get('.k-table-empty-state .k-empty-state-cta .k-button').should('be.visible')
+    })
+
+    it('should hide empty state and create route cta if user can not create', () => {
+      interceptKonnect()
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => false,
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutes')
+      cy.get('.kong-ui-entities-routes-list').should('be.visible')
+      cy.get('.k-table-empty-state').should('be.visible')
+      cy.get('.k-table-empty-state .k-empty-state-cta .k-button').should('not.exist')
+    })
+
+    it('should handle error state', () => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/api/runtime_groups/${baseConfigKonnect.controlPlaneId}/routes*`,
+        },
+        {
+          statusCode: 500,
+          body: {},
+        },
+      ).as('getRoutes')
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutes')
+      cy.get('.kong-ui-entities-routes-list').should('be.visible')
+      cy.get('.k-table-error-state').should('be.visible')
+    })
+
+    it('should show route items', () => {
+      interceptKonnect({
+        mockData: routes,
+      })
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutes')
+      cy.get('.kong-ui-entities-routes-list tr[data-testid="route-1"]').should(
+        'exist',
+      )
+      cy.get('.kong-ui-entities-routes-list tr[data-testid="route-2"]').should(
+        'exist',
+      )
+    })
+
+    it('should allow switching between pages', () => {
+      interceptKonnectMultiPage({
+        mockData: routes100,
+      })
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      const l = '.kong-ui-entities-routes-list'
+      const p = '[data-testid="k-table-pagination"]'
+
+      cy.wait('@getRoutesMultiPage')
+
+      // Page #1
+      cy.get(`${l} tbody tr`).should('have.length', 30)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-29"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-30"]`).should('exist')
+
+      cy.get(`${l} ${p}`).should('exist')
+      cy.get(`${l} ${p} [data-testid="prev-btn"]`).should(
+        'have.class',
+        'disabled',
+      )
+      cy.get(`${l} ${p} [data-testid="next-btn"]`)
+        .should('not.have.class', 'disabled')
+        .click() // next page
+
+      cy.wait('@getRoutesMultiPage')
+
+      // Page #2
+      cy.get(`${l} tbody tr`).should('have.length', 30)
+      cy.get(`${l} tbody tr[data-testid="route-31"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-32"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-59"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-60"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="prev-btn"]`).should(
+        'not.have.class',
+        'disabled',
+      )
+      cy.get(`${l} ${p} [data-testid="next-btn"]`)
+        .should('not.have.class', 'disabled')
+        .click() // next page
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} ${p} [data-testid="next-btn"]`)
+        .should('not.have.class', 'disabled')
+        .click() // next page
+
+      // Page #4
+      cy.get(`${l} tbody tr`).should('have.length', 10)
+      cy.get(`${l} tbody tr[data-testid="route-91"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-92"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-99"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-100"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="prev-btn"]`).should(
+        'not.have.class',
+        'disabled',
+      )
+      cy.get(`${l} ${p} [data-testid="next-btn"]`).should(
+        'have.class',
+        'disabled',
+      )
+    })
+
+    it('should allow picking different page sizes and persist the preference', () => {
+      interceptKonnectMultiPage({
+        mockData: routes100,
+      })
+
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+        .then(({ wrapper }) => wrapper)
+        .as('vueWrapper')
+
+      const l = '.kong-ui-entities-routes-list'
+      const p = '[data-testid="k-table-pagination"]'
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} tbody tr`).should('have.length', 30)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-29"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-30"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).should(
+        'contain.text',
+        '30 items per page',
+      )
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).click()
+      cy.get(
+        `${l} ${p} [data-testid="page-size-dropdown"] [value="15"]`,
+      ).click()
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} tbody tr`).should('have.length', 15)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-14"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-15"]`).should('exist')
+
+      // Unmount and mount
+      cy.get('@vueWrapper').then((wrapper: any) => wrapper.unmount())
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} tbody tr`).should('have.length', 15)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-14"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-15"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).should(
+        'contain.text',
+        '15 items per page',
+      )
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).click()
+      cy.get(
+        `${l} ${p} [data-testid="page-size-dropdown"] [value="50"]`,
+      ).click()
+
+      cy.wait('@getRoutesMultiPage')
+
+      cy.get(`${l} tbody tr`).should('have.length', 50)
+      cy.get(`${l} tbody tr[data-testid="route-1"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-2"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-49"]`).should('exist')
+      cy.get(`${l} tbody tr[data-testid="route-50"]`).should('exist')
+
+      cy.get(`${l} ${p} [data-testid="page-size-dropdown"]`).should(
+        'contain.text',
+        '50 items per page',
+      )
+    })
+  })
+})
diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
new file mode 100644
index 0000000000..0a26c26f2f
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -0,0 +1,524 @@
+<template>
+  <div class="kong-ui-entities-routes-list">
+    <EntityBaseTable
+      :cache-identifier="cacheIdentifier"
+      disable-pagination-page-jump
+      :disable-sorting="disableSorting"
+      :empty-state-options="emptyStateOptions"
+      enable-entity-actions
+      :error-message="errorMessage"
+      :fetcher="fetcher"
+      :fetcher-cache-key="fetcherCacheKey"
+      pagination-type="offset"
+      preferences-storage-key="kong-ui-entities-routes-list"
+      :query="filterQuery"
+      :table-headers="tableHeaders"
+      :title="title"
+      @clear-search-input="clearFilter"
+      @click:row="(row: any) => rowClick(row as EntityRow)"
+      @sort="resetPagination"
+    >
+      <!-- Filter -->
+      <template #toolbar-filter>
+        <EntityFilter
+          v-model="filterQuery"
+          :config="filterConfig"
+        />
+      </template>
+      <!-- Create action -->
+      <template #toolbar-button>
+        <PermissionsWrapper :auth-function="() => canCreate()">
+          <KButton
+            appearance="primary"
+            data-testid="toolbar-add-route"
+            icon="plus"
+            :to="config.createRoute"
+          >
+            {{ t('routes.list.toolbar_actions.new_route') }}
+          </KButton>
+        </PermissionsWrapper>
+      </template>
+
+      <!-- Column Formatting -->
+      <template #name="{ rowValue }">
+        <b>{{ rowValue ?? '-' }}</b>
+      </template>
+      <template #protocols="{ rowValue }">
+        <KTruncate>
+          <KBadge
+            v-for="protocol in rowValue"
+            :key="protocol"
+            :background-color="KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST"
+            :color="KUI_COLOR_TEXT_NEUTRAL"
+            @click.stop
+          >
+            {{ protocol }}
+          </KBadge>
+        </KTruncate>
+      </template>
+      <template #hosts="{ rowValue }">
+        <KTruncate v-if="rowValue?.length > 0">
+          <KBadge
+            v-for="host in rowValue"
+            :key="host"
+            :background-color="KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST"
+            :color="KUI_COLOR_TEXT_NEUTRAL"
+            :truncation-tooltip="host"
+            @click.stop
+          >
+            {{ host }}
+          </KBadge>
+        </KTruncate>
+        <span v-else>-</span>
+      </template>
+      <template #methods="{ rowValue }">
+        <KTruncate v-if="rowValue?.length > 0">
+          <KBadge
+            v-for="method in rowValue"
+            :key="method"
+            v-bind="getMethodBadgeColors(method)"
+            @click.stop
+          >
+            {{ method }}
+          </KBadge>
+        </KTruncate>
+        <span v-else>-</span>
+      </template>
+      <template #paths="{ rowValue }">
+        <KTruncate v-if="rowValue?.length > 0">
+          <KBadge
+            v-for="path in rowValue"
+            :key="path"
+            :background-color="KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST"
+            :color="KUI_COLOR_TEXT_NEUTRAL"
+            :truncation-tooltip="path"
+            @click.stop
+          >
+            {{ path }}
+          </KBadge>
+        </KTruncate>
+        <span v-else>-</span>
+      </template>
+      <template #tags="{ rowValue }">
+        <KTruncate v-if="rowValue?.length > 0">
+          <KBadge
+            v-for="tag in rowValue"
+            :key="tag"
+            @click.stop
+          >
+            {{ tag }}
+          </KBadge>
+        </KTruncate>
+        <span v-else>-</span>
+      </template>
+
+      <!-- Row actions -->
+      <template #actions="{ row }">
+        <KClipboardProvider v-slot="{ copyToClipboard }">
+          <KDropdownItem
+            data-testid="action-entity-copy-id"
+            @click="copyId(row, copyToClipboard)"
+          >
+            {{ t('actions.copy_id') }}
+          </KDropdownItem>
+        </KClipboardProvider>
+        <KClipboardProvider v-slot="{ copyToClipboard }">
+          <KDropdownItem
+            data-testid="action-entity-copy-json"
+            @click="copyJson(row, copyToClipboard)"
+          >
+            {{ t('actions.copy_json') }}
+          </KDropdownItem>
+        </KClipboardProvider>
+        <PermissionsWrapper :auth-function="() => canRetrieve(row)">
+          <KDropdownItem
+            data-testid="action-entity-view"
+            has-divider
+            :item="getViewDropdownItem(row.id)"
+          />
+        </PermissionsWrapper>
+        <PermissionsWrapper :auth-function="() => canEdit(row)">
+          <KDropdownItem
+            data-testid="action-entity-edit"
+            :item="getEditDropdownItem(row.id)"
+          />
+        </PermissionsWrapper>
+        <PermissionsWrapper :auth-function="() => canDelete(row)">
+          <KDropdownItem
+            data-testid="action-entity-delete"
+            has-divider
+            is-dangerous
+            @click="deleteRow(row)"
+          >
+            {{ t('actions.delete') }}
+          </KDropdownItem>
+        </PermissionsWrapper>
+      </template>
+    </EntityBaseTable>
+
+    <EntityDeleteModal
+      :action-pending="isDeletePending"
+      :description="t('delete.description')"
+      :entity-name="routeToBeDeleted && (routeToBeDeleted.name || routeToBeDeleted.id)"
+      :entity-type="EntityTypes.Route"
+      :error="deleteModalError"
+      :title="t('delete.title')"
+      :visible="isDeleteModalVisible"
+      @cancel="hideDeleteModal"
+      @proceed="confirmDelete"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType, ref, watch, onBeforeMount } from 'vue'
+import type { AxiosError } from 'axios'
+import { useRouter } from 'vue-router'
+
+import {
+  KUI_COLOR_TEXT_NEUTRAL, KUI_COLOR_BACKGROUND_NEUTRAL_WEAKEST,
+} from '@kong/design-tokens'
+
+import {
+  EntityBaseTable,
+  EntityDeleteModal,
+  EntityFilter,
+  EntityTypes,
+  FetcherStatus,
+  PermissionsWrapper,
+  useAxios,
+  useFetcher,
+  useDeleteUrlBuilder,
+} from '@kong-ui-public/entities-shared'
+import type {
+  KongManagerRouteListConfig,
+  KonnectRouteListConfig,
+  EntityRow,
+  CopyEventPayload,
+} from '../types'
+import type {
+  BaseTableHeaders,
+  EmptyStateOptions,
+  ExactMatchFilterConfig,
+  FilterFields,
+  FuzzyMatchFilterConfig,
+} from '@kong-ui-public/entities-shared'
+import '@kong-ui-public/entities-shared/dist/style.css'
+
+import composables from '../composables'
+import endpoints from '../routes-endpoints'
+import { getMethodBadgeColors } from '../utilities'
+
+const emit = defineEmits<{
+  (e: 'error', error: AxiosError): void,
+  (e: 'copy:success', payload: CopyEventPayload): void,
+  (e: 'copy:error', payload: CopyEventPayload): void,
+  (e: 'delete:success', route: EntityRow): 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<KonnectRouteListConfig | KongManagerRouteListConfig>,
+    required: true,
+    validator: (config: KonnectRouteListConfig | KongManagerRouteListConfig): boolean => {
+      if (!config || !['konnect', 'kongManager'].includes(config?.app)) return false
+      if (!config.createRoute || !config.getViewRoute || !config.getEditRoute) return false
+      if (config.app === 'kongManager' && !config.isExactMatch && !config.filterSchema) return false
+      return true
+    },
+  },
+  // used to override the default identifier for the cache entry
+  cacheIdentifier: {
+    type: String,
+    default: '',
+  },
+  /** An asynchronous function, that returns a boolean, that evaluates if the user can create a new entity */
+  canCreate: {
+    type: Function as PropType<() => Promise<boolean>>,
+    required: false,
+    default: async () => true,
+  },
+  /** An asynchronous function, that returns a boolean, that evaluates if the user can delete a given entity */
+  canDelete: {
+    type: Function as PropType<(row: EntityRow) => Promise<boolean>>,
+    required: false,
+    default: async () => true,
+  },
+  /** An asynchronous function, that returns a boolean, that evaluates if the user can edit a given entity */
+  canEdit: {
+    type: Function as PropType<(row: EntityRow) => Promise<boolean>>,
+    required: false,
+    default: async () => true,
+  },
+  /** An asynchronous function, that returns a boolean, that evaluates if the user can retrieve (view details) a given entity */
+  canRetrieve: {
+    type: Function as PropType<(row: EntityRow) => Promise<boolean>>,
+    required: false,
+    default: async () => true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+})
+
+const { i18n: { t } } = composables.useI18n()
+const router = useRouter()
+
+const { axiosInstance } = useAxios({
+  headers: props.config?.requestHeaders,
+})
+const fetcherCacheKey = ref<number>(1)
+
+/**
+ * Table Headers
+ */
+const disableSorting = computed((): boolean => props.config.app !== 'kongManager' || !!props.config.disableSorting)
+const fields: BaseTableHeaders = {
+  name: { label: t('routes.list.table_headers.name'), searchable: true, sortable: true },
+  protocols: { label: t('routes.list.table_headers.protocols'), searchable: true },
+  ...props.config.useExpression
+    ? {
+      expression: { label: t('routes.list.table_headers.expression') },
+    }
+    : {
+      hosts: { label: t('routes.list.table_headers.hosts'), searchable: true },
+      methods: { label: t('routes.list.table_headers.methods'), searchable: true },
+      paths: { label: t('routes.list.table_headers.paths'), searchable: true },
+    },
+  tags: { label: t('routes.list.table_headers.tags'), sortable: false },
+}
+const tableHeaders: BaseTableHeaders = fields
+
+/**
+ * Fetcher & Filtering
+ */
+const fetcherBaseUrl = computed<string>(() => {
+  let url = `${props.config.apiBaseUrl}${endpoints.list[props.config.app][props.config.serviceId ? 'forGatewayService' : 'all']}`
+
+  if (props.config.app === 'konnect') {
+    url = url
+      .replace(/{controlPlaneId}/gi, props.config?.controlPlaneId || '')
+      .replace(/{serviceId}/gi, props.config?.serviceId || '')
+  } else if (props.config.app === 'kongManager') {
+    url = url
+      .replace(/\/{workspace}/gi, props.config?.workspace ? `/${props.config.workspace}` : '')
+      .replace(/{serviceId}/gi, props.config?.serviceId || '')
+  }
+
+  return url
+})
+
+const filterQuery = ref<string>('')
+const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['config']>(() => {
+  const isExactMatch = (props.config.app === 'konnect' || props.config.isExactMatch)
+
+  if (isExactMatch) {
+    return {
+      isExactMatch,
+      placeholder: t('search.placeholder'),
+    } as ExactMatchFilterConfig
+  }
+
+  const { name, protocols, hosts, methods, paths, expression } = fields
+  const filterFields: FilterFields = props.config.useExpression
+    ? { name, protocols, expression }
+    : { name, protocols, hosts, methods, paths }
+
+  return {
+    isExactMatch,
+    fields: filterFields,
+    schema: props.config.filterSchema,
+  } as FuzzyMatchFilterConfig
+})
+
+const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
+
+const clearFilter = (): void => {
+  filterQuery.value = ''
+}
+
+const resetPagination = (): void => {
+  // Increment the cache key on sort
+  fetcherCacheKey.value++
+}
+
+/**
+ * loading, Error, Empty state
+ */
+const errorMessage = ref('')
+
+/**
+ * Copy ID action
+ */
+const copyId = (row: EntityRow, copyToClipboard: (val: string) => boolean): void => {
+  const id = row.id as string
+
+  if (!copyToClipboard(id)) {
+    // Emit the error event for the host app
+    emit('copy:error', {
+      entity: row,
+      field: 'id',
+      message: t('errors.copy'),
+    })
+
+    return
+  }
+
+  // Emit the success event for the host app
+  emit('copy:success', {
+    entity: row,
+    field: 'id',
+    message: t('copy.success', { val: id }),
+  })
+}
+
+/**
+ * Copy JSON action
+ */
+const copyJson = (row: EntityRow, copyToClipboard: (val: string) => boolean): void => {
+  const val = JSON.stringify(row)
+
+  if (!copyToClipboard(val)) {
+    // Emit the error event for the host app
+    emit('copy:error', {
+      entity: row,
+      message: t('errors.copy'),
+    })
+
+    return
+  }
+
+  // Emit the success event for the host app
+  emit('copy:success', {
+    entity: row,
+    message: t('copy.success_brief'),
+  })
+}
+
+/**
+ * Row Click + View Details action
+ */
+const rowClick = async (row: EntityRow): Promise<void> => {
+  const isAllowed = await props.canRetrieve?.(row)
+
+  if (!isAllowed) {
+    return
+  }
+
+  router.push(props.config.getViewRoute(row.id as string))
+}
+
+// Render the view dropdown item as a router-link
+const getViewDropdownItem = (id: string) => {
+  return {
+    label: t('actions.view'),
+    to: props.config.getViewRoute(id),
+  }
+}
+
+/**
+ * Edit action
+ */
+// Render the edit dropdown item as a router-link
+const getEditDropdownItem = (id: string) => {
+  return {
+    label: t('actions.edit'),
+    to: props.config.getEditRoute(id),
+  }
+}
+
+/**
+ * Delete action
+ */
+const routeToBeDeleted = ref<EntityRow | undefined>(undefined)
+const isDeleteModalVisible = ref<boolean>(false)
+const isDeletePending = ref<boolean>(false)
+const deleteModalError = ref<string>('')
+
+const buildDeleteUrl = useDeleteUrlBuilder(props.config, fetcherBaseUrl.value)
+
+const deleteRow = (row: EntityRow): void => {
+  routeToBeDeleted.value = row
+  isDeleteModalVisible.value = true
+}
+
+const hideDeleteModal = (): void => {
+  isDeleteModalVisible.value = false
+}
+
+const confirmDelete = async (): Promise<void> => {
+  if (!routeToBeDeleted.value?.id) {
+    return
+  }
+
+  isDeletePending.value = true
+
+  try {
+    await axiosInstance.delete(buildDeleteUrl(routeToBeDeleted.value.id))
+
+    isDeletePending.value = false
+    isDeleteModalVisible.value = false
+    fetcherCacheKey.value++
+
+    // Emit the success event for the host app
+    emit('delete:success', routeToBeDeleted.value)
+  } catch (error: any) {
+    deleteModalError.value = error.response?.data?.message ||
+      error.message ||
+      t('errors.delete')
+
+    // Emit the error event for the host app
+    emit('error', error)
+  } finally {
+    isDeletePending.value = false
+  }
+}
+
+/**
+ * Watchers
+ */
+watch(fetcherState, (state) => {
+  if (state.status === FetcherStatus.Error) {
+    errorMessage.value = t('errors.general')
+    // Emit the error for the host app
+    emit('error', state.error)
+
+    return
+  }
+
+  errorMessage.value = ''
+})
+
+// Initialize the empty state options assuming a user does not have create permissions
+// IMPORTANT: you must initialize this object assuming the user does **NOT** have create permissions so that the onBeforeMount hook can properly evaluate the props.canCreate function.
+const emptyStateOptions = ref<EmptyStateOptions>({
+  ctaPath: props.config.createRoute,
+  ctaText: undefined,
+  message: t('routes.list.empty_state.description'),
+  title: t('routes.title'),
+})
+
+onBeforeMount(async () => {
+  // Evaluate if the user has create permissions
+  const userCanCreate = await props.canCreate()
+
+  // If a user can create, we need to modify the empty state actions/messaging
+  if (userCanCreate) {
+    emptyStateOptions.value.title = t('routes.list.empty_state.title')
+    emptyStateOptions.value.ctaText = t('actions.create')
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.kong-ui-entities-routes-list {
+  width: 100%;
+
+  .kong-ui-entity-filter-input {
+    width: 300px;
+  }
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue b/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue
new file mode 100644
index 0000000000..0373811d1a
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RoutingRulesEntitiesControls.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="routing-rules-entities-controls-container">
+    <KButton
+      appearance="btn-link"
+      class="remove-button"
+      :data-testid="`remove-${routingRulesEntity}`"
+      @click="$emit('remove')"
+    >
+      <template #icon>
+        <KIcon icon="trash" />
+      </template>
+    </KButton>
+    <KButton
+      appearance="btn-link"
+      :data-testid="`add-${routingRulesEntity}`"
+      :disabled="isAddDisabled"
+      @click="$emit('add')"
+    >
+      <template #icon>
+        <KIcon
+          :color="KUI_COLOR_TEXT_PRIMARY_STRONG"
+          icon="plus"
+          size="22"
+        />
+      </template>
+    </KButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { KUI_COLOR_TEXT_PRIMARY_STRONG } from '@kong/design-tokens'
+
+defineProps({
+  routingRulesEntity: {
+    type: String,
+    required: true,
+  },
+  isAddDisabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+defineEmits(['remove', 'add'])
+</script>
+
+<style lang="scss" scoped>
+.routing-rules-entities-controls-container {
+  display: flex;
+
+  :deep(.k-button) {
+    &.remove-button {
+      svg path {
+        fill: $kui_color_border_neutral_weak !important;
+      }
+
+      &:hover {
+        svg path {
+          fill: $kui_color_border_danger_weak !important;
+        }
+      }
+    }
+
+    &[disabled] {
+      pointer-events: none !important;
+
+      .kong-icon {
+        opacity: 0 !important;
+      }
+    }
+
+    &:not(:first-of-type) {
+      margin-left: $kui_space_50 !important;
+    }
+  }
+}
+</style>
diff --git a/packages/entities/entities-routes/src/composables/index.ts b/packages/entities/entities-routes/src/composables/index.ts
new file mode 100644
index 0000000000..3893dfc828
--- /dev/null
+++ b/packages/entities/entities-routes/src/composables/index.ts
@@ -0,0 +1,6 @@
+import useI18n from './useI18n'
+
+// All composables must be exported as part of the default object for Cypress test stubs
+export default {
+  useI18n,
+}
diff --git a/packages/entities/entities-routes/src/composables/useI18n.ts b/packages/entities/entities-routes/src/composables/useI18n.ts
new file mode 100644
index 0000000000..337ff02756
--- /dev/null
+++ b/packages/entities/entities-routes/src/composables/useI18n.ts
@@ -0,0 +1,11 @@
+import { createI18n, i18nTComponent } from '@kong-ui-public/i18n'
+import english from '../locales/en.json'
+
+export default function useI18n() {
+  const i18n = createI18n<typeof english>('en-us', english)
+
+  return {
+    i18n,
+    i18nT: i18nTComponent<typeof english>(i18n), // Translation component <i18n-t>
+  }
+}
diff --git a/packages/entities/entities-routes/src/global-components.d.ts b/packages/entities/entities-routes/src/global-components.d.ts
new file mode 100644
index 0000000000..2f0048d672
--- /dev/null
+++ b/packages/entities/entities-routes/src/global-components.d.ts
@@ -0,0 +1,2 @@
+// Import globally available components
+import '@kong/kongponents/dist/types/global-components'
diff --git a/packages/entities/entities-routes/src/index.ts b/packages/entities/entities-routes/src/index.ts
new file mode 100644
index 0000000000..a4a2e2e13e
--- /dev/null
+++ b/packages/entities/entities-routes/src/index.ts
@@ -0,0 +1,7 @@
+import RouteList from './components/RouteList.vue'
+import RouteForm from './components/RouteForm.vue'
+import RouteConfigCard from './components/RouteConfigCard.vue'
+
+export { RouteList, RouteForm, RouteConfigCard }
+
+export * from './types'
diff --git a/packages/entities/entities-routes/src/locales/en.json b/packages/entities/entities-routes/src/locales/en.json
new file mode 100644
index 0000000000..52ec645125
--- /dev/null
+++ b/packages/entities/entities-routes/src/locales/en.json
@@ -0,0 +1,227 @@
+{
+  "actions": {
+    "create": "New Route",
+    "copy_id": "Copy ID",
+    "copy_json": "Copy JSON",
+    "edit": "Edit",
+    "delete": "Delete",
+    "clear": "Clear",
+    "view": "View Details",
+    "loading": "Loading..."
+  },
+  "search": {
+    "placeholder": "Filter by exact name or ID",
+    "no_results": "No results found"
+  },
+  "routes": {
+    "title": "Routes",
+    "list": {
+      "toolbar_actions": {
+        "new_route": "New Route"
+      },
+      "table_headers": {
+        "name": "Name",
+        "protocols": "Protocols",
+        "hosts": "Hosts",
+        "methods": "Methods",
+        "paths": "Paths",
+        "expression": "Expression",
+        "id": "ID",
+        "tags": "Tags"
+      },
+      "empty_state": {
+        "title": "Configure a New Route",
+        "description": "Routes proxy requests to an associated Service."
+      }
+    }
+  },
+  "delete": {
+    "title": "Delete a Route",
+    "description": "Deleting this route will also remove any associated plugins. This action cannot be reversed."
+  },
+  "errors": {
+    "general": "Routes could not be retrieved",
+    "delete": "The route could not be deleted at this time.",
+    "copy": "Failed to copy to clipboard",
+    "services": {
+      "fetch": "Could not fetch available services"
+    }
+  },
+  "copy": {
+    "success": "Copied {val} to clipboard",
+    "success_brief": "Successfully copied to clipboard"
+  },
+  "form": {
+    "protocols": {
+      "grpc": "GRPC",
+      "grpcs": "GRPCS",
+      "grpc,grpcs": "GRPC, GRPCS",
+      "http": "HTTP",
+      "https": "HTTPS",
+      "http,https": "HTTP, HTTPS",
+      "tls": "TLS",
+      "tcp": "TCP",
+      "udp": "UDP",
+      "tls,udp": "TLS, UDP",
+      "tcp,udp": "TCP, UDP",
+      "tcp,tls": "TCP, TLS",
+      "tcp,tls,udp": "TCP, TLS, UDP",
+      "ws": "WS",
+      "wss": "WSS",
+      "ws,wss": "WS, WSS",
+      "tls_passthrough": "TLS_PASSTHROUGH"
+    },
+    "sections": {
+      "general": {
+        "title": "General Information",
+        "description": "General information will help you identify and manage this route"
+      },
+      "config": {
+        "title": "Route Configuration",
+        "description": "Route configuration determines how this route will handle incoming requests"
+      },
+      "routingRules": {
+        "title": "Routing Rules"
+      }
+    },
+    "fields": {
+      "service_id": {
+        "label": "Service",
+        "placeholder": "Select a service"
+      },
+      "name": {
+        "label": "Name",
+        "placeholder": "Enter a unique name",
+        "tooltip": "The name of the Route. Route names must be unique, and they are case sensitive. For example, there can be two different Routes named 'test' and 'Test'."
+      },
+      "service": {
+        "label": "Gateway Service",
+        "tooltip": "The Service this Route is associated to. This is where the Route proxies traffic to."
+      },
+      "tags": {
+        "label": "Tags",
+        "tooltip": "An optional set of strings associated with the Route for grouping and filtering.",
+        "placeholder": "Enter a list of tags separated by commas",
+        "help": "e.g. tag1, tag2, tag3"
+      },
+      "protocols": {
+        "label": "Protocols",
+        "tooltip": "Routes have a protocols property to restrict the client protocol they should listen for.",
+        "tooltipConfig": "An array of the protocols this Route should allow. See the {code1} section for a list of accepted protocols. When set to only {code2}, HTTP requests are answered with an upgrade error. When it is set to only {code3}, this is essentially the same as {code4} in that both HTTP and HTTPS requests are allowed. Default: {code5}.",
+        "code1": "Route Object",
+        "code2": "https",
+        "code3": "http",
+        "code4": "['http', 'https']",
+        "code5": "['http', 'https']"
+      },
+      "path_handling": {
+        "label": "Path Handling",
+        "tooltip": "This treats service.path, route.path and request path as segments of a URL.",
+        "tooltipConfig": "Controls how the Service path, Route path and requested path are combined when sending a request to the upstream. See above for a detailed description of each behavior."
+      },
+      "https_redirect_status_code": {
+        "label": "HTTPS Redirect Status Code",
+        "tooltip": "The status code Kong responds with when all properties of a Route match except the protocol i.e. if the protocol of the request is {code1} instead of {code2}. {code3}  header is injected by Kong if the field is set to 301, 302, 307 or 308. Note: This config applies only if the Route is configured to only accept the {code4} protocol.",
+        "code1": "HTTP",
+        "code2": "HTTPS",
+        "code3": "Location",
+        "code4": "https"
+      },
+      "regex_priority": {
+        "label": "Regex Priority",
+        "tooltip": "A number used to choose which route resolves a given request when several routes match it using regexes simultaneously. When two routes match the path and have the same {code1}, the older one (lowest {code2}) is used. Note that the priority for non-regex routes is different (longer non-regex routes are matched before shorter ones).",
+        "code1": "regex_priority",
+        "code2": "created_at"
+      },
+      "strip_path": {
+        "label": "Strip Path",
+        "tooltip": "When matching a Route via one of the {code1}, strip the matching prefix from the upstream request URL.",
+        "code1": "paths"
+      },
+      "preserve_host": {
+        "label": "Preserve Host",
+        "tooltip": "When matching a Route via one of the {code1} domain names, use the request {code2} header in the upstream request headers. If set to {code3}, the upstream {code4} header will be that of the Service's {code5}.",
+        "code1": "hosts",
+        "code2": "Host",
+        "code3": "false",
+        "code4": "Host",
+        "code5": "host"
+      },
+      "paths": {
+        "label": "Paths",
+        "placeholder": "Enter a path",
+        "tooltip": "AA list of paths that match this Route."
+      },
+      "snis": {
+        "label": "SNIs",
+        "placeholder": "Enter a SNI",
+        "tooltip": "A list of SNIs (Server Name Indications from a TLS ClientHello) that match this Route."
+      },
+      "hosts": {
+        "label": "Hosts",
+        "placeholder": "Enter a host",
+        "tooltip": "A list of domain names that match this Route.",
+        "tooltipConfig": "A list of domain names that match this Route. Note that the hosts value is case sensitive."
+      },
+      "methods": {
+        "label": "Methods",
+        "tooltip": "A list of HTTP methods that match this Route.",
+        "custom": {
+          "label": "Custom",
+          "placeholder": "Enter a custom method",
+          "tooltip": "Custom methods can be used with default selections. Uppercase characters are required."
+        }
+      },
+      "headers": {
+        "label": "Headers",
+        "tooltip": "Header values can be separated by commas (value1, value2, value3).",
+        "name": {
+          "placeholder": "Enter a header name"
+        },
+        "values": {
+          "placeholder": "Enter a header value"
+        },
+        "tooltipConfig": "One or more lists of values indexed by header name that will cause this Route to match if present in the request. The {code1} header cannot be used with this attribute: hosts should be specified using the {code2} attribute. When {code3} contains only one value and that value starts with the special prefix {code4], the value is interpreted as a regular expression.",
+        "code1": "Host",
+        "code2": "hosts",
+        "code3": "headers",
+        "code4": "*"
+      },
+      "sources": {
+        "label": "Sources",
+        "tooltip": "A list of IP sources of incoming connections that match this Route when using stream routing.",
+        "ip": {
+          "placeholder": "Enter a source IP"
+        },
+        "port": {
+          "placeholder": "Enter a source port"
+        }
+      },
+      "destinations": {
+        "label": "Destinations",
+        "tooltip": "A list of IP destinations of incoming connections that match this Route when using stream routing.",
+        "ip": {
+          "placeholder": "Enter a destination IP"
+        },
+        "port": {
+          "placeholder": "Enter a destination port"
+        }
+      },
+      "response_buffering": {
+        "label": "Response buffering",
+        "tooltip": "Whether to enable response body buffering or not. With HTTP 1.1, it may make sense to turn this off on services that send data with chunked transfer encoding."
+      },
+      "request_buffering": {
+        "label": "Request buffering",
+        "tooltip": "Whether to enable request body buffering or not. With HTTP 1.1, it may make sense to turn this off on services that receive data with chunked transfer encoding."
+      }
+    },
+    "viewAdvancedFields": "View Advanced Fields",
+    "addNewRule": "Add New Rule",
+    "warning": {
+      "rulesMessage": "For {protocol}, at least one of {routingRules} must be set.",
+      "singleRule": "{routingRules}",
+      "multipleRules": "{routingRules} or {lastRoutingRule}"
+    }
+  }
+}
diff --git a/packages/entities/entities-routes/src/routes-endpoints.ts b/packages/entities/entities-routes/src/routes-endpoints.ts
new file mode 100644
index 0000000000..712c685f6f
--- /dev/null
+++ b/packages/entities/entities-routes/src/routes-endpoints.ts
@@ -0,0 +1,56 @@
+export default {
+  list: {
+    konnect: {
+      all: '/api/runtime_groups/{controlPlaneId}/routes',
+      forGatewayService: '/api/runtime_groups/{controlPlaneId}/services/{serviceId}/routes',
+    },
+    kongManager: {
+      all: '/{workspace}/routes',
+      forGatewayService: '/{workspace}/services/{serviceId}/routes',
+    },
+  },
+  form: {
+    konnect: {
+      services: '/api/runtime_groups/{controlPlaneId}/services',
+      create: {
+        all: '/api/runtime_groups/{controlPlaneId}/routes',
+        forGatewayService: '/api/runtime_groups/{controlPlaneId}/services/{serviceId}/routes',
+      },
+      fetch: {
+        all: '/api/runtime_groups/{controlPlaneId}/routes/{id}',
+        forGatewayService: '/api/runtime_groups/{controlPlaneId}/services/{serviceId}/routes/{id}',
+      },
+      edit: {
+        all: '/api/runtime_groups/{controlPlaneId}/routes/{id}',
+        forGatewayService: '/api/runtime_groups/{controlPlaneId}/services/{serviceId}/routes/{id}',
+      },
+    },
+    kongManager: {
+      services: '/{workspace}/services/',
+      create: {
+        all: '/{workspace}/routes',
+        forGatewayService: '/{workspace}/services/{serviceId}/routes',
+      },
+      fetch: {
+        all: '/{workspace}/routes/{id}',
+        forGatewayService: '/{workspace}/services/{serviceId}/routes/{id}',
+      },
+      edit: {
+        all: '/{workspace}/routes/{id}',
+        forGatewayService: '/{workspace}/services/{serviceId}/routes/{id}',
+      },
+    },
+  },
+  item: {
+    konnect: {
+      getService: '/api/runtime_groups/{controlPlaneId}/services/{serviceId}',
+      all: '/api/runtime_groups/{controlPlaneId}/routes/{id}',
+      forGatewayService: '/api/runtime_groups/{controlPlaneId}/services/{serviceId}/routes/{id}',
+    },
+    kongManager: {
+      getService: '/{workspace}/services/{serviceId}',
+      all: '/{workspace}/routes/{id}',
+      forGatewayService: '/{workspace}/services/{serviceId}/routes/{id}',
+    },
+  },
+}
diff --git a/packages/entities/entities-routes/src/styles/_mixins.scss b/packages/entities/entities-routes/src/styles/_mixins.scss
new file mode 100644
index 0000000000..a2263b786f
--- /dev/null
+++ b/packages/entities/entities-routes/src/styles/_mixins.scss
@@ -0,0 +1,119 @@
+@mixin hr() {
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: $kui_space_60;
+}
+
+@mixin routing-rule() {
+  &-container {
+    &:not(:first-of-type) {
+      margin-top: $kui_space_80;
+    }
+
+    hr {
+      @include hr;
+    }
+  }
+
+  &-input {
+    align-items: center;
+    column-gap: $kui_space_40;
+    display: flex;
+
+    .k-input-wrapper {
+      width: 100%;
+    }
+
+    &:not(:first-of-type) {
+      margin-top: $kui_space_60;
+    }
+
+    .methods-input {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $kui_space_50;
+
+      // stylelint-disable-next-line selector-pseudo-class-no-unknown
+      :deep(label.k-switch) {
+        margin: 0 !important;
+      }
+
+      // stylelint-disable-next-line selector-pseudo-class-no-unknown
+      :deep(.k-button) {
+        margin-left: $kui_space_50 !important;
+
+        &.remove-button {
+          svg path {
+            fill: $kui_color_border_neutral_weak !important;
+          }
+
+          &:hover {
+            svg path {
+              fill: $kui_color_border_danger_weak !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin routing-rules-selector() {
+  &-container {
+    margin-top: $kui_space_80;
+
+    hr {
+      @include hr;
+    }
+  }
+
+  &-options {
+    align-items: center;
+    background-color: $kui_color_background_primary_weakest;
+    border: 1px solid $kui_color_border_primary_weak;
+    border-radius: 30px;
+    display: flex;
+    padding: 0 6px;
+    width: fit-content;
+
+    ul {
+      display: flex;
+      margin: 0;
+      padding: 0;
+
+      li {
+        display: inline-flex;
+        list-style: none;
+      }
+    }
+
+    .option {
+      border: 1px solid transparent;
+      border-radius: 19px;
+      box-shadow: none;
+      color: $kui_color_text_primary_strong;
+      cursor: pointer;
+      font-size: $kui_font_size_40;
+      font-weight: 600;
+      margin: 0;
+      margin-right: $kui_space_20;
+      padding: $kui_space_20 10px;
+      transition: box-shadow 0.2s ease;
+
+      &.is-selected {
+        color: $kui_color_border_primary_weaker;
+        pointer-events: none;
+        text-decoration: line-through;
+      }
+
+      &:hover {
+        box-shadow: 0px 0px 12px -2px rgba(0, 0, 0, 0.3);
+        transition: box-shadow 0.2s ease;
+
+        &.is-selected {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/entities/entities-routes/src/types/index.ts b/packages/entities/entities-routes/src/types/index.ts
new file mode 100644
index 0000000000..fb2fa0ace7
--- /dev/null
+++ b/packages/entities/entities-routes/src/types/index.ts
@@ -0,0 +1,7 @@
+// Export all types and interfaces from this index.ts
+// The actual types and interfaces should be contained in separate files within this folder.
+
+export * from './route-list'
+export * from './method-badge'
+export * from './route-form'
+export * from './route-config-card'
diff --git a/packages/entities/entities-routes/src/types/method-badge.ts b/packages/entities/entities-routes/src/types/method-badge.ts
new file mode 100644
index 0000000000..09216e8a7b
--- /dev/null
+++ b/packages/entities/entities-routes/src/types/method-badge.ts
@@ -0,0 +1,21 @@
+/** Route method values */
+export enum Methods {
+  GET = 'GET',
+  PUT = 'PUT',
+  POST = 'POST',
+  PATCH = 'PATCH',
+  DELETE = 'DELETE',
+  OPTIONS = 'OPTIONS',
+  HEAD = 'HEAD',
+  CONNECT = 'CONNECT',
+  TRACE = 'TRACE',
+  CUSTOM = 'CUSTOM'
+}
+
+export type Method = keyof typeof Methods
+
+/** Route method badge color config */
+export interface MethodBadgeColors {
+  color: string
+  backgroundColor: string
+}
diff --git a/packages/entities/entities-routes/src/types/route-config-card.ts b/packages/entities/entities-routes/src/types/route-config-card.ts
new file mode 100644
index 0000000000..7265944b74
--- /dev/null
+++ b/packages/entities/entities-routes/src/types/route-config-card.ts
@@ -0,0 +1,33 @@
+import type { KonnectBaseEntityConfig, KongManagerBaseEntityConfig, ConfigurationSchemaItem } from '@kong-ui-public/entities-shared'
+
+/** Konnect Route entity config */
+export interface KonnectRouteEntityConfig extends KonnectBaseEntityConfig {}
+
+/** Kong Manager Route entity config */
+export interface KongManagerRouteEntityConfig extends KongManagerBaseEntityConfig {}
+
+export interface RouteConfigurationSchema {
+  // basic fields
+  id: ConfigurationSchemaItem,
+  name: ConfigurationSchemaItem,
+  protocols: ConfigurationSchemaItem,
+  service: ConfigurationSchemaItem,
+  hosts: ConfigurationSchemaItem,
+  methods: ConfigurationSchemaItem,
+  paths: ConfigurationSchemaItem,
+  headers: ConfigurationSchemaItem,
+  strip_path: ConfigurationSchemaItem,
+  preserve_host: ConfigurationSchemaItem,
+  tags: ConfigurationSchemaItem,
+  created_at: ConfigurationSchemaItem,
+  updated_at: ConfigurationSchemaItem
+  // advanced fields
+  snis: ConfigurationSchemaItem,
+  https_redirect_status_code: ConfigurationSchemaItem,
+  request_buffering: ConfigurationSchemaItem,
+  response_buffering: ConfigurationSchemaItem,
+  regex_priority: ConfigurationSchemaItem,
+  path_handling: ConfigurationSchemaItem,
+  destinations: ConfigurationSchemaItem,
+  sources: ConfigurationSchemaItem
+}
diff --git a/packages/entities/entities-routes/src/types/route-form.ts b/packages/entities/entities-routes/src/types/route-form.ts
new file mode 100644
index 0000000000..087ecc2a00
--- /dev/null
+++ b/packages/entities/entities-routes/src/types/route-form.ts
@@ -0,0 +1,102 @@
+import { BaseFormConfig, KongManagerBaseFormConfig, KonnectBaseFormConfig } from '@kong-ui-public/entities-shared'
+import { RouteLocationRaw } from 'vue-router'
+import { Methods, Method } from './method-badge'
+
+export interface BaseRouteFormConfig extends Omit<BaseFormConfig, 'cancelRoute'>{
+  /** Route to return to if canceling create/edit a Route form */
+  cancelRoute: RouteLocationRaw
+}
+
+/** Konnect Route form config */
+export interface KonnectRouteFormConfig extends Omit<KonnectBaseFormConfig, 'cancelRoute'>, BaseRouteFormConfig { }
+
+/** Kong Manager Route form config */
+export interface KongManagerRouteFormConfig extends Omit<KongManagerBaseFormConfig, 'cancelRoute'>, BaseRouteFormConfig { }
+
+export enum RoutingRulesEntities {
+  PATHS = 'paths',
+  SNIS = 'snis',
+  HOSTS = 'hosts',
+  METHODS = 'methods',
+  HEADERS = 'headers',
+  SOURCES = 'sources',
+  DESTINATIONS = 'destinations',
+  CUSTOM_METHOD = 'custom-method'
+}
+
+export type RoutingRuleEntity = Exclude<`${RoutingRulesEntities}`, 'custom-method'>
+
+export type PathHandlingVersion = 'v0' | 'v1'
+
+export type Protocol = 'grpc' | 'grpcs' | 'http' | 'https' | 'tcp' | 'tls' | 'tls_passthrough' | 'udp' | 'ws' | 'wss'
+
+export interface HeaderFields {
+  header: string
+  values: string
+}
+
+export type MethodsFields = {
+  [key in Methods | string]: boolean
+}
+
+export interface SourcesDestinationsFields {
+  ip: string
+  port: number
+}
+
+export interface Sources extends SourcesDestinationsFields { }
+
+export interface Destinations extends SourcesDestinationsFields { }
+
+export interface RouteStateFields {
+  service_id: string
+  name: string
+  tags: string
+  regex_priority: number
+  path_handling: PathHandlingVersion
+  preserve_host: boolean
+  https_redirect_status_code: number
+  protocols: string
+  request_buffering: boolean
+  response_buffering: boolean
+  strip_path: boolean
+  paths?: string[]
+  snis?: string[]
+  hosts?: string[]
+  methods?: MethodsFields
+  headers?: HeaderFields[]
+  sources?: Sources[]
+  destinations?: Destinations[]
+}
+
+export interface RouteState {
+  fields: RouteStateFields
+  isReadonly: boolean
+  errorMessage: string
+}
+
+export interface Headers {
+  [key: string]: string[]
+}
+
+export interface RoutePayload {
+  id?: string
+  service: { id: string } | null
+  name?: string | null
+  tags: string[]
+  regex_priority: number
+  path_handling: PathHandlingVersion
+  preserve_host: boolean
+  https_redirect_status_code: number
+  protocols: Protocol[]
+  request_buffering: boolean
+  response_buffering: boolean
+  strip_path?: boolean | null
+  paths?: string[] | null
+  snis?: string[] | null
+  hosts?: string[] | null
+  methods?: Array<Method | string> | null
+  headers?: Headers | null
+  sources?: Sources[] | null
+  destinations?: Destinations[] | null
+}
diff --git a/packages/entities/entities-routes/src/types/route-list.ts b/packages/entities/entities-routes/src/types/route-list.ts
new file mode 100644
index 0000000000..4e1e1a140b
--- /dev/null
+++ b/packages/entities/entities-routes/src/types/route-list.ts
@@ -0,0 +1,39 @@
+import type { RouteLocationRaw } from 'vue-router'
+import { FilterSchema, KongManagerBaseTableConfig, KonnectBaseTableConfig } from '@kong-ui-public/entities-shared'
+
+export interface BaseRouteListConfig {
+  /** Current service id if the RouteList in nested in the routes tab on a service detail page */
+  serviceId?: string
+  /** Whether to use expression flavored routes */
+  useExpression?: boolean
+  /** Route for creating a route */
+  createRoute: RouteLocationRaw
+  /** A function that returns the route for viewing a route */
+  getViewRoute: (id: string) => RouteLocationRaw
+  /** A function that returns the route for editing a route */
+  getEditRoute: (id: string) => RouteLocationRaw
+}
+
+/** Konnect route list config */
+export interface KonnectRouteListConfig extends KonnectBaseTableConfig, BaseRouteListConfig {}
+
+/** Kong Manager route list config */
+export interface KongManagerRouteListConfig extends KongManagerBaseTableConfig, BaseRouteListConfig {
+  /** FilterSchema for fuzzy match */
+  filterSchema?: FilterSchema
+}
+
+export interface EntityRow extends Record<string, any> {
+  id: string
+  name: string
+}
+
+/** Copy field event payload */
+export interface CopyEventPayload {
+  /** The entity row */
+  entity: EntityRow
+  /** The field being copied. If omitted, the entity JSON is being copied. */
+  field?: string
+  /** The toaster message */
+  message: string
+}
diff --git a/packages/entities/entities-routes/src/utilities/getMethodBadgeColors.ts b/packages/entities/entities-routes/src/utilities/getMethodBadgeColors.ts
new file mode 100644
index 0000000000..2c5f192593
--- /dev/null
+++ b/packages/entities/entities-routes/src/utilities/getMethodBadgeColors.ts
@@ -0,0 +1,50 @@
+import { Method, MethodBadgeColors } from '../types'
+
+type DefinedMethod = Exclude<Method, 'CUSTOM'>
+
+const colorMap: Record<DefinedMethod | 'DEFAULT', MethodBadgeColors> = {
+  GET: {
+    color: '#0364AC',
+    backgroundColor: '#F2F6FE',
+  },
+  DELETE: {
+    color: '#922021',
+    backgroundColor: '#FFDEDE',
+  },
+  POST: {
+    color: '#13755E',
+    backgroundColor: '#E8F8F5',
+  },
+  PATCH: {
+    color: '#006E9D',
+    backgroundColor: '#CDF1FE',
+  },
+  PUT: {
+    color: '#A05604',
+    backgroundColor: '#FFF3D8',
+  },
+  OPTIONS: {
+    color: '#273C61',
+    backgroundColor: '#DAE3F2',
+  },
+  HEAD: {
+    color: '#A05604',
+    backgroundColor: '#FFE6BA',
+  },
+  CONNECT: {
+    color: '#473CFB',
+    backgroundColor: '#D7D8FE',
+  },
+  TRACE: {
+    color: '#FFFFFF',
+    backgroundColor: '#5C7299',
+  },
+  DEFAULT: {
+    color: '#FFFFFF',
+    backgroundColor: '#5C7299',
+  },
+}
+
+export const getMethodBadgeColors = (method: DefinedMethod): MethodBadgeColors => {
+  return colorMap[method] ?? colorMap.DEFAULT
+}
diff --git a/packages/entities/entities-routes/src/utilities/helpers.ts b/packages/entities/entities-routes/src/utilities/helpers.ts
new file mode 100644
index 0000000000..61a1795f8a
--- /dev/null
+++ b/packages/entities/entities-routes/src/utilities/helpers.ts
@@ -0,0 +1,3 @@
+export const isRoutePayloadValid = (val: any): boolean => {
+  return 'service' in val && 'tags' in val && 'regex_priority' in val && 'path_handling' in val && 'protocols' in val
+}
diff --git a/packages/entities/entities-routes/src/utilities/index.ts b/packages/entities/entities-routes/src/utilities/index.ts
new file mode 100644
index 0000000000..26999230a6
--- /dev/null
+++ b/packages/entities/entities-routes/src/utilities/index.ts
@@ -0,0 +1,2 @@
+export * from './getMethodBadgeColors'
+export * from './helpers'
diff --git a/packages/entities/entities-routes/tsconfig.build.json b/packages/entities/entities-routes/tsconfig.build.json
new file mode 100644
index 0000000000..577de9d6ae
--- /dev/null
+++ b/packages/entities/entities-routes/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.cy.ts",
+    "src/**/*.spec.ts",
+    "sandbox",
+    "dist"
+  ]
+}
diff --git a/packages/entities/entities-routes/tsconfig.json b/packages/entities/entities-routes/tsconfig.json
new file mode 100644
index 0000000000..e34e90e4e4
--- /dev/null
+++ b/packages/entities/entities-routes/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "declarationDir": "dist/types",
+    "types": [
+      "node",
+      "vite/client",
+      "cypress",
+      "cypress/vue",
+      "../../../cypress/support"
+    ]
+  },
+  "include": [
+    "src/**/*",
+    "sandbox/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}
diff --git a/packages/entities/entities-routes/vite.config.ts b/packages/entities/entities-routes/vite.config.ts
new file mode 100644
index 0000000000..49e25a424b
--- /dev/null
+++ b/packages/entities/entities-routes/vite.config.ts
@@ -0,0 +1,35 @@
+import sharedViteConfig, { getApiProxies, sanitizePackageName } from '../../../vite.config.shared'
+import { resolve } from 'path'
+import { defineConfig, mergeConfig } from 'vite'
+
+// Package name MUST always match the kebab-case package name inside the component's package.json file and the name of your `/packages/{package-name}` directory
+const packageName = 'entities-routes'
+const sanitizedPackageName = sanitizePackageName(packageName)
+
+// Merge the shared Vite config with the local one defined below
+const config = mergeConfig(sharedViteConfig, defineConfig({
+  build: {
+    lib: {
+      // The kebab-case name of the exposed global variable. MUST be in the format `kong-ui-public-{package-name}`
+      // Example: name: 'kong-ui-public-demo-component'
+      name: `kong-ui-public-${sanitizedPackageName}`,
+      entry: resolve(__dirname, './src/index.ts'),
+      fileName: (format) => `${sanitizedPackageName}.${format}.js`,
+    },
+  },
+  server: {
+    proxy: {
+      // Add the API proxies to inject the Authorization header
+      ...getApiProxies(),
+    },
+  },
+}))
+
+// If we are trying to preview a build of the local `package/entities-routes/sandbox` directory,
+// unset the external and lib properties
+if (process.env.PREVIEW_SANDBOX) {
+  config.build.rollupOptions.external = undefined
+  config.build.lib = undefined
+}
+
+export default config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c79ce3c16..589e4561e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,7 +28,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       '@rushstack/eslint-patch':
         specifier: ^1.3.2
         version: 1.3.2
@@ -233,7 +233,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       '@types/uuid':
         specifier: ^9.0.2
         version: 9.0.2
@@ -284,7 +284,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       vue:
         specifier: ^3.3.4
         version: 3.3.4
@@ -306,7 +306,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       '@types/lodash.clonedeep':
         specifier: ^4.5.7
         version: 4.5.7
@@ -348,7 +348,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       vue:
         specifier: ^3.3.4
         version: 3.3.4
@@ -386,7 +386,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       '@types/lodash':
         specifier: ^4.14.196
         version: 4.14.197
@@ -413,7 +413,7 @@ importers:
         version: link:../i18n
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       vue:
         specifier: ^3.3.4
         version: 3.3.4
@@ -435,7 +435,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
@@ -460,7 +460,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
@@ -485,7 +485,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
@@ -510,7 +510,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
@@ -535,7 +535,7 @@ importers:
         version: link:../../core/i18n
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
@@ -563,7 +563,32 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
+      axios:
+        specifier: ^1.4.0
+        version: 1.4.0
+      vue:
+        specifier: ^3.3.4
+        version: 3.3.4
+      vue-router:
+        specifier: ^4.2.4
+        version: 4.2.4(vue@3.3.4)
+
+  packages/entities/entities-routes:
+    dependencies:
+      '@kong-ui-public/entities-shared':
+        specifier: workspace:^
+        version: link:../entities-shared
+    devDependencies:
+      '@kong-ui-public/i18n':
+        specifier: workspace:^
+        version: link:../../core/i18n
+      '@kong/design-tokens':
+        specifier: ^1.8.0
+        version: 1.9.0
+      '@kong/kongponents':
+        specifier: ^8.116.2
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
@@ -594,7 +619,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
@@ -619,7 +644,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
@@ -644,7 +669,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
@@ -669,7 +694,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       '@types/prismjs':
         specifier: ^1.26.0
         version: 1.26.0
@@ -700,7 +725,7 @@ importers:
         version: 1.9.0
       '@kong/kongponents':
         specifier: ^8.121.1
-        version: 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+        version: 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       '@modyfi/vite-plugin-yaml':
         specifier: ^1.0.4
         version: 1.0.4(vite@4.4.8)
@@ -1841,7 +1866,7 @@ packages:
       '@kong/kongponents': ^8.83.5
       vue: ^3.2.47
     dependencies:
-      '@kong/kongponents': 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+      '@kong/kongponents': 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       approximate-number: 2.1.1
       vue: 3.3.4
     dev: false
@@ -1850,14 +1875,15 @@ packages:
     resolution: {integrity: sha512-y68F8uUxLQZDRqN8365TPVsYPNPS9jGTlsap8A6N2MkYHYZ75Qnewl7cK6M+YUbG9AUx1YE64vt1yQe5+/Ydzg==}
     dev: true
 
-  /@kong/kongponents@8.122.2(vue-router@4.2.4)(vue@3.3.4):
+  /@kong/kongponents@8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4):
     resolution: {integrity: sha512-TdjmomMZdBNRvucdYFC2/TVVF5gyggyPukSa35Q0TETpNL7Uq2IhFMM1arrjsbKun4Ri/J1L+pF0ViPudOMPQQ==}
     engines: {node: '>=16.19.0'}
     peerDependencies:
+      axios: ^0.27.2
       vue: '>= 3.3.0'
       vue-router: ^4.1.6
     dependencies:
-      axios: 0.27.2
+      axios: 1.4.0
       date-fns: 2.30.0
       date-fns-tz: 1.3.8(date-fns@2.30.0)
       focus-trap: 7.5.2
@@ -1872,7 +1898,6 @@ packages:
       vue-router: 4.2.4(vue@3.3.4)
     transitivePeerDependencies:
       - '@popperjs/core'
-      - debug
 
   /@kong/swagger-ui-kong-theme-universal@4.2.6(react-dom@17.0.2)(react@17.0.2)(vue-router@4.2.4)(vue@3.3.4):
     resolution: {integrity: sha512-ZZtnsER3yHFnzjy5OO3jYgeY3ZCuhQP6IFqwq2vUj9HntyJUBOBUxvTJ9YJoQHz2wMVuatdUJHadQcUVS/Cktw==}
@@ -1880,7 +1905,7 @@ packages:
       react: 17.0.2
     dependencies:
       '@braintree/sanitize-url': 2.1.0
-      '@kong/kongponents': 8.122.2(vue-router@4.2.4)(vue@3.3.4)
+      '@kong/kongponents': 8.122.2(axios@1.4.0)(vue-router@4.2.4)(vue@3.3.4)
       '@kyleshockey/xml': 1.0.2
       classnames: 2.3.2
       curl-to-har: 1.0.1
@@ -1897,7 +1922,7 @@ packages:
     transitivePeerDependencies:
       - '@babel/core'
       - '@popperjs/core'
-      - debug
+      - axios
       - mkdirp
       - prop-types
       - react-dom
@@ -4318,14 +4343,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.4.0:
     resolution: {integrity: sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==}
     dependencies: