diff --git a/ngapp/src/app/connections/connections.component.html b/ngapp/src/app/connections/connections.component.html
index 70796825..d3d56a5a 100644
--- a/ngapp/src/app/connections/connections.component.html
+++ b/ngapp/src/app/connections/connections.component.html
@@ -63,7 +63,7 @@ <h1 class="card-pf-title">
 
       <!-- The list or card view -->
       <div class="col-md-12" *ngIf="isLoaded('connections')">
-        <app-connections-list *ngIf="isListLayout"
+        <app-connections-list *ngIf="isListLayout && hasConnections"
                               [connections]="filteredConnections"
                               [selectedConnections]="selectedConnections"
                               (activateConnection)="onActivate($event)"
@@ -71,7 +71,7 @@ <h1 class="card-pf-title">
                               (deleteConnection)="onDelete($event)"
                               (connectionSelected)="onSelected($event)"
                               (connectionDeselected)="onDeselected($event)"></app-connections-list>
-        <app-connections-cards *ngIf="isCardLayout"
+        <app-connections-cards *ngIf="isCardLayout && hasConnections"
                                [connections]="filteredConnections"
                                [selectedConnections]="selectedConnections"
                                (activateConnection)="onActivate($event)"
diff --git a/ngapp/src/app/connections/connections.component.ts b/ngapp/src/app/connections/connections.component.ts
index 6382d0ee..87778255 100644
--- a/ngapp/src/app/connections/connections.component.ts
+++ b/ngapp/src/app/connections/connections.component.ts
@@ -192,6 +192,13 @@ export class ConnectionsComponent extends AbstractPageComponent implements OnIni
     return this.allConns;
   }
 
+  /**
+   * @returns {boolean} 'true' if any connections are available
+   */
+  public get hasConnections(): boolean {
+    return this.allConns.length > 0;
+  }
+
   /**
    * @returns {Connection[]} the array of filtered connections
    */
diff --git a/ngapp/src/app/dataservices/dataservices.component.html b/ngapp/src/app/dataservices/dataservices.component.html
index 42d2533f..3ff4db46 100644
--- a/ngapp/src/app/dataservices/dataservices.component.html
+++ b/ngapp/src/app/dataservices/dataservices.component.html
@@ -82,13 +82,13 @@ <h1 class="card-pf-title">
         </div>
 
         <div class="{{cardListAreaCss}}">
-          <app-dataservices-list *ngIf="isListLayout" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
+          <app-dataservices-list *ngIf="isListLayout && hasDataservices" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
                                  (activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
                                  (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
                                  (editDataservice)="onEdit($event)" (quickLookDataservice)="onQuickLook($event)"
                                  (downloadDataservice)="onDownload($event)" (dataserviceSelected)="onSelected($event)"
                                  (dataserviceDeselected)="onDeselected($event)"></app-dataservices-list>
-          <app-dataservices-cards *ngIf="isCardLayout" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
+          <app-dataservices-cards *ngIf="isCardLayout && hasDataservices" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
                                   (activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
                                   (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
                                   (editDataservice)="onEdit($event)" (quickLookDataservice)="onQuickLook($event)"
diff --git a/ngapp/src/app/dataservices/dataservices.component.ts b/ngapp/src/app/dataservices/dataservices.component.ts
index 2d94f889..f3701cfa 100644
--- a/ngapp/src/app/dataservices/dataservices.component.ts
+++ b/ngapp/src/app/dataservices/dataservices.component.ts
@@ -323,6 +323,13 @@ export class DataservicesComponent extends AbstractPageComponent implements OnIn
     return this.allServices;
   }
 
+  /**
+   * @returns {boolean} 'true' if any dataservices are available
+   */
+  public get hasDataservices(): boolean {
+    return this.allServices.length > 0;
+  }
+
   /**
    * @returns {Dataservice[]} the array of filtered dataservices
    */