diff --git a/otoroshi/app/api/api.scala b/otoroshi/app/api/api.scala
index 28be74d2a..4eaada5d6 100644
--- a/otoroshi/app/api/api.scala
+++ b/otoroshi/app/api/api.scala
@@ -879,7 +879,27 @@ class OtoroshiResources(env: Env) {
         stateOne = id => env.proxyState.api(id),
         stateUpdate = seq => env.proxyState.updateApis(seq)
       )
-    )
+    ),
+//    //////
+//    Resource(
+//      "Flow",
+//      "flows",
+//      "flow",
+//      "flows.otoroshi.io",
+//      ResourceVersion("v1", true, false, true),
+//      GenericResourceAccessApiWithState[Flow](
+//        Flow.format,
+//        classOf[Flow],
+//        env.datastores.flowDataStore.key,
+//        env.datastores.flowDataStore.extractId,
+//        json => json.select("id").asString,
+//        () => "id",
+//        (_v, _p) => env.datastores.flowDataStore.template(env).json,
+//        stateAll = () => env.proxyState.allFlows(),
+//        stateOne = id => env.proxyState.flow(id),
+//        stateUpdate = seq => env.proxyState.updateFlows(seq)
+//      )
+//    )
   ) ++ env.adminExtensions.resources()
 }
 
