diff --git a/src/app/pages-family/playground/playground.page.html b/src/app/pages-family/playground/playground.page.html
index 2cce867..7bfd941 100644
--- a/src/app/pages-family/playground/playground.page.html
+++ b/src/app/pages-family/playground/playground.page.html
@@ -45,64 +45,26 @@
 <!--        <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 class="sec">
-        <ion-label class="grey">Section 1 - Introduction</ion-label>
-<!--        <ion-label class="color">15 min</ion-label>-->
-      </div>
+        <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 item of [1,2]">
-        <div class="left">
-          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></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">Why Using Figma ?</ion-label>
-            <ion-label class="grey_text">10 mins</ion-label>
+            <div class="text">
+              <ion-label class="bold_text">{{iteml.title}}</ion-label>
+              <ion-label class="grey_text">{{iteml.description}}</ion-label>
+            </div>
           </div>
-        </div>
-        <div class="right">
-          <ion-icon name="lock-closed-outline"></ion-icon>
-        </div>
-      </div>
-
-      <div class="sec">
-        <ion-label class="grey">Section 2 - Figma Basic</ion-label>
-<!--        <ion-label class="color">60 min</ion-label>-->
-      </div>
-
-
-      <div class="video" *ngFor="let item of [1,2,3,4,5,6]">
-        <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">Why Using Figma ?</ion-label>
-            <ion-label class="grey_text">10 mins</ion-label>
+          <div class="right">
+            <ion-icon name="lock-closed-outline"></ion-icon>
           </div>
         </div>
-        <div class="right">
-          <ion-icon name="lock-closed-outline"></ion-icon>
-        </div>
-      </div>
-
-      <div class="sec">
-        <ion-label class="grey">Section 3 - Let's Practice</ion-label>
-<!--        <ion-label class="color">75 min</ion-label>-->
-      </div>
-
-
-      <div class="video" *ngFor="let item of [1,2,3,4,5,6]">
-        <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">Why Using Figma ?</ion-label>
-            <ion-label class="grey_text">10 mins</ion-label>
-          </div>
-        </div>
-        <div class="right">
-          <ion-icon name="lock-closed-outline"></ion-icon>
-        </div>
       </div>
     </div>
 
diff --git a/src/app/pages-family/playground/playground.page.ts b/src/app/pages-family/playground/playground.page.ts
index 256932f..c82af56 100644
--- a/src/app/pages-family/playground/playground.page.ts
+++ b/src/app/pages-family/playground/playground.page.ts
@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import {NavController} from "@ionic/angular";
+import {AlertController, NavController} from "@ionic/angular";
 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";
 
 @Component({
   selector: 'app-playground',
@@ -14,22 +17,47 @@ export class PlaygroundPage implements OnInit {
 
   constructor(
       private navctr: NavController,
-      private router: Router
+      private router: Router,
+      public sessionDataProviderService: SessionDataProviderService,
+      private alertController:AlertController,
+      private wrenchService: WrenchService,
+      public blogDataService: BlogDataService
   ) { }
 
   ngOnInit() {
+    this.paygroundData();
   }
 
   onBack() {
     this.navctr.back();
   }
 
-  onMentor() {
-    this.router.navigate(['mentor']);
-  }
+  usrData: {
+    action:number, member_id: number, uid: string,
+    sessionid: string,
+    'limit': 30,
+    'offset': 0
+  };
+
+  playListTotalData:any;
+  playListData: [];
+  paygroundData(){
+
+
+    this.usrData = {action:11201, member_id: this.sessionDataProviderService.member_id, uid: this.sessionDataProviderService.member_uid,
+      sessionid: this.sessionDataProviderService.session,'limit': 30,
+      'offset': 0 }
+
+    this.wrenchService.getMyPlayground(this.usrData).subscribe(
+        playListTotalData => {
+          this.playListTotalData = playListTotalData;
+          //debugger;
+          // console.log("REFER  RETURN->", this.referTotalData);
+          this.playListData = this.playListTotalData.result_list;
+          console.log("playListTotalData RETURN DATA->", this.playListData);
+        }
+    );
 
-  onEnroll() {
-    this.router.navigate(['enroll']);
   }
 
 
diff --git a/src/app/services/wrench.service.ts b/src/app/services/wrench.service.ts
index 739a1d5..9063bf5 100644
--- a/src/app/services/wrench.service.ts
+++ b/src/app/services/wrench.service.ts
@@ -86,7 +86,11 @@ export class WrenchService {
         return this.getPostData('mynotifications',usrData);
     }
 
-  loginUser(loginData) {
+    getMyPlayground(usrData) {
+        return this.getPostData('playground',usrData);
+    }
+
+    loginUser(loginData) {
     return this.getPostData('userlogin',loginData);  
   }