diff --git a/src/app/pages-family/playground/playground.page.html b/src/app/pages-family/playground/playground.page.html
index ba6bebf..27a1e8b 100644
--- a/src/app/pages-family/playground/playground.page.html
+++ b/src/app/pages-family/playground/playground.page.html
@@ -5,7 +5,7 @@
         <ion-icon name="arrow-back-outline"></ion-icon>
       </ion-button>
     </ion-buttons>
-    <ion-title>Playgroud</ion-title>
+    <ion-title>Playground</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -19,49 +19,59 @@
     <div class="ion-padding">
       <div class="flex">
         <ion-label class="bold_text">A.I. Playground</ion-label>
-        <!--      <ion-icon slot="end" name="bookmark-outline" color="primary"></ion-icon>-->
       </div>
 
-      <!--    <div class="row">-->
-      <!--      <ion-label class="bg_text">3D Design</ion-label>-->
-      <!--      <div class="rate">-->
-      <!--        <ion-icon name="star-half-outline" color="warning"></ion-icon>-->
-      <!--        <ion-label class="review">4.8 (4478 reviews)</ion-label>-->
-      <!--      </div>-->
-      <!--    </div>-->
-
-      <!--    <ion-label class="color_text">$40</ion-label>-->
-
       <div class="items">
-        <div class="stud"  *ngFor="let item of playFastMenu; let i=index ">
+        <div class="stud"  *ngFor="let item of playFastMenu; let i=index" (click)="changeTab(item)">
           <ion-icon slot="start" name="people" color="primary"></ion-icon>
           <ion-label>{{item.name}}</ion-label>
         </div>
-        <!--      <div class="stud">-->
-        <!--        <ion-icon slot="start" name="time" color="primary"></ion-icon>-->
-        <!--        <ion-label>{{item.name}}</ion-label>-->
-        <!--      </div>-->
-        <!--      <div class="stud">-->
-        <!--        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>-->
-        <!--        <ion-label>No idea 3</ion-label>-->
-        <!--      </div>-->
       </div>
 
+      <div *ngIf="tabMode == 'featured' " class="lesson">
 
-
-
-      <div  class="lesson">
-        <!--      <div class="flex">-->
-        <!--        <ion-label class="bold">Most Popular Courses</ion-label>-->
-        <!--        <ion-label class="color">See all</ion-label>-->
-        <!--      </div>-->
-        <div  *ngFor="let item of playListData; let i=index " >
-
+        <div  *ngFor="let item of featuredListData; let i=index " >
           <div class="sec">
             <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">
+            <div class="left">
+              <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
 
+              <div class="text">
+                <ion-label class="bold_text">{{iteml.title}}</ion-label>
+                <ion-label class="grey_text">{{iteml.description}}</ion-label>
+              </div>
+            </div>
+            <div class="right">
+              <ion-icon name="chevron-forward-outline"></ion-icon>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <div *ngIf="tabMode == 'collections' " class="lesson">
+
+        <div>COL</div>
+
+      </div>
+
+      <div *ngIf="tabMode == 'shared' " class="lesson">
+
+        <div>SHA</div>
+
+      </div>
+
+
+
+      <div  class="lesson">
+        <div  *ngFor="let item of playListData; let i=index " >
+          <div class="sec">
+            <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">
             <div class="left">
               <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
@@ -82,11 +92,3 @@
     </div>
   </div>
 </ion-content>
-
-<!--<ion-footer>-->
-<!--  <ion-toolbar>-->
-<!--    <div class="button" (click)="onBack()">-->
-<!--      <ion-label class="text">Return</ion-label>-->
-<!--    </div>-->
-<!--  </ion-toolbar>-->
-<!--</ion-footer>-->
diff --git a/src/app/pages-family/playground/playground.page.ts b/src/app/pages-family/playground/playground.page.ts
index 051be34..1a68dd7 100644
--- a/src/app/pages-family/playground/playground.page.ts
+++ b/src/app/pages-family/playground/playground.page.ts
@@ -14,6 +14,7 @@ export class PlaygroundPage implements OnInit {
 
 
   tabs = 'about';
+  tabMode = 'featured'
 
   constructor(
       private navctr: NavController,
@@ -42,6 +43,8 @@ export class PlaygroundPage implements OnInit {
   playListTotalData:any;
   playListData: [];
   playFastMenu:[];
+  featuredListData:[];
+
   paygroundData(){
 
 
@@ -56,11 +59,16 @@ export class PlaygroundPage implements OnInit {
           // console.log("REFER  RETURN->", this.referTotalData);
           this.playFastMenu = this.playListTotalData.layer_menu;
           this.playListData = this.playListTotalData.result_list;
+          this.featuredListData = this.playListTotalData.featured;
           console.log("playListTotalData RETURN DATA->", this.playListData);
         }
     );
 
   }
 
+  changeTab(item){
+   // alert(item);
+    this.tabMode = item.tab;
+  }
 
 }