From e77d6fdbf68b258f69db03b77675541944d28ba5 Mon Sep 17 00:00:00 2001
From: Ilya Melnikov <70610034+melil02@users.noreply.github.com>
Date: Wed, 9 Jun 2021 13:04:30 -0700
Subject: [PATCH] 5.0.2 release (#23)

---
 cypress/integration/applications.js           | 139 ++++++-
 packages/example/src/layout/AppBar.js         |   2 +-
 packages/example/src/layout/HomePage.js       |   3 +-
 packages/layer7-apihub-mock/src/data/index.js |  45 +++
 .../layer7-apihub-mock/src/defaultData.json   |  33 +-
 .../src/handlers/apiKeys.js                   |  44 +++
 .../src/handlers/apiPlans.js                  |   9 +-
 packages/layer7-apihub-mock/src/index.js      |  17 +-
 .../applications/ApiSelector/ApiSelector.js   | 109 ++++-
 .../SelectionList/ApiSelectionListItem.js     | 148 +++++--
 .../SelectionList/SelectionList.js            |  48 ++-
 .../src/applications/ApplicationActions.js    | 171 --------
 .../src/applications/ApplicationApisList.js   |  16 +-
 .../src/applications/ApplicationDetails.js    | 186 +++++----
 .../ApplicationDetailsKeyClient.js            | 342 ++++++++++++++++
 .../ApplicationDetailsKeyClient.test.js       | 134 +++++++
 .../src/applications/ApplicationEditView.js   |   1 +
 .../src/applications/ApplicationKeyClient.js  |  24 +-
 .../src/applications/ApplicationList.js       |   2 -
 .../src/applications/ApplicationNew.js        |  31 +-
 .../src/applications/ApplicationShow.js       |  21 +-
 .../AccountSetup/useAccountData.js            |   4 +-
 .../layer7-apihub/src/dataProvider/apiKeys.js |  34 ++
 .../layer7-apihub/src/dataProvider/index.js   |   2 +
 packages/layer7-apihub/src/i18n/en.js         |   8 +-
 packages/layer7-apihub/src/i18n/es.js         |   6 +
 packages/layer7-apihub/src/i18n/fr.js         |   6 +
 packages/layer7-apihub/src/i18n/it.js         |   6 +
 packages/layer7-apihub/src/ui/List.js         |   6 +-
 .../layer7-apihub/src/ui/LoadingDialog.js     |  45 +++
 pom.xml                                       |   2 +-
 remote-hosting/.gitignore                     |   2 +
 remote-hosting/README.md                      |  13 +
 remote-hosting/index.js                       |  26 ++
 remote-hosting/package-lock.json              | 374 ++++++++++++++++++
 remote-hosting/package.json                   |  13 +
 yarn.lock                                     |  24 +-
 37 files changed, 1674 insertions(+), 422 deletions(-)
 create mode 100755 packages/layer7-apihub-mock/src/handlers/apiKeys.js
 delete mode 100755 packages/layer7-apihub/src/applications/ApplicationActions.js
 create mode 100755 packages/layer7-apihub/src/applications/ApplicationDetailsKeyClient.js
 create mode 100755 packages/layer7-apihub/src/applications/ApplicationDetailsKeyClient.test.js
 create mode 100755 packages/layer7-apihub/src/dataProvider/apiKeys.js
 create mode 100755 packages/layer7-apihub/src/ui/LoadingDialog.js
 create mode 100755 remote-hosting/.gitignore
 create mode 100755 remote-hosting/README.md
 create mode 100755 remote-hosting/index.js
 create mode 100755 remote-hosting/package-lock.json
 create mode 100755 remote-hosting/package.json

diff --git a/cypress/integration/applications.js b/cypress/integration/applications.js
index fa9077566..b03c5ff51 100755
--- a/cypress/integration/applications.js
+++ b/cypress/integration/applications.js
@@ -61,14 +61,16 @@ describe('Applications', () => {
             'Self-enabling global workforce'
         );
 
+        cy.findByText('JSON Chief Directives').click();
+
         cy.findByLabelText('API Key / Client ID').should(
             'contain',
-            'b43b8e38-511a-4234-b533-4264a8fcaa26'
+            'l7286a421be91244e79a43faf333fbdd14'
         );
 
         cy.findByLabelText('Shared Secret / Client Secret').should(
             'contain',
-            'cf4f15ea-b8c5-453c-8072-9b5115db5eb9'
+            '********'
         );
 
         cy.findByLabelText('Callback/Redirect URL(s)').should(
@@ -78,10 +80,10 @@ describe('Applications', () => {
 
         cy.findByLabelText('Scope').should('contain', 'OOB');
 
-        cy.findByLabelText('Type').should('contain', 'confidential');
+        cy.findByLabelText('Type').should('contain', 'public');
     });
 
-    it.skip('should show generate secret ', () => {
+    it('should NOT show Generate New Secret when Application status is APPLICATION_PENDING_APPROVAL for an org user', () => {
         login('orgPublisher', 'Password@1');
 
         cy.findAllByText('Applications')
@@ -90,14 +92,107 @@ describe('Applications', () => {
 
         cy.findByTitle('Display as list').click();
 
-        cy.findByTitle('CSS Human Intranet').click({ force: true });
+        cy.findByTitle('GB Future Response').click({ force: true });
 
-        cy.findByText('Edit').click();
+        // Details
+        cy.findByLabelText('Generate New Secret').should('not.exist');
+    });
 
-        cy.findByLabelText('Generate New Secret').should('exist');
+    context('when editing an application', () => {
+        it('should allow the changing of an API plan on a selected API', () => {
+            cy.loadData();
+            login('orgAdmin', 'Password@1');
+            cy.findAllByText('Applications')
+                .first()
+                .click();
+
+            cy.findByTitle('Display as list').click();
+            cy.findByTitle('CSS Human Intranet').click({ force: true });
+
+            // Ignore any errors in the console
+            cy.on('uncaught:exception', (err, runnable) => {
+                cy.findByText('Edit').click({ force: true });
+
+                // Click the first selected API from the selector widget to open the accordion
+                cy.findByText('SMTP Chief Accounts').click({ force: true });
+
+                // Click to edit the API plan
+                cy.findByText('API Plan: API Plan 1');
+                cy.findByTitle('Edit').click({ force: true });
+
+                // Choose a different API plan from the modal
+                cy.findByText('Select an API Plan (Required)');
+                cy.findByText('API Plan 3').click({ force: true });
+
+                // Accept the terms and conditions of the new API plan
+                cy.findByText('Lorem ipsum dolor sit amet');
+                cy.findByText('I Accept the Terms & Conditions').click({
+                    force: true,
+                });
+
+                // The first API plan should be replaced with the new one chosen
+                cy.findByText('API Plan: API Plan 3');
+                return false;
+            });
+        });
+
+        it('should show the API key as the default key', () => {
+            cy.loadData();
+            login('orgAdmin', 'Password@1');
+            cy.findAllByText('Applications')
+                .first()
+                .click();
+
+            cy.findByTitle('Display as list').click();
+            cy.findByTitle('CSS Human Intranet').click({ force: true });
+
+            // Ignore any errors in the console
+            cy.on('uncaught:exception', (err, runnable) => {
+                cy.findByText('Edit').click({ force: true });
+
+                // Click the first selected API from the selector widget to open the accordion
+                cy.findByText('SMTP Chief Accounts').click({ force: true });
+
+                // Click to edit the API plan
+                cy.findByText('API Plan: API Plan 1');
+                cy.findByTitle('Edit').click({ force: true });
+
+                expect(
+                    cy.findByText('API Key / Client ID').next().innerHTML
+                ).toEqual('Default');
+
+                return false;
+            });
+        });
+
+        it('should display a progress dialog when deleting', () => {
+            cy.loadData();
+            login('orgAdmin', 'Password@1');
+            cy.findAllByText('Applications')
+                .first()
+                .click();
+
+            cy.findByTitle('Display as list').click();
+            cy.findByTitle('ADP Dynamic Integration').click({ force: true });
+            cy.on('uncaught:exception', (err, runnable) => {
+                cy.findByText('Delete').click({ force: true });
+
+                cy.findByText(
+                    'You are about to delete this application. Are you sure?'
+                );
+
+                cy.findByText('Delete').click({ force: true });
+
+                cy.findByText(
+                    'Undeploying keys and deleting application. This may take several minutes.'
+                );
+
+                return false;
+            });
+        });
     });
 
-    it('should NOT show Generate New Secret when Application status is APPLICATION_PENDING_APPROVAL for an org user', () => {
+    it.skip('should show generate secret ', () => {
         login('orgPublisher', 'Password@1');
 
         cy.findAllByText('Applications')
@@ -106,10 +201,11 @@ describe('Applications', () => {
 
         cy.findByTitle('Display as list').click();
 
-        cy.findByTitle('GB Future Response').click({ force: true });
+        cy.findByTitle('CSS Human Intranet').click({ force: true });
 
-        // Details
-        cy.findByLabelText('Generate New Secret').should('not.exist');
+        cy.findByText('Edit').click();
+
+        cy.findByLabelText('Generate New Secret').should('exist');
     });
 
     it.skip('should show Generate New Secret when Application status is APPLICATION_PENDING_APPROVAL for a portal admin', () => {
@@ -126,4 +222,25 @@ describe('Applications', () => {
         // Details
         cy.findByLabelText('Generate New Secret').should('exist');
     });
+
+    it.skip('should change the page size', () => {
+        login('portalAdmin', 'Password@1');
+
+        cy.findAllByText('Applications')
+            .first()
+            .click();
+
+        cy.get('p.MuiTablePagination-caption').should(
+            'have.text',
+            'Items per page:1-12 of 25'
+        );
+        cy.get('div.MuiTablePagination-input')
+            .first()
+            .click({ force: true });
+        cy.findByText('24').click({ force: true });
+        cy.get('p.MuiTablePagination-caption').should(
+            'have.text',
+            'Items per page:1-24 of 25'
+        );
+    });
 });
diff --git a/packages/example/src/layout/AppBar.js b/packages/example/src/layout/AppBar.js
index c2a1d0bdf..323b13439 100755
--- a/packages/example/src/layout/AppBar.js
+++ b/packages/example/src/layout/AppBar.js
@@ -36,7 +36,7 @@ export const AppBar = ({
         <HideOnScroll>
             <MuiAppBar
                 className={className}
-                color="#FFFFFF"
+                color="default"
                 elevation={2}
                 {...rest}
             >
diff --git a/packages/example/src/layout/HomePage.js b/packages/example/src/layout/HomePage.js
index 455600f42..3e80349c8 100755
--- a/packages/example/src/layout/HomePage.js
+++ b/packages/example/src/layout/HomePage.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { HomePageContent } from 'layer7-apihub';
 import { makeStyles } from '@material-ui/core/styles';
 
-import { ContentLogo, Footer } from '../ui';
+import { Footer } from '../ui';
 
 export const HomePage = () => {
     const classes = useStyles();
@@ -11,7 +11,6 @@ export const HomePage = () => {
         <>
             <div className={classes.root}>
                 <HomePageContent className={classes.markdown} />
-                <ContentLogo className={classes.logo} />
             </div>
             <Footer />
         </>
diff --git a/packages/layer7-apihub-mock/src/data/index.js b/packages/layer7-apihub-mock/src/data/index.js
index 5e4fb78d5..7cd556d97 100755
--- a/packages/layer7-apihub-mock/src/data/index.js
+++ b/packages/layer7-apihub-mock/src/data/index.js
@@ -10,6 +10,7 @@ function generateData() {
     const apis = generateApis({ tags, apiEulas });
     const apiGroups = generateApiGroups({ apis });
     const applications = generateApplications({ apis });
+    const apiKeys = generateApiKeys({ applications });
     const documents = [
         ...generateDocumentationForApis({ apis }),
         ...generateDocumentationForWiki(),
@@ -319,6 +320,49 @@ function generateApplication({ apis, ...data }) {
     );
 }
 
+function generateApiKeys({ applications }) {
+    return Array.from(Array(25).keys()).map((el) =>
+        generateApiKey({ applicationUuid: applications[0].uuid, el })
+    );
+}
+
+function generateApiKey({ applicationUuid, el, ...data }) {
+    const uuid = faker.random.uuid();
+
+    const apiKey = faker.random.uuid();
+    const keySecret = faker.random.uuid();
+    const defaultKey = (el === 0);
+    const status = defaultKey ? 'ENABLED' : faker.random.arrayElement([
+        'ENABLED',
+        'ENABLED',
+        'ENABLED',
+        'ENABLED',
+        'DISABLED',
+        'DISABLED',
+    ]);
+
+    return merge(
+        {
+            id: uuid,
+            apiKey,
+            name: faker.fake(
+                '{{hacker.abbreviation}} {{name.jobDescriptor}} {{name.jobArea}}'
+            ),
+            keySecret,
+            applicationUuid,
+            defaultKey,
+            status,
+            keySecretHashed: false,
+            oauthCallbackUrl: 'https://example.com/oauthCallback',
+            oauthScope: 'OOB',
+            oauthType: faker.random.arrayElement(['public', 'confidential']),
+            createTs: Date.now(),
+            modifyTs: Date.now(),
+        },
+        data
+    );
+}
+
 function generateTags() {
     return [
         { uuid: faker.random.uuid(), name: 'Accounts' },
@@ -536,5 +580,6 @@ module.exports = {
     generateApis,
     generateApiGroups,
     generateApplications,
+    generateApiKeys,
     generateRegistrations,
 };
diff --git a/packages/layer7-apihub-mock/src/defaultData.json b/packages/layer7-apihub-mock/src/defaultData.json
index 003b31e08..21bba439a 100755
--- a/packages/layer7-apihub-mock/src/defaultData.json
+++ b/packages/layer7-apihub-mock/src/defaultData.json
@@ -110,7 +110,7 @@
                 {
                     "uuid": "dd010ee0-4cb0-4388-9a95-4a216c0ea8c3",
                     "name": "SMTP Chief Accounts",
-                    "status": "DEPRECATED"
+                    "status": "ENABLED"
                 },
                 {
                     "uuid": "9170b2d3-1d8d-4ad6-ac6e-f471a9297dae",
@@ -354,7 +354,7 @@
             "modifyTs": 1592887894715,
             "version": "5.7.8",
             "ssgServiceType": "SOAP",
-            "portalStatus": "DEPRECATED",
+            "portalStatus": "ENABLED",
             "accessStatus": "PUBLIC",
             "apiEulaUuid": "c9406345-eb76-11e3-b0cd-000nosaj86a8",
             "applicationUsage": 1,
@@ -490,7 +490,7 @@
             "modifyTs": 1592897689575,
             "version": "3.1.4",
             "ssgServiceType": "REST",
-            "portalStatus": "DEPRECATED",
+            "portalStatus": "ENABLED",
             "accessStatus": "PUBLIC",
             "apiEulaUuid": "c9406345-eb76-11e3-b0cd-000nosaj86a8",
             "applicationUsage": 2,
@@ -541,7 +541,7 @@
             "modifyTs": 1592862643594,
             "version": "8.1.2",
             "ssgServiceType": "SOAP",
-            "portalStatus": "DISABLED",
+            "portalStatus": "ENABLED",
             "accessStatus": "PRIVATE",
             "apiEulaUuid": "c9406345-eb76-11e3-b0cd-000nosaj86a8",
             "applicationUsage": 6,
@@ -713,6 +713,13 @@
                     "8a334a2f-de19-472a-bb11-5a6e38e1c2ee"
                 ]
             },
+            "apiApiPlanIds": {
+                "results": [
+                    { "ApiUuid": "dd010ee0-4cb0-4388-9a95-4a216c0ea8c3", "ApiPlanUuid": "791cc920-2147-4125-91ae-955206a043b5" },
+                    { "ApiUuid": "df9c715b-cff5-4d7a-a8cf-eefe382040d0", "ApiPlanUuid": "8910fe1f-34df-4451-b053-7101a314e8b3" },
+                    { "ApiUuid": "8a334a2f-de19-472a-bb11-5a6e38e1c2ee", "ApiPlanUuid": "d9d300dd-931e-4b74-82a4-85a44242f89b" }
+                ]
+            },
             "_accessibleApis": [
                 "dd010ee0-4cb0-4388-9a95-4a216c0ea8c3",
                 "df9c715b-cff5-4d7a-a8cf-eefe382040d0"
@@ -1188,6 +1195,24 @@
             ]
         }
     ],
+    "apiKeys": [
+        {
+            "id": "a27767e6-2000-49c2-80ae-6bd6cb8e2873",
+            "apiKey": "l7286a421be91244e79a43faf333fbdd14",
+            "keySecret": "********",
+            "uuid": "a27767e6-2000-49c2-80ae-6bd6cb8e2873",
+            "name": "JSON Chief Directives",
+            "applicationUuid": "17694075-6d09-4df0-8307-90f41de2f35a",
+            "defaultKey": true,
+            "status": "ENABLED",
+            "keySecretHashed": false,
+            "oauthCallbackUrl": "https://example.com/oauthCallback",
+            "oauthScope": "OOB",
+            "oauthType": "public",
+            "createTs": 1576962923790,
+            "modifyTs": 1592874748358
+        }
+    ],
     "assets": [
         {
             "uuid": "76f42917-5833-4938-a115-46534e186077",
diff --git a/packages/layer7-apihub-mock/src/handlers/apiKeys.js b/packages/layer7-apihub-mock/src/handlers/apiKeys.js
new file mode 100755
index 000000000..9c86e5c04
--- /dev/null
+++ b/packages/layer7-apihub-mock/src/handlers/apiKeys.js
@@ -0,0 +1,44 @@
+import { Response } from 'miragejs';
+import { promisify } from '../promisify';
+import faker from 'faker';
+
+export function listApiKeys(database) {
+    return async (schema, request) => {
+        const {
+            page,
+            size,
+            order,
+            sort,
+            name,
+            $select,
+            ...filter
+        } = request.queryParams;
+
+        const finalPage = parseInt(request.queryParams.page, 10);
+        const finalSize = parseInt(request.queryParams.size, 10);
+        const [finalSort, finalOrder] = request.queryParams.sort?.split(',') || [];
+
+        const finalFilter = {
+            ...filter,
+        };
+
+        const totalElements = (
+            await promisify(database.apiKeys.find(finalFilter).fetch)
+        ).length;
+
+        const results = await promisify(
+            database.apiKeys.find(finalFilter, {
+                limit: finalSize,
+                skip: finalSize * finalPage,
+                sort: {
+                    [finalSort]: finalOrder?.toLowerCase() === 'asc' ? 1 : -1,
+                },
+            }).fetch
+        );
+
+        return {
+            results: results,
+            totalElements,
+        };
+    };
+}
diff --git a/packages/layer7-apihub-mock/src/handlers/apiPlans.js b/packages/layer7-apihub-mock/src/handlers/apiPlans.js
index 33b4e8858..6c48adb5b 100755
--- a/packages/layer7-apihub-mock/src/handlers/apiPlans.js
+++ b/packages/layer7-apihub-mock/src/handlers/apiPlans.js
@@ -7,12 +7,7 @@ export function listApiPlans(database) {
         const totalElements = (await promisify(database.apiPlans.find().fetch))
             .length;
 
-        const results = await promisify(database.apiPlans.find().fetch);
-
-        return {
-            results,
-            totalElements,
-        };
+        return await promisify(database.apiPlans.find().fetch);
     };
 }
 
@@ -78,7 +73,7 @@ export function getApiPlansFeatureFlag(database) {
         Uuid: faker.random.uuid(),
         CreatedBy: 'SYSTEM',
         ModifyTs: 0,
-        Value: false,
+        Value: true,
         Name: 'FEATURE_FLAG_API_PLANS',
     };
 }
diff --git a/packages/layer7-apihub-mock/src/index.js b/packages/layer7-apihub-mock/src/index.js
index 2114d7cc2..8846bb0b2 100755
--- a/packages/layer7-apihub-mock/src/index.js
+++ b/packages/layer7-apihub-mock/src/index.js
@@ -45,6 +45,7 @@ import {
     getSecretHashMetadata,
     deleteApplication,
 } from './handlers/applications';
+import { listApiKeys } from './handlers/apiKeys';
 import {
     listOrganizations,
     getOrganization,
@@ -204,6 +205,12 @@ export const startApiHubMockedServer = async (
                 options
             );
 
+            this.get(
+                `${urlPrefix}api/apim/api-management/1.0/applications/:applicationUuid/api-keys`,
+                listApiKeys(database),
+                options
+            );
+
             this.get(
                 `${urlPrefix}api/apim/api-management/1.0/account-plans`,
                 listAccountPlans(database),
@@ -327,7 +334,7 @@ export const startApiHubMockedServer = async (
             );
 
             this.get(
-                `${urlPrefix}api/apim/api-management/1.0/api-plans`,
+                `${urlPrefix}api/apim/api-management/internal/api-plans`,
                 listApiPlans(database),
                 options
             );
@@ -438,7 +445,7 @@ export const startApiHubMockedServer = async (
             this.get(
                 `${urlPrefix}api/apim/*path`,
                 async (schema, request) => {
-                    console.log('GET - Catch all', request.params.path);
+                    console.log('GET - Catch all', request.url);
                     const path = request.params.path;
 
                     if (path.match(/ApiEulas\('.*'\)/)) {
@@ -564,6 +571,7 @@ async function clearDatabase() {
         promisify(database.removeCollection.bind(database), 'apis'),
         promisify(database.removeCollection.bind(database), 'apiEulas'),
         promisify(database.removeCollection.bind(database), 'apiGroups'),
+        promisify(database.removeCollection.bind(database), 'apiKeys'),
         promisify(database.removeCollection.bind(database), 'apiPlans'),
         promisify(database.removeCollection.bind(database), 'applications'),
         promisify(database.removeCollection.bind(database), 'userContexts'),
@@ -582,6 +590,7 @@ async function initDatabase(db, initialData = defaultData) {
         promisify(db.addCollection.bind(db), 'apis'),
         promisify(db.addCollection.bind(db), 'apiEulas'),
         promisify(db.addCollection.bind(db), 'apiGroups'),
+        promisify(db.addCollection.bind(db), 'apiKeys'),
         promisify(db.addCollection.bind(db), 'apiPlans'),
         promisify(db.addCollection.bind(db), 'applications'),
         promisify(db.addCollection.bind(db), 'userContexts'),
@@ -611,6 +620,10 @@ async function initDatabase(db, initialData = defaultData) {
                 db.apiGroups.upsert.bind(db.apiGroups),
                 initialData.apiGroups
             ),
+            promisify(
+                db.apiGroups.upsert.bind(db.apiKeys),
+                initialData.apiKeys
+            ),
             promisify(
                 db.apiPlans.upsert.bind(db.apiPlans),
                 initialData.apiPlans
diff --git a/packages/layer7-apihub/src/applications/ApiSelector/ApiSelector.js b/packages/layer7-apihub/src/applications/ApiSelector/ApiSelector.js
index aaf0fa8c0..f49af9788 100755
--- a/packages/layer7-apihub/src/applications/ApiSelector/ApiSelector.js
+++ b/packages/layer7-apihub/src/applications/ApiSelector/ApiSelector.js
@@ -13,6 +13,7 @@ import {
 import { makeStyles } from '@material-ui/core/styles';
 import { useDataProvider, useQuery, useTranslate } from 'ra-core';
 import { useForm } from 'react-final-form';
+import get from 'lodash/get';
 
 import { ListArrayInput, ReferenceArrayInput } from '../../ui';
 import { SelectionList } from './SelectionList';
@@ -25,7 +26,7 @@ import { ApiGroupSelectionModal } from './ApiGroupSelectionModal';
 import { useLayer7Notify } from '../../useLayer7Notify';
 
 export function ApiSelector(props) {
-    const { record, application, resource = '', orgUuid, apis = [] } = props;
+    const { application, resource = '', orgUuid, apis = [] } = props;
     const translate = useTranslate();
     const [selectedTab, setSelectedTab] = React.useState('apis');
     const [selectedItems, setSelectedItems] = React.useState(apis);
@@ -42,7 +43,6 @@ export function ApiSelector(props) {
 
     const {
         data: apiPlanFeatureFlag,
-        error,
         loading: isLoadingApiPlansFeatureFlag,
     } = useQuery({
         type: 'getApiPlansFeatureFlag',
@@ -78,7 +78,6 @@ export function ApiSelector(props) {
     // to avoid dealing with many loaded/loading states and prevent some rerender issues
     React.useEffect(() => {
         async function fetchInitialSelectedItems() {
-            const initialSelectedItems = [];
             if (application.ApiIds && application.ApiIds.results.length > 0) {
                 const { data: selectedApis } = await dataProvider.getMany(
                     'apis',
@@ -89,7 +88,37 @@ export function ApiSelector(props) {
                         onFailure: error => notify(error),
                     }
                 );
-                setInitialSelectedApis(selectedApis);
+
+                let selectedApiPlans = [];
+                if (get(application, 'ApiApiPlanIds.results.length', 0)) {
+                    form.change(
+                        'ApiApiPlanIds',
+                        Array.from(application.ApiApiPlanIds.results)
+                    );
+
+                    const { data: apiPlans } = await dataProvider.getMany(
+                        'apiPlans',
+                        {
+                            ids: Array.from(
+                                new Set(
+                                    application.ApiApiPlanIds.results
+                                        .map(result => result.ApiPlanUuid)
+                                        .filter(uuid => uuid)
+                                )
+                            ),
+                        },
+                        {
+                            onFailure: error => notify(error),
+                        }
+                    );
+                    selectedApiPlans = apiPlans;
+                }
+
+                setInitialSelectedApis(
+                    selectedApis,
+                    selectedApiPlans,
+                    get(application, 'ApiApiPlanIds.results', [])
+                );
             }
             if (
                 application.ApiGroupIds &&
@@ -115,12 +144,6 @@ export function ApiSelector(props) {
                 );
                 setInitialSelectedApiGroups(selectedApiGroups);
             }
-            if (
-                application.ApiApiPlanIds &&
-                application.ApiApiPlanIds.results.length > 0
-            ) {
-                setInitialApiPlans(application.ApiApiPlanIds.results);
-            }
         }
 
         if (application) {
@@ -137,17 +160,30 @@ export function ApiSelector(props) {
         form.change('ApiGroupIds', undefined);
     }, [form, orgUuid]);
 
-    const setInitialSelectedApis = records => {
-        const selectedApis = records.map(item => item.id);
-
-        form.change('ApiIds', Array.from(selectedApis));
+    const setInitialSelectedApis = (records, apiPlans, results) => {
+        const apiIds = records.map(item => item.id);
+        form.change('ApiIds', Array.from(apiIds));
 
         setSelectedItems(previousSelectedItems => {
             const newSelectedItems = new Set(previousSelectedItems);
             records.forEach(record => {
                 newSelectedItems.add({
                     type: 'apis',
-                    record: record,
+                    record: {
+                        ...record,
+                        apiPlan: apiPlans.find(
+                            apiPlan =>
+                                apiPlan.id ===
+                                get(
+                                    results.find(
+                                        result =>
+                                            result.ApiUuid === record.id &&
+                                            result.ApiPlanUuid === apiPlan.id
+                                    ),
+                                    'ApiPlanUuid'
+                                )
+                        ),
+                    },
                 });
             });
 
@@ -173,10 +209,6 @@ export function ApiSelector(props) {
         });
     };
 
-    const setInitialApiPlans = records => {
-        form.change('ApiApiPlanIds', Array.from(records));
-    };
-
     const handleTabChange = (event, newSelectedTab) =>
         setSelectedTab(newSelectedTab);
 
@@ -224,6 +256,31 @@ export function ApiSelector(props) {
         setSelectedApi(undefined);
     };
 
+    const handleApiPlanChanged = (event, api) => {
+        const selectedApiPlanIds = (
+            form.getState().values.ApiApiPlanIds || []
+        ).map(apiPlanId => {
+            const newApiPlanId = { ...apiPlanId };
+            if (newApiPlanId.ApiUuid === api.id) {
+                newApiPlanId.ApiPlanUuid = api.apiPlan.uuid;
+            }
+            return newApiPlanId;
+        });
+        form.change('ApiApiPlanIds', selectedApiPlanIds);
+
+        setSelectedItems(previousSelectedItems => {
+            const newSelectedItems = previousSelectedItems.map(item => {
+                const newRecord = { ...item.record };
+                if (newRecord.id === api.id) {
+                    newRecord.apiPlan = api.apiPlan;
+                }
+                return { type: 'apis', record: newRecord };
+            });
+
+            return newSelectedItems;
+        });
+    };
+
     const handleApiCancelled = event => {
         setSelectedApi(undefined);
     };
@@ -275,11 +332,19 @@ export function ApiSelector(props) {
         // We can't use form.getFieldState here because the tab containing
         // the input for the field may not be active and getFieldState returns
         // undefined in this case.
-        const currentValue = form.getState().values[field] || [];
+        const selectedItemIds = form.getState().values[field] || [];
         form.change(
             field,
-            currentValue.filter(id => id !== itemToRemove.record.id)
+            selectedItemIds.filter(id => id !== itemToRemove.record.id)
         );
+
+        if (apiPlansEnabled) {
+            const selectedApiPlanIds = form.getState().values['ApiApiPlanIds'] || [];
+            form.change(
+                'ApiApiPlanIds',
+                selectedApiPlanIds.filter(object => object.ApiUuid !== itemToRemove.record.id)
+            );
+        }
     };
 
     if (isLoadingApiPlansFeatureFlag) {
@@ -336,6 +401,8 @@ export function ApiSelector(props) {
                     <SelectionList
                         selectedItems={selectedItems}
                         onItemRemoved={handleItemRemoved}
+                        onApiPlanChanged={handleApiPlanChanged}
+                        orgUuid={orgUuid}
                     />
                 </Grid>
                 <Grid item xs={7}>
diff --git a/packages/layer7-apihub/src/applications/ApiSelector/SelectionList/ApiSelectionListItem.js b/packages/layer7-apihub/src/applications/ApiSelector/SelectionList/ApiSelectionListItem.js
index 118467649..f4b330927 100755
--- a/packages/layer7-apihub/src/applications/ApiSelector/SelectionList/ApiSelectionListItem.js
+++ b/packages/layer7-apihub/src/applications/ApiSelector/SelectionList/ApiSelectionListItem.js
@@ -12,14 +12,17 @@ import {
 import { makeStyles } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
 import { useTranslate } from 'ra-core';
 
 import { ApiSelectedItem } from './ApiSelectedItem';
-import { ApiGroupSelectedItem } from './ApiGroupSelectedItem';
+import { ApiSelectionModal } from '../ApiSelectionModal';
 import { ApiStatus } from '../../../apis/ApiStatus';
 
 export function ApiSelectionListItem(props) {
-    const { className, onRemoved, item } = props;
+    const { className, onRemoved, onApiPlanChanged, item, orgUuid } = props;
+    const { record } = item;
+    const [editApiPlan, setEditApiPlan] = React.useState(false);
     const translate = useTranslate();
     const classes = useStyles(props);
 
@@ -29,37 +32,105 @@ export function ApiSelectionListItem(props) {
         }
     };
 
+    const handleApiPlanChanged = event => {
+        setEditApiPlan(false);
+        if (onApiPlanChanged) {
+            onApiPlanChanged(event, record);
+        }
+    };
+
+    const truncate = text => {
+        const width = 20;
+        if (text.length > width) {
+            return `${text.slice(0, width).trim()}...`;
+        } else {
+            return text;
+        }
+    };
+
     return (
-        <ExpansionPanel className={className}>
-            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-                <Tooltip
-                    title={translate('ra.action.delete')}
-                    className={classes.delete}
-                >
-                    <IconButton
-                        onClick={handleItemRemoved}
-                        edge="end"
-                        aria-label={translate('ra.action.delete')}
+        <>
+            <ExpansionPanel className={className}>
+                <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+                    <Tooltip
+                        title={translate('ra.action.delete')}
+                        className={classes.delete}
                     >
-                        <DeleteIcon />
-                    </IconButton>
-                </Tooltip>
-                <div className={classes.root}>
-                    <Typography>{item.record.name}</Typography>
-                    <Typography className={classes.version}>
-                        v{item.record.version}
-                    </Typography>
-                </div>
-            </ExpansionPanelSummary>
-            <ExpansionPanelDetails>
-                <div className={classes.details}>
+                        <IconButton
+                            onClick={handleItemRemoved}
+                            edge="end"
+                            aria-label={translate('ra.action.delete')}
+                        >
+                            <DeleteIcon />
+                        </IconButton>
+                    </Tooltip>
+                    <div className={classes.root}>
+                        <Typography>{record.name}</Typography>
+                        <Typography className={classes.version}>
+                            v{record.version}
+                        </Typography>
+                        <ApiStatus record={record} variant="caption" />
+                    </div>
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails>
                     <div className={classes.description}>
-                        {item.record.description}
+                        {record.apiPlan ? (
+                            <div className={classes.apiPlanDetails}>
+                                {translate(
+                                    'resources.applications.fields.apiPlan'
+                                )}
+                                : {truncate(record.apiPlan.name)}
+                                <span className={classes.apiPlanInterval}>
+                                    (
+                                    {record.apiPlan.quota
+                                        ? `${translate(
+                                              'resources.apiPlans.fields.quota'
+                                          )}: ${
+                                              record.apiPlan.quota
+                                          }/${translate(
+                                              `resources.apiPlans.fields.${record.apiPlan.quotaInterval.toLowerCase()}`
+                                          )}`
+                                        : null}
+                                    {record.apiPlan.rateLimit
+                                        ? `${translate(
+                                              'resources.apiPlans.fields.rate_limit'
+                                          )}: ${
+                                              record.apiPlan.rateLimit
+                                          }/${translate(
+                                              `resources.apiPlans.fields.second`
+                                          )}`
+                                        : null}
+                                    )
+                                </span>
+                                <Tooltip
+                                    title={translate(
+                                        'resources.applications.actions.edit'
+                                    )}
+                                >
+                                    <IconButton
+                                        aria-label="actions"
+                                        onClick={() => setEditApiPlan(true)}
+                                    >
+                                        <EditIcon fontSize="small" />
+                                    </IconButton>
+                                </Tooltip>
+                            </div>
+                        ) : null}
+                        {record.description}
                     </div>
-                    <ApiStatus record={item.record} variant="caption" />
-                </div>
-            </ExpansionPanelDetails>
-        </ExpansionPanel>
+                </ExpansionPanelDetails>
+            </ExpansionPanel>
+            <ApiSelectionModal
+                api={editApiPlan ? record : null}
+                onConfirm={handleApiPlanChanged}
+                onCancel={() => {
+                    setEditApiPlan(false);
+                }}
+                apiPlansEnabled={true}
+                source="ApiApiPlanIds"
+                orgUuid={orgUuid}
+            />
+        </>
     );
 }
 
@@ -67,24 +138,27 @@ const useStyles = makeStyles(
     theme => ({
         root: {
             display: 'flex',
+            justifyContent: 'center',
             alignItems: 'center',
         },
         version: {
             color: theme.palette.text.secondary,
             marginLeft: theme.spacing(1),
+            marginRight: theme.spacing(1),
         },
         delete: {
-            marginRight: theme.spacing(1),
+            marginRight: theme.spacing(0),
         },
-        details: {
-            marginTop: theme.spacing(-2),
-            marginLeft: theme.spacing(6),
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'space-between',
+        apiPlanDetails: {
+            fontSize: theme.typography.pxToRem(14),
+            marginTop: theme.spacing(0),
+        },
+        apiPlanInterval: {
+            marginLeft: theme.spacing(1),
         },
         description: {
-            marginTop: theme.spacing(0),
+            marginTop: theme.spacing(-1),
+            marginLeft: theme.spacing(6),
             fontSize: theme.typography.pxToRem(14),
         },
     }),
diff --git a/packages/layer7-apihub/src/applications/ApiSelector/SelectionList/SelectionList.js b/packages/layer7-apihub/src/applications/ApiSelector/SelectionList/SelectionList.js
index e4bd103ad..6692a2d8e 100755
--- a/packages/layer7-apihub/src/applications/ApiSelector/SelectionList/SelectionList.js
+++ b/packages/layer7-apihub/src/applications/ApiSelector/SelectionList/SelectionList.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { List, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { useTranslate } from 'ra-core';
 
@@ -7,7 +7,7 @@ import { ApiSelectionListItem } from './ApiSelectionListItem';
 import { ApiGroupSelectionListItem } from './ApiGroupSelectionListItem';
 
 export function SelectionList(props) {
-    const { onItemRemoved, selectedItems } = props;
+    const { onItemRemoved, onApiPlanChanged, selectedItems, orgUuid } = props;
     const translate = useTranslate();
     const classes = useStyles(props);
 
@@ -24,23 +24,33 @@ export function SelectionList(props) {
                 <div className={classes.empty} />
             ) : (
                 <div>
-                    {selectedItems.map((item, index) => {
-                        return item.type === 'apis' ? (
-                            <ApiSelectionListItem
-                                className={classes.item}
-                                key={item.record.id}
-                                onRemoved={onItemRemoved}
-                                item={item}
-                            />
-                        ) : (
-                            <ApiGroupSelectionListItem
-                                className={classes.item}
-                                key={item.record.id}
-                                onRemoved={onItemRemoved}
-                                item={item}
-                            />
-                        );
-                    })}
+                    {selectedItems
+                        .sort((a, b) =>
+                            a.record.name > b.record.name
+                                ? 1
+                                : b.record.name > a.record.name
+                                ? -1
+                                : 0
+                        )
+                        .map((item, index) => {
+                            return item.type === 'apis' ? (
+                                <ApiSelectionListItem
+                                    className={classes.item}
+                                    key={item.record.id}
+                                    onRemoved={onItemRemoved}
+                                    onApiPlanChanged={onApiPlanChanged}
+                                    item={item}
+                                    orgUuid={orgUuid}
+                                />
+                            ) : (
+                                <ApiGroupSelectionListItem
+                                    className={classes.item}
+                                    key={item.record.id}
+                                    onRemoved={onItemRemoved}
+                                    item={item}
+                                />
+                            );
+                        })}
                 </div>
             )}
         </div>
diff --git a/packages/layer7-apihub/src/applications/ApplicationActions.js b/packages/layer7-apihub/src/applications/ApplicationActions.js
deleted file mode 100755
index 58869e05c..000000000
--- a/packages/layer7-apihub/src/applications/ApplicationActions.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import {
-    CRUD_DELETE,
-    linkToRecord,
-    useDelete,
-    useRefresh,
-    useTranslate,
-} from 'ra-core';
-import Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-
-import { useLayer7Notify } from '../useLayer7Notify';
-import { ConfirmDialog } from '../ui/ConfirmDialog';
-import { isEditApplicationDisabled } from './isApplicationPending';
-import { useUserContext } from '../userContexts';
-
-export const ApplicationActions = ({ record, card, list }) => {
-    const history = useHistory();
-    const translate = useTranslate();
-    const notify = useLayer7Notify();
-    const refresh = useRefresh();
-    const [userContext] = useUserContext();
-    const [deleteConfirm, setDeleteConfirm] = React.useState(false);
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const [canDelete, setCanDelete] = React.useState(false);
-    const [canEdit, setCanEdit] = React.useState(false);
-
-    React.useEffect(() => {
-        if (record && userContext) {
-            if (
-                record.status !== 'EDIT_APPLICATION_PENDING_APPROVAL' &&
-                !userContext.userDetails.developer
-            ) {
-                setCanDelete(true);
-            }
-            if (!isEditApplicationDisabled(userContext, record)) {
-                setCanEdit(true);
-            }
-        }
-    }, [record, userContext]);
-
-    const [deleteApplication] = useDelete('applications', record.id, record, {
-        action: CRUD_DELETE,
-        onSuccess: () => {
-            notify(
-                'resources.applications.notifications.delete_success',
-                'info',
-                {
-                    smart_count: 1,
-                }
-            );
-            refresh();
-        },
-        onFailure: error => {
-            notify(
-                error || 'resources.applications.notifications.delete_error',
-                'error'
-            );
-        },
-    });
-
-    const handleClick = event => {
-        event.stopPropagation();
-        setAnchorEl(event.currentTarget);
-    };
-
-    const handleClose = event => {
-        event.stopPropagation();
-        setAnchorEl(null);
-    };
-
-    const editApplication = event => {
-        event.stopPropagation();
-        setAnchorEl(null);
-        history.push(linkToRecord('/applications', record.id, 'edit'));
-    };
-
-    const confirmDelete = event => {
-        event.stopPropagation();
-        setAnchorEl(null);
-        setDeleteConfirm(true);
-    };
-
-    if (!record) {
-        return null;
-    }
-
-    return (
-        <>
-            {(canEdit || canDelete) && (
-                <IconButton aria-label="actions" onClick={handleClick}>
-                    {list && (
-                        <>
-                            <MenuIcon />
-                            <ArrowDropDownIcon />
-                        </>
-                    )}
-                    {!list && (
-                        <Button
-                            variant="contained"
-                            color="primary"
-                            endIcon={<ArrowDropDownIcon />}
-                        >
-                            {translate('resources.applications.fields.actions')}
-                        </Button>
-                    )}
-                </IconButton>
-            )}
-            <Menu
-                id="simple-menu"
-                anchorEl={anchorEl}
-                keepMounted
-                open={Boolean(anchorEl)}
-                onClose={handleClose}
-            >
-                {canEdit && (
-                    <MenuItem onClick={editApplication}>
-                        <ListItemIcon>
-                            <EditIcon fontSize="small" />
-                        </ListItemIcon>
-                        <ListItemText
-                            primary={translate(
-                                'resources.applications.actions.edit'
-                            )}
-                        />
-                    </MenuItem>
-                )}
-                {canDelete && (
-                    <MenuItem onClick={confirmDelete}>
-                        <ListItemIcon>
-                            <DeleteIcon fontSize="small" />
-                        </ListItemIcon>
-                        <ListItemText
-                            primary={translate(
-                                'resources.applications.actions.delete'
-                            )}
-                        />
-                    </MenuItem>
-                )}
-            </Menu>
-            <ConfirmDialog
-                title={translate(
-                    'resources.applications.actions.deleteApplication'
-                )}
-                content={translate('resources.applications.confirm_delete')}
-                buttonConfirm={translate(
-                    'resources.applications.actions.delete'
-                )}
-                buttonCancel={translate(
-                    'resources.applications.actions.cancel'
-                )}
-                open={deleteConfirm}
-                onConfirm={() => {
-                    deleteApplication();
-                    setDeleteConfirm(false);
-                }}
-                onCancel={() => setDeleteConfirm(false)}
-            />
-        </>
-    );
-};
diff --git a/packages/layer7-apihub/src/applications/ApplicationApisList.js b/packages/layer7-apihub/src/applications/ApplicationApisList.js
index 19a033338..699cb8527 100755
--- a/packages/layer7-apihub/src/applications/ApplicationApisList.js
+++ b/packages/layer7-apihub/src/applications/ApplicationApisList.js
@@ -93,6 +93,7 @@ export const ApplicationApisList = ({ application }) => {
     return (
         <ExpansionPanel square defaultExpanded>
             <ExpansionPanelSummary
+                className={classes.expansionPanelSummary}
                 expandIcon={<ExpandMoreIcon />}
                 aria-controls="apilistpanel-content"
                 id="apilistpanel-header"
@@ -195,13 +196,20 @@ const useStyles = makeStyles(
         container: {
             maxHeight: '100%',
         },
+        expansionPanelSummary: {
+            '& > div': {
+                margin: `${theme.spacing(1)}px 0 !important`,
+            },
+        },
         heading: {
-            fontSize: theme.typography.pxToRem(15),
+            color: theme.palette.primary.textHub || '#333333',
+            fontFamily: theme.typography.textHub,
             fontWeight: theme.typography.fontWeightBold,
+            fontSize: '21px',
+            lineHeight: '22px',
+            margin: theme.spacing(1, 0, 1, 0),
+            transform: 'unset',
             textTransform: 'titlecase',
-            color: theme.palette.grey[600],
-            marginLeft: theme.spacing(1),
-            marginRight: theme.spacing(1),
         },
         title: {
             width: '100%',
diff --git a/packages/layer7-apihub/src/applications/ApplicationDetails.js b/packages/layer7-apihub/src/applications/ApplicationDetails.js
index 6e2053e65..2b4378b6c 100755
--- a/packages/layer7-apihub/src/applications/ApplicationDetails.js
+++ b/packages/layer7-apihub/src/applications/ApplicationDetails.js
@@ -1,24 +1,29 @@
 import React from 'react';
 import { Labeled, TextField } from 'react-admin';
-import { useTranslate } from 'ra-core';
+import { useDataProvider, useTranslate } from 'ra-core';
+import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import Chip from '@material-ui/core/Chip';
+import List from '@material-ui/core/List';
 import { makeStyles } from '@material-ui/core/styles';
+import sortBy from 'lodash/sortBy';
 
 import { useUserContext } from '../userContexts';
 import { ApplicationApisList } from './ApplicationApisList';
 import { ApplicationDetailsOverviewField } from './ApplicationDetailsOverviewField';
-import { ApplicationKeyClient } from './ApplicationKeyClient';
+import { ApplicationDetailsKeyClient } from './ApplicationDetailsKeyClient';
 import { isApplicationPendingOrDisabled } from './isApplicationPending';
 import { isPublisher, isOrgAdmin, isOrgBoundUser } from '../userContexts';
+import { useLayer7Notify } from '../useLayer7Notify';
 
 export const ApplicationDetails = ({ record }) => {
     const classes = useStyles();
     const gridClasses = useGridStyles();
     const contentLabelClasses = useContentStyles();
     const applicationDetailsOverviewClasses = useApplicationDetailsOverviewStyles();
+    const dataProvider = useDataProvider();
     const translate = useTranslate();
+    const notify = useLayer7Notify();
 
     const apiIds = (record.apiIds && record.apiIds.results) || [];
 
@@ -26,13 +31,34 @@ export const ApplicationDetails = ({ record }) => {
     const canEdit = isPublisher(userContext) || isOrgAdmin(userContext);
     const isEditDisabled = isEditApplicationDisabled(userContext, record);
     const isOrgUser = isOrgBoundUser(userContext);
+
+    const [apiKeys, setApiKeys] = React.useState([]);
+
+    React.useEffect(() => {
+        const fetchApiKeys = async () => {
+            const { data } = await dataProvider.getList(
+                'apiKeys',
+                {
+                    applicationUuid: record.id,
+                    pagination: { page: 1, perPage: 100 },
+                    sort: { field: 'createTs', order: 'DESC' },
+                },
+                {
+                    onFailure: error => notify(error),
+                }
+            );
+            setApiKeys(sortBy(data, ({ defaultKey }) => !defaultKey));
+        };
+        fetchApiKeys();
+    }, []);
+
     return (
         <>
             <Grid className={classes.root} container spacing={3}>
                 <Grid
                     container
                     item
-                    md={8}
+                    md={12}
                     sm={12}
                     direction="column"
                     classes={gridClasses}
@@ -69,21 +95,23 @@ export const ApplicationDetails = ({ record }) => {
                                 />
                             </Labeled>
                         )}
-                        <Labeled
-                            // On <Labeled />, this will translate in a correct `for` attribute on the label
-                            label="resources.applications.fields.description"
-                            classes={contentLabelClasses}
-                            className={classes.mainField}
-                        >
-                            <Typography
-                                variant="body2"
-                                className={classes.fieldContent}
+                        {record.description && (
+                            <Labeled
+                                // On <Labeled />, this will translate in a correct `for` attribute on the label
+                                label="resources.applications.fields.description"
+                                classes={contentLabelClasses}
+                                className={classes.mainField}
                             >
-                                <span id="description">
-                                    {record.description}
-                                </span>
-                            </Typography>
-                        </Labeled>
+                                <Typography
+                                    variant="body2"
+                                    className={classes.fieldContent}
+                                >
+                                    <span id="description">
+                                        {record.description}
+                                    </span>
+                                </Typography>
+                            </Labeled>
+                        )}
                     </Grid>
                     <Grid item>
                         <Typography variant="h3" className={classes.subtitle}>
@@ -96,10 +124,16 @@ export const ApplicationDetails = ({ record }) => {
                                 <Labeled
                                     // On <Labeled />, this will translate in a correct `for` attribute on the label
                                     label={item.Name}
-                                    classes={contentLabelClasses}
+                                    key={item.Name}
+                                    classes={classes}
                                     className={classes.field}
                                 >
-                                    <TextField record={item} source="Value" />
+                                    <div className={classes.fieldValue}>
+                                        <TextField
+                                            record={item}
+                                            source="Value"
+                                        />
+                                    </div>
                                 </Labeled>
                             ))}
 
@@ -122,7 +156,7 @@ export const ApplicationDetails = ({ record }) => {
                 <Grid
                     container
                     item
-                    md={8}
+                    md={12}
                     sm={12}
                     direction="column"
                     classes={gridClasses}
@@ -134,67 +168,20 @@ export const ApplicationDetails = ({ record }) => {
                             {translate(
                                 'resources.applications.fields.authCredentials'
                             )}
-                            <Chip
-                                className={classes.chip}
-                                label={translate(
-                                    'resources.applications.fields.default'
-                                )}
-                            />
                         </Typography>
                     </Grid>
-                    <Grid item>
-                        <Labeled
-                            // On <Labeled />, this will translate in a correct `for` attribute on the label
-                            id="oauthCallbackUrl"
-                            label="resources.applications.fields.callbackUrl"
-                            classes={contentLabelClasses}
-                            className={classes.field}
-                        >
-                            <TextField
-                                id="oauthCallbackUrl"
-                                record={record}
-                                source="OauthCallbackUrl"
-                            />
-                        </Labeled>
-                    </Grid>
-                    <Grid item>
-                        <Labeled
-                            // On <Labeled />, this will translate in a correct `for` attribute on the label
-                            id="oauthScope"
-                            label="resources.applications.fields.scope"
-                            classes={contentLabelClasses}
-                            className={classes.field}
-                        >
-                            <TextField
-                                id="oauthScope"
-                                record={record}
-                                source="OauthScope"
-                            />
-                        </Labeled>
-                    </Grid>
-                    <Grid item>
-                        <Labeled
-                            // On <Labeled />, this will translate in a correct `for` attribute on the label
-                            id="oauthType"
-                            label="resources.applications.fields.type"
-                            classes={contentLabelClasses}
-                            className={classes.field}
-                        >
-                            <TextField
-                                id="oauthType"
-                                record={record}
-                                source="OauthType"
+                    <Divider />
+                    <List className={classes.mainField}>
+                        {apiKeys.map(apiKey => (
+                            <ApplicationDetailsKeyClient
+                                id={apiKey.id}
+                                key={apiKey.id}
+                                data={apiKey}
+                                includeSecret={true}
+                                labelClasses={contentLabelClasses}
                             />
-                        </Labeled>
-                    </Grid>
-                    <Grid item className={classes.mainField}>
-                        <ApplicationKeyClient
-                            id={record.id}
-                            data={record}
-                            includeSecret={true}
-                            labelClasses={contentLabelClasses}
-                        />
-                    </Grid>
+                        ))}
+                    </List>
                 </Grid>
             </Grid>
         </>
@@ -215,13 +202,19 @@ const useStyles = makeStyles(
             fontFamily: theme.typography.body2.fontFamily,
             fontSize: theme.typography.caption.fontSize,
             margin: theme.spacing(0),
+            width: '100%',
+        },
+        details: {
+            padding: `${theme.spacing(1)}px ${theme.spacing(3)}px !important`,
+        },
+        configuration: {
+            padding: `${theme.spacing(1)}px ${theme.spacing(3)}px !important`,
         },
-        details: {},
-        configuration: {},
         subtitle: {
             fontWeight: theme.typography.fontWeightBold,
-            fontSize: '1rem',
-            margin: theme.spacing(1, 1, 2, 1),
+            fontSize: '21px',
+            lineHeight: '22px',
+            margin: theme.spacing(1, 0, 1, 0),
         },
         field: {
             marginLeft: theme.spacing(2),
@@ -229,12 +222,28 @@ const useStyles = makeStyles(
             minWidth: '100px',
             width: '100%',
         },
+        label: {
+            color: theme.palette.primary.textHub || '#333333',
+            fontFamily: theme.typography.textHub,
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 'bold',
+            lineHeight: '22px',
+            transform: 'unset',
+        },
         mainField: {
-            marginLeft: theme.spacing(1),
-            marginRight: theme.spacing(1),
             minWidth: '100px',
+            padding: 0,
             width: '100%',
         },
+        fieldValue: {
+            color: theme.palette.primary.textHub || '#333333',
+            fontFamily: theme.typography.textHub,
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            lineHeight: '20px',
+        },
         type: {
             textTransform: 'uppercase',
         },
@@ -262,8 +271,13 @@ const useApplicationDetailsOverviewStyles = makeStyles(theme => ({
 
 const useContentStyles = makeStyles(theme => ({
     label: {
+        color: theme.palette.primary.textHub || '#333333',
+        fontFamily: theme.typography.textHub,
         fontWeight: theme.typography.fontWeightBold,
-        fontSize: '1.4rem',
+        fontSize: '21px',
+        lineHeight: '22px',
+        margin: theme.spacing(1, 0, 1, 0),
+        transform: 'unset',
     },
 }));
 
diff --git a/packages/layer7-apihub/src/applications/ApplicationDetailsKeyClient.js b/packages/layer7-apihub/src/applications/ApplicationDetailsKeyClient.js
new file mode 100755
index 000000000..0086575b0
--- /dev/null
+++ b/packages/layer7-apihub/src/applications/ApplicationDetailsKeyClient.js
@@ -0,0 +1,342 @@
+import React from 'react';
+import { Labeled, TextField } from 'react-admin';
+import { useTranslate } from 'ra-core';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import IconFileCopy from '@material-ui/icons/FileCopy';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Chip from '@material-ui/core/Chip';
+import ListItem from '@material-ui/core/ListItem';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import classnames from 'classnames';
+
+import { useCopyToClipboard } from '../ui';
+
+const getStatusColor = (classes, status) => {
+    switch (status) {
+        case 'ENABLED':
+            return {
+                statusLabel: 'Enabled',
+                statusColorClass: classes.enabled,
+            };
+        case 'DISABLED':
+            return {
+                statusLabel: 'Disabled',
+                statusColorClass: classes.disabled,
+            };
+        default:
+            return {
+                statusLabel: 'Disabled',
+                statusColorClass: classes.disabled,
+            };
+    }
+};
+
+export const ApplicationDetailsKeyClient = props => {
+    const { data, includeSecret } = props;
+    const classes = useStyles();
+    const translate = useTranslate();
+    const copyToClipboard = useCopyToClipboard({
+        successMessage: 'resources.applications.notifications.copy_success',
+        errorMessage: 'resources.applications.notifications.copy_error',
+    });
+
+    if (!data || !data.apiKey) {
+        return null;
+    }
+
+    const { statusLabel, statusColorClass } = getStatusColor(
+        classes,
+        data.status
+    );
+
+    return (
+        <ListItem
+            disableGutters
+            dense
+            divider={includeSecret}
+            className={classes.root}
+        >
+            <ExpansionPanel className={classes.expansionPanel}>
+                <ExpansionPanelSummary
+                    className={classes.expansionPanelSummary}
+                    expandIcon={<ExpandMoreIcon />}
+                    aria-controls="panel1a-content"
+                    id="panel1a-header"
+                >
+                    <Typography variant="h3" className={classes.apiKeyName}>
+                        <span id="apiKeyName">{data.name}</span>
+                        <span
+                            className={classnames(
+                                classes.status,
+                                statusColorClass
+                            )}
+                        >
+                            {statusLabel}
+                        </span>
+                        {data.defaultKey && (
+                            <Chip
+                                className={classes.chip}
+                                label={translate(
+                                    'resources.applications.fields.default'
+                                )}
+                            />
+                        )}
+                    </Typography>
+                </ExpansionPanelSummary>
+                <ExpansionPanelDetails
+                    classes={{
+                        root: classes.expansionPanelDetails,
+                    }}
+                >
+                    <Grid container>
+                        {data.oauthCallbackUrl && (
+                            <Grid item md={6} sm={6} xs={12}>
+                                <Labeled
+                                    id="oauthCallbackUrl"
+                                    label="resources.applications.fields.callbackUrl"
+                                    classes={classes}
+                                    className={classes.fieldLabel}
+                                >
+                                    <div className={classes.fieldValue}>
+                                        <TextField
+                                            id="oauthCallbackUrl"
+                                            record={data}
+                                            source="oauthCallbackUrl"
+                                        />
+                                    </div>
+                                </Labeled>
+                            </Grid>
+                        )}
+                        <Grid item md={6} sm={6} xs={12}>
+                            <Labeled
+                                // On <Labeled />, this will translate in a correct `for` attribute on the label
+                                id="apiKeyClientID"
+                                label={
+                                    'resources.applications.fields.apiKeyClientID'
+                                }
+                                classes={classes}
+                                className={classes.fieldLabel}
+                            >
+                                <Typography
+                                    variant="body2"
+                                    className={classes.fieldContent}
+                                >
+                                    <span
+                                        id="apiKeyClientID"
+                                        className={classes.fieldValue}
+                                    >
+                                        {data.apiKey}
+                                    </span>
+                                    <IconButton
+                                        className={classes.buttonCopy}
+                                        color="primary"
+                                        title={translate(
+                                            'resources.applications.notifications.copy_to_clipboard'
+                                        )}
+                                        value={data.apiKey}
+                                        onClick={copyToClipboard}
+                                    >
+                                        <IconFileCopy
+                                            className={classes.iconCopy}
+                                        />
+                                    </IconButton>
+                                </Typography>
+                            </Labeled>
+                        </Grid>
+                    </Grid>
+                    <Grid container>
+                        {data.oauthScope && (
+                            <Grid item md={6} sm={6} xs={12}>
+                                <Labeled
+                                    // On <Labeled />, this will translate in a correct `for` attribute on the label
+                                    id="oauthScope"
+                                    label="resources.applications.fields.scope"
+                                    classes={classes}
+                                    className={classes.fieldLabel}
+                                >
+                                    <div className={classes.fieldValue}>
+                                        <TextField
+                                            id="oauthScope"
+                                            record={data}
+                                            source="oauthScope"
+                                        />
+                                    </div>
+                                </Labeled>
+                            </Grid>
+                        )}
+                        {includeSecret && (
+                            <Grid item md={6} sm={6} xs={12}>
+                                <Labeled
+                                    // on Labeled, this will translate in a correct `for` attribute on the label
+                                    id="sharedSecretClientSecret"
+                                    label="resources.applications.fields.sharedSecretClientSecret"
+                                    classes={classes}
+                                    className={classes.fieldLabel}
+                                >
+                                    <Typography
+                                        variant="body2"
+                                        className={classes.fieldContent}
+                                    >
+                                        <span
+                                            id="sharedSecretClientSecret"
+                                            className={classes.fieldValue}
+                                        >
+                                            {data.keySecret}
+                                        </span>
+                                        {data.keySecret &&
+                                            !data.keySecret.includes(
+                                                '****'
+                                            ) && (
+                                                <IconButton
+                                                    className={
+                                                        classes.buttonCopy
+                                                    }
+                                                    color="primary"
+                                                    title={translate(
+                                                        'resources.applications.notifications.copy_to_clipboard'
+                                                    )}
+                                                    value={data.keySecret}
+                                                    onClick={copyToClipboard}
+                                                >
+                                                    <IconFileCopy
+                                                        className={
+                                                            classes.iconCopy
+                                                        }
+                                                    />
+                                                </IconButton>
+                                            )}
+                                    </Typography>
+                                </Labeled>
+                            </Grid>
+                        )}
+                    </Grid>
+                    <Grid>
+                        {data.oauthType && (
+                            <Grid item md={6} sm={6} xs={12}>
+                                <Labeled
+                                    // On <Labeled />, this will translate in a correct `for` attribute on the label
+                                    id="oauthType"
+                                    label="resources.applications.fields.type"
+                                    classes={classes}
+                                    className={classes.fieldLabel}
+                                >
+                                    <div className={classes.fieldValue}>
+                                        <TextField
+                                            id="oauthType"
+                                            record={data}
+                                            source="oauthType"
+                                        />
+                                    </div>
+                                </Labeled>
+                            </Grid>
+                        )}
+                    </Grid>
+                </ExpansionPanelDetails>
+            </ExpansionPanel>
+        </ListItem>
+    );
+};
+
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            display: 'list-item',
+        },
+        status: {
+            fontSize: '14px',
+            marginLeft: theme.spacing(2),
+            '&:before': {
+                borderRadius: '10px',
+                content: '""',
+                display: 'inline-block',
+                height: '10px',
+                marginTop: '-6px',
+                marginRight: theme.spacing(1),
+                top: '50%',
+                width: '10px',
+            },
+        },
+        enabled: {
+            color: '#4CAF50',
+            '&:before': {
+                backgroundColor: '#4CAF50',
+            },
+        },
+        disabled: {
+            color: '#696969',
+            '&:before': {
+                backgroundColor: '#696969',
+            },
+        },
+        expansionPanel: {
+            boxShadow: 'none',
+        },
+        expansionPanelSummary: {
+            '& > div': {
+                margin: `${theme.spacing(1)}px 0 !important`,
+            },
+        },
+        fieldLabel: {
+            margin: `0 ${theme.spacing(1)}px ${theme.spacing(1)}px`,
+            minWidth: '100px',
+        },
+        chip: {
+            marginLeft: theme.spacing(2),
+            height: '21px',
+        },
+        expandCollapseButton: {
+            color: theme.palette.primary.main,
+            float: 'right',
+        },
+        expansionPanelDetails: {
+            display: 'block',
+            padding: `0 ${theme.spacing(1)}px`,
+        },
+        fieldContent: {},
+        fieldValue: {
+            color: theme.palette.primary.textHub || '#333333',
+            fontFamily: theme.typography.textHub,
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            lineHeight: '20px',
+            // textTransform: 'titlecase',
+        },
+        buttonCopy: {
+            padding: 0,
+            marginLeft: '10px',
+        },
+        iconCopy: {
+            fontSize: '14px',
+            color: theme.palette.secondary.main,
+        },
+        label: {
+            color: theme.palette.primary.textHub || '#333333',
+            fontFamily: theme.typography.textHub,
+            fontSize: '14px',
+            fontStyle: 'normal',
+            fontWeight: 'bold',
+            lineHeight: '22px',
+            transform: 'unset',
+        },
+        apiKeyName: {
+            color: theme.palette.primary.main,
+            fontFamily: theme.typography.apiHubFont,
+            fontSize: '18px',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            lineHeight: '22px',
+            marginBottom: theme.spacing(1),
+            marginTop: theme.spacing(1),
+            textTransform: 'none',
+        },
+    }),
+    {
+        name: 'Layer7ApplicationKeyClient',
+    }
+);
diff --git a/packages/layer7-apihub/src/applications/ApplicationDetailsKeyClient.test.js b/packages/layer7-apihub/src/applications/ApplicationDetailsKeyClient.test.js
new file mode 100755
index 000000000..56eba9e5a
--- /dev/null
+++ b/packages/layer7-apihub/src/applications/ApplicationDetailsKeyClient.test.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import { ApplicationDetailsKeyClient } from './ApplicationDetailsKeyClient';
+import { ApiHubProvider } from '../ApiHubContext';
+import { DataProviderContext, renderWithRedux } from 'ra-core';
+
+describe('ApplicationDetailsKeyClient', () => {
+    const dataProvider = {
+        getManyReference: jest.fn().mockResolvedValue({
+            data: [],
+        }),
+        getList: jest.fn().mockResolvedValue({
+            data: [],
+        }),
+    };
+
+    const initialState = {
+        admin: {
+            resources: {
+                assets: {},
+                tags: {},
+                apis: {},
+            },
+        },
+    };
+
+    test('should render the ApplicationDetailsKeyClient', async () => {
+        const apiKeyData = {
+            id: 'l74d927a30dd404a9b9f950963d0a957d4',
+            apiKey: 'l74d927a30dd404a9b9f950963d0a957d4',
+            applicationUuid: '39be288d-a811-44fd-bfa5-a0f6f0b512b9',
+            name: 'test key3',
+            keySecret: '52e096090f064f1183c2cb9bb07c57c3',
+            defaultKey: true,
+            oauthCallbackUrl: 'https://google.com',
+            oauthScope: 'oob',
+            oauthType: 'CONFIDENTIAL',
+            status: 'ENABLED',
+            keySecretHashed: false,
+            createTs: 1616695614566,
+            modifyTs: 1616695651307,
+        };
+        const { getByText, getAllByLabelText } = renderWithRedux(
+            <ApiHubProvider url="http://apihub" tenantName="apim">
+                <DataProviderContext.Provider value={dataProvider}>
+                    <ApplicationDetailsKeyClient
+                        id={apiKeyData.id}
+                        key={apiKeyData.id}
+                        data={apiKeyData}
+                        includeSecret={true}
+                    />
+                </DataProviderContext.Provider>
+            </ApiHubProvider>,
+            initialState
+        );
+        expect(getByText(apiKeyData.name)).not.toBeNull();
+        expect(
+            getByText('resources.applications.fields.default')
+        ).not.toBeNull();
+        expect(getByText('Enabled')).not.toBeNull();
+        expect(
+            getAllByLabelText('resources.applications.fields.scope')
+        ).not.toBeNull();
+        expect(getByText(apiKeyData.oauthScope)).not.toBeNull();
+        expect(
+            getAllByLabelText('resources.applications.fields.callbackUrl')
+        ).not.toBeNull();
+        expect(getByText(apiKeyData.oauthCallbackUrl)).not.toBeNull();
+        expect(
+            getAllByLabelText('resources.applications.fields.apiKeyClientID')
+        ).not.toBeNull();
+        expect(getByText(apiKeyData.apiKey)).not.toBeNull();
+        expect(
+            getAllByLabelText(
+                'resources.applications.fields.sharedSecretClientSecret'
+            )
+        ).not.toBeNull();
+        expect(getByText(apiKeyData.keySecret)).not.toBeNull();
+        expect(
+            getAllByLabelText('resources.applications.fields.type')
+        ).not.toBeNull();
+        expect(getByText(apiKeyData.oauthType)).not.toBeNull();
+    });
+    test('should not render optional fields if they are not defined', async () => {
+        const apiKeyData = {
+            id: 'l74d927a30dd404a9b9f950963d0a957d4',
+            apiKey: 'l74d927a30dd404a9b9f950963d0a957d4',
+            applicationUuid: '39be288d-a811-44fd-bfa5-a0f6f0b512b9',
+            name: 'test key3',
+            keySecret: '52e096090f064f1183c2cb9bb07c57c3',
+            defaultKey: false,
+            oauthCallbackUrl: '',
+            oauthScope: '',
+            oauthType: '',
+            status: 'ENABLED',
+            keySecretHashed: false,
+            createTs: 1616695614566,
+            modifyTs: 1616695651307,
+        };
+        const {
+            getByText,
+            queryByLabelText,
+            getAllByLabelText,
+        } = renderWithRedux(
+            <ApiHubProvider url="http://apihub" tenantName="apim">
+                <DataProviderContext.Provider value={dataProvider}>
+                    <ApplicationDetailsKeyClient
+                        id={apiKeyData.id}
+                        key={apiKeyData.id}
+                        data={apiKeyData}
+                        includeSecret={false}
+                    />
+                </DataProviderContext.Provider>
+            </ApiHubProvider>,
+            initialState
+        );
+        expect(
+            queryByLabelText('resources.applications.fields.default')
+        ).toBeNull();
+        expect(
+            queryByLabelText('resources.applications.fields.callbackUrl')
+        ).toBeNull();
+        expect(
+            queryByLabelText('resources.applications.fields.scope')
+        ).toBeNull();
+        expect(
+            queryByLabelText(
+                'resources.applications.fields.sharedSecretClientSecret'
+            )
+        ).toBeNull();
+        expect(
+            queryByLabelText('resources.applications.fields.type')
+        ).toBeNull();
+    });
+});
diff --git a/packages/layer7-apihub/src/applications/ApplicationEditView.js b/packages/layer7-apihub/src/applications/ApplicationEditView.js
index 400821e19..b3ee9d806 100755
--- a/packages/layer7-apihub/src/applications/ApplicationEditView.js
+++ b/packages/layer7-apihub/src/applications/ApplicationEditView.js
@@ -295,6 +295,7 @@ export const ApplicationEditView = ({
                             data={record}
                             includeSecret={false}
                             labelClasses={labelClasses}
+                            isEditMode={true}
                         />
                     )}
                     {record.keySecret && (
diff --git a/packages/layer7-apihub/src/applications/ApplicationKeyClient.js b/packages/layer7-apihub/src/applications/ApplicationKeyClient.js
index 7e913cf74..97c3b68e3 100755
--- a/packages/layer7-apihub/src/applications/ApplicationKeyClient.js
+++ b/packages/layer7-apihub/src/applications/ApplicationKeyClient.js
@@ -6,11 +6,12 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import IconFileCopy from '@material-ui/icons/FileCopy';
+import Chip from '@material-ui/core/Chip';
 
 import { useCopyToClipboard } from '../ui';
 
 export const ApplicationKeyClient = props => {
-    const { labelClasses, record, data, includeSecret } = props;
+    const { labelClasses, record, data, includeSecret, isEditMode } = props;
     const classes = useStyles(props);
     const translate = useTranslate();
     const copyToClipboard = useCopyToClipboard({
@@ -26,7 +27,23 @@ export const ApplicationKeyClient = props => {
                 <Labeled
                     // On <Labeled />, this will translate in a correct `for` attribute on the label
                     id="apiKeyClientID"
-                    label="resources.applications.fields.apiKeyClientID"
+                    label={
+                        <span>
+                            <span>
+                                {translate(
+                                    'resources.applications.fields.apiKeyClientID'
+                                )}
+                            </span>
+                            {isEditMode ? (
+                                <Chip
+                                    className={classes.chip}
+                                    label={translate(
+                                        'resources.applications.fields.default'
+                                    )}
+                                />
+                            ) : null}
+                        </span>
+                    }
                     classes={labelClasses}
                     className={classes.field}
                 >
@@ -97,6 +114,9 @@ const useStyles = makeStyles(
             marginBottom: theme.spacing(1),
             minWidth: '100px',
         },
+        chip: {
+            marginLeft: theme.spacing(1),
+        },
         fieldContent: {},
         buttonCopy: {},
         iconCopy: {
diff --git a/packages/layer7-apihub/src/applications/ApplicationList.js b/packages/layer7-apihub/src/applications/ApplicationList.js
index e7a9bb83d..f158f11b9 100755
--- a/packages/layer7-apihub/src/applications/ApplicationList.js
+++ b/packages/layer7-apihub/src/applications/ApplicationList.js
@@ -29,7 +29,6 @@ import {
 import { useUserContext } from '../userContexts';
 import { isAdminUser } from '../userContexts';
 import { ApplicationCard } from './ApplicationCard';
-import { ApplicationActions } from './ApplicationActions';
 import Inbox from '@material-ui/icons/Inbox';
 
 const defaultSort = { field: 'name', order: 'ASC' };
@@ -174,7 +173,6 @@ const ApplicationListDisplay = props => {
                     translationKey="resources.applications.status"
                     cellClassName={classes.status}
                 />
-                <ApplicationActions source="actions" sortable={false} list />
             </Datagrid>
         </Card>
     );
diff --git a/packages/layer7-apihub/src/applications/ApplicationNew.js b/packages/layer7-apihub/src/applications/ApplicationNew.js
index a30018558..be5698ac8 100755
--- a/packages/layer7-apihub/src/applications/ApplicationNew.js
+++ b/packages/layer7-apihub/src/applications/ApplicationNew.js
@@ -153,12 +153,7 @@ export const ApplicationNew = ({ userContext, toolbarProps }) => {
                         variant="filled"
                         fullWidth
                         helperText="resources.applications.validation.application_name_caption"
-                        validate={[
-                            required(),
-                            minLength(2),
-                            maxLength(50),
-                            //checkUnicity(url, originHubName),
-                        ]}
+                        validate={[required(), minLength(2), maxLength(50)]}
                     />
                     <Labeled
                         // On <Labeled />, this will translate in a correct `for` attribute on the label
@@ -256,30 +251,6 @@ export const ApplicationNew = ({ userContext, toolbarProps }) => {
     );
 };
 
-const checkUnicity = (url, applicationName) => async value => {
-    if (value.length < 3) {
-        return;
-    }
-    try {
-        await checkApplicationNameUnicity(url, applicationName, value);
-    } catch (error) {
-        return 'resources.applications.validation.error_application_name_not_unique';
-    }
-};
-
-const checkApplicationNameUnicity = async (
-    url,
-    originHubName,
-    applicationName
-) => {
-    const fetchJson = getFetchJson(originHubName);
-    const { json } = await fetchJson(
-        `${url}/admin/Portal.svc/ApplicationNameUnique()?Name='${applicationName}'`
-    );
-
-    return json;
-};
-
 const useStyles = makeStyles(
     theme => ({
         root: {
diff --git a/packages/layer7-apihub/src/applications/ApplicationShow.js b/packages/layer7-apihub/src/applications/ApplicationShow.js
index 85a1c27ee..e63020135 100755
--- a/packages/layer7-apihub/src/applications/ApplicationShow.js
+++ b/packages/layer7-apihub/src/applications/ApplicationShow.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { CRUD_DELETE, useDelete, useRefresh, useTranslate } from 'ra-core';
+import { useHistory } from 'react-router-dom';
+import { CRUD_DELETE, useDelete, useTranslate } from 'ra-core';
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -12,6 +13,7 @@ import { isEditApplicationDisabled } from './isApplicationPending';
 import { useUserContext } from '../userContexts';
 import { useLayer7Notify } from '../useLayer7Notify';
 import { ConfirmDialog } from '../ui/ConfirmDialog';
+import { LoadingDialog } from '../ui/LoadingDialog';
 
 const useContentStyles = makeStyles(theme => ({
     label: {
@@ -31,8 +33,9 @@ const AppShowActions = ({
     const [deleteConfirm, setDeleteConfirm] = React.useState(false);
     const translate = useTranslate();
     const notify = useLayer7Notify();
-    const refresh = useRefresh();
     const contentLabelClasses = useContentStyles();
+    const history = useHistory();
+    const [deleting, setDeleting] = React.useState(false);
 
     React.useEffect(() => {
         if (data && !isEditApplicationDisabled(userContext, data)) {
@@ -65,9 +68,11 @@ const AppShowActions = ({
                     smart_count: 1,
                 }
             );
-            refresh();
+            setDeleting(false);
+            history.push('/applications');
         },
         onFailure: error => {
+            setDeleting(false);
             notify(
                 error || 'resources.applications.notifications.delete_error',
                 'error'
@@ -110,11 +115,19 @@ const AppShowActions = ({
                 )}
                 open={deleteConfirm}
                 onConfirm={() => {
-                    deleteApplication();
                     setDeleteConfirm(false);
+                    setDeleting(true);
+                    deleteApplication();
                 }}
                 onCancel={() => setDeleteConfirm(false)}
             />
+            <LoadingDialog
+                title={translate(
+                    'resources.applications.actions.deleting_title'
+                )}
+                content={translate('resources.applications.deleting_content')}
+                open={deleting}
+            />
         </TopToolbar>
     );
 };
diff --git a/packages/layer7-apihub/src/authentication/AccountSetup/useAccountData.js b/packages/layer7-apihub/src/authentication/AccountSetup/useAccountData.js
index 1b0d8cdb5..a2d21e282 100755
--- a/packages/layer7-apihub/src/authentication/AccountSetup/useAccountData.js
+++ b/packages/layer7-apihub/src/authentication/AccountSetup/useAccountData.js
@@ -91,12 +91,12 @@ export const useAccountData = (location = window.location.href) => {
         }
     }, [urlWithTenant, token, state, accountData, originHubName]);
 
-    const handleSubmitAccountData = data => {
+    const handleSubmitAccountData = async data => {
         let finalData = data;
         if (publicKey) {
             finalData = {
                 ...data,
-                password: encrypt(data.password),
+                password: await encrypt(data.password),
             };
         }
         return submitAccountData(
diff --git a/packages/layer7-apihub/src/dataProvider/apiKeys.js b/packages/layer7-apihub/src/dataProvider/apiKeys.js
new file mode 100755
index 000000000..fb6338d0d
--- /dev/null
+++ b/packages/layer7-apihub/src/dataProvider/apiKeys.js
@@ -0,0 +1,34 @@
+import { stringify } from 'query-string';
+
+export const apiKeysDataProvider = context => {
+    return {
+        getList: async ({
+            applicationUuid,
+            filter = {},
+            pagination = { page: 1, perPage: 24 },
+            sort = null,
+        }) => {
+            const basePath = `${context.apiUrl}/api-management/1.0/applications/${applicationUuid}/api-keys`;
+            const url = `${basePath}?${stringify({
+                ...filter,
+                page: pagination.page - 1,
+                size: pagination.perPage,
+                ...(sort && { sort: `${sort.field},${sort.order}` }),
+            })}`;
+
+            const { json } = await context.fetchJson(url, {
+                credentials: 'include',
+            });
+
+            return {
+                data:
+                    json.results.map(({ apiKey, ...item }) => ({
+                        id: apiKey,
+                        apiKey,
+                        ...item,
+                    })) || [],
+                total: json.totalElements || 0,
+            };
+        },
+    };
+};
diff --git a/packages/layer7-apihub/src/dataProvider/index.js b/packages/layer7-apihub/src/dataProvider/index.js
index e56184f9a..299f4c27e 100755
--- a/packages/layer7-apihub/src/dataProvider/index.js
+++ b/packages/layer7-apihub/src/dataProvider/index.js
@@ -5,6 +5,7 @@ import { apiEulasDataProvider } from './apiEulas';
 import { apiGroupsDataProvider } from './apiGroups';
 import { apiPlansDataProvider } from './apiPlans';
 import { apisDataProvider } from './apis';
+import { apiKeysDataProvider } from './apiKeys';
 import { applicationsDataProvider } from './applications';
 import { assetsDataProvider } from './assets';
 import { customFieldsDataProvider } from './customFields';
@@ -35,6 +36,7 @@ export const dataProvider = (
         apiGroups: apiGroupsDataProvider(context),
         apiPlans: apiPlansDataProvider(context),
         apis: apisDataProvider(context),
+        apiKeys: apiKeysDataProvider(context),
         applications: applicationsDataProvider(context),
         assets: assetsDataProvider(context),
         customFields: customFieldsDataProvider(context),
diff --git a/packages/layer7-apihub/src/i18n/en.js b/packages/layer7-apihub/src/i18n/en.js
index 69a8fe5fc..69f9cb7d2 100755
--- a/packages/layer7-apihub/src/i18n/en.js
+++ b/packages/layer7-apihub/src/i18n/en.js
@@ -291,6 +291,9 @@ const apiHubMessages = {
                 rate_limit: 'Rate Limit',
                 quota: 'Quota',
                 quota_interval: 'Quota Interval',
+                second: 'second',
+                day: 'day',
+                month: 'month',
             },
         },
         applications: {
@@ -314,7 +317,7 @@ const apiHubMessages = {
                 apiGroup: 'API Group',
                 organization: 'Organization',
                 applicationInformation: 'Application Information',
-                customField: 'Custom Field',
+                customField: 'Custom Fields',
                 noCustomFields: 'No available custom fields',
                 noApplications: 'No available applications',
                 apiManagement: 'API Management',
@@ -345,6 +348,7 @@ const apiHubMessages = {
                 addApplication: 'Add Application',
                 createApplication: 'Create Application',
                 deleteApplication: 'Delete Application',
+                deleting_title: 'Deleting Application',
                 select_api: 'Select API',
                 addApi: 'Add API',
                 addApiGroup: 'Add API Group',
@@ -406,6 +410,8 @@ const apiHubMessages = {
             },
             confirm_delete:
                 'You are about to delete this application. Are you sure?',
+            deleting_content:
+                'Undeploying keys and deleting application. This may take several minutes.',
         },
         documents: {
             name: 'Wiki |||| Wiki',
diff --git a/packages/layer7-apihub/src/i18n/es.js b/packages/layer7-apihub/src/i18n/es.js
index 8cc6f4c23..4a0ee81a0 100755
--- a/packages/layer7-apihub/src/i18n/es.js
+++ b/packages/layer7-apihub/src/i18n/es.js
@@ -302,6 +302,9 @@ const apiHubMessages = {
                 rate_limit: 'Límite de frecuencia',
                 quota: 'Cuota',
                 quota_interval: 'Intervalo de cuota',
+                second: 'segundo',
+                day: 'día',
+                month: 'mes',
             },
         },
         applications: {
@@ -359,6 +362,7 @@ const apiHubMessages = {
                 addApplication: 'Agregar aplicación',
                 createApplication: 'Crear aplicación',
                 deleteApplication: 'Suprimir aplicación',
+                deleting_title: 'Eliminando aplicación',
                 select_api: 'Seleccionar API',
                 addApi: 'Agregar API',
                 addApiGroup: 'Agregar grupo de API',
@@ -424,6 +428,8 @@ const apiHubMessages = {
             },
             confirm_delete:
                 'Está a punto de suprimir este aplicación. ¿Está seguro?',
+            deleting_content:
+                'Anulación de la implementación de claves y eliminación de la aplicación. Esto puede tomar varios minutos.',
         },
         documents: {
             name: 'Wiki |||| Wiki',
diff --git a/packages/layer7-apihub/src/i18n/fr.js b/packages/layer7-apihub/src/i18n/fr.js
index b343749eb..1a02982f5 100755
--- a/packages/layer7-apihub/src/i18n/fr.js
+++ b/packages/layer7-apihub/src/i18n/fr.js
@@ -299,6 +299,9 @@ const apiHubMessages = {
                 rate_limit: 'Limite de taux',
                 quota: 'Quota',
                 quota_interval: 'Intervalle de quota',
+                second: 'seconde',
+                day: 'jour',
+                month: 'mois',
             },
         },
         applications: {
@@ -354,6 +357,7 @@ const apiHubMessages = {
                 addApplication: 'Ajouter une application',
                 createApplication: 'Créer une application',
                 deleteApplication: "Supprimer l'application",
+                deleting_title: "Suppression de l'application",
                 select_api: "Sélectionner l'API",
                 addApi: 'Ajouter une API',
                 addApiGroup: "Ajouter un groupe d'API",
@@ -419,6 +423,8 @@ const apiHubMessages = {
             },
             confirm_delete:
                 'Vous êtes sur le point de supprimer cette application. Voulez-vous continuer ?',
+            deleting_content:
+                "Annulation du déploiement des clés et suppression de l'application. Cela peut prendre plusieurs minutes.",
         },
         documents: {
             name: 'Wiki |||| Wiki',
diff --git a/packages/layer7-apihub/src/i18n/it.js b/packages/layer7-apihub/src/i18n/it.js
index 7acaec79a..62e0c1b85 100755
--- a/packages/layer7-apihub/src/i18n/it.js
+++ b/packages/layer7-apihub/src/i18n/it.js
@@ -293,6 +293,9 @@ const apiHubMessages = {
                 rate_limit: 'Limite di frequenza',
                 quota: 'Quota',
                 quota_interval: 'Intervallo di quota',
+                second: 'secondi',
+                day: 'giorno',
+                month: 'mese',
             },
         },
         applications: {
@@ -345,6 +348,7 @@ const apiHubMessages = {
                 addApplication: 'Aggiungi applicazione',
                 createApplication: 'Crea applicazione',
                 deleteApplication: 'Elimina applicazione',
+                deleting_title: "Eliminazione dell'applicazione",
                 select_api: 'Seleziona API',
                 addApi: 'Aggiungi API',
                 addApiGroup: 'Aggiungi gruppo API',
@@ -409,6 +413,8 @@ const apiHubMessages = {
             },
             confirm_delete:
                 "Si sta per procedere all'eliminazione dell'applicazione. Procedere?",
+            deleting_content:
+                "Annullamento della distribuzione delle chiavi ed eliminazione dell'applicazione. Questo potrebbe richiedere vari minuti.",
         },
         documents: {
             name: 'Wiki |||| Wiki',
diff --git a/packages/layer7-apihub/src/ui/List.js b/packages/layer7-apihub/src/ui/List.js
index 7f1943ee6..17635fe75 100755
--- a/packages/layer7-apihub/src/ui/List.js
+++ b/packages/layer7-apihub/src/ui/List.js
@@ -50,12 +50,12 @@ const Pagination = props => {
 
     useEffect(() => {
         if (perPagePreference !== perPage) {
-            setPerPage(perPagePreference);
+            setPerPagePreference(perPagePreference);
         }
-    }, [perPage, perPagePreference, setPerPage]);
+    }, [perPage, perPagePreference, setPerPage, setPerPagePreference]);
 
     const handleSetPerPage = newPerPage => {
-        setPerPagePreference(newPerPage);
+        setPerPage(newPerPage);
     };
 
     return (
diff --git a/packages/layer7-apihub/src/ui/LoadingDialog.js b/packages/layer7-apihub/src/ui/LoadingDialog.js
new file mode 100755
index 000000000..e3d5cfbe0
--- /dev/null
+++ b/packages/layer7-apihub/src/ui/LoadingDialog.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+export const LoadingDialog = ({ title, content, open = false, ...rest }) => {
+    const classes = useStyles(rest);
+
+    return (
+        <Dialog
+            maxWidth="xs"
+            aria-labelledby="message-dialog-title"
+            open={open}
+            {...rest}
+        >
+            <DialogTitle id="message-dialog-title">{title}</DialogTitle>
+            <DialogContent className={classes.root}>
+                <Typography variant="body1">{content}</Typography>
+                <CircularProgress className={classes.progress} />
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+        },
+        progress: {
+            marginTop: theme.spacing(3),
+            marginBottom: theme.spacing(3),
+        },
+    }),
+    {
+        name: 'Layer7LoadingDialog',
+    }
+);
diff --git a/pom.xml b/pom.xml
index d31c5c71e..eda948231 100755
--- a/pom.xml
+++ b/pom.xml
@@ -5,7 +5,7 @@
 
   <groupId>com.ca.apim</groupId>
   <artifactId>apihub</artifactId>
-  <version>24.2-SNAPSHOT</version>
+  <version>25.6-SNAPSHOT</version>
   <packaging>jar</packaging>
 
   <properties>
diff --git a/remote-hosting/.gitignore b/remote-hosting/.gitignore
new file mode 100755
index 000000000..05bfff12f
--- /dev/null
+++ b/remote-hosting/.gitignore
@@ -0,0 +1,2 @@
+apihub*
+sslcert
diff --git a/remote-hosting/README.md b/remote-hosting/README.md
new file mode 100755
index 000000000..39e6d9412
--- /dev/null
+++ b/remote-hosting/README.md
@@ -0,0 +1,13 @@
+# Layer7 API Hub - Remote Hosting with NodeJs
+
+**Prerequisite:**
+- Create an SSL Ceritifcate and place it in the sslcert folder
+`eg. openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt`
+- add `local.portal.ca.com` to `/etc/hosts` file
+
+**Steps:**
+- unzip the required apihub jar in the `apihub-jar` folder
+- update the config.js for the above
+- `npm install`
+- `npm start`
+- access the env. using `https://local.portal.ca.com`
\ No newline at end of file
diff --git a/remote-hosting/index.js b/remote-hosting/index.js
new file mode 100755
index 000000000..425d591ee
--- /dev/null
+++ b/remote-hosting/index.js
@@ -0,0 +1,26 @@
+var fs = require('fs');
+const express = require('express');
+const path = require('path');
+const https = require('https');
+const http = require('http');
+
+const server = express();
+
+server.use(
+  '/',
+  express.static(path.join(__dirname, './apihub-jar'))
+);
+
+server.on('error', err => {
+    console.error(err)
+    if (!server.listening) {
+      return reject(err);
+    }
+  throw err;
+});
+
+const host = process.env.HOST || 'localhost';
+const port = process.env.PORT || 443;
+const privateKey  = fs.readFileSync('sslcert/selfsigned.key', 'utf8');
+const certificate = fs.readFileSync('sslcert/selfsigned.crt', 'utf8');
+https.createServer({ key: privateKey, cert: certificate }, server).listen(port);
diff --git a/remote-hosting/package-lock.json b/remote-hosting/package-lock.json
new file mode 100755
index 000000000..7b23cf423
--- /dev/null
+++ b/remote-hosting/package-lock.json
@@ -0,0 +1,374 @@
+{
+  "name": "remote-hosting",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
+      "integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w=="
+    },
+    "mime-types": {
+      "version": "2.1.28",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz",
+      "integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==",
+      "requires": {
+        "mime-db": "1.45.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    }
+  }
+}
diff --git a/remote-hosting/package.json b/remote-hosting/package.json
new file mode 100755
index 000000000..ad869c948
--- /dev/null
+++ b/remote-hosting/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "remote-hosting",
+  "version": "1.0.0",
+  "description": "Remote Hosting setup for API Hub",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "HOST=local.portal.ca.com node index.js"
+  },
+  "dependencies": {
+    "express": "^4.17.1"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 76179a8f1..2fc414586 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -8799,9 +8799,9 @@ hoopy@^0.1.4:
   integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
 
 hosted-git-info@^2.1.4:
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
-  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -9245,9 +9245,9 @@ inherits@2.0.3:
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.5, ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 inline-style-parser@0.1.1:
   version "0.1.1"
@@ -16762,9 +16762,9 @@ sshpk@^1.7.0:
     tweetnacl "~0.14.0"
 
 ssri@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
-  integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
+  integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
   dependencies:
     figgy-pudding "^3.5.1"
 
@@ -18036,9 +18036,9 @@ uri-template-lite@^20.5.0:
   integrity sha512-RL6Pnz0DO4XH9WZhZTX6u0SP6afNM9z+u7lXYHO+RkVGzpNcgKc1Y2tcAX/KVIEi2ctfzf+iLcofkwKoYiGH4Q==
 
 urijs@^1.19.2, urijs@~1.19.2:
-  version "1.19.2"
-  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.2.tgz#f9be09f00c4c5134b7cb3cf475c1dd394526265a"
-  integrity sha512-s/UIq9ap4JPZ7H1EB5ULo/aOUbWqfDi7FKzMC2Nz+0Si8GiT1rIEaprt8hy3Vy2Ex2aJPpOQv4P4DuOZ+K1c6w==
+  version "1.19.6"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.6.tgz#51f8cb17ca16faefb20b9a31ac60f84aa2b7c870"
+  integrity sha512-eSXsXZ2jLvGWeLYlQA3Gh36BcjF+0amo92+wHPyN1mdR8Nxf75fuEuYTd9c0a+m/vhCjRK0ESlE9YNLW+E1VEw==
 
 urix@^0.1.0:
   version "0.1.0"