diff --git a/gateway-server/src/main/java/org/apache/knox/gateway/config/impl/GatewayConfigImpl.java b/gateway-server/src/main/java/org/apache/knox/gateway/config/impl/GatewayConfigImpl.java
index 82452d9308..90f6ee7c61 100644
--- a/gateway-server/src/main/java/org/apache/knox/gateway/config/impl/GatewayConfigImpl.java
+++ b/gateway-server/src/main/java/org/apache/knox/gateway/config/impl/GatewayConfigImpl.java
@@ -324,6 +324,8 @@ public class GatewayConfigImpl extends Configuration implements GatewayConfig {
   private static final String KNOX_HOMEPAGE_PROFILE_PREFIX =  "knox.homepage.profile.";
   private static final String KNOX_HOMEPAGE_PINNED_TOPOLOGIES =  "knox.homepage.pinned.topologies";
   private static final String KNOX_HOMEPAGE_HIDDEN_TOPOLOGIES =  "knox.homepage.hidden.topologies";
+  private static final String KNOX_HOMEPAGE_API_SERVICES_VIEW_VERSION = "knox.homepage.api.services.view.version";
+
   private static final Set<String> KNOX_HOMEPAGE_HIDDEN_TOPOLOGIES_DEFAULT = new HashSet<>(Arrays.asList("admin", "manager", "knoxsso", "metadata", "homepage"));
   private static final String KNOX_HOMEPAGE_LOGOUT_ENABLED =  "knox.homepage.logout.enabled";
   private static final String GLOBAL_LOGOUT_PAGE_URL = "knox.global.logout.page.url";
@@ -1389,6 +1391,11 @@ public Set<String> getPinnedTopologiesOnHomepage() {
     return pinnedTopologies == null ? Collections.emptySet() : new HashSet<>(pinnedTopologies);
   }
 
+  @Override
+  public String getApiServicesViewVersionOnHomepage() {
+    return getTrimmed(KNOX_HOMEPAGE_API_SERVICES_VIEW_VERSION, DEFAULT_API_SERVICES_VIEW_VERSION);
+  }
+
   @Override
   public String getServiceParameter(String service, String parameter) {
     return get(GATEWAY_SERVICE_PREFIX + service + "." + parameter, "");
diff --git a/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/KnoxMetadataResource.java b/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/KnoxMetadataResource.java
index 36d6e0ce8f..6f6c4e2b10 100644
--- a/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/KnoxMetadataResource.java
+++ b/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/KnoxMetadataResource.java
@@ -237,7 +237,7 @@ private TopologyInformationWrapper getTopologies(String topologyName) {
               }
             });
           });
-          topologies.addTopology(topology.getName(), isPinnedTopology(topology.getName(), config), new TreeSet<>(apiServices), new TreeSet<>(uiServices));
+          topologies.addTopology(topology.getName(), isPinnedTopology(topology.getName(), config), config.getApiServicesViewVersionOnHomepage(), new TreeSet<>(apiServices), new TreeSet<>(uiServices));
         }
       }
     }