diff --git a/otoroshi/app/next/controllers/frontends.scala b/otoroshi/app/next/controllers/frontends.scala
index 47ca7136d..4b2c2d230 100644
--- a/otoroshi/app/next/controllers/frontends.scala
+++ b/otoroshi/app/next/controllers/frontends.scala
@@ -20,6 +20,7 @@ class NgFrontendsController(val ApiAction: ApiAction, val cc: ControllerComponen
 
   lazy val logger = Logger("otoroshi-frontends-api")
 
+  // TODO - ???
   def form() = ApiAction {
     env.openApiSchema.asForms.get("otoroshi.next.models.NgFrontend") match {
       case Some(value) =>
@@ -42,4 +43,8 @@ class NgFrontendsController(val ApiAction: ApiAction, val cc: ControllerComponen
       case _           => NotFound(Json.obj("error" -> "Schema and flow not found"))
     }
   }
+
+  def template() = ApiAction {
+    Ok(NgFrontend.empty.json)
+  }
 }
diff --git a/otoroshi/app/next/models/Api.scala b/otoroshi/app/next/models/Api.scala
index e760a290f..33e2c3320 100644
--- a/otoroshi/app/next/models/Api.scala
+++ b/otoroshi/app/next/models/Api.scala
@@ -10,7 +10,7 @@ import otoroshi.next.plugins.NgApikeyCallsConfig
 import otoroshi.security.IdGenerator
 import otoroshi.storage.{BasicStore, RedisLike, RedisLikeStore}
 import otoroshi.utils.syntax.implicits.{BetterJsReadable, BetterJsValue}
-import play.api.libs.json.{Format, JsArray, JsError, JsResult, JsString, JsSuccess, JsValue, Json}
+import play.api.libs.json.{Format, JsArray, JsBoolean, JsError, JsNull, JsNumber, JsObject, JsResult, JsString, JsSuccess, JsValue, Json}
 
 import scala.util.{Failure, Success, Try}
 
@@ -65,16 +65,18 @@ case object ApiRemoved extends ApiState {
 //  }
 //}
 
-case class ApiRoute(frontend: NgFrontend, flows: String, backend: String)
+case class ApiRoute(id: String, name: Option[String], frontend: NgFrontend, flowRef: String, backend: ApiBackend)
 
 object ApiRoute {
   val _fmt = new Format[ApiRoute] {
 
     override def reads(json: JsValue): JsResult[ApiRoute] = Try {
       ApiRoute(
-        frontend = NgFrontend.readFrom((json \ "frontend")),
-        flows = (json \ "flows").as[String],
-        backend = (json \ "backend").as[String]
+        id = json.select("id").as[String],
+        name = json.select("name").asOpt[String],
+        frontend = NgFrontend.readFrom(json \ "frontend"),
+        flowRef = (json \ "flow_ref").as[String],
+        backend = (json \ "backend").as[ApiBackend](ApiBackend._fmt)
       )
     } match {
       case Failure(ex)    =>
@@ -84,7 +86,11 @@ object ApiRoute {
     }
 
     override def writes(o: ApiRoute): JsValue = Json.obj(
-
+      "id"        -> o.id,
+      "name"      -> o.name,
+      "frontend"  -> o.frontend.json,
+      "backend"   -> ApiBackend._fmt.writes(o.backend),
+      "flow_ref"  -> o.flowRef
     )
   }
 }
@@ -260,9 +266,7 @@ object ApiDocumentation {
           .getOrElse(Seq.empty)
       )
     } match {
-      case Failure(ex)    =>
-        ex.printStackTrace()
-        JsError(ex.getMessage)
+      case Failure(ex)    => JsError(ex.getMessage)
       case Success(value) => JsSuccess(value)
     }
 
@@ -474,17 +478,22 @@ object ApiConsumerStatus {
   }
 }
 
-case class ApiBackend(id: String, name: String, backend: NgBackend)
+sealed trait ApiBackend
 
 object ApiBackend {
-  val _fmt: Format[ApiBackend] = new Format[ApiBackend] {
+  case class ApiBackendRef(ref: String) extends ApiBackend
+  case class ApiBackendInline(id: String, name: String, backend: NgBackend) extends ApiBackend
 
+  val _fmt: Format[ApiBackend] = new Format[ApiBackend] {
     override def reads(json: JsValue): JsResult[ApiBackend] = Try {
-      ApiBackend(
-        id = json.select("id").as[String],
-        name = json.select("name").as[String],
-        backend = json.select("backend").as(NgBackend.fmt)
-      )
+      json.select("ref").asOpt[String] match {
+        case Some(ref)  => ApiBackendRef(ref)
+        case None       => ApiBackendInline(
+          id = json.select("id").as[String],
+          name = json.select("name").as[String],
+          backend = json.select("backend").as(NgBackend.fmt)
+        )
+      }
     } match {
       case Failure(ex)    =>
         ex.printStackTrace()
@@ -492,11 +501,16 @@ object ApiBackend {
       case Success(value) => JsSuccess(value)
     }
 
-    override def writes(o: ApiBackend): JsValue = Json.obj(
-      "id"      -> o.id,
-      "name"    -> o.name,
-      "backend" -> NgBackend.fmt.writes(o.backend)
-    )
+    override def writes(o: ApiBackend): JsValue = {
+      o match {
+        case ApiBackendRef(ref) => Json.obj("ref" -> ref)
+        case ApiBackendInline(id, name, backend) => Json.obj(
+          "id"      -> id,
+          "name"    -> name,
+          "backend" -> NgBackend.fmt.writes(backend)
+        )
+      }
+    }
   }
 }
 
@@ -628,7 +642,8 @@ object Api {
           .asOpt[Seq[JsValue]]
           .map(_.flatMap(v => ApiBackendClient._fmt.reads(v).asOpt))
           .getOrElse(Seq.empty),
-        documentation = ApiDocumentation._fmt.reads((json \ "documentation").as[JsValue]).asOpt,
+        documentation = (json \ "documentation")
+          .asOpt[ApiDocumentation](ApiDocumentation._fmt.reads),
         consumers = (json \ "consumers")
           .asOpt[Seq[JsValue]]
           .map(_.flatMap(v => ApiConsumer._fmt.reads(v).asOpt))
diff --git a/otoroshi/conf/routes b/otoroshi/conf/routes
index a36460e6f..5b2b2337a 100644
--- a/otoroshi/conf/routes
+++ b/otoroshi/conf/routes
@@ -555,7 +555,9 @@ GET     /api/backends                          otoroshi.next.controllers.adminap
 POST    /api/backends                          otoroshi.next.controllers.adminapi.NgBackendsController.createAction()
 
 ## Frontends
+## TODO - remove this endpoint
 GET     /api/frontends/_form                     otoroshi.next.controllers.adminapi.NgFrontendsController.form()
+GET     /api/frontends/_template                 otoroshi.next.controllers.adminapi.NgFrontendsController.template()
 
 ## Plugins
 GET     /api/plugins/categories                otoroshi.next.controllers.NgPluginsController.categories()
diff --git a/otoroshi/javascript/src/components/Drafts/DraftEditor.js b/otoroshi/javascript/src/components/Drafts/DraftEditor.js
index 62399520e..0a41b2cf1 100644
--- a/otoroshi/javascript/src/components/Drafts/DraftEditor.js
+++ b/otoroshi/javascript/src/components/Drafts/DraftEditor.js
@@ -15,7 +15,12 @@ import { PillButton } from '../PillButton';
 import JsonViewCompare from './Compare';
 import { Button } from '../Button';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  queries: {
+    retry: false,
+    refetchOnWindowFocus: false
+  },
+});
 
 function findDraftByEntityId(id) {
   return nextClient.forEntityNext(nextClient.ENTITIES.DRAFTS).findById(id);
diff --git a/otoroshi/javascript/src/components/nginputs/inputs.js b/otoroshi/javascript/src/components/nginputs/inputs.js
index 9cffd65f9..79c9b697a 100644
--- a/otoroshi/javascript/src/components/nginputs/inputs.js
+++ b/otoroshi/javascript/src/components/nginputs/inputs.js
@@ -143,9 +143,8 @@ export class NgDotsRenderer extends Component {
 
               return (
                 <button
-                  className={`btn btn-radius-25 btn-sm ${
-                    backgroundColorFromOption ? '' : selected ? 'btn-primary' : 'btn-dark'
-                  } me-1 px-3 mb-1`}
+                  className={`btn btn-radius-25 btn-sm ${backgroundColorFromOption ? '' : selected ? 'btn-primary' : 'btn-dark'
+                    } me-1 px-3 mb-1`}
                   type="button"
                   key={rawOption}
                   style={style}
@@ -605,10 +604,10 @@ export class NgBoxBooleanRenderer extends Component {
     const Container = this.props.rawDisplay
       ? ({ children }) => children
       : ({ children }) => (
-          <div className={`row mb-${margin} ${className || ''}`}>
-            <div className="col-sm-10 ms-auto">{children}</div>
-          </div>
-        );
+        <div className={`row mb-${margin} ${className || ''}`}>
+          <div className="col-sm-10 ms-auto">{children}</div>
+        </div>
+      );
 
     return (
       <Container>
@@ -688,8 +687,8 @@ export class NgArrayRenderer extends Component {
     form: () => ({
       ...this.generateDefaultValue(current.schema),
     }),
-    object: () => {},
-    json: () => {},
+    object: () => { },
+    json: () => { },
   });
 
   generateDefaultValue = (obj) => {
@@ -883,21 +882,21 @@ export class NgObjectRenderer extends Component {
             itemRenderer={
               ItemRenderer
                 ? (key, value, idx) => (
-                    <ItemRenderer
-                      embedded
-                      flow={this.props.flow}
-                      schema={this.props.schema}
-                      value={value}
-                      key={key}
-                      idx={idx}
-                      onChange={(e) => {
-                        const newObject = this.props.value ? { ...this.props.value } : {};
-                        newObject[key] = e;
-                        this.props.onChange(newObject);
-                      }}
-                      {...props}
-                    />
-                  )
+                  <ItemRenderer
+                    embedded
+                    flow={this.props.flow}
+                    schema={this.props.schema}
+                    value={value}
+                    key={key}
+                    idx={idx}
+                    onChange={(e) => {
+                      const newObject = this.props.value ? { ...this.props.value } : {};
+                      newObject[key] = e;
+                      this.props.onChange(newObject);
+                    }}
+                    {...props}
+                  />
+                )
                 : null
             }
           />
diff --git a/otoroshi/javascript/src/forms/ng_plugins/NgBackend.js b/otoroshi/javascript/src/forms/ng_plugins/NgBackend.js
index 6834d9ee0..e5fb2b6bf 100644
--- a/otoroshi/javascript/src/forms/ng_plugins/NgBackend.js
+++ b/otoroshi/javascript/src/forms/ng_plugins/NgBackend.js
@@ -7,7 +7,7 @@ export default {
   field: 'backend',
   schema: {
     root: {
-      label: 'root',
+      label: 'Root',
       type: 'string',
       help: 'The root URL of the target service',
     },
diff --git a/otoroshi/javascript/src/forms/ng_plugins/index.js b/otoroshi/javascript/src/forms/ng_plugins/index.js
index b882fa2c7..a698e3b6a 100644
--- a/otoroshi/javascript/src/forms/ng_plugins/index.js
+++ b/otoroshi/javascript/src/forms/ng_plugins/index.js
@@ -149,7 +149,7 @@ import NgApiFrontend from './NgApiFrontend';
 import NgApiBackend from './NgApiBackend';
 
 export const Backend = NgBackend;
-export const Frontend = NgApiFrontend;
+export const Frontend = NgFrontend;
 export const ApiFrontend = NgApiFrontend;
 export const ApiBackend = NgApiBackend;
 
diff --git a/otoroshi/javascript/src/pages/ApiEditor/index.js b/otoroshi/javascript/src/pages/ApiEditor/index.js
index 2b5b0d34e..efdd9a377 100644
--- a/otoroshi/javascript/src/pages/ApiEditor/index.js
+++ b/otoroshi/javascript/src/pages/ApiEditor/index.js
@@ -18,10 +18,17 @@ import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 import { Button } from '../../components/Button';
 import { schemas } from '../RouteDesigner/form';
 import NgBackend from '../../forms/ng_plugins/NgBackend';
-import { NgForm } from '../../components/nginputs';
+import { NgForm, NgSelectRenderer } from '../../components/nginputs';
 import { BackendForm } from '../RouteDesigner/BackendNode';
+import { PillButton } from '../../components/PillButton';
+import NgFrontend from '../../forms/ng_plugins/NgFrontend';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+    queries: {
+        retry: false,
+        refetchOnWindowFocus: false
+    },
+});
 
 const RouteWithProps = ({ component: Component, ...rest }) => (
     <Route
@@ -34,6 +41,10 @@ export default function ApiEditor(props) {
     return <div className='editor'>
         <QueryClientProvider client={queryClient}>
             <Switch>
+                <RouteWithProps exact path='/apis/:apiId/routes' component={Routes} props={props} />
+                <RouteWithProps exact path='/apis/:apiId/routes/new' component={NewRoute} props={props} />
+                <RouteWithProps exact path='/apis/:apiId/routes/:routeId/:action' component={RouteDesigner} props={props} />
+
                 <RouteWithProps exact path='/apis/:apiId/flows' component={Flows} props={props} />
                 <RouteWithProps exact path='/apis/:apiId/flows/new' component={NewFlow} props={props} />
                 <RouteWithProps exact path='/apis/:apiId/flows/:flowId/:action' component={FlowDesigner} props={props} />
@@ -50,6 +61,222 @@ export default function ApiEditor(props) {
     </div >
 }
 
+function RouteDesigner() {
+    return <p>Route designer</p>
+}
+
+function NewRoute(props) {
+    const params = useParams()
+    const history = useHistory()
+
+    const [schema, setSchema] = useState()
+
+    const rawAPI = useQuery(["getAPI", params.apiId],
+        () => nextClient.forEntityNext(nextClient.ENTITIES.APIS).findById(params.apiId), {
+        retry: 0,
+        onSuccess: data => {
+            setSchema({
+                name: {
+                    type: 'string',
+                    label: 'Route name',
+                    placeholder: 'My users route'
+                },
+                frontend: {
+                    type: 'form',
+                    label: 'Frontend',
+                    schema: NgFrontend.schema,
+                    flow: NgFrontend.flow,
+                    // v2: {
+                    //     folded: ['domains'],
+                    //     flow: [
+                    //         "domains",
+                    //     ],
+                    // }
+                },
+                flow_ref: {
+                    type: 'select',
+                    label: 'Flow ID',
+                    props: {
+                        options: data.flows,
+                        optionsTransformer: {
+                            label: 'name',
+                            value: 'id',
+                        }
+                    },
+                },
+                backend: {
+                    type: 'form',
+                    label: 'Backend',
+                    schema: NgBackend.schema,
+                    flow: NgBackend.flow
+                }
+            })
+        }
+    })
+
+    const flow = [
+        {
+            type: 'group',
+            collapsable: true,
+            collapsed: true,
+            name: '1. Set your domains',
+            fields: ['frontend'],
+            summaryFields: ['domains']
+        },
+        {
+            type: 'group',
+            collapsable: true,
+            collapsed: true,
+            name: '2. Add plugins to your route by selecting a flow',
+            fields: ['flow_ref'],
+        },
+        {
+            type: 'group',
+            collapsable: true,
+            collapsed: true,
+            name: '3. Configure the backend',
+            fields: ['backend'],
+        },
+        {
+            type: 'group',
+            collapsable: true,
+            collapsed: true,
+            name: '4. Additional informations',
+            fields: ['name'],
+        }
+    ]
+
+    const [route, setRoute] = useState({})
+
+    const saveRoute = () => {
+        return nextClient
+            .forEntityNext(nextClient.ENTITIES.APIS)
+            .update({
+                ...rawAPI.data,
+                routes: [
+                    ...rawAPI.data.routes, {
+                        ...route,
+                        id: v4()
+                    }
+                ]
+            })
+            .then(() => history.push(`/apis/${params.apiId}/routes`))
+    }
+
+    const templatesQuery = useQuery(["getTemplates"],
+        () => Promise.all([
+            nextClient.forEntityNext(nextClient.ENTITIES.BACKENDS).template(),
+            fetch(`/bo/api/proxy/api/frontends/_template`, {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    Accept: 'application/json',
+                },
+            })
+                .then(r => r.json())
+        ]), {
+            onSuccess: ([backendTemplate, frontendTemplate]) => {
+                setRoute({
+                    ...route,
+                    frontend: frontendTemplate,
+                    backend: backendTemplate,
+                })
+            }
+        })
+
+    return <Loader loading={rawAPI.isLoading || !schema || templatesQuery.isLoading}>
+        <SidebarComponent {...props} />
+        <PageTitle title="New Route" {...props} style={{ paddingBottom: 0 }} />
+
+        <div style={{
+            maxWidth: 640,
+            margin: 'auto'
+        }}>
+            <NgForm
+                value={route}
+                flow={flow}
+                schema={schema}
+                onChange={newValue => setRoute(newValue)} />
+            <FeedbackButton
+                type="success"
+                className="d-flex mt-3 ms-auto"
+                onPress={saveRoute}
+                disabled={!route.flow_ref}
+                text="Create"
+            />
+        </div>
+    </Loader>
+}
+
+function Routes(props) {
+    const history = useHistory()
+    const params = useParams()
+
+    const columns = [
+        {
+            title: 'Name',
+            filterId: 'name',
+            content: (item) => item.name,
+        },
+        { title: 'Description', filterId: 'description', content: (item) => item.description },
+    ];
+
+    const rawAPI = useQuery(["getAPI", params.apiId],
+        () => nextClient.forEntityNext(nextClient.ENTITIES.APIS).findById(params.apiId), {
+        retry: 0
+    })
+
+    useEffect(() => {
+        props.setTitle(`Routes of ${rawAPI.data?.name}`)
+
+        return () => props.setTitle('')
+    }, [rawAPI.data])
+
+    const client = nextClient.forEntityNext(nextClient.ENTITIES.APIS)
+    const api = rawAPI.data;
+
+    const deleteItem = item => client.update({
+        ...api,
+        routes: api.routes.filter(f => f.id !== item.id)
+    })
+
+    const fields = []
+
+    return <Loader loading={rawAPI.isLoading}>
+        <SidebarComponent {...props} />
+        <Table
+            parentProps={{ params }}
+            navigateTo={(item) => history.push(`/apis/${params.apiId}/routes/${item.id}/edit`)}
+            navigateOnEdit={(item) => history.push(`/apis/${params.apiId}/routes/${item.id}/edit`)}
+            selfUrl="routes"
+            defaultTitle="Route"
+            itemName="Route"
+            columns={columns}
+            fields={fields}
+            deleteItem={deleteItem}
+            fetchTemplate={client.template}
+            fetchItems={() => Promise.resolve(rawAPI.data?.routes || [])}
+            defaultSort="name"
+            defaultSortDesc="true"
+            showActions={true}
+            showLink={false}
+            extractKey={(item) => item.id}
+            rowNavigation={true}
+            hideAddItemAction={true}
+            itemUrl={(i) => `/bo/dashboard/apis/${params.apiId}/routes/${i.id}/edit`}
+            rawEditUrl={true}
+            displayTrash={(item) => item.id === props.globalEnv.adminApiId}
+            injectTopBar={() => (
+                <div className="btn-group input-group-btn">
+                    <Link className="btn btn-primary btn-sm" to="routes/new">
+                        <i className="fas fa-plus-circle" /> Create new route
+                    </Link>
+                    {props.injectTopBar}
+                </div>
+            )} />
+    </Loader>
+}
+
 function Backends(props) {
     const history = useHistory()
     const params = useParams()
@@ -70,6 +297,8 @@ function Backends(props) {
 
     useEffect(() => {
         props.setTitle(`Backends of ${rawAPI.data?.name}`)
+
+        return () => props.setTitle('')
     }, [rawAPI.data])
 
     const client = nextClient.forEntityNext(nextClient.ENTITIES.BACKENDS)
@@ -96,8 +325,8 @@ function Backends(props) {
         <SidebarComponent {...props} />
         <Table
             parentProps={{ params }}
-            navigateTo={(item) => history.push(`/apis/${params.apiId}/backends/${item.id}`)}
-            navigateOnEdit={(item) => history.push(`/apis/${params.apiId}/backends/${item.id}`)}
+            navigateTo={(item) => history.push(`/apis/${params.apiId}/backends/${item.id}/edit`)}
+            navigateOnEdit={(item) => history.push(`/apis/${params.apiId}/backends/${item.id}/edit`)}
             selfUrl="backends"
             defaultTitle="Backend"
             itemName="Backend"
@@ -131,43 +360,30 @@ function NewBackend(props) {
     const params = useParams()
     const history = useHistory()
 
-    const [backend, setBackend] = useState()
-    const ref = useRef(backend)
-
-    const apiRef = useRef(backend)
+    // const [usingExistingBackend, setUsingExistingBackend] = useState(false)
 
-    useEffect(() => {
-        ref.current = backend
-    }, [backend])
-
-    useEffect(() => {
-        dynamicTitleContent.value = (
-            <PageTitle title="New Backend" {...props} style={{ paddingBottom: 0 }}>
-                <FeedbackButton
-                    type="success"
-                    className="ms-2 mb-1"
-                    onPress={saveBackend}
-                    text="Create"
-                />
-            </PageTitle>
-        );
-    }, [])
+    const [backend, setBackend] = useState()
 
     const rawAPI = useQuery(["getAPI", params.apiId],
-        () => nextClient.forEntityNext(nextClient.ENTITIES.APIS).findById(params.apiId), {
-        retry: 0
-    })
-
-    useEffect(() => {
-        apiRef.current = rawAPI.data
-    }, [rawAPI.data])
+        () => nextClient.forEntityNext(nextClient.ENTITIES.APIS).findById(params.apiId))
+
+    // const [backends, setBackends] = useState([])
+    // const backendsQuery = useQuery(['getBackends'],
+    //     () => nextClient.forEntityNext(nextClient.ENTITIES.BACKENDS).findAll(),
+    //     {
+    //         enabled: usingExistingBackend && backends.length <= 0,
+    //         onSuccess: setBackends
+    //     })
 
     const saveBackend = () => {
+        const { id, name, ...rest } = backend
         return nextClient
             .forEntityNext(nextClient.ENTITIES.APIS)
             .update({
-                ...apiRef.current,
-                backends: [...apiRef.current.backends, ref.current]
+                ...rawAPI.data,
+                backends: [...rawAPI.data.backends, {
+                    id, name, backend: rest
+                }]
             })
             .then(() => history.push(`/apis/${params.apiId}/backends`))
     }
@@ -182,17 +398,63 @@ function NewBackend(props) {
         })
     });
 
-    console.log(backend)
-
     return <Loader loading={templateQuery.isLoading || rawAPI.isLoading}>
+        <SidebarComponent {...props} />
+        <PageTitle title="New Backend" {...props} style={{ paddingBottom: 0 }}>
+            <FeedbackButton
+                type="success"
+                className="ms-2 mb-1"
+                onPress={saveBackend}
+                text="Create"
+            />
+        </PageTitle>
+
         <div style={{
             maxWidth: 640,
             margin: 'auto'
         }}>
+            {/* <div className="row mb-3">
+                <label className="col-xs-12 col-sm-2 col-form-label" />
+                <div className="col-sm-10">
+                    <PillButton
+                        pillButtonStyle={{ width: 'auto', flex: 1 }}
+                        style={{ display: 'flex', width: '100%', minHeight: 36, maxWidth: 420 }}
+                        className='pb-3'
+                        rightEnabled={usingExistingBackend}
+                        leftText="Select an existing backend"
+                        rightText="Create a new backend"
+                        onChange={setUsingExistingBackend}
+                    />
+                </div>
+            </div> */}
+            {/* {usingExistingBackend && <Loader loading={backendsQuery.isLoading}>
+                <div className="row mb-3">
+                    <label className="col-xs-12 col-sm-2 col-form-label" >Backends</label>
+                    <div className="col-sm-10">
+                        <NgSelectRenderer
+                            id="backend_select"
+                            value={backend}
+                            placeholder="Select an existing backend"
+                            label={' '}
+                            ngOptions={{
+                                spread: true,
+                            }}
+                            isClearable
+                            onChange={setBackend}
+                            options={backendsQuery.data}
+                            optionsTransformer={(arr) =>
+                                arr.map((item) => ({ label: item.name, value: item.id }))
+                            }
+                        />
+                    </div>
+                </div>
+            </Loader>} */}
+            {/* {!usingExistingBackend &&  */}
             <BackendForm state={{
                 form: {
                     schema: {
                         name: {
+                            label: 'Name',
                             type: 'string',
                             placeholder: 'New backend'
                         },
@@ -201,11 +463,78 @@ function NewBackend(props) {
                     flow: ['name', 'root', 'rewrite', 'targets'],
                     value: backend,
                 }
-            }} onChange={setBackend} />
+            }}
+                onChange={setBackend} />
+            {/* } */}
         </div>
     </Loader>
 }
 
+// function BackendSelector() {
+//     return <>
+//         <h3>Select a backend template</h3>
+//         <div
+//             style={{
+//                 display: 'flex',
+//                 flexDirection: 'column',
+//                 gap: '10px',
+//             }}
+//         >
+//             {[
+//                 {
+//                     kind: 'empty',
+//                     title: 'BLANK ROUTE',
+//                     text: 'From scratch, no plugin added',
+//                 },
+//                 {
+//                     kind: 'api',
+//                     title: 'REST API',
+//                     text: 'Already setup secured rest api with api management',
+//                 },
+//                 {
+//                     kind: 'webapp',
+//                     title: 'WEBAPP',
+//                     text: 'Already setup web application with authentication',
+//                 },
+//                 {
+//                     kind: 'graphql-proxy',
+//                     title: 'GRAPHQL API',
+//                     text: 'Already setup grapqhl api with api management and validation',
+//                 },
+//                 {
+//                     kind: 'mock',
+//                     title: 'QUICKSTART REST API',
+//                     text: 'Already setup rest api with extended mocking capabilities',
+//                 },
+//                 {
+//                     kind: 'graphql',
+//                     title: 'GRAPHQL COMPOSER API',
+//                     text: 'Create a graphql api from scratch from existing sources',
+//                 },
+//             ].map(({ kind, title, text }) => (
+//                 <button
+//                     type="button"
+//                     className={`btn py-3 wizard-route-chooser  ${state.route.kind === kind ? 'btn-primaryColor' : 'btn-quiet'
+//                         }`}
+//                     onClick={() => onChange(kind)}
+//                     key={kind}
+//                 >
+//                     <h3 className="wizard-h3--small">{title}</h3>
+//                     <span
+//                         style={{
+//                             flex: 1,
+//                             display: 'flex',
+//                             alignItems: 'center',
+//                         }}
+//                     >
+//                         {text}
+//                     </span>
+//                 </button>
+//             ))}
+//         </div>
+//     </>
+// }
+
 function EditBackend() {
 
 }
@@ -398,14 +727,17 @@ function Apis(props) {
             parentProps={{ params }}
             navigateTo={(item) => history.push(`/apis/${item.id}`)}
             navigateOnEdit={(item) => history.push(`/apis/${item.id}`)}
-            selfUrl="flows"
-            defaultTitle="Flow"
-            itemName="Flow"
+            selfUrl="apis"
+            defaultTitle="Api"
+            itemName="Api"
             formSchema={null}
             formFlow={null}
             columns={columns}
             fields={fields}
-            deleteItem={(item) => console.log('delete item', item)}
+            deleteItem={(item) => nextClient
+                .forEntityNext(nextClient.ENTITIES.APIS).deleteById(item.id)
+                .then(() => window.location.reload())
+            }
             defaultSort="name"
             defaultSortDesc="true"
             fetchItems={fetchItems}
@@ -645,7 +977,7 @@ function Dashboard(props) {
                     <Entities>
                         <FlowsCard flows={api.flows} />
                         <BackendsCard backends={api.backends} />
-                        <Routes routes={api.routes} />
+                        <RoutesCard routes={api.routes} />
                     </Entities>
                 </ContainerBlock>
             </div>}
@@ -737,8 +1069,9 @@ function BackendsCard({ backends }) {
     </Link>
 }
 
-function Routes({ routes }) {
-    return <Link to="routes" className="cards apis-cards">
+function RoutesCard({ routes }) {
+    const params = useParams()
+    return <Link to={`/apis/${params.apiId}/routes`} className="cards apis-cards">
         {/* <div
             className="cards-header"
             style={{
@@ -753,7 +1086,7 @@ function Routes({ routes }) {
                 </span>
             </div>
             <p className="cards-description relative">
-                Define your <HighlighedRouteText />: connect <HighlighedFrontendText plural /> to <HighlighedBackendText plural /> and customize behavior with <HighlighedPluginsText plural /> like authentication, rate limiting, and transformations.
+                Define your <HighlighedRouteText />: connect <HighlighedFrontendText plural /> to <HighlighedBackendText plural /> and customize behavior with <HighlighedFlowsText plural /> like authentication, rate limiting, and transformations.
                 <i className='fas fa-chevron-right fa-lg navigate-icon' />
             </p>
         </div>
@@ -795,11 +1128,18 @@ function HighlighedBackendText({ plural }) {
 }
 
 function HighlighedFrontendText({ plural }) {
-    return <HighlighedText text={plural ? 'frontends' : "frontend"} link="/apis/frontends" />
+    const params = useParams()
+    return <HighlighedText text={plural ? 'frontends' : "frontend"} link={`/apis/${params.apiId}/frontends`} />
 }
 
 function HighlighedRouteText({ plural }) {
-    return <HighlighedText text={plural ? 'routes' : "route"} link="/apis/routes" />
+    const params = useParams()
+    return <HighlighedText text={plural ? 'routes' : "route"} link={`/apis/${params.apiId}/routes`} />
+}
+
+function HighlighedFlowsText({ plural }) {
+    const params = useParams()
+    return <HighlighedText text={plural ? 'flows' : "flow"} link={`/apis/${params.apiId}/flows`} />
 }
 
 function HighlighedText({ text, link }) {