diff --git a/src/app/pages-family/playground/playground.page.html b/src/app/pages-family/playground/playground.page.html
index 07e52c4..6df6cae 100644
--- a/src/app/pages-family/playground/playground.page.html
+++ b/src/app/pages-family/playground/playground.page.html
@@ -53,8 +53,21 @@
 
       <div *ngIf="tabMode == 'collections' " class="lesson">
 
+        <ion-card *ngIf="collectionsListdata[0].item_list.length==0" style="margin: 0px;">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+        </ion-card>
+
         <div  *ngFor="let item of collectionsListdata; let i=index " >
-          <div class="sec">
+
+            <div class="sec" *ngIf="collectionsListdata[0].item_list.length>0">
             <ion-label class="grey">{{item.name}}</ion-label>
             <!--        <ion-label class="color">15 min</ion-label>-->
           </div>
@@ -76,9 +89,25 @@
 
       <div *ngIf="tabMode == 'shared' " class="lesson">
 
+        <ion-card *ngIf="sharedListData[0].item_list.length==0"  style="margin: 0px;">
+
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          </ion-card-header>
+
+          <ion-card-content>
+            Here's a small text description for the card content. Nothing more, nothing less.
+          </ion-card-content>
+        </ion-card>
+
+
+
         <div  *ngFor="let item of sharedListData; let i=index " >
-          <div class="sec">
-            <ion-label class="grey">{{item.name}}</ion-label>
+
+          <div class="sec" *ngIf="sharedListData[0].item_list.length>0">
+            <ion-label  class="grey">{{item.name}}</ion-label>
             <!--        <ion-label class="color">15 min</ion-label>-->
           </div>
           <div class="video" *ngFor="let iteml of item.item_list.item">
diff --git a/src/app/pages-family/playground/playground.page.ts b/src/app/pages-family/playground/playground.page.ts
index 66e1c6f..acf3ddb 100644
--- a/src/app/pages-family/playground/playground.page.ts
+++ b/src/app/pages-family/playground/playground.page.ts
@@ -4,6 +4,7 @@ import {Router} from "@angular/router";
 import {SessionDataProviderService} from "../../store/session-data-provider.service";
 import {WrenchService} from "../../services/wrench.service";
 import {BlogDataService} from "../../store/blog-data.service";
+import {compareNumbers} from "@angular/compiler-cli/src/version_helpers";
 
 @Component({
   selector: 'app-playground',
@@ -47,6 +48,9 @@ export class PlaygroundPage implements OnInit {
   collectionsListdata:[];
   sharedListData:[];
 
+  // totalShared:number = 0;
+  // totalCollection:number = 0;
+
   paygroundData(){
 
 
@@ -65,6 +69,10 @@ export class PlaygroundPage implements OnInit {
           this.collectionsListdata   = this.playListTotalData.collections;
           this.sharedListData =  this.playListTotalData.shared;
 
+        //  this.totalShared  =  this.sharedListData[0].item_list.length;
+        //  this.totalCollection = this.collectionsListdata[0].item_list.length;
+//debugger;
+
           console.log("playListTotalData RETURN DATA->", this.playListData);
         }
     );