diff --git a/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformation.java b/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformation.java
index c544f77a0f..7bfb0c649f 100644
--- a/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformation.java
+++ b/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformation.java
@@ -32,6 +32,9 @@ public class TopologyInformation implements Comparable<TopologyInformation>{
   @XmlElement(name = "pinned")
   private boolean pinned;
 
+  @XmlElement(name = "apiServicesViewVersion")
+  private String apiServicesViewVersion;
+
   @XmlElement(name = "service")
   @XmlElementWrapper(name = "apiServices")
   private Set<ServiceModel> apiServices;
@@ -56,6 +59,14 @@ public void setPinned(boolean pinned) {
     this.pinned = pinned;
   }
 
+  public void setApiServicesViewVersion(String apiServicesViewVersion) {
+    this.apiServicesViewVersion = apiServicesViewVersion;
+  }
+
+  public String getApiServicesViewVersion() {
+    return apiServicesViewVersion;
+  }
+
   public Set<ServiceModel> getApiServices() {
     return apiServices;
   }
diff --git a/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformationWrapper.java b/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformationWrapper.java
index 5613b9fd41..f27a25673c 100644
--- a/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformationWrapper.java
+++ b/gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformationWrapper.java
@@ -36,12 +36,13 @@ public Set<TopologyInformation> getTopologies() {
     return topologies;
   }
 
-  public void addTopology(String name, boolean pinned, Set<ServiceModel> apiServices, Set<ServiceModel> uiServices) {
+  public void addTopology(String name, boolean pinned, String apiServicesViewVersion, Set<ServiceModel> apiServices, Set<ServiceModel> uiServices) {
     final TopologyInformation topology = new TopologyInformation();
     topology.setTopologyName(name);
     topology.setPinned(pinned);
     topology.setApiServices(apiServices);
     topology.setUiServices(uiServices);
+    topology.setApiServicesViewVersion(apiServicesViewVersion);
     this.topologies.add(topology);
   }
 
diff --git a/gateway-spi-common/src/main/java/org/apache/knox/gateway/GatewayTestConfig.java b/gateway-spi-common/src/main/java/org/apache/knox/gateway/GatewayTestConfig.java
index 51b47da82e..4d3ec0d9dc 100644
--- a/gateway-spi-common/src/main/java/org/apache/knox/gateway/GatewayTestConfig.java
+++ b/gateway-spi-common/src/main/java/org/apache/knox/gateway/GatewayTestConfig.java
@@ -929,6 +929,11 @@ public Set<String> getPinnedTopologiesOnHomepage() {
     return Collections.emptySet();
   }
 
+  @Override
+  public String getApiServicesViewVersionOnHomepage() {
+    return DEFAULT_API_SERVICES_VIEW_VERSION;
+  }
+
   /**
    * @return returns whether know token permissive failure is enabled
    */
diff --git a/gateway-spi/src/main/java/org/apache/knox/gateway/config/GatewayConfig.java b/gateway-spi/src/main/java/org/apache/knox/gateway/config/GatewayConfig.java
index 91d790fde0..225a187e1f 100644
--- a/gateway-spi/src/main/java/org/apache/knox/gateway/config/GatewayConfig.java
+++ b/gateway-spi/src/main/java/org/apache/knox/gateway/config/GatewayConfig.java
@@ -117,6 +117,8 @@ public interface GatewayConfig {
 
   int DEFAULT_CM_SERVICE_DISCOVERY_MAX_RETRY_ATTEMPTS = 3;
 
+  String DEFAULT_API_SERVICES_VIEW_VERSION = "v1";
+
   /**
    * The location of the gateway configuration.
    * Subdirectories will be: topologies
@@ -835,6 +837,11 @@ public interface GatewayConfig {
    */
   Set<String> getPinnedTopologiesOnHomepage();
 
+  /**
+   * @return the API services view version (v1/v2) on Knox homepage
+   */
+  String getApiServicesViewVersionOnHomepage();
+
   /**
    * @return returns whether know token permissive validation is enabled
    */
diff --git a/knox-homepage-ui/angular.json b/knox-homepage-ui/angular.json
index 0e7fd20ead..2e90da6217 100644
--- a/knox-homepage-ui/angular.json
+++ b/knox-homepage-ui/angular.json
@@ -70,6 +70,7 @@
             },
             "development": {
               "buildOptimizer": false,
+              "aot": false,
               "optimization": false,
               "vendorChunk": true,
               "extractLicenses": false,
diff --git a/knox-homepage-ui/home/app/app.module.ts b/knox-homepage-ui/home/app/app.module.ts
index 87aa93efbe..79019acd3c 100644
--- a/knox-homepage-ui/home/app/app.module.ts
+++ b/knox-homepage-ui/home/app/app.module.ts
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import {NgModule} from '@angular/core';
+import {DataTableModule} from 'angular2-datatable';
 import {BrowserModule} from '@angular/platform-browser';
 import {HttpClientModule, HttpClientXsrfModule} from '@angular/common/http';
 import {MatGridListModule} from '@angular/material/grid-list';
@@ -31,6 +32,7 @@ import {HomepageService} from './homepage.service';
     imports: [BrowserModule,
         HttpClientModule,
         HttpClientXsrfModule,
+        DataTableModule,
         MatGridListModule,
         BsModalModule,
         RouterModule.forRoot([])
diff --git a/knox-homepage-ui/home/app/topologies/topology.information.component.html b/knox-homepage-ui/home/app/topologies/topology.information.component.html
index b240567ef6..3098476cac 100644
--- a/knox-homepage-ui/home/app/topologies/topology.information.component.html
+++ b/knox-homepage-ui/home/app/topologies/topology.information.component.html
@@ -52,7 +52,41 @@ <h3>{{service.description}}</h3>
         </mat-grid-list>
 
         <!-- API services -->
-        <mat-grid-list cols="4" rowHeight="130px" *ngIf="topology.topology !== 'cdp-proxy'">
+
+        <h5 *ngIf="topology.apiServices.service.length > 0">API Services</h5>
+
+        <table *ngIf="topology.apiServicesViewVersion === 'v1'" class="table table-hover" [mfData]="topology.apiServices.service" #api="mfDataTable" [mfRowsOnPage]="5">
+            <colgroup>
+                <col width="30%">
+                <col width="70%">
+            </colgroup>
+            <thead>
+                <tr *ngIf="topology.apiServices.service.length === 0"><th colspan="2">No API services found</th></tr>
+                <tr *ngIf="topology.apiServices.service.length > 0"><th colspan="2">API services</th></tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let service of api.data">
+                    <td>
+                        <span class="inline-glyph glyphicon glyphicon-info-sign btn btn-xs"
+                        title="{{service.description}}"
+                        data-toggle="tooltip"></span>
+                        {{service.shortDesc}} <span class="small" *ngIf="service.version">(v{{service.version}})</span>
+                    </td>
+                    <td>
+                        <a href="{{service.serviceUrl}}">{{service.serviceUrl}}</a>
+                    </td>
+                </tr>
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td colspan="4">
+                      <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
+                    </td>
+                </tr>
+            </tfoot>
+        </table>
+
+        <mat-grid-list cols="4" rowHeight="130px" *ngIf="topology.topology !== 'cdp-proxy' && topology.apiServicesViewVersion === 'v2'">
             <mat-grid-tile *ngFor="let service of topology.apiServices.service" [colspan]="1" [rowspan]="1">
                 <span *ngIf="!this['enableServiceText_' + service.serviceName.toLowerCase()]" (click)="openApiServiceInformationModal(service)">
                     <img src="assets/service-logos/{{service.serviceName.toLowerCase()}}.png" height="50px" (error)="enableServiceText('enableServiceText_' + service.serviceName.toLowerCase())"/>
diff --git a/knox-homepage-ui/home/app/topologies/topology.information.ts b/knox-homepage-ui/home/app/topologies/topology.information.ts
index 5bb00a0a46..dabd4c8e28 100644
--- a/knox-homepage-ui/home/app/topologies/topology.information.ts
+++ b/knox-homepage-ui/home/app/topologies/topology.information.ts
@@ -19,6 +19,7 @@ import {Service} from './service';
 export class TopologyInformation {
     topology: string;
     pinned: boolean;
+    apiServicesViewVersion: string;
     apiServices: Service[];
     uiServices: Service[];
 }
diff --git a/knox-homepage-ui/package-lock.json b/knox-homepage-ui/package-lock.json
index 54faa94acf..e4f22750aa 100644
--- a/knox-homepage-ui/package-lock.json
+++ b/knox-homepage-ui/package-lock.json
@@ -3050,6 +3050,14 @@
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true
     },
+    "angular2-datatable": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/angular2-datatable/-/angular2-datatable-0.6.0.tgz",
+      "integrity": "sha512-Fgg3hg3Pyg80Tp21Fu9qzsj9yx4941cIbbWpbKHJlQua5eketQPAp+yEbnz0KnaMprlpQg5IBe6xdIAg1G6aCQ==",
+      "requires": {
+        "lodash": "^4.0.0"
+      }
+    },
     "ansi-colors": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
@@ -6391,8 +6399,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
diff --git a/knox-homepage-ui/package.json b/knox-homepage-ui/package.json
index 3e69cda28e..5ebcec3344 100644
--- a/knox-homepage-ui/package.json
+++ b/knox-homepage-ui/package.json
@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^13.0.1",
     "@angular/platform-browser-dynamic": "^13.0.1",
     "@angular/router": "^13.0.1",
+    "angular2-datatable": "^0.6.0",
     "bootstrap": "^3.4.1",
     "core-js": "^2.6.11",
     "jquery": "^3.5.1",