diff --git a/src/app/pages-family/playground/playground.page.html b/src/app/pages-family/playground/playground.page.html
index 7cce06a..86d67c5 100644
--- a/src/app/pages-family/playground/playground.page.html
+++ b/src/app/pages-family/playground/playground.page.html
@@ -23,18 +23,18 @@
 <!--    <ion-label class="color_text">$40</ion-label>-->
 
     <div class="items">
-      <div class="stud">
+      <div class="stud"  *ngFor="let item of playFastMenu; let i=index ">
         <ion-icon slot="start" name="people" color="primary"></ion-icon>
-        <ion-label>No idea 1</ion-label>
-      </div>
-      <div class="stud">
-        <ion-icon slot="start" name="time" color="primary"></ion-icon>
-        <ion-label>No idea 2</ion-label>
-      </div>
-      <div class="stud">
-        <ion-icon slot="start" name="document-text" color="primary"></ion-icon>
-        <ion-label>No idea 3</ion-label>
+        <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>
 
 
diff --git a/src/app/pages-family/playground/playground.page.ts b/src/app/pages-family/playground/playground.page.ts
index c82af56..051be34 100644
--- a/src/app/pages-family/playground/playground.page.ts
+++ b/src/app/pages-family/playground/playground.page.ts
@@ -41,6 +41,7 @@ export class PlaygroundPage implements OnInit {
 
   playListTotalData:any;
   playListData: [];
+  playFastMenu:[];
   paygroundData(){
 
 
@@ -53,6 +54,7 @@ export class PlaygroundPage implements OnInit {
           this.playListTotalData = playListTotalData;
           //debugger;
           // console.log("REFER  RETURN->", this.referTotalData);
+          this.playFastMenu = this.playListTotalData.layer_menu;
           this.playListData = this.playListTotalData.result_list;
           console.log("playListTotalData RETURN DATA->", this.playListData);
         }
diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
index b25c6e6..1abd1e3 100644
--- a/src/app/pages/home/home.page.html
+++ b/src/app/pages/home/home.page.html
@@ -49,18 +49,31 @@
       <app-familypending></app-familypending>
       <app-suggestedlist></app-suggestedlist>
 
+    <ion-grid class="fam1">
+      <ion-row class="pend-row" >
+        <ion-col class="famleft"
+                 [style.backgroundImage]="'url(https://www.wrenchboard.com/assets/images/apps/ai-playground.jpg)'"
+                 [style.background-size]="contain"
+        ></ion-col>
+        <ion-col class="mid_place">
+          <ion-label class="sug_text">Playground</ion-label>
+          <ion-button shape="round" (click)="goPlayground()" fill="outline">Get Started</ion-button>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
 
-      <ion-card (click)="goPlayground()">
-        <img alt="AI PlayGround" src="https://www.wrenchboard.com/assets/images/apps/ai-playground.jpg" />
-        <ion-card-header>
-<!--          <ion-card-title>Card Title</ion-card-title>-->
-          <ion-card-subtitle>Artificial Intelligence Playground</ion-card-subtitle>
-        </ion-card-header>
 
-<!--        <ion-card-content>-->
-<!--          Here's a small text description for the-->
-<!--        </ion-card-content>-->
-      </ion-card>
+<!--      <ion-card (click)="goPlayground()">-->
+<!--        <img alt="AI PlayGround" src="https://www.wrenchboard.com/assets/images/apps/ai-playground.jpg" />-->
+<!--        <ion-card-header>-->
+<!--&lt;!&ndash;          <ion-card-title>Card Title</ion-card-title>&ndash;&gt;-->
+<!--          <ion-card-subtitle>Artificial Intelligence Playground</ion-card-subtitle>-->
+<!--        </ion-card-header>-->
+
+<!--&lt;!&ndash;        <ion-card-content>&ndash;&gt;-->
+<!--&lt;!&ndash;          Here's a small text description for the&ndash;&gt;-->
+<!--&lt;!&ndash;        </ion-card-content>&ndash;&gt;-->
+<!--      </ion-card>-->
 
 <!--      <ion-card>-->
 <!--        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />-->
@@ -76,9 +89,13 @@
 
   </div>
   <ng-template #elseFulltag>
-    <div class="offer">
-      <div class="bg_image back_image" [style.backgroundImage]="'url('+offerBanner+')'"></div>
+
+    <div *ngIf = "homebannerCount <3;">
+      <div class="offer">
+        <div class="bg_image back_image" [style.backgroundImage]="'url('+offerBanner+')'"></div>
+      </div>
     </div>
+
     <div  *ngFor="let item of bannerData; let i = index" class="bg_white {{item.short_style}}  {{item.card_type}} "  (click)="onDetails(item)">
       <div class="list">
         <div *ngIf="item.banner_location === 'URL' ">
diff --git a/src/app/pages/home/home.page.scss b/src/app/pages/home/home.page.scss
index 394cb61..13be2c3 100644
--- a/src/app/pages/home/home.page.scss
+++ b/src/app/pages/home/home.page.scss
@@ -38,6 +38,35 @@ ion-header {
     }
   }
 }
+.fam1{
+  margin:10px 0px 10px 0px;
+  border-radius: 10px;
+  min-height: 100px;
+  .famleft{
+    background-image: url("https://www.wrenchboard.com/assets/images/apps/family/kids-waiting.jpg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    width:100%;
+    height: 130px;
+    border-radius: 10px 0px 0px 10px;
+  }
+  .pend-row{
+    border-radius: 10px;
+    background-color: aliceblue;
+    margin: 5px 0px 10px 0px;
+    padding: 2px;
+  }
+  .mid_place{
+    margin: auto;
+    text-align: center;
+    .sug_text{
+      font-weight: bolder;
+      font-size: 14px;
+      padding: 5px;
+    }
+  }
+}
+
 ion-card{
   margin: 10px 0px 10px 0px;
 }
diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts
index 5716210..f45edbd 100644
--- a/src/app/pages/home/home.page.ts
+++ b/src/app/pages/home/home.page.ts
@@ -12,7 +12,7 @@ import { OnesignalService } from 'src/app/services/onesignal.service';//
   styleUrls: ['./home.page.scss'],
 })
 export class HomePage implements OnInit {
-
+  homebannerCount:number=0;
   firstname: string = '';
   active_job_count:number = 0;
   blogData: [];
@@ -103,6 +103,7 @@ export class HomePage implements OnInit {
           this.bannerResult = bannerResult;
           console.log("BANNERS RETURN->", this.bannerResult);
           this.bannerData = this.bannerResult.result_list;
+          this.homebannerCount = this.bannerData.length;
          // debugger;
           console.log("BANNERS RETURN DATA->", this.bannerData);
         //  this.blogDataService.setBlogData(this.blogResult.blog_data